@duetds/components 9.2.1 → 9.2.3

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

@@ -1,17 +1,17 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-940c081d.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f5d67bb6.js';
 import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
 import { e as enableBodyScroll, d as disableBodyScroll } from './body-scroll-46854769.js';
-import { F as FocusGuard } from './focus-utils-5147573d.js';
-import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './language-utils-b0c1eb01.js';
-import { h as hasSlot } from './slot-utils-4a318cb9.js';
+import { F as FocusGuard } from './focus-utils-29c235cb.js';
+import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './language-utils-bd643c5c.js';
+import { h as hasSlot } from './slot-utils-5369c9ff.js';
 import { g as getColorByName } from './token-utils-3c2fb643.js';
 import './string-utils-192eb3c8.js';
 import './tokens.module-216c2ae9.js';
 
-const duetSlideoutPanelCss = "*,*::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;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{position:relative;height:100%}.duet-slideout-panel .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:1.5rem;font-weight:800;line-height:1.25;color:rgb(8, 42, 77);text-align:left;text-decoration:none;cursor:pointer}.duet-slideout-panel .link .label{display:flex;gap:0.5rem;align-items:center;justify-content:space-between;width:100%}.duet-slideout-panel .link .label-text.small{font-size:1rem;font-weight:600}.duet-slideout-panel .link .label-text.medium{font-size:1.25rem;font-weight:600}.duet-slideout-panel .link .label-text.large{font-size:1.5rem;font-weight:800}.duet-slideout-panel .link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout-panel .link.active .label-text{position:relative}.duet-slideout-panel .link.active .label-text.small::after{height:1px;transform:translateY(1px)}.duet-slideout-panel .link.active .label-text::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:2px;content:\"\";background:rgb(0, 119, 179);transform:translateY(2px)}.duet-slideout-panel .dialog{position:fixed;top:0;left:0;z-index:600;width:100%;height:100%;overflow-y:auto;visibility:visible}.duet-slideout-panel .dialog.hidden{visibility:hidden}.duet-slideout-panel .dialog.hidden .top .back,.duet-slideout-panel .dialog.hidden .top span{opacity:0}.duet-slideout-panel .top-container.has-sticky-header-slot{position:sticky;top:0;z-index:200}.duet-slideout-panel .top-container.has-sticky-header-slot .top{background:rgb(240, 247, 250)}.duet-slideout-panel .top-container.has-sticky-header-slot .sticky-header{display:block;padding:0 16px}.duet-slideout-panel .top{display:flex;align-items:center;justify-content:space-between;padding:4px}.duet-slideout-panel .top .back{opacity:1;transition:top 0.3s ease-in, opacity 0.3s ease-in}.duet-slideout-panel .top .back:focus,.duet-slideout-panel .top .close:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout-panel .top duet-icon{padding:16px}.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;line-height:1.5;color:rgb(8, 42, 77);opacity:1;transition:top 0.3s ease-in, opacity 0.3s ease-in}.duet-slideout-panel .sticky-header{display:none;width:100%;padding:0 1.5rem;margin-bottom:20px;background:rgb(240, 247, 250);border-bottom:1px solid rgb(212, 223, 229)}.duet-slideout-panel .items{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:1rem 16px;overflow-y:auto;color:rgb(8, 42, 77)}.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)}.duet-slideout-panel.duet-theme-turva .link:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-panel.duet-theme-turva .link.active .label-text::after{background:rgb(198, 12, 48)}.duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .top{background:rgb(245, 247, 250)}.duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .sticky-header{background:rgb(245, 247, 250);border-bottom:1px solid rgb(222, 224, 228)}.duet-slideout-panel.duet-theme-turva .top .back:focus,.duet-slideout-panel.duet-theme-turva .top .close:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-panel.duet-theme-turva .top span{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)}slot:not([name=label]){--active-height:1px;--active-translate-y:translateY(1px);font-size:1rem;font-weight:600;color:rgb(8, 42, 77)}.duet-theme-turva slot:not([name=label]){color:rgb(23, 28, 58)}";
+const duetSlideoutPanelCss = "*,*::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;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{position:relative;height:100%}.duet-slideout-panel .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:1.5rem;font-weight:800;line-height:1.25;color:rgb(8, 42, 77);text-align:left;text-decoration:none;cursor:pointer}.duet-slideout-panel .link .duet-slideout-icon{position:relative;display:inline-flex;font-size:0;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}}.duet-slideout-panel .link .label{display:flex;gap:0.5rem;align-items:center;justify-content:space-between;width:100%}.duet-slideout-panel .link .label-text.small{font-size:1rem;font-weight:600}.duet-slideout-panel .link .label-text.medium{font-size:1.25rem;font-weight:600}.duet-slideout-panel .link .label-text.large{font-size:1.5rem;font-weight:800}.duet-slideout-panel .link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout-panel .link.active .label-text{position:relative}.duet-slideout-panel .link.active .label-text.small::after{height:1px;transform:translateY(1px)}.duet-slideout-panel .link.active .label-text::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:2px;content:\"\";background:rgb(0, 119, 179);transform:translateY(2px)}.duet-slideout-panel .dialog{position:fixed;top:0;left:0;z-index:600;width:100%;height:100%;overflow-y:auto;visibility:visible}.duet-slideout-panel .dialog.hidden{visibility:hidden}.duet-slideout-panel .dialog.hidden .top .back,.duet-slideout-panel .dialog.hidden .top span{opacity:0}.duet-slideout-panel .top-container.has-sticky-header-slot{position:sticky;top:0;z-index:200}.duet-slideout-panel .top-container.has-sticky-header-slot .top{background:rgb(240, 247, 250)}.duet-slideout-panel .top-container.has-sticky-header-slot .sticky-header{display:block;padding:0 16px}.duet-slideout-panel .top{display:flex;align-items:center;justify-content:space-between;padding:4px}.duet-slideout-panel .top .back{opacity:1;transition:top 0.3s ease-in, opacity 0.3s ease-in}.duet-slideout-panel .top .back:focus,.duet-slideout-panel .top .close:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout-panel .top duet-icon{padding:16px}.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;line-height:1.5;color:rgb(8, 42, 77);opacity:1;transition:top 0.3s ease-in, opacity 0.3s ease-in}.duet-slideout-panel .sticky-header{display:none;width:100%;padding:0 1.5rem;margin-bottom:20px;background:rgb(240, 247, 250);border-bottom:1px solid rgb(212, 223, 229)}.duet-slideout-panel .items{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:1rem 16px;overflow-y:auto;color:rgb(8, 42, 77)}.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)}.duet-slideout-panel.duet-theme-turva .link:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-panel.duet-theme-turva .link.active .label-text::after{background:rgb(198, 12, 48)}.duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .top{background:rgb(245, 247, 250)}.duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .sticky-header{background:rgb(245, 247, 250);border-bottom:1px solid rgb(222, 224, 228)}.duet-slideout-panel.duet-theme-turva .top .back:focus,.duet-slideout-panel.duet-theme-turva .top .close:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-panel.duet-theme-turva .top span{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)}slot:not([name=label]){--active-height:1px;--active-translate-y:translateY(1px);font-size:1rem;font-weight:600;color:rgb(8, 42, 77)}.duet-theme-turva slot:not([name=label]){color:rgb(23, 28, 58)}";
 const DuetSlideoutPanelStyle0 = duetSlideoutPanelCss;
 
 const DuetSlideoutPanel = class {
@@ -57,6 +57,7 @@ const DuetSlideoutPanel = class {
         this.icon = undefined;
         this.labelSize = "medium";
         this.backgroundColor = "primary-lightest";
+        this.badge = false;
     }
     /**
      * Component lifecycle events.
@@ -159,21 +160,23 @@ const DuetSlideoutPanel = class {
         };
         const exitTranslation = getLocaleString(this.exitLangObject);
         const backTranslation = getLocaleString(this.backLangObject);
-        return (h(Host, { key: '4894ffaee3ff8c052c6a69ab11a520bebe9dda52' }, h("div", { key: 'ef9b9d3501f1d27e7097e9fca9ba7879418c40be', class: {
+        return (h(Host, { key: '2647678315ed56e1fe335c37736ee23c004dd21d' }, h("div", { key: '905482d53e0735d94f4b642cb1451313ba5a1b34', class: {
                 "duet-slideout-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: '2e9a8ded1dba99b3a2b69454d0a575a1f6b7638a', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: '45f9e616201b64655cfadf30e3e6f2c4a57c835e', 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("duet-icon", { key: 'fe52801541da8d8443d786747bef60637adc3fae', name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { key: '283929f93a31e091094dc1b6dd5d8a18e719c834', class: "label" }, h("span", { key: 'e2186e357666cb1b5e27a048f84162ca27293bff', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: 'b555dc65e44da767e718a3a5d527c7b2cd77f4cd', name: "label" })), h("duet-icon", { key: '819ecfc8650f4b720c90d7fe86160a7d68c99c9f', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: '5448d9e971302bfe4269cda106cdd322e77b3c32', ref: element => (this.dialog = element), class: {
+            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: '008d3982b7842feefbdf0e1a26143baca78feb98', class: "duet-slideout-icon" }, h("duet-icon", { key: 'cd08bf2de91cbf0cae51750ae70ac39a6886718b', name: this.icon, size: "medium", margin: "none", color: "secondary" }), this.badge && h("div", { key: '546c0233c3479f5ae94f5d175b38a5bbd5a62ec3', class: "duet-slideout-badge" }))), h("span", { key: 'd5d36cc9179fcf3217d991bc40250e05cd462bd1', class: "label" }, h("span", { key: 'f9cdaf84aaea94b0960779018ab0ebe92db3cded', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '87277fe5dd9340b05758ed62641ebf4521c2c988', name: "label" })), h("duet-icon", { key: 'efd21892344ca510453d903c6099ef38700dcd64', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: 'e0891e52f2734290947fb7bab8e732ea19db4ca7', ref: element => (this.dialog = element), class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, h(FocusGuard, { key: '323e693c5774603efaba24bb52587d076925b97d', moveFocusTo: this.closeButton }), h("div", { key: '7a17c1dac1bf423064326b8dc41a78b49e7a0420', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '624254dd067e08f801f498af72f3abb514e5be8b', class: "top" }, h("button", { key: 'd415caf91b19b1dedb14f7c2da220e51e37e699e', 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: '78fbbf6a49c26699a681d53e8664fa9cdc04607d', moveFocusTo: this.closeButton }), h("div", { key: 'ff3ae73aedbf253a194fbf5ec5e03558a6253eeb', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'a1a3eed79130adbe6b32c2ab2a8ca0aab5cef454', class: "top" }, h("button", { key: 'ec03ca7ae63fbabe2a8a72dd174d45dfe3a43cbc', 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: '8288a43f1d803c186ff775e8ae454d0d60925f8b', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: 'ccacf36e23bfe6072c806caa790a8b405975a509' }, this.label.innerHTML), h("button", { key: '6c71c338e33d3196956f6ad2d4bdde62668dec82', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '729a7ce51dd5326b61cfd28c26706886dd77d312', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '0c424256bd13477252fafd78194f5912e52a8392', class: "sticky-header" }, h("slot", { key: '92d20c29ca1b38101958ac98f421334a2d21d0e1', name: "sticky-header" }))), h("div", { key: 'dbc9d5b2939c8eeeec5df7c01e753809b0d89329', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick }, h("duet-icon", { key: 'cccfd5be6b2f45a819c9f4d5e2be98fb550f9052', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '6ef5585f68075fb83da70e1d0957a271baa40e8d' }, this.label.innerHTML), h("button", { key: '025d0b7774d3ab4d2212a41dcfbf335dbdcbe75b', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: 'c75bc1256d277e8e78feff4feccea9ddbb76076e', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '2ea243cde023eae58163c13933950ae567cc4fb8', class: "sticky-header" }, h("slot", { key: '216f3007ee7fd66367bb1ecc7c633f81def538de', name: "sticky-header" }))), h("div", { key: 'b63972a5c65747caa92dd13ec99059748afa72e0', tabindex: "-1", role: "menu",
+            //TODO: slideout menu fades out, needs to be instant
+            id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, h("slot", { key: '73befdc1cc16c43ff7319c1efc6fd78957ae03e6' })), h(FocusGuard, { key: '70c1286b9d6fca87ee08f6bcff7bed76592417ce', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: '82da64daad4e4c5445bacd92c115e658819341ce' })), h(FocusGuard, { key: 'fd769f1269b9562291f1198976e3258148a696dc', moveFocusTo: this.closeButton })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,13 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-940c081d.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f5d67bb6.js';
 import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
 import { e as enableBodyScroll, d as disableBodyScroll } from './body-scroll-46854769.js';
-import { f as focusElement, F as FocusGuard } from './focus-utils-5147573d.js';
+import { f as focusElement, F as FocusGuard } from './focus-utils-29c235cb.js';
 import { f as isEscapeKey } from './keyboard-utils-439bcc8b.js';
-import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './language-utils-b0c1eb01.js';
-import { h as hasSlot } from './slot-utils-4a318cb9.js';
+import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './language-utils-bd643c5c.js';
+import { h as hasSlot } from './slot-utils-5369c9ff.js';
 import { T as Teleport } from './teleport-546f382d.js';
 import { g as getColorByName } from './token-utils-3c2fb643.js';
 import './string-utils-192eb3c8.js';
@@ -79,9 +79,38 @@ const DuetSlideout = class {
         this.theme = "";
         this.accessibleRole = "menubar";
         this.open = false;
-        this.opener = undefined;
         this.backgroundColor = "gray-lightest";
     }
+    /**
+     * DuetMenuBarButton or DuetButton element, or id of an element, that opens the slideout. If id is given,
+     * the component automatically sets the click event listener to open the slideout.
+     */
+    get opener() {
+        return this._opener;
+    }
+    set opener(value) {
+        if (this.opener === value) {
+            return;
+        }
+        if (typeof value === "string") {
+            this.setOpenButton(document.getElementById(value));
+            if (this.openButton) {
+                this.openButton.addEventListener("click", this.openButtonEventListener);
+            }
+        }
+        else {
+            this.setOpenButton(value);
+        }
+    }
+    /**
+     * Alias for property opener.
+     */
+    get controller() {
+        return this._opener;
+    }
+    set controller(value) {
+        this.opener = value;
+    }
     /**
      * Component lifecycle events.
      */
@@ -97,12 +126,6 @@ const DuetSlideout = class {
         if (this.teleport) {
             this.teleport.activate();
         }
-        if (this.opener) {
-            this.setOpenButton(document.getElementById(this.opener));
-            if (this.openButton) {
-                this.openButton.addEventListener("click", this.openButtonEventListener);
-            }
-        }
         this.setStickHeaderStyleMutations();
         this.mutationObserver = new MutationObserver(() => {
             this.openPanel = !!this.getOpenPanel();
@@ -213,15 +236,15 @@ const DuetSlideout = class {
         };
         const topLevelOpenMenuBarTranslation = getLocaleString(this.topLevelOpenMenuBarLangObject);
         const exitTranslation = getLocaleString(this.exitLangObject);
-        return (h(Host, { key: '382d37300cf05dcb13fdf8824876e0148029ac41' }, h("div", { key: '308a1a6d818574db32fc48c2a001b2c7e49cb694', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-overlay", { key: '7fa43387656dea8e448e89b8c42e88af59edfcf9', onClick: this.bgOnClick, visible: this.open, "display-device": "large", zIndex: "600" }), h("div", { key: '2d0d1d2d1b7e7b914c71605ba2e99bad4535e3c7', 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: '289093e61e89d5724e3bb15cd7945fd39734ed53' }, h("div", { key: '3514ce08bf8d7a529cfbff42be55b8bcf192cc8f', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-overlay", { key: 'b78a47d52483e0eb360dc0ccc9e657b5ccb9b030', onClick: this.bgOnClick, visible: this.open, "display-device": "large", zIndex: "600" }), h("div", { key: '95a7f2593ddf2def5019b3d6c84d5374f67fefb3', 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,
-            }, style: styles }, h(FocusGuard, { key: '1fff6c072160d4bd1f4cbd0a76c350423e61cd7e', moveFocusTo: this.closeButton }), h("div", { key: '099e9fa740e958a60b4be655fbb821a850613fab', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '0364ef69089b576a3d046ad18cea8e421fd78f47', class: "top" }, h("button", { key: '4801538fe2d60e45bfcdf34aa796443be783ff29', 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: '8d2774b7413c3a4348831ea8f3484763560496d4', moveFocusTo: this.closeButton }), h("div", { key: '0ab02fea0fc88c1cad4e7964cf64ddd4e0991d3c', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '12b34a66f05a9d7d65c8d06a36aab27b9190c8ac', class: "top" }, h("button", { key: '7ffb3f3bace1d7983094573171a38dbac5c8a410', 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: 'adddff71eb7c2d717909330b4a1b952989de80a7', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '2532328955997fed29910a8ce59cf95a08a453bd', class: "sticky-header" }, h("slot", { key: 'e6938e50feec7af6a66335e655942ffd1912c96e', name: "sticky-header" }))), h("div", { key: '14489762ae9efcbdd60d2673202f2e6a514d70dd', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
+            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: 'f25d28342f722a6d4b7705e45498a8036468bf74', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '0162ecd6fc8db33a7053a1bf44bdb0b7b220ec6f', class: "sticky-header" }, h("slot", { key: '6d47a428f6f63a9ea306af7b1553dcc5144e84c7', name: "sticky-header" }))), h("div", { key: '7fe090f9ad0f6eb825809a17b8610f5aefbd2ab2', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
                 items: true,
-            } }, h("slot", { key: 'da507350699332f3630e4d327447cb11989029f7' })), h(FocusGuard, { key: 'd9a0a209bd64fc4d099de599e0ee4c3842a54f02', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: 'bf013947faa4f1951dbb34616040b35d90e4770c' })), h(FocusGuard, { key: '388318c3a94cd035f6e02eb83e49e0d97ad56995', moveFocusTo: this.closeButton })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-940c081d.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-f5d67bb6.js';
 import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
 import { c as createID } from './create-id-149a1b6d.js';
 import { i as isKeyboardClick, s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-439bcc8b.js';

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-940c081d.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f5d67bb6.js';
 import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
 import { f as isEscapeKey } from './keyboard-utils-439bcc8b.js';
 
@@ -36,12 +36,12 @@ const DuetSubmenuBarDropdownLink = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '2a0bd0fc1067f2830d35b391f7729501b575945d' }, h("a", { key: '2701050d3eb010669df4262dede28d854ff998db', class: {
+        return (h(Host, { key: '7b6d4f944e09e3b9f4a545b35ca22b70354d4e89' }, h("a", { key: '7c4d73a5f232691be4cd4ccc4e9687afdfdf46b2', 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: 'ed6dc9fdce8a88be4bf115d1be386291cdab6a1e', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: 'ba024c16864574248221caa8d8654051f6eef26f', class: "label-container" }, h("span", { key: '6b22ce9cd109698aea523ca2ba0edb037d692dbd', class: "label" }, h("slot", { key: '6df015eacde2eff570c818e14ebaa152059fda76' })), this.caret && h("duet-icon", { key: '69b29abde8dae9e41f63ba981a523848ba962c31', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: 'd2e8fe2ca349dc62978f322d32a82ecfb135f8e7', 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: '931355f6d77cbd9390389fc19ba3523c71deaa37', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: '4be80caa3ae757adf17b077286f0d05572bf8086', class: "label-container" }, h("span", { key: '7c06307710f7bf1a54d31fef0fefe969ef5dbf86', class: "label" }, h("slot", { key: '11223a3b3b50e53da0b37954dc228ef2cc2fb3c8' })), this.caret && h("duet-icon", { key: '8f1bdbc98c7f0af7167528d6ddd015613196af72', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: '06574ed40c1677c41256fde666620ec3eb367d7f', class: "active-check", name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     get element() { return getElement(this); }
 };

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-940c081d.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f5d67bb6.js';
 import { a as media_query_large } from './tokens-84fb2357.js';
 import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
 import { f as isEscapeKey } from './keyboard-utils-439bcc8b.js';
@@ -101,18 +101,18 @@ const DuetSubmenuBarDropdown = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '11e62070b0315cfc4d3e3c4303bc193ca9e17ebb', role: "listitem" }, h("div", { key: '6e24bdc74dcf8087c511f62bbcd1b0637899f950', class: {
+        return (h(Host, { key: 'c3cf8eb945cf4d95dc90722856d85478a478c3d1', role: "listitem" }, h("div", { key: 'c33c4274767aa171529c12d7998be90c12c80d79', class: {
                 "duet-submenu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 open: this.open,
                 active: this.active,
-            } }, h("button", { key: '7e1ea73475a0055d2494ea0fd1a6251bff54a434', 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: '0c2bca528aaf0c1f528634636e7d16007dd66e8e', 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: 'ccfe3bd7792ae0b352b62806cf1c8567f9437456', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '2267d727d323b18c20cdd78b6050c83f0933d373', class: "label" }, h("span", { key: '9eb6d48b698f09636e950cd711928614d492033b', class: "label-text" }, h("slot", { key: '9b6643216f2a390a4ae19fb1d7306a1a10e79f53', name: "label" })), h("duet-icon", { key: 'f0e9935a58890ae53424c99761149c8d913ce74f', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '5634a7f613b5e00c5a3328d47e98e5342eb31ba3', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'b6d67b23e9e144930f6dbd3f7cb645dcc08757bc', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'd4671d5f840303ad923d50ad7314a5ca13a95840', class: "label" }, h("span", { key: 'ec5e80db693fdd7b50ad9fcf3d40300858bd3036', class: "label-text" }, h("slot", { key: '42be40ec38e6e46bf516d581e0cf7204d3a43ecc', name: "label" })), h("duet-icon", { key: '28fce54b06d8489c35a017371ccbcf3ff357261c', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '23ee904f9e7e8953b79be8c1903787e0ad0ed389', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'f1ee473aebbe7301e1c6e69f6d539ac26dccf87e' })))));
+            } }, h("slot", { key: '18d9b43b76fd13faa5c1e95e50253d4ba067dbbd' })))));
     }
     get element() { return getElement(this); }
 };

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

@@ -1,13 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-940c081d.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f5d67bb6.js';
 import { a as actionNewWindowSmall } from './action-new-window-small-1945be91.js';
 import { D as DuetStringsExternalDefaults } from './common-strings-af765cad.js';
 import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
 import { g as getAccessibleLinkLabel } from './a11y-utils-92930863.js';
 import { f as isEscapeKey } from './keyboard-utils-439bcc8b.js';
-import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-b0c1eb01.js';
+import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-bd643c5c.js';
 import './string-utils-192eb3c8.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)}";
@@ -63,7 +63,7 @@ const DuetSubmenuBarItem = class {
     render() {
         const TagName = this.url ? "a" : "button";
         const role = this.url ? "link" : "button";
-        return (h(Host, { key: '443e50f3d6e0221f9d089617b66ba2d7af05a0d4', role: "listitem" }, h(TagName, { key: 'a49c8360435fdff2934bb611b909880c17df0119', 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: '9caf7a841ec4116bec64a846f35bbeef8b377563', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'f24016ad17bd57fdfd5293a8dec47dab126d4441', class: "label" }, h("span", { key: '7a6cb80cc3013a47527285f07dcfe54429d842b9', class: "label-text" }, h("slot", { key: '85c0ca4f6ee110f74118b0a6e17153c787b6d52f' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: 'df8367bdb82b9fb9207fb6083d3c1c308c388cdf', class: {
+        return (h(Host, { key: 'ab81cca016d06490e7327dff9e9cd7b1eef0c372', role: "listitem" }, h(TagName, { key: '6214b7908b001b1c1c40cf1b24d37932752d48ed', 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: '99189e4a64cecacfc57d341d664702eb6319506e', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'efa76ad7b21823ba071b7f9ff4c273034e8c32f8', class: "label" }, h("span", { key: '7d97203da0eb5f9f946b469ceae8a3dd16bd4775', class: "label-text" }, h("slot", { key: 'd6d331b07cf85e7a38383dd8890275bd5959527b' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: '3120f4d7c7b98be6a9ee3b109ed33c6a94705b4e', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!this.external,

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-940c081d.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f5d67bb6.js';
 import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
 import { f as isEscapeKey } from './keyboard-utils-439bcc8b.js';
 
@@ -34,7 +34,7 @@ const DuetSubmenuBarLink = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'a6dc9dd339c3e6bff16908b1c8a92d8864620cae', role: "listitem" }, h("a", { key: '5251cb04c87f1c52bd8fdae8a0da3c8c8387b9c3', 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: '3c102a611f04bce4287534f8c2492b326cd97546', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: '7f743327633be260d9f69659dc392023fb4f1a60', class: "label" }, h("slot", { key: '28503563b656db735aa9635e52e64f7eb296d630' })))));
+        return (h(Host, { key: 'fb94eb65690b10d78ba72790a1653d129d509aab', role: "listitem" }, h("a", { key: '3997d3a5848880c3c8fe0a81ff3c0ea243bf1328', 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: '56fd2d97c86ae74b00ad7661840e543e12f771c2', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: 'cacd3d410a7774d1c9919af8f2fca12a7150fb65', class: "label" }, h("slot", { key: 'ab7dc74da327c9eac6ed6c8a72edb1b194623949' })))));
     }
     get element() { return getElement(this); }
 };

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-940c081d.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f5d67bb6.js';
 import { a as media_query_large } from './tokens-84fb2357.js';
 import { e as enableBodyScroll, d as disableBodyScroll } from './bodyScrollLock.es6-ecbf187e.js';
 import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
@@ -127,19 +127,19 @@ const DuetSubmenuBar = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'a14801d4318c2c85ff8624880333f5f710d8a636' }, h("nav", { key: '1c369dfe0426039d7893a3a8a3d24907bfb010d3', class: {
+        return (h(Host, { key: '1469bb18585b64778dd536fe0b0a8f727e065578' }, h("nav", { key: 'a399b3bd25d1674641715545c4d9ad33a997cce8', class: {
                 "duet-submenu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 hidden: this.hidden,
-            }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { key: 'ffe8648100e5266b9c17eaa8c1bc92bfcc9d4ba8', 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: '3226732e632347a9a90f39c7408f444841ed565d', 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: '8e313c306bf157aa1381cf39c5bd2332924cf8dd', class: "label" }, h("slot", { key: '428a4a04231e099a5128499ef727673d698d56ef', name: "label" }), h("duet-icon", { key: '8e5a89fdc9fc9caa588f51ae317a8c70549ccec2', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: '152257b88008c49c15ef2b505787e69c238653e8', class: {
+            }, onClick: this.onClick }, h("span", { key: '7796972e15445991d3de043e8729a8ba33fff6e3', class: "label" }, h("slot", { key: '31c5d6e4d7b63589b161e5a286e4c8fb17858f94', name: "label" }), h("duet-icon", { key: 'e48e347ab980b919e9b405bcce57b653902b8cb5', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: 'bdc071c610af92ccd78d692c5cb54dd3807d4110', class: {
                 "menu-container": true,
                 hidden: !this.open,
-            }, role: "presentation" }, h("div", { key: '3f4346fc605692e6d1aae163dfc05d308bb8542c', 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: '59b34793b7a78f7b6408ba05fe8e1e8d2cd68fcd', 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: '5b8d26c95ea0bb9ff8297905308596449f1cbf85', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: '34d24d206903d7ecb360e9964687a2f844a2be84' }), h("div", { key: '23aa8b69e73f321edf1742d50381ce108d0bb2db', class: "list-padding" }))), h("duet-overlay", { key: '4c80718a582cf05c6b665bed92c9fd0af0764c6b', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
+            }, ref: element => (this.itemsContainer = element) }, h("div", { key: '0b1cb47d7dd37179e422758a9450f257383330f6', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: '2c0b696924ab664b00ee2c79cdd8c49fc2134837' }), h("div", { key: '5b6ffbcc4d64adbb050c1d195e5e98dc015a20bf', class: "list-padding" }))), h("duet-overlay", { key: '96fde4e8c50d9d655e4f336f9c88ba14e2378069', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/lib/esm/duet-textarea.entry.js

@@ -1,15 +1,15 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-940c081d.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f5d67bb6.js';
 import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
 import { c as createID } from './create-id-149a1b6d.js';
 import { c as cleanValue } from './input-utils-85681162.js';
-import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-b0c1eb01.js';
-import { c as checkNamedSlotElement } from './slot-utils-4a318cb9.js';
+import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-bd643c5c.js';
+import { c as checkNamedSlotElement } from './slot-utils-5369c9ff.js';
 import './string-utils-192eb3c8.js';
 
-const duetTextareaCss = "*,*::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;margin-right:16px !important;margin-bottom:12px !important;display:block;width:100%;max-width:100%;text-align:left}:host:last-child,:host:last-of-type{margin-right:0 !important}@media (min-width: 36em){:host{width:calc(50% - 16px - 3px)}:host.duet-expand{width:100% !important}}:host(.duet-m-0){margin:0 !important}duet-tooltip,::slotted(duet-tooltip){position:absolute;top:12px;right:0}@media (min-width: 48em){duet-tooltip,::slotted(duet-tooltip){position:relative;top:4px;right:auto}}.duet-textarea-container{position:relative;width:100%;height:100%}.duet-textarea-container .duet-input-top-caption{display:none}.duet-textarea-container.duet-input-top-caption-shown .duet-input-top-caption{display:flex !important}.duet-textarea-wrapper{position:relative}.duet-textarea-placeholder{position:absolute;top:-9px;left:9px;z-index:200;display:block;width:auto;max-width:60%;padding:0 0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:rgb(255, 255, 255)}.duet-textarea{padding:15px !important;position:relative;z-index:100;display:block;width:100%;min-width:8rem;min-height:160px;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;font-variant-numeric:tabular-nums;line-height:1.25;color:rgb(8, 42, 77);resize:vertical;background:rgb(255, 255, 255);border:1px solid rgb(127, 150, 165);border-radius:4px;transition:150ms ease}.duet-theme-turva .duet-textarea{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);border-color:rgb(143, 147, 158)}.has-error .duet-textarea{border-color:rgb(214, 28, 82) !important}.duet-theme-turva.has-error .duet-textarea{border-color:rgb(214, 28, 82) !important}.duet-textarea::-webkit-input-placeholder{color:rgb(98, 121, 138);opacity:1 !important;transition:color 300ms ease}.duet-theme-turva .duet-textarea::-webkit-input-placeholder{color:rgb(143, 147, 158)}.duet-textarea:focus::-webkit-input-placeholder{color:rgb(181, 198, 208)}.duet-theme-turva .duet-textarea:focus::-webkit-input-placeholder{color:rgb(199, 202, 207)}.duet-textarea::-moz-placeholder{color:rgb(98, 121, 138);opacity:1 !important}.duet-theme-turva .duet-textarea::-moz-placeholder{color:rgb(143, 147, 158)}.duet-textarea:focus::-moz-placeholder{color:rgb(181, 198, 208)}.duet-theme-turva .duet-textarea:focus::-moz-placeholder{color:rgb(199, 202, 207)}.duet-textarea:-ms-input-placeholder{color:rgb(98, 121, 138)}.duet-theme-turva .duet-textarea:-ms-input-placeholder{color:rgb(143, 147, 158)}.duet-textarea:focus:-ms-input-placeholder{color:rgb(181, 198, 208)}.duet-theme-turva .duet-textarea:focus:-ms-input-placeholder{color:rgb(199, 202, 207)}.duet-textarea[disabled]{color:rgb(98, 121, 138) !important;cursor:not-allowed !important;background:rgb(245, 248, 250) !important;border-color:rgb(245, 248, 250) !important}.duet-theme-turva .duet-textarea[disabled]{color:rgb(143, 147, 158) !important;background:rgb(245, 247, 250) !important;border-color:rgb(245, 247, 250) !important}.duet-textarea[disabled]::-webkit-input-placeholder{color:rgb(8, 42, 77);opacity:1 !important;transition:color 300ms ease}.duet-theme-turva .duet-textarea[disabled]::-webkit-input-placeholder{color:rgb(23, 28, 58)}.duet-textarea[disabled]::-moz-placeholder{color:rgb(8, 42, 77);opacity:1 !important}.duet-theme-turva .duet-textarea[disabled]::-moz-placeholder{color:rgb(23, 28, 58)}.duet-textarea[disabled]:-ms-input-placeholder{color:rgb(8, 42, 77)}.duet-theme-turva .duet-textarea[disabled]:-ms-input-placeholder{color:rgb(23, 28, 58)}.duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #909599}.duet-theme-turva .duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #747475}.has-error .duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error .duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #e55039}.duet-textarea:focus{border-color:rgb(0, 119, 179);outline:0;box-shadow:0 0 0 1px #0077b3 !important;transition:none}.duet-theme-turva .duet-textarea:focus{border-color:rgb(23, 28, 58);box-shadow:0 0 0 1px #171c3a !important}.has-error .duet-textarea:focus{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error .duet-textarea:focus{box-shadow:0 0 0 1px #e55039}.duet-textarea:not(:focus):not(:hover):invalid{box-shadow:none}.duet-textarea-help{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;line-height:1.25}.duet-textarea-help span{display:block;margin-top:8px}.duet-theme-turva .duet-textarea-help{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(143, 147, 158)}.has-error .duet-textarea-help{color:rgb(214, 28, 82)}.duet-theme-turva.has-error .duet-textarea-help{color:rgb(214, 28, 82)}.duet-label-hidden duet-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.duet-character-count{display:block;margin:8px 0 0 auto}";
+const duetTextareaCss = "*.sc-duet-textarea,*.sc-duet-textarea::after,*.sc-duet-textarea::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-textarea-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:16px !important;margin-bottom:12px !important;display:block;width:100%;max-width:100%;text-align:left}.sc-duet-textarea-h:last-child,.sc-duet-textarea-h:last-of-type{margin-right:0 !important}@media (min-width: 36em){.sc-duet-textarea-h{width:calc(50% - 16px - 3px)}.duet-expand.sc-duet-textarea-h{width:100% !important}}.duet-m-0.sc-duet-textarea-h{margin:0 !important}duet-tooltip.sc-duet-textarea,.sc-duet-textarea-s>duet-tooltip{position:absolute;top:12px;right:0}@media (min-width: 48em){duet-tooltip.sc-duet-textarea,.sc-duet-textarea-s>duet-tooltip{position:relative;top:4px;right:auto}}.duet-textarea-container.sc-duet-textarea{position:relative;width:100%;height:100%}.duet-textarea-container.sc-duet-textarea .duet-input-top-caption.sc-duet-textarea{display:none}.duet-textarea-container.duet-input-top-caption-shown.sc-duet-textarea .duet-input-top-caption.sc-duet-textarea{display:flex !important}.duet-textarea-wrapper.sc-duet-textarea{position:relative}.duet-textarea-placeholder.sc-duet-textarea{position:absolute;top:-9px;left:9px;z-index:200;display:block;width:auto;max-width:60%;padding:0 0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:rgb(255, 255, 255)}.duet-textarea.sc-duet-textarea{padding:15px !important;position:relative;z-index:100;display:block;width:100%;min-width:8rem;min-height:160px;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;font-variant-numeric:tabular-nums;line-height:1.25;color:rgb(8, 42, 77);resize:vertical;background:rgb(255, 255, 255);border:1px solid rgb(127, 150, 165);border-radius:4px;transition:150ms ease}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea{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);border-color:rgb(143, 147, 158)}.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea{border-color:rgb(214, 28, 82) !important}.duet-theme-turva.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea{border-color:rgb(214, 28, 82) !important}.duet-textarea.sc-duet-textarea::-webkit-input-placeholder{color:rgb(98, 121, 138);opacity:1 !important;transition:color 300ms ease}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea::-webkit-input-placeholder{color:rgb(143, 147, 158)}.duet-textarea.sc-duet-textarea:focus::-webkit-input-placeholder{color:rgb(181, 198, 208)}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus::-webkit-input-placeholder{color:rgb(199, 202, 207)}.duet-textarea.sc-duet-textarea::-moz-placeholder{color:rgb(98, 121, 138);opacity:1 !important}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea::-moz-placeholder{color:rgb(143, 147, 158)}.duet-textarea.sc-duet-textarea:focus::-moz-placeholder{color:rgb(181, 198, 208)}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus::-moz-placeholder{color:rgb(199, 202, 207)}.duet-textarea.sc-duet-textarea:-ms-input-placeholder{color:rgb(98, 121, 138)}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:-ms-input-placeholder{color:rgb(143, 147, 158)}.duet-textarea.sc-duet-textarea:focus:-ms-input-placeholder{color:rgb(181, 198, 208)}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus:-ms-input-placeholder{color:rgb(199, 202, 207)}.duet-textarea[disabled].sc-duet-textarea{color:rgb(98, 121, 138) !important;cursor:not-allowed !important;background:rgb(245, 248, 250) !important;border-color:rgb(245, 248, 250) !important}.duet-theme-turva.sc-duet-textarea .duet-textarea[disabled].sc-duet-textarea{color:rgb(143, 147, 158) !important;background:rgb(245, 247, 250) !important;border-color:rgb(245, 247, 250) !important}.duet-textarea[disabled].sc-duet-textarea::-webkit-input-placeholder{color:rgb(8, 42, 77);opacity:1 !important;transition:color 300ms ease}.duet-theme-turva.sc-duet-textarea .duet-textarea[disabled].sc-duet-textarea::-webkit-input-placeholder{color:rgb(23, 28, 58)}.duet-textarea[disabled].sc-duet-textarea::-moz-placeholder{color:rgb(8, 42, 77);opacity:1 !important}.duet-theme-turva.sc-duet-textarea .duet-textarea[disabled].sc-duet-textarea::-moz-placeholder{color:rgb(23, 28, 58)}.duet-textarea[disabled].sc-duet-textarea:-ms-input-placeholder{color:rgb(8, 42, 77)}.duet-theme-turva.sc-duet-textarea .duet-textarea[disabled].sc-duet-textarea:-ms-input-placeholder{color:rgb(23, 28, 58)}.duet-textarea.sc-duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #909599}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #747475}.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #e55039}.duet-textarea.sc-duet-textarea:focus{border-color:rgb(0, 119, 179);outline:0;box-shadow:0 0 0 1px #0077b3 !important;transition:none}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus{border-color:rgb(23, 28, 58);box-shadow:0 0 0 1px #171c3a !important}.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus{box-shadow:0 0 0 1px #e55039}.duet-textarea.sc-duet-textarea:not(:focus):not(:hover):invalid{box-shadow:none}.duet-textarea-help.sc-duet-textarea{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;line-height:1.25}.duet-textarea-help.sc-duet-textarea span.sc-duet-textarea{display:block;margin-top:8px}.duet-theme-turva.sc-duet-textarea .duet-textarea-help.sc-duet-textarea{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(143, 147, 158)}.has-error.sc-duet-textarea .duet-textarea-help.sc-duet-textarea{color:rgb(214, 28, 82)}.duet-theme-turva.has-error.sc-duet-textarea .duet-textarea-help.sc-duet-textarea{color:rgb(214, 28, 82)}.duet-label-hidden.sc-duet-textarea duet-label.sc-duet-textarea{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.duet-character-count.sc-duet-textarea{display:block;margin:8px 0 0 auto}";
 const DuetTextareaStyle0 = duetTextareaCss;
 
 const CharacterCount = ({ value, maxlength, label, theme }) => {
@@ -170,17 +170,17 @@ const DuetTextarea = class {
      */
     render() {
         const identifier = this.identifier || this.textareaId;
-        return (h(Host, { key: '6822e915557cb26cc7ef9e11686a3c6ebb68ea47', class: {
+        return (h(Host, { class: {
                 "duet-m-0": this.margin === "none",
                 "duet-has-counter": this.counter && !this.error,
                 "duet-expand": this.expand,
-            } }, h("div", { key: 'bc4115c13d819ace2c3093540184535b8e4a1b92', class: {
+            } }, h("div", { class: {
                 "duet-textarea-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-label-hidden": this.labelHidden,
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            } }, h("duet-label", { key: '9580bdfabe29364106b37d5d96662bd92834b547', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '6561c8b34741071590fbdc1e181e19d27c72f5ac', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '096527c36bf9a86ea5516855968793509041f7f2', name: "tooltip" }), this.caption && (h("duet-caption", { key: '200ff13988a66c86df15d0a4aa2cc5d0933e4e94', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: 'bb6e02a2b4e56a4b1b0b02ba69e57037703f8c1a', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: '5a4e1130618afea793977101bb96aa48b0966a89', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: '8931951754cb4d340020d1b03630d0c5887dcabc', onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { key: '11f6951c2dfa29e83f31ccaeac2f5dc878bc948b', alignment: "stretch" }, h("duet-grid-item", { key: 'e85f9341efb0b3adc42239559525c901b2bafb3f', margin: "none", fill: true }, h("div", { key: '17ac589c05fb30ff82c8e05470ae4af763144b04', class: "duet-textarea-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'daa212a3cc4e868d5b63c0663e0cddb69c46e273' }, this.error))), h("duet-grid-item", { key: '393879358311c8ae3c6cb33d996fc4ea5b918aec', margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { key: 'f201904c256266056855907d84c013a84c3c123c', theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))), this.counter && (h("duet-visually-hidden", { key: '634bed29f451d4d2a03835ebcf228a790cc92d0c', class: "duet-visually-hidden", id: this.characterCountId, ref: el => {
+            } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { name: "tooltip" }), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { alignment: "stretch" }, h("duet-grid-item", { margin: "none", fill: true }, h("div", { class: "duet-textarea-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", null, this.error))), h("duet-grid-item", { margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))), this.counter && (h("duet-visually-hidden", { class: "duet-visually-hidden", id: this.characterCountId, ref: el => {
                 this.hiddenCounterLabel = el;
             } })))));
     }

package/lib/esm/duet-toggle.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-940c081d.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f5d67bb6.js';
 import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
 import { c as createID } from './create-id-149a1b6d.js';
 import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-439bcc8b.js';

package/lib/esm/duet-toolbar-dropdown-link.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-940c081d.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f5d67bb6.js';
 import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
 import { f as isEscapeKey } from './keyboard-utils-439bcc8b.js';
 
@@ -36,11 +36,11 @@ const DuetToolbarDropdownLink = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'a33846447e336d9ba1744b64e256fb6144ecf56d' }, h("a", { key: '8613597d4c4e5de513169f87e426effcf7e1ab68', class: {
+        return (h(Host, { key: 'ca2c386337ef8052184214a47865bc93b192efea' }, h("a", { key: '2601354c27b7ff3858e561585176e040d2bfce25', class: {
                 "duet-toolbar-dropdown-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "link menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: 'e0dc39be130d8cc14a336595098adfec4e2dd74e', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '1dad6713a1f65d274269cdd3475a5e83b6a4ac18', class: "label" }, h("slot", { key: '017e8fe9eec10b313263ba4007c4d10dcef17e8e' })), this.active && (h("duet-icon", { key: '09386e5b6f037069a71777127c4f1b40bf818791', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
+            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "link menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: '0f941114682ef7527bf69e9e5a42ef0d095a1b2b', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: 'f5eac01e244e0cf0bb48229c58076580fea8e5d6', class: "label" }, h("slot", { key: 'afc1ab27f5e67371e52fa2e4da46b453b24ab75c' })), this.active && (h("duet-icon", { key: '041c528108a13b672788bbc254d7d6c0ee362008', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     get element() { return getElement(this); }
 };

package/lib/esm/duet-toolbar-dropdown.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-940c081d.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f5d67bb6.js';
 import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
 import { f as isEscapeKey } from './keyboard-utils-439bcc8b.js';
 
@@ -55,18 +55,18 @@ const DuetToolbarDropdown = class {
             itemsAlign = this.element.parentElement.getAttribute("slot") === "left" ? "right" : "left";
         }
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { key: 'a87f29715ddfbb33697cebfc796d4591cb191fd0', role: "listitem" }, h("div", { key: '54e757dfaaf70e32127e489812c35fca8e28e419', class: {
+        return (h(Host, { key: 'b267de99df676578b5c5879bfc4b33e63f53eb40', role: "listitem" }, h("div", { key: '0f4a971d359bb6b05c6a0de70bd263b48ae42953', class: {
                 "duet-toolbar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 [itemsAlign]: true,
                 [variation]: true,
-            } }, h("button", { key: '99e3e9be8b769b763bcb3efd37545b9d728b8ff5', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, id: "button", type: "button", class: {
+            } }, h("button", { key: '7fe26d57c4e2df698aaf1677171e14999adcee31', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, id: "button", type: "button", class: {
                 active: this.active,
                 open: this.open,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '599a1cd0847b63c55946e5c89f6fc1b4761dcb8a', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: 'fa9597c1dfb9c171a75b6f235ab433d2d4d86f07', class: "label" }, h("slot", { key: '9a262fb001663204c6aece7bdd7971b3f0d44c9e', name: "label" }), h("duet-icon", { key: '85728bfc749f8b5c9e310196d07a7cc587a17285', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '36d0896d802c6c2507e6a06ef3bc099684fefd64', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'a1390f889f23f75052fd5c78915e12ee9e3c8930', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: '7b7b8ad3931cc78a60ae96ebafe19fed542db012', class: "label" }, h("slot", { key: 'fb9211a981fbbada64fd2b86c3583af226ebb626', name: "label" }), h("duet-icon", { key: 'aaf1a322508dee44ff0e60d5bfc68381a568a922', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'd68a0e8ff628d5739efbe9cf3233d94cfa43e26f', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '7bfbe40de83bf7a95b773592d1c7ef0e15610197' })))));
+            } }, h("slot", { key: '2d9b51cf80525f43ca11cc5e4b91dd6308251ad8' })))));
     }
     get element() { return getElement(this); }
 };