@duetds/components 10.0.0-alpha.23 → 10.0.0-alpha.25

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

@@ -1,15 +1,15 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-CUNSbdt4.js';
-import { i as inheritGlobalTheme } from './themeable-component-EVqsr6Ut.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-B_VBeM3r.js';
+import { i as inheritGlobalTheme } from './themeable-component-DPqozkF4.js';
 import { e as enableBodyScroll, d as disableBodyScroll } from './body-scroll-C6CAT054.js';
-import { F as FocusGuard } from './focus-utils-Fb4Hjq5k.js';
-import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './language-utils-fAqNRSrI.js';
-import { h as hasSlot } from './slot-utils-CgXzS75x.js';
-import { g as getColorByName } from './token-utils-orOLyKQw.js';
+import { F as FocusGuard } from './focus-utils-vvgYykmM.js';
+import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './language-utils-B7PXWqpg.js';
+import { h as hasSlot } from './slot-utils-aDCRCdc4.js';
+import { g as getColorByName } from './token-utils-BGFYWQ6j.js';
 import './string-utils-C6E9F6QT.js';
-import './tokens.module-D5_4M8f7.js';
+import './tokens.module-Z0D6Gy9e.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 .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)}:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .link{color:#172a3b}:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .link.active .label-text::after{background:#e61740}:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .top{background:#fdf7f2}:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .sticky-header{background:#fdf7f2;border-bottom-color:#fbe1d1}:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .top span{color:#172a3b}:host(.duet-theme-turva2) slot:not([name=label]){color:#172a3b}";
 
@@ -179,23 +179,23 @@ const DuetSlideoutPanel = class {
         };
         const exitTranslation = getLocaleString(this.exitLangObject);
         const backTranslation = getLocaleString(this.backLangObject);
-        return (h(Host, { key: '208d06d308cceae8badccee87b8f987af9e8a586' }, h("div", { key: '624d7fa921259830c89826b4c6c0b30e3eb27b41', class: {
+        return (h(Host, { key: '942391bf280f263cbbb12ff47d5e19e64677ce59' }, h("div", { key: '5150a8a4f51a6518de50432847b7a4be7f52a8f7', class: {
                 "duet-slideout-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: 'dc0c6951d440a1adee04255b549b89337aa5d281', 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: '2fa4949a7380687952d41bec65b982162f4b1369', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 link: true,
                 active: this.active,
-            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: '47efb3dc8f6573a64e346d353359e92869dfc477', class: "duet-slideout-icon" }, h("duet-icon", { key: 'dfa1855c686bf91b83b2e055a045754b75c9957a', name: this.icon, size: "medium", margin: "none", color: "secondary" }), this.badge && h("div", { key: '8e0214e0e0b2632c01e1f233c4e8eb837a8d7041', class: "duet-slideout-badge" }))), h("span", { key: '09c5abd8d0d301ca8d021ad745ee002876089dd6', class: "label" }, h("span", { key: 'eb8785eef7c53243c4bbb8549d9ae9e0cdd1de8a', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '68e75e13229b942fd51d926f48918fe915245c7b', name: "label" })), h("duet-icon", { key: '36d501c6bce753e38dcf02235689daf4a3896cea', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: '7468977adc8c24bd88a5d841773717307f40fbf1', ref: element => (this.dialog = element), class: {
+            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: '239abf831224e505471d4faa690c4fb9eec39657', class: "duet-slideout-icon" }, h("duet-icon", { key: '91d352ae3154e830d2ea6e07be749a301f959dd7', name: this.icon, size: "medium", margin: "none", color: "secondary" }), this.badge && h("div", { key: '048f8d6339aa0fac808cb8539aec7fc39dc69e22', class: "duet-slideout-badge" }))), h("span", { key: '78c8194b03f576175deb05836ee62db4909ff2ae', class: "label" }, h("span", { key: '698881982e56840d20105c0859d433f057d0e8c2', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '52990bf8fd3f928746ee83d5b84570ca6324b2bd', name: "label" })), h("duet-icon", { key: '8b11c870487c41351035fd29a0379ff022f86676', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: '420fc600c08d2636b7ee91ef2378cd073822ffc7', ref: element => (this.dialog = element), class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, h(FocusGuard, { key: '9df5a8476ea7e2e35bc35097bf7aab947970d953', moveFocusTo: this.closeButton }), h("div", { key: '307c3d6ccbda087ce9e8c6124a903a0f72b9af6e', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '8d36ece2aca2e288eaa2baed60d09afbe75de3bf', class: "top" }, h("button", { key: 'cc376ff0cd998db0f3c584de2624f9d194095d54', 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: '53c5dd886930895a4b98a215d12c26a1da4e33c0', moveFocusTo: this.closeButton }), h("div", { key: '4be2ad3519e0e43f9bdf7d9db5cfab397f5a2f48', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'e10cd953dccb8a456545bc58e374e53361016759', class: "top" }, h("button", { key: '0fdc986a24b858871aebe4431fc5a02ee73d42bf', 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: '8b4a7f002f4c1599307d18301fc9fa9c682bc793', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '0a59bbd42444bcedb602186a24f1153d7aa410d4' }, this.label.innerHTML), h("button", { key: 'dc02d282b3fd0323dcc53327099c25b3b66b97bb', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '37ab5d135e0705cf974eb96cb41dd32b6502744d', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '71709db6d00f94c082702a4732bdf6f89b1585fa', class: "sticky-header" }, h("slot", { key: '098d926ab99543db6615206d528226d843361e45', name: "sticky-header" }))), h("div", { key: 'be03b7b9db4e97b2f9fb384854dbbe3310c4fdba', tabindex: "-1", role: "menu",
+            }, onClick: this.onClick }, h("duet-icon", { key: '40b07857257d0e150e40cd506c53ee743d1323fa', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: 'f1c04199ddd3f93c079edea3666879483e003c9e' }, this.label.innerHTML), h("button", { key: 'fe8dafe02a327c652b4815013aeae50ab2ffa40d', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: 'aa9cdab26dfe54f286a9586716285b7400d78ea3', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'c046cb5cef75c8932a338db3a4e7056f489c3bd4', class: "sticky-header" }, h("slot", { key: '08fe11beec9d0a01519ca21a00cc11298c17facb', name: "sticky-header" }))), h("div", { key: '34b482569c730fe07ec6b4899f7d8fb0b371190c', tabindex: "-1", role: "menu",
             //TODO: slideout menu fades out, needs to be instant
             id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, h("slot", { key: '3d4041d108cfd7ca9e6cd4f46cef7135eb485280' })), h(FocusGuard, { key: '5575c5b64b5aca6694b69b4d0e1afbc3f2842332', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: '2b87c3b4d7ab96fe8b069d023e7b07f27910cf07' })), h(FocusGuard, { key: '158e38e0df98000f097952a14da74a4195b4515b', moveFocusTo: this.closeButton })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,17 +1,17 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CUNSbdt4.js';
-import { i as inheritGlobalTheme } from './themeable-component-EVqsr6Ut.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-B_VBeM3r.js';
+import { i as inheritGlobalTheme } from './themeable-component-DPqozkF4.js';
 import { e as enableBodyScroll, d as disableBodyScroll } from './body-scroll-C6CAT054.js';
-import { f as focusElement, F as FocusGuard } from './focus-utils-Fb4Hjq5k.js';
+import { f as focusElement, F as FocusGuard } from './focus-utils-vvgYykmM.js';
 import { a as isEscapeKey } from './keyboard-utils-Db8rvjPI.js';
-import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './language-utils-fAqNRSrI.js';
-import { h as hasSlot } from './slot-utils-CgXzS75x.js';
+import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './language-utils-B7PXWqpg.js';
+import { h as hasSlot } from './slot-utils-aDCRCdc4.js';
 import { T as Teleport } from './teleport-CooAqTCj.js';
-import { g as getColorByName } from './token-utils-orOLyKQw.js';
+import { g as getColorByName } from './token-utils-BGFYWQ6j.js';
 import './string-utils-C6E9F6QT.js';
-import './tokens.module-D5_4M8f7.js';
+import './tokens.module-Z0D6Gy9e.js';
 
 const duetSlideoutCss = "*,*::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;position:absolute;height:100%}::slotted(*){position:relative;width:100%;visibility:hidden;opacity:0}:host([open]:not([open=false])) ::slotted(*){visibility:visible;opacity:1}:host(:not([open])) ::slotted(duet-slideout-panel){display:none}.duet-slideout{display:flex;align-items:center;height:100%;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.5;color:rgb(8, 42, 77)}.duet-slideout.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)}@media (min-width: 62em){.duet-slideout.duet-theme-turva .desktop-bg{background:rgb(23, 28, 58)}}.duet-slideout .dialog{position:fixed;top:0;bottom:0;left:0;z-index:600;width:100%;height:100%;padding-bottom:75px;overflow-y:auto;box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1) inset}.duet-slideout .dialog:not(.modal){box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.2)}@media (min-width: 62em){.duet-slideout .dialog{right:0;left:auto;width:500px;padding-bottom:0;transition:right 300ms ease;transition-delay:0s}}.duet-slideout .dialog .top-container.has-sticky-header-slot{position:sticky;top:0;z-index:200}.duet-slideout .dialog .top-container.has-sticky-header-slot .top{background:rgb(240, 247, 250)}.duet-slideout .dialog .top-container.has-sticky-header-slot .sticky-header{display:block}.duet-slideout .dialog .top{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end;padding:4px}.duet-slideout .dialog .top button{cursor:pointer}.duet-slideout .dialog .top button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout .dialog .top duet-icon{padding:16px}.duet-slideout .dialog .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 .dialog .items{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;padding:0 1.5rem}.duet-slideout .dialog.hidden{pointer-events:none;visibility:hidden}@media (min-width: 62em){.duet-slideout .dialog.hidden{right:-500px;transition:300ms ease}}.duet-slideout.duet-theme-turva .dialog{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1) inset}.duet-slideout.duet-theme-turva .dialog:not(.modal){box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.2)}.duet-slideout.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.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout.duet-theme-turva button.active{color:rgb(198, 12, 48)}.duet-slideout.duet-theme-turva button.active::after{background:rgb(198, 12, 48)}.duet-slideout.duet-theme-turva .has-sticky-header-slot .top{background:rgb(245, 247, 250)}.duet-slideout.duet-theme-turva .has-sticky-header-slot .sticky-header{background:rgb(245, 247, 250);border-bottom:1px solid rgb(222, 224, 228)}.duet-slideout.duet-theme-turva .dialog .top button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}slot{color:rgb(8, 42, 77)}.duet-theme-turva slot{color:rgb(23, 28, 58)}:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva{color:#172a3b}@media (min-width: 62em){:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .desktop-bg{background:#172a3b}}:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button{color:#172a3b}:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button.active{color:#e61740}:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button.active::after{background:#e61740}:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .has-sticky-header-slot .top{background:#fdf7f2}:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .has-sticky-header-slot .sticky-header{background:#fdf7f2;border-bottom-color:#fbe1d1}:host(.duet-theme-turva2) slot{color:#172a3b}";
 
@@ -295,16 +295,16 @@ const DuetSlideout = class {
         };
         const topLevelOpenMenuBarTranslation = getLocaleString(this.topLevelOpenMenuBarLangObject);
         const exitTranslation = getLocaleString(this.exitLangObject);
-        return (h(Host, { key: 'd5fc5379a48de292b10c704161a4992c10eedf48' }, h("div", { key: 'd8b63e68d03786884a34dd8df9d7d03bc0c4554d', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: '073ac973858525fbb37d68e5528b552684000c81', visible: this.open, "display-device": "large", zIndex: "600" }), h("div", { key: 'ded136e561639dba54984936537c8359da325df0', 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: '80fe71cba1f67117359472cbc3d59ec80910cca2' }, h("div", { key: 'b4611be3d11b74e906804f32fa54f09ef03c9319', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: '72729044a85b3915f914f9b37efc503601681aed', visible: this.open, "display-device": "large", zIndex: "600" }), h("div", { key: 'dd793703df1c6412ba02021f6ee26232180db120', ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "slot-container", class: {
                 dialog: true,
                 hidden: !this.open,
                 modal: this.modal,
-            }, style: styles }, h(FocusGuard, { key: '86ee0669e0c080a053b332368b3bfba35b30cc8c', moveFocusTo: this.closeButton }), h("div", { key: '50b95210bd617e9807e8f94f7bc9c96f9ea6a8ff', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '0c61ffe50dc9abb4ca5e59d78c069de25d05f90e', class: "top" }, h("button", { key: '7db284cfc9e1decf6d592882710761227519dd93', 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: '7217cb29c43fcab1a4d7a0ab2bc25516d5a3db86', moveFocusTo: this.closeButton }), h("div", { key: 'f660e3d4126342062aeef72abb440bfd8c638b26', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '05ed9fae1dd41c76c8af9e31ec907cc58f83d3d5', class: "top" }, h("button", { key: '65d0a9c2feb22186f337961c6967021d9dbc97f4', ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
                 "slideout-close": true,
                 active: this.open,
-            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: '83fa3337162f14e0f8126ea981972776de18f186', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '4e73db5953ed25c6eb57f150dc911304420222e3', class: "sticky-header" }, h("slot", { key: '430f0f35f35e9df8952e7f5cfdabad4cfb4f94dc', name: "sticky-header" }))), h("div", { key: '5b5e438600a0d2cd85fe041bfd84d1bbcd54d716', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
+            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: 'db5c0e81b4fdb700e9cd790249abcc7be8ddb93d', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '3056bf2ec202421d6314e9bbec1176990dac8d7d', class: "sticky-header" }, h("slot", { key: 'c9c7e39ec4d453a110ad37ba6e273bcb50cfe8a8', name: "sticky-header" }))), h("div", { key: 'a051d32697cb79fdf3dddcc5c28c5f6e1e11afb3', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
                 items: true,
-            } }, h("slot", { key: '0e7ab1f88b776f8b477b7f115c83472f0d5fae10' })), h(FocusGuard, { key: '4294b263eede7fa45c6828f3ba486a56a9ce1564', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: 'b552c7adcb64a48b13ae808a26037b0c6ba34021' })), h(FocusGuard, { key: 'eb6637a6a2c879f6bcab0f798f8f13639d2fdc68', moveFocusTo: this.closeButton })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,8 +1,8 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host } from './index-CUNSbdt4.js';
-import { t as tokens } from './tokens-Dvk6bntS.js';
+import { r as registerInstance, h, H as Host } from './index-B_VBeM3r.js';
+import { t as tokens } from './tokens-DxV3RbmM.js';
 
 const DuetStatusIcon = class {
     constructor(hostRef) {
@@ -87,10 +87,10 @@ const DuetStatusIcon = class {
         }
     }
     render() {
-        return (h(Host, { key: 'eb6af948b50fbd878216feefdb5c7f243f2203fd', class: {
+        return (h(Host, { key: 'd35995f352a518b4933f82071bba491062afa0e6', class: {
                 [`duet-status-icon-${this.getVariation()}`]: true,
                 "duet-strong-bg": this.strong,
-            } }, h("duet-icon", { key: 'a324d35c8222930c6d66f1c6103e1db939a702ec', icon: this.getIcon(), size: this.size, margin: this.margin })));
+            } }, h("duet-icon", { key: '67a2d52e3cc7e6d2685de643130654f8031f643a', icon: this.getIcon(), size: this.size, margin: this.margin })));
     }
 };
 

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

@@ -1,13 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-CUNSbdt4.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-B_VBeM3r.js';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-DvwKrUS6.js';
-import { i as inheritGlobalTheme } from './themeable-component-EVqsr6Ut.js';
+import { i as inheritGlobalTheme } from './themeable-component-DPqozkF4.js';
 import { c as createID } from './create-id-Cfr_DJqU.js';
 import { i as isKeyboardClick, s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-Db8rvjPI.js';
 import { c as DuetStringsListStepOfTotal } from './common-strings-MxsWrBCY.js';
-import { a as getLanguage, g as getLocaleString } from './language-utils-fAqNRSrI.js';
+import { a as getLanguage, g as getLocaleString } from './language-utils-B7PXWqpg.js';
 import './string-utils-C6E9F6QT.js';
 
 var actionEdit2;
@@ -110,13 +110,13 @@ const DuetStep = class {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: '51c999cc2bfbe71e0e093319dd9884cc8294885e', class: {
+        return (h("div", { key: '3204237f7f65d0f7e40d171da59beae2438d0b73', class: {
                 "duet-step": true,
                 [`is-${this.state}`]: true,
                 "rounded-top": this.roundedTop,
                 "rounded-bottom": this.roundedBottom,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("div", { key: '7e37c18c314a018c3d2fd006b5dc7062adc258ab', class: "duet-step-heading", id: this.buttonId, role: this.state !== "current" ? "button" : "region", "aria-current": this.state === "current" ? "step" : undefined, tabindex: this.state !== "current" ? "0" : undefined, "aria-disabled": this.isClickDisabled().toString(), "aria-expanded": (this.state === "current").toString(), "aria-controls": this.contentId, "aria-selected": (this.state === "current").toString(), onClick: this.handleClick, onKeyDown: this.handleKeyDown, ref: element => (this.buttonElement = element) }, h("div", { key: '5406b207399c19b7eb27f546d4f9e630ab562f27', "aria-hidden": "true" }, h("div", { key: '9a764a847bfbfc0c7d8263caf09c2f8ec4f1e2e2', class: "duet-step-counter" }, this.renderStepCounter())), h("duet-spacer", { key: 'd5c38b329d444e0ce41b7d7ef10a7abdc112fc9f', direction: "horizontal", size: "large", breakpoint: "small" }), h("duet-spacer", { key: 'd8df9b84045f0781d4e107cf4e60204ccee742f4', direction: "horizontal", size: "medium", breakpoint: "x-small" }), h("div", { key: 'df49bf9c100c15f9a1a577967d0d08ac73b9a0e5' }, h("duet-heading", { key: 'deb97c522056fc06be50fafa711ab24fb36b1df8', theme: this.theme, level: this.headingLevel, visualLevel: "h4", color: this.headingColor(), margin: "none" }, this.heading)), h("duet-spacer", { key: 'fa5b363beee40f23f4257aac9979abfa6f5360c5', direction: "horizontal", size: "large" }), h("div", { key: '8c98357c0e10aad337d9aa76c579a8391ecc51f1', class: "duet-step-heading-slot" }, h("slot", { key: '6220e94dd9fc54bf637b0a23ba11e60f5c9b106b', name: "heading-content" }))), h("div", { key: 'c00269d7e1225fe5272bcd99e2fb2e2d6c227fb1', class: "duet-step-content-wrapper" }, h("div", { key: '9251329e1b7f1f8b93fdea50c8d2e8c609d94692', class: "duet-step-content", role: "region", "aria-labelledby": this.buttonId, id: this.contentId }, h("slot", { key: '0f89cd5aded7f098c5ec935893a8e1f969aef217' })))));
+            } }, h("div", { key: '144dc2c4f67e3ab88437ba11dbe665d8d938e998', class: "duet-step-heading", id: this.buttonId, role: this.state !== "current" ? "button" : "region", "aria-current": this.state === "current" ? "step" : undefined, tabindex: this.state !== "current" ? "0" : undefined, "aria-disabled": this.isClickDisabled().toString(), "aria-expanded": (this.state === "current").toString(), "aria-controls": this.contentId, "aria-selected": (this.state === "current").toString(), onClick: this.handleClick, onKeyDown: this.handleKeyDown, ref: element => (this.buttonElement = element) }, h("div", { key: '3a16cbf1b403adb015eafda7d8768e17eae7fb40', "aria-hidden": "true" }, h("div", { key: '8ee2d9f18fcef2d1cdb2ad43cf8a41c5615b4765', class: "duet-step-counter" }, this.renderStepCounter())), h("duet-spacer", { key: '0dd226292f09ae93ba5ca9bde08511982771fe15', direction: "horizontal", size: "large", breakpoint: "small" }), h("duet-spacer", { key: 'd2fea319dfc6db59b1aaba216a913c3a8e9e81e8', direction: "horizontal", size: "medium", breakpoint: "x-small" }), h("div", { key: '7c3dee5bf9df62db35cbe5896551062c482d8b3e' }, h("duet-heading", { key: '27d4325d36f4f0621af0bf633fe3de821822d4bc', theme: this.theme, level: this.headingLevel, visualLevel: "h4", color: this.headingColor(), margin: "none" }, this.heading)), h("duet-spacer", { key: 'f0e367883df25339d1882ebe17ff56c3555d4cd1', direction: "horizontal", size: "large" }), h("div", { key: 'f4313eed84ca3fe24272ce59a59b711169c4c0a8', class: "duet-step-heading-slot" }, h("slot", { key: 'a06a67c70d672288b7ef3f76149561fe5200ed99', name: "heading-content" }))), h("div", { key: '62b81bf1127a74bd5fb1cec4b0aa1e9c706d2038', class: "duet-step-content-wrapper" }, h("div", { key: 'c46f37355b38f10b1dc182108cae7f444025246d', class: "duet-step-content", role: "region", "aria-labelledby": this.buttonId, id: this.contentId }, h("slot", { key: 'f08a916f605a7227add9fdb0bd4f6ede0719ec02' })))));
     }
     get element() { return getElement(this); }
 };
@@ -250,7 +250,7 @@ const DuetStepper = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '4d38266a77dcb5167b2d11ccd4e82b41e573d62d', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '049c574172078399ca78a1dd505a059e7d74c1f9', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-visually-hidden", { key: 'dd2e9bacc643f4d6240283d698daad1298a21d6e', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), h("slot", { key: 'a7e33500cf5429b00297b489cdcebb4048e6e639' }))));
+        return (h(Host, { key: 'f135a9f1ddcc6eaa86acdcdc9d11def0ec489b81', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'd68ff41042b6582c21d555e3131054278e9eaf1f', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-visually-hidden", { key: '21d8af2f8896f0e5f893f041a2f3010ada1e74c9', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), h("slot", { key: 'efe281a3ddce9364e69c5131e7e59e3a9c2bb9d5' }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,8 +1,8 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-CUNSbdt4.js';
-import { i as inheritGlobalTheme } from './themeable-component-EVqsr6Ut.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-B_VBeM3r.js';
+import { i as inheritGlobalTheme } from './themeable-component-DPqozkF4.js';
 import { a as isEscapeKey } from './keyboard-utils-Db8rvjPI.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)}:host(.duet-theme-turva2) .duet-submenu-bar-dropdown-link.duet-theme-turva{color:#172a3b}:host(.duet-theme-turva2) .duet-submenu-bar-dropdown-link.duet-theme-turva.active .label::after{background:#e61740}@media (min-width: 62em){:host(.duet-theme-turva2) .duet-submenu-bar-dropdown-link.duet-theme-turva.active{background:#fdf7f2}:host(.duet-theme-turva2) .duet-submenu-bar-dropdown-link.duet-theme-turva:hover{background:#fbe1d1}}:host(.duet-theme-turva2) .duet-submenu-bar-dropdown-link.duet-theme-turva.highlight{color:#e61740}";
@@ -53,12 +53,12 @@ const DuetSubmenuBarDropdownLink = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'ff17969810ff0efd802cd40a470eddd5cf5ce664' }, h("a", { key: '44cb6e7b1ddb3b06a040c47d34998b33edac6e12', class: {
+        return (h(Host, { key: '634468684f5ca0645aca55e4755a6f778d4aeaf1' }, h("a", { key: 'df84408330d4e171054f96de10b761d9c6435800', 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: '999a7318c45c1b3176deb765f2ae79f816c25f5b', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: '6d74ce19c84c90b80d49f4cef448cabd0ebba06d', class: "label-container" }, h("span", { key: 'c26cb88edb1de57b6b9ef13f0ac670e0c1322c6f', class: "label" }, h("slot", { key: '0da363ccfe555f038595fcf839314dc9c8d872fb' })), this.caret && h("duet-icon", { key: '6e504d4e424b5090ce1723692ff7ba98984187d4', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: '4d915feaeac953d36cfa6db883004988882ed80b', 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: '70f8d741e10aaf9e6492e47b3bf2ffe2d488b0dc', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: '9ec616e8c8b512f0731e90441bf1d20b485f503a', class: "label-container" }, h("span", { key: '41825ec964adb07f1d6262d995de497b5bf597c8', class: "label" }, h("slot", { key: '16e2e05e0662ee3cbb59ee5ceb371b57b2b3ddcd' })), this.caret && h("duet-icon", { key: '97aa221937f2099cd478aad6745d8b1fc93fdb22', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: '1b281ba9300b07c9b8e15688b7383e27195b1ce2', 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,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-CUNSbdt4.js';
-import { a as media_query_large } from './tokens-Dvk6bntS.js';
-import { i as inheritGlobalTheme } from './themeable-component-EVqsr6Ut.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-B_VBeM3r.js';
+import { a as media_query_large } from './tokens-DxV3RbmM.js';
+import { i as inheritGlobalTheme } from './themeable-component-DPqozkF4.js';
 import { a as isEscapeKey } from './keyboard-utils-Db8rvjPI.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)}}:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button{color:#172a3b}@media (min-width: 62em){:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button:hover{background:#fbe1d1}}:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.active .label-text::after,:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.open .label-text::after{background:#e61740}@media (min-width: 62em){:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.active,:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.open{color:#8c001e}:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.active::after,:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.open::after{background:#e61740}:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.open{background:#fbe1d1}}@media (min-width: 62em){:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva .items{background:rgb(255, 255, 255)}}";
@@ -112,18 +112,18 @@ const DuetSubmenuBarDropdown = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '62e8ee60527fca31b67bb5fb4180e976c8b48cc5', role: "listitem" }, h("div", { key: 'a8d967a107a23c881e979871edbf42bfa0dbfc34', class: {
+        return (h(Host, { key: '0cb9c03f321c7ff444123e06bee1017a69786c76', role: "listitem" }, h("div", { key: '7a69b5c2e3d9f7f6737931fd98d0626ecb23dcb5', class: {
                 "duet-submenu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 open: this.open,
                 active: this.active,
-            } }, h("button", { key: '3fb42320d98d44ffe084d7f6f299347e9ea3bd0c', 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: 'cb47f2b220eccb921a6fb2b6d9372cab734dcf9f', 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: '85ce37d4b8daaa5cffb34f92d892c69f5e963399', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '174e797f25e032d96a64eab8afb70d514797539e', class: "label" }, h("span", { key: '6a7f47fa96cd8f8de07dc190a62233cd705fffaf', class: "label-text" }, h("slot", { key: 'bfce9d17ca1f2c1d92db1254f73610a1ceb13629', name: "label" })), h("duet-icon", { key: '8084ee1526d622c08cb74dd9f3b2b124b659fc1c', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '44bbee60f8400f10d0c5dfb1df25f92469076a77', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '0777f325a3186cfb4a20c0d71fa3bbcc0ee752b5', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'db5cabb7d09304cd2bd9eba231ed5c3d0453131b', class: "label" }, h("span", { key: '33760c3388e525ca78442660bcba3712bb1a0b91', class: "label-text" }, h("slot", { key: '557457c4d150285a804a861755393b2ead85eb29', name: "label" })), h("duet-icon", { key: '0632a6cb7801c25f3ddec7c36744ed1def3d2d42', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '22f16e71f250d490bf1fca22119b5422ea519021', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'c4097fc8d66ce971ca3b6c69b7d770c0cf81bacb' })))));
+            } }, h("slot", { key: '63e09b29477fe83753399f2934115780169deb5c' })))));
     }
     get element() { return getElement(this); }
 };

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

@@ -1,15 +1,15 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-CUNSbdt4.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-B_VBeM3r.js';
 import { n as newWindowIcon } from './action-new-window-small-EH8_HdAm.js';
 import { D as DuetStringsExternalDefaults } from './common-strings-MxsWrBCY.js';
-import { i as inheritGlobalTheme } from './themeable-component-EVqsr6Ut.js';
-import { g as getAccessibleLinkLabel } from './a11y-utils-Do8wJ0uc.js';
+import { i as inheritGlobalTheme } from './themeable-component-DPqozkF4.js';
+import { g as getAccessibleLinkLabel } from './a11y-utils-CXqm1pj1.js';
 import { a as isEscapeKey } from './keyboard-utils-Db8rvjPI.js';
-import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-fAqNRSrI.js';
+import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-B7PXWqpg.js';
 import './_commonjsHelpers-DvwKrUS6.js';
-import './slot-utils-CgXzS75x.js';
+import './slot-utils-aDCRCdc4.js';
 import './string-utils-C6E9F6QT.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)}:host(.duet-theme-turva2) .duet-submenu-bar-item.duet-theme-turva{color:#172a3b}:host(.duet-theme-turva2) .duet-submenu-bar-item.active.duet-theme-turva{color:#e61740}:host(.duet-theme-turva2) .duet-submenu-bar-item.duet-theme-turva.active .label::after{background:#e61740}:host(.duet-theme-turva2) .duet-submenu-bar-item.duet-theme-turva.active::after{background:#e61740}:host(.duet-theme-turva2) .duet-submenu-bar-item.duet-theme-turva:hover{color:#172a3b;background:#fbe1d1}:host(.duet-theme-turva2) .duet-submenu-bar-item.duet-theme-turva:hover.active{color:#e61740}";
@@ -87,7 +87,7 @@ const DuetSubmenuBarItem = class {
     render() {
         const TagName = this.url ? "a" : "button";
         const role = this.url ? "link" : "button";
-        return (h(Host, { key: 'af1f7e0173b01ce4a424fd3a4e2046cb97cebb29', role: "listitem" }, h(TagName, { key: '90ecc87e3554d17b542b524ae37f84d5b200b289', 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: '2ee4d9d2bdcc49a6815855c90da639bab3ae0447', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'ca64d159776bfc730ac79adaa537fa1a6ff49ff2', class: "label" }, h("span", { key: 'fa0e2a2005f20429288677bfe7607498387b2d81', class: "label-text" }, h("slot", { key: '28bead2467fae4092918a95c59a68e2708ae377f' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: '3a8d61e7967f7877461a38e6820d9eac656b6baf', class: {
+        return (h(Host, { key: 'bc1b76eff2619e0f79a21c0d8bef3efb622a4f75', role: "listitem" }, h(TagName, { key: 'ecb396d50b5964ca911a4bcc01dfbbd2235554f0', 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: '64e157f0aad997e6f8f20c8f61be5a9f6cb1ba7d', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'd51db5d687d360dc8d82c704407c35d2b7878193', class: "label" }, h("span", { key: '067121784839bea1c72167d2b8bcb6869620b69a', class: "label-text" }, h("slot", { key: 'd080c716b2c29ad39aa4e377d298d2fc340162b6' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: 'd749eeeb21d1491c418db9469b2b7bde9ddf1014', 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,8 +1,8 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-CUNSbdt4.js';
-import { i as inheritGlobalTheme } from './themeable-component-EVqsr6Ut.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-B_VBeM3r.js';
+import { i as inheritGlobalTheme } from './themeable-component-DPqozkF4.js';
 import { a as isEscapeKey } from './keyboard-utils-Db8rvjPI.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)}}:host(.duet-theme-turva2) .duet-submenu-bar-link.duet-theme-turva{color:#172a3b}:host(.duet-theme-turva2) .duet-submenu-bar-link.duet-theme-turva.active .label::after{background:#e61740}:host(.duet-theme-turva2) .duet-submenu-bar-link.duet-theme-turva.active::after{background:#e61740}@media (min-width: 62em){:host(.duet-theme-turva2) .duet-submenu-bar-link.duet-theme-turva.active{color:#e61740}:host(.duet-theme-turva2) .duet-submenu-bar-link.duet-theme-turva:hover{color:#172a3b;background:#fbe1d1}:host(.duet-theme-turva2) .duet-submenu-bar-link.duet-theme-turva:hover.active{color:#e61740}}";
@@ -45,7 +45,7 @@ const DuetSubmenuBarLink = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '6385795614eb1364c0fa60bdc75e6e360f076720', role: "listitem" }, h("a", { key: '53844d47a9a8590b6fc6f4ebc321307da9950de5', 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: '781cfe0cabb4d0ebf15e768217e085fe42c49f7d', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: 'a469317232bf609fb8fe855e78fadda444514dff', class: "label" }, h("slot", { key: '55f29b27e0d380b9b4596e8e56796dc96df3520a' })))));
+        return (h(Host, { key: '1690f55f331c933f9fb468a34dacd7ca59b4a6ec', role: "listitem" }, h("a", { key: 'bef17a08ede70f41666795b66295bde08809e350', 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: 'b7cbc5a4b7747f3b151eded40adaa568a58abb56', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: '7351aeba73af6d8f8606662ee3bc100dc4f8c513', class: "label" }, h("slot", { key: 'c56efc7a7ac3d5afeea81444f1c7ec0db3a6ce68' })))));
     }
     get element() { return getElement(this); }
 };

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

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-CUNSbdt4.js';
-import { a as media_query_large } from './tokens-Dvk6bntS.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-B_VBeM3r.js';
+import { a as media_query_large } from './tokens-DxV3RbmM.js';
 import { e as enableBodyScroll, d as disableBodyScroll } from './bodyScrollLock.es6-B1B-PPrh.js';
-import { i as inheritGlobalTheme } from './themeable-component-EVqsr6Ut.js';
+import { i as inheritGlobalTheme } from './themeable-component-DPqozkF4.js';
 
 const duetSubmenuBarCss = "*,*::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%}:host(:not([open])) ::slotted(duet-submenu-bar-dropdown){display:none}@media (min-width: 62em){:host(:not([open])) ::slotted(duet-submenu-bar-dropdown){display:inherit}}.duet-submenu-bar{position:relative;top:0;z-index:1;background:rgb(240, 247, 250);transition:top 0.4s}.duet-submenu-bar.hidden{top:-200px}@media (min-width: 62em){.duet-submenu-bar{border-bottom:1px solid rgb(198, 225, 238)}}.duet-submenu-bar button{display:flex;align-items:center;justify-content:center;width:100%;padding:12px 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:0.875rem;font-weight:400;line-height:1.25;color:rgb(8, 42, 77)}.duet-submenu-bar button.active .caret{transform:rotate(180deg)}.duet-submenu-bar button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-submenu-bar button .label{position:relative;display:flex;gap:8px;align-items:center;justify-content:center}@media (min-width: 62em){.duet-submenu-bar button{display:none}}.duet-submenu-bar .menu-container{position:absolute;z-index:399;width:100%}.duet-submenu-bar .menu-container.hidden{max-height:0;overflow:hidden;visibility:hidden}@media (min-width: 62em){.duet-submenu-bar .menu-container,.duet-submenu-bar .menu-container.hidden{position:static;z-index:auto;max-height:unset;overflow:visible;visibility:visible}}.duet-submenu-bar .items{width:100%;height:70vh;overflow-y:scroll;visibility:visible;background:rgb(240, 247, 250);border-bottom:1px solid rgb(181, 198, 208)}.duet-submenu-bar .items ::slotted(*){position:relative}.duet-submenu-bar .items.hidden{max-height:0;overflow:hidden;visibility:hidden;border-bottom:0 solid rgb(181, 198, 208)}.duet-submenu-bar .items .list-padding{padding-bottom:188px}@media (min-width: 62em){.duet-submenu-bar .items .list{display:flex;align-items:center;justify-content:space-between;height:100%}.duet-submenu-bar .items,.duet-submenu-bar .items.hidden{position:static;z-index:auto;display:flex;flex-direction:row;align-items:center;justify-content:center;height:auto;max-height:unset;overflow:visible;visibility:visible;border:0}.duet-submenu-bar .items .list-padding{display:none;padding-bottom:0}}.duet-submenu-bar.duet-theme-turva{background:rgb(245, 247, 250);border-bottom:1px solid rgb(222, 224, 228)}.duet-submenu-bar.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.duet-theme-turva .items{background:rgb(245, 247, 250)}.duet-submenu-bar.duet-theme-turva .mobile-background{background:rgb(23, 28, 58)}.duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow{box-shadow:0 2px 6px 0 rgba(23, 28, 58, 0.07)}@media (min-width: 62em){.duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1)}}:host(.duet-theme-turva2) .duet-submenu-bar.duet-theme-turva{background:#fdf7f2;border-bottom-color:#fbe1d1}:host(.duet-theme-turva2) .duet-submenu-bar.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}:host(.duet-theme-turva2) .duet-submenu-bar.duet-theme-turva .items{background:#fdf7f2}:host(.duet-theme-turva2) .duet-submenu-bar.duet-theme-turva .mobile-background{background:#172a3b}";
 
@@ -135,19 +135,19 @@ const DuetSubmenuBar = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '4168219d0fe411adc8a2724264857eb821462b2c' }, h("nav", { key: '28849777bb981dd7abcfc328e128743f2ff1af00', class: {
+        return (h(Host, { key: '3e7b02904bbbba59c39e6ab92da7f5c57725da8b' }, h("nav", { key: '2dc04f3533701d9c21afd7c15756f27ecb58441f', class: {
                 "duet-submenu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 hidden: this.hidden,
-            }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { key: 'bc56004de410ba4d11bce1f34eee2382c6535bc0', 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: '839b1d9944d8c6c3bfaf329a682d91657066ec2f', 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: 'b43ce3728724890ea8f0d22caedcb72479da7b2b', class: "label" }, h("slot", { key: '0956d1602781fce7c49edc3279e01337eabf896d', name: "label" }), h("duet-icon", { key: 'a767a71f65f8117c99f636b5c77abd1e74ab9f3c', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: 'f720b17dee77c347c6e6821b8aa73f634b7d9016', class: {
+            }, onClick: this.onClick }, h("span", { key: '67a6c63dc412388b52a2de220127dea5bef408e9', class: "label" }, h("slot", { key: 'f7c3882a3339a2cfdf581b63d4aee13867b5d67b', name: "label" }), h("duet-icon", { key: 'e0f1cd34ad6ae56df39fcdf39683cb7dfacc6aec', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: '368b77169fb80a8486623763734cedecb40b33a8', class: {
                 "menu-container": true,
                 hidden: !this.open,
-            }, role: "presentation" }, h("div", { key: '21abcdf3ef315bcc5afafb53bdde48173a04af6c', 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: '25476a3938ac4a4cde6a36aeb5c992e61cd016b3', 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: '03e8366cc1fec14f1986aba9ec87d87855221afd', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: 'd14e50c787e7f8265608d9b29ee828d39af9c638' }), h("div", { key: '8de76e4fc9aabbd135b408840d2c77cb6585e36c', class: "list-padding" }))), h("duet-overlay", { key: '407ea1dc26994bcc74a768a14d4ec78cfed40eb2', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
+            }, ref: element => (this.itemsContainer = element) }, h("div", { key: '78a0b5dcbad16181839842b362fc2aa4233933e0', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: '88ed711a6f222bfa266148da84789eaecfa433d4' }), h("div", { key: 'bccca592f7f6986a27e8b90b410f09c28d7d5667', class: "list-padding" }))), h("duet-overlay", { key: '3ba23120b948aeb6f066d21d86b58e3b6fa91669', "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,13 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CUNSbdt4.js';
-import { i as inheritGlobalTheme } from './themeable-component-EVqsr6Ut.js';
-import { D as DuetInternalLabel } from './label-CSouuUKb.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-B_VBeM3r.js';
+import { i as inheritGlobalTheme } from './themeable-component-DPqozkF4.js';
+import { D as DuetInternalLabel } from './label-l-Eza5H3.js';
 import { c as createID } from './create-id-Cfr_DJqU.js';
 import { c as cleanValue } from './input-utils-CLDy7YaM.js';
-import { g as getLocaleString, f as formatNumber, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-fAqNRSrI.js';
-import { c as checkNamedSlotElement, p as proxyInputToSlot } from './slot-utils-CgXzS75x.js';
+import { g as getLocaleString, f as formatNumber, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-B7PXWqpg.js';
+import { c as checkNamedSlotElement, p as proxyInputToSlot } from './slot-utils-aDCRCdc4.js';
 import './string-utils-C6E9F6QT.js';
 
 const duetTextareaCss = ".duet-internal-label{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:12px !important;position:relative;z-index:100;display:inline-flex;width:auto;margin-top:8px !important;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 !important;line-height:1.25;line-height:1.25;color:rgb(8, 42, 77);text-align:left;word-break:break-word;cursor:default}.duet-internal-label.duet-p-0{padding:0 !important}.duet-internal-label.duet-m-0{margin:0 !important}.duet-internal-label span{font-size:1rem;font-weight:600 !important;word-break:break-word}.duet-internal-label.duet-m-0{margin-bottom:0 !important}.duet-internal-label.duet-small-margin{margin-top:8px !important;margin-bottom:4px !important}.duet-internal-label.duet-has-tooltip{padding-right:48px}@media (min-width: 48em){.duet-internal-label.duet-has-tooltip{padding-right:0}}.duet-internal-label.duet-internal-label-small{font-size:0.875rem}.duet-internal-label.duet-internal-label-small span{font-size:0.875rem}.duet-internal-label.duet-weight-normal{font-weight:400 !important}.duet-internal-label.duet-weight-normal span{font-weight:400 !important}.duet-internal-label.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)}*,*::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-internal-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}:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea{color:#172a3b}:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea:focus{border-color:#172a3b}:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea[disabled]{background:#f5f6f7 !important;border-color:#f5f6f7 !important}:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea:-webkit-input-placeholder{color:#7891a4}:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea:focus::-webkit-input-placeholder{color:#b2c2cd}:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea:focus::-moz-placeholder{color:#b2c2cd}:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea:focus:-ms-input-placeholder{color:#b2c2cd}:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea[disabled]::-webkit-input-placeholder{color:#172a3b}:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea[disabled]::-moz-placeholder{color:#172a3b}:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea[disabled]:-ms-input-placeholder{color:#172a3b}";
@@ -236,17 +236,17 @@ const DuetTextarea = class {
      */
     render() {
         const identifier = this.identifier || this.textareaId;
-        return (h(Host, { key: '84fa1856edf85c2f4266c1fbffc3e4002681aed0', class: {
+        return (h(Host, { key: 'f5f89ec4deb6832fb80b077eca0401ceae4f8bf8', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-has-counter": this.counter && !this.error,
                 "duet-expand": this.expand,
-            } }, h("div", { key: '1ee2474f35b1b3223bd77e4a370f617ff6671d35', class: {
+            } }, h("div", { key: '36131b2417d7eed326112df08c9736814bc90b8d', 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(DuetInternalLabel, { key: '129932c05cc7bd90808342d9da9a7b860843687c', 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: 'f7070a57171efeff0dcb19a6d803282cf7756aed', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '0081e7824998f27ba18eb38a794a7fad1caf44fa', name: "tooltip" }), this.caption && (h("duet-caption", { key: '4ab51bd1ad187a0b47d7b8e54def36f6841491b8', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: '64ba93b403939c828d1278aa5a2e53e89ca7634f', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: 'b974a74933562bc464d72e6cbd901b70dbe9b7ea', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: '76f9639838ba65f5662b5be53eeefbb906109520', 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: '80bd838085f0b659858b7229f2db2e75a18cbd49', alignment: "stretch" }, h("duet-grid-item", { key: 'a868c30775a2d39fd7377c9cf5a91013cf92ac39', margin: "none", fill: true }, h("div", { key: '682752ef2d4767af14636641cff2bfe3e0ef1f92', class: "duet-textarea-help duet-textarea-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '8fab83fa5eb36ac059e1aa41faa3da8ca1876237' }, this.error))), h("duet-grid-item", { key: 'e9ecf42d53c87bd07da6b8d910ae48ef9c026773', margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { key: 'dbd058fcc26d10405dad2520dcc510b799e91682', theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))), this.counter && (h("duet-visually-hidden", { key: '0b96916a3a51b798c6700adbefde2af8b8d63b8c', class: "duet-visually-hidden", id: this.characterCountId, ref: el => {
+            } }, h(DuetInternalLabel, { key: '0120ce299715ef884c1cc2f1e42373e5bcb0e7a7', 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: '1b729cb1128299e33c70671aa55d5125ffcdc18a', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '9072f184bc0244ec5fb2a2fe6719696028bb7d0b', name: "tooltip" }), this.caption && (h("duet-caption", { key: '848706df1a73ce054a2b06f7c6e5510a21ff4a11', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: '11ede29273d13f5ecb0ce24264096f387ec78c84', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: '07ac46dc00428b32d11b7d5e3e5a1b3c4f2aad05', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: '936fdccf8c2ad06a96579c790f044db2f5d9b17d', 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: '5b42e4e2f4f76d45c40aa36caec99eaaa242586a', alignment: "stretch" }, h("duet-grid-item", { key: '59fd223682e940aeefdf807a2cdfd724a503b8e5', margin: "none", fill: true }, h("div", { key: '01d99f1d11d978925155a9d4856920780df240bf', class: "duet-textarea-help duet-textarea-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '5da5cc08fb85900d797232142167ce3be0f1cbb0' }, this.error))), h("duet-grid-item", { key: '5124866d99a9a381afcb045edf709ae6df2f342b', margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { key: 'eed9f6583984587452c6f0825dcfa801295f4c74', theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))), this.counter && (h("duet-visually-hidden", { key: '3dd2f6aee58742d3ad84b9f213ee26a1d17c04ba', class: "duet-visually-hidden", id: this.characterCountId, ref: el => {
                 this.hiddenCounterLabel = el;
             } })))));
     }

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

@@ -1,12 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CUNSbdt4.js';
-import { i as inheritGlobalTheme } from './themeable-component-EVqsr6Ut.js';
-import { D as DuetInternalLabel } from './label-CSouuUKb.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-B_VBeM3r.js';
+import { i as inheritGlobalTheme } from './themeable-component-DPqozkF4.js';
+import { D as DuetInternalLabel } from './label-l-Eza5H3.js';
 import { c as createID } from './create-id-Cfr_DJqU.js';
 import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-Db8rvjPI.js';
-import { p as proxyInputToSlot } from './slot-utils-CgXzS75x.js';
+import { p as proxyInputToSlot } from './slot-utils-aDCRCdc4.js';
 
 const duetToggleCss = ".duet-internal-label{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:12px !important;position:relative;z-index:100;display:inline-flex;width:auto;margin-top:8px !important;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 !important;line-height:1.25;line-height:1.25;color:rgb(8, 42, 77);text-align:left;word-break:break-word;cursor:default}.duet-internal-label.duet-p-0{padding:0 !important}.duet-internal-label.duet-m-0{margin:0 !important}.duet-internal-label span{font-size:1rem;font-weight:600 !important;word-break:break-word}.duet-internal-label.duet-m-0{margin-bottom:0 !important}.duet-internal-label.duet-small-margin{margin-top:8px !important;margin-bottom:4px !important}.duet-internal-label.duet-has-tooltip{padding-right:48px}@media (min-width: 48em){.duet-internal-label.duet-has-tooltip{padding-right:0}}.duet-internal-label.duet-internal-label-small{font-size:0.875rem}.duet-internal-label.duet-internal-label-small span{font-size:0.875rem}.duet-internal-label.duet-weight-normal{font-weight:400 !important}.duet-internal-label.duet-weight-normal span{font-weight:400 !important}.duet-internal-label.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)}*,*::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:8px !important;margin-bottom:12px !important;-webkit-user-select:none;user-select:none;display:inline-flex;width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}duet-label{display:block !important;width:100% !important}.duet-side-label{display:flex;gap:12px;align-items:center}.duet-side-label duet-label{width:auto !important}.duet-reverse-label{flex-direction:row-reverse}.duet-switch{position:relative;display:block;width:48px;height:28px}.duet-switch input{position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}.duet-switch input:checked+.duet-slider{background-color:rgb(0, 119, 179);box-shadow:none}.duet-theme-turva .duet-switch input:checked+.duet-slider{background-color:rgb(198, 12, 48)}.duet-switch input:checked+.duet-slider::before{background-color:rgb(255, 255, 255);box-shadow:-1px 0 2px #004467;transform:translateX(20px)}.duet-theme-turva .duet-switch input:checked+.duet-slider::before{background-color:rgb(255, 255, 255);box-shadow:-1px 0 2px #660619}.duet-switch input:disabled+.duet-slider{cursor:default}.duet-switch input:disabled+.duet-slider::before{box-shadow:none}.duet-theme-turva .duet-switch input:disabled+.duet-slider::before{box-shadow:none}.duet-switch input:disabled:not(:checked)+.duet-slider{background:#bfcbd2}.duet-switch input:disabled:not(:checked)+.duet-slider::before{background:rgb(255, 255, 255);box-shadow:none}.duet-theme-turva .duet-switch input:disabled:not(:checked)+.duet-slider{background:#c7c9cf}.duet-theme-turva .duet-switch input:disabled:not(:checked)+.duet-slider::before{background:rgb(255, 255, 255)}.duet-switch input:disabled:checked+.duet-slider{background:#80bbd9}.duet-theme-turva .duet-switch input:disabled:checked+.duet-slider{background:#e38698}:host(.user-is-tabbing) .duet-switch input:focus+.duet-slider{box-shadow:0 0 0 1px #fff, 0 0 0 3px rgba(0, 119, 179, 0.75)}:host(.user-is-tabbing) .duet-theme-turva .duet-switch input:focus+.duet-slider{box-shadow:0 0 0 1px #fff, 0 0 0 3px rgba(23, 28, 58, 0.75)}.duet-slider{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer;background-color:rgb(127, 150, 165);border-radius:24px;transition:background-color 300ms ease}.duet-slider::before{position:absolute;bottom:2px;left:2px;width:24px;height:24px;content:\"\";background-color:rgb(255, 255, 255);border-radius:50%;box-shadow:1px 0 2px 0 #5d6266;transition:300ms ease}.duet-theme-turva .duet-slider{background-color:rgb(143, 147, 158)}.duet-theme-turva .duet-slider::before{background-color:rgb(255, 255, 255);box-shadow:1px 0 2px 0 #00334d}:host(.duet-theme-turva2) .duet-switch input:checked+.duet-slider{background-color:#e61740}:host(.duet-theme-turva2) .duet-switch input:checked+.duet-slider::before{box-shadow:-1px 0 2px #890e26;transform:translateX(20px)}:host(.duet-theme-turva2) .duet-switch input:disabled:checked+.duet-slider{background:#f38ba0}";
 
@@ -110,12 +110,12 @@ const DuetToggle = class {
      */
     render() {
         const identifier = this.identifier || this.toggleId;
-        return (h(Host, { key: '4dd91fdff342a011c53aa8388b70f01a7f3e0718', onClick: this.disabled ? undefined : this.onClick, class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '0e3f1033d6ef64744a72dda51f6a5c54754951bc', class: {
+        return (h(Host, { key: '1dd080e2157b99e6fa5b08148203be1318d2b842', onClick: this.disabled ? undefined : this.onClick, class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'c75404887077682a10ab2c936730230b67fbfd60', class: {
                 "duet-toggle": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-side-label": this.labelPosition !== "top",
                 "duet-reverse-label": this.labelPosition === "right",
-            } }, h(DuetInternalLabel, { key: 'f19dd8febb52d804b99366403cf1011facd346aa', theme: this.theme, color: this.labelColor, weight: this.labelWeight, for: identifier, margin: this.labelPosition === "top" ? "auto" : "none" }, this.label), h("label", { key: '5ef299e4e8ae4267b78382f32c6c1cf4ddaaef35', class: "duet-switch" }, h("input", { key: '4cb77c516c9fe0d1f251652206308014fa2838db', type: "checkbox", value: this.value, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, id: identifier, role: this.role, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled, ref: input => (this.nativeInput = input) }), h("div", { key: 'bea5da4c02a844bf4b0f99c813fdc87f0dfe8d46', class: "duet-slider" })))));
+            } }, h(DuetInternalLabel, { key: '729c25fde1456d487e6f469fb8fb9fb1f45a5bb9', theme: this.theme, color: this.labelColor, weight: this.labelWeight, for: identifier, margin: this.labelPosition === "top" ? "auto" : "none" }, this.label), h("label", { key: '7a551eb3640c2ff849c18fa6d257cb8787e056e1', class: "duet-switch" }, h("input", { key: '30c8f85f4938c0ee3b258d02446ce24c03664897', type: "checkbox", value: this.value, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, id: identifier, role: this.role, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled, ref: input => (this.nativeInput = input) }), h("div", { key: 'fe4a68e81538ba476056ee0aa98c50b7fbccbe98', class: "duet-slider" })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {