@duetds/components 10.0.0-alpha.8 → 10.0.0

package/lib/esm/duet-pagination_2.entry.js

@@ -1,15 +1,15 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-fa810c91.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { c as createID } from './create-id-149a1b6d.js';
-import { d as debounce } from './js-utils-9b9e0039.js';
-import { k as isArrowKey, l as isNumber, d as isArrowLeftKey, b as isArrowUpKey, a as isArrowRightKey, c as isArrowDownKey, m as isMinusKey, n as isPlusKey } from './keyboard-utils-daf80d44.js';
-import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-35eb1c9f.js';
-import { p as parsePossibleJSON } from './string-utils-192eb3c8.js';
-import { b as breakpointTokensUpTo, a as breakpointToToken } from './token-utils-b9ba8c5e.js';
-import './tokens.module-2d02f5ff.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-EZOAO_vc.js';
+import { i as inheritGlobalTheme } from './themeable-component-spmVa3d3.js';
+import { c as createID } from './create-id-Cfr_DJqU.js';
+import { d as debounce } from './js-utils-BlUsLmbQ.js';
+import { j as isArrowKey, k as isNumber, d as isArrowLeftKey, e as isArrowUpKey, f as isArrowRightKey, g as isArrowDownKey, l as isMinusKey, m as isPlusKey } from './keyboard-utils-Db8rvjPI.js';
+import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-COd-eoxb.js';
+import { p as parsePossibleJSON } from './string-utils-C6E9F6QT.js';
+import { b as breakpointTokensUpTo, a as breakpointToToken } from './token-utils-Dks4GBDa.js';
+import './tokens.module-BDAqOMlM.js';
 
 const shouldDisplayNavigation = (visibleItems, total, take) => {
     if (visibleItems * 2 > total / take) {
@@ -18,76 +18,57 @@ const shouldDisplayNavigation = (visibleItems, total, take) => {
     return true;
 };
 
-const duetPaginationCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline-block;margin:0 auto}.duet-pagination-nav{position:relative}.duet-pagination ::part(button){border:0}.duet-pagination,.duet-pagination li{display:flex;flex-wrap:wrap;gap:0.1rem;align-items:center}.duet-pagination-item-is-active .duet-pagination-page-number{border-bottom-color:inherit;border-bottom-style:solid;border-bottom-width:2px}.duet-pagination duet-button{width:30px;min-width:36px;font-weight:600;text-decoration:none;border-left-width:0}.duet-pagination-overlay{position:absolute;top:1rem;z-index:300;width:100%;text-align:center}.duet-pagination.duet-pagination-is-dimmed{opacity:0.5}.duet-pagination .duet-pagination-select{margin:0 4px 0 12px !important}.duet-pagination-total-pages{margin:0;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600 !important;line-height:1.25;color:rgb(8, 42, 77);text-align:left}:host(.duet-theme-turva) .duet-pagination-total-pages{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}";
-const DuetPaginationStyle0 = duetPaginationCss;
+const duetPaginationCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;display:inline-block;margin:0 auto}.duet-pagination-nav{position:relative}.duet-pagination ::part(button){border:0}.duet-pagination,.duet-pagination li{display:flex;flex-wrap:wrap;gap:0.1rem;align-items:center}.duet-pagination-item-is-active .duet-pagination-page-number{border-bottom-color:inherit;border-bottom-style:solid;border-bottom-width:2px}.duet-pagination duet-button{width:30px;min-width:36px;font-weight:600;text-decoration:none;border-left-width:0}.duet-pagination-overlay{position:absolute;top:1rem;z-index:300;width:100%;text-align:center}.duet-pagination.duet-pagination-is-dimmed{opacity:0.5}.duet-pagination .duet-pagination-select{margin:0 4px 0 12px !important}.duet-pagination-total-pages{margin:0;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600 !important;line-height:1.25;color:rgb(8, 42, 77);text-align:left}:host(.duet-theme-turva) .duet-pagination-total-pages{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}:host(.duet-theme-turva2.duet-theme-turva) .duet-pagination-total-pages{color:rgb(23, 42, 59)}";
 
 const DuetPagination = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.duetPageChange = createEvent(this, "duetPageChange", 3);
         this.listId = createID("duet-pagination-list");
-        // not in state because we don't want to trigger a render
-        this.firstRenderDone = false;
-        this.handleMediaQueryChange = (mq) => {
-            this.matchesCompactBreakpoint = breakpointTokensUpTo.includes(this.compactBreakpoint) ? mq.matches : !mq.matches;
-        };
-        // called from the watcher and used to make sure any changed to current also updates the internal section index
-        this.actionChain = async (after, before) => {
-            if (after === 0) {
-                this.current = 1;
-            }
-            else if (after > this.totalPages) {
-                this.current = this.totalPages;
-            }
-            else if (before !== after) {
-                const calculatedSectionIndex = Math.ceil(after / this.visibleItems) - 1;
-                if (calculatedSectionIndex !== this.internalSectionIndex) {
-                    this.internalSectionIndex = calculatedSectionIndex;
-                    await this.setFocus();
-                }
-            }
-            return true;
-        };
-        //helper to emit relevant page events
-        this.emitPageEvent = (ev, passedPage) => {
-            const page = Number(passedPage || this.current);
-            this.duetPageChange.emit({
-                component: "duet-pagination",
-                from: page * this.take,
-                to: page * this.take + this.take,
-                current: page,
-                take: this.take,
-                type: "page",
-                originalEvent: ev,
-            });
-        };
-        // this will return the entered number, or the current page if the user presses enter
-        this.getEnteredNumber = debounce(ev => {
-            this.emitPageEvent(ev, this.numbersStore);
-            this.current = Number(this.numbersStore);
-            this.numbersStore = "";
-            this.duetPageChange.emit({
-                component: "duet-pagination",
-                from: this.current * this.take,
-                to: this.current * this.take + this.take,
-                current: this.current,
-                take: this.take,
-                type: "jump",
-                originalEvent: ev,
-            });
-        }, 500);
         this.processedPageLinks = null;
         this.numbersStore = "";
         this.matchesCompactBreakpoint = false;
+        /**
+         * State() variables
+         * @internal
+         */
         this.totalPages = 10;
+        /**
+         * State() variables
+         * @internal
+         */
         this.internalSectionIndex = 0;
+        /**
+         * Theme of the pagination.
+         */
         this.theme = "";
+        /**
+         * Makes the controls of pagination component disabled.
+         */
         this.disabled = false;
+        /**
+         * Variation of the paginator (compact and default supported)
+         */
         this.variation = "default";
+        /**
+         * Described By id
+         */
         this.accessibleDescribedBy = undefined;
+        /**
+         * Details of the component
+         */
         this.accessibleDetails = undefined;
+        /**
+         * String of id's that indicate alternative labels elements
+         */
         this.accessibleLabelledBy = undefined;
+        /**
+         * Aria description the button
+         */
         this.accessibleDescription = undefined;
