@duetds/components 9.15.0 → 9.16.1

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: '4808d1d1aa7e0920a21fea000c4eb5a97a965758', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: '1544c2c209e973585db6308d48eafe716e660d4b', class: {
+        return (h(Host, { key: '22fc022036e3c4dcabcda2dd05d2803c2661237a', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: '65e58f4f533ee30849ad65714dd9457851c84446', class: {
                 "shaped-image": true,
-            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: '3abd57a2b34ab25cb188520f11581c648e73552b', class: "shaped-image-mask", role: "presentation" }, h("span", { key: '7e3ae25ddc3f938a470e74b01256b6ad83c5152f', class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
+            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: 'eec616c0b8b9b83bffab93d1365fb567888f1982', class: "shaped-image-mask", role: "presentation" }, h("span", { key: '4b8a720f9cd2202408d923befb228ba6420ef375', 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-share-chart/duet-share-chart.js

@@ -58,12 +58,12 @@ export class DuetShareChart {
         this.itemsTotalValue = this.items.reduce((total, { value }) => total + value, 0);
     }
     render() {
-        return (h(Host, { key: '6a305e0aa4dab7e686adc04f6604d95017ca6733' }, h("div", { key: '1a1b450a9e914db856c093a04ad40babc35834fd', class: "duet-share-chart-horizontal-bar", role: "presentation" }, this.items
+        return (h(Host, { key: '70e0558ae1aa0042d3488c4610edf2ae7f0ce700' }, h("div", { key: '5bd7c4afeb50bc140af45a753caab394d6e0e296', class: "duet-share-chart-horizontal-bar", role: "presentation" }, this.items
             .filter(i => !!i.value)
             .map(item => (h("span", { class: "duet-share-chart-share", style: {
                 width: `${(item.value / this.itemsTotalValue) * 100}%`,
                 backgroundColor: getColorByName(item.color, this.theme),
-            } })))), h("ul", { key: '749865dbd69fd61094948fc31a5b9dcbd3e9c5ce', class: "duet-share-chart-item-list" }, this.items.map(item => (h("li", { class: { "duet-theme-turva": this.theme === "turva" } }, h("span", { class: "duet-share-chart-item-color", style: { background: getColorByName(item.color, this.theme) } }), h("span", { class: "duet-share-chart-item-text" }, item.text, ":"), h("span", { class: "duet-share-chart-item-value" }, "\u00A0", formatNumber(item.value), "\u00A0", this.unit), this.unit !== "%" && (h("duet-visually-hidden", null, `${formatNumber((item.value / this.itemsTotalValue) * 100, 0)} %`)))))), h("slot", { key: '463680d23036b1221179737e2ee3fd77da2bf872' })));
+            } })))), h("ul", { key: 'c5aa993b912a4ed0d6ab461c9c7cc9759ed4e61c', class: "duet-share-chart-item-list" }, this.items.map(item => (h("li", { class: { "duet-theme-turva": this.theme === "turva" } }, h("span", { class: "duet-share-chart-item-color", style: { background: getColorByName(item.color, this.theme) } }), h("span", { class: "duet-share-chart-item-text" }, item.text, ":"), h("span", { class: "duet-share-chart-item-value" }, "\u00A0", formatNumber(item.value), "\u00A0", this.unit), this.unit !== "%" && (h("duet-visually-hidden", null, `${formatNumber((item.value / this.itemsTotalValue) * 100, 0)} %`)))))), h("slot", { key: '61ede20c0cd58db96135ac036084888a09e2d4ad' })));
     }
     static get is() { return "duet-share-chart"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-share-chart-item/duet-share-chart-item.js

@@ -8,7 +8,7 @@ export class DuetShareChartItem {
         this.color = undefined;
     }
     render() {
-        return (h(Host, { key: '0c4c98d037bb5aad9a7b64df632b99b6a5e7f240' }, h("div", { key: 'ac6aeb9e9cdefb3f9081b7b81274e5c7af006eaf', hidden: true }, h("slot", { key: '536ec08e46d4e9279ff276f4ef3a542392beb5fe' }))));
+        return (h(Host, { key: 'a534a2301783cbc13c21ddb49139b2d3a8e11624' }, h("div", { key: '0ebe764e832f7c717d589971936e666873f49651', hidden: true }, h("slot", { key: '8ac2ae8ae9da5d60cb860192e34906cbec2185ff' }))));
     }
     static get is() { return "duet-share-chart-item"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-show-more/duet-show-more.js

@@ -91,12 +91,12 @@ export class DuetShowMore {
      * Always the last one of the class.
      */
     render() {
-        return (h(Host, { key: '5e26089215401ad079494ecfc48a5463ecd0be23' }, h("div", { key: 'ccc9db6a4f25f032076816c455c478bdd9a9689b', class: {
+        return (h(Host, { key: '56ef8d68e3957481eb3c0fd77169a3830a6c0ec3' }, h("div", { key: 'd73ea6ea5f16f353ca41d0600aecf3eb91734338', class: {
                 "duet-show-more": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
                 open: this.open,
-            } }, h("div", { key: '9548a87e1fe2469470e5bc736e9be84ff49f1b29', ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "-1" : "" }, h("div", { key: '89ad3dcc67ee7b8025483cbdb94e77380249869a', class: { "slotted-content": true } }, h("slot", { key: '3d8d799bfeceaa39c118f8b77ff1854e92111bf5' }))), h("duet-button", { key: 'e7215cf992e31e23150c57d3d5677584a38bd45e', id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, accessiblePressed: this.isSafariBrowser ? this.open : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "icon-right": true, icon: this.open ? "action-arrow-up-small" : "action-arrow-down-small", "icon-size": "medium-small", size: "small", margin: this.buttonMargin, padding: this.buttonPadding, theme: this.theme === "turva" ? "turva" : "default" }, h("span", { key: 'dcf013a42f3580bae6247f0fc11925ca63967425' }, this.open ? this.showLessLabel : this.showMoreLabel)))));
+            } }, h("div", { key: 'aa3781bcb009ab2f72dce109180c32c29e5a86d5', ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "-1" : "" }, h("div", { key: '79305d6a5745287d4baeda24e227cd0ee2e6cd28', class: { "slotted-content": true } }, h("slot", { key: 'b75e7fbce1ab1e8e1680bc88cca241d0a8503375' }))), h("duet-button", { key: '103cd44aef5b443ed759a845f684db2e9881b67c', id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, accessiblePressed: this.isSafariBrowser ? this.open : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "icon-right": true, icon: this.open ? "action-arrow-up-small" : "action-arrow-down-small", "icon-size": "medium-small", size: "small", margin: this.buttonMargin, padding: this.buttonPadding, theme: this.theme === "turva" ? "turva" : "default" }, h("span", { key: 'c185219d1cbab88f4efb3e254dc3130c432f83f6' }, this.open ? this.showLessLabel : this.showMoreLabel)))));
     }
     static get is() { return "duet-show-more"; }
     static get encapsulation() { return "shadow"; }

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

@@ -29,6 +29,8 @@
   width: 100%;
   visibility: hidden;
   opacity: 0;
+  transition: opacity 300ms ease;
+  transition-delay: 300ms;
 }
 
 :host([open]:not([open=false])) ::slotted(*) {
@@ -62,28 +64,20 @@
 .duet-slideout .dialog {
   position: fixed;
   top: 0;
+  right: 0;
   bottom: 0;
-  left: 0;
+  left: auto;
   z-index: 600;
-  width: 100%;
-  height: 100%;
+  width: min(450px, 100%);
   padding-bottom: 75px;
   overflow-y: auto;
   box-shadow: 0 3px 6px 0 rgba(0, 41, 77, 0.1) inset;
+  transition: bottom 300ms ease;
+  transition-delay: 0s;
 }
 .duet-slideout .dialog:not(.modal) {
   box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.2);
 }
-@media (min-width: 62em) {
-  .duet-slideout .dialog {
-    right: 0;
-    left: auto;
-    width: 500px;
-    padding-bottom: 0;
-    transition: right 300ms ease;
-    transition-delay: 0s;
-  }
-}
 .duet-slideout .dialog .top-container.has-sticky-header-slot {
   position: sticky;
   top: 0;
@@ -102,6 +96,8 @@
   align-items: center;
   justify-content: flex-end;
   padding: 4px;
+  opacity: 1;
+  transition: opacity 300ms ease;
 }
 .duet-slideout .dialog .top button {
   cursor: pointer;
@@ -127,17 +123,28 @@
   align-items: flex-start;
   justify-content: center;
   width: 100%;
-  padding: 0 1.5rem;
+  padding: 12px 20px;
+  opacity: 1;
+  transition: padding 600ms ease, opacity 300ms ease;
+  transition-delay: 300ms;
+}
+@media (min-width: 36em) {
+  .duet-slideout .dialog .items {
+    padding: 16px 28px;
+  }
 }
 .duet-slideout .dialog.hidden {
+  bottom: 100vh;
   pointer-events: none;
   visibility: hidden;
+  transition: 300ms ease;
 }
-@media (min-width: 62em) {
-  .duet-slideout .dialog.hidden {
-    right: -500px;
-    transition: 300ms ease;
-  }
+.duet-slideout .dialog.hidden .items {
+  padding-top: 28px;
+  opacity: 0;
+}
+.duet-slideout .dialog.hidden .top {
+  opacity: 0;
 }
 .duet-slideout.duet-theme-turva .dialog {
   box-shadow: 0 3px 6px 0 rgba(23, 28, 58, 0.1) inset;

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

@@ -260,16 +260,16 @@ export class DuetSlideout {
         };
         const topLevelOpenMenuBarTranslation = getLocaleString(this.topLevelOpenMenuBarLangObject);
         const exitTranslation = getLocaleString(this.exitLangObject);
-        return (h(Host, { key: '9333789c721a340099e10ded0a75fd40e9a11351' }, h("div", { key: '401f5878c00c8844606f58cf65bd970fefc9aab7', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: 'ee8e733825dc3a76a590f10c5575b9b696c5c920', visible: this.open, "display-device": "large", zIndex: "600" }), h("div", { key: 'ceed0da1890638fbacd6ff8c98e1444545c4ce9f', 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: '092ff7252a26d276ee0925def1cb985c4963f9f9' }, h("div", { key: '4798e60685324dc1d96b79ed05d847531821734e', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: '6af2c640de7f635373f2f795e4adeebc4432fc87', visible: this.open, zIndex: "600" }), h("div", { key: '6613f55b6e61baa05833e225741427abc9c810bb', 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: '5ba5f11f9e65dd3b4e7f41dc425cb504fdf41227', moveFocusTo: this.closeButton }), h("div", { key: '644cb47533203d7a1a0411ad3d685f772f1727af', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '27811bda6d392533473673dd1f9e3384fc010c9a', class: "top" }, h("button", { key: 'afcf0a441eb2100eece645b01229005076a98b0b', 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: '2bcc71858b33eb7031d874753e5b56ae08d27232', moveFocusTo: this.closeButton }), h("div", { key: 'e93b3e3e696fed7a15af0b629cdc75d4e6c6a42e', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '3264075d1c8a40dd86f3fd0e54f6c0c3fd14042a', class: "top" }, h("button", { key: '65e408749cc6f7ee8c01d1d261cc610df794f3fc', 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: 'a1f41fbc6db6c3e139c86c5243947230e6d3f3c0', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '6333fb0cb464bd1bae7295a7ed3dba2f82aa4afe', class: "sticky-header" }, h("slot", { key: '9295f086423cb44b73d2df211b7095facfa77c79', name: "sticky-header" }))), h("div", { key: '1535ab887ae6f901cc97f3b7a7cd541d423e174c', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
+            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: '0e81890e31a7c1935f81687260391f8a4efee1dc', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'a337d39c4c83b1f55addb400087a26a359f46167', class: "sticky-header" }, h("slot", { key: '4a06486e639fac6b9fa5844e8b4bb0ad30ebe50a', name: "sticky-header" }))), h("div", { key: '3f809bf568d2364e7aaf4ffe4974a7a221b8fbb5', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
                 items: true,
-            } }, h("slot", { key: '5dff867d2868e62737eb06a1618c269187db5468' })), h(FocusGuard, { key: 'fcfc5f9ea11a7edac6b76a1479dfb0374b8f16eb', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: '61358e482b8f13d7facf58c55618bd6c45e044f9' })), h(FocusGuard, { key: 'bb6241de5b1dd23f17300cb51361bb10b4e6bfc6', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -24,7 +24,7 @@
 
 .duet-slideout-lang {
   display: flex;
-  gap: 20px;
+  gap: 16px;
   align-items: center;
   justify-content: flex-start;
   width: min-content;
@@ -43,7 +43,7 @@
 ::slotted(:not(:last-child))::after {
   position: absolute;
   top: 25%;
-  right: -16px;
+  right: -14px;
   width: 2px;
   height: 50%;
   content: "";

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: '9b9ad45986a3dcfdb55b5f0ba70688ca195db838' }, h("div", { key: '6094526122040f9602eaff0be103623ba489617f', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '1b0eef8fe172f80c3a955e6104a7728b903830f1', name: "navigation-language", margin: "none", color: "secondary" }), h("slot", { key: '0793321a6531c610413d42a8700b87e92ce922b7' }))));
+        return (h(Host, { key: '2d8d0ea8ccd8932027c97026ab0fd8ff94b13f5d' }, h("div", { key: '8ecd4a30d2535356b74019ea8a6e6243bb05b88c', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '825bf7a329128b49e03969c52b7abb3c76922fef', name: "navigation-language", margin: "none", color: "secondary", size: "small" }), h("slot", { key: 'a43360f381937d2d74610b34de107c10e384a880' }))));
     }
     static get is() { return "duet-slideout-lang"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,7 +27,7 @@
 .duet-slideout-link {
   position: relative;
   display: flex;
-  gap: 20px;
+  gap: 16px;
   align-items: center;
   justify-content: flex-start;
   width: 100%;
@@ -78,11 +78,11 @@
   --active-translate-y: 1px;
 }
 .duet-slideout-link.medium {
-  font-size: 1.25rem;
+  font-size: 1rem;
   font-weight: 600;
 }
 .duet-slideout-link.large {
-  font-size: 1.5rem;
+  font-size: 1.25rem;
   font-weight: 800;
 }
 .duet-slideout-link .label {

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

@@ -42,12 +42,12 @@ export class DuetSlideoutLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '85b04b902faeb2e3444ff20971a517cdb5abdd02' }, h("a", { key: 'b249137ea0b61d56f0a2699341334febeccb6b0e', target: !this.href ? null : this.external ? "_blank" : "_self", class: {
+        return (h(Host, { key: '8f75d1b8cc2f5509ee8c41c0f09a1e0b7c325e2b' }, h("a", { key: '470e7d3de6ae4220816ce83100eab2798017637c', target: !this.href ? null : this.external ? "_blank" : "_self", 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.href && getAccessibleLinkLabel(this)) || this.accessibleLabel, rel: this.external ? "noopener" : undefined }, this.icon && (h("duet-icon", { key: 'b14c636765c3b990b3c6c6f6c57b0641bbdfe006', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { key: '63ff80e401e011a6792a623ef4be0da0f3f40634', class: "label" }, h("span", { key: 'b9d5c8b4ed62ef045da9f02e6a7ab00084c4dfbf' }, h("span", { key: '5499b4548d27509b4e6294e3b335c56a264160b6', class: "label-container" }, h("span", { key: '495a1abd5fdb4a18af251d7c15c449968e700725', class: "label-content" }, h("slot", { key: '2cb954b89c28550f7f00008da0a87805062c8f38' })), this.external && (h("duet-icon", { key: '16ad7d515886268c1f1a2db9dd19a38549df15de', class: "external-icon", theme: this.theme, name: newWindowIcon.title, margin: "none", size: "auto", color: "currentColor" }))), h("slot", { key: 'ede009435b1cae9498c0f94a50040c322b494757', name: "description" })), this.caret && (h("duet-icon", { key: 'd3398cd49789c167b1f084856b49ba1a483ca263', 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.href && getAccessibleLinkLabel(this)) || this.accessibleLabel, rel: this.external ? "noopener" : undefined }, this.icon && (h("duet-icon", { key: '280f1b56285002d77cdae1dd796ccc4cead40484', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "small", margin: "none" })), h("div", { key: 'c20e8bd370c0c9419dac439bc9be417f532caa80', class: "label" }, h("span", { key: 'c9e43ff4e0f400bb100908512d4832941833413e' }, h("span", { key: '362461c72afbd9a669ca2be4bb63b0e0a0816ae8', class: "label-container" }, h("span", { key: 'a5cd71224f0299bc2f8c63c65e28c8f535da4b59', class: "label-content" }, h("slot", { key: '59eb785f2e0fe626375adca66fa6c0c1dc63f6d0' })), this.external && (h("duet-icon", { key: '55f8b1ed150acb31ad46d9f8ba2f7d47ada4f3ca', class: "external-icon", theme: this.theme, name: newWindowIcon.title, margin: "none", size: "auto", color: "currentColor" }))), h("slot", { key: 'ddba75f06da785a06950ed38f726c1ac3cfea012', name: "description" })), this.caret && (h("duet-icon", { key: 'f9091c7a26c7db26a48b8b96bd3b4502cb79bc10', 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.css

@@ -42,7 +42,7 @@
 .duet-slideout-panel .link {
   position: relative;
   display: flex;
-  gap: 20px;
+  gap: 16px;
   align-items: center;
   justify-content: flex-start;
   width: 100%;
@@ -64,20 +64,6 @@
   line-height: normal;
   vertical-align: baseline;
 }
-.duet-slideout-panel .link .duet-slideout-icon .duet-slideout-badge {
-  position: absolute;
-  top: 0;
-  left: 16px;
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  background: rgb(247, 178, 40);
-  border-radius: 50%;
-  box-shadow: 0 0 0 1px #c18b1f;
-}
-.duet-theme-turva .duet-slideout-panel .link .duet-slideout-icon .duet-slideout-badge {
-  background: rgb(247, 178, 40);
-}
 @media (min-width: 62em) {
   .duet-slideout-panel .link .duet-slideout-icon {
     margin-right: 8px;
@@ -95,11 +81,11 @@
   font-weight: 600;
 }
 .duet-slideout-panel .link .label-text.medium {
-  font-size: 1.25rem;
+  font-size: 1rem;
   font-weight: 600;
 }
 .duet-slideout-panel .link .label-text.large {
-  font-size: 1.5rem;
+  font-size: 1.25rem;
   font-weight: 800;
 }
 .duet-slideout-panel .link:focus {
@@ -128,9 +114,9 @@
 .duet-slideout-panel .dialog {
   position: fixed;
   top: 0;
-  left: 0;
+  right: 0;
   z-index: 600;
-  width: 100%;
+  width: min(450px, 100%);
   height: 100%;
   overflow-y: auto;
   visibility: visible;
@@ -174,8 +160,8 @@
 }
 .duet-slideout-panel .top span {
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-size: 1rem;
-  font-weight: 600;
+  font-size: 1.1rem;
+  font-weight: 700;
   line-height: 1.5;
   color: rgb(8, 42, 77);
   opacity: 1;
@@ -194,10 +180,18 @@
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
-  padding: 1rem 16px;
+  padding: 12px 20px;
   overflow-y: auto;
   color: rgb(8, 42, 77);
 }
+@media (min-width: 36em) {
+  .duet-slideout-panel .items {
+    padding: 16px 28px;
+  }
+}
+.duet-slideout-panel duet-indicator {
+  top: 4px;
+}
 .duet-slideout-panel.duet-theme-turva .link {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: rgb(23, 28, 58);

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

@@ -52,7 +52,7 @@ export class DuetSlideoutPanel {
         this.open = false;
         this.icon = undefined;
         this.labelSize = "medium";
-        this.backgroundColor = "primary-lightest";
+        this.backgroundColor = "gray-lightest";
         this.badge = false;
     }
     /**
@@ -149,33 +149,28 @@ export class DuetSlideoutPanel {
      * Always the last one in the class.
      */
     render() {
-        const defaultBackgroundColor = this.backgroundColor === "primary-lightest"
-            ? this.theme === "turva"
-                ? "gray-lighter"
-                : this.backgroundColor
-            : this.backgroundColor;
         const styles = {
-            background: getColorByName(defaultBackgroundColor, this.theme),
+            background: getColorByName(this.backgroundColor, this.theme),
         };
         const exitTranslation = getLocaleString(this.exitLangObject);
         const backTranslation = getLocaleString(this.backLangObject);
-        return (h(Host, { key: 'e99b424542a7b552d8fd4a26cbfb97bf6f62802e' }, h("div", { key: 'f4eb81ccf905117701734ce4ef2421cb9cb07a57', class: {
+        return (h(Host, { key: '35f2c88d333a9f340fe932b7b4d1a7b0e161121c' }, h("div", { key: '4c41b297d480b756e8f8a6534bd8a9bfe11752f6', class: {
                 "duet-slideout-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: 'a425e254942d90ddbdd9f3cd2009c993d3da65ca', 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: {
+            } }, this.badge && h("duet-indicator", { key: 'ab7fdbdf53e7a00de6d029caf32059da791cd8c6', variation: "change" }), h("button", { key: 'b82bc5cb3f6c0cab2c75d1221b89b197af62fccb', 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: 'e14a24be1ee1a5efad686c4234b85166eb617a0c', class: "duet-slideout-icon" }, h("duet-icon", { key: '0da267b47534ce1b11aae1f0931839d96cbb6e2d', name: this.icon, size: "medium", margin: "none", color: "secondary" }), this.badge && h("div", { key: '6b2579d84b69f8b110b0112f855041a3f9007c87', class: "duet-slideout-badge" }))), h("span", { key: '7b3e4a85c66e7a20016f39c18a41b00851331966', class: "label" }, h("span", { key: '123fd11e48b7ec88e0b003ba9c9d68fb40c53dd2', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: 'ad8e630553aade4ba6fbdefc3a9c978f0e28a149', name: "label" })), h("duet-icon", { key: '2b767d5777edef7f9d7497d6b728c6535f1bb48d', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: '7920d9f9c941634ba3534b8446692a72b252da52', ref: element => (this.dialog = element), class: {
+            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: '36db3f1d56f979de83a419d9b146b10517766578', class: "duet-slideout-icon" }, h("duet-icon", { key: '40daa0bea7fa859523611fd4a321357f6417d29e', name: this.icon, size: "small", margin: "none", color: "secondary" }))), h("span", { key: 'dca0924732de13136afc665ea749dbc7326af42a', class: "label" }, h("span", { key: '2d2cb8664580036b92d38c443067abe5104bcdb2', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '3a27effb385bcb69a00b36880a27cc2365d85387', name: "label" })), h("duet-icon", { key: '0c8f43acde619695b5dfb4a340384c6ff6c72b96', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: 'dc04111a0ccaf306e9d1f090de3ece36deba1cb7', ref: element => (this.dialog = element), class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, h(FocusGuard, { key: '26b5c3dd970fb7882b7fdcf5c9efe5909ab1e953', moveFocusTo: this.closeButton }), h("div", { key: 'a45324a8bf4ec8c14aabeaf862fed11f69b3092a', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'a18b6840ae7dd6b6525c87c38728d76644399f25', class: "top" }, h("button", { key: '96c89b1489b381e885de6d02bbdc444bc3247885', 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: '21c80b489ad5b2d99c6527c598642f08a110f012', moveFocusTo: this.closeButton }), h("div", { key: '94ecda012acf4236fbf0c4e6bb2ddf00f0dc1d85', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'e971612fa04b42cae7278eea004030dd0196ff24', class: "top" }, h("button", { key: 'ebf4cd9537f5593d8531e3f8a4083619c37c3315', 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: '10a8a23416d004be7cc64d6544758809ccc44007', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '286a41f140716604ecf61deeb76cf304ebefbb58' }, this.label.innerHTML), h("button", { key: '4278c87e2bb7d82d70458b6814e8920f6a3e5ac5', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '26093ede70cc0968857d8e02edcaa345603e9b56', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '8498e84fed4ec4ea35893cf10a4942f80e01dce1', class: "sticky-header" }, h("slot", { key: 'dae14d8c70e8b8af5c19952e42c6120ac199334d', name: "sticky-header" }))), h("div", { key: 'b7a35e2345a7c47e5e7d118e494e94160f4b3530', tabindex: "-1", role: "menu",
+            }, onClick: this.onClick }, h("duet-icon", { key: '203def1ac6d4a5f12739e1d65e408de037017af3', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: 'eb1ef1869555fed504b3379aa1dd0d0d1d8757a4' }, this.label.innerHTML), h("button", { key: '5f427bf5cb3ef229ff24623da9b7ad9ba0ffe90c', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '7231ebeb54f08c90e946c8c2bdd9f7e5072ef8a8', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '697a04a9c44a76c1c523acc00299f1876694b580', class: "sticky-header" }, h("slot", { key: '474ad484641ecb1f1f4d85a8feaa2344693502f6', name: "sticky-header" }))), h("div", { key: '718778b6897b09783c1cb28c4d05a29c60a969e7', tabindex: "-1", role: "menu",
             //TODO: slideout menu fades out, needs to be instant
             id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, h("slot", { key: '88c632c16c465457b45b27c500157b481afd6f0c' })), h(FocusGuard, { key: '977a6164b9286feeabf4b69c0cc25b0e6ade5f65', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: 'c0ab6f7bea6779ea11e6f6d3fb9758c7ae96ff66' })), h(FocusGuard, { key: '1a537464c41b73e910b26f02eb6249451749a503', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -321,7 +316,7 @@ export class DuetSlideoutPanel {
                 "setter": false,
                 "attribute": "background-color",
                 "reflect": true,
-                "defaultValue": "\"primary-lightest\""
+                "defaultValue": "\"gray-lightest\""
             },
             "badge": {
                 "type": "boolean",

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

@@ -44,7 +44,7 @@
 .duet-slideout-panel-dropdown button {
   position: relative;
   display: flex;
-  gap: 20px;
+  gap: 16px;
   align-items: center;
   justify-content: flex-start;
   width: 100%;
@@ -89,7 +89,7 @@
   justify-content: center;
   width: 100%;
   max-height: 1000px;
-  padding: 4px 20px 8px 44px;
+  padding: 4px 20px 8px 36px;
   overflow-y: auto;
   visibility: visible;
   transition: max-height 0.3s ease-in, padding-bottom 0.3s ease-in;

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: '1f5aa3dbb15a1f0574017fbafb96824835755621' }, h("div", { key: 'ab819e8ad1d425edb066aab772c12f45d5280698', class: {
+        return (h(Host, { key: 'd258b7901f9bc6e8c6d5be72c705441178343174' }, h("div", { key: '8d089ee36780b154b591c28104fe576d16d44103', class: {
                 "duet-slideout-panel-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: '05a7c48469c5f6f2006729f4c45f4c06f15cc790', 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: 'b6d9cfa6742285816254d8f800d0134cbab60392', 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: '0bcf45e8eaa06d919711c8553ecbeef1ab8a5f46', name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { key: '71551eee691587f8ff8cb1940883379acdc97a26', class: "label" }, h("slot", { key: '60e3c7766930b9d1c56e42f4cff5ee9adf53a321', name: "label" }), h("duet-icon", { key: '0cb2cf2ad67cb8e174d043637925d6240ef86454', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: 'e857d0acd5cea8f814a13137ee174f8e5f284291', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: 'd47c45eda3b4efd847b762bf480f12529a017490', name: this.icon, size: "small", margin: "none", color: "secondary" }), h("span", { key: '6e7ca63c7898c2b71207f7a0d4c4ae5fd1e57383', class: "label" }, h("slot", { key: '3c9920b20aee4d50cde6494dcb1789c74bd785f1', name: "label" }), h("duet-icon", { key: 'b45531eb083d9819f941c20b70712e94cea1628b', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: '1d6fc52322fe24684457bb1e03ba908a5496e200', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '59bf7f6d9b1e0eca43a45545914c01a1357cf935' })))));
+            } }, h("slot", { key: 'a74310df86c00bf3c2b547b16eb256adcb5681f3' })))));
     }
     static get is() { return "duet-slideout-panel-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class DuetSpacer {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'cf4bc55628a80600bcc541119e56966f2a6b4a75', class: {
+        return (h(Host, { key: '6538750ce10fceade9822375b75a8bbbe20cd76f', class: {
                 "duet-spacer": true,
                 "duet-spacer-xx-small": this.breakpoint === "xx-small",
                 "duet-spacer-x-small": this.breakpoint === "x-small",

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

@@ -20,11 +20,11 @@ export class DuetSpinner {
      */
     render() {
         const color = this.color === "currentColor" ? "currentColor" : getColorByName(this.color);
-        return (h(Host, { key: '6d75d470c4189563cb0fc773734d02acac58c0ab', class: {
+        return (h(Host, { key: 'feb500dd4e62ad66f8d1caed2c882a89acddc938', class: {
                 "duet-custom-color": this.color !== "currentColor" && this.theme !== "turva" && this.theme !== "default",
                 "duet-theme-turva": this.theme === "turva" && this.color !== "currentColor",
                 "duet-theme-default": this.theme === "default" && this.color !== "currentColor",
-            } }, h("div", { key: '5314f7a471cde9aa11d4d8794058612683f41be8', class: {
+            } }, h("div", { key: '9483e2ed54fc623f7ae129808bbd88607c0de1e2', class: {
                 "duet-spinner": true,
                 [this.size]: true,
             }, style: { color }, "aria-label": this.accessibleLabel })));

package/lib/collection/components/duet-status-icon/duet-status-icon.js

@@ -73,10 +73,10 @@ export class DuetStatusIcon {
         }
     }
     render() {
-        return (h(Host, { key: '7d88f7af91fb4156f7b2cc160b04f43d0e6de8e9', class: {
+        return (h(Host, { key: '284be2e2073b0593a3f301e93f02524ed9473460', class: {
                 [`duet-status-icon-${this.getVariation()}`]: true,
                 "duet-strong-bg": this.strong,
-            } }, h("duet-icon", { key: 'cb38dcde52f12494ae3179037c7f0d21ae096d7f', icon: this.getIcon(), size: this.size, margin: this.margin })));
+            } }, h("duet-icon", { key: 'fbffdc5785eec0a97fc236b056f01c1cde0140b8', icon: this.getIcon(), size: this.size, margin: this.margin })));
     }
     static get is() { return "duet-status-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -101,7 +101,7 @@ export class DuetStepper {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '09155a7a3327ac4e49f56eb5632872285f5d5bab', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'a57d5104e84e041986ea155939c05d52a7ec8a0a', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-visually-hidden", { key: '7c6149035beb257691e8e6849a0608cd47ba18cb', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), h("slot", { key: 'edb325e8ac2f2b2f91848c5a4688ab4ff0f31c03' }))));
+        return (h(Host, { key: '8990256cd5a15e62e1e41d4d99ec61376c0fab88', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '6a9e41f275fa7183528d2ef71eaf9b0964883aa0', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-visually-hidden", { key: '0afabdd2da5214751347e4c8cd6b364012eeda47', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), h("slot", { key: 'e2f78e4998188083683ca19ea28cb04eba2b893c' }))));
     }
     static get is() { return "duet-stepper"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,6 +21,10 @@
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
+  pointer-events: none;
+}
+:host * {
+  pointer-events: auto;
 }
 
 :host(:not([open])) ::slotted(duet-submenu-bar-dropdown) {

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: 'f411620c40d8682a1c2e20ace85f2a4bff7f315d' }, h("nav", { key: '5f516ed76fdf869666b17310856a3cc0ce595c64', class: {
+        return (h(Host, { key: 'af1b15954a8651589b75a71211b2afc7d11b4728' }, h("nav", { key: '8060c7a7b7cc9b2b5b51f61927a291cc291191b9', class: {
                 "duet-submenu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 hidden: this.hidden,
-            }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { key: 'c44fe142ea11bc278765f8207ac98ea528dca5e9', 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: '38e52490582abe63054643cb4038196cea78f460', 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: 'db004781766d651ab9b6600c1029788967e5f79e', class: "label" }, h("slot", { key: '6d7cc9738a60951cd404eeb54743fe138fe44acf', name: "label" }), h("duet-icon", { key: '145c3fa71f7e283fd371a22b487b733597981617', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: 'cc16d32fee92c127eea65381e6dc7139442307bd', class: {
+            }, onClick: this.onClick }, h("span", { key: '2409617cc4571c9bc502f163130eb90d858d1494', class: "label" }, h("slot", { key: '8dadc19b14475990fe4da9f60237678b9aed0298', name: "label" }), h("duet-icon", { key: 'b776299707367fee5fe0ee075f9090510341a387', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: 'd7bc94b646e87cc22c0e325340450ac0c4c746cb', class: {
                 "menu-container": true,
                 hidden: !this.open,
-            }, role: "presentation" }, h("div", { key: '627f404cd8ddcebde4c26ca8832a429a7b711bd8', 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: 'd56f9657beb5c1f3b964f4e552318e5f585db494', 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: 'ab3d08b79e77317998c90da04a96412b06bcdc6b', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: '1fcffb2b0f316d455d459878a254c22793c91250' }), h("div", { key: '7c29abf84be42edbb2ec5569b4e9827cebcb6cf6', class: "list-padding" }))), h("duet-overlay", { key: '69a89613725bc5cece31bf5faa01de681fb8a5a0', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
+            }, ref: element => (this.itemsContainer = element) }, h("div", { key: 'd9beafc8b99857bb0722fac9eca8a8f8f51d74ff', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: 'b0e11600b15b58c0f9a83d2344189bc2f18df7cd' }), h("div", { key: '3613887ba9a6b68ba1674b22ea20ffaa3eb00aa6', class: "list-padding" }))), h("duet-overlay", { key: 'b24bdad2ce787d341b7f04a31f24f0526950933a', "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"; }

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

@@ -96,18 +96,18 @@ export class DuetSubmenuBarDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '91282efb4475ef3e93beed30b442ecee116a5d7f', role: "listitem" }, h("div", { key: '50cebd82c75c8bae189224e8290e3b6d4e2b82e8', class: {
+        return (h(Host, { key: '9f33cd768a1ec69877aa0c76a0c77e1a100afae1', role: "listitem" }, h("div", { key: '4d52101b1614586ac501f4e7104da73bbc451f70', class: {
                 "duet-submenu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 open: this.open,
                 active: this.active,
-            } }, h("button", { key: '2bff2aab59814f2f2f51311d324e595601f65f35', 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: '9d4b01c987a80d3ecead8711cd042160ad11c493', 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: {
                 open: this.open,
                 active: this.active,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '9467c1e65cd3bbfb8d9554a7743d6ab38aa3e2f7', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'e78116b328684f01ebefe4de9090cc784cd912df', class: "label" }, h("span", { key: 'b59cc0a46cd37aa7a4babb44696b5f215624adfe', class: "label-text" }, h("slot", { key: '853981962bf806fc9c6211fa9de3cbb6e5f1bac5', name: "label" })), h("duet-icon", { key: '7b0768bcf7251bb5ceb638a9ca874dd5fac64531', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '7cba20c842efa0186d912ad37a5862f2bce6b79f', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'f854ac46417778ce5eda977417cac11d9c50312a', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '3db9012df5d99c1130d2fb288e0442d1ddec24ac', class: "label" }, h("span", { key: '389bad658d35704a5ab2bb38e41a6db3f11d73f7', class: "label-text" }, h("slot", { key: 'ad3d4061471320cd5c87002e3a218f2e02434a2f', name: "label" })), h("duet-icon", { key: 'f357faf4c4fa580b7cd66ce2d237ba4f18f0cb13', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '7f5d346ee0965ad2fb4ae90035c37da48f5986bc', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '8b09b28409e215489f5b20efc2226b075440def6' })))));
+            } }, h("slot", { key: '3290a7f8ab15948f69c18da3cd0311615484b5ad' })))));
     }
     static get is() { return "duet-submenu-bar-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,12 +31,12 @@ export class DuetSubmenuBarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '55335d28abcf8bb169e8efe0e8e38bc07d63985a' }, h("a", { key: '01423a356665cd9699b45165977de2142c06591f', class: {
+        return (h(Host, { key: '19d203a6a4985d18c2b7714a75fb763188d04e1d' }, h("a", { key: 'a8d6478b1b598715a43964d304e26fae436e9974', class: {
                 "duet-submenu-bar-dropdown-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 highlight: this.highlight,
                 active: this.active,
-            }, "aria-current": this.active ? "true" : "false", href: this.href, onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: 'fb31a9f09cf45c2dd1940d036381a16e19862ba5', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: '1875d33f394b1fe34a4b5da166c7bdc8b7aba3ec', class: "label-container" }, h("span", { key: '9cec76482313031304a7267301917a578386a431', class: "label" }, h("slot", { key: '09c5d5096026ec851933a89eb646ef75976cba1f' })), this.caret && h("duet-icon", { key: '4637a241c817e12e633978568d036a7044729b9d', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: 'f06ea7ef11f0b96fceeb288bfe4b7aca8509a113', class: "active-check", name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
+            }, "aria-current": this.active ? "true" : "false", href: this.href, onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: '97b08ff1b5c0f8ce1dff0165f48822ec17cbed8b', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: '28c79e781839ffd6bf371b22bebd8987ee542493', class: "label-container" }, h("span", { key: '9580582e487212cfdf8db2a873f28395f4354c33', class: "label" }, h("slot", { key: 'bf4e8914b9284c0096d90b032b81e93d3d93da1d' })), this.caret && h("duet-icon", { key: '6e5bc6f7b3bb53001e69c03c6b375aa1b448b4b1', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: 'fc32960d986c1dcc88e60944358dfa5320494c41', class: "active-check", name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     static get is() { return "duet-submenu-bar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }