@duetds/components 9.5.2 → 9.7.0

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

@@ -342,32 +342,32 @@ export class DuetPagination {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '51f0c1a1d5a16a99b2650f72c7b5fbf118532720', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: '60fa85678350ba5b52095f3db11f46864cd5b24f', 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: 'bbd85aaf7cec037863e62449e53dc79850615e68', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: 'c94a34a3f69d9f743499a00ace0f273ecc64384a', 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: '9085f262dca839c18be2b7798a389e7536dd900c', "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: '866869d03bf3a59593b8b3a9b09ae90929dad2b9', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: 'ad8a1c3c60b6f46a631e61fe5c7b7d083526b011', id: this.listId, class: {
+            } }, this.numbersStore !== "" && (h("div", { key: 'ed7656da1a3a9f606cc63018833c8ad54fd2da2a', "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: 'c2457234d5e4827da9730d753f05d5a8d1c06756', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: '86efc4ee55dcd2ac47af68e39db42f26e8b2e8fe', 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: '13a5f6ae9ca077d056926927c341619e3c421fe4', class: {
+            }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: 'e6e7af25d894edcf0549bc37c437952f6e2a5768', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '847da0bfd22d6d1724e10165397e1957ca3a1a9c', 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: '16ea0206eea69bc4c3862cd41fdc3a94db5ccba4', class: {
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '4b68b2b1661169ab04879656a2e965a50f9f1849', 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: 'e118983480f408814517696235620d6ca7c52e28', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '33ea4c7865120aed99108906a9c4b4ff34a0590d', disabled: !!((this.internalSectionIndex === 0 && this.current <= 1) ||
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '952f820c61dbd46f107da9982473c44c92d1654b', 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: 'c961b452d3cc93a62b3059a4d7f4dfa2c25a23a4' }, h("li", { key: '4e36041ee7df9da07287aa58b95ed4b9cb3db160', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'dd161af51a0de44a42189b538e7c5a11bdf46124', 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: '7d8eee43b64756671843213cae0473390014a6ce', class: "duet-pagination-page-number" }, "1"))), h("li", { key: 'bf0e2dc3f9aca2621718e3d2b31f5fe8136ea0ee', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: 'e67129a8dcf6bb081d662308040c81e26f89368e', 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: 'edf800d14122c7a156e2852feaf8292c0f2cb0ba', 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: 'a7ba8fad52c4f52916bbd52cb50b45fcfcb4dc8c' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: '73f0d4c00ca3e2ab1c28d6d290214e5f5841a869', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: 'c49588a61cff0248853d27711faaed8ba6e3185c', 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: '1d3dcae494cc6e91d04099de95e7a338830654ce', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: 'da984b3aedda5967f12aef6368a5d389c5928d87', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'af45256868353af59b8d242cee961d7962c96266', 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: '64b3f4da24ce028db1125795596beaf6cfd65aeb' }, h("li", { key: 'c477461d7d68392025f704c5a2df666822b3c1c4', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '8198df04fb593ebcf8a50918c8ffd3fc96bce3bc', 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: '0d1ecd17b7660a6c2ca5ead362b19a39922526f1', class: "duet-pagination-page-number" }, "1"))), h("li", { key: '068cc3aa779f838d88e5946716ac2179bd7284c7', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: 'a3737335bec51de3f6721d2ebd59fa005d8bf3b3', 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: '403386bfcdb3933adefbbff420f237daa67c2480', 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: 'b8f9ec799fc41d772075e4cf385cbb2805168fcd' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: 'ba47f6c267f218fddf7ef826806e3bd77a72d52f', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: 'e04c5a6f32318c61562edd6303e049294a3af437', 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: '0f3ec8318ff63e99860219c2f25d0b70068be1a3', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: '59c7ba37271b7c8dfb09f8bc251160519adaa324', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'ba66d5bd4910f5f0e3afabb3856e55d9d8a1c734', 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: '52c7db3f203d4bfbaebb844ee3b06fca983c1fd1', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: '4c7edb8ca99f3993c4b64ac153112491a72f1d01', class: {
+                : undefined }, h("div", { key: 'fc7212709dc3ed1839226979c3cd3b123bd3c9af', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: '49845c246a1bc03efc19cc2fb0d72f1d002edad6', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'f7909374d12e9e6e7474293cf24f50d4df584e72', disabled: !!((this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '63003ee428957aabe687072ab56094d17d00c6a6', 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: '951483492689ef3558b55a8a1ee2d77dd2f143c3', 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: '4017283c7ba18818612767cf4d1c940bb13bbaba', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '88d890a714833a29323e24a62afbd25bdcfe9a69', disabled: (this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '9625bd8c9071ec35ed43439fbb84334e04f071da', 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 })))))));
     }
