Pagination

import '@rhds/elements/rh-pagination/rh-pagination.js';
```

<rh-pagination>
  <ol>
    <li><a href="#">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
    <li><a href="#5">5</a></li>
  </ol>
</rh-pagination>

<link rel="stylesheet" href="../rh-pagination-lightdom.css">
```

import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
import '@rhds/elements/rh-pagination/rh-pagination.js';
```

rh-context-demo > * {
  margin-block-end: var(--rh-space-2xl, 32px);
}
```

<rh-context-demo>
  <rh-pagination>
    <ol>
      <li><a href="#">1</a></li>
      <li><a href="#2">2</a></li>
      <li><a href="#3">3</a></li>
      <li><a href="#4">4</a></li>
      <li><a href="#5">5</a></li>
    </ol>
  </rh-pagination>

  <rh-pagination variant="open">
    <ol>
      <li><a href="#">1</a></li>
      <li><a href="#2">2</a></li>
      <li><a href="#3">3</a></li>
      <li><a href="#4">4</a></li>
      <li><a href="#5">5</a></li>
    </ol>
  </rh-pagination>

  <rh-pagination size="sm">
    <ol>
      <li><a href="#">1</a></li>
      <li><a href="#2">2</a></li>
      <li><a href="#3">3</a></li>
      <li><a href="#4">4</a></li>
      <li><a href="#5">5</a></li>
    </ol>
  </rh-pagination>
</rh-context-demo>

<link rel="stylesheet" href="../rh-pagination-lightdom.css">
```

import '@rhds/elements/rh-pagination/rh-pagination.js';
```

#constrain {
  max-width: var(--rh-breakpoint-xs-max, 767px);
}
```

<rh-pagination id="constrain">
  <ol>
    <li><a href="#">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
    <li><a href="#5">5</a></li>
  </ol>
</rh-pagination>

<link rel="stylesheet" href="../rh-pagination-lightdom.css">
```

rh-pagination {
  margin-block-end: var(--rh-space-lg, 16px);
}
```

import '@rhds/elements/rh-pagination/rh-pagination.js';
```

<rh-pagination>
  <ol>
    <li><a href="#">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
    <li><a href="#5">5</a></li>
    <li><a href="#6">6</a></li>
    <li><a href="#7">7</a></li>
    <li><a href="#8">8</a></li>
    <li><a href="#9">9</a></li>
    <li><a href="#10">10</a></li>
    <li><a href="#11">11</a></li>
    <li><a href="#12">12</a></li>
    <li><a href="#13">13</a></li>
    <li><a href="#14">14</a></li>
    <li><a href="#15">15</a></li>
    <li><a href="#16">16</a></li>
    <li><a href="#17">17</a></li>
    <li><a href="#18">18</a></li>
    <li><a href="#19">19</a></li>
    <li><a href="#20">20</a></li>
  </ol>
</rh-pagination>

<p>Paginators with many pages must overflow.</p>

<link rel="stylesheet" href="../rh-pagination-lightdom.css">
```

rh-pagination::part(numeric) {
  display: none;
}
```

import '@rhds/elements/rh-pagination/rh-pagination.js';
```

<rh-pagination>
  <ol>
    <li><a href="#">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
    <li><a href="#5">5</a></li>
  </ol>
</rh-pagination>

<link rel="stylesheet" href="../rh-pagination-lightdom.css">
```

#constrain {
  max-width: var(--rh-breakpoint-xs-max, 767px);
}
```

import '@rhds/elements/rh-pagination/rh-pagination.js';
```

<rh-pagination id="constrain" variant="open" size="sm">
  <ol>
    <li><a href="#">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
    <li><a href="#5">5</a></li>
  </ol>
</rh-pagination>

<link rel="stylesheet" href="../rh-pagination-lightdom.css">
```

#constrain {
  max-width: var(--rh-breakpoint-xs-max, 767px);
}
```

import '@rhds/elements/rh-pagination/rh-pagination.js';
```

<rh-pagination id="constrain" variant="open">
  <ol>
    <li><a href="#">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
    <li><a href="#5">5</a></li>
  </ol>
</rh-pagination>

<link rel="stylesheet" href="../rh-pagination-lightdom.css">
```

import '@rhds/elements/rh-pagination/rh-pagination.js';
```

<rh-pagination variant="open">
  <ol>
    <li><a href="#">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
    <li><a href="#5">5</a></li>
  </ol>
</rh-pagination>

<link rel="stylesheet" href="../rh-pagination-lightdom.css">
```

fieldset,
p,
dd {
  margin-block-end: var(--rh-space-lg, 16px)
}
```

import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-pagination/rh-pagination.js';

const $ = s => document.querySelector(s);
const $$ = s => document.querySelectorAll(s);

for (const element of $$('rh-pagination')) {
  element.addEventListener('click', event => {
    const link = event.composedPath().find(x => x instanceof HTMLAnchorElement);
    if (link) {
      event.preventDefault();
      history.pushState(null, link.innerText, link.href);
      element.requestUpdate();
    }
  });
}

$('#add')?.addEventListener('click', function() {
  const link = document.createElement('a');
  const item = document.createElement('li');
  item.append(link);
  const i = $$('rh-pagination li').length + 1;
  link.href = `#${i}`;
  link.textContent = i;
  $('rh-pagination ol').append(item);
  $('rh-pagination').requestUpdate();
});

$('#remove')?.addEventListener('click', function() {
  $('rh-pagination li:last-child')?.remove?.();
});
```

<rh-pagination>
  <ol>
    <li><a href="#">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
    <li><a href="#5">5</a></li>
  </ol>
</rh-pagination>

<p>Paginators with 5 or fewer pages should not overflow, meaning all links should be visible.
  Once a paginator has more than 5 pages, then it must overflow, meaning some links will be hidden.
  Paginators with 9 or more pages will overflow on boths ends.</p>

<dl>
  <dt>With 5 or fewer pages</dt>
  <dd>No overflow</dd>
  <dt>With more than 5 but fewer than 9 pages</dt>
  <dd>Overflow on one side</dd>
  <dt>With more than 9 pages, active page is less than 6</dt>
  <dd>Overflow end</dd>
  <dt>With more than 9 pages, active page is greater than 6</dt>
  <dd>Overflow both</dd>
  <dt>With more than 9 pages, active page is greater than 5 less than the total (e.g. 16/20)</dt>
  <dd>Overflow start</dd>
</dl>

<fieldset>
  <legend>Adjust pages</legend>
  <rh-button id="add">Add Page</rh-button>
  <rh-button id="remove" danger="">Remove Page</rh-button>
</fieldset>



<link rel="stylesheet" href="../rh-pagination-lightdom.css">
```

import '@rhds/elements/rh-pagination/rh-pagination.js';
```

<p>צריך להיראות יותר טוב</p>
<rh-pagination id="rtl-pagination" dir="rtl">
  <span slot="go-to-page">עבור לדף</span>
  <ol>
    <li><a href="#">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
    <li><a href="#5">5</a></li>
  </ol>
</rh-pagination>

<link rel="stylesheet" href="../rh-pagination-lightdom.css">
```

#constrain {
  max-width: var(--rh-breakpoint-xs-max, 767px);
}
```

import '@rhds/elements/rh-pagination/rh-pagination.js';
```

<rh-pagination id="constrain" size="sm">
  <ol>
    <li><a href="#">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
    <li><a href="#5">5</a></li>
  </ol>
</rh-pagination>

<link rel="stylesheet" href="../rh-pagination-lightdom.css">
```

import '@rhds/elements/rh-pagination/rh-pagination.js';
```

<rh-pagination size="sm">
  <ol>
    <li><a href="#">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
    <li><a href="#5">5</a></li>
  </ol>
</rh-pagination>

<link rel="stylesheet" href="../rh-pagination-lightdom.css">
```