@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.31

package/lib/collection/components/duet-pagination/duet-pagination.js

@@ -19,68 +19,50 @@ import { shouldDisplayNavigation } from "./duet-pagination-utils";
 export class DuetPagination {
     constructor() {
         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",
@@ -122,14 +104,84 @@ export class DuetPagination {
                 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();
@@ -342,32 +394,32 @@ export class DuetPagination {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '30de52a909e492fdf1657c4bd3eebd9f2b5e7ce5', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: 'f9d6d3b7dd05fbe03ac5ce4f26a970fc0a910148', 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: 'b9dd4683843d23fd6b20949c3450975618bc89de', "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: '2542f6c5314a62428349bd0436797981da27c338', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: '711c642a86b6dc98cdbdc16da341c54a7b8766ba', 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: '718fab989ed95629e2f0f1931050e108d33af422', 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: '7a1ef30c44c48f27ecdcc2bf82cc485f9673c94d', 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: 'd115b1124e52420444757f87d6624d2e40e77a89', 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: '52d006b1e131affc614ab29024a7848a01915203', 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: '892a8fa21fed391bfc0d4f0cc470c8a43abb9591' }, h("li", { key: 'a9a0723b8cac250b46469ae8fbfccb12d3445cb8', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'd4f9df2d63ec2fbb5146ba5f1dc9f53daf1751c3', 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: 'c15f10460ee1306690c5db36ff31aa040f11d9d9', class: "duet-pagination-page-number" }, "1"))), h("li", { key: '3962965f5d1e02c314dcfbcbd11674f0ca1e4ce1', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '1fad2120a544e51c5873833b118a009939c14666', 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: 'ac8ef66bae9e009774d16bf21fc5661ae360ed11', 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: '31467f256cb9d230e4b5380fd3692cea3f9c5f18' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: 'da33ca9bd87f9404b0fd44bc8cefc86f0e74694e', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '87c534e17d295316d3f55a2fb9a295de896bc242', 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: 'f24ee3b11997ee6c9bb6679b72b835207cd1e40c', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: '59e1750d08f948b3f137bc256a3bf07529b6f738', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '326c765824df1ec4bca3ab5267f8a0ffe865e374', 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: '78cd1fc5457e7f3196d53dfc08e6fca9389a711e', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: '5d76476a62efbb068ca0c6a1cff04e0099c395ed', 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: '3209c80c6eec5207fc6a37af528397eedf2f0f70', 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: 'bf2ed784874ca4a76e96fd6d6b05f448c8485e6f', 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: '85815333b5d1a0ab326e11bc457240284557d92e', 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 })))))));
     }
@@ -387,6 +439,7 @@ export class DuetPagination {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -407,12 +460,12 @@ export class DuetPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -427,12 +480,12 @@ export class DuetPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetPaginationVariation",
@@ -453,12 +506,12 @@ export class DuetPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "accessibleDescribedBy": {
                 "type": "string",
+                "attribute": "accessible-described-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -473,12 +526,12 @@ export class DuetPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-described-by",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleDetails": {
                 "type": "string",
+                "attribute": "accessible-details",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -493,12 +546,12 @@ export class DuetPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-details",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleLabelledBy": {
                 "type": "string",
+                "attribute": "accessible-labelled-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -513,12 +566,12 @@ export class DuetPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-labelled-by",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleDescription": {
                 "type": "string",
+                "attribute": "accessible-description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -533,12 +586,12 @@ export class DuetPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-description",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleLabelsDefaults": {
                 "type": "unknown",
+                "attribute": "accessible-labels-defaults",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject",
@@ -563,6 +616,7 @@ export class DuetPagination {
             },
             "accessibleLabels": {
                 "type": "unknown",
+                "attribute": "accessible-labels",
                 "mutable": true,
                 "complexType": {
                     "original": "Record<string, string>",
@@ -586,6 +640,7 @@ export class DuetPagination {
             },
             "take": {
                 "type": "number",
+                "attribute": "take",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -600,12 +655,12 @@ export class DuetPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "take",
                 "reflect": false,
                 "defaultValue": "5"
             },
             "visibleItems": {
                 "type": "number",
+                "attribute": "visible-items",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -620,12 +675,12 @@ export class DuetPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "visible-items",
                 "reflect": false,
                 "defaultValue": "5"
             },
             "total": {
                 "type": "number",
+                "attribute": "total",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -640,12 +695,12 @@ export class DuetPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "total",
                 "reflect": false,
                 "defaultValue": "1000"
             },
             "compactBreakpoint": {
                 "type": "string",
+                "attribute": "compact-breakpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetBreakpoints | \"none\"",
@@ -666,12 +721,12 @@ export class DuetPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "compact-breakpoint",
                 "reflect": false,
                 "defaultValue": "\"x-small\""
             },
             "ariaControls": {
                 "type": "string",
+                "attribute": "accessible-controls",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -686,12 +741,12 @@ export class DuetPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-controls",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "current": {
                 "type": "number",
+                "attribute": "current",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -706,12 +761,12 @@ export class DuetPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "current",
                 "reflect": false,
                 "defaultValue": "1"
             },
             "pageLinks": {
                 "type": "string",
+                "attribute": "page-links",
                 "mutable": true,
                 "complexType": {
                     "original": "string[] | string",
@@ -726,7 +781,6 @@ export class DuetPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "page-links",
                 "reflect": false
             }
         };

package/lib/collection/components/duet-panel/duet-panel.css

@@ -0,0 +1,98 @@
+:host {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  position: relative;
+  display: block;
+  width: 100%;
+  margin: 8px 0 20px 0;
+}
+@container (width > 36em) {
+  :host {
+    margin: 12px 0 28px 0;
+  }
+}
+:host .duet-m-0 {
+  margin: 0 !important;
+}
+
+.duet-panel {
+  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  color: rgb(8, 42, 77);
+  background-color: rgb(255, 255, 255);
+  border: 0 solid rgb(212, 223, 229);
+  border-radius: 16px;
+}
+.duet-panel.duet-theme-turva {
+  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);
+  border-color: rgb(222, 224, 228);
+}
+.duet-panel.padding-small {
+  padding: 16px;
+  border-radius: 12px;
+}
+@container (width > 36em) {
+  .duet-panel.padding-small {
+    padding: 20px;
+  }
+}
+.duet-panel.padding-medium {
+  padding: 20px;
+}
+@container (width > 36em) {
+  .duet-panel.padding-medium {
+    padding: 28px;
+  }
+}
+.duet-panel.padding-large {
+  padding: 28px;
+}
+@container (width > 36em) {
+  .duet-panel.padding-large {
+    padding: 36px;
+  }
+}
+.duet-panel.border {
+  border-width: 1px;
+}
+.duet-panel.secondary {
+  background-color: rgb(245, 248, 250);
+}
+.duet-panel.secondary.duet-theme-turva {
+  background-color: rgb(245, 247, 250);
+}
+.duet-panel.accent {
+  background-color: rgb(240, 247, 250);
+  border-color: rgb(198, 225, 238);
+}
+.duet-panel.accent.duet-theme-turva {
+  background-color: rgb(245, 247, 250);
+  border-color: rgb(199, 202, 207);
+}
+.duet-panel.accent.secondary {
+  background-color: rgb(217, 236, 245);
+}
+.duet-panel.accent.secondary.duet-theme-turva {
+  background-color: rgb(222, 224, 228);
+}
+
+:host(.duet-theme-turva2) .duet-panel.duet-theme-turva {
+  color: rgb(23, 42, 59);
+  border-color: rgb(212, 221, 226);
+}
+:host(.duet-theme-turva2) .duet-panel.duet-theme-turva.secondary {
+  background-color: rgb(245, 246, 247);
+}
+:host(.duet-theme-turva2) .duet-panel.duet-theme-turva.accent {
+  background-color: rgb(253, 247, 242);
+  border-color: rgb(241, 202, 178);
+}
+:host(.duet-theme-turva2) .duet-panel.duet-theme-turva.accent.secondary {
+  background-color: rgb(251, 225, 209);
+}