@duetds/components 9.2.10 → 9.3.1

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

@@ -40,11 +40,11 @@ export class DuetMenuBarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'dff3e65bfa27e226d174dbf7fdb57c067bcb24f2' }, h("a", { key: 'c90358c20ce27776461c970e68048427cc2503c8', class: {
+        return (h(Host, { key: '8d112f638049058d29ae3ba9ab00d6acbb52f857' }, h("a", { key: '39954a1d2940510a100fc6d20302767612d0bfd0', class: {
                 "duet-menu-bar-dropdown-link": true,
                 [`duet-menu-bar-dropdown-link--slot-${this.getVariant()}`]: true,
                 "duet-theme-turva": this.theme === "turva",
-            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '52930cb9d1151120fa0191844d65f06a8f5f6319', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: '616f450950804fb9a72a010436eb1d7ec4ad02c2' }))));
+            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '488d03db430f04af7c2c6a13f31ae5932a57e40e', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: 'b42533bc5fd7ccc2557d1cb2b2ad7dc8bed68b30' }))));
     }
     static get is() { return "duet-menu-bar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -48,11 +48,11 @@ export class DuetMenuBarItem {
      */
     render() {
         const TagName = this.url ? "a" : "button";
-        return (h(Host, { key: '46e23a090bd69731fad23bb7d815fe07949961f1', role: "listitem" }, h(TagName, { key: 'fd2f0cd2b271a5030924b17a318d91ef5f375b26', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: '564cec69e1e6e84d349582f746e7a4398980d788', role: "listitem" }, h(TagName, { key: '3c025a87721de91b523330f2f609064e0e0f973f', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
                 "duet-menu-bar-item": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: 'c5f65e90e67f40726dbd1ad1fcecc275b792fcea', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'b9846826ebc0c12f36548a00d1e4156507136f91' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: '4d20597bf6e7a17b841c08f429ca64820a01198a', class: {
+            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: 'c615dc0da6804efce3f5e038f578314ce7963a05', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '0944adf559c68a55cbedb75bc8a4d038197dc4fe' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: '81b6caf00069e39948f9c1f69370144367bbaf12', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!this.external,

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: 'efb7d0aed76d4f7da05e21e41d92c63465308df6', role: "listitem" }, h("a", { key: 'ed248ea08e7b2be2dafa2617b9b18935ff6aa583', class: {
+        return (h(Host, { key: '2af75611d72cb2981e7bdd6be6ee1a309eb689b0', role: "listitem" }, h("a", { key: 'a7966c48fbbf6c673c284e22f66b43103033e055', 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: 'cb0bb182c2620d4dd5d0484731f8f7ecca86d7bc', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '686e67b70d05cadb8fa67ed044524dce04e841ff' }))));
+            }, 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' }))));
     }
     static get is() { return "duet-menu-bar-link"; }
     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: '97cff27b21fb239339ebc9dc8bc5c267e20ed1f9' }, h("div", { key: '33276844fc09bd3a555ab9e033db7d5c2640da5c', class: { container: true, sticky: this.sticky } }, h("slot", { key: '1f135950c0220a03209aa273bcba83c4477f804a' }), h("slot", { key: '09ac4ab46b3ad110b30ec38907906fe5f16526db', name: "mobile" }), h("slot", { key: '995bc3f699e56d23b8a59df9a84e9a525c970cb3', name: "desktop" }))));
+        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" }))));
     }
     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: '95f620022395e56f383b054bdd44e43eef780659', role: "listitem", class: {
+        return (h("div", { key: 'b2c27c02bb299100ebac95d66cf5537af6894d95', role: "listitem", class: {
                 "duet-notification": true,
                 "duet-notification-highlight": this.highlight,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("a", { key: 'c2b26563af673ed607eda71ac73618a97df4182d', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: '3a4d58c959a73f4eb54b7b1f2341b6cf47b3111d', class: "duet-notification-container" }, h("div", { key: 'a98286e2d2c067a14faa839ab3dec3d29ff29014', class: "duet-notification-badge-container" }, this.highlight && (h("div", { key: 'fdd7359a0ca2bec377cc7312f1005bb351dc9f81', class: "duet-notification-badge" }, h("duet-visually-hidden", { key: '4974d054afafb18ff69c464d722ee606c02a73fc' }, this.accessibleLabelUnread, ":")))), h("div", { key: '5ce2f9c01226ba63cb3d23f1b878d8384040e92b', class: "duet-notification-content" }, h("slot", { key: 'f99affc9adf412fd40861d10bccd092bfb08f2e9' })), h("div", { key: 'de4db79428641035052ede5c208377823828bcab', class: "duet-notification-date" }, this.date)))));
+            } }, 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)))));
     }
     static get is() { return "duet-notification"; }
     static get encapsulation() { return "shadow"; }

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: '2a170e4c6fc33fdba313ded3c3f01a78c9ac0866', class: {
+        return (h("div", { key: '803431131648461b8eb0eb01d9e4944e0684d72b', class: {
                 "duet-page-heading": true,
                 "duet-theme-turva": this.theme === "turva",
                 "has-icon": !!this.icon,
                 [layout]: true,
-            } }, h("div", { key: '4b02d9d0134c3cb06bba6bdbd1b20f9d2d26e56a', class: "background" }, this.theme === "turva" && h("div", { key: 'ba779c516b2646ea7b062bd893a5928a91770b51', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '975ea6aff24cd955e428eb5c92312984dc034d56', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: 'cc7486a21275418c5bb85daef2f87a8272b94aa7', class: "brand-shape second-shape" }), this.icon && (h("div", { key: '47ea901848ac5c4e50bc3c961d9bfa6f904d6d37', class: "brand-shaped-icon" }, h("duet-icon", { key: '370ac1f81a9d150ca01159b00a60cd8a730aef5f', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: '0b151e3015924091b9e9a35145e23754234641ef', class: "heading" }, h("slot", { key: '89c063ef8fceed0f4c75255f29dcd7200f394976', name: "heading" }), this.progressCurrentStep && this.progressTotalSteps && (h("div", { key: 'ee3688b0e6d3145fbf47501fc353caa398898e5f' }, h("duet-spacer", { key: '0b86d382eee4c4287419fe1c660970f943c32cba', size: "large" }), h("div", { key: 'e0010cce92077310161c55fd134b022eb8f7e035', role: "presentation" }, this.progressIndicator()))))));
+            } }, 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()))))));
     }
     static get is() { return "duet-page-heading"; }
     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: 'c1a1de7dff739a9682d326b8d95ebc1a6b654116', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: 'ca9a98e6b0fd507a266e7df4ea2c9f633c025e94', class: {
+        return (h(Host, { key: 'f83619ce28610acafbc66c1d8392f8c452051c67', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '8f5ff8b80126c9189aeb1ab0be3d96e242194f8a', 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: 'ecd0f55f11b5ab945cb5f8731bfcdf0f9896329f', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: '5e172fe31a4f2f5f2a1a332fa8d8b5a1cbf3d01e', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: '0dd4c9c41fea8db65956d2c844fb78a97ab279ef', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: '2d89e751682632487cfcefcdce063886070711a1', class: "pre-heading" }, h("slot", { key: '0e4a51c40d95dd0080de19cd45bf70e117f4a131', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '72a74b257a084c3ddf7e7285da10875c21db8790', class: "heading" }, h("duet-heading", { key: 'b34a76dad87e9726296d775f3145b2c7b640bee4', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("span", { key: '3fd56ffd4b2600856059091709f347f689e8a017' }, h("slot", { key: 'ce33481480a296bc9884ed1de8b77e31232b0f23', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'a3c2f1b7a9bc92599183ce1ea8aabebd0849b30b', class: "description" }, h("duet-paragraph", { key: '2e90a512af33afbf6635faa626ff038d3beb2034', theme: this.theme, margin: "none", color: this.textColor }, h("span", { key: '0d774578043b823e14e314169fdcde5d4a4f002d' }, h("slot", { key: '2da893d28fe769d4d5b9bc46104be41223eb96d8', name: "description" }))))), this.hasActionSlot && (h("div", { key: 'b20a53961de0cf3392ab726634262978ecb3a6f1', class: "action" }, h("slot", { key: '1221939ab0a8061182f7b648c104ad75ae6f36b4', name: "action" }))))))));
+            }, 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" }))))))));
     }
     static get is() { return "duet-promo-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -76,6 +76,21 @@
   overflow: hidden;
   visibility: hidden;
 }
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container--absolute {
+  position: absolute;
+  top: 0;
+  z-index: 202;
+  width: auto;
+  height: 100%;
+  padding: 0 16px;
+  background-color: rgb(255, 255, 255);
+}
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container--absolute.left {
+  left: -10px;
+}
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container--absolute.right {
+  right: -10px;
+}
 :host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button {
   position: absolute;
   display: flex;
@@ -104,13 +119,35 @@
 :host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--bottom {
   align-items: flex-end;
 }
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute {
+  padding: 0 7px;
+  border: 1px solid rgb(212, 223, 229);
+}
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute.duet-scrollable-button--left {
+  border-radius: 8px 0 0 8px;
+}
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute.duet-scrollable-button--right {
+  border-radius: 0 8px 8px 0;
+}
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute:hover {
+  border-color: rgb(0, 119, 179);
+  border-width: 2px;
+  /* stylelint-disable */
+  /* too deep nesting */
+  /* stylelint-enable */
+}
+.duet-theme-turva :host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute:hover {
+  border-color: rgb(113, 118, 132);
+}
 :host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button[hidden] {
   display: none !important;
 }
+:host .duet-scrollable-items.duet-theme-turva .duet-scrollable-button-container .duet-scrollable-button--absolute:hover {
+  border-color: rgb(113, 118, 132);
+}
 :host .duet-scrollable-items .duet-scrollable-list {
   display: flex;
   flex-wrap: nowrap;
-  gap: 20px;
   padding-right: 10px;
   padding-left: 10px;
   margin: 0 -10px;
@@ -139,6 +176,12 @@
 :host .duet-scrollable-items .duet-scrollable-list.collapsed {
   flex-wrap: wrap;
 }
+:host .duet-scrollable-items .duet-scrollable-list.gap-none {
+  gap: 0;
+}
+:host .duet-scrollable-items .duet-scrollable-list.gap-large {
+  gap: 20px;
+}
 :host .duet-scrollable-items .duet-scrollable-list.duet-overflow-padding--xx-small {
   padding-top: 4px;
   padding-bottom: 4px;

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

@@ -36,8 +36,10 @@ export class DuetScrollable {
         this.collapsed = false;
         this.buttons = true;
         this.buttonAlignment = "center";
+        this.buttonPosition = "relative";
         this.center = false;
         this.padding = "none";
+        this.gap = "large";
         this.selected = 0;
     }
     watchPropHandler(newValue) {
@@ -205,8 +207,10 @@ export class DuetScrollable {
                 "duet-scrollable-button-container": true,
                 [`${direction}`]: true,
                 "duet-scrollable-button-container--occluded": !this.needsScrolling,
-            } }, h("span", { part: `${this.identifier}-button-${direction}`, "aria-hidden": "true", class: {
+                [`duet-scrollable-button-container--${this.buttonPosition}`]: true,
+            }, hidden: !this.buttons || (this.buttonPosition === "absolute" && scrollPaneLocation) }, h("span", { part: `${this.identifier}-button-${direction}`, "aria-hidden": "true", class: {
                 "duet-scrollable-button": true,
+                [`duet-scrollable-button--${this.buttonPosition}`]: true,
                 [`duet-scrollable-button--${this.buttonAlignment}`]: true,
                 [`duet-scrollable-button--${direction}`]: true,
             }, onClick: () => {
@@ -215,28 +219,31 @@ export class DuetScrollable {
                     ;
                     document.activeElement.blur();
                 }
-            }, hidden: !this.buttons || scrollPaneLocation }, h("duet-icon", { color: scrollPaneLocation ? arrowColorDisabled : arrowColor, name: direction === "left" ? "action-arrow-left" : "action-arrow-right", size: "small", margin: "none" }))));
+            }, hidden: !this.buttons || scrollPaneLocation }, h("duet-icon", { color: scrollPaneLocation ? arrowColorDisabled : arrowColor, name: direction === "left" ? "action-arrow-left" : "action-arrow-right", size: this.buttonPosition === "absolute" ? "x-small" : "small", margin: "none" }))));
     }
     /**
      * render() function
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'ba1e4f4c2221fec32507a3ba66829f2f34dcb225', class: {
+        return (h(Host, { key: 'b504fd4028c66cb3f252f2457231201e8637e39d', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
-            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: '5d9131e9e7be00a46d1f919d04127586cc9a6d91', class: {
+            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: 'a0c7fefc5d30e27c1fae3999c2966a3fcad784ac', class: {
                 collapse: true,
                 hide: !this.needsScrolling && !this.collapsed,
-            } }, h("duet-button", { key: 'af675db06e61bd24d608ba0395ca54bd8feac172', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '686ee5f4804f2a3ffd059778eee189633615bf37', name: "collapse-button-label" })))), h("div", { key: '074caf18d31c3b9a019cebf7ca2e8ac6b7ca61e4', class: {
+            } }, 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: {
                 "duet-scrollable-items": true,
                 buttons: this.buttons,
                 center: this.center,
-            } }, this.buttons && this.renderButton("left"), this.renderFadeOverlay("left"), h("div", { key: '64cd0312d4a7b8db126efb7c153519d8c99f61a5', class: {
+                "duet-theme-turva": this.theme === "turva",
+            } }, this.buttons && this.renderButton("left"), this.buttonPosition !== "absolute" && this.renderFadeOverlay("left"), h("div", { key: '88ca7b1fee44baad88a375c3ce3c6771950676da', 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: '380081180cef409cb8b9e6cd4e572e0699678137' })), this.renderFadeOverlay("right"), this.buttons && this.renderButton("right"))));
+            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: '7897d6cc44537da418aab9644667129fdecef8b5' })), this.buttonPosition !== "absolute" && this.renderFadeOverlay("right"), this.buttons && this.renderButton("right"))));
     }
     static get is() { return "duet-scrollable"; }
     static get encapsulation() { return "shadow"; }
@@ -358,6 +365,29 @@ export class DuetScrollable {
                 "reflect": false,
                 "defaultValue": "\"center\""
             },
+            "buttonPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"absolute\" | \"relative\"",
+                    "resolved": "\"absolute\" | \"relative\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "button-position",
+                "reflect": false,
+                "defaultValue": "\"relative\""
+            },
             "center": {
                 "type": "boolean",
                 "mutable": false,
@@ -375,7 +405,7 @@ export class DuetScrollable {
                 "getter": false,
                 "setter": false,
                 "attribute": "center",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "padding": {
@@ -404,6 +434,29 @@ export class DuetScrollable {
                 "reflect": false,
                 "defaultValue": "\"none\""
             },
+            "gap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"none\" | \"large\"",
+                    "resolved": "\"large\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "gap",
+                "reflect": false,
+                "defaultValue": "\"large\""
+            },
             "selected": {
                 "type": "number",
                 "mutable": true,

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: '5a0fe7bda2f99a571bb9a91389d22bb429b92176', class: {
+        return (h(Host, { key: '880268957ee754272edd7e40e176726a591b2adb', class: {
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: 'fa8ce66fb4314c7b613db9d9c8a41a6184998e6f', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: 'eec70679e3914498d52cf5fabc0b6f107afcb263', class: {
+            } }, h("div", { key: '5e2b1ae22d53f082ba7e458fed1d1b83db828aa6', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: '10978c202d2ad0170dbe560f21b6ba7fb1e05bab', class: {
                 "duet-layout": true,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("section", { key: 'a6816d9b522355e91cd3e226d5501b50b27ca0cc', class: "duet-main" }, h("slot", { key: 'be71578ddc8566d81734e0e036416767b0c42899' }))))));
+            } }, h("section", { key: '153963d27cd28795bdc91750aeb4e6cc5a02f208', class: "duet-main" }, h("slot", { key: 'fe61fac6c0e7a60b7d922c06151ab5da69c082da' }))))));
     }
     static get is() { return "duet-section-layout"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-shaped-image/duet-shaped-image.js

@@ -25,9 +25,9 @@ export class DuetShapedImage {
         const style = {
             "--rotation": `${this.rotation}deg`,
         };
-        return (h(Host, { key: 'cb4154853051eec78a10658344407c1653d737b3', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: '5cab0035d46b9e020cf7e4a18105a999646ad437', class: {
+        return (h(Host, { key: 'cd0b0f6d908af8e5c1788f66c005af3d54ec8686', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: 'ab56ab6af75d0a182f5a02ead485ffc9f4205ea4', class: {
                 "shaped-image": true,
-            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: '8c2d2bb60ac9042377402dea4453e4ec17885aac', class: "shaped-image-mask", role: "presentation" }, h("span", { key: '765b32769035c6746c0412be9fe3b70bf8c75039', class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
+            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: '7933b45865574df0185d2ee4913cba4744215d87', class: "shaped-image-mask", role: "presentation" }, h("span", { key: '5ad7e042965e34bc68d5e6f277a4f222590e83cc', class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
     }
     static get is() { return "duet-shaped-image"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,8 +27,12 @@ export class DuetSlideout {
         };
         this.isSafariBrowser = /^((?!chrome|android).)*safari/i.test(navigator === null || navigator === void 0 ? void 0 : navigator.userAgent);
         this.hasStickyHeaderSlot = false;
-        this.setOpenButton = (element) => {
+        this.setOpenButton = (element, addClickListener = false) => {
+            if (this.openButton) {
+                this.openButton.removeEventListener("click", this.openButtonEventListener);
+            }
             if (!element) {
+                this.openButton = undefined;
                 return;
             }
             try {
@@ -36,6 +40,9 @@ export class DuetSlideout {
                 button.accessiblePopup = "true";
                 button.accessibleExpanded = false;
                 this.openButton = button;
+                if (addClickListener) {
+                    this.openButton.addEventListener("click", this.openButtonEventListener);
+                }
             }
             catch (_e) { }
         };
@@ -80,17 +87,11 @@ export class DuetSlideout {
         return this._opener;
     }
     set opener(value) {
-        if (this.opener === value) {
-            return;
-        }
-        if (typeof value === "string") {
-            this.setOpenButton(document.getElementById(value));
-            if (this.openButton) {
-                this.openButton.addEventListener("click", this.openButtonEventListener);
-            }
-        }
-        else {
-            this.setOpenButton(value);
+        const isString = typeof value === "string";
+        const element = isString ? document.getElementById(value) : value;
+        if (this.openButton !== element) {
+            this._opener = value;
+            this.setOpenButton(element, isString);
         }
     }
     /**
@@ -121,10 +122,14 @@ export class DuetSlideout {
             this.teleport.activate();
         }
         this.setStickHeaderStyleMutations();
-        this.mutationObserver = new MutationObserver(() => {
-            this.openPanel = !!this.getOpenPanel();
-        });
-        this.mutationObserver.observe(this.element, { childList: true, attributeFilter: ["open"], subtree: true });
+        if (!this.mutationObserver) {
+            this.mutationObserver = new MutationObserver(() => {
+                this.openPanel = !!this.getOpenPanel();
+            });
+        }
+        if (this.mutationObserver) {
+            this.mutationObserver.observe(this.element, { childList: true, attributeFilter: ["open"], subtree: true });
+        }
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
@@ -134,9 +139,7 @@ export class DuetSlideout {
         if (this.mutationObserver) {
             this.mutationObserver.disconnect();
         }
-        if (this.openButton) {
-            this.openButton.removeEventListener("click", this.openButtonEventListener);
-        }
+        this.setOpenButton(undefined);
         this.setStickHeaderStyleMutations(true);
     }
     handleOpenChange(newValue, oldValue) {
@@ -243,16 +246,16 @@ export class DuetSlideout {
         };
         const topLevelOpenMenuBarTranslation = getLocaleString(this.topLevelOpenMenuBarLangObject);
         const exitTranslation = getLocaleString(this.exitLangObject);
-        return (h(Host, { key: '14fdba7fda5928417732464bfb4fd9b16f7b2064' }, h("div", { key: 'ad888076253b6aadf02beac7fd057ac3fb4fdf3d', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: '402885b296bd543ddbe8cf83908e90a181b9da10', visible: this.open, "display-device": "large", zIndex: "600" }), h("div", { key: 'e93a803cbfbe0be22ec7fd6f70c890bf1b652532', ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "slot-container", class: {
+        return (h(Host, { key: '6e5e82df416b1ecb00cff9f68a29958da62a20be' }, h("div", { key: '6159dec7235283ca300ef58f479f6ffbf776a812', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: '07e23e529d9fce358179aa7f5043ba60cc56709e', visible: this.open, "display-device": "large", zIndex: "600" }), h("div", { key: '892d3a0b4d482032bcb690764a6e00b82a3795c3', ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "slot-container", class: {
                 dialog: true,
                 hidden: !this.open,
                 modal: this.modal,
-            }, style: styles }, h(FocusGuard, { key: '0e6e26357b438fb966c72cf164a4c39ce8b235bd', moveFocusTo: this.closeButton }), h("div", { key: 'c65959274e1c3191495c03d01adb69c76d23e3e4', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'd03362b067baf916076e9992e63933b309e84e44', class: "top" }, h("button", { key: '893421c3ed8c0224031b2db5c2db1f1eb7f1791a', ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
+            }, style: styles }, h(FocusGuard, { key: '69f48564aca2c2bcfb4162c4c68dc81253590a09', moveFocusTo: this.closeButton }), h("div", { key: '20f6e5982ba1b1912490953fc6d942a2689ba368', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '1da38aeb57837d9e32cc5e1441e1b585fa94ffa7', class: "top" }, h("button", { key: '99058f882152f721b179848e56b8730ac22505a7', ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
                 "slideout-close": true,
                 active: this.open,
-            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: '354bcaf0344522712c12904991ade60e97924b88', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'a55711bc7b1ad408dc4720372cedc676a303fe84', class: "sticky-header" }, h("slot", { key: '15ef13899e66f98dd681b8105528d8f55fd2f2a2', name: "sticky-header" }))), h("div", { key: '698ce98219d2c6d387e92b96a71967bc632dee00', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
+            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: '46a02404e3c835245738669ce08b0f58bf5ff59b', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'cc749c84e33bab659bbbdf87f05b3a886ee18880', class: "sticky-header" }, h("slot", { key: 'f4ae41432a781d3e542fe7c4b7cf30d24cadc325', name: "sticky-header" }))), h("div", { key: 'a8fb4902e1118fe7ebce133d5f07425c38c42ee0', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
                 items: true,
-            } }, h("slot", { key: '75862e49d89cdd2e20ecaa574b1c76da95f3c1c6' })), h(FocusGuard, { key: 'e74750f4e595532c2fb7185a40f57efa7e032122', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: '0316c27c324fbd1a18cb10793b6d07eb7d90cdd2' })), h(FocusGuard, { key: 'b1f0f1f05d2d5e2db735ad8f96d51acc83c90b82', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout-lang/duet-slideout-lang.js

@@ -35,7 +35,7 @@ export class DuetSlideoutLang {
      */
     render() {
         const langTranslation = getLocaleString(this.chooseLangObject);
-        return (h(Host, { key: 'a3f0902bcc3942cfdd9bd39d753bfcfeeebf8bd4' }, h("div", { key: 'e4b2d5245b065602e7b74bab03d2ad9a6390d5ab', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '10f383d1179787ca4dda410b10ac2785bcbbcc36', name: "navigation-language", margin: "none", color: "secondary" }), h("slot", { key: '3a3f899dd72eb996f48ac588474810a95fa6fc19' }))));
+        return (h(Host, { key: '7fdf56886b7eef7853a2390545e83b43e1aea17b' }, h("div", { key: '95c15df38395b09803b5a48382950a07d5d8a6b1', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '5500047f8d4ae1a3d118abd0e0e850211212cc4a', name: "navigation-language", margin: "none", color: "secondary" }), h("slot", { key: '906ac6c0864cf946423ed34875c4c122e0784113' }))));
     }
     static get is() { return "duet-slideout-lang"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout-link/duet-slideout-link.js

@@ -26,12 +26,12 @@ export class DuetSlideoutLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '756d30871c5f34ca3520a5bdecf5269c6a0b4afb' }, h("a", { key: '16dfc8d2bcae2379ab25ce353eda255e79d6ad6b', class: {
+        return (h(Host, { key: 'aa07296629d813134f481a3e1ebfb6d31951bc48' }, h("a", { key: '56ae85701570dfa3ae4cae8f15fb395f9199776a', class: {
                 "duet-slideout-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [this.size]: true,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '6551aa92fee9498b1fc2b4ebb18a89ff1c72e607', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { key: 'f841f0d234ffca0d1dbaaae18e9de9f1de02de55', class: "label" }, h("span", { key: '452f28fecf67c0da43ea807dd572d1db83e10ae6' }, h("slot", { key: '896258d4f5fbcc5efa21d49cd867e0578302dbef' }), h("slot", { key: '6de4aa964201a5ffe68d7f894a499289db302527', name: "description" })), this.caret && (h("duet-icon", { key: '3b7c9337d8d76eb9bcc71fe7277e84599692bce4', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '4872989601ff5a2c3ff458b53345292f358956a9', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { key: '71fe6a89063381d1ec5d4a8d6960954660374bc0', class: "label" }, h("span", { key: 'b9e2aca6c05cc945917f87d74b3f4c611814e8cb' }, h("slot", { key: 'b917c1d51c62a2ab229c396f7afb3468c0b240e6' }), h("slot", { key: '775dbc1e31d128b448b72e876f0f53609358c709', name: "description" })), this.caret && (h("duet-icon", { key: '47c65d4e0cc5745e120730849beb97dcee30cb74', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
     }
     static get is() { return "duet-slideout-link"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout-panel/duet-slideout-panel.js

@@ -159,23 +159,23 @@ export class DuetSlideoutPanel {
         };
         const exitTranslation = getLocaleString(this.exitLangObject);
         const backTranslation = getLocaleString(this.backLangObject);
-        return (h(Host, { key: '10b414a1d813be3e7f5ef8070b2c1d984c25ac44' }, h("div", { key: '50ee38592ea290018fefaf87e3c8625579636ed9', class: {
+        return (h(Host, { key: '4f6b906ea71b580ba0caff7862d79e685515e872' }, h("div", { key: '5b9938129529e0abdbf3d61ca38814fef9cf5cf4', class: {
                 "duet-slideout-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: '4222c80ec11e0f6acb4eeaebf216968e42537c70', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: 'bd4e836d9da0174031251e74c5d34db39f3f17c1', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 link: true,
                 active: this.active,
-            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: 'ef87af453a36ae15d81ed98b882798092522610c', class: "duet-slideout-icon" }, h("duet-icon", { key: '540a8e1f36285104c675438d0a053ce5a8aeaa38', name: this.icon, size: "medium", margin: "none", color: "secondary" }), this.badge && h("div", { key: 'a90b2189e9b0fe8325b12db27faa55955a5aaa0b', class: "duet-slideout-badge" }))), h("span", { key: '9f266762f46f74d6c627098e57315df106bf9dfe', class: "label" }, h("span", { key: '60a41c1094f9ba9b51cd6e29666af8f601b8a8d2', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '4160b184173ed8e9e3e93cee11cb8b797911c350', name: "label" })), h("duet-icon", { key: '1572389c79f37ff516d2462ec7dfc9e6e740c6c8', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: 'fc738196e7f3d69ca2cc01db8fcbf5a7be3c39f1', ref: element => (this.dialog = element), class: {
+            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: '5a365effdcebd66bbc8d75eeb39e1ee0191beeb4', class: "duet-slideout-icon" }, h("duet-icon", { key: '29aba3ddbefd3d672a5363f7aab60c3991774dba', name: this.icon, size: "medium", margin: "none", color: "secondary" }), this.badge && h("div", { key: '077cac4c7174dc6447fc47119aa490452761c496', class: "duet-slideout-badge" }))), h("span", { key: '0e93520908b67a9e847ca2ab7423981677333d2c', class: "label" }, h("span", { key: '39442d5e839c85757a0432fe11f969e578071a63', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '8d98e276788faa2763ba3fc54465330ee20b8ef7', name: "label" })), h("duet-icon", { key: 'af4c4882cb21ce8308f00cb0092eabb3c5504ca9', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: '71e6a873aebc6b069ed3b662f60e2836e88c0768', ref: element => (this.dialog = element), class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, h(FocusGuard, { key: '00a3795728a3374280aaa5f2b6b97f67bac388c6', moveFocusTo: this.closeButton }), h("div", { key: '84e8cf7f05aedd1fd6df3f08cd06b66abbd1ef17', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'a462d45d835fe35e6ce1e64e9527aeae033c192f', class: "top" }, h("button", { key: '5b4eb5d8985437d6701987273dbe10d55185c0cf', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
+            }, style: styles }, h(FocusGuard, { key: 'e569bb2925b05d5efb54f7b989866db66e7ffb18', moveFocusTo: this.closeButton }), h("div", { key: 'aa65fd87af6069abde6bc75704d81908bd029711', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '575ac5a4587e6da02b5e2e25b0e20bb33682b146', class: "top" }, h("button", { key: '4295a54970f66eafff8c3e4387601de695f42be4', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
                 back: true,
-            }, onClick: this.onClick }, h("duet-icon", { key: 'b17a49853ca91e459db693d0c1dcbe861f9ee663', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '033f64eb9236b0a1cc28214b0393f3c7e62d62f2' }, this.label.innerHTML), h("button", { key: '005c6e62887ae4effd15bc19266a4b72d45f11bc', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '0934dfbccb73be3827e684b1414f2a76c080b0fb', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '984c15369f3cd4a09dfd02efe5aa65effb2f453c', class: "sticky-header" }, h("slot", { key: '28aea810fee655e0039f9412a5a0e979d4e0991e', name: "sticky-header" }))), h("div", { key: 'd0fed891a8cd1320d5edd35d4461d1df9f1bec7d', tabindex: "-1", role: "menu",
+            }, onClick: this.onClick }, h("duet-icon", { key: 'c3f91ef9423ba10b7ac4d2629c5fb64cd5e08bd2', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '52032aa97cc19a95f91552a930cd889fe1b62b4d' }, this.label.innerHTML), h("button", { key: 'b379d71da45ca0bd9fb9a314e3b9840309aec919', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: 'ffc2b05a5a751e180b6d8a214cfb1f35fc5a5870', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'f92511246cc63b6e8a66d5c3ea0ad967666a340c', class: "sticky-header" }, h("slot", { key: 'bf6a0326ae3c93476614fe52837cfac964e4d46e', name: "sticky-header" }))), h("div", { key: 'e95ca842f9bd2a732f74659b40f17c6afda7929f', tabindex: "-1", role: "menu",
             //TODO: slideout menu fades out, needs to be instant
             id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, h("slot", { key: '859c0b8b029620561483192901482f2d7ac69fd8' })), h(FocusGuard, { key: '5676e24c74f3223c83eaa6cf67d05cc93c8ea339', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: 'b37c65c7a43d6bcac92a2a183f4edf85883cbecf' })), h(FocusGuard, { key: '1e6c58673a5953e5a75571909130bdebdc5a6de2', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout-panel"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout-panel-dropdown/duet-slideout-panel-dropdown.js

@@ -40,16 +40,16 @@ export class DuetSlideoutPanelDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '79b5b5d923940bc3b0ab0515ccab7d498b327d5e' }, h("div", { key: 'b66ac749e1950d6c70c1c465479604cd91c03cfd', class: {
+        return (h(Host, { key: '15a51ee1392b5cfaf0faf892381a354e9c2ad7a8' }, h("div", { key: '7a65752a7969698e0a6b9994dcc4c0d3eea60ede', class: {
                 "duet-slideout-panel-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: '7155b74267a0786267237b0170e30a4c20d8d180', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: '35ce652834bb7c5dfbf2b6211cfbfd2130c2e588', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 active: this.active,
-            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: '014c5790e8eb52f02d10ecf398271b233b88f7b0', name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { key: 'be3875ea25d4f094220b3599aa15bf7e014e81bd', class: "label" }, h("slot", { key: '36b0112f4b2aa6ed192c19da3397beca24b8b29c', name: "label" }), h("duet-icon", { key: '2d4c1df9d41e97d1c7bb031252d31baa865a587c', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: 'a9729a27afa76ccee3c7d3b14e7d48dab1dcb7a3', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: '963ee3c6c6d7ecc6c94a08afe16d3f5f9dafaa66', name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { key: 'd4e56a5ba15d2d6cbe9dc2cd005b09d538fff5a1', class: "label" }, h("slot", { key: '0264c8d9575e402e1bb0042a5d4603d7da816156', name: "label" }), h("duet-icon", { key: 'd406ceffdb866733a623fd3000f88eed53984cef', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: '28cf7810dd58248178981e491e918138cf3d2d58', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '63761e3a8bbea310fbc531dd63eae808be5cf3e4' })))));
+            } }, h("slot", { key: '9c02645c7b1732774cfe05087e819acf382733e0' })))));
     }
     static get is() { return "duet-slideout-panel-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-submenu-bar/duet-submenu-bar.js

@@ -122,19 +122,19 @@ export class DuetSubmenuBar {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'e1887ce1a641c6c58a54f0cc22d6548b71274312' }, h("nav", { key: '324f9788c4c5f0f07b6a6462e6333b9021c24b8d', class: {
+        return (h(Host, { key: '5a56d3033586978e79fc650f948ee3e654c74288' }, h("nav", { key: 'f95152df380577251c94868a2b1a03b493482a77', class: {
                 "duet-submenu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 hidden: this.hidden,
-            }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { key: '5f4aab6f8d310a840b9428d100990a279bd88344', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+            }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { key: '5cfc4bfc97b1c462e6a504735808925e66d42018', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
                 active: this.open,
-            }, onClick: this.onClick }, h("span", { key: '80740c4fe31825abf62d11762f8c11bcab49b3c1', class: "label" }, h("slot", { key: 'b59a92e6417e6c0da5dfce940b386cd026fa4f26', name: "label" }), h("duet-icon", { key: '370f031d4cd186535f3f62f5952461914364ca8a', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: 'a482eaf5d9705512b952c67ef7e038fcce800c5a', class: {
+            }, onClick: this.onClick }, h("span", { key: 'aaf7e9216f796c05bcd44131869c241ed6791dea', class: "label" }, h("slot", { key: 'd98b04e45e3be67aac0d0ffdceb13f214ad24052', name: "label" }), h("duet-icon", { key: 'd680597442edb82e4fbc8615a818684cbbc19488', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: '3caf8786684e484dff8b20fbb4c273f33bfc7cbf', class: {
                 "menu-container": true,
                 hidden: !this.open,
-            }, role: "presentation" }, h("div", { key: '8e71057de372c6ec2c2c9b00a754e9dddbe5ff14', role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
+            }, role: "presentation" }, h("div", { key: '8b582ed198b49ed593b8dce4ab7ca5f1c7824d29', role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
                 items: true,
                 hidden: !this.open,
-            }, ref: element => (this.itemsContainer = element) }, h("div", { key: '6b216f3309c1da5a171a3fa39b31fcad805d76f4', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: 'f4c31cc6c1c32d56d50a0d2e664ebf727255a025' }), h("div", { key: '0a170fb9952aefa7fa6150514497fdef9caf8cea', class: "list-padding" }))), h("duet-overlay", { key: 'd513c9c698863e334c70587b7d905023d48d2f46', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
+            }, ref: element => (this.itemsContainer = element) }, h("div", { key: 'e34b873658de23e4164810509a93ce533f6eb094', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: '8f46f67375fad075efc56a28794c4706d85da4e1' }), h("div", { key: 'af6a6337b995853fbc04e8f50d7248c1d0878e4e', class: "list-padding" }))), h("duet-overlay", { key: 'ec26b0420f1eb4a93fa019cc24d22d3f160e7788', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
     }
     static get is() { return "duet-submenu-bar"; }
     static get encapsulation() { return "shadow"; }