@duetds/components 10.0.0-alpha.26 → 10.0.0-alpha.27

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

@@ -136,12 +136,12 @@ export class DuetShowMore {
      * Always the last one of the class.
      */
     render() {
-        return (h(Host, { key: 'a43de6a4bae0a8c38852a11a7b384b7f104ec024' }, h("div", { key: '74f8d429039d38ea1151aeab159f34cfed375df6', class: {
+        return (h(Host, { key: '5a2691671f8db729580e5e163f0a4172065b60a1' }, h("div", { key: 'd00e9ad7eec18c34b53f35be55000cc238e96d41', class: {
                 "duet-show-more": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
                 open: this.open,
-            } }, h("div", { key: '1e7b359e2ec056100a22d4fcdf12a9afd3432f36', ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "-1" : "" }, h("div", { key: 'd56eb046a4f700defffcefd1c279149ab85b68ae', class: { "slotted-content": true } }, h("slot", { key: '4978e6989abb32797fd956d5bb35d1e860b63f71' }))), h("duet-button", { key: 'ba557d00ed023a0b31efcf3480e1b30b326e6799', 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: '106762507a1b6c28e334d0c383ff481b9a4bf8aa' }, this.open ? this.showLessLabel : this.showMoreLabel)))));
+            } }, h("div", { key: '4db263318b4e7dd0a0b79d2ce7db9708194246c4', ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "-1" : "" }, h("div", { key: 'e3a7ffd7b7acf798ecbcbacd26e721471c48c447', class: { "slotted-content": true } }, h("slot", { key: 'db2dbe58ad4f75648f0e98c80dd00a1909f745f9' }))), h("duet-button", { key: '9ece7898fa0ad9effd08cc728b38d580aad8e906', 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: '4f697ac0915ece52e0edb022923f05e2c2812cb1' }, 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

@@ -294,16 +294,16 @@ export class DuetSlideout {
         };
         const topLevelOpenMenuBarTranslation = getLocaleString(this.topLevelOpenMenuBarLangObject);
         const exitTranslation = getLocaleString(this.exitLangObject);
-        return (h(Host, { key: '80fe71cba1f67117359472cbc3d59ec80910cca2' }, h("div", { key: 'b4611be3d11b74e906804f32fa54f09ef03c9319', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: '72729044a85b3915f914f9b37efc503601681aed', visible: this.open, "display-device": "large", zIndex: "600" }), h("div", { key: 'dd793703df1c6412ba02021f6ee26232180db120', 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: 'ad0060e5e7d7b09eda9fe1c00d917a24cd72425e' }, h("div", { key: 'ffe49d23661b5297b214ce27e88defba216f840e', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: 'ed8951a46a9e18802724ca812ad1c0248d7ba334', visible: this.open, zIndex: "600" }), h("div", { key: '1fdbc5b634dc380494c1b389514c4bb24c3867e5', 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: '7217cb29c43fcab1a4d7a0ab2bc25516d5a3db86', moveFocusTo: this.closeButton }), h("div", { key: 'f660e3d4126342062aeef72abb440bfd8c638b26', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '05ed9fae1dd41c76c8af9e31ec907cc58f83d3d5', class: "top" }, h("button", { key: '65d0a9c2feb22186f337961c6967021d9dbc97f4', 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: '0dc00c309bd543a23e1ea874cb6398c2c39e1411', moveFocusTo: this.closeButton }), h("div", { key: '8d2adfc16b01db12ca6f7c47810cdee6021e5460', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'e389d21af73e9d8163ca89a167f0bbd596ba3450', class: "top" }, h("button", { key: '2bd8df761d9064e5ef73c4ebc98485e1754afe2e', 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: 'db5c0e81b4fdb700e9cd790249abcc7be8ddb93d', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '3056bf2ec202421d6314e9bbec1176990dac8d7d', class: "sticky-header" }, h("slot", { key: 'c9c7e39ec4d453a110ad37ba6e273bcb50cfe8a8', name: "sticky-header" }))), h("div", { key: 'a051d32697cb79fdf3dddcc5c28c5f6e1e11afb3', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
+            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: 'cb4da32359194cfa8c1cea2d09f5ebdfae3d1537', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'ede6365d0ba52b6794916367a4e42535a3666b98', class: "sticky-header" }, h("slot", { key: '58a33822c3e852ebd1e69fdc6f4be40f76e3c8a8', name: "sticky-header" }))), h("div", { key: '216d18823ac4376220aa985f5043ff3aa293fd40', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
                 items: true,
-            } }, h("slot", { key: 'b552c7adcb64a48b13ae808a26037b0c6ba34021' })), h(FocusGuard, { key: 'eb6637a6a2c879f6bcab0f798f8f13639d2fdc68', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: '495d7d363e0b0697b0733bec84c57cd234cdfcc9' })), h(FocusGuard, { key: 'a74db283e802ea746bf2777ffb4bd36f35412886', 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

@@ -38,7 +38,7 @@ export class DuetSlideoutLang {
      */
     render() {
         const langTranslation = getLocaleString(this.chooseLangObject);
-        return (h(Host, { key: '9b4b8cd45c9f80726b2a8b30ee470c1c66a36844' }, h("div", { key: 'a2dd75af5a7f4bc86019e14c7981a33e605bda58', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: 'c2e848bda85007675b1c312d583d68cb12da8f29', name: "navigation-language", margin: "none", color: "secondary" }), h("slot", { key: 'cf120478d33ad1eb78a600abc241bcc79c7e5c36' }))));
+        return (h(Host, { key: '8847b4894f616c58b889e51d183c71ec672554fc' }, h("div", { key: '86a6652e67569a898f9aceea571fd656ae22bfa6', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '038bdf514daccd3f28a27ad0225f4a46ea84ecea', name: "navigation-language", margin: "none", color: "secondary", size: "small" }), h("slot", { key: '49e912e3e178c2d4c3042c4d9d1ae39991bbef52' }))));
     }
     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

@@ -77,12 +77,12 @@ export class DuetSlideoutLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '8e06b49cf6c749adf92ccc160d8ad3da287ed5b1' }, h("a", { key: 'b828c5cb14d1668459f533e7dd1455b96d749389', target: !this.href ? null : this.external ? "_blank" : "_self", class: {
+        return (h(Host, { key: 'eca2104ff848dfd3c52bab08c4377d19e374d13d' }, h("a", { key: '9915adbb807d80081d2d791f36926a5b8a6b2a3e', 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: '2b9425445f8002a2e4ba7e4e3505c8dd16f1037b', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { key: '299f3051479f68f1526bef4ac0b7829e6c1e599e', class: "label" }, h("span", { key: '58e45ed7ec8752c8d123a0de448ef6aae50fe928' }, h("span", { key: 'b7e99ab8c08332ee1fb816ca174333d45ddd856a', class: "label-container" }, h("span", { key: '52592842baf1612fd196be0e46b6dbee46e27422', class: "label-content" }, h("slot", { key: 'b0c2f5f85ddea248f188c1a33d6e4c50ec4232ba' })), this.external && (h("duet-icon", { key: '7c65cd396055e355fd604e9ad7eab4b6314be31c', class: "external-icon", theme: this.theme, name: newWindowIcon.title, margin: "none", size: "auto", color: "currentColor" }))), h("slot", { key: 'ca4a97fef08540a3ec086e27b4f952567e6c4428', name: "description" })), this.caret && (h("duet-icon", { key: 'ed73e7886cfcf256368e4daa5b272d127ed192a3', 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: 'eabe8fda17546094fafc6fa4a253e05c63fc1938', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "small", margin: "none" })), h("div", { key: '98d30980e7ac325c36be8bb86b788d60cd36831d', class: "label" }, h("span", { key: '7f96584e0ee24069a7cc9afc2649d3a0a7fe8758' }, h("span", { key: '2b844eb1ae6ff0f7215e7979776c673e6f1accfb', class: "label-container" }, h("span", { key: 'd6de09afc6dbb0cfd6855f98e34c6b7b0b2c6421', class: "label-content" }, h("slot", { key: 'ef0c11c80556e88596d115ef534f86cc044362f8' })), this.external && (h("duet-icon", { key: 'ffe4c9d8a90105199e4a79702847705f958adf00', class: "external-icon", theme: this.theme, name: newWindowIcon.title, margin: "none", size: "auto", color: "currentColor" }))), h("slot", { key: 'd329594665a0964175ea0872747342f4e070227d', name: "description" })), this.caret && (h("duet-icon", { key: 'aafabb173724e1a6b736f289a7d76582f03f78c4', 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

@@ -49,7 +49,7 @@ export class DuetSlideoutPanel {
         /**
          * Background color. Use one of the color tokens.
          */
-        this.backgroundColor = "primary-lightest";
+        this.backgroundColor = "gray-lightest";
         /**
          * Show a badge that indicates something has changed.
          */
@@ -169,33 +169,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: 'afd36490cf0c6d09eda7d8baff552e38dd096c4c' }, h("div", { key: '986b2a87ea1c43e8f86e4d01dfad235b52ace8cc', class: {
+        return (h(Host, { key: '91e1bfb50346e6f0b7d7b93f6d9cb16e84df9297' }, h("div", { key: '80891454e08a69f87d42ca5879c85a7e1eab6d5c', class: {
                 "duet-slideout-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: '3edf7d1d3e0366b5032fc132b01efa9daede6090', 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: '2dc9f2f3b5eebbc44158f9c7795ee2e9dadbfeef', variation: "change" }), h("button", { key: 'fe2d4c0f8dc01d791946a720592101e83dc016ea', 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: '5dd55d6242510d00b1eaeb6e77a92920a7681838', class: "duet-slideout-icon" }, h("duet-icon", { key: 'd57f4a660cd4ddc96298f249191917bc39b89944', name: this.icon, size: "medium", margin: "none", color: "secondary" }), this.badge && h("div", { key: '43df47250dfab5e896892e3e97ef14a43946c3fe', class: "duet-slideout-badge" }))), h("span", { key: '1369627522c7594abe5d4ba5db3db4c13fd9d883', class: "label" }, h("span", { key: 'e90b85f8745db02e8b6a1a7170493167db209bc1', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '6a8526daee6d38ec252b1af3aa695f570ee9f42a', name: "label" })), h("duet-icon", { key: '7e73cb75767071d370dc967920bb9158bce33db4', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: '84e1373565feee119c920fc65c48f59f89162eff', ref: element => (this.dialog = element), class: {
+            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: 'b38f6287ae32328d38478369c11fcf53af075731', class: "duet-slideout-icon" }, h("duet-icon", { key: '7b8e0204a8a23daf0ece9b96b981921dd7dc6e84', name: this.icon, size: "small", margin: "none", color: "secondary" }))), h("span", { key: '15944b22ad22f757436034fb8ef1465d19caca6d', class: "label" }, h("span", { key: '7bed6412b760df7878162e7a683488ccf91b01e9', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '4700d12f643dd979d5c90a1bf193f9ef55e5e584', name: "label" })), h("duet-icon", { key: '99c0ce44ec6a8abec00a1379a3bbd695c728e873', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: 'ea37489cb1f9476b74c7e14311011293002791ef', ref: element => (this.dialog = element), class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, h(FocusGuard, { key: '9226ff82f6efbbbad946ae3484000d213a6611da', moveFocusTo: this.closeButton }), h("div", { key: 'fe9a1debab52a26239eb64bada4872541934d4cd', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'e27e127736dafcf1611b608a658a7b8331b41d21', class: "top" }, h("button", { key: '24ea4eba589c4ad194bb8869e9ef030273c42485', 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: 'f936fd64a01150ec06f4007872e38ed39f2d13a3', moveFocusTo: this.closeButton }), h("div", { key: '12af8aafbb83a7470bdf6d43def68492ea0b950d', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '71ee6b6d138c1dfc009f41460f43676ba7ee405b', class: "top" }, h("button", { key: '8b1170da102425174dfe9ec6a12996cb3d1fa123', 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: '64350d00957fc92a6bbe8d118a6b2e19211aafc7', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '14a36e4811739ca58157a8471dca3093b41092d4' }, this.label.innerHTML), h("button", { key: '65ab2fb0772eb15968c8c39947297b6fe5267be6', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '35f57ddf92c662cd34471e252d92a5659bc9f156', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '6a04831c4fd00957cadaed33b05b40916dd7df23', class: "sticky-header" }, h("slot", { key: '11ac017b06d70caa56a96504d571e645f8688490', name: "sticky-header" }))), h("div", { key: '81e41a2cbff93f37de79ad06547cf8851ba9d200', tabindex: "-1", role: "menu",
+            }, onClick: this.onClick }, h("duet-icon", { key: '99d2cf1b6a7b2584460187cce27f9f9f0713f58e', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '7c41e4f0d2f3c71cfaf03f3a0350f9d390b3e0ec' }, this.label.innerHTML), h("button", { key: '96024d91d7946d05f62fc2c7f051bfce152e07f7', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '89b82c6c543718835c92fcf8ed4c4b9882eea0fe', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '3665563f52fa7947c426394d637447ae157e7a83', class: "sticky-header" }, h("slot", { key: '2db3b51deffa106264a66fddb59d2e614a7f1691', name: "sticky-header" }))), h("div", { key: 'e2e29f223e33babd0c6186802383f2f4578b5063', tabindex: "-1", role: "menu",
             //TODO: slideout menu fades out, needs to be instant
             id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, h("slot", { key: 'b5078c149d14316098f0a24e61f66ad805d90447' })), h(FocusGuard, { key: '552292100714317d2dee0c464fca748358cdd5e7', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: 'ebdc8c4f45b0670a30806ce49c1dbf812e47ec14' })), h(FocusGuard, { key: 'db918af81f016c137a0551589daf1b2848239817', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -341,7 +336,7 @@ export class DuetSlideoutPanel {
                 "getter": false,
                 "setter": false,
                 "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

@@ -52,16 +52,16 @@ export class DuetSlideoutPanelDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '70632cbca7f7f90d9ed33f75c8913bffb398b4e6' }, h("div", { key: 'b69b29bf73e4706eebb0b7d0068250577f19808e', class: {
+        return (h(Host, { key: '74023ff3094ea4e1867ae58690abaa3f338053e7' }, h("div", { key: '0a0de8be47b2d48bc9f0c1564d458af29ee2e05f', class: {
                 "duet-slideout-panel-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: 'bb15069b603473eb2f366449677e2f59f0547981', 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: '06d4e99fe87e549a17af9dc8100528b349ff51ba', 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: '5992324c1a87a2a0f5338f3fd82dee182747d686', name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { key: '4d00fac6dfa37bac0d46c7dc0e6a973d5186f52b', class: "label" }, h("slot", { key: 'acab9e5e487fe00ef21349332683feaf89ee5c56', name: "label" }), h("duet-icon", { key: 'b46c4a55691e471aa548a212934540481319c469', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: 'c5fe75f29aae07bc9b94f50cbef5e3af44a138af', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: '0822390f41e67611f8e441bea52420840e010f9e', name: this.icon, size: "small", margin: "none", color: "secondary" }), h("span", { key: '379e21cd716611030dc29ddf1caf36aa44ea722d', class: "label" }, h("slot", { key: '9f4235a7e7c71766070591db1fb2186cf11e395f', name: "label" }), h("duet-icon", { key: 'e138b8d3f0d3218d3585d463a5ee7202647ef623', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: '64cb95df7ee047d6de44a0f4187beec77fd25770', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'f98bb0683206267f64f87a51093f067f3eeb53c2' })))));
+            } }, h("slot", { key: '83cd9c5df8e8e8399f10f4b709fcbb08bcabb919' })))));
     }
     static get is() { return "duet-slideout-panel-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,7 +23,7 @@ export class DuetSpacer {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'f2f4fa377c08b91ba94544d234bc8ab55c8b35b5', class: {
+        return (h(Host, { key: '6765403ee0beffd36f0e97c767260714c18bdc19', 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

@@ -33,11 +33,11 @@ export class DuetSpinner {
      */
     render() {
         const color = this.color === "currentColor" ? "currentColor" : getColorByName(this.color);
-        return (h(Host, { key: '8e4d0ddb4abd8fb9c68b9f3935ca75fb65f63cf3', class: {
+        return (h(Host, { key: '02a74b72a4b22798ac1a768e41793ee920494ca0', 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: '4940f908c0ecdb401c361b0ab7dc2720d5c6a1a1', class: {
+            } }, h("div", { key: 'e4d1b98fbcdc05241e8ea87fe91a944be89d1bff', class: {
                 "duet-spinner": true,
                 [this.size]: true,
             }, style: { color }, "aria-label": this.accessibleLabel })));

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

@@ -85,10 +85,10 @@ export class DuetStatusIcon {
         }
     }
     render() {
-        return (h(Host, { key: 'cdcf064007e8c8e9a10f15a87a8d995da2b5fbc4', class: {
+        return (h(Host, { key: '7f80e70111b54c6828f96f9b4701ed969e592e0e', class: {
                 [`duet-status-icon-${this.getVariation()}`]: true,
                 "duet-strong-bg": this.strong,
-            } }, h("duet-icon", { key: '9437981c1dc35ab71d67e9616100b8ec991f55af', icon: this.getIcon(), size: this.size, margin: this.margin })));
+            } }, h("duet-icon", { key: '8a5d1ee9135d47f515b8e74bbbaea58d7e6815b6', 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-step/duet-step.js

@@ -93,13 +93,13 @@ export class DuetStep {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: '3204237f7f65d0f7e40d171da59beae2438d0b73', class: {
+        return (h("div", { key: '369f656f742589a178915ed4e72365d3dda7b907', class: {
                 "duet-step": true,
                 [`is-${this.state}`]: true,
                 "rounded-top": this.roundedTop,
                 "rounded-bottom": this.roundedBottom,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("div", { key: '144dc2c4f67e3ab88437ba11dbe665d8d938e998', class: "duet-step-heading", id: this.buttonId, role: this.state !== "current" ? "button" : "region", "aria-current": this.state === "current" ? "step" : undefined, tabindex: this.state !== "current" ? "0" : undefined, "aria-disabled": this.isClickDisabled().toString(), "aria-expanded": (this.state === "current").toString(), "aria-controls": this.contentId, "aria-selected": (this.state === "current").toString(), onClick: this.handleClick, onKeyDown: this.handleKeyDown, ref: element => (this.buttonElement = element) }, h("div", { key: '3a16cbf1b403adb015eafda7d8768e17eae7fb40', "aria-hidden": "true" }, h("div", { key: '8ee2d9f18fcef2d1cdb2ad43cf8a41c5615b4765', class: "duet-step-counter" }, this.renderStepCounter())), h("duet-spacer", { key: '0dd226292f09ae93ba5ca9bde08511982771fe15', direction: "horizontal", size: "large", breakpoint: "small" }), h("duet-spacer", { key: 'd2fea319dfc6db59b1aaba216a913c3a8e9e81e8', direction: "horizontal", size: "medium", breakpoint: "x-small" }), h("div", { key: '7c3dee5bf9df62db35cbe5896551062c482d8b3e' }, h("duet-heading", { key: '27d4325d36f4f0621af0bf633fe3de821822d4bc', theme: this.theme, level: this.headingLevel, visualLevel: "h4", color: this.headingColor(), margin: "none" }, this.heading)), h("duet-spacer", { key: 'f0e367883df25339d1882ebe17ff56c3555d4cd1', direction: "horizontal", size: "large" }), h("div", { key: 'f4313eed84ca3fe24272ce59a59b711169c4c0a8', class: "duet-step-heading-slot" }, h("slot", { key: 'a06a67c70d672288b7ef3f76149561fe5200ed99', name: "heading-content" }))), h("div", { key: '62b81bf1127a74bd5fb1cec4b0aa1e9c706d2038', class: "duet-step-content-wrapper" }, h("div", { key: 'c46f37355b38f10b1dc182108cae7f444025246d', class: "duet-step-content", role: "region", "aria-labelledby": this.buttonId, id: this.contentId }, h("slot", { key: 'f08a916f605a7227add9fdb0bd4f6ede0719ec02' })))));
+            } }, h("div", { key: '486a6f5b91cd3a6435bd02202b2191077469044d', class: "duet-step-heading", id: this.buttonId, role: this.state !== "current" ? "button" : "region", "aria-current": this.state === "current" ? "step" : undefined, tabindex: this.state !== "current" ? "0" : undefined, "aria-disabled": this.isClickDisabled().toString(), "aria-expanded": (this.state === "current").toString(), "aria-controls": this.contentId, "aria-selected": (this.state === "current").toString(), onClick: this.handleClick, onKeyDown: this.handleKeyDown, ref: element => (this.buttonElement = element) }, h("div", { key: '80895fe6a9d2581b54ddeb9095f50ab2ae2c40ec', "aria-hidden": "true" }, h("div", { key: '8b38a04e831e7feb20bfbccaf56a017b0c52260d', class: "duet-step-counter" }, this.renderStepCounter())), h("duet-spacer", { key: '2220531e141df3a5cd47dbcecdf5992265af1fff', direction: "horizontal", size: "large", breakpoint: "small" }), h("duet-spacer", { key: '80ba3be5b395b09c02a15ddabc70319bdb710ec2', direction: "horizontal", size: "medium", breakpoint: "x-small" }), h("div", { key: '7426ac138a49a07b9d914c7b92b24dde89fd2220' }, h("duet-heading", { key: '2cf9505b640081b6bc33bf726aa95fb8b49a100e', theme: this.theme, level: this.headingLevel, visualLevel: "h4", color: this.headingColor(), margin: "none" }, this.heading)), h("duet-spacer", { key: '8888b2e5b45f4bc049454ef6166b97af508a09b6', direction: "horizontal", size: "large" }), h("div", { key: '2931ae9df30278381ee5634a45d3bb934ae34215', class: "duet-step-heading-slot" }, h("slot", { key: '0f4314f52c16ef8f3929cea2bf0b5e405168593e', name: "heading-content" }))), h("div", { key: '43264d21b4cb69938551d3e81d4378369c4b23b3', class: "duet-step-content-wrapper" }, h("div", { key: '4913f58605148bb81539d7a24b29b288210f2f3d', class: "duet-step-content", role: "region", "aria-labelledby": this.buttonId, id: this.contentId }, h("slot", { key: '7e7ce320adcd8b1dd456fdb63249c983b03a829e' })))));
     }
     static get is() { return "duet-step"; }
     static get encapsulation() { return "shadow"; }

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

@@ -118,7 +118,7 @@ export class DuetStepper {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'f135a9f1ddcc6eaa86acdcdc9d11def0ec489b81', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'd68ff41042b6582c21d555e3131054278e9eaf1f', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-visually-hidden", { key: '21d8af2f8896f0e5f893f041a2f3010ada1e74c9', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), h("slot", { key: 'efe281a3ddce9364e69c5131e7e59e3a9c2bb9d5' }))));
+        return (h(Host, { key: 'df89f1e452d33048371e02ceb399b3392e370b00', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '41faad40942a4fbc0bfec56801d76f6972f87eb4', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-visually-hidden", { key: '225714f663a988bfcca3ae1ff3846bf9bafa12fb', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), h("slot", { key: 'e24151a3887c08c59be65fb9b9ab14be52db5fa7' }))));
     }
     static get is() { return "duet-stepper"; }
     static get encapsulation() { return "shadow"; }

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

@@ -131,19 +131,19 @@ export class DuetSubmenuBar {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '98b1aef33dbecb72db770aad2e638895df757769' }, h("nav", { key: '2da9e98166d85b6bf7b693ec74f2c7862da6e32f', class: {
+        return (h(Host, { key: '463af77c5ac9d7a775876cfc005df160c5e7fdfa' }, h("nav", { key: 'fcbdbfc332d352007b1122ffa65cd6d13012a559', class: {
                 "duet-submenu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 hidden: this.hidden,
-            }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { key: '1a118edf09c9be310988c12d093c63d27949e5bf', 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: '98fadd59813f2aae19d4cb5d4734d73a98d4bb7e', 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: '7b26b751bf105fe6c40320dc2eb68b8f729a1a8f', class: "label" }, h("slot", { key: 'b2fae59665ec7f21d8b9d6cebce396cda942d6de', name: "label" }), h("duet-icon", { key: 'dce5c1f7585eb179ebbc6cb604c8cae186282d61', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: '003ce0e07e1b88ea0353b13a24531ce65ddddfd7', class: {
+            }, onClick: this.onClick }, h("span", { key: 'dc38b3df13d3a4d1b4a9c78c53a9fc68b932152e', class: "label" }, h("slot", { key: '128302a4e4c2c6e68d9fd8cb96d1439db8daf800', name: "label" }), h("duet-icon", { key: '0d4d0b35713d68685084568f0f95f1818b8deaca', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: '7396ba0b29224cfa487e725604ff50dab010cdeb', class: {
                 "menu-container": true,
                 hidden: !this.open,
-            }, role: "presentation" }, h("div", { key: 'df40a36793d796f1a78304db83f2b650834b7dc4', 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: '4b5178a06a8933dfb9be60276a1a893158c62aaa', 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: '2e63a7cbbc0221285dd94bb4a9abf18724dd51ce', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: '15914d5a16f162661e52be38210d64266c1a2175' }), h("div", { key: '5b59a4d292c2631a45c9c16de265dfae6a12c5e9', class: "list-padding" }))), h("duet-overlay", { key: 'ad96690e7d9db9801005ed9010293734263b9a61', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
+            }, ref: element => (this.itemsContainer = element) }, h("div", { key: '71ee3de51b625b340635a30fb39292e25ddfc116', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: '4baa81a1de7c328e826df2f752075a9c4b05af0f' }), h("div", { key: '38b755c720305c3627d82a5e53af380752616396', class: "list-padding" }))), h("duet-overlay", { key: '62afaa179b2175f4c4c6cd56c6773675cffc061c', "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

@@ -108,18 +108,18 @@ export class DuetSubmenuBarDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '576e12e55d09213173616d89f5b408c8492ba5af', role: "listitem" }, h("div", { key: '08580206c21044dbb8d4545f8544e0ced9b6a14e', class: {
+        return (h(Host, { key: 'b08d71c303bbbb5dc488ccb9df3a6606cbcee45f', role: "listitem" }, h("div", { key: 'f27808ba704701f0857e90d8c4474f11f2bd284d', class: {
                 "duet-submenu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 open: this.open,
                 active: this.active,
-            } }, h("button", { key: 'be74c18d69e315c5db7d23665d4a9625fc0b04d0', 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: 'da50cea3b3daea0da483dc01649345a9fcc27d55', 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: '5bfc68090e446c4233ac00f348beaeefcd451709', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'e8fb4a7b73f6344bf5752b4855454dd964d20580', class: "label" }, h("span", { key: 'ff915210483dee69657e6b285a710ad9c5b1fef4', class: "label-text" }, h("slot", { key: '580d71312446d97630ee169b4d00e527d1c3acb5', name: "label" })), h("duet-icon", { key: 'a67edbe1c6a6a386db9738da55a07c13969bd9a6', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'f13cdbe5d132fdc0c9470e87ee2fe4e9bd4599dd', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '41562541f2cf4bbe9e8d6ccb3214b8fc5b44079f', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '8b2782607b3478bc491ce2fa423257d4233968fa', class: "label" }, h("span", { key: '5b22aff9852f284416e15d60b1a262e963ff228e', class: "label-text" }, h("slot", { key: 'aec50191a12adf0fbd6f9e388c2dc09954d21f83', name: "label" })), h("duet-icon", { key: '154795bda221d38ca73b47a86c97da4c6e4d573b', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '574669c2280fa1e7e4d14666f95fbe912a068119', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '4c3c1e530e6ae8d2893d7d57c3f89dc42ea4ca73' })))));
+            } }, h("slot", { key: '9a69e63aae77e184049ed7d8f7f511d47eca642e' })))));
     }
     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

@@ -49,12 +49,12 @@ export class DuetSubmenuBarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '2fee28c0408aea99ea9eca4f11d4e2f841364790' }, h("a", { key: '0d7695a6ab69f0137ecf0ceeafec3a46af81dd1f', class: {
+        return (h(Host, { key: '206adf55a559a97afad7c5bc107b46f6a099d8c0' }, h("a", { key: 'a61437b76e1ecd5c7d61b773b0b97fe43c457bc5', 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: '01df67e9b8670dc05128745c6882d2938ef9eedc', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: '6c841e3ff249215c127c9e94f08bae8d7a18a5b8', class: "label-container" }, h("span", { key: '7a6170103bd0c33ec47d8c5bd315d0933674280d', class: "label" }, h("slot", { key: '325eed72978c7f19c85163b6af1cce4df6cd9bbf' })), this.caret && h("duet-icon", { key: '075731587db83d4e2857574fdec50f701f3b1e9e', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: '8751218f86cec61805f4a74d1fd5449a7b936b6f', 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: '50c64c74c7f21aebcb34252b9a5fbf75c391c0d3', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: '0e697759844c9f0255d18fdb41765290f1389581', class: "label-container" }, h("span", { key: '3fafa6fece2c5188ec289dbc6fab760d49c73fb4', class: "label" }, h("slot", { key: '498dacafcd6fa3c3d097e9bcceb9e78c906cc236' })), this.caret && h("duet-icon", { key: 'd7055d84b2cd8de873b0400e7b3434f7670f987a', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: '40d559b351fcc4d3f56f26045d065a55b840c740', 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"; }

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

@@ -80,7 +80,7 @@ export class DuetSubmenuBarItem {
     render() {
         const TagName = this.url ? "a" : "button";
         const role = this.url ? "link" : "button";
-        return (h(Host, { key: 'e36b7b57f271197062c51666cbbbd1d57132b681', role: "listitem" }, h(TagName, { key: 'b95b4f6fd21f111bb18c1bc866c9a6ec125a6144', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: { "duet-submenu-bar-item": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.url, onKeyUp: e => this.handleEscape(e), "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, role: role, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: '5a087cb5fcd29a41c424e025bad0040ef6e86900', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'a365ea511e78cdfa9b940934ba6f38fdda5937a8', class: "label" }, h("span", { key: '527ee473a8da72431ae6afd60e35b21e5211c589', class: "label-text" }, h("slot", { key: '51f297ccaf35795f59e7bcf616c22711f1e92f06' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: 'ab43acf3850c0148e50ac264530643a67ab1a276', class: {
+        return (h(Host, { key: '35be20639e3574ca775aa4b697485c84a1512045', role: "listitem" }, h(TagName, { key: '10e74fbfad350fa687d2ed5c6d5bfa6c3c3b7a08', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: { "duet-submenu-bar-item": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.url, onKeyUp: e => this.handleEscape(e), "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, role: role, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: 'e4de062ea87077cdf5ab2f80a72cb746d10b32e9', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '1829e95b6db1e8970ca53e5f8332b0aa97df310a', class: "label" }, h("span", { key: '815b45070604d6a9fc3f875677119480812c448d', class: "label-text" }, h("slot", { key: '195a9798c946491c1ec6318a99b5738e92d68f58' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: '8718695a96ec8294833a18791aeefbe51526308f', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!this.external,

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

@@ -41,7 +41,7 @@ export class DuetSubmenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '3b758ccd9b6b2aed28589ddea46b8c6ac516d059', role: "listitem" }, h("a", { key: '6a28b37917562bcad81693762e537734dfe39c4d', class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false" }, this.icon && (h("duet-icon", { key: '545a4c6be36be038fc79745186c7260e2509d8e5', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: '5274e116ccaa52e75981801000933956f074eb29', class: "label" }, h("slot", { key: 'bcca6d327a8e7dfab90e9b6b4c625c0e024efcd2' })))));
+        return (h(Host, { key: '43fe2f21e9f7ce5b2ea4a31fb4ac6f9f76b7dea7', role: "listitem" }, h("a", { key: '78ffb34f6f54b32f8c8401139b23b34a5fe9ef95', class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false" }, this.icon && (h("duet-icon", { key: 'c42d8f5d5fe3c4b9d4dbcfe3151a1ee2c7be2ec2', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: 'a2e72daf94cc2c40ab025e399c949b4f8111bdea', class: "label" }, h("slot", { key: 'a5fb89a7dc0aea64b82a6be83104f8b9971066c8' })))));
     }
     static get is() { return "duet-submenu-bar-link"; }
     static get encapsulation() { return "shadow"; }