@duetds/components 10.0.0-alpha.6 → 10.0.0-alpha.7

package/lib/cjs/duet-slideout-link.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-48792b1c.js');
+const index = require('./index-0885358e.js');
 const themeableComponent = require('./themeable-component-996b489c.js');
 
 const duetSlideoutLinkCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%}.duet-slideout-link{position:relative;display:flex;gap:20px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 0;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:inherit;font-weight:inherit;line-height:1.25;color:inherit;text-align:left;text-decoration:none}.duet-slideout-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-slideout-link:focus,.duet-slideout-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-link.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-slideout-link.active span{position:relative}.duet-slideout-link.active span::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:var(--active-height, 2px);content:\"\";background:rgb(0, 119, 179);transform:var(--active-translate-y, translateY(2px))}.duet-slideout-link.active.duet-theme-turva span::after{background:rgb(198, 12, 48)}.duet-slideout-link.small{font-size:1rem;font-weight:600}.duet-slideout-link.small span::after{--active-height:1px;--active-translate-y:1px}.duet-slideout-link.medium{font-size:1.25rem;font-weight:600}.duet-slideout-link.large{font-size:1.5rem;font-weight:800}.duet-slideout-link .label{display:flex;gap:0.5rem;align-items:center;justify-content:space-between;width:100%}slot[name=description]::slotted(*){display:block;padding:8px 0 0;font-size:1rem;font-size:1.25;font-weight:400;color:rgb(98, 121, 138)}.duet-theme-turva slot[name=description]::slotted(*){color:rgb(113, 118, 132)}";