+        /**
+         * Default pagination labels
+         */
         this.accessibleLabelsDefaults = {
             en: {
                 next_page: "Next page",
@@ -129,14 +110,84 @@ const DuetPagination = class {
                 next_section: "Visa nästa {0} sidnummer, skrivbordsläsare ska använda piltangenterna för att navigera",
             },
         };
+        /**
+         * Default pagination labels
+         */
         this.accessibleLabels = getLocaleString(this.accessibleLabelsDefaults);
+        /**
+         * The size of the take, when paginating.
+         */
         this.take = 5;
+        /**
+         * Amount of visible page numbers to show
+         */
         this.visibleItems = 5;
+        /**
+         * The total size of the paginating data
+         */
         this.total = 1000;
+        /**
+         * Breakpoint at which the pagination should be rendered as compact with a select element
+         */
         this.compactBreakpoint = "x-small";
+        /**
+         * Used to indicate which dom element with ID this element controls
+         */
         this.ariaControls = "";
+        /**
+         * The current page
+         */
         this.current = 1;
-        this.pageLinks = undefined;
+        // not in state because we don't want to trigger a render
+        this.firstRenderDone = false;
+        this.handleMediaQueryChange = (mq) => {
+            this.matchesCompactBreakpoint = breakpointTokensUpTo.includes(this.compactBreakpoint) ? mq.matches : !mq.matches;
+        };
+        // called from the watcher and used to make sure any changed to current also updates the internal section index
+        this.actionChain = async (after, before) => {
+            if (after === 0) {
+                this.current = 1;
+            }
+            else if (after > this.totalPages) {
+                this.current = this.totalPages;
+            }
+            else if (before !== after) {
+                const calculatedSectionIndex = Math.ceil(after / this.visibleItems) - 1;
+                if (calculatedSectionIndex !== this.internalSectionIndex) {
+                    this.internalSectionIndex = calculatedSectionIndex;
+                    await this.setFocus();
+                }
+            }
+            return true;
+        };
+        //helper to emit relevant page events
+        this.emitPageEvent = (ev, passedPage) => {
+            const page = Number(passedPage || this.current);
+            this.duetPageChange.emit({
+                component: "duet-pagination",
+                from: page * this.take,
+                to: page * this.take + this.take,
+                current: page,
+                take: this.take,
+                type: "page",
+                originalEvent: ev,
+            });
+        };
+        // this will return the entered number, or the current page if the user presses enter
+        this.getEnteredNumber = debounce(ev => {
+            this.emitPageEvent(ev, this.numbersStore);
+            this.current = Number(this.numbersStore);
+            this.numbersStore = "";
+            this.duetPageChange.emit({
+                component: "duet-pagination",
+                from: this.current * this.take,
+                to: this.current * this.take + this.take,
+                current: this.current,
+                take: this.take,
+                type: "jump",
+                originalEvent: ev,
+            });
+        }, 500);
     }
     watchPropTotalHandler( /*newValue: boolean, oldValue: boolean*/) {
         this.calculatePageTake();
@@ -343,32 +394,32 @@ const DuetPagination = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '449300e925c6e0f4b9683b2f9de2d2da3cfde6df', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: '88a063b0659badefc26f60d6f9da8a1a65361312', role: "navigation", "aria-labelledby": this.accessibleLabelledBy ? `${this.accessibleLabelledBy} ${this.listId}` : this.listId, "aria-describedby": this.accessibleDescribedBy ? `${this.accessibleDescribedBy} ${this.listId}` : this.listId, "aria-descriptions": this.accessibleDescription, "aria-details": this.accessibleDetails, ref: el => (this.nativeNav = el), "aria-controls": this.ariaControls, class: {
+        return (h(Host, { key: '52e784473ef29848499981e51ce1306b85a6982e', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: 'c6bb124db6d838e10370f48544b86a9f7619b0e9', role: "navigation", "aria-labelledby": this.accessibleLabelledBy ? `${this.accessibleLabelledBy} ${this.listId}` : this.listId, "aria-describedby": this.accessibleDescribedBy ? `${this.accessibleDescribedBy} ${this.listId}` : this.listId, "aria-descriptions": this.accessibleDescription, "aria-details": this.accessibleDetails, ref: el => (this.nativeNav = el), "aria-controls": this.ariaControls, class: {
                 "duet-pagination-nav": true,
                 [`duet-pagination-variation-${this.variation}`]: true,
-            } }, this.numbersStore !== "" && (h("div", { key: '9464743e61860868dddc9be141f020fc7c1e417e', "aria-live": "assertive", "aria-relevant": "text", class: "duet-pagination-overlay", "aria-label": `${this.accessibleLabels.jump_to} ${this.numbersStore}`, part: "navigation-overlay" }, h("duet-badge", { key: 'b646cbc19b45867567148f1511a6810328c6c409', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: '1f0e1b5ca2a7b27ad9ecc06ba8f1d558a1664a31', id: this.listId, class: {
+            } }, this.numbersStore !== "" && (h("div", { key: '5796a23be63400e02cdcda3547ba16b5095efb2d', "aria-live": "assertive", "aria-relevant": "text", class: "duet-pagination-overlay", "aria-label": `${this.accessibleLabels.jump_to} ${this.numbersStore}`, part: "navigation-overlay" }, h("duet-badge", { key: 'ae244394fde7f973460ad58c73b0188c2a4fac47', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: '8d0eb963238e39d216193a48562142b3be082cbb', id: this.listId, class: {
                 "duet-pagination": true,
                 "duet-pagination-is-dimmed": this.numbersStore !== "",
-            }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: '776b63a83cee29edc126dab88fefb5a86aa45a2f', class: {
+            }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: 'd7e1fda8280ef37a4e6a9a035651faa3812dd609', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'b9b3c00bd00813ad6f610d9f0a33d4713c65165d', disabled: (this.internalSectionIndex === 0 && this.current <= 1) || this.disabled, "data-direction": "back", accessibleLabel: this.accessibleLabels.first_page, title: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), "icon-name": "action-move-to-first", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }))), h("li", { key: '41fa9271eebd307d67791c6671f898738d02614f', class: {
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '286dda612fa7b6f2149f75dc57124d5eb6decdb2', disabled: (this.internalSectionIndex === 0 && this.current <= 1) || this.disabled, "data-direction": "back", accessibleLabel: this.accessibleLabels.first_page, title: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), "icon-name": "action-move-to-first", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }))), h("li", { key: '7dda62b7807922dcef3cd2d16f0bc66bfe134ea4', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '9625be7391a1c4498117644c382101f181a46cc4', disabled: !!((this.internalSectionIndex === 0 && this.current <= 1) ||
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'e2274296bc1bee4ccc388c0db9bb0d93d24c835b', disabled: !!((this.internalSectionIndex === 0 && this.current <= 1) ||
                 (this.current <= 1 && this.processedPageLinks) ||
-                this.disabled), "data-direction": "back", onClick: e => this.onMouseHandler(e, -1), "accessible-label": this.accessibleLabels.previous_page, title: this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current - 2] : undefined })), this.internalSectionIndex !== 0 && this.shouldDisplayNavigation() && (h(Fragment, { key: 'a80187a03cdab00117d96036acd3ca33d4c34a5f' }, h("li", { key: 'c4015c0ae15c5b28c63d5227a328ae11d5c1ae3f', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '78456ddf3a387c486d7740afb20133cba49d5987', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-jump-back", "center-text": "true", variation: "plain", color: this.theme !== "turva" ? "secondary" : "secondary-turva", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }, h("div", { key: 'd8268f8d9d15b500166ec843cc069e437f561a53', class: "duet-pagination-page-number" }, "1"))), h("li", { key: '9029fdef07b0dee5f81f967d57231c0a2a6ea64b', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '33415416248c285c99b2540443684d32bd36a973', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-dots-back", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1), theme: this.theme }, h("div", { key: 'd652742e05db9b4e3c94c3fdc0ecc2501b2194a0', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026"))))), (this.shouldDisplayNavigation() && this.renderPageNumbers()) || this.renderSelect(), (this.internalSectionIndex + 1) * this.visibleItems < this.totalPages &&
-            this.shouldDisplayNavigation() && (h(Fragment, { key: '3e116f6f5ad9e674f0d0ebb1a3c19a2ae3c6cb9c' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: '080dec831309a52dd2f3125c43938b600cd89549', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: 'b53fb49a214247bacd11b604eee45d715099b63b', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-dots-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1), theme: this.theme }, h("div", { key: '0b9394a0812fcfebbd1932fb08f95661561c5539', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: '6345044085eda43da59db094041f39fec2d4d16a', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'dc08fab187e6468e7d19cfdd4c12d1af69f922e6', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-jump-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), theme: this.theme, url: this.processedPageLinks
+                this.disabled), "data-direction": "back", onClick: e => this.onMouseHandler(e, -1), "accessible-label": this.accessibleLabels.previous_page, title: this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current - 2] : undefined })), this.internalSectionIndex !== 0 && this.shouldDisplayNavigation() && (h(Fragment, { key: '3f9b85167c0a76403aa15f29f1c1f1288ad0e4d0' }, h("li", { key: 'e64af2416ffc7613778f7da6cb788d4a72f4eef0', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'ed827f262c1d9672d8a0da1209d214cf0201c14c', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-jump-back", "center-text": "true", variation: "plain", color: this.theme !== "turva" ? "secondary" : "secondary-turva", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }, h("div", { key: '123675ff6455a2af26041f5887226e4c0ae2e92d', class: "duet-pagination-page-number" }, "1"))), h("li", { key: '937ef0dd5be48ea9cc25e0d76183cf871435fae1', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: 'b943f95c41d2325cbc8f4ee8654feb079f0bde26', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-dots-back", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1), theme: this.theme }, h("div", { key: '0abefda80e80fd7299d0e6b1a6d474f5f0a004ab', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026"))))), (this.shouldDisplayNavigation() && this.renderPageNumbers()) || this.renderSelect(), (this.internalSectionIndex + 1) * this.visibleItems < this.totalPages &&
+            this.shouldDisplayNavigation() && (h(Fragment, { key: '20184dc0cfdf26f29d63dcfbfe1ae2c4837a56bc' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: '6bb0d7a4742be774e7b453dd091b8ec9bc4ddb68', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '5a6c286824409fc75f08fcb2c5144bbeb19d95d5', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-dots-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1), theme: this.theme }, h("div", { key: '8b8bb2c2b47d687d20e556840d5960dab27c90b6', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: '762f4434753385d3599f159d62ca921def9a18a2', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '5dd3404fa6a43253b611c8c35045041136a9241e', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-jump-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), theme: this.theme, url: this.processedPageLinks
                 ? this.processedPageLinks[this.processedPageLinks.length - 1]
-                : undefined }, h("div", { key: '2c20e47c2f6bf96975d244733874173dea10e0a6', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: 'f67a8f288896785be77eb3951195c94ed1d75d75', class: {
+                : undefined }, h("div", { key: '8e3876cbbbf37cd2f2e2e3cc527b5553479b3e18', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: '68e1f7e8c908396d2564d1fb30880d726dea24cd', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '9cbba60ce9baa1e4cc33a07a3250d72d44c2fe5f', disabled: !!((this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'edfe5c34fbdd5406dcb10355ef7027da35279af2', disabled: !!((this.current === this.totalPages &&
                 this.internalSectionIndex === Math.ceil(this.totalPages / this.visibleItems) - 1) ||
-                (this.current === this.totalPages && this.processedPageLinks)) || this.disabled, class: "duet-date-dialog-next", "accessible-label": this.accessibleLabels.next_page, title: this.accessibleLabels.next_page, onClick: e => this.onMouseHandler(e, 1), "icon-name": "action-move-to-next", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current] : undefined })), (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: '3f0f55d1d85abe02331e1112737b39dbbb40ac29', class: {
+                (this.current === this.totalPages && this.processedPageLinks)) || this.disabled, class: "duet-date-dialog-next", "accessible-label": this.accessibleLabels.next_page, title: this.accessibleLabels.next_page, onClick: e => this.onMouseHandler(e, 1), "icon-name": "action-move-to-next", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current] : undefined })), (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: '69ace8f9afc0c82112a6ac194d7fc5ef5041f179', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '666860a5ae40ae73e220ad133e7707c989f77ae2', disabled: (this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '8ff4d39efec69737f39608581d72bfafc174a513', disabled: (this.current === this.totalPages &&
                 this.internalSectionIndex === Math.ceil(this.totalPages / this.visibleItems) - 1) ||
                 this.disabled, accessibleLabel: this.accessibleLabels.last_page, title: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), "icon-name": "action-move-to-last", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.totalPages - 1] : undefined })))))));
     }
@@ -379,10 +430,9 @@ const DuetPagination = class {
         "pageLinks": ["refresh"]
     }; }
 };
-DuetPagination.style = DuetPaginationStyle0;
+DuetPagination.style = duetPaginationCss;
 
-const duetRangeStepperCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline-block;margin:0 auto}.duet-range-stepper{display:flex;flex-wrap:wrap;gap:0;align-items:baseline;justify-content:center;min-width:30px;min-height:30px;font-weight:600;text-decoration:none;border-left-width:0}.duet-range-stepper{white-space:nowrap}.duet-range-stepper .duet-range-step-counter{font-weight:600;color:rgb(8, 42, 77)}.duet-range-stepper ::part(button){border:0}";
-const DuetRangeStepperStyle0 = duetRangeStepperCss;
+const duetRangeStepperCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;display:inline-block;margin:0 auto}.duet-range-stepper{display:flex;flex-wrap:wrap;gap:0;align-items:baseline;justify-content:center;min-width:30px;min-height:30px;font-weight:600;text-decoration:none;border-left-width:0}.duet-range-stepper{white-space:nowrap}.duet-range-stepper .duet-range-step-counter{font-weight:600;color:rgb(8, 42, 77)}.duet-range-stepper ::part(button){border:0}:host(.duet-theme-turva2) .duet-theme-turva .duet-range-step-counter{color:rgb(23, 42, 59)}";
 
 const DuetRangeStepper = class {
     constructor(hostRef) {
@@ -390,19 +440,34 @@ const DuetRangeStepper = class {
         this.duetRangeStepUpdate = createEvent(this, "duetRangeStepUpdate", 7);
         this.leftBn = createID("duetRangeStepper-left");
         this.rightBn = createID("duetRangeStepper-right");
-        this.handleClick = (e, direction) => {
-            e.preventDefault();
-            this.stepIndex += direction;
-            this.clampStepIndex();
-            this.handleStepClick(e);
-        };
         this.buttonLeftDisabled = false;
         this.buttonRightDisabled = false;
+        /**
+         * Theme of the component.
+         */
         this.theme = "";
+        /**
+         * Makes the controls of range-stepper component disabled.
+         */
         this.disabled = false;
+        /**
+         * Start value
+         * @default 1
+         */
         this.stepIndex = 1;
+        /**
+         * How big is the step
+         * @default 50
+         */
         this.stepSize = 50;
+        /**
+         * Total of
+         * @default undefined
+         */
         this.total = 1000;
+        /**
+         * Default range stepper labels
+         */
         this.ariaLabelsDefaults = {
             en: {
                 next_increment: "Next range increment",
@@ -420,8 +485,20 @@ const DuetRangeStepper = class {
                 x_of_y: "{0}–{1} av {2}",
             },
         };
+        /**
+         * Default pagination labels
+         */
         this.ariaLabels = getLocaleString(this.ariaLabelsDefaults);
+        /**
+         * Used to indicate which dom element with ID this element controls
+         */
         this.ariaControls = "";
+        this.handleClick = (e, direction) => {
+            e.preventDefault();
+            this.stepIndex += direction;
+            this.clampStepIndex();
+            this.handleStepClick(e);
+        };
     }
     watchStepIndexStateHandler(newValue) {
         if (this.leftBnRef && this.rightBnRef) {
@@ -542,10 +619,10 @@ const DuetRangeStepper = class {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: 'c9b11ce90897f1f447451ee5fb9a6c6e6beb6f28', class: {
+        return (h("div", { key: '2a89e50996cd8e4042f3346509ddfa57d0bd52f1', class: {
                 "duet-range-stepper": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, h("span", { key: '4398c6aa7367285c372aea99bcc75a3eeea66c7a', class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { key: '315adfd1f29f46f3e04f97b06b3fcd5906dd294c', disabled: this.disabled || this.buttonLeftDisabled, class: "duet-range-step-button duet-range-step-minus", onClick: e => this.handleClick(e, -1), id: this.leftBn, "accessible-label": `${this.ariaLabels.previous_increment} ${this.generatePreviousIncrementLabel()}`, ref: el => (this.leftBnRef = el), part: "navigation-arrow", iconName: "action-arrow-left-small", title: "" }), h("duet-action-button", { key: '045f85fb0942d3841b51bfc1dfcc954d41b0554d', disabled: this.disabled || this.buttonRightDisabled, class: "duet-range-step-button duet-range-step-plus", onClick: e => this.handleClick(e, 1), "accessible-label": `${this.ariaLabels.next_increment} ${this.generateNextIncrementLabel()}`, id: this.rightBn, ref: el => (this.rightBnRef = el), part: "navigation-arrow", iconName: "action-arrow-right-small", title: "" })));
+            }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, h("span", { key: 'aaf1114df81cf75124d221b335b34836eab22c02', class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { key: 'b1b61bd073925f8bb4ecbbe04a90ed652f029254', disabled: this.disabled || this.buttonLeftDisabled, class: "duet-range-step-button duet-range-step-minus", onClick: e => this.handleClick(e, -1), id: this.leftBn, "accessible-label": `${this.ariaLabels.previous_increment} ${this.generatePreviousIncrementLabel()}`, ref: el => (this.leftBnRef = el), part: "navigation-arrow", iconName: "action-arrow-left-small", title: "" }), h("duet-action-button", { key: 'de3659fcb369d0501251878bf6a9edaa334893cf', disabled: this.disabled || this.buttonRightDisabled, class: "duet-range-step-button duet-range-step-plus", onClick: e => this.handleClick(e, 1), "accessible-label": `${this.ariaLabels.next_increment} ${this.generateNextIncrementLabel()}`, id: this.rightBn, ref: el => (this.rightBnRef = el), part: "navigation-arrow", iconName: "action-arrow-right-small", title: "" })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -553,6 +630,6 @@ const DuetRangeStepper = class {
         "stepSize": ["watchStepSizeStateHandler"]
     }; }
 };
-DuetRangeStepper.style = DuetRangeStepperStyle0;
+DuetRangeStepper.style = duetRangeStepperCss;
 
 export { DuetPagination as duet_pagination, DuetRangeStepper as duet_range_stepper };

package/lib/esm/duet-panel.entry.js

@@ -0,0 +1,50 @@
+/*!
+ * Built with Duet Design System
+ */
+import { r as registerInstance, h, H as Host, g as getElement } from './index-EZOAO_vc.js';
+import { i as inheritGlobalTheme } from './themeable-component-spmVa3d3.js';
+
+const duetPanelCss = ":host {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  background: transparent;\n  border: 0;\n  position: relative;\n  display: block;\n  width: 100%;\n  margin: 8px 0 20px 0;\n}\n@container (width > 36em) {\n  :host {\n    margin: 12px 0 28px 0;\n  }\n}\n\n:host(.duet-m-0) {\n  margin: 0;\n}\n\n.duet-panel {\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  color: rgb(8, 42, 77);\n  background-color: rgb(255, 255, 255);\n  border: 0 solid rgb(212, 223, 229);\n  border-radius: 16px;\n}\n.duet-panel.duet-theme-turva {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  color: rgb(23, 28, 58);\n  border-color: rgb(222, 224, 228);\n}\n.duet-panel.padding-small {\n  padding: 16px;\n  border-radius: 12px;\n}\n@container (width > 36em) {\n  .duet-panel.padding-small {\n    padding: 20px;\n  }\n}\n.duet-panel.padding-medium {\n  padding: 20px;\n}\n@container (width > 36em) {\n  .duet-panel.padding-medium {\n    padding: 28px;\n  }\n}\n.duet-panel.padding-large {\n  padding: 28px;\n}\n@container (width > 36em) {\n  .duet-panel.padding-large {\n    padding: 36px;\n  }\n}\n.duet-panel.border {\n  border-width: 1px;\n}\n.duet-panel.secondary {\n  background-color: rgb(245, 248, 250);\n}\n.duet-panel.secondary.duet-theme-turva {\n  background-color: rgb(245, 247, 250);\n}\n.duet-panel.accent {\n  background-color: rgb(240, 247, 250);\n  border-color: rgb(198, 225, 238);\n}\n.duet-panel.accent.duet-theme-turva {\n  background-color: rgb(245, 247, 250);\n  border-color: rgb(199, 202, 207);\n}\n.duet-panel.accent.secondary {\n  background-color: rgb(217, 236, 245);\n}\n.duet-panel.accent.secondary.duet-theme-turva {\n  background-color: rgb(222, 224, 228);\n}\n\n:host(.duet-theme-turva2) .duet-panel.duet-theme-turva {\n  color: rgb(23, 42, 59);\n  border-color: rgb(212, 221, 226);\n}\n:host(.duet-theme-turva2) .duet-panel.duet-theme-turva.secondary {\n  background-color: rgb(245, 246, 247);\n}\n:host(.duet-theme-turva2) .duet-panel.duet-theme-turva.accent {\n  background-color: rgb(253, 247, 242);\n  border-color: rgb(241, 202, 178);\n}\n:host(.duet-theme-turva2) .duet-panel.duet-theme-turva.accent.secondary {\n  background-color: rgb(251, 225, 209);\n}";
+
+const DuetPanel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Theme of the panel.
+         */
+        this.theme = "";
+        /**
+         * Controls the padding of the component. Padding is automatically responsive.
+         */
+        this.padding = "medium";
+        /**
+         * The color variation of the panel. Combination of palette ("default", "accent") and palette variation ("primary",
+         * "secondary"). You can ommit "default" and "primary" - they are the defaults.
+         */
+        this.variation = "";
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+    }
+    render() {
+        return (h(Host, { key: 'ce1d86a1f797745dc3ef621da3dbf66ebaae2953', class: { "duet-m-0": this.margin === "none" } }, h("section", { key: '2c4624a5479f5e23118c83acd2578dafbc6b0a8a', "aria-label": this.accessibleLabel, "aria-labelledby": this.accessibleLabelledBy, "aria-describedby": this.accessibleDescribedBy, class: {
+                "duet-panel": true,
+                "duet-theme-turva": this.theme === "turva",
+                [this.variation.split("-")[0]]: true,
+                [this.variation.split("-")[1]]: true,
+                [`padding-${this.padding}`]: true,
+                border: this.border,
+            } }, h("slot", { key: 'c14876d907530fa3470fe71e0fdecd998010cb29' }))));
+    }
+    get element() { return getElement(this); }
+};
+DuetPanel.style = duetPanelCss;
+
+export { DuetPanel as duet_panel };