@@ -440,7 +440,7 @@ export class DuetPagination {
                     "references": {
                         "DuetPaginationVariation": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-pagination/duet-pagination.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-pagination/duet-pagination.tsx",
                             "id": "src/components/duet-pagination/duet-pagination.tsx::DuetPaginationVariation"
                         }
                     }
@@ -757,7 +757,7 @@ export class DuetPagination {
                     "references": {
                         "DuetPaginationPageEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-pagination/duet-pagination.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-pagination/duet-pagination.tsx",
                             "id": "src/components/duet-pagination/duet-pagination.tsx::DuetPaginationPageEvent"
                         }
                     }

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

@@ -32,7 +32,7 @@ export class DuetParagraph {
         const color = getColorByName(this.color);
         // aria-describedby is to fix accessibility issue in Chrome where duet-paragraphs
         // are not announced when placed inside duet-modal
-        return (h(Host, { key: '937feb9cd408858a78be87183a5545fafd3b3d22', "aria-describedby": this.id }, h("p", { key: 'efd257f20e5ef295b7555d9b7b73b5ef23fb48c0', id: this.id, class: {
+        return (h(Host, { key: 'c40c5ba6cbe85a63b4175aaedcd83594adc10734', "aria-describedby": this.id }, h("p", { key: '96d0dad61f9e9b74f6c0945723b401dc179c87df', id: this.id, class: {
                 "duet-paragraph": true,
                 "duet-paragraph-small": this.size === "small",
                 "duet-paragraph-semi-bold": this.weight === "semi-bold",
@@ -40,7 +40,7 @@ export class DuetParagraph {
                 "duet-m-0": this.margin === "none",
                 [this.variation]: true,
                 "duet-theme-turva": this.theme === "turva",
-            }, style: { color }, part: "duet-paragraph" }, h("slot", { key: '3f9d4bf13beebdbd96e6d8b70e006b3f91804d83' }))));
+            }, style: { color }, part: "duet-paragraph" }, h("slot", { key: 'b8d26076ea382a76379fb587c13f05eadb91da4e' }))));
     }
     static get is() { return "duet-paragraph"; }
     static get encapsulation() { return "shadow"; }
@@ -117,7 +117,7 @@ export class DuetParagraph {
                     "references": {
                         "DuetParagraphSize": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
                             "id": "src/components/duet-paragraph/duet-paragraph.tsx::DuetParagraphSize"
                         }
                     }
@@ -143,7 +143,7 @@ export class DuetParagraph {
                     "references": {
                         "DuetParagraphWeight": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
                             "id": "src/components/duet-paragraph/duet-paragraph.tsx::DuetParagraphWeight"
                         }
                     }
@@ -169,7 +169,7 @@ export class DuetParagraph {
                     "references": {
                         "DuetParagraphVariation": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
                             "id": "src/components/duet-paragraph/duet-paragraph.tsx::DuetParagraphVariation"
                         }
                     }

package/lib/collection/components/duet-phone-input/duet-phone-input.js

@@ -147,6 +147,12 @@ export class DuetPhoneInput {
     set value(val) {
         this._value = val;
     }
+    /**
+     * This is a proxy for the enclosed native inputs validity
+     */
+    get validity() {
+        return this.duetInputElement.validity;
+    }
     /**t
      * Component lifecycle events.
      */
@@ -651,6 +657,28 @@ export class DuetPhoneInput {
                 "attribute": "value",
                 "reflect": false
             },
+            "validity": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ValidityState",
+                    "resolved": "ValidityState",
+                    "references": {
+                        "ValidityState": {
+                            "location": "global",
+                            "id": "global::ValidityState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This is a proxy for the enclosed native inputs validity"
+                },
+                "getter": true,
+                "setter": false
+            },
             "listFirst": {
                 "type": "string",
                 "mutable": false,
@@ -699,7 +727,7 @@ export class DuetPhoneInput {
                     "references": {
                         "DuetPhoneInputEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-phone-input/duet-phone-input.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-phone-input/duet-phone-input.tsx",
                             "id": "src/components/duet-phone-input/duet-phone-input.tsx::DuetPhoneInputEvent"
                         }
                     }
@@ -720,7 +748,7 @@ export class DuetPhoneInput {
                     "references": {
                         "DuetPhoneInputEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-phone-input/duet-phone-input.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-phone-input/duet-phone-input.tsx",
                             "id": "src/components/duet-phone-input/duet-phone-input.tsx::DuetPhoneInputEvent"
                         }
                     }
@@ -741,7 +769,7 @@ export class DuetPhoneInput {
                     "references": {
                         "DuetPhoneInputEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-phone-input/duet-phone-input.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-phone-input/duet-phone-input.tsx",
                             "id": "src/components/duet-phone-input/duet-phone-input.tsx::DuetPhoneInputEvent"
                         }
                     }
@@ -762,7 +790,7 @@ export class DuetPhoneInput {
                     "references": {
                         "DuetPhoneInputEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-phone-input/duet-phone-input.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-phone-input/duet-phone-input.tsx",
                             "id": "src/components/duet-phone-input/duet-phone-input.tsx::DuetPhoneInputEvent"
                         }
                     }

package/lib/collection/components/duet-popup-menu/duet-popup-menu.js

@@ -16,6 +16,11 @@ export class DuetPopupMenu {
             fi: "Suodata valikkoa",
             sv: "Filtrera meny",
         };
+        this.filterResultCountLabel = {
+            en: "items match filter",
+            fi: "kohtaa vastaa suodatinta",
+            sv: "menyalternativ matchar filtret",
+        };
         this.setOpenButton = (element) => {
             if (!element) {
                 return;
@@ -59,13 +64,15 @@ export class DuetPopupMenu {
             const filterText = (_a = this.filterInput.value) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase();
             const items = this.itemElements;
             items.forEach(item => {
+                var _a;
                 item.style.display =
                     !filterText ||
                         item.textContent.toLowerCase().includes(filterText) ||
-                        item.value.toLowerCase().includes(filterText)
+                        ((_a = item.value) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(filterText))
                         ? ""
                         : "none";
             });
+            this.filterResultCount = items.filter(i => i.style.display !== "none").length;
         };
         this.handleKeyDownOnFilter = (ev) => {
             var _a;
@@ -76,6 +83,7 @@ export class DuetPopupMenu {
         this.open = false;
         this.menuY = undefined;
         this.menuX = undefined;
+        this.filterResultCount = undefined;
         this.language = getLanguage();
         this.accessibleLabel = undefined;
         this.accessibleRole = "menu";
@@ -319,14 +327,17 @@ export class DuetPopupMenu {
             overflowY: "auto",
             height: this.popupMenuStyleHeight,
         };
-        return (h(Host, { key: '245da481a4c3ac550648005777f7f7724c8e7806' }, h("div", { key: '17069b93e411e4f951dcf4f591aacf90a0fcf7ec', ref: element => {
+        return (h(Host, { key: '4f4ca864cfb97bc6556bf03328bf67aebe9e87e8' }, h("div", { key: 'e9b910938c461f74532f3bcf0c70ace1334dfeb2', ref: element => {
                 this.menuElement = element;
             }, style: styles, class: {
                 open: this.open,
                 "duet-popup-menu-list": true,
                 "duet-theme-turva": this.theme === "turva",
                 "scroll-visible": this.scrollLimit < this.itemElements.length,
-            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, this.showFilterInput && (h("div", { key: '24e126dbabf9089b5d3bed8d20c4a2d727531a0e' }, h("duet-input", { key: '719101f79b6678a0e7b28694e2c630e902f58bb2', ref: el => (this.filterInput = el), label: this.filterLabel[this.language], "label-hidden": true, expand: true, margin: "none", type: "search", onDuetInput: this.filterItems, onKeyDown: this.handleKeyDownOnFilter }), h("duet-spacer", { key: 'c49e9178d065230acbc63f163b9b31dfa53a56ae', size: "xx-small" }))), h("slot", { key: 'd6e2cbd68cd5f5961d5c486a974b72083f2cbae0' }))));
+            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, this.showFilterInput && (h("div", { key: '6c501ae153f306bad04eadbc02917c07f7beed3d' }, h("duet-input", { key: '427f1ab729a887ca89925bbbf2aeb3e803c92428', ref: el => (this.filterInput = el), label: this.filterLabel[this.language], "label-hidden": true, expand: true, margin: "none", type: "search", onDuetInput: this.filterItems, onKeyDown: this.handleKeyDownOnFilter }), h("duet-visually-hidden", { key: '726ba29261adca2c956588370b1c41b79cd6fb68' }, h("span", { key: '1ede14ac5d046b1d5b1a30e3ab58c3d3f19c09e4', role: "status" }, `
+                  ${this.filterResultCount}/${this.itemElements.length}
+                  ${this.filterResultCountLabel[this.language]}
+                `)), h("duet-spacer", { key: '1c1cfce92b76b59e5c5be5bb625da22768c979ec', size: "xx-small" }))), h("slot", { key: '8490807b5f19ca1bb49f1e5432b20b3be5924844' }))));
     }
     static get is() { return "duet-popup-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -690,6 +701,7 @@ export class DuetPopupMenu {
             "open": {},
             "menuY": {},
             "menuX": {},
+            "filterResultCount": {},
             "language": {}
         };
     }
@@ -710,7 +722,7 @@ export class DuetPopupMenu {
                     "references": {
                         "DuetPopupMenuEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-popup-menu/duet-popup-menu.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-popup-menu/duet-popup-menu.tsx",
                             "id": "src/components/duet-popup-menu/duet-popup-menu.tsx::DuetPopupMenuEvent"
                         }
                     }

package/lib/collection/components/duet-popup-menu-item/duet-popup-menu-item.js

@@ -66,11 +66,11 @@ export class DuetPopupMenuItem {
             "duet-theme-turva": this.theme === "turva",
             "active-descendant": this.activeDescendant,
         };
-        return (h(Host, { key: '2f4a7fe60bc5938bbcb3b1fbce1b4c7bb6bc1de2', role: this.accessibleRole }, h(TagName, { key: 'c9f7fd447bb786217bd8a914167bb908acf66f37', ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "listitem" ? 0 : -1, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined, lang: TagName === "button" ? undefined : this.targetLanguage, hreflang: TagName === "button" ? undefined : this.targetLanguage }, this.leadingIcon && (h("duet-icon", { key: 'dcd75ed8a6b9113d52ffa7525c4356cbb2900bc4', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: 'db792f6c21c039bc1997fe199227a84854623c9d', class: "duet-popup-menu-item-label" }, h("slot", { key: 'dbe5cfc337cc536811672bfc2240518c230df8d6' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: 'dbcb7c7c1fb2a4279aab71c16bf8dfd0505fbe38', name: this.url && this.external
+        return (h(Host, { key: 'ec9a97488880d6513ce756f9816356ab2a3ef1ae', role: this.accessibleRole }, h(TagName, { key: '6bb037d35469526f830d2767f9b94aa3e401730a', ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "listitem" ? 0 : -1, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined, lang: TagName === "button" ? undefined : this.targetLanguage, hreflang: TagName === "button" ? undefined : this.targetLanguage }, this.leadingIcon && (h("duet-icon", { key: 'aeb1363d0e70572dcead578251332bc61047313b', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: '815b720a77e1ff6a7ecceffa4d1a42a876c9ca5f', class: "duet-popup-menu-item-label" }, h("slot", { key: '32a806ebff96ce81bd67c42ab95df5d170a6305c' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: '0fd375db736e280b9c2157fadce9f8319328fe27', name: this.url && this.external
                 ? newWindowIcon.title
                 : this.active
                     ? "messaging-checked-small"
-                    : this.trailingIcon, size: (this.url && this.external) || this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { key: 'e234fa5fd161ad0938c925c4b1fb75b6fbbb37f2', class: "duet-popup-menu-item-trailing" }, this.trailingText))));
+                    : this.trailingIcon, size: (this.url && this.external) || this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { key: '3a8c841ef1ec29f2174c1d62da75f692f73cb2fe', class: "duet-popup-menu-item-trailing" }, this.trailingText))));
     }
     static get is() { return "duet-popup-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -395,7 +395,7 @@ export class DuetPopupMenuItem {
                     "references": {
                         "DuetPopupMenuItemEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx",
                             "id": "src/components/duet-popup-menu-item/duet-popup-menu-item.tsx::DuetPopupMenuItemEvent"
                         }
                     }
@@ -416,7 +416,7 @@ export class DuetPopupMenuItem {
                     "references": {
                         "DuetPopupMenuItemEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx",
                             "id": "src/components/duet-popup-menu-item/duet-popup-menu-item.tsx::DuetPopupMenuItemEvent"
                         }
                     }

package/lib/collection/components/duet-promo-card/duet-promo-card.js

@@ -53,12 +53,12 @@ export class DuetPromoCard {
             backgroundColor: backgroundColor ? backgroundColor : "none",
         };
         const TagName = this.url ? "a" : "div";
-        return (h(Host, { key: '0a97e9abde099796c74ee8d4533922d35deb236e', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '1c1fd59c053cb81d932443c888c6e9573953e946', class: {
+        return (h(Host, { key: 'b73cdd4f3dcd554706a13aeaa706543b681529ec', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '76f17c86f64af2cea4a60ce9882f8e76bc475ab6', class: {
                 "duet-promo-card": true,
                 "duet-theme-turva": this.theme === "turva",
                 "no-bg-color": !this.backgroundColor,
                 "duet-promo-card-link": !!this.url,
-            }, style: bannerStyles }, h(TagName, { key: 'fd53e9b56dc719eb84b55e185a7709e6ab267e58', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: '34994ce60ac0342c63a4fcfe21a57b0246d2c19e', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: 'f0bef01fd5ff40970d3d54befca4682fdceed46f', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: 'ad3e40631d0e0a7eab15ca8c97a22141dc14c409', class: "pre-heading" }, h("slot", { key: '887cb71bdcf6fffcb82565434e42ad1ee361841c', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '90549d05dab8e3a238f8361cbbcc6ecea1d7cd42', class: "heading" }, h("duet-heading", { key: '56eaa16c5fb2f0094e32c24b1e9494092980b3f2', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("span", { key: '6567201df4ec186d0fecce37cadbdeb9e7d3ceeb' }, h("slot", { key: '8f979f5facd440dd76a6a2711922cf4a1b47cba0', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '1d1c853e865e767a7f96255f0e9316c6ff4d642a', class: "description" }, h("duet-paragraph", { key: '4c1741ff05acd2562c07bdee11c9e00951dc8772', theme: this.theme, margin: "none", color: this.textColor }, h("span", { key: '2dd6a0fb0ae7508a6fca281632206ccbab9b80fa' }, h("slot", { key: 'c2bda8a30bfbcedfd5aa88b32c332172eb693ea3', name: "description" }))))), this.hasActionSlot && (h("div", { key: '46fbd5da2ebd36613c039f6edbb22e81d1fcaf47', class: "action" }, h("slot", { key: 'a573eaf8d88210c4c4e613c36a6f127d6caeb783', name: "action" }))))))));
+            }, style: bannerStyles }, h(TagName, { key: 'db345f3d904fc72e3f25618c91ab3f30a0b9e4c7', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: 'ac5645fb64cf5872e0735ce3d97939e37fb10f0a', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: 'c82dc662a938ca4849089a048c57caa8efc54531', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: 'cd9ce432bdf6f8ffaa63796a258837e9136e1ea4', class: "pre-heading" }, h("slot", { key: '257b9408b4489f1cc79f503473a8d458a3cb5456', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '1e93652845c4b65d0ab67a0e05889304064fd7b3', class: "heading" }, h("duet-heading", { key: '9e40a46f24aadcee4d43fc36167ed434c2cc8e79', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("span", { key: 'd230dbaecd853de2b4b58be416d720048b6ea43b' }, h("slot", { key: '1f99efac6f9a6ebdf6e72066b50d3fe647dfc3f1', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'e61cf4abe59d58e15cefb7f7ff7aa573922154b0', class: "description" }, h("duet-paragraph", { key: '9594eba29974b0176a2fc986df802c8a5afb43f1', theme: this.theme, margin: "none", color: this.textColor }, h("span", { key: 'e800d7bb777802912b16ad4f5c76bb7f9df8c9fe' }, h("slot", { key: '709d27fb9d198c57c8ca8abbbaaedac0790483a8', name: "description" }))))), this.hasActionSlot && (h("div", { key: '2a72594c99d4142f7b1f453df4e24ce794833370', class: "action" }, h("slot", { key: '07f8ccc33355d4fc7be72c64fd758363f76f609e', name: "action" }))))))));
     }
     static get is() { return "duet-promo-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -590,7 +590,7 @@ export class DuetRadio {
                     "references": {
                         "DuetRadioEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-radio/duet-radio.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-radio/duet-radio.tsx",
                             "id": "src/components/duet-radio/duet-radio.tsx::DuetRadioEvent"
                         }
                     }
@@ -611,7 +611,7 @@ export class DuetRadio {
                     "references": {
                         "DuetRadioEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-radio/duet-radio.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-radio/duet-radio.tsx",
                             "id": "src/components/duet-radio/duet-radio.tsx::DuetRadioEvent"
                         }
                     }
@@ -632,7 +632,7 @@ export class DuetRadio {
                     "references": {
                         "DuetRadioEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-radio/duet-radio.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-radio/duet-radio.tsx",
                             "id": "src/components/duet-radio/duet-radio.tsx::DuetRadioEvent"
                         }
                     }

package/lib/collection/components/duet-range-slider/duet-range-slider.js

@@ -611,7 +611,7 @@ export class DuetRangeSlider {
                     "references": {
                         "DuetRangeChangeEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
                             "id": "src/components/duet-range-slider/duet-range-slider.tsx::DuetRangeChangeEvent"
                         }
                     }
@@ -632,7 +632,7 @@ export class DuetRangeSlider {
                     "references": {
                         "DuetRangeChangeEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
                             "id": "src/components/duet-range-slider/duet-range-slider.tsx::DuetRangeChangeEvent"
                         }
                     }

package/lib/collection/components/duet-range-stepper/duet-range-stepper.js

@@ -169,10 +169,10 @@ export class DuetRangeStepper {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: '9221b16527b63eb5558cc9422c26fc70e3d44935', class: {
+        return (h("div", { key: 'fa2c2642d5a39d629ac91c1bba26a684b132847e', class: {
                 "duet-range-stepper": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, h("span", { key: '301b08e846538f0e5d4da1b205ff27d1fa860075', class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { key: '8f0a856cff8bf8a66e389c505d1817e2b038a201', 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: '0746ef65ce1181f4975853482470b6064d2d680a', 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: 'b13479a4081d1c96598a9a6a155a7ba13bb571a7', class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { key: '929da802a06c142ef0bf763b8d1ef05ddf296c8a', 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: 'cb496f9a6d6776c1083ca280ad2770c6f8ca489b', 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: "" })));
     }
     static get is() { return "duet-range-stepper"; }
     static get encapsulation() { return "shadow"; }
@@ -395,7 +395,7 @@ export class DuetRangeStepper {
                     "references": {
                         "DuetRangeStepperUpdateEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-range-stepper/duet-range-stepper.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-range-stepper/duet-range-stepper.tsx",
                             "id": "src/components/duet-range-stepper/duet-range-stepper.tsx::DuetRangeStepperUpdateEvent"
                         }
                     }

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

@@ -46,7 +46,7 @@
 :host .duet-scrollable-items.buttons .duet-scrollable-button-container--absolute {
   position: absolute;
   top: 0;
-  z-index: 202;
+  z-index: 210;
   width: auto;
   height: 100%;
   padding: 0 16px;
@@ -182,6 +182,9 @@
   padding-top: 16px;
   padding-bottom: 16px;
 }
+:host .duet-scrollable-items .duet-scrollable-list.duet-scrollable-stretch {
+  width: 100%;
+}
 :host .duet-scrollable-items.center {
   justify-content: center;
 }

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

@@ -42,6 +42,7 @@ export class DuetScrollable {
         this.padding = "none";
         this.gap = "large";
         this.selected = 0;
+        this.stretch = false;
     }
     watchPropHandler(newValue) {
         this.scrollToElement(newValue, "center");
@@ -140,12 +141,10 @@ export class DuetScrollable {
         else if (container.scrollLeft > 0) {
             this.scrollPaneAtStart = false;
         }
-        if (container.clientWidth + container.scrollLeft + this.getOverlayWidth() >= container.scrollWidth) {
-            this.scrollPaneAtEnd = true;
-        }
-        else if (container.clientWidth + container.scrollLeft + this.getOverlayWidth() < container.scrollWidth) {
-            this.scrollPaneAtEnd = false;
-        }
+        // Round both values to handle sub-pixel precision issues
+        const visibleContentWidth = Math.round(container.clientWidth + container.scrollLeft + this.getOverlayWidth());
+        const totalContentWidth = Math.round(container.scrollWidth);
+        this.scrollPaneAtEnd = visibleContentWidth >= totalContentWidth;
     }
     scrollToElement(index = this.currentIndex, inline) {
         const elements = this.getScrollPaneElements();
@@ -192,12 +191,7 @@ export class DuetScrollable {
         this.scrollToElement(last + 1, "center");
     }
     getOverlayWidth() {
-        // This is a hot-fix for the duet-tab-group component not
-        // working properly with turva theme. This should be properly fixed in the future.
-        if (this.buttonPosition === "absolute") {
-            return this.theme === "turva" ? 1 : 0;
-        }
-        return 10;
+        return this.buttonPosition === "absolute" ? 0 : 10;
     }
     renderButton(direction) {
         const arrowColor = this.theme === "turva" ? "color-primary-darker-turva" : "color-primary";
@@ -234,25 +228,26 @@ export class DuetScrollable {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '73d85963b8e4016fe3d891925fe817e0a7cd9cb5', class: {
+        return (h(Host, { key: '13b04f9678d2d876b3813ff3be4400c6d3cb8706', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
-            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: 'c34006e80ca8d106b496b124d73fc23063fa6e3e', class: {
+            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: '5459a8a656904d8cf5930623b0590b533055be36', class: {
                 collapse: true,
                 hide: !this.needsScrolling && !this.collapsed,
-            } }, h("duet-button", { key: 'cd7768e824f0d392c78fbc0b6dc5cb01e48e3402', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '0c5978598a028065857e7f68f68eb1f6069eb006', name: "collapse-button-label" })))), h("div", { key: '769b377acbb2108d336d00ded087feffa8b65792', class: {
+            } }, h("duet-button", { key: '0e1a7e9dd6e442d653ce8dbdc19831b3299d47c5', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '8c534bbeea9b0f15915958ae3947ca479a141a07', name: "collapse-button-label" })))), h("div", { key: '333736ff3035d3ba6e12b6f73c38fad12af6ec6a', class: {
                 "duet-scrollable-items": true,
                 buttons: this.buttons,
                 center: this.center,
                 "duet-theme-turva": this.theme === "turva",
-            } }, this.buttons && this.renderButton("left"), h("div", { key: '36d1d94c465dcc3a2759bbfb7dfa092528824e9d', class: {
+            } }, this.buttons && this.renderButton("left"), h("div", { key: '78c52fc83f55f4e9ab7bd9a3d12ec2c7a88f2e3f', class: {
                 "duet-scrollable-list": true,
                 [`duet-scrollable-list--${this.buttonPosition}`]: true,
                 [`gap-${this.gap}`]: true,
                 collapsed: this.collapsed,
                 [`duet-overflow-padding--${this.padding}`]: this.padding !== "none",
                 [`duet-scrollable-list--${this.buttonPosition}`]: this.buttonPosition === "absolute",
-            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: '4ce1914b23bc31c920b3ddffc064b323a2d66002' })), this.buttons && this.renderButton("right"))));
+                "duet-scrollable-stretch": this.stretch,
+            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: '95205e7b789573b3f5bfa2e542d81e2068968e93' })), this.buttons && this.renderButton("right"))));
     }
     static get is() { return "duet-scrollable"; }
     static get encapsulation() { return "shadow"; }
@@ -485,6 +480,29 @@ export class DuetScrollable {
                 "attribute": "selected",
                 "reflect": false,
                 "defaultValue": "0"
+            },
+            "stretch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Enables stretch mode for tab groups"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "stretch",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/lib/collection/components/duet-section-layout/duet-section-layout.js

@@ -14,13 +14,13 @@ export class DuetSectionLayout {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '89be4e82e34327cb68c695187821280140aa3233', class: {
+        return (h(Host, { key: '3cdda64194aabb0bf4cef5f273b4eb35d956c63a', class: {
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '2cde22f46d6a6b602245fb0d6e875349845bd204', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: 'a39c58d05f6944ba7c6c0bfda25a3ad1d99f3e2f', class: {
+            } }, h("div", { key: '167f4d34166d423a1ece6a4699ddf139e54f1c9f', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: '156a1bfcfb46fecb6c73120927bae1788efd32a1', class: {
                 "duet-layout": true,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("section", { key: 'ee98fe87b3d0994ab04c65590b5288d35aea2a9e', class: "duet-main" }, h("slot", { key: '2f931f464073257e432992e99f40a58727401352' }))))));
+            } }, h("section", { key: '4aa12807146fee156f174be8670802f0d79f9974', class: "duet-main" }, h("slot", { key: 'b3fb02f84266a65c67156bef474f9f6f2531623f' }))))));
     }
     static get is() { return "duet-section-layout"; }
     static get encapsulation() { return "shadow"; }