@@ -35,12 +35,12 @@ const DuetSlideoutLink = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: 'a029203320f713bb35536f330eb844dd30a6f642' }, index.h("a", { key: 'a4330b8ae522bc1f1730777fbb3d2238617cb8bd', class: {
+        return (index.h(index.Host, { key: 'e845f429f7644089a2978b9bd817213fdffa0783' }, index.h("a", { key: '4096768d844d0c63b1b904fa29ed278826dd49bb', class: {
                 "duet-slideout-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [this.size]: true,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": this.accessibleLabel }, this.icon && (index.h("duet-icon", { key: '2f6f44567d1d0977a30ccad6fac3c15d6f324ba2', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), index.h("div", { key: '10cdd450e97db14094ee2650b9d15fee0d11b8ac', class: "label" }, index.h("span", { key: 'a7819f3cb48b547fd6a033b048148fb0a0b3d1dc' }, index.h("slot", { key: '1b4500ab2c18ba67f3b0c356156cbc4939248376' }), index.h("slot", { key: 'f1b1cab15e6bd356e34438076c4292d998bd5881', name: "description" })), this.caret && (index.h("duet-icon", { key: '757f3c16fe571ce1743a9175fe99da0b107dc59b', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": this.accessibleLabel }, this.icon && (index.h("duet-icon", { key: 'c5b164759b0d168d217f6c10788922964a04dd00', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), index.h("div", { key: 'c72e2c8e4cd322d1e8282518b711659e7476d4cd', class: "label" }, index.h("span", { key: '64394d630468c468fdab67b98476d911a784b20e' }, index.h("slot", { key: 'a01215f4a8237339fa76151f85a52407afd7a2a0' }), index.h("slot", { key: '6f53012e7292d5c2db2a8be6bfb44437f61e7149', name: "description" })), this.caret && (index.h("duet-icon", { key: '47bb848e67d9c74aba3e666448eb651e5e3a214b', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
     }
     get element() { return index.getElement(this); }
 };

package/lib/cjs/duet-slideout-panel-dropdown.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-48792b1c.js');
+const index = require('./index-0885358e.js');
 const themeableComponent = require('./themeable-component-996b489c.js');
 
 const duetSlideoutPanelDropdownCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%}:host slot:not([name=label])::slotted(*){position:relative;top:-0.5rem;opacity:0;transition:top 0.3s ease-in, opacity 0.3s ease-in}:host([open]) slot:not([name=label])::slotted(*){top:0;opacity:1}.duet-slideout-panel-dropdown{position:relative;width:100%;height:100%}.duet-slideout-panel-dropdown button{position:relative;display:flex;gap:20px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 0;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:1.25rem;font-weight:800;line-height:1.25;color:rgb(8, 42, 77);text-align:center;text-decoration:none;cursor:pointer}.duet-slideout-panel-dropdown button .label{position:relative;display:flex;gap:0.5rem;align-items:center;justify-content:center}.duet-slideout-panel-dropdown button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout-panel-dropdown button.active .label::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:calc(100% - 18px);height:1px;content:\"\";background:rgb(0, 119, 179);transform:translateY(1px)}.duet-slideout-panel-dropdown .items{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-height:1000px;padding:4px 20px 8px 44px;overflow-y:auto;visibility:visible;transition:max-height 0.3s ease-in, padding-bottom 0.3s ease-in;-ms-overflow-style:none;scrollbar-width:none}.duet-slideout-panel-dropdown .items::-webkit-scrollbar{display:none}.duet-slideout-panel-dropdown .items.hidden{max-height:0;padding:0;overflow:hidden;visibility:hidden;transition:max-height 0.3s ease-out, padding-bottom 0.3s ease-out}.duet-slideout-panel-dropdown.duet-theme-turva button{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)}.duet-slideout-panel-dropdown.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-panel-dropdown.duet-theme-turva button.active .label::after{background:rgb(198, 12, 48)}slot{--active-height:1px;--active-translate-y:translateY(1px);font-size:1rem;font-weight:400;color:rgb(8, 42, 77)}.duet-theme-turva slot{color:rgb(23, 28, 58)}slot[name=label]{font-size:1rem;font-weight:600}";
@@ -49,16 +49,16 @@ const DuetSlideoutPanelDropdown = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: '395dbb7ccae945eb7b868151f9718d1cd6610cb9' }, index.h("div", { key: 'e20a30d16e26fa8b8d1d79282121aa096ab5eefb', class: {
+        return (index.h(index.Host, { key: '63e1ecfad4b3a99359297c7b4057cdcc8161a832' }, index.h("div", { key: '461506ece0bb6e079c7cea22bc8ecfcbce9769aa', class: {
                 "duet-slideout-panel-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, index.h("button", { key: '66ab3aeaedb579191ea05f7144d49a5a7797da15', 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: {
+            } }, index.h("button", { key: 'db9dd82a1a4f2bd4c58d13ca3b7223333acf8fe1', 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 && index.h("duet-icon", { key: '74325e60be48fe2f61db0abdd0bdfeb4076ac210', name: this.icon, size: "medium", margin: "none", color: "secondary" }), index.h("span", { key: '5b6534465bd89bc9943fe95179d1484e0523cffd', class: "label" }, index.h("slot", { key: '1a720277e982c04d1ee3c52c5b705a72eb6b639f', name: "label" }), index.h("duet-icon", { key: '94cdfb7634f121957894a58400797dc9fd0f8fbf', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), index.h("div", { key: 'dde8244123fcf328f0ff21d34f816078cdf794c4', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick }, this.icon && index.h("duet-icon", { key: 'a425d896cbba6af3d669ad764406dbd2949396ee', name: this.icon, size: "medium", margin: "none", color: "secondary" }), index.h("span", { key: 'f0c2a72a77ac42db0e38cd3605a1e5478bf65ea9', class: "label" }, index.h("slot", { key: 'eb835a8dc87c277628dead143ccaf2ffa698af4d', name: "label" }), index.h("duet-icon", { key: '8f05a36f715ba855fc222f3a84bc5d8831786789', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), index.h("div", { key: 'f96a0657d877b6c12fdb4c019bb2401674f8e5b4', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, index.h("slot", { key: '6a4ec5ae0afb953b1aa2ba49f564b06a18acfcfa' })))));
+            } }, index.h("slot", { key: '1510098d5bf5a1378f6a6f0b0fb4f8914db5802b' })))));
     }
     get element() { return index.getElement(this); }
 };

package/lib/cjs/duet-slideout-panel.cjs.entry.js

@@ -5,12 +5,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-48792b1c.js');
+const index = require('./index-0885358e.js');
 const themeableComponent = require('./themeable-component-996b489c.js');
 const bodyScroll = require('./body-scroll-dba42314.js');
-const focusUtils = require('./focus-utils-79683b7f.js');
-const languageUtils = require('./language-utils-0b533bd8.js');
-const slotUtils = require('./slot-utils-bc9e866f.js');
+const focusUtils = require('./focus-utils-8b057c75.js');
+const languageUtils = require('./language-utils-ae5d768d.js');
+const slotUtils = require('./slot-utils-7cc4f68b.js');
 const tokenUtils = require('./token-utils-5000595c.js');
 require('./string-utils-7b13c16e.js');
 require('./tokens.module-7c947029.js');
@@ -164,23 +164,23 @@ const DuetSlideoutPanel = class {
         };
         const exitTranslation = languageUtils.getLocaleString(this.exitLangObject);
         const backTranslation = languageUtils.getLocaleString(this.backLangObject);
-        return (index.h(index.Host, { key: '1fdecfc05e8d865359ade74def89509ede4b640d' }, index.h("div", { key: '5f01158076efebc4228dc02f4d2c935c8c2b1b53', class: {
+        return (index.h(index.Host, { key: '32c6f6ea4eeac3499498244624a0aaf3f896f1a4' }, index.h("div", { key: 'e6563dd635d4f9896633b8a76f697239ce10fda1', class: {
                 "duet-slideout-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, index.h("button", { key: 'e4a202123cc409499442c9ad9237ef25d91afb9b', 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: {
+            } }, index.h("button", { key: '3689db100799eb081f0c070c0fd8e1701d83c092', 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 && (index.h("div", { key: '00973456c8c03852e7f3cce1deb832cfb315d151', class: "duet-slideout-icon" }, index.h("duet-icon", { key: 'b52abe82284aa610518b113fae26f4d6ee08fb76', name: this.icon, size: "medium", margin: "none", color: "secondary" }), this.badge && index.h("div", { key: 'd3d4401ebedef89cb2509a8b9f44b27ff27ffe7a', class: "duet-slideout-badge" }))), index.h("span", { key: '87803383a92d8ae0298ad3b1a4731f5982215d71', class: "label" }, index.h("span", { key: '8c0de2a43822dbbad951886d6658a74863fecbb6', class: { "label-text": true, [this.labelSize]: true } }, index.h("slot", { key: 'f3fcc66001ef3f15cc1c179eb26d5b7ddc55b52b', name: "label" })), index.h("duet-icon", { key: '15a3ad5adc96e793705f455989dc4db44b6510fe', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), index.h("div", { key: '618f75004e95a0b85850cc1f8e480c4b4f8f99d0', ref: element => (this.dialog = element), class: {
+            }, onClick: this.onClick, inert: this.open }, this.icon && (index.h("div", { key: 'f9eadbe5b58655629aa22fe774b502183e92ddb1', class: "duet-slideout-icon" }, index.h("duet-icon", { key: 'f84d1fcd2d420ebb76265242c2d8ef01e5356313', name: this.icon, size: "medium", margin: "none", color: "secondary" }), this.badge && index.h("div", { key: '3317aef4eb6b10856b0e8e3dbee6db72697f8732', class: "duet-slideout-badge" }))), index.h("span", { key: '2490ffd21816ef2903f1cea69c2885917aba5016', class: "label" }, index.h("span", { key: '09f27658cd8d89c87a43ec93ebc38da5c5f94c83', class: { "label-text": true, [this.labelSize]: true } }, index.h("slot", { key: 'fb9e8343be8f8d0169c64509f451027e8d2a6b6b', name: "label" })), index.h("duet-icon", { key: 'd124572f81f6a5c913fa8368f435db597933c30e', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), index.h("div", { key: '2c5ae6d73798fe116493c0813f5f367d9a614341', ref: element => (this.dialog = element), class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, index.h(focusUtils.FocusGuard, { key: 'be8cbff0348dcb36daf49410a46057911878ab6b', moveFocusTo: this.closeButton }), index.h("div", { key: '67d750c50b72dbbbb55ce0507634483d107b2afd', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, index.h("div", { key: '0ddae96c7a72f15d58196c28827a0e50b378b245', class: "top" }, index.h("button", { key: '48f823a1ce20d6988bf672ad70f44a52f0ecb56b', 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 }, index.h(focusUtils.FocusGuard, { key: '3871236cfaca8944dea857fe4ab87642fbf1a98d', moveFocusTo: this.closeButton }), index.h("div", { key: 'dc789469f6b408a5909c4032a0d5c19bb36a1cb4', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, index.h("div", { key: '729e23f6d5279439445cb25981fa4a48316c0dec', class: "top" }, index.h("button", { key: '7c810b9edc27f5ea8a7928f7163631850ab45e0f', 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 }, index.h("duet-icon", { key: '14263fd7430103f651285262e3e26ce785005a40', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), index.h("span", { key: '44d2456e6d944ff4e99332a1cc92ea89742251c3' }, this.label.innerHTML), index.h("button", { key: 'e9a1c830c74e427847185e2f90ca3f82ba582523', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, index.h("duet-icon", { key: '6cff167e773690ddf3b27a92d60f84186848d58d', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), index.h("div", { key: '67d5e9fbee252fe03fba053c529a8f93c07e9193', class: "sticky-header" }, index.h("slot", { key: '6d8530f7db55035d6999708de1ad3ad010a74f5d', name: "sticky-header" }))), index.h("div", { key: '30c1508f93d6cc911e96992d8bf3ae1edff54fcc', tabindex: "-1", role: "menu",
+            }, onClick: this.onClick }, index.h("duet-icon", { key: '7db3cd52fec2f81cabda72ca55bb6375dc852e5a', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), index.h("span", { key: '81906fdecddd9f53c7c7a97c9f134a8ca34768c5' }, this.label.innerHTML), index.h("button", { key: 'c20b49d22a939f99eb926b46b62860a7b6622a3d', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, index.h("duet-icon", { key: 'ca2f8682f77f2e4e272b86922b724e3c54c8e2e6', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), index.h("div", { key: 'eb36eaa974c19690abc3abf59309cd22e07ff52e', class: "sticky-header" }, index.h("slot", { key: 'e974aeec3fb2cbe118572c4ca35ead87a1c5861d', name: "sticky-header" }))), index.h("div", { key: '7fa7812d1ac9fe82f7781ae98bb31065498d0667', tabindex: "-1", role: "menu",
             //TODO: slideout menu fades out, needs to be instant
             id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, index.h("slot", { key: 'ebc44ee8022282e5baaf0141848dc623a819905e' })), index.h(focusUtils.FocusGuard, { key: 'e5d212d17206f611fc0b18d4566606c3abffe33b', moveFocusTo: this.closeButton })))));
+            } }, index.h("slot", { key: 'fc31455ee1078696b7677b636bbfe8a80ce6fd51' })), index.h(focusUtils.FocusGuard, { key: '6045674ecaf7f7db881af487368014f3723238de', moveFocusTo: this.closeButton })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/lib/cjs/duet-slideout.cjs.entry.js

@@ -5,13 +5,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-48792b1c.js');
+const index = require('./index-0885358e.js');
 const themeableComponent = require('./themeable-component-996b489c.js');
 const bodyScroll = require('./body-scroll-dba42314.js');
-const focusUtils = require('./focus-utils-79683b7f.js');
-const keyboardUtils = require('./keyboard-utils-681e11ec.js');
-const languageUtils = require('./language-utils-0b533bd8.js');
-const slotUtils = require('./slot-utils-bc9e866f.js');
+const focusUtils = require('./focus-utils-8b057c75.js');
+const keyboardUtils = require('./keyboard-utils-f7c9f980.js');
+const languageUtils = require('./language-utils-ae5d768d.js');
+const slotUtils = require('./slot-utils-7cc4f68b.js');
 const teleport = require('./teleport-c6f8391a.js');
 const tokenUtils = require('./token-utils-5000595c.js');
 require('./string-utils-7b13c16e.js');
@@ -67,6 +67,7 @@ const DuetSlideout = class {
             stickyHeaderTabGroups.forEach(tabGroup => {
                 tabGroup.style.position = clean ? null : "relative";
                 tabGroup.style.top = clean ? null : "1px";
+                tabGroup.switchLargeBreakpoint = "always";
             });
         };
         this.openButtonEventListener = (e) => {
@@ -265,16 +266,16 @@ const DuetSlideout = class {
         };
         const topLevelOpenMenuBarTranslation = languageUtils.getLocaleString(this.topLevelOpenMenuBarLangObject);
         const exitTranslation = languageUtils.getLocaleString(this.exitLangObject);
-        return (index.h(index.Host, { key: '42c8983f98cf777cfbd7a70b0f4c1e3cd983bb66' }, index.h("div", { key: '0fd2d759b3cfaaa3a5c7b88c703093b5394cabda', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && index.h("duet-overlay", { key: '9166a3a8285c17b600e9ee548989f76543c8910c', visible: this.open, "display-device": "large", zIndex: "600" }), index.h("div", { key: 'b8b2faff3dd811eb75ae4b1b50e6184a4032227e', 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 (index.h(index.Host, { key: 'fe91f1236ad42f599f366fcf6c2030169517ba6a' }, index.h("div", { key: '832e4b4d67a42d002c6fd828167d9d787cd87f5d', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && index.h("duet-overlay", { key: 'ef568330f5a0e3d6b79117cb42646640617f7452', visible: this.open, "display-device": "large", zIndex: "600" }), index.h("div", { key: '7472dc78c95a0be586d47cef18f993fae6fc1d28', 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 }, index.h(focusUtils.FocusGuard, { key: '992cd61cc0d1a993aed34868c53920ee57ff53f2', moveFocusTo: this.closeButton }), index.h("div", { key: 'c51f24b318ddfcbd6d66d11d89754727e1ca5cc6', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, index.h("div", { key: 'a28ed0c3c76cbbc74f2ce91c2dfe990c580b726f', class: "top" }, index.h("button", { key: 'a90c836916a0f8aaafb0e6cb07a15af3c4dd1ba9', 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 }, index.h(focusUtils.FocusGuard, { key: 'fbd6da6a5049a4a9abbabd7d35b37e4ade4290a9', moveFocusTo: this.closeButton }), index.h("div", { key: '4494f6e119ba79c89c0296167d032ef5b2b30293', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, index.h("div", { key: 'da4856ecf33f7f2b15e3ff24f16951f643966499', class: "top" }, index.h("button", { key: '18fef5cc005227f6f9e53fb61266c5870057a6cc', 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 }, index.h("duet-icon", { key: '72b9de4e92241a00ea07ee46b840702ca6699009', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), index.h("div", { key: '4bbb6c68ea5e4eb7dc0a6c89b6ae15b5d39be136', class: "sticky-header" }, index.h("slot", { key: 'edb7bd63f2fd8119562cb40ccb67ffe9a5602fce', name: "sticky-header" }))), index.h("div", { key: '2f7d54ef9c8c7a049a65e773a3df564b563695a9', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
+            }, onClick: this.onClick, inert: this.openPanel }, index.h("duet-icon", { key: '2a153fc760fc9d19e253daed56047ab80803520a', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), index.h("div", { key: '28c33e636a705bdfe4ef475ee33b5952c0cdaa67', class: "sticky-header" }, index.h("slot", { key: 'd66cc6f6b1ea7e421cf3e96582698328dc42155c', name: "sticky-header" }))), index.h("div", { key: 'ca3b44be8a54d1730e2de935e25379ce352c1908', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
                 items: true,
-            } }, index.h("slot", { key: '816188093c997dc2e3319e545dfc1f2557c42fbf' })), index.h(focusUtils.FocusGuard, { key: '61d0077a31aec388d7cbd19131f7519b97c38975', moveFocusTo: this.closeButton })))));
+            } }, index.h("slot", { key: '69bb591bb20a501b057ad8bb895f8cc68ffee1f9' })), index.h(focusUtils.FocusGuard, { key: 'd4e183c805da1723c2ed9848a07a1b7880f5533a', moveFocusTo: this.closeButton })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/lib/cjs/duet-status-icon.cjs.entry.js

@@ -0,0 +1,86 @@
+/*!
+ * Built with Duet Design System
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0885358e.js');
+const tokens = require('./tokens-57e06fe4.js');
+
+const DuetStatusIcon = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bg = {
+            default: {
+                default: "color_lt_blue_100",
+                success: "color_success_200",
+                warning: "color_warning_200",
+                danger: "color_danger_100",
+            },
+            strong: {
+                default: "color_lt_blue_600",
+                success: "color_success_700",
+                warning: "color_warning_500",
+                danger: "color_danger_600",
+            },
+        };
+        this.color = {
+            default: {
+                default: "color_lt_blue_700",
+                success: "color_success_800",
+                warning: "color_warning_800",
+                danger: "color_danger_700",
+            },
+            strong: {
+                default: "color_lt_blue_100",
+                success: "color_gray_lightest",
+                warning: "color_warning_900",
+                danger: "color_gray_lightest",
+            },
+        };
+        this.variation = "default";
+        this.size = "medium";
+        this.margin = "auto";
+        this.strong = false;
+    }
+    getBg() {
+        return tokens.tokens[this.bg[this.strong ? "strong" : "default"][this.variation]];
+    }
+    getColor() {
+        return tokens.tokens[this.color[this.strong ? "strong" : "default"][this.variation]];
+    }
+    getIcon() {
+        switch (this.variation) {
+            case "default":
+                return `
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img">
+          <rect width="24" height="24" rx="12" fill="${this.getBg()}"/>
+          <path fill="${this.getColor()}" d="M13.5 17.25A2.252 2.252 0 0 1 11.25 15v-3.75h-.75a.75.75 0 0 1 0-1.5h.75c.827 0 1.5.673 1.5 1.5V15c0 .414.336.75.75.75h.75a.75.75 0 0 1 0 1.5z"/>
+          <circle fill="${this.getColor()}" cx="11.625" cy="7.125" r="1.125"/>
+          </svg>`;
+            case "success":
+                return `
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img">
+          <rect width="24" height="24" rx="12" fill="${this.getBg()}"/>
+          <path fill="${this.getColor()}" d="M9.325 17.916a1.79 1.79 0 0 1-1.498-.799l-2.44-3.462a.75.75 0 0 1 1.227-.864l2.45 3.477a.306.306 0 0 0 .261.148.294.294 0 0 0 .236-.119l7.852-9.935a.75.75 0 1 1 1.175.93l-7.843 9.923a1.781 1.781 0 0 1-.423.396 1.78 1.78 0 0 1-.997.305z"/>
+          </svg>`;
+            case "warning":
+            case "danger":
+                return `
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img">
+          <path fill="${this.getBg()}" d="M1.27,23.767C1.58,23.919 1.926,24 2.273,24L21.73,24C22.336,24 22.906,23.764 23.334,23.336C23.764,22.908 24.001,22.337 24.001,21.73C24.001,21.383 23.92,21.037 23.768,20.727L14.295,1.429C13.862,0.547 12.981,0 11.997,0C11.605,0 11.227,0.088 10.873,0.262C10.369,0.51 9.954,0.924 9.706,1.429L0.234,20.728C-0.034,21.271 -0.073,21.888 0.123,22.462C0.319,23.036 0.727,23.5 1.27,23.767Z"/>
+          <rect fill="${this.getColor()}" x="11.1" y="7.2" width="1.8" height="8.4" rx="0.9"/>
+          <rect fill="${this.getColor()}" x="10.8" y="18" width="2.4" height="2.4" rx="1.2"/>
+          </svg>`;
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: 'ebbaba8fbedc1ac294e51f81876748b26a08687a', class: {
+                [`duet-status-icon-${this.variation}`]: true,
+                "duet-strong-bg": this.strong,
+            } }, index.h("duet-icon", { key: '246af4b88cf7a1fc72cbc60264c25a1574eea11a', icon: this.getIcon(), size: this.size, margin: this.margin })));
+    }
+};
+
+exports.duet_status_icon = DuetStatusIcon;

package/lib/cjs/duet-step_2.cjs.entry.js

@@ -5,10 +5,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-48792b1c.js');
+const index = require('./index-0885358e.js');
 const themeableComponent = require('./themeable-component-996b489c.js');
 const createId = require('./create-id-1f8c438f.js');
-const keyboardUtils = require('./keyboard-utils-681e11ec.js');
+const keyboardUtils = require('./keyboard-utils-f7c9f980.js');
 
 var actionEdit2={"title":"action-edit-2","tags":"action edit 2 pen pencil","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M.748 24a.755.755 0 0 1-.531-.22.754.754 0 0 1-.196-.716l1.77-6.905a.84.84 0 0 1 .045-.121.73.73 0 0 1 .151-.223L16.513 1.289A4.355 4.355 0 0 1 19.611 0c1.178 0 2.277.454 3.106 1.279l.029.029a4.367 4.367 0 0 1 1.251 3.121 4.356 4.356 0 0 1-1.32 3.087L8.183 22.01a.735.735 0 0 1-.231.154.784.784 0 0 1-.111.042L.933 23.978A.773.773 0 0 1 .748 24zm1.041-1.791 4.41-1.131-3.281-3.275zm5.868-1.795 13.02-13.02-4.074-4.074L3.58 16.344zM21.736 6.332a2.893 2.893 0 0 0-.059-3.972l-.02-.02a2.872 2.872 0 0 0-2.037-.84v-.375l-.001.375a2.873 2.873 0 0 0-1.954.762z\"/></svg>"};
 
@@ -91,13 +91,13 @@ const DuetStep = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h("div", { key: 'cf7f017c189308e969ac8fc319fff799b44b675b', class: {
+        return (index.h("div", { key: 'a8f9214b8d235673c0b324f966a5576ccbcd16e4', class: {
                 "duet-step": true,
                 [`is-${this.state}`]: true,
                 "rounded-top": this.roundedTop,
                 "rounded-bottom": this.roundedBottom,
                 "duet-theme-turva": this.theme === "turva",
-            } }, index.h("div", { key: '2742f57e0e278b597d2fb9715b6b85207446064f', 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) }, index.h("div", { key: 'c32bbaed270ec8ea14228ca59f7077128c952b78', "aria-hidden": "true" }, index.h("div", { key: 'fee937f7b9f3ef92d303fa0502f29632558c3967', class: "duet-step-counter" }, this.renderStepCounter())), index.h("duet-spacer", { key: '8fa4deb09aaa709141dcfd6d4b8b2969840fb48d', direction: "horizontal", size: "large", breakpoint: "small" }), index.h("duet-spacer", { key: 'dadc92ff570d92e7e600918019ab84ea6f22ca36', direction: "horizontal", size: "medium", breakpoint: "x-small" }), index.h("div", { key: '412ba9538aea65069601a21a229a13e38a959cf1' }, index.h("duet-heading", { key: 'b85991761212bba3610b566a9cf48b28562859d6', theme: this.theme, level: this.headingLevel, visualLevel: "h4", color: this.headingColor(), margin: "none" }, this.heading)), index.h("duet-spacer", { key: '7b28ba235ac2d4ef273bb4825a1bb53e4069150e', direction: "horizontal", size: "large" }), index.h("div", { key: '74230c5744cf324e8f406a8d0dfadce54f8cf82d', class: "duet-step-heading-slot" }, index.h("slot", { key: '74ef4c487e447ba8fc2dfa181a27d5bead1f7cd1', name: "heading-content" }))), index.h("div", { key: 'a4df2c7c64cbb35185b4d7665235a85d1c503ea0', class: "duet-step-content-wrapper" }, index.h("div", { key: '0a2fbd936f386294c6fe75bbacb3bd2b324a6311', class: "duet-step-content", role: "region", "aria-labelledby": this.buttonId, id: this.contentId }, index.h("slot", { key: 'a748fceef07a8ec5cc280d1e7d655b3e9ae14860' })))));
+            } }, index.h("div", { key: 'fe6066ea863f9c11dd30b6b61dc9b36827dc3b38', 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) }, index.h("div", { key: '500cee650ab3ab67ec9f7cbf3e9fa98f61079e54', "aria-hidden": "true" }, index.h("div", { key: '79c93ec35c9c02e3536487e5337bdd8ae653b537', class: "duet-step-counter" }, this.renderStepCounter())), index.h("duet-spacer", { key: '2b6ad0facd7f5e405d297e3672af7d1a1867e33b', direction: "horizontal", size: "large", breakpoint: "small" }), index.h("duet-spacer", { key: '4b26a145659e1f239687333a90fd5a976a34742c', direction: "horizontal", size: "medium", breakpoint: "x-small" }), index.h("div", { key: '670e5e9670bea92a93ebc1fad855721f99d58b88' }, index.h("duet-heading", { key: '815cd4427e3ceab15c5fb44b0dc27a9eae8df5f6', theme: this.theme, level: this.headingLevel, visualLevel: "h4", color: this.headingColor(), margin: "none" }, this.heading)), index.h("duet-spacer", { key: '22c24606e2dfa0cc2fa5d42d7e12139f3031ec5b', direction: "horizontal", size: "large" }), index.h("div", { key: '9db141db2e2ddc2ef398c440bddbce996d27c5e1', class: "duet-step-heading-slot" }, index.h("slot", { key: '3c35b0d2ba57df7f6af3c287b43fef66185f827b', name: "heading-content" }))), index.h("div", { key: '539aeedc2b198beb423c3bb4869405a2e1da1797', class: "duet-step-content-wrapper" }, index.h("div", { key: '7d376e57e92ccd478e417cc392aeebe7991d41e2', class: "duet-step-content", role: "region", "aria-labelledby": this.buttonId, id: this.contentId }, index.h("slot", { key: '60f1a391efe9137ff048170995926a92abf687ae' })))));
     }
     get element() { return index.getElement(this); }
 };
@@ -204,7 +204,7 @@ const DuetStepper = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: '082c93b48c5dfaadde04f9352ef6181ccdb38334', class: { "duet-m-0": this.margin === "none" } }, index.h("div", { key: '703904a5ecf2f0eb09c89c65639ec8ade1f674e6', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, index.h("duet-visually-hidden", { key: 'aa4c9cec5585ee50da88bf4143ee998bbe98f9db', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), index.h("slot", { key: '708b76a314c85e496f66a12f9f578c2f97e8a96b' }))));
+        return (index.h(index.Host, { key: '7ccc1ace3e8f07c10a099ef586f5828a86c673c4', class: { "duet-m-0": this.margin === "none" } }, index.h("div", { key: '819c9b955cd7e82825051eacd1f7dca8247da886', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, index.h("duet-visually-hidden", { key: 'b35315da5f69ddcfd008d3e4071d49b954a905fd', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), index.h("slot", { key: 'babe00b87bff0c56a53c1a32d67acabd2725ba43' }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/lib/cjs/duet-submenu-bar-dropdown-link.cjs.entry.js

@@ -5,9 +5,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-48792b1c.js');
+const index = require('./index-0885358e.js');
 const themeableComponent = require('./themeable-component-996b489c.js');
-const keyboardUtils = require('./keyboard-utils-681e11ec.js');
+const keyboardUtils = require('./keyboard-utils-f7c9f980.js');
 
 const duetSubmenuBarDropdownLinkCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%}.duet-submenu-bar-dropdown-link{display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:flex-start;height:100%;padding:8px 20px 8px 60px;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:400;line-height:1.25;color:rgb(8, 42, 77);text-align:left;text-decoration:none}.duet-submenu-bar-dropdown-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-submenu-bar-dropdown-link:focus,.duet-submenu-bar-dropdown-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-submenu-bar-dropdown-link .label-container{display:flex;flex:1;gap:12px;align-items:center;justify-content:flex-start}@media (min-width: 62em){.duet-submenu-bar-dropdown-link{padding:0.5rem 8px;font-size:1rem;line-height:1.5}}.duet-submenu-bar-dropdown-link.active .label{position:relative}.duet-submenu-bar-dropdown-link.active .label::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transform:1px}.duet-submenu-bar-dropdown-link.active .active-check{display:none}.duet-submenu-bar-dropdown-link.duet-theme-turva{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)}.duet-submenu-bar-dropdown-link.duet-theme-turva.active .label::after{background:rgb(198, 12, 48)}@media (min-width: 62em){.duet-submenu-bar-dropdown-link.active{background:rgb(240, 247, 250)}.duet-submenu-bar-dropdown-link.active .label::after{display:none}.duet-submenu-bar-dropdown-link.active .active-check{display:block}.duet-submenu-bar-dropdown-link.active.duet-theme-turva{background:rgb(245, 247, 250)}.duet-submenu-bar-dropdown-link:hover{background:rgb(228, 241, 247)}.duet-submenu-bar-dropdown-link:hover.duet-theme-turva{background:rgb(222, 224, 228)}}.duet-submenu-bar-dropdown-link.highlight{color:rgb(0, 119, 179)}.duet-submenu-bar-dropdown-link.highlight.duet-theme-turva{color:rgb(126, 2, 35)}";
 const DuetSubmenuBarDropdownLinkStyle0 = duetSubmenuBarDropdownLinkCss;
@@ -40,12 +40,12 @@ const DuetSubmenuBarDropdownLink = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: '8e6a108958719714fbefbffcef40f07ce8534b02' }, index.h("a", { key: '12f951166275159eb55697c41c54d05ce416231f', class: {
+        return (index.h(index.Host, { key: '1f21914d277b1fb83c23ae8247a2079aaf5d6bb2' }, index.h("a", { key: '31b510818a88dd7ab76fce354f6829d8bce7a482', 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 && index.h("duet-icon", { key: '86b4f1dd2ed617060b2710bb94e62f824d5527a4', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), index.h("span", { key: '4c12186535ab8cd78eeb73256f2c5e7b1e1a42dc', class: "label-container" }, index.h("span", { key: '746e73ea2b480e0300a8879d85170029c5c269ee', class: "label" }, index.h("slot", { key: '110738471d576d743d9cfa0f615745b8ada02c1a' })), this.caret && index.h("duet-icon", { key: 'c865298fc0ca62b44faccbcf590c92994ed530f1', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (index.h("duet-icon", { key: '2b841cf6e37e5f4b7df0505cdc058fda2726019b', 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 && index.h("duet-icon", { key: '275714de44673ecd360f064f17389921175d4682', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), index.h("span", { key: '3ad326ef4328498e474abcbba52adb0d6badb769', class: "label-container" }, index.h("span", { key: 'ce4dad3fbd9f536f2a92fe8837f911b821594150', class: "label" }, index.h("slot", { key: '7d3a890bbcb4a7ee9df6e2e0db0e3b38a5e90ee9' })), this.caret && index.h("duet-icon", { key: 'c8756b808a642c376cbf4ed70a95818d273a8f13', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (index.h("duet-icon", { key: 'fc51e8c923ddf25c2b8caf20608ca2b2e0eb5161', class: "active-check", name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     get element() { return index.getElement(this); }
 };

package/lib/cjs/duet-submenu-bar-dropdown.cjs.entry.js

@@ -5,10 +5,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-48792b1c.js');
+const index = require('./index-0885358e.js');
 const tokens = require('./tokens-57e06fe4.js');
 const themeableComponent = require('./themeable-component-996b489c.js');
-const keyboardUtils = require('./keyboard-utils-681e11ec.js');
+const keyboardUtils = require('./keyboard-utils-f7c9f980.js');
 
 const duetSubmenuBarDropdownCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%}@media (min-width: 62em){:host{width:auto}}.duet-submenu-bar-dropdown{position:relative;height:100%}.duet-submenu-bar-dropdown button{position:relative;display:flex;flex-direction:row;gap:16px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:12px 1.5rem;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;line-height:1.25;color:rgb(8, 42, 77);text-align:center;text-decoration:none;cursor:pointer}@media (min-width: 62em){.duet-submenu-bar-dropdown button{flex-direction:column;gap:5px;align-items:center;justify-content:center;width:auto;font-size:0.875rem;color:rgb(0, 75, 129)}}.duet-submenu-bar-dropdown button .label{display:flex;gap:5px;align-items:center;justify-content:center}@media (min-width: 62em){.duet-submenu-bar-dropdown button.open{background:rgb(228, 241, 247)}}.duet-submenu-bar-dropdown button.open .caret{transform:rotate(180deg)}.duet-submenu-bar-dropdown button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-submenu-bar-dropdown button.active .label-text{position:relative}.duet-submenu-bar-dropdown button.active .label-text::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transform:1px}@media (min-width: 62em){.duet-submenu-bar-dropdown button.active .label-text::after{display:none}}@media (min-width: 62em){.duet-submenu-bar-dropdown button .caret{position:absolute;right:12px}.duet-submenu-bar-dropdown button:hover{color:rgb(8, 42, 77);background:rgb(228, 241, 247)}.duet-submenu-bar-dropdown button:hover.active{color:rgb(8, 42, 77)}.duet-theme-turva .duet-submenu-bar-dropdown button:hover.active{color:rgb(23, 28, 58)}.duet-submenu-bar-dropdown button.active{color:rgb(0, 119, 179)}.duet-theme-turva .duet-submenu-bar-dropdown button.active{color:rgb(198, 12, 48)}.duet-submenu-bar-dropdown button.active::after,.duet-submenu-bar-dropdown button.open::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}.duet-theme-turva .duet-submenu-bar-dropdown button.active::after,.duet-theme-turva .duet-submenu-bar-dropdown button.open::after{background:rgb(198, 12, 48)}}.duet-submenu-bar-dropdown .submenu-bar-dropdown-icon{width:20px;height:20px}@media (min-width: 62em){.duet-submenu-bar-dropdown .submenu-bar-dropdown-icon{width:16px;height:16px}}.duet-submenu-bar-dropdown .items{display:flex;flex-direction:column;align-items:center;justify-content:center;max-height:1000px;padding:4px 0 16px;overflow-y:auto;color:rgb(8, 42, 77);visibility:visible;transition:max-height 0.3s ease-in, padding 0.3s ease-in;-ms-overflow-style:none;scrollbar-width:none}.duet-submenu-bar-dropdown .items::-webkit-scrollbar{display:none}@media (min-width: 62em){.duet-submenu-bar-dropdown .items{position:absolute;top:93%;z-index:600;min-width:320px;padding:8px;background:rgb(255, 255, 255);border-radius:8px;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.07), 0 4px 10px 0 rgba(0, 41, 77, 0.15);transition:none}}.duet-submenu-bar-dropdown .items.hidden{max-height:0;padding:0;overflow:hidden;visibility:hidden;transition:max-height 0.3s ease-in, padding 0.3s ease-in}.duet-submenu-bar-dropdown.duet-theme-turva button{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)}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva button:hover{background:rgb(222, 224, 228)}}.duet-submenu-bar-dropdown.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-submenu-bar-dropdown.duet-theme-turva button.active .label-text::after,.duet-submenu-bar-dropdown.duet-theme-turva button.open .label-text::after{background:rgb(198, 12, 48)}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva button.active,.duet-submenu-bar-dropdown.duet-theme-turva button.open{color:rgb(126, 2, 35)}}.duet-submenu-bar-dropdown.duet-theme-turva button.active::after,.duet-submenu-bar-dropdown.duet-theme-turva button.open::after{background:rgb(126, 2, 35)}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva button.open{background:rgb(222, 224, 228)}}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva .items{background:rgb(255, 255, 255)}}";
 const DuetSubmenuBarDropdownStyle0 = duetSubmenuBarDropdownCss;
@@ -105,18 +105,18 @@ const DuetSubmenuBarDropdown = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: '8c793e9f3f2b70bc3ba493a71a396735f0e95260', role: "listitem" }, index.h("div", { key: '61f56c228fcf95e781f5b758e827586092b00c6e', class: {
+        return (index.h(index.Host, { key: '251e622a2df6de7c5309a5f85cf829864a4c4a93', role: "listitem" }, index.h("div", { key: '012ebfd990d6cb0daf26c6f7ed00ef3b72b40fea', class: {
                 "duet-submenu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 open: this.open,
                 active: this.active,
-            } }, index.h("button", { key: 'dd194b9b7b3e6235c422d54a9e4d7ccafcd32a9b', 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: {
+            } }, index.h("button", { key: '87bb4f401952a4f9776ee3b3182fcdbdec1c7332', 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 && (index.h("duet-icon", { key: '27106945fae616e8b7c9063fc8ca0316c37c7bdc', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), index.h("div", { key: 'df4d98ea52064c16f5949ccd369dfb33c8b1fa63', class: "label" }, index.h("span", { key: 'd423278a3e59d916ab8dfbbb1418797c7e521a07', class: "label-text" }, index.h("slot", { key: '69b4312cce709d0e11a6694e4805d25df6f50ad6', name: "label" })), index.h("duet-icon", { key: 'c76e9d0a6ac9b26f604939814273461b43b03cec', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), index.h("div", { key: '6456fbb229637f05ff2de261a14f67b65e00db9a', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (index.h("duet-icon", { key: '20bbf61dd0f3d5468548896493981b9f7b972201', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), index.h("div", { key: '322d1e7bf90ab61077a427824e009a952d8e86c7', class: "label" }, index.h("span", { key: 'c817dbb4ead417770c71b1c024d8cbe871785297', class: "label-text" }, index.h("slot", { key: '88e8e6f3544b1fb13bde7ba698221408f910a442', name: "label" })), index.h("duet-icon", { key: '56447cc388c3f1b64fb53fea99cd56497864398d', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), index.h("div", { key: '40a3648cc2536d2abf6bc48a3c9ac1c9670ddece', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, index.h("slot", { key: '786040677e91481055caf78f49b5372b5360f108' })))));
+            } }, index.h("slot", { key: '639962d848abe9a48c384dc0d165f73503138c41' })))));
     }
     get element() { return index.getElement(this); }
 };

package/lib/cjs/duet-submenu-bar-item.cjs.entry.js

@@ -5,14 +5,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-48792b1c.js');
+const index = require('./index-0885358e.js');
 const actionNewWindowSmall = require('./action-new-window-small-fa51dfb9.js');
 const commonStrings = require('./common-strings-2984301e.js');
 const themeableComponent = require('./themeable-component-996b489c.js');
-const a11yUtils = require('./a11y-utils-3c3c8d8e.js');
-const keyboardUtils = require('./keyboard-utils-681e11ec.js');
-const languageUtils = require('./language-utils-0b533bd8.js');
-require('./slot-utils-bc9e866f.js');
+const a11yUtils = require('./a11y-utils-660f6fc9.js');
+const keyboardUtils = require('./keyboard-utils-f7c9f980.js');
+const languageUtils = require('./language-utils-ae5d768d.js');
+require('./slot-utils-7cc4f68b.js');
 require('./string-utils-7b13c16e.js');
 
 const duetSubmenuBarItemCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%}@media (min-width: 62em){:host{width:auto}}.duet-submenu-bar-item{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;width:auto;height:100%;padding:12px 1.5rem;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:0.875rem;font-weight:600;line-height:1.25;color:rgb(0, 75, 129);text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer}.duet-submenu-bar-item:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-submenu-bar-item:focus,.duet-submenu-bar-item:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-submenu-bar-item .label{display:flex;gap:5px;align-items:center;justify-content:center}.duet-submenu-bar-item .leading-icon,.duet-submenu-bar-item .trailing-icon{width:20px;height:20px}@media (min-width: 62em){.duet-submenu-bar-item .leading-icon,.duet-submenu-bar-item .trailing-icon{width:16px;height:16px}}.duet-submenu-bar-item .trailing-icon.trailing-icon-arrow{width:7px;height:7px}.duet-submenu-bar-item .external-icon{width:10px;height:10px}.duet-submenu-bar-item .trailing-icon{position:absolute;right:12px}.duet-submenu-bar-item[aria-expanded=true]{background:rgb(228, 241, 247)}.duet-submenu-bar-item[aria-expanded=true] .trailing-icon.rotate{transform:rotate(180deg)}.duet-submenu-bar-item.active{color:rgb(0, 119, 179)}.duet-submenu-bar-item.active.duet-theme-turva{color:rgb(126, 2, 35)}.duet-submenu-bar-item.active::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}.duet-submenu-bar-item.duet-theme-turva{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)}.duet-submenu-bar-item.duet-theme-turva.active .label::after{background:rgb(126, 2, 35)}.duet-submenu-bar-item.duet-theme-turva.active::after{background:rgb(126, 2, 35)}.duet-submenu-bar-item:hover{color:rgb(8, 42, 77);background:rgb(228, 241, 247)}.duet-submenu-bar-item:hover.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(222, 224, 228)}.duet-submenu-bar-item:hover.duet-theme-turva.active{color:rgb(126, 2, 35)}";
@@ -68,7 +68,7 @@ const DuetSubmenuBarItem = class {
     render() {
         const TagName = this.url ? "a" : "button";
         const role = this.url ? "link" : "button";
-        return (index.h(index.Host, { key: '6e2cee3487328e2c5f7b0c5e947a8f97c739abfe', role: "listitem" }, index.h(TagName, { key: 'dd06fa4821a6c3d39686c0a35bca3d3e643c7790', 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 && a11yUtils.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 && (index.h("duet-icon", { key: 'beedaa0abf90cebfed6a0bc49cdd0f022b97aaad', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), index.h("div", { key: 'f740336fa798b6da2cbaaec645ae829b2587129a', class: "label" }, index.h("span", { key: 'aaf68d1e5dd57e8e2931d021ac3bec6b101b7b38', class: "label-text" }, index.h("slot", { key: '1fcd6459e1af576b61871b9c050a31eb2a8b490d' })), (this.trailingIcon || this.external) && (index.h("duet-icon", { key: 'c43767d76cec897ffda6a9e3718dfb0e624707dd', class: {
+        return (index.h(index.Host, { key: 'da93c6fa6997e05bd6f9164d77aa907504769b01', role: "listitem" }, index.h(TagName, { key: '1dc43febd774cfc9f118a968546a8bf84a32e552', 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 && a11yUtils.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 && (index.h("duet-icon", { key: 'c47bbb85e5e8b60012c664beb9479e127c1db73a', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), index.h("div", { key: 'b7a054d24e6f81c413538ff29645f58fc0f1ccf5', class: "label" }, index.h("span", { key: '3790441950e7485a9d4439ea8d95d00ded433661', class: "label-text" }, index.h("slot", { key: '8c345b1a1d38ad78510b6e30df8a7ae569cfdbfe' })), (this.trailingIcon || this.external) && (index.h("duet-icon", { key: 'c0d77269c066ac303a2a17de4183f4a21ff8a77a', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!this.external,

package/lib/cjs/duet-submenu-bar-link.cjs.entry.js

@@ -5,9 +5,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-48792b1c.js');
+const index = require('./index-0885358e.js');
 const themeableComponent = require('./themeable-component-996b489c.js');
-const keyboardUtils = require('./keyboard-utils-681e11ec.js');
+const keyboardUtils = require('./keyboard-utils-f7c9f980.js');
 
 const duetSubmenuBarLinkCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%}@media (min-width: 62em){:host{width:auto}}.duet-submenu-bar-link{display:flex;flex-direction:row;gap:16px;align-items:center;justify-content:flex-start;height:100%;padding:12px 1.5rem;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;line-height:1.25;color:rgb(8, 42, 77);text-align:center;text-decoration:none}.duet-submenu-bar-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-submenu-bar-link:focus,.duet-submenu-bar-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-submenu-bar-link .submenu-bar-link-icon{width:20px;height:20px}@media (min-width: 62em){.duet-submenu-bar-link .submenu-bar-link-icon{width:16px;height:16px}}@media (min-width: 62em){.duet-submenu-bar-link{flex-direction:column;gap:5px;align-items:center;justify-content:center;font-size:0.875rem;color:rgb(0, 75, 129)}}@media (min-width: 62em){.duet-submenu-bar-link.active{color:rgb(0, 119, 179)}.duet-submenu-bar-link.active.duet-theme-turva{color:rgb(126, 2, 35)}}.duet-submenu-bar-link.active .label{position:relative}.duet-submenu-bar-link.active .label::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transform:1px}@media (min-width: 62em){.duet-submenu-bar-link.active .label::after{display:none}.duet-submenu-bar-link.active::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}}.duet-submenu-bar-link.duet-theme-turva{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)}.duet-submenu-bar-link.duet-theme-turva.active .label::after{background:rgb(126, 2, 35)}.duet-submenu-bar-link.duet-theme-turva.active::after{background:rgb(126, 2, 35)}@media (min-width: 62em){.duet-submenu-bar-link:hover{color:rgb(8, 42, 77);background:rgb(228, 241, 247)}.duet-submenu-bar-link:hover.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(222, 224, 228)}.duet-submenu-bar-link:hover.duet-theme-turva.active{color:rgb(126, 2, 35)}}";
 const DuetSubmenuBarLinkStyle0 = duetSubmenuBarLinkCss;
@@ -38,7 +38,7 @@ const DuetSubmenuBarLink = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: 'd44a022e91733242dcf9d0715fdea0dd9413fc8c', role: "listitem" }, index.h("a", { key: 'a86eeb53bc8714df6212d0a1576df487efd637dd', 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 && (index.h("duet-icon", { key: '46c05eceaaed109253e10fe7f5f4c4e02b71192d', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), index.h("span", { key: '999718d74fd76be6b9b89bc6b87877614ddc01ba', class: "label" }, index.h("slot", { key: 'bce3596e218360bc8f5e19182194a608471e75e3' })))));
+        return (index.h(index.Host, { key: '501c03cd429ff36b4500a5a0e75ddd8e5b49a1bf', role: "listitem" }, index.h("a", { key: '422a173b44d4b21ca6f1826676669ba8d5e9a774', 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 && (index.h("duet-icon", { key: '2b65b8820b017fa6b2a8b66707f5b0bb116959e9', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), index.h("span", { key: '38a0a9ff428aee13c59c07346c0c0217a074280f', class: "label" }, index.h("slot", { key: '74d157331532709ca0d1ad1009c68613dd0da891' })))));
     }
     get element() { return index.getElement(this); }
 };

package/lib/cjs/duet-submenu-bar.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-48792b1c.js');
+const index = require('./index-0885358e.js');
 const tokens = require('./tokens-57e06fe4.js');
 const bodyScrollLock_es6 = require('./bodyScrollLock.es6-dd2d7d91.js');
 const themeableComponent = require('./themeable-component-996b489c.js');
@@ -131,19 +131,19 @@ const DuetSubmenuBar = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: '86badada1aee5007210401a18b909265c6e7da8e' }, index.h("nav", { key: 'f32fed7e0ce0788624a3e4255ae0db18c1d0a815', class: {
+        return (index.h(index.Host, { key: '06a71ec0fea466655847571dc1a05651105c5ae3' }, index.h("nav", { key: 'c9a24b82e7fc2623e9f4b228c68784a7ca6eb1b1', class: {
                 "duet-submenu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 hidden: this.hidden,
-            }, "aria-label": this.accessibleLabel }, this.hasItems && (index.h("button", { key: '023f42471735d52798e9b93e0097d092a876d970', 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 && (index.h("button", { key: 'da1f940ba0bb496c7c587a0070eaf52cc7bc8060', 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 }, index.h("span", { key: 'e2dd228fb84c96175fe18c53885d5d7b29d0c227', class: "label" }, index.h("slot", { key: '22b3d8b20a06e0ebb32f5389cc4e76b86470cffc', name: "label" }), index.h("duet-icon", { key: 'aa83f5bb09c66b7b1e167e832c384726a0f39686', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), index.h("div", { key: 'ab3308f7c02cc8248bb249dd9254e1a6dde9c0f3', class: {
+            }, onClick: this.onClick }, index.h("span", { key: '0e8dd0590760a6e944a970cde6c8743276de0fa9', class: "label" }, index.h("slot", { key: '3c3657af5b58af62145180b24137111c22eb7e24', name: "label" }), index.h("duet-icon", { key: '4d57f6aa5f74cdf524f0b5bd0a34ab3e624224b3', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), index.h("div", { key: 'd44d6998afc2ae16770aecb85a56ebf4519db49c', class: {
                 "menu-container": true,
                 hidden: !this.open,
-            }, role: "presentation" }, index.h("div", { key: 'cd19031fc8263a08267dc1338031143f109f97c3', 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" }, index.h("div", { key: 'b1a1aafe3bf5524a11b2ad06257144b48d8be70d', 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) }, index.h("div", { key: 'aff4f8d6fe01ca9a2a25dcf4c3255cbea5fe2bb5', class: "list", role: this.mobile ? "presentation" : "list" }, index.h("slot", { key: '157ba2c07ca33927c016826805d4abed7f5e2b4d' }), index.h("div", { key: 'e86d0f34cecc3968fd93a43e4877393c68f518aa', class: "list-padding" }))), index.h("duet-overlay", { key: 'e9e83e146db0024d79405ba9de389c647aa9f1f6', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
+            }, ref: element => (this.itemsContainer = element) }, index.h("div", { key: 'f335ec19eff38beec4651d0668265a12b48c87ee', class: "list", role: this.mobile ? "presentation" : "list" }, index.h("slot", { key: '01f590e6f62cfd5e5dc1a8295f17e3a8ee8b6ae8' }), index.h("div", { key: 'bcba5ff19f0b623d9dd8e76cc3bad86c0062e28b', class: "list-padding" }))), index.h("duet-overlay", { key: 'bd1aadd52ed5259cf85555faabff82e2844dc4ec', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {