New paginator component

docs/changelog.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## Upcoming
 
+### Added
+
+- New `six-paginator` component (experimental).
+
 ## 5.3.1 - 2026-03-06
 
 ### Added

docs/components/component.tags.mts

@@ -1 +1 @@
-export const components = ["six-alert","six-avatar","six-badge","six-breadcrumbs","six-breadcrumbs-item","six-button","six-card","six-checkbox","six-date","six-datepicker","six-details","six-dialog","six-drawer","six-dropdown","six-error","six-error-page","six-file-list","six-file-list-item","six-file-upload","six-footer","six-group-label","six-header","six-header-dropdown-item","six-header-item","six-header-menu-button","six-icon","six-icon-button","six-input","six-item-picker","six-language-switcher","six-layout-grid","six-logo","six-main-container","six-menu","six-menu-divider","six-menu-item","six-menu-label","six-picto","six-progress-bar","six-progress-ring","six-radio","six-range","six-rating","six-root","six-search-field","six-select","six-sidebar","six-sidebar-item","six-sidebar-item-group","six-spinner","six-stage-indicator","six-switch","six-tab","six-tab-group","six-tab-panel","six-tag","six-textarea","six-tile","six-timepicker","six-tooltip"];
+export const components = ["six-alert","six-avatar","six-badge","six-breadcrumbs","six-breadcrumbs-item","six-button","six-card","six-checkbox","six-date","six-datepicker","six-details","six-dialog","six-drawer","six-dropdown","six-error","six-error-page","six-file-list","six-file-list-item","six-file-upload","six-footer","six-group-label","six-header","six-header-dropdown-item","six-header-item","six-header-menu-button","six-icon","six-icon-button","six-input","six-item-picker","six-language-switcher","six-layout-grid","six-logo","six-main-container","six-menu","six-menu-divider","six-menu-item","six-menu-label","six-paginator","six-picto","six-progress-bar","six-progress-ring","six-radio","six-range","six-rating","six-root","six-search-field","six-select","six-sidebar","six-sidebar-item","six-sidebar-item-group","six-spinner","six-stage-indicator","six-switch","six-tab","six-tab-group","six-tab-panel","six-tag","six-textarea","six-tile","six-timepicker","six-tooltip"];

docs/components/six-icon-button.md

@@ -197,6 +197,7 @@ Often icon buttons are combined with badges to signal new entries. For this simp
  - [six-date](six-date.html)
  - [six-dialog](six-dialog.html)
  - [six-drawer](six-drawer.html)
+ - [six-paginator](six-paginator.html)
  - [six-select](six-select.html)
  - [six-tab](six-tab.html)
  - [six-tab-group](six-tab-group.html)
@@ -215,6 +216,7 @@ graph TD;
   six-date --> six-icon-button
   six-dialog --> six-icon-button
   six-drawer --> six-icon-button
+  six-paginator --> six-icon-button
   six-select --> six-icon-button
   six-tab --> six-icon-button
   six-tab-group --> six-icon-button

docs/components/six-menu-item.md

@@ -111,6 +111,7 @@ Type: `Promise<void>`
 
  - [six-dropdown](six-dropdown.html)
  - [six-menu](six-menu.html)
+ - [six-paginator](six-paginator.html)
  - [six-select](six-select.html)
 
 ### Depends on
@@ -126,6 +127,7 @@ graph TD;
   six-checkbox --> six-error
   six-dropdown --> six-menu-item
   six-menu --> six-menu-item
+  six-paginator --> six-menu-item
   six-select --> six-menu-item
   style six-menu-item fill:#f9f,stroke:#333,stroke-width:4px
 ```

docs/components/six-paginator.md

@@ -0,0 +1,228 @@
+# Paginator
+
+
+## Paginator
+
+The `six-paginator` component allows navigation through paginated content.
+
+<docs-demo-six-paginator-0></docs-demo-six-paginator-0>
+
+```html
+<div style="width: 100%; height: 200px; background-color: var(--six-color-web-rock-300)">
+  <div             id="paginator-page-0"
+    style="display: grid; align-items: center; justify-content: center; text-align: center; height: 100%"
+  >
+    <p>
+      This is the content for page one! You can control the pages through the arrows, or by clicking directly on
+      the number of the page you need.
+    </p>
+    <p>For all possible parameters, as well as events, check the docs for more details!</p>
+  </div>
+  <div id="paginator-page-1" style="display: none">This is page 2</div>
+  <div id="paginator-page-2" style="display: none">This is page 3</div>
+  <div id="paginator-page-3" style="display: none">This is page 4</div>
+  <div id="paginator-page-4" style="display: none">This is page 5</div>
+</div>
+<six-paginator id="paginator-basic" total-pages="5" total-results="20"></six-paginator>
+<script type="module">
+  const paginatorBasic = document.getElementById('paginator-basic');
+  const contentPages = document.querySelectorAll('[id^="paginator-page-"]');
+
+  paginatorBasic.addEventListener('six-paginator-page-changed', (event) => {
+    contentPages.forEach((page) => {
+      page.style.display = 'none';
+    });
+    contentPages[event.detail.idx].style.display = 'block';
+  });
+</script>
+```
+
+
+
+## Basic example
+
+The simplest version of the paginator requires `total-pages` and `total-results` as parameters
+
+<docs-demo-six-paginator-1></docs-demo-six-paginator-1>
+
+```html
+<six-paginator total-pages="20" total-results="500"></six-paginator>
+```
+
+
+
+## Setting the current page
+
+Use the `current-page` attribute (0-based index) to control the active page.
+
+<docs-demo-six-paginator-2></docs-demo-six-paginator-2>
+
+```html
+<six-paginator total-pages="20" total-results="500" current-page="3"></six-paginator>
+```
+
+
+
+## Controlling the amount of pages shown and clamping
+
+Use the `length` prop to define how many page numbers are displayed. By default, if the number of total pages is greater than the `length` parameter, the list will be clamped.
+
+<docs-demo-six-paginator-3></docs-demo-six-paginator-3>
+
+```html
+<six-paginator total-pages="20" total-results="500" length="5"></six-paginator>
+```
+
+
+To override this behaviour, you can set the `clamp` parameter to `false`. This will show all available pages.
+
+<docs-demo-six-paginator-4></docs-demo-six-paginator-4>
+
+```html
+<six-paginator total-pages="12" total-results="500" clamp="false"></six-paginator>
+```
+
+
+
+## Results Per Page Options
+
+By default, three values are shown to the user so that they can choose how many items to show at once. Pass a list to `results-per-page-options` and set a default using `results-per-page`. If no default is provided, the first value of the choices will be used.
+
+<docs-demo-six-paginator-5></docs-demo-six-paginator-5>
+
+```html
+<six-paginator id="paginator-options" total-pages="15" total-results="500" results-per-page="50">
+</six-paginator>
+<script type="module">
+  const paginatorOptions = document.getElementById('paginator-options');
+  paginatorOptions.resultsPerPageOptions = ['10', '20', '50', '100'];
+</script>
+```
+
+
+
+## Disabled State
+
+Use the `disabled` prop to disable all controls.
+
+<docs-demo-six-paginator-6></docs-demo-six-paginator-6>
+
+```html
+<six-paginator total-pages="10" total-results="500" disabled></six-paginator>
+```
+
+
+
+## Slot Customization
+
+Use the `left` and `right` slots to override the default content.
+
+<docs-demo-six-paginator-7></docs-demo-six-paginator-7>
+
+```html
+<six-paginator total-pages="12" total-results="640">
+  <div slot="left">
+    <strong>Some custom content to the left</strong>
+  </div>
+
+  <div slot="right">It can be anything you want! A nice icon for example? <six-icon>house</six-icon></div>
+</six-paginator>
+```
+
+
+
+## Events
+
+The paginator emits the following events:
+
+*   `six-paginator-page-changed` – Fired when the page changes. This can be either when the user click on a number directly, or by using one of the available arrows.
+*   `six-paginator-results-per-page-changed` – Fired when the user changes their selection for the number of items to show at once.
+
+To see the events, open up the console try it yourself.
+
+<docs-demo-six-paginator-8></docs-demo-six-paginator-8>
+
+```html
+<six-paginator           total-pages="8"
+  total-results="200"
+  onchange="console.log(event)"
+  id="events-example"
+></six-paginator>
+<script type="module">
+  const paginator = document.getElementById('events-example');
+  paginator.addEventListener('six-paginator-page-changed', (event) => {
+    console.log('Page changed event fired', event.detail);
+  });
+  paginator.addEventListener('six-paginator-results-per-page-changed', (event) => {
+    console.log('Results per page changed event fired', event.detail);
+  });
+</script>
+```
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property                    | Attribute          | Description                                                                                                                            | Type                  | Default        |
+| --------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -------------- |
+| `clamp`                     | `clamp`            | Clamp the page numbers when they exceed the specified length.                                                                          | `boolean`             | `true`         |
+| `currentPage`               | `current-page`     | The current page being displayed. This must be 0 based                                                                                 | `number \| undefined` | `undefined`    |
+| `disabled`                  | `disabled`         | Disable all controls.                                                                                                                  | `boolean`             | `false`        |
+| `length`                    | `length`           | The number of clickable page numbers to show.                                                                                          | `number`              | `9`            |
+| `resultsPerPage`            | `results-per-page` | The results per page. Value must be one provided in the resultsPerPageOption. Otherwise the first value from the options will be used. | `number \| undefined` | `undefined`    |
+| `resultsPerPageOptions`     | --                 | The possible results per page. Must be a list of integers. At least one value is required.                                             | `number[]`            | `[12, 24, 48]` |
+| `totalPages` _(required)_   | `total-pages`      | The total amount of pages.                                                                                                             | `number`              | `undefined`    |
+| `totalResults` _(required)_ | `total-results`    | The total amount of results.                                                                                                           | `number`              | `undefined`    |
+
+
+## Events
+
+| Event                                    | Description                                                                                                                         | Type                                                    |
+| ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
+| `six-paginator-page-changed`             | Emitted whenever the page changes. This can be either due to one of the arrows bein pressed, or an explicit click on a page number. | `CustomEvent<SixPaginatorPageChangedPayload>`           |
+| `six-paginator-results-per-page-changed` | Emitted after the user selects a value from the results per page select.                                                            | `CustomEvent<SixPaginatorResultsPerPageChangedPayload>` |
+
+
+## Dependencies
+
+### Depends on
+
+- [six-icon-button](six-icon-button.html)
+- [six-select](six-select.html)
+- [six-menu-item](six-menu-item.html)
+
+### Graph
+```mermaid
+graph TD;
+  six-paginator --> six-icon-button
+  six-paginator --> six-select
+  six-paginator --> six-menu-item
+  six-icon-button --> six-icon
+  six-select --> six-menu-item
+  six-select --> six-dropdown
+  six-select --> six-icon-button
+  six-select --> six-icon
+  six-select --> six-input
+  six-select --> six-menu
+  six-select --> six-button
+  six-select --> six-error
+  six-menu-item --> six-checkbox
+  six-menu-item --> six-icon
+  six-checkbox --> six-error
+  six-dropdown --> six-menu-item
+  six-dropdown --> six-input
+  six-dropdown --> six-icon
+  six-dropdown --> six-menu
+  six-input --> six-icon
+  six-input --> six-error
+  six-menu --> six-menu-item
+  six-button --> six-spinner
+  style six-paginator fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+Copyright © 2021-present SIX-Group

docs/components/six-select.md

@@ -750,6 +750,10 @@ Type: `Promise<void>`
 
 ## Dependencies
 
+### Used by
+
+ - [six-paginator](six-paginator.html)
+
 ### Depends on
 
 - [six-menu-item](six-menu-item.html)
@@ -784,6 +788,7 @@ graph TD;
   six-menu --> six-menu-item
   six-icon-button --> six-icon
   six-button --> six-spinner
+  six-paginator --> six-select
   style six-select fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

docs/examples/docs-demo-six-paginator-0.vue

@@ -0,0 +1,42 @@
+<template>
+<div>
+
+        <div style="width: 100%; height: 200px; background-color: var(--six-color-web-rock-300)">
+          <div             id="paginator-page-0"
+            style="display: grid; align-items: center; justify-content: center; text-align: center; height: 100%"
+          >
+            <p>
+              This is the content for page one! You can control the pages through the arrows, or by clicking directly on
+              the number of the page you need.
+            </p>
+            <p>For all possible parameters, as well as events, check the docs for more details!</p>
+          </div>
+          <div id="paginator-page-1" style="display: none">This is page 2</div>
+          <div id="paginator-page-2" style="display: none">This is page 3</div>
+          <div id="paginator-page-3" style="display: none">This is page 4</div>
+          <div id="paginator-page-4" style="display: none">This is page 5</div>
+        </div>
+        <six-paginator id="paginator-basic" total-pages="5" total-results="20"></six-paginator>
+
+
+</div>
+</template>
+<style>
+
+</style>
+<script>
+export default {
+  name: 'docs-demo-six-paginator-0',
+  mounted() { 
+          const paginatorBasic = document.getElementById('paginator-basic');
+          const contentPages = document.querySelectorAll('[id^="paginator-page-"]');
+
+          paginatorBasic.addEventListener('six-paginator-page-changed', (event) => {
+            contentPages.forEach((page) => {
+              page.style.display = 'none';
+            });
+            contentPages[event.detail.idx].style.display = 'block';
+          });
+         }
+}
+</script>

docs/examples/docs-demo-six-paginator-1.vue

@@ -0,0 +1,16 @@
+<template>
+<div>
+
+        <six-paginator total-pages="20" total-results="500"></six-paginator>
+
+</div>
+</template>
+<style>
+
+</style>
+<script>
+export default {
+  name: 'docs-demo-six-paginator-1',
+  mounted() {  }
+}
+</script>

docs/examples/docs-demo-six-paginator-2.vue

@@ -0,0 +1,16 @@
+<template>
+<div>
+
+        <six-paginator total-pages="20" total-results="500" current-page="3"></six-paginator>
+
+</div>
+</template>
+<style>
+
+</style>
+<script>
+export default {
+  name: 'docs-demo-six-paginator-2',
+  mounted() {  }
+}
+</script>

docs/examples/docs-demo-six-paginator-3.vue

@@ -0,0 +1,16 @@
+<template>
+<div>
+
+        <six-paginator total-pages="20" total-results="500" length="5"></six-paginator>
+
+</div>
+</template>
+<style>
+
+</style>
+<script>
+export default {
+  name: 'docs-demo-six-paginator-3',
+  mounted() {  }
+}
+</script>