@duetds/components 9.3.2 → 9.4.1

package/lib/collection/components/duet-menu-bar-link/duet-menu-bar-link.js

@@ -22,11 +22,11 @@ export class DuetMenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '2af75611d72cb2981e7bdd6be6ee1a309eb689b0', role: "listitem" }, h("a", { key: 'a7966c48fbbf6c673c284e22f66b43103033e055', class: {
+        return (h(Host, { key: 'f682d26a48ec220240975707b35c96a477eeb6be', role: "listitem" }, h("a", { key: '4e3786d460b72263478547c988eb8bde5dd3501e', class: {
                 "duet-menu-bar-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '4ff70f1ae3cd9ba219b5ac63e814d3c5ba315f6a', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'b1b533c32b451c5c43c7f61101e7b9a6496dd53a' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '37047bd278cc4b7bb56acdcf3db2937025736dc7', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '014a47458e2dedfad6bf8290061227812e8e4d24' }))));
     }
     static get is() { return "duet-menu-bar-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -249,18 +249,18 @@ export class DuetModal {
         var _a, _b;
         let iconColor = "primary";
         let closeColor = "secondary";
-        const closingButton = (h("div", { key: '1da278102e1c18bced35701804e9217102015179', class: "duet-modal-close" }, h("duet-button", { key: '8a90526b27671c22fc55532ddcb94fd3c1e32606', ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })));
+        const closingButton = (h("div", { key: 'bb1f923c1ee3e15d3b50b20a34dd3ece51deb0ec', class: "duet-modal-close" }, h("duet-button", { key: '4b17caf93396c246f7d27b6b5042ec86cca9558d', ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })));
         if (this.theme === "turva") {
             iconColor = "primary-turva";
             closeColor = "secondary-turva";
         }
-        return (h("div", { key: '58c17910a720462e06df9bc4b987c2e889c89d8f', ref: modal => (this.modalEl = modal), "aria-label": (_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.heading, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: this.variation === "loader" ? "alert" : "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", class: {
+        return (h("div", { key: '2f2ce0b1a1b86550adce16addb0ea9ed85592f4a', ref: modal => (this.modalEl = modal), "aria-label": (_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.heading, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: this.variation === "loader" ? "alert" : "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", class: {
                 "duet-modal-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-modal-active": this.open,
                 "duet-modal-slide-up": this.variation === "slide-up",
                 "duet-modal-has-sticky-header": this.hasStickyHeader,
-            } }, h("duet-overlay", { key: '914408c9f5bd3059edf6197e12bb51827be71395', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: 'cee4a64292d3212c0913fca099acdd6da119a300', ref: modalInner => (this.modalInnerEl = modalInner), class: {
+            } }, h("duet-overlay", { key: '9a399dda2be352e29770d438c4ca08545c7ea289', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: '75e0574642fe5a419ad1387ab6c10c92ba9264c5', ref: modalInner => (this.modalInnerEl = modalInner), class: {
                 "duet-modal-inner": true,
                 [this.size]: true,
                 "duet-modal-slide-up": this.variation === "slide-up",
@@ -271,18 +271,18 @@ export class DuetModal {
                         this.closeModal(e);
                     }
                 }
-            } }, h("div", { key: '10aadd51aa5a43d7158b2ba901e72dec73dff0c1', ref: modalContentEl => (this.modalContentEl = modalContentEl), class: {
+            } }, h("div", { key: '7e1ae928c1edffb13bdaee92b26d4104f65e303a', ref: modalContentEl => (this.modalContentEl = modalContentEl), class: {
                 "duet-modal": true,
                 "duet-modal-has-sticky-header": this.hasStickyHeader,
                 [this.size]: true,
                 [this.variation]: true,
-            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: 'fb858b05b255dc1928c79212ac0460dfc0bc2fb7' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: 'e30440c57234f2f47213b1443939bc334f6984d2', class: {
+            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: '7fad3249b4d7f695cc4f3cb206362ea4f61f266b' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: '4b62e97cc1fe90e60d2266c477fccfb2862636e9', class: {
                 "duet-modal-body": true,
                 "duet-modal-gutter-none": this.gutterSize === "none",
                 "duet-modal-gutter-small": this.gutterSize === "small",
                 "duet-modal-gutter-medium": this.gutterSize === "medium",
                 "duet-modal-gutter-large": this.gutterSize === "large",
-            } }, h("div", { key: 'c905a56349275111b507b046c34db4d99befff51', class: "duet-modal-header" }, h("span", { key: '481ee67583a42d430318be206b08d3976eb9bb4e', class: "duet-modal-inner-slot-top" }, h("slot", { key: '55f8c5bb8575960783ea74eb7ea882aaad8bddea', name: "top" })), this.icon && h("duet-icon", { key: 'c488922a98c16bf38e06085f1e9a673b12cf9b82', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: 'b850658878de554dfc27a4978e34bfced4432e00', "visual-level": (_b = this.headingVisualLevel) !== null && _b !== void 0 ? _b : this.headingLevel, level: this.headingLevel, theme: this.theme }, this.heading))), this.variation === "loader" && (h("div", { key: '4355986a4863d9f0d8359b95def6411f65d5c314', class: "duet-modal-spinner" }, h("duet-spinner", { key: 'cf8f38d7b53c41cca414993f4a16d709c197f95e', size: "large", color: "primary" }))), h("div", { key: '08c10e61fe189fb99f218eac37ace4084141b94f', class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el), "aria-live": this.variation === "loader" ? "assertive" : "off" }, h("slot", { key: 'f7c981e29d90accd5e7313a3f26de39788225287' })))))));
+            } }, h("div", { key: '10f951d353b810d003e3dbd08c9a8486068b0374', class: "duet-modal-header" }, h("span", { key: 'fb7328dea24935b8ea198b2aad27f2b6935539f7', class: "duet-modal-inner-slot-top" }, h("slot", { key: '23c95e51b7a6a924c51563810b0114112bfa9812', name: "top" })), this.icon && h("duet-icon", { key: '0acaa2a0a64267c885b32599d1342a31fa8d9379', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: '4ccc419418e3a9c4fe0baa48df4126ebe89e3d59', "visual-level": (_b = this.headingVisualLevel) !== null && _b !== void 0 ? _b : this.headingLevel, level: this.headingLevel, theme: this.theme }, this.heading))), this.variation === "loader" && (h("div", { key: '6b60e149a187b71c820169ef1454f89fb6565f39', class: "duet-modal-spinner" }, h("duet-spinner", { key: '2f2ea4dd35d3459560b14c63c0967d70b4c25eea', size: "large", color: "primary" }))), h("div", { key: '150bcb1ab2988133a66a194f43dd3528dc0165a9', class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el), "aria-live": this.variation === "loader" ? "assertive" : "off" }, h("slot", { key: 'f6837d986392a94af1497c896af4fc87cb008cf0' })))))));
     }
     static get is() { return "duet-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -223,23 +223,23 @@ export class DuetMultiselect {
      */
     render() {
         var _a;
-        return (h(Host, { key: 'd88436c71fa360266440b8574bb2d35536cc65bd', class: {
+        return (h(Host, { key: 'a9ce209f6d0ebc295aca6abfb51e7d8b5f916397', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-expand": this.expand,
-            } }, h("div", { key: '212b648e8147fb2e58294009eb8aef03556f8684', class: {
+            } }, h("div", { key: '9b63f45acce3faac9c0e5f2d6a50d687539a4d4a', class: {
                 "duet-multiselect-container": true,
                 "duet-label-hidden": this.labelHidden,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h("duet-label", { key: '9d4bec69691f6adc615c9366e86abf5f59fc39a6', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '3ba3a824ae8535ecafbfc73d0477da38e8146867', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: 'c8fccccab9473eeb7d81b2b947b6732f6fe31111', name: "tooltip" }), this.caption && (h("duet-caption", { key: '7ccb8a12ae76b75762161f444d3a058be2d35b84', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '1c61620d8dfeec8fdc4448028951b9a1a4a9968e', class: "duet-multiselect-wrapper" }, h("button", { key: '3f2902a54d79a81144128cae9b62641ce234802a', id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { key: '04aec38aa6af20357b28bee3373c830bd34c0580', role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("span", { key: '3dfe64b81ce62342b83ec4ea44bc1a1ec7544355', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: '1dbd858425faeae0a323b3313913feec214549cd' }, this.selectedLangObject[this.language], ", ", this.value.map(item => item.label).join(", ")))), h("svg", { key: '40b599d5cfa8362c2edeb63aa59c9be3cecf3e80', class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '6c28e4b2bb0c486a8698fa0615fff12df29e157a', d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { key: '6ea881d05fcbdeb899a1eb41b84f8b9653446eb4', id: `${this.identifier}-checkboxes`, role: "listbox", class: {
+            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h("duet-label", { key: '3976aa0ddd2971764fe0f2e627aed6c960f65cef', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '24392c70833eeff354b2cd56707b5b63ba5fd59b', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '15ca546366a30b65065c099469b941e08a2bc6c0', name: "tooltip" }), this.caption && (h("duet-caption", { key: '44d9589c99b1694af3bb860de10875595e2f4bc9', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'd49ca494868a57210724275e7a98c4551ab558ae', class: "duet-multiselect-wrapper" }, h("button", { key: '5b68859ae6b1a9916d96c47002f7c9485382a913', id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { key: 'c64f308ba8bec99486e788ddb0d7e5adaed8a02d', role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("span", { key: '2d3e3f55ebf4f964c4d4d04d07177a65df21c42f', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: 'd38084d0fb7a9f080a234c069d612ccddcb890ab' }, this.selectedLangObject[this.language], ", ", this.value.map(item => item.label).join(", ")))), h("svg", { key: 'df30af3c9e60203a9ca16e1e7a771843962fec60', class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '32f4205865b6e6d53b6e78a45004da23591018f1', d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { key: '7c5441c80982d38f49b7128f179ff0a06492a28b', id: `${this.identifier}-checkboxes`, role: "listbox", class: {
                 "duet-multiselect-checkboxes": true,
                 "duet-multiselect-checkboxes-active": this.checkboxesVisible,
-            }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, ((_a = this.processedItems) === null || _a === void 0 ? void 0 : _a.length) && this.allControls && (h("div", { key: '63392964c348477e8b375b96084d4c4cbbf2143a', class: "duet-multiselect-all-control-buttons" }, h("button", { key: 'b7e0f951cd805058fc5ba9376ada31d42dcceb8e', class: "duet-multiselect-select-all", onClick: this.handleSelectAllClick, id: this.getOptionIdentifier(-2), onKeyDown: (e) => this.onCheckboxKeyDown(e, -2) }, this.selectAllLabel[this.language]), h("button", { key: 'a8d826e0afeaf86fbcaa2289f41ffeca9cd04b43', class: "duet-multiselect-clear-all", onClick: this.handleClearAllClick, id: this.getOptionIdentifier(-1), onKeyDown: (e) => this.onCheckboxKeyDown(e, -1) }, this.clearAllLabel[this.language]))), this.processedItems &&
+            }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, ((_a = this.processedItems) === null || _a === void 0 ? void 0 : _a.length) && this.allControls && (h("div", { key: 'e1065494a8222bae0b5c853ae52c1d21259289ac', class: "duet-multiselect-all-control-buttons" }, h("button", { key: 'ceed8b74d08ac96e2b79d2efd45b9c93eada86cf', class: "duet-multiselect-select-all", onClick: this.handleSelectAllClick, id: this.getOptionIdentifier(-2), onKeyDown: (e) => this.onCheckboxKeyDown(e, -2) }, this.selectAllLabel[this.language]), h("button", { key: 'a51688c114ff6f86984fc9b04cc1d1faee99f5d1', class: "duet-multiselect-clear-all", onClick: this.handleClearAllClick, id: this.getOptionIdentifier(-1), onKeyDown: (e) => this.onCheckboxKeyDown(e, -1) }, this.clearAllLabel[this.language]))), this.processedItems &&
             this.processedGroups.map(group => (h("fieldset", null, group.label && h("legend", null, group.label), group.items.map((item, key) => {
                 var _a, _b;
                 return (h("duet-checkbox", { identifier: this.getOptionIdentifier(key), role: "option", label: item.label, value: item.value, key: item.value, checked: (_a = this.value) === null || _a === void 0 ? void 0 : _a.includes(item), "accessible-selected": ((_b = this.value) === null || _b === void 0 ? void 0 : _b.includes(item)) ? "true" : undefined, disabled: !this.checkboxesVisible || item.disabled, onDuetChange: e => this.toggleCheckbox(e, item), onKeyDown: (e) => this.onCheckboxKeyDown(e, key), theme: this.theme }));
-            })))))), h("span", { key: '78597a6d044e0186dcb06a22bdb897884e24739e', class: "duet-multiselect-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '6b33900eb2e81a104b8370a520aaf378d18155cf' }, this.error)))));
+            })))))), h("span", { key: '782f6132228248e8f4e141138052781c224e9f48', class: "duet-multiselect-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '0354ff249d65209cda5983cdc85c5dca4ddf0bde' }, this.error)))));
     }
     static get is() { return "duet-multiselect"; }
     static get encapsulation() { return "shadow"; }

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

@@ -24,7 +24,7 @@ export class DuetNav {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'fa5b68a21eb6da088274ac9711f26be43b177a86' }, h("div", { key: '2a2d15123cd0e5606ff69d0e2869ab8c13a8a4e4', class: { container: true, sticky: this.sticky } }, h("slot", { key: 'cab0fb1889cdf519843b69fccd84095985368366' }), h("slot", { key: '0d2b271a9c2a3ba33ae477d0721a6db43bcbbafc', name: "mobile" }), h("slot", { key: '1f9cb2e419b3033949f8d6fa62a89de558da2da1', name: "desktop" }))));
+        return (h(Host, { key: 'f5ae3631c0785744d3fb7f34559cee04e5285550' }, h("div", { key: 'd714239fed77dbea052ea2dc8b9d8ca31e7cfa8c', class: { container: true, sticky: this.sticky } }, h("slot", { key: 'c11135ddebbd766695f4f19800580bce48cc1f80' }), h("slot", { key: '771f6f0c80fda18fc05857077347bad51fc88a04', name: "mobile" }), h("slot", { key: '38f4f4252472f09e56f4d6e901248600df52d2a1', name: "desktop" }))));
     }
     static get is() { return "duet-nav"; }
     static get encapsulation() { return "shadow"; }

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

@@ -43,11 +43,11 @@ export class DuetNotification {
         this.linkElement.focus(options);
     }
     render() {
-        return (h("div", { key: 'b2c27c02bb299100ebac95d66cf5537af6894d95', role: "listitem", class: {
+        return (h("div", { key: 'eace5033122ee62ee27b591ad47b118c1f9096f7', role: "listitem", class: {
                 "duet-notification": true,
                 "duet-notification-highlight": this.highlight,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("a", { key: '984f604d97dfab43781d8e9c4118323f7e3a293c', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: 'bd80fdaaaa0c09c0e4d7410e8f5504bb7ff24a9e', class: "duet-notification-container" }, h("div", { key: '0b5f665c730bfb41a949c3df042e51751893419a', class: "duet-notification-badge-container" }, this.highlight && (h("div", { key: 'f56d08f232e53a33efd0b604c52656a8f13c99f6', class: "duet-notification-badge" }, h("duet-visually-hidden", { key: 'ef12bed363576791957c9d318fedb9d417199711' }, this.accessibleLabelUnread, ":")))), h("div", { key: 'a0477d9f15ffd3c2f3b70f38ccaf5eceb477b598', class: "duet-notification-content" }, h("slot", { key: '5a607f88b483e286514cc8f5aba85d16ada6c4a7' })), h("div", { key: 'c89051db7b8318c889d3a6c4bb06555c3786b128', class: "duet-notification-date" }, this.date)))));
+            } }, h("a", { key: '4400c732e537e9c2838a5b5c1c1d9eade1123d43', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: '99e87aad2c516c8cb1380fcb67b51123373ed039', class: "duet-notification-container" }, h("div", { key: 'f8d25e2f95cac95692192371a77a00b9022de1f7', class: "duet-notification-badge-container" }, this.highlight && (h("div", { key: '8d349100089368193d73d23062fd00d9ab342411', class: "duet-notification-badge" }, h("duet-visually-hidden", { key: 'fffab52bd32056bf806777b802a72cf0b606f91c' }, this.accessibleLabelUnread, ":")))), h("div", { key: 'ac061c356306f0677bf89646951e4fbaaba466a1', class: "duet-notification-content" }, h("slot", { key: 'f94d05db7e9897cffad9f9082ec66ffb8efd23fe' })), h("div", { key: '33dec802c87ce665d301f507226c50f3c17e8628', class: "duet-notification-date" }, this.date)))));
     }
     static get is() { return "duet-notification"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.js

@@ -96,10 +96,10 @@ export class DuetNotificationDrawer {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: '181a6a82f04afb895830cf36e265a4f770f05188', class: {
+        return (h("div", { key: 'b9e14aa3e19e14ef225ed47f6961b0f88a7cddc4', class: {
                 "duet-drawer": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: this.handleKeyDown }, h("button", { key: 'f4276d12063ff62d10998b80cd7621c3ceadc302', ref: el => (this.drawerButtonEl = el), type: "button", class: "duet-drawer-toggle", id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (h("div", { key: '0c1a27d913b2ba53d8f6ef2eef3f0d05c251fabc', class: "duet-drawer-icon" }, h("duet-icon", { key: 'c32b7ae6a90f0d32f0d6b46aad6e9ba0fb0bf952', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("div", { key: 'e698da96829cac38cfeab0a15734f3be7a679455', class: "duet-drawer-badge" }))), h("span", { key: '2725ba4970bcc2e6213f69c64d25a3dc7d9f005b', class: "duet-drawer-label" }, this.label), h("div", { key: '71ae5369660c95fed7635cb7d5ae25fa5b9dde7a', class: "duet-drawer-caret" }, h("duet-icon", { key: '1ac223f256804f95ff4a35f8fc115999d86fec8c', margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))), h("div", { key: 'aaa99d0c45b1f8218f0f999c9558f374799dc6a5', id: "duet-drawer-content", class: {
+            }, onKeyDown: this.handleKeyDown }, h("button", { key: 'e2c17fc4f254b3f307734006dbfea982ff6ee382', ref: el => (this.drawerButtonEl = el), type: "button", class: "duet-drawer-toggle", id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (h("div", { key: 'a8795ee99eba96b344f89fa3cad551ec7380b966', class: "duet-drawer-icon" }, h("duet-icon", { key: 'ba43b4fe302bf7acd9f73ddc974d141f455ff4f7', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("div", { key: '528eddbd58dc20742fec9b67347228f83b3aa84d', class: "duet-drawer-badge" }))), h("span", { key: 'e1863d335a91de0ebee61833c5df5cd8dbfe7556', class: "duet-drawer-label" }, this.label), h("div", { key: '1950983a0f5ee70f5f8025f75c3d17e37e1b7a15', class: "duet-drawer-caret" }, h("duet-icon", { key: '8eabe2d3fc3083ed7177e0c86103b6f3e72cc86e', margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))), h("div", { key: '2618b64bdc7e100de5ef65efa3b3c47f15282f14', id: "duet-drawer-content", class: {
                 "duet-drawer-content": true,
                 "duet-drawer-right": this.direction === "right",
                 "duet-drawer-left": this.direction === "left",

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

@@ -35,7 +35,7 @@ export class DuetOverlay {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'b97ad015b5683c5bf102b82383615099b3c3c8e5', "aria-hidden": "true" }, h("div", { key: 'c41a21343f6350020a9deb5c1208aed416714531', style: { zIndex: this.zIndex }, class: {
+        return (h(Host, { key: '1f48c95511f5fe345d0c954839878ca75143a23f', "aria-hidden": "true" }, h("div", { key: '1a659c3467a8badcf2f3530034358faab19382f5', style: { zIndex: this.zIndex }, class: {
                 "duet-overlay": true,
                 "duet-theme-turva": this.theme === "turva",
                 "keep-stacking-context": this.keepStackingContext,

package/lib/collection/components/duet-page-heading/duet-page-heading.js

@@ -35,12 +35,12 @@ export class DuetPageHeading {
      */
     render() {
         const layout = this.layout === "narrow" ? "narrow" : this.layout === "fluid" ? "fluid" : "auto";
-        return (h("div", { key: '803431131648461b8eb0eb01d9e4944e0684d72b', class: {
+        return (h("div", { key: 'f84be07f2c33b45360e553051478010014f8ee1f', class: {
                 "duet-page-heading": true,
                 "duet-theme-turva": this.theme === "turva",
                 "has-icon": !!this.icon,
                 [layout]: true,
-            } }, h("div", { key: '3d0b067e5771f19183bfe546410cd75b90383bda', class: "background" }, this.theme === "turva" && h("div", { key: '0eaf0689b220fd9a664c852c0e8c62dbcd9c93d1', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'fb9b5eba13698c957ea9df1bd949aad772f836b0', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: 'eec14617a162263bb9e3952092a85ec31acbcf40', class: "brand-shape second-shape" }), this.icon && (h("div", { key: 'e28b74c519355e8441e7b88155fe13b5bb22cee2', class: "brand-shaped-icon" }, h("duet-icon", { key: '165c0b3ecfaba195b12de65eb88a72e3028eaee6', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: 'de9f9e024423c7ef4366eb9e0086623a970347e0', class: "heading" }, h("slot", { key: '069af676aa6367b93193b0c9558c1ea8a1f74f47', name: "heading" }), this.progressCurrentStep && this.progressTotalSteps && (h("div", { key: '478b9498b2997e730451e857f0508793d3fc877f' }, h("duet-spacer", { key: 'e22d45a8cb8905c729b0e03f81ccd7263ea80893', size: "large" }), h("div", { key: '0f3dbfb349c731ae7f6928b813bfc49ac35b3aa0', role: "presentation" }, this.progressIndicator()))))));
+            } }, h("div", { key: 'bc767f86b6bd1c690db1716c7871c1f5772efb0a', class: "background" }, this.theme === "turva" && h("div", { key: 'd0159e0adbcc43de58942ec26c6456f25d3be7a3', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '6d44470ea21076c83188847450d3d43cb18cfdcc', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: '2e66c27bda85ecc8cf540bb2183683b0c0168d31', class: "brand-shape second-shape" }), this.icon && (h("div", { key: '270cfd764055e1f8635bd5e519191d56356d26f3', class: "brand-shaped-icon" }, h("duet-icon", { key: 'a43fcc34939632c3d59b94da64283461d3a58faa', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: '6a0f42bc5eb7747fde0fde4efc2ddc79792ddea7', class: "heading" }, h("slot", { key: 'f7783da2cb7a1de174229d4a36f9a400ca2ee67a', name: "heading" }), this.progressCurrentStep && this.progressTotalSteps && (h("div", { key: '1770423482557be3b25e59a0d4dd66b684afecc3' }, h("duet-spacer", { key: '1d404addde73988e6430a7f090b97646e6264aa4', size: "large" }), h("div", { key: '7149707ed0f09c0c1443d062c88be018637caa05', role: "presentation" }, this.progressIndicator()))))));
     }
     static get is() { return "duet-page-heading"; }
     static get encapsulation() { return "shadow"; }

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: '756ad0511064e85742b3bb271bdd2a468f3f1eb0', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: '4d235370cef9fc2b6d9448b2b02a02eefc04b97b', 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: 'd6ed3352906a8c13c0ba120e63acd5572db61555', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: 'd7cb59047ba6951fb8ec60beb986df51cc646c4a', 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: '4e98bb73d78c7cb713ac1de78d9d5ccbdce1687d', "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: '9d16f94604abbcfbbd8b538395e46c024b88c0a2', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: '7bbec70a660779cabba7847dd76732e9bfb71f1b', id: this.listId, class: {
+            } }, this.numbersStore !== "" && (h("div", { key: '902c6abd42e246304aae924b1406f8c2bc817bf5', "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: '4861b3a854f12cadae3f5d3f91806f5a50bed294', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: '66c09e15df929889c85137de8cdb0d7fbadbfc8f', 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: '974c29ddf4de1b7aca6e24f289be9fbb4177eb56', class: {
+            }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: 'f06ae0b46625378d53f7d6c968efe6cc37628669', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'd8fd5f3a859d470c11c15ae197313cc6c8983fc2', 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: 'c03e92b8f6ba758dd49e881380c964c87f155dcc', class: {
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '53de9f7186c2e9c280d3b987e33d3e50f9394301', 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: 'f1ee58d73ab3ec2e1e7044d16a36495ebb5fc259', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '71b346d9a35b397951223fb32bdd449441dab0bf', disabled: !!((this.internalSectionIndex === 0 && this.current <= 1) ||
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '5e064f5e0b53fe9c04b4e5167dff1b6acbe85c75', 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: '142ba228678916f8f9a69de0c8f38430c6db7623' }, h("li", { key: '6e2370fdf3f65c69d30ccee081b6426c12267a11', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '887ee7242f007578beb3b1a59702ab619d0a7e5e', 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: '0b5d04b555f074972abcc93a70a0d80bdadabcd4', class: "duet-pagination-page-number" }, "1"))), h("li", { key: '3cbe3bbf9ef3406f2a98aa736f692aaf87119857', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '462643a69aeecc463a23ba22f0bf79ea8c4456c3', 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: 'fa748ff5b134b6a0a3a4550f0073fbf45baf2337', 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: '0459e62e54d351fa5f22afa7afb3a3a6027df6c1' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: 'fb76ad813a83768da7a52230342170198efc321d', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '14b9164e41b63d0adbbfe5ef29074a46695a44d6', 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: '551f91a348760b5101e88adc3a3d8a3d692fc804', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: '454ccc661d104be10d0a3908fa7516e1f627fb57', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '01eeca39b9de17e25c39ffec6296c26920b86380', 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: '126295d5cf39d121da317412934d570d02b5d122' }, h("li", { key: 'ab615605de67abfa16ba5304450d4fbe4b40c1fd', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '81945909e8e4e70aede95ff3bcec869b59d2faaa', 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: '52a1704bf4e47e97a8165b34b133d75f7cf46ee6', class: "duet-pagination-page-number" }, "1"))), h("li", { key: 'db56afde04dc1c6ae372db9a7b12f5d8a968afca', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: 'bbcee542f0a2151957fe8612104cad3762a23972', 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: '63cbd7bc9380da4dee3360c052b0555329c6db24', 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: 'c7ce3b477074306822ad20b564aade9ec8cdbf5d' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: '76bed23b3e4010197e2682b581e2740c8c21158a', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '822ae63ebc41b29721791343bf9209798977c38a', 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: 'f89e2cb2097b4f9b41cd0a1d351ff3e4b7867b4f', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: '94ea90a52a62975ec11fac47ab933a7de8afa5ea', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '9eadf95f39e73639515ff03079b8528b2c0c7a59', 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: 'f4c0ca8a738f21233a966611c8ce15d7f776c7d7', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: '3dc850213f9f9c7aac8cabba1901740d6068cdde', class: {
+                : undefined }, h("div", { key: 'feefef8f45433820ca8e029094b1b4fe216067a5', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: '2577b388ea15e24be05de69b308c22dbb298e6d1', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'ddf5b89fac538ccdae84e031bea7a2830f656bc0', disabled: !!((this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'd7e18ac10323030b3c7e651e9b4598bba5d413f6', 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: '78c2482a7d36358e53000e55c19057c2b4585165', 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: 'a71b9d3150493bb242caed7d27ca3c6c2e79efa0', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '330747e12a1e3d8bc0fb74f3945d99c06d8132d0', disabled: (this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '1b9192690bdd80a356b64e71a87e44a697ffb9fa', 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 })))))));
     }

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: 'e9f8164c6795c950d1f1340cc8a723113f2e231a', "aria-describedby": this.id }, h("p", { key: '87942327cc0a685a6d1435adc090b8c0aa5c54ac', id: this.id, class: {
+        return (h(Host, { key: '64a84c4df04a399b3f9378b2fc4742c06767e0c3', "aria-describedby": this.id }, h("p", { key: '6d9c8a61f8506ecb6e8e8391ab5d645555e36055', 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: '858b0de4a678c0320e76f1479d7e9a7202a749ac' }))));
+            }, style: { color }, part: "duet-paragraph" }, h("slot", { key: '482892006f59215f0d9e7ba05b66bed8c5cee719' }))));
     }
     static get is() { return "duet-paragraph"; }
     static get encapsulation() { return "shadow"; }

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

@@ -252,9 +252,11 @@ export class DuetPopupMenu {
         return Array.from(this.element.querySelectorAll(":scope duet-popup-menu-item"));
     }
     get popupMenuStyleHeight() {
-        if (this.itemElements.length > 0 && this.scrollLimit) {
+        const selector = ":scope duet-popup-menu-item, :scope duet-notification";
+        const elements = Array.from(this.element.querySelectorAll(selector));
+        if (elements.length > 0 && this.scrollLimit) {
             const paddings = Number(spaceXSmall.replace("px", "")) * 2;
-            return `${this.itemElements[0].offsetHeight * this.scrollLimit + paddings}px`;
+            return `${elements[0].offsetHeight * this.scrollLimit + paddings}px`;
         }
         else {
             return "auto";
@@ -277,14 +279,14 @@ export class DuetPopupMenu {
             overflowY: "auto",
             height: this.popupMenuStyleHeight,
         };
-        return (h(Host, { key: 'af39c297a7f2c03182e3671d23fc67162e7854e3' }, h("div", { key: '7c8fd36f7f0bbe630e5c47f942327700dd3ad3eb', ref: element => {
+        return (h(Host, { key: 'df95a1ca83bfed0e3c2e62e4de9a03563491b7a4' }, h("div", { key: '0da0cb7b5bf6b0950b867af9d93a8937d40c4223', 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 }, h("slot", { key: '60c5bb890286cbbc5a9a33e8bc3d0fc1888dd193' }))));
+            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, h("slot", { key: 'f2e56ae51be1d5eb1b8c14a67496079e3dbcd3d1' }))));
     }
     static get is() { return "duet-popup-menu"; }
     static get encapsulation() { return "shadow"; }

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: '02e7a087e9f8df28e015c45b2182ab19167c39a2', role: this.accessibleRole }, h(TagName, { key: 'ac6c8e523bb7dbd6ce78dfb8e5ba1a34c765f538', 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: '003f72c807601366ce44ba41c92d01cc3867a995', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: '5936e48916d5c665070e490074e5310b52ad0cd9', class: "duet-popup-menu-item-label" }, h("slot", { key: '4f365167fa1ae20a9a26f91352791b8b94007088' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: '52e54059ac3b56ad022ed42085029a58b7010806', name: this.url && this.external
+        return (h(Host, { key: 'bf1b38aa7684c8cc3959b6b0725f83962341d58d', role: this.accessibleRole }, h(TagName, { key: '71cfa30d7780f2ab9a31f2aa3ff4bec91b8e0b7e', 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: '3552f0f0e6e303f23e012a9baa0b646d7f3eeb5e', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: '1c26c319a37978618960dce5c0e5de9731a576c9', class: "duet-popup-menu-item-label" }, h("slot", { key: 'c3f9e10b0f5c5af06d79ba6760b924f5abfb02d9' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: '2b5f54ffc9063c6ef1dfb38d59724a1ff9307ede', 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: '16fb5260a8d79c5b20bc7dcbb0d6fb078d41f0d5', 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: 'b9a42c7f906f16c62189ce82f8c1bbdeee169a7e', class: "duet-popup-menu-item-trailing" }, this.trailingText))));
     }
     static get is() { return "duet-popup-menu-item"; }
     static get encapsulation() { return "shadow"; }

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: 'f83619ce28610acafbc66c1d8392f8c452051c67', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '8f5ff8b80126c9189aeb1ab0be3d96e242194f8a', class: {
+        return (h(Host, { key: '369719dba1262d916b787afe98ffd4fa217e2f1a', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: 'a49708055d9810ca1cecc07070640f389f8b866b', 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: '0008fcd8728643f6b15f1d26545c09fdef9caf9b', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: '3f059c57eddc0062c1a64a0c24d9c3d37662d030', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: '87fdc0add050a058c55ad6b17c3317c078fce453', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: '21c7ee0d339ec3326172f97fc1e8163d6bfce4e0', class: "pre-heading" }, h("slot", { key: '6704480172514877730a1f71ef0b340b15f9abb1', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: 'e46822a4208488ff40a45205585127183cf5504c', class: "heading" }, h("duet-heading", { key: 'a1f3cfdbe8a21fa11934a97966055f06c6c3165c', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("span", { key: 'd9d5a0fbd035137c65b26eaaef8d53856a9fd54f' }, h("slot", { key: '6e47d85c740fb9524d99c8abc7c0ba5b36743d50', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'c017d68455e4c071e9b6897096f688dcbe18c639', class: "description" }, h("duet-paragraph", { key: 'd1ec5a43ab5839892ae94b3b63728d455961bee9', theme: this.theme, margin: "none", color: this.textColor }, h("span", { key: '15aeea47848cb9c0ba17d99359e321b96d00a485' }, h("slot", { key: '3aa7cb4344044cc7b2bf73aaafe60eb23bfb5f66', name: "description" }))))), this.hasActionSlot && (h("div", { key: '9125fab50390a9c9f220f8f3c54f241ba3ee5c09', class: "action" }, h("slot", { key: 'c56834545acbb95eee257f0ed422f50e80af67c8', name: "action" }))))))));
+            }, style: bannerStyles }, h(TagName, { key: 'c4c5c7f1a09b5641b228a7fc9b62afd950fdc8e1', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: '12c2264de14f12da9ec4002afeb5fe978ceaa719', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: 'ee62d417521f8201dcaf095a8fe86684a935ba2d', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: 'b5566b2e3ed124323ce8f7f34827e291f082f8e8', class: "pre-heading" }, h("slot", { key: '4db794c53c26048fa69d04b3b1ba1478de36c3d6', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: 'ca8c079241b93d7193b601a713de4b4e83e44630', class: "heading" }, h("duet-heading", { key: '9f6e20d605a3c35265fdd21d64b7862705ca5aeb', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("span", { key: '72f862b412fe7145d8e96eebdc91e82e38ba4072' }, h("slot", { key: '0933ea8abb5c7b5d70515f2bd685f210a4fb5a85', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'e81b515409efbd9b32ee45e0f930fd2ec5148a4e', class: "description" }, h("duet-paragraph", { key: 'c8483b63083ef1f07e44b49d0b51e21cf6d08f41', theme: this.theme, margin: "none", color: this.textColor }, h("span", { key: 'ec479361b133d65d444b9504d227167e353179e0' }, h("slot", { key: '732371f1f5719157476dd2d73d0750a6614bd88d', name: "description" }))))), this.hasActionSlot && (h("div", { key: '938ee22a3f9e771bd08ee7d092c002a9f989e289', class: "action" }, h("slot", { key: '91a2a79c7964862a39764fdac8de1a6a1679d1ea', name: "action" }))))))));
     }
     static get is() { return "duet-promo-card"; }
     static get encapsulation() { return "shadow"; }

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: '43d93bf62ed3c3b091933da841d015662b158e50', class: {
+        return (h("div", { key: '35bce1f47ba569cc34b6f4627b11c321f7ed7ee0', class: {
                 "duet-range-stepper": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, h("span", { key: '0eb7fa8f8e1f5853a16c85f8d9670c70d531f13a', class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { key: 'b89f2b93dfe5a510bf6acbdf30ce694ff1ac59dc', 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: 'a9d84ec5096ae382828ee82ba75bd558b08d49ea', 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: 'c4c9faf170e41dd8428464b8084ace48f8704d42', class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { key: 'c5fe0ebd2197ed50b2b6313f3289f339782ee4af', 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: '26fe2315b7915a46bd40fef5e5941fef008e980f', 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"; }

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

@@ -30,39 +30,6 @@
   position: relative;
   display: flex;
 }
-:host .duet-scrollable-items .duet-scrollable-fade-overlay {
-  position: absolute;
-  bottom: 0;
-  z-index: 250;
-  display: block;
-  width: 10px;
-  height: 100%;
-  pointer-events: none;
-  transition: transform 300ms ease;
-}
-:host .duet-scrollable-items .duet-scrollable-fade-overlay--hidden {
-  display: none;
-}
-:host .duet-scrollable-items:not(.buttons) .duet-scrollable-fade-overlay {
-  /* stylelint-disable */
-  /* stylelint-enable */
-}
-:host .duet-scrollable-items:not(.buttons) .duet-scrollable-fade-overlay.left {
-  left: calc(0px - 10px);
-  background-image: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));
-}
-:host .duet-scrollable-items:not(.buttons) .duet-scrollable-fade-overlay.right {
-  right: calc(0px - 10px);
-  background-image: linear-gradient(to left, rgb(255, 255, 255), rgba(255, 255, 255, 0));
-}
-:host .duet-scrollable-items.buttons .duet-scrollable-fade-overlay.left {
-  left: calc(40px - 10px);
-  background-image: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));
-}
-:host .duet-scrollable-items.buttons .duet-scrollable-fade-overlay.right {
-  right: calc(40px - 10px);
-  background-image: linear-gradient(to left, rgb(255, 255, 255), rgba(255, 255, 255, 0));
-}
 :host .duet-scrollable-items.buttons .duet-scrollable-button-container {
   position: relative;
   flex: 0 0 auto;
@@ -86,10 +53,10 @@
   background-color: rgb(255, 255, 255);
 }
 :host .duet-scrollable-items.buttons .duet-scrollable-button-container--absolute.left {
-  left: -10px;
+  left: -2px;
 }
 :host .duet-scrollable-items.buttons .duet-scrollable-button-container--absolute.right {
-  right: -10px;
+  right: -2px;
 }
 :host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button {
   position: absolute;
@@ -148,9 +115,8 @@
 :host .duet-scrollable-items .duet-scrollable-list {
   display: flex;
   flex-wrap: nowrap;
-  padding-right: 10px;
-  padding-left: 10px;
-  margin: 0 -10px;
+  padding-inline: 10px;
+  margin-inline: -10px;
   /* Make this scrollable when needed */
   overflow-x: auto;
   /* We don't want vertical scrolling */
@@ -166,6 +132,23 @@
   /* For WebKit implementations, provide inertia scrolling */
   -webkit-overflow-scrolling: touch;
   /* Remove the default scrollbar for WebKit implementations */
+  -webkit-mask: linear-gradient(to right, transparent 0, #fff 10px), linear-gradient(to left, transparent 0, #fff 10px);
+  -webkit-mask-size: 50% 100%, 50% 100%;
+  -webkit-mask-position: left, right;
+  -webkit-mask-repeat: no-repeat;
+  mask: linear-gradient(to right, transparent 0, #fff 10px), linear-gradient(to left, transparent 0, #fff 10px);
+  mask-size: 50% 100%, 50% 100%;
+  mask-position: left, right;
+  mask-repeat: no-repeat;
+  /* For absolutely positioned buttons, we remove the fade overlay
+     and adjust padding/margin to account for button borders,
+     preventing border clipping due to overflow issues */
+}
+:host .duet-scrollable-items .duet-scrollable-list--absolute {
+  padding-inline: 2px;
+  margin-inline: -2px;
+  -webkit-mask: none !important;
+  mask: none !important;
 }
 :host .duet-scrollable-items .duet-scrollable-list:not(.buttons) {
   white-space: normal;

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

@@ -21,7 +21,8 @@ export class DuetScrollable {
          */
         this.resizeObserver = new ResizeObserver(entries => {
             if ((entries === null || entries === void 0 ? void 0 : entries.length) === 1) {
-                this.checkScrollingNeeded(entries[0].target);
+                const threshold = this.buttonPosition === "absolute" ? 0 : 5;
+                this.checkScrollingNeeded(entries[0].target, threshold);
             }
         });
         this.collapsedOnClick = () => {
@@ -55,7 +56,8 @@ export class DuetScrollable {
     componentDidLoad() {
         requestAnimationFrame(() => {
             if (this.scrollPaneElement) {
-                this.checkScrollingNeeded();
+                const threshold = this.buttonPosition === "absolute" ? 0 : 5;
+                this.checkScrollingNeeded(this.scrollPaneElement, threshold);
                 this.updateScrollButtons();
                 this.resizeObserver.observe(this.scrollPaneElement);
             }
@@ -72,15 +74,20 @@ export class DuetScrollable {
     }
     /**
      * Check if scrolling is needed.
+     *
+     * @param element - The element to check.
+     * @param threshold - The threshold to allow content to be slightly wider before showing buttons.
+     *                    Defaults to half of the overlay width, since gradient is 10px wide with 50/50 split.
      */
-    checkScrollingNeeded(element = this.scrollPaneElement, threshold = 10) {
+    checkScrollingNeeded(element = this.scrollPaneElement, threshold = 5) {
+        var _a;
         if (!element) {
             return;
         }
-        const scrollPaneWidth = element.getBoundingClientRect().width;
-        const totalContentWidth = element.scrollWidth;
-        this.needsScrolling = totalContentWidth > scrollPaneWidth + threshold;
-        // Update scroll buttons whenever we check if scrolling is needed
+        const parentWidth = ((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
+        const contentWidth = element.scrollWidth;
+        const overlayWidth = 10 * 2;
+        this.needsScrolling = contentWidth - overlayWidth > parentWidth + threshold;
         if (!this.needsScrolling) {
             this.scrollPaneAtStart = true;
             this.scrollPaneAtEnd = true;
@@ -184,13 +191,6 @@ export class DuetScrollable {
         const last = this.getLastVisibleElement();
         this.scrollToElement(last + 1, "center");
     }
-    renderFadeOverlay(direction) {
-        return (h("div", { class: {
-                "duet-scrollable-fade-overlay": true,
-                "duet-scrollable-fade-overlay--hidden": !this.needsScrolling,
-                [`${direction}`]: true,
-            } }));
-    }
     renderButton(direction) {
         const arrowColor = this.theme === "turva" ? "color-primary-darker-turva" : "color-primary";
         const arrowColorDisabled = this.theme === "turva" ? "color-gray-turva" : "color-gray";
@@ -226,24 +226,25 @@ export class DuetScrollable {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'b504fd4028c66cb3f252f2457231201e8637e39d', class: {
+        return (h(Host, { key: 'f9d32985477e8239420fb052f9f621f9f8990f87', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
-            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: 'a0c7fefc5d30e27c1fae3999c2966a3fcad784ac', class: {
+            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: 'ba59942211ad1695d127b0523114e7a1f9e49e06', class: {
                 collapse: true,
                 hide: !this.needsScrolling && !this.collapsed,
-            } }, h("duet-button", { key: '84516dfa33b911b6d44b4ebc4a6bdb50bb453ac5', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: 'fb5655a9fd34b75aad1058661758f82348a4a095', name: "collapse-button-label" })))), h("div", { key: 'd1e2cb7e141339d16c3b751ac6038be0a0249756', class: {
+            } }, h("duet-button", { key: '76946873948e27b8d40469f07a47ad3e90523b8d', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '05fec97266546725966d97fce471e9fe17a9ca39', name: "collapse-button-label" })))), h("div", { key: '60cc97e2e4231e59a28bd09f51652af060ef6e24', class: {
                 "duet-scrollable-items": true,
                 buttons: this.buttons,
                 center: this.center,
                 "duet-theme-turva": this.theme === "turva",
-            } }, this.buttons && this.renderButton("left"), this.buttonPosition !== "absolute" && this.renderFadeOverlay("left"), h("div", { key: '88ca7b1fee44baad88a375c3ce3c6771950676da', class: {
+            } }, this.buttons && this.renderButton("left"), h("div", { key: 'eebe387b2c90a47647bdd16514dfe79fbe2f6436', 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",
-            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: '7897d6cc44537da418aab9644667129fdecef8b5' })), this.buttonPosition !== "absolute" && this.renderFadeOverlay("right"), this.buttons && this.renderButton("right"))));
+                [`duet-scrollable-list--${this.buttonPosition}`]: this.buttonPosition === "absolute",
+            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: '365952437c69244c0bd5e4917c3711a300e7509e' })), this.buttons && this.renderButton("right"))));
     }
     static get is() { return "duet-scrollable"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,9 +25,6 @@
   width: 100%;
 }
 
-:host(.duet-middle) {
-  display: flex;
-}
 :host(.duet-middle) .duet-layout {
   padding: 36px 28px !important;
 }