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

package/lib/esm/duet-menu-bar-dropdown.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 duetMenuBarDropdownCss = "*,*::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%}@media (min-width: 62em){:host(:last-child) .duet-menu-bar-dropdown button{padding:0 16px 0 16px}}@media (min-width: 76.25em){:host(:last-child) .duet-menu-bar-dropdown button{padding:0 16px 0 28px}}.duet-menu-bar-dropdown{position:relative;height:100%}.duet-menu-bar-dropdown button{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;padding:0 12px;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(0, 75, 129);text-align:center;text-decoration:none;cursor:pointer}@media (min-width: 62em){.duet-menu-bar-dropdown button{padding:0 16px}}@media (min-width: 76.25em){.duet-menu-bar-dropdown button{padding:0 28px}}.duet-menu-bar-dropdown button:hover{color:rgb(0, 119, 179)}.duet-menu-bar-dropdown button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-menu-bar-dropdown button .label{display:flex;gap:0.5rem;align-items:center;justify-content:center}.duet-menu-bar-dropdown button.active{color:rgb(0, 119, 179)}.duet-menu-bar-dropdown button.active .caret{transform:rotate(180deg)}.duet-theme-turva .duet-menu-bar-dropdown button.active{color:rgb(198, 12, 48)}.duet-menu-bar-dropdown button.active::after{position:absolute;top:auto;bottom:2px;left:0;display:block;width:100%;height:2px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(2px)}.duet-theme-turva .duet-menu-bar-dropdown button.active::after{background:rgb(198, 12, 48)}.duet-menu-bar-dropdown .menu-bar-dropdown-icon{width:20px;height:20px}@media (min-width: 62em){.duet-menu-bar-dropdown .menu-bar-dropdown-icon{width:16px;height:16px}}.duet-menu-bar-dropdown .items{position:absolute;top:70%;right:0%;left:auto;z-index:600;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:225px;padding:8px;color:rgb(8, 42, 77);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)}.duet-menu-bar-dropdown .items.hidden{display:none}.duet-menu-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)}.duet-menu-bar-dropdown.duet-theme-turva button:hover{color:rgb(198, 12, 48)}.duet-menu-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-menu-bar-dropdown.duet-theme-turva button.active{color:rgb(198, 12, 48)}.duet-menu-bar-dropdown.duet-theme-turva button.active::after{background:rgb(198, 12, 48)}.duet-menu-bar-dropdown.duet-theme-turva .items{background:rgb(255, 255, 255)}:host(.duet-theme-turva2) .duet-menu-bar-dropdown.duet-theme-turva button{color:#172a3b}:host(.duet-theme-turva2) .duet-menu-bar-dropdown.duet-theme-turva button:hover{color:#e61740}:host(.duet-theme-turva2) .duet-menu-bar-dropdown.duet-theme-turva button.active{color:#e61740}:host(.duet-theme-turva2) .duet-menu-bar-dropdown.duet-theme-turva button.active::after{background:#e61740}";
@@ -66,17 +66,17 @@ const DuetMenuBarDropdown = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'bd58e1dff54dcb742f71d79a3f4ac926698d8be4', role: "listitem" }, h("div", { key: '5e2ecae92d1714eb9fd29b2ad9c288f0acb022f7', class: {
+        return (h(Host, { key: '870e7ba2d40001532dabdb4c9468b73570e1ade7', role: "listitem" }, h("div", { key: '7c60bf682acd9d11e8633f862f07391a706de817', class: {
                 "duet-menu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
                 [`duet-menu-bar-dropdown--slot-${this.getVariant()}`]: true,
-            } }, h("button", { key: 'bca33875be854118e12277bf022757f89deac664', ref: element => (this.button = element), "aria-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: 'c0bdf57ef46ae179d3c0d6e7f45bdd7ffe10769b', ref: element => (this.button = element), "aria-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
                 active: this.open,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '8b2139cbecc402ef2475876525963e51923f8e36', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '4ef57ea2a1222ba117d6a0ec160c42e5eb01684c', class: "label" }, h("slot", { key: 'e81fd8db1ce93315bc5bdb466026c170d16141b6', name: "label" }), h("duet-icon", { key: '9f01bcc4114618806fa680c3c813ef9a88e760ab', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'b9877d928d13f438e0cee0fe159f43923932417d', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'c97e52d72933959ecbd6b9519940427735cdeccc', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'd831c0f2defb108643ac9a11f6be93f4f98a8dbc', class: "label" }, h("slot", { key: 'c396567614cd3badd2b373a1922ea907f75750a8', name: "label" }), h("duet-icon", { key: '4e8adfdf9998028a514fa386275affa9c4fe29be', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '683257ed3f02ee4cde289c0efe48af7f06fa50c5', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'aa50757464cf5184b8bda091e87010c8e0d58b41' })))));
+            } }, h("slot", { key: '281de42fd56a1c9be76c9b4218d4354032a56834' })))));
     }
     get element() { return getElement(this); }
 };

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

@@ -1,14 +1,14 @@
 /*!
  * 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 { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-fAqNRSrI.js';
+import { i as inheritGlobalTheme } from './themeable-component-DPqozkF4.js';
+import { g as getAccessibleLinkLabel } from './a11y-utils-CXqm1pj1.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 duetMenuBarItemCss = "*,*::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%}.duet-menu-bar-item{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;padding:0 12px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:inherit;font-weight:inherit;color:inherit;text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer}.duet-menu-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-menu-bar-item:focus,.duet-menu-bar-item:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-menu-bar-item .leading-icon,.duet-menu-bar-item .trailing-icon{width:20px;height:20px}@media (min-width: 62em){.duet-menu-bar-item .leading-icon,.duet-menu-bar-item .trailing-icon{width:16px;height:16px}}.duet-menu-bar-item .trailing-icon.trailing-icon-arrow{width:7px;height:7px}.duet-menu-bar-item .external-icon{width:10px;height:10px}.duet-menu-bar-item[aria-expanded=true]{color:rgb(0, 119, 179)}.duet-menu-bar-item[aria-expanded=true] .trailing-icon.rotate{transform:rotate(180deg)}.duet-menu-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\"}.duet-menu-bar-item.duet-theme-turva[aria-expanded=true]{color:rgb(198, 12, 48)}@media (min-width: 62em){.duet-menu-bar-item{padding:0 16px}}@media (min-width: 76.25em){.duet-menu-bar-item{padding:0 28px}}.duet-menu-bar-item.active{color:rgb(0, 119, 179)}.duet-menu-bar-item.active::after{position:absolute;top:auto;bottom:2px;left:0;z-index:1;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(2px)}@media (min-width: 62em){.duet-menu-bar-item.active::after{z-index:auto;height:2px}}.duet-menu-bar-item.active.duet-theme-turva{color:rgb(198, 12, 48)}.duet-menu-bar-item.active.duet-theme-turva::after{background:rgb(198, 12, 48)}@media (min-width: 62em){.duet-menu-bar-item:hover{color:rgb(0, 119, 179)}.duet-menu-bar-item:hover.duet-theme-turva{color:rgb(198, 12, 48)}}:host(.duet-theme-turva2) .duet-menu-bar-item.duet-theme-turva[aria-expanded=true]{color:#e61740}:host(.duet-theme-turva2) .duet-menu-bar-item.active.duet-theme-turva{color:#e61740}:host(.duet-theme-turva2) .duet-menu-bar-item.active.duet-theme-turva::after{background:#e61740}@media (min-width: 62em){:host(.duet-theme-turva2) .duet-menu-bar-item.duet-theme-turva:hover{color:#e61740}}";
@@ -78,11 +78,11 @@ const DuetMenuBarItem = class {
      */
     render() {
         const TagName = this.url ? "a" : "button";
-        return (h(Host, { key: 'f974d8d652cd213c89d81ead0f2048f1d109caa2', role: "listitem" }, h(TagName, { key: 'd7ead167979db9405ffbf213ad8f38bd63b0be77', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: 'd968cd5ac488d7cc0fea66408de412524dc88b35', role: "listitem" }, h(TagName, { key: '143da0db925d6a45f69a6defcc0d96710d395cbf', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
                 "duet-menu-bar-item": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "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, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: '62660a414dab1ad3892c2466ff6550665a6bdbbb', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '63610a02057061d8dbd192e8f29fb80d602b8f62' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: '118ed1bb4814e4b1f89f45322ee5ef4afedd798b', class: {
+            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "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, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: '22ef7c16eb08f2a24bbd902c1e702103a8319621', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '9560bccb8d749a945592866e33279c9e1686f9af' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: 'c152621621d193d9d80cc0984fe36d230a2b7a63', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!this.external,

package/lib/esm/duet-menu-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';
 
 const duetMenuBarLinkCss = "*,*::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%}.duet-menu-bar-link{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;padding:0 12px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:inherit;text-align:center;text-decoration:none;white-space:nowrap}.duet-menu-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-menu-bar-link:focus,.duet-menu-bar-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-menu-bar-link .menu-bar-link-icon{width:20px;height:20px}@media (min-width: 62em){.duet-menu-bar-link .menu-bar-link-icon{width:16px;height:16px}}.duet-menu-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\"}@media (min-width: 62em){.duet-menu-bar-link{padding:0 16px}}@media (min-width: 76.25em){.duet-menu-bar-link{padding:0 28px}}.duet-menu-bar-link.active{color:rgb(0, 119, 179)}.duet-menu-bar-link.active::after{position:absolute;top:auto;bottom:2px;left:0;z-index:1;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(2px)}@media (min-width: 62em){.duet-menu-bar-link.active::after{z-index:auto;height:2px}}.duet-menu-bar-link.active.duet-theme-turva{color:rgb(198, 12, 48)}.duet-menu-bar-link.active.duet-theme-turva::after{background:rgb(198, 12, 48)}@media (min-width: 62em){.duet-menu-bar-link:hover{color:rgb(0, 119, 179)}.duet-menu-bar-link:hover.duet-theme-turva{color:rgb(198, 12, 48)}}:host(.duet-theme-turva2) .duet-menu-bar-link.active.duet-theme-turva{color:#e61740}:host(.duet-theme-turva2) .duet-menu-bar-link.active.duet-theme-turva::after{background:#e61740}@media (min-width: 62em){:host(.duet-theme-turva2) .duet-menu-bar-link.duet-theme-turva:hover{color:#e61740}}";
 
@@ -37,11 +37,11 @@ const DuetMenuBarLink = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'c00780c565b538d20ff204a3f9f52dd2cb2bc4d7', role: "listitem" }, h("a", { key: '64c3be1bc38f176f7de7431b6c934685b30e9ee2', class: {
+        return (h(Host, { key: 'd150209d2395822ac0ba4b0d6372bdc0ba5532fd', role: "listitem" }, h("a", { key: '46070813f893e645146a7ca8ea798fa455df11e9', class: {
                 "duet-menu-bar-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'c1602e9610415be0eecb03ab05e972ed4b19bbc6', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '321c5f2123e2eb98ab9cd89bffedb027fc412e26' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'bac5752b20258b49e6b3210f071578154de8d8d8', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'efec03fcc7a033a4f9df871a4a087d7c9a04a0e8' }))));
     }
     get element() { return getElement(this); }
 };

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

@@ -1,26 +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 { a as media_query_large, b as media_query_xx_large } from './tokens-Dvk6bntS.js';
-import { i as inheritGlobalTheme } from './themeable-component-EVqsr6Ut.js';
-import { a as getLanguage } from './language-utils-fAqNRSrI.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 { a as getLanguage } from './language-utils-B7PXWqpg.js';
 import './string-utils-C6E9F6QT.js';
 
-const duetMenuBarCss = "*,*::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:relative;width:100%}.duet-menu-bar{position:relative;top:0;z-index:2;display:flex;align-items:center;justify-content:center;background:rgb(255, 255, 255);box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07);transition:top 0.3s}.duet-menu-bar.hidden{top:-200px}.duet-menu-bar.bottom{z-index:1}@media (min-width: 62em){.duet-menu-bar{box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1)}}.duet-menu-bar .top{display:none}.duet-menu-bar .bottom{display:none}.duet-menu-bar.horizontal-nav{position:relative}.duet-menu-bar.horizontal-nav .top{position:absolute;top:0;left:3.5%;display:block;width:93%;height:1px;background:rgb(245, 248, 250)}.duet-menu-bar.horizontal-nav .bottom{position:absolute;bottom:0;left:0;display:block;width:100%;height:1px;background:rgb(212, 223, 229)}.duet-menu-bar.horizontal-nav .more-left{position:absolute;top:0;left:0;z-index:1;width:56px;height:49px;pointer-events:none;background:linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%)}@media (min-width: 62em){.duet-menu-bar.horizontal-nav .more-left{display:none}}.duet-menu-bar.horizontal-nav .more-right{position:absolute;top:0;right:0;z-index:1;width:56px;height:49px;pointer-events:none;background:linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0) 100%)}@media (min-width: 62em){.duet-menu-bar.horizontal-nav .more-right{display:none}}@media (pointer: fine){.duet-menu-bar.horizontal-nav{display:none}}@media (pointer: fine) and ((min-width: 62em)){.duet-menu-bar.horizontal-nav{display:flex}}.duet-menu-bar .container{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1440px;height:100%;height:3.25rem;padding:0 8px 0 20px;overflow-x:auto;scrollbar-width:none}.duet-menu-bar .container::-webkit-scrollbar{width:0;height:0}@media (min-width: 62em){.duet-menu-bar .container{height:5rem;padding:0 28px;overflow-x:visible}}.duet-menu-bar .container .list{height:100%;list-style-type:none}.duet-menu-bar .container ::slotted(*){height:100%}.duet-menu-bar .container>*{display:flex;align-items:center;justify-content:center;height:100%}.duet-menu-bar .container>:first-child{flex-basis:0;flex-grow:1;justify-content:flex-start}.duet-menu-bar .container>:last-child{flex-basis:0;flex-grow:1;justify-content:flex-end}.duet-menu-bar .container ::slotted(*){display:flex;align-items:center;justify-content:center;height:100%}.duet-menu-bar.duet-theme-turva{background:rgb(255, 255, 255);box-shadow:0 2px 6px 0 rgba(23, 28, 58, 0.07)}@media (min-width: 62em){.duet-menu-bar.duet-theme-turva{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1)}}@media (min-width: 62em){.duet-menu-bar.duet-menu-bar-slim .container{height:4rem}}.center{font-size:1rem;font-weight:600;line-height:1.25;color:rgb(8, 42, 77)}.duet-theme-turva .center{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)}.right{font-size:0.875rem;font-weight:400;line-height:1.25;color:rgb(0, 75, 129)}.duet-theme-turva .right{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)}:host(.duet-theme-turva2) .duet-theme-turva .center{color:#172a3b}:host(.duet-theme-turva2) .duet-theme-turva .right{color:#172a3b}";
+const duetMenuBarCss = "*,*::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:relative;width:100%}.duet-menu-bar{position:relative;top:0;z-index:2;display:flex;align-items:center;justify-content:center;background:rgb(255, 255, 255);box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07);transition:top 0.3s}.duet-menu-bar.hidden{top:-200px}.duet-menu-bar.bottom{z-index:1}@media (min-width: 62em){.duet-menu-bar{box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1)}}.duet-menu-bar .top{display:none}.duet-menu-bar .bottom{display:none}.duet-menu-bar.horizontal-nav{position:relative}.duet-menu-bar.horizontal-nav .top{position:absolute;top:0;left:3.5%;display:block;width:93%;height:1px;background:rgb(245, 248, 250)}.duet-menu-bar.horizontal-nav .bottom{position:absolute;bottom:0;left:0;display:block;width:100%;height:1px;background:rgb(212, 223, 229)}.duet-menu-bar.horizontal-nav .more-left{position:absolute;top:0;left:0;z-index:1;width:56px;height:49px;pointer-events:none;background:linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%)}@media (min-width: 62em){.duet-menu-bar.horizontal-nav .more-left{display:none}}.duet-menu-bar.horizontal-nav .more-right{position:absolute;top:0;right:0;z-index:1;width:56px;height:49px;pointer-events:none;background:linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0) 100%)}@media (min-width: 62em){.duet-menu-bar.horizontal-nav .more-right{display:none}}@media (pointer: fine){.duet-menu-bar.horizontal-nav{display:none}}@media (pointer: fine) and ((min-width: 62em)){.duet-menu-bar.horizontal-nav{display:flex}}.duet-menu-bar .container{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1440px;height:100%;height:3.25rem;padding:0 8px 0 20px;overflow-x:auto;scrollbar-width:none}.duet-menu-bar .container::-webkit-scrollbar{width:0;height:0}.duet-menu-bar .container duet-logo.large,.duet-menu-bar .container duet-logo.only-symbol{display:none}.duet-menu-bar .container.with-info-text duet-logo.medium{display:none}.duet-menu-bar .container.with-info-text duet-logo.only-symbol{display:block}@media (min-width: 48em){.duet-menu-bar .container.with-info-text duet-logo.medium{display:block}.duet-menu-bar .container.with-info-text duet-logo.only-symbol{display:none}}@media (min-width: 76.25em){.duet-menu-bar .container duet-logo.medium{display:none}.duet-menu-bar .container duet-logo.large{display:block}}@media (min-width: 62em){.duet-menu-bar .container{height:5rem;padding:0 28px;overflow-x:visible}}.duet-menu-bar .container .list{height:100%;list-style-type:none}.duet-menu-bar .container ::slotted(*){height:100%}.duet-menu-bar .container>*{display:flex;align-items:center;justify-content:center;height:100%}.duet-menu-bar .container>:first-child{flex-basis:0;flex-grow:1;justify-content:flex-start;width:auto;height:40px}@media (min-width: 76.25em){.duet-menu-bar .container>:first-child{height:48px}}.duet-menu-bar .container>:first-child:has(.duet-logo-info-text){flex-grow:8}.duet-menu-bar .container>:first-child:has(.duet-logo-info-text) duet-paragraph{max-height:100%}.duet-menu-bar .container>:last-child{flex-basis:0;flex-grow:1;justify-content:flex-end}.duet-menu-bar .container ::slotted(*){display:flex;align-items:center;justify-content:center;height:100%}.duet-menu-bar .container .duet-logo-info-text{max-height:2.8875rem;padding-left:16px;margin-left:16px;overflow:hidden;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-style:normal;font-weight:400;font-variant-numeric:tabular-nums;-webkit-hyphens:auto;hyphens:auto;line-height:1.1;color:rgb(62, 84, 102);text-overflow:ellipsis;border-left:1px solid rgb(212, 223, 229)}.duet-menu-bar .container .duet-logo-info-text.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(71, 78, 101);border-left-color:rgb(222, 224, 228)}@media (min-width: 48em){.duet-menu-bar .container .duet-logo-info-text{max-height:3.3rem;font-size:1rem}}.duet-menu-bar.duet-theme-turva{background:rgb(255, 255, 255);box-shadow:0 2px 6px 0 rgba(23, 28, 58, 0.07)}@media (min-width: 62em){.duet-menu-bar.duet-theme-turva{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1)}}.duet-menu-bar.duet-menu-bar-slim .container duet-logo.medium{display:block}.duet-menu-bar.duet-menu-bar-slim .container duet-logo.large{display:none}.duet-menu-bar.duet-menu-bar-slim .container.with-info-text duet-logo.medium{display:none}.duet-menu-bar.duet-menu-bar-slim .container.with-info-text duet-logo.only-symbol{display:block}@media (min-width: 48em){.duet-menu-bar.duet-menu-bar-slim .container.with-info-text duet-logo.medium{display:block}.duet-menu-bar.duet-menu-bar-slim .container.with-info-text duet-logo.only-symbol{display:none}}@media (min-width: 62em){.duet-menu-bar.duet-menu-bar-slim .container{height:4rem}}.center{font-size:1rem;font-weight:600;line-height:1.25;color:rgb(8, 42, 77)}.duet-theme-turva .center{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)}.right{font-size:0.875rem;font-weight:400;line-height:1.25;color:rgb(0, 75, 129)}.duet-theme-turva .right{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)}:host(.duet-theme-turva2) .duet-theme-turva .center{color:#172a3b}:host(.duet-theme-turva2) .duet-theme-turva .right{color:#172a3b}:host(.duet-theme-turva2) .duet-theme-turva .duet-logo-info-text{color:#354f65;border-left-color:#d4dde2}";
 
 const DuetMenuBar = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.duetEvent = createEvent(this, "duetEvent", 7);
-        /**
-         * Own Properties.
-         */
-        this.mql = [
-            window.matchMedia(media_query_large.replace(/'/g, "")),
-            window.matchMedia(media_query_xx_large.replace(/'/g, "")),
-        ];
-        this.boundMqlFunctions = [];
         this.previousYScroll = 0;
         this.hidden = false;
         this.onBottom = false;
@@ -28,6 +19,7 @@ const DuetMenuBar = class {
         this.leftMoreVisible = false;
         this.rightMoreVisible = false;
         this.centerSlotUsed = false;
+        this.mediaQueryMediumMatches = false;
         /**
          * Theme.
          */
@@ -74,15 +66,6 @@ const DuetMenuBar = class {
             const centerSlot = this.element.querySelector('[slot="center"]');
             this.centerSlotUsed = !!centerSlot;
         };
-        this.changeLogoSize = () => {
-            this.checkCenterSlot();
-            if (this.mql[1].matches && this.centerSlotUsed) {
-                this.logoSize = "large";
-            }
-            else {
-                this.logoSize = "medium";
-            }
-        };
         this.handleLogoClick = (e) => {
             this.duetEvent.emit({
                 name: "logoClick",
@@ -126,26 +109,8 @@ const DuetMenuBar = class {
         inheritGlobalTheme(this);
     }
     connectedCallback() {
-        this.changeLogoSize();
-        for (let i = 0; i < this.mql.length; i++) {
-            // addEventListener is not available in Stencil hydrate
-            if (this.mql[i].addEventListener) {
-                const bound = this.changeLogoSize.bind(this);
-                this.mql[i].addEventListener("change", bound);
-                this.boundMqlFunctions[i] = bound;
-            }
-        }
         this.checkCenterSlot();
     }
-    disconnectedCallback() {
-        for (let i = 0; i < this.mql.length; i++) {
-            // removeEventListener is not available in Stencil hydrate
-            if (this.mql[i].removeEventListener) {
-                this.mql[i].removeEventListener("change", this.boundMqlFunctions[i]);
-            }
-        }
-        this.boundMqlFunctions = [];
-    }
     componentDidLoad() {
         setTimeout(() => {
             this.scrollbarCheck();
@@ -166,14 +131,17 @@ const DuetMenuBar = class {
     render() {
         const slideoutAvailable = document.querySelectorAll("duet-slideout").length > 0;
         const isUsedAsAdditionalHorizontalNav = slideoutAvailable && !this.logo;
-        return (h(Host, { key: '349581a9e41fcb410d37770ed09d2311de7d38a5' }, h("nav", { key: '96ed53773cd355d673a2b3977b40286d67985810', class: {
+        return (h(Host, { key: 'da384aec934b8177658bc5b2ba9126dabe8b44cc' }, h("nav", { key: 'eb7dd8d958e964d1b0e5d2cf96a20a4d0c0c70dc', class: {
                 "duet-menu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 "horizontal-nav": isUsedAsAdditionalHorizontalNav,
                 "duet-menu-bar-slim": !this.centerSlotUsed,
                 hidden: this.hidden && this.hideOnScroll,
                 bottom: this.onBottom,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '93a3b7f680dfc2f998274c56a380e29332b24f90', class: "top" }), h("div", { key: 'a8d14b711a83aee7ea63fa39f5be9d6d61929a37', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '306ad41f64eaecd20cc98bbe2b9d490912c6820c' }, h("duet-logo", { key: '5a91055e192e1214c7bd921c2ff300510594c47b', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: '7fea1e39256f5847358f2533607ac26f53fc35d3', class: "list center", role: "list" }, h("div", { key: '4c953fc8762eadafb6e4a41534676021e4fb0675', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: 'ee961cf16f11a62fdef74f7ab57cf4bf653ba8ab', name: "center" }), h("div", { key: '1f66cfd1c1fea5f9c1764ff8b3a697c0459a653b', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '3d7cb50a008c1ce893a3ad504b186dbb3965a130', class: "list right", role: "list" }, h("slot", { key: '7ff47fae8ea6f7d49fcfe5e53d43491994741f26', name: "right" }))), h("div", { key: '8bc982c15ce030ae88966fe1646914b6bf295960', class: "bottom" }))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '4a8a38d9fd5457b716bff3252791d35eb8441aec', class: "top" }), h("div", { key: 'dfe385565d075aba16005d29790111cc51b5a464', class: { container: true, "with-info-text": !!this.logoInfoText && !this.centerSlotUsed }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: 'd7fa21e1f8b0f3ea5eeb5eff037790a47c57be22' }, h("duet-logo", { key: '081cd1b58c97e71196ff421dbb7b1ed4f2e2278e', class: "medium", size: "medium", margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), h("duet-logo", { key: '41b6ffe971ec6c9ff78c2f79834df3c9dceb3482', class: "large", size: "large", margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), h("duet-logo", { key: '16cc7621a8d50d64d63fd7b8af07f074e30a49d0', class: "only-symbol", onlySymbol: true, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), this.logoInfoText && !this.centerSlotUsed && (h("div", { key: '2f0bcec90b8c9f508d95fb31d8ad9904ea7bf652', class: {
+                "duet-logo-info-text": true,
+                "duet-theme-turva": this.theme === "turva",
+            } }, this.logoInfoText)))), h("div", { key: '0630a90a58cfcfdd4255c018db1ea172240b5611', class: "list center", role: "list" }, h("div", { key: '6e9f9d06775216dfa9ec70b2c768d5957ba67f10', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: '03f6a07cf3633d2ba2c62b76d40d2f74bba6f366', name: "center" }), h("div", { key: '7baeb903a2656bb33129bac0cf6007fce4604bd1', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '8a183192d62d7040c1ab2a8a684d8a7678803436', class: "list right", role: "list" }, h("slot", { key: 'd2f48181bf06824a5901fdc37f7f9eb729460c68', name: "right" }))), h("div", { key: '3b1e931eb638ea04b5a0743d2ab03413ca220a33', class: "bottom" }))));
     }
     get element() { return getElement(this); }
 };

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

@@ -1,16 +1,18 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-CUNSbdt4.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-B_VBeM3r.js';
 import { d as disableBodyScroll, e as enableBodyScroll } from './bodyScrollLock.es6-B1B-PPrh.js';
-import { i as inheritGlobalTheme } from './themeable-component-EVqsr6Ut.js';
+import { i as inheritGlobalTheme } from './themeable-component-DPqozkF4.js';
 import { a as DuetStringsPleaseWaitDefaults } from './common-strings-MxsWrBCY.js';
-import { f as focusElement } from './focus-utils-Fb4Hjq5k.js';
+import { f as focusElement } from './focus-utils-vvgYykmM.js';
 import { a as isEscapeKey } from './keyboard-utils-Db8rvjPI.js';
-import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-fAqNRSrI.js';
-import { h as hasSlot } from './slot-utils-CgXzS75x.js';
+import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-B7PXWqpg.js';
+import { h as hasSlot } from './slot-utils-aDCRCdc4.js';
 import { T as Teleport } from './teleport-CooAqTCj.js';
+import { p as postfixTheme } from './token-utils-BGFYWQ6j.js';
 import './string-utils-C6E9F6QT.js';
+import './tokens.module-Z0D6Gy9e.js';
 
 const duetModalCss = "*,*::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}.duet-modal-container{position:fixed;top:0;right:0;bottom:0;left:0;z-index:900;max-height:100vh;overflow-y:auto;visibility:hidden;opacity:0;transition:300ms ease;transition-delay:200ms}.duet-modal-container.duet-modal-active{visibility:visible;opacity:1;transition:300ms ease;transition-delay:0s}.duet-modal-container.duet-disable-transitions{transition:none}.duet-modal-container.duet-modal-slide-up{overflow:hidden}::slotted(img){width:100%}.duet-modal-inner{display:flex;align-items:center;width:100%;min-height:100%;padding:20px 16px}@media (min-width: 36em){.duet-modal-inner{padding:48px 16px}}.duet-modal-inner.duet-modal-slide-up{align-items:stretch;justify-content:center;height:100%;padding-top:48px;padding-bottom:0;overflow:hidden}.duet-modal-inner.duet-modal-slide-up::after{position:absolute;bottom:0;z-index:300;display:block;width:100%;max-width:686px;height:48px;margin:auto;pointer-events:none;content:\"\";background:linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255))}.duet-modal-inner.duet-modal-slide-up::after.small{max-width:545px}.duet-modal-inner.duet-modal-slide-up::after.large{max-width:100%}@media (min-width: 36em){.duet-modal-inner.duet-modal-slide-up::after.large{max-width:1110px}}@media (max-width: 35.9375em){.duet-modal-inner.large{padding-right:0;padding-left:0}.duet-modal-inner.duet-modal-slide-up{padding:0;padding-top:28px}}.duet-modal{position:relative;width:100%;max-width:686px;margin:auto;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-weight:400;font-variant-numeric:tabular-nums;line-height:1.5;color:rgb(8, 42, 77);background:rgb(255, 255, 255);border-radius:16px;opacity:0;transition:300ms ease;transition-delay:0ms;transform:scale(0.96)}.duet-theme-turva .duet-modal{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-modal-active .duet-modal{opacity:1;transition:300ms ease;transition-delay:200ms;transform:none}.duet-modal-active .duet-modal.slide-up{top:0;transition:top 600ms ease}.duet-modal.loader{text-align:center;background:transparent}.duet-modal.loader .duet-modal-close{display:none}.duet-modal.loader .duet-modal-spinner{position:relative;height:120px}.duet-modal.loader .duet-modal-inner-slot-default{position:relative;backdrop-filter:blur(10px)}.duet-modal.loader duet-paragraph.duet-loader-message{position:absolute;opacity:0;transition:all 300ms ease;transform:scaleY(0);transform-origin:top}.duet-modal.loader duet-paragraph.duet-loader-message.show{opacity:1;transform:scaleY(1);transform-origin:bottom}.duet-modal.loader duet-paragraph.duet-loader-message.show::part(duet-paragraph){backdrop-filter:blur(10px)}.duet-disable-transitions .duet-modal{transition:none}.duet-modal.small{max-width:545px}.duet-modal.large{max-width:100%}@media (min-width: 36em){.duet-modal.large{max-width:1110px}}.duet-modal.slide-up{top:100vh;margin:0;overflow:auto;border-radius:16px 16px 0 0;opacity:1;transition:top 600ms ease}.duet-modal.duet-modal-has-sticky-header{height:100%;overflow:auto}.duet-modal:focus{outline:0}.duet-modal-body,.duet-modal-sticky-header{width:100%;padding:36px 28px}.duet-modal-body.duet-modal-gutter-none,.duet-modal-sticky-header.duet-modal-gutter-none{padding:0 !important}.duet-modal-body.duet-modal-gutter-small,.duet-modal-sticky-header.duet-modal-gutter-small{padding:36px 20px}.duet-modal-body.duet-modal-gutter-large,.duet-modal-sticky-header.duet-modal-gutter-large{padding:48px 36px}@media (max-width: 22.5em){.duet-modal-body,.duet-modal-sticky-header{padding:36px 20px}.duet-modal-body.duet-modal-gutter-large,.duet-modal-sticky-header.duet-modal-gutter-large{padding:48px 28px}}@media (max-width: 35.9375em){.duet-modal-body,.duet-modal-sticky-header{padding:36px 20px}.duet-modal-body.duet-modal-gutter-large,.duet-modal-sticky-header.duet-modal-gutter-large{padding:48px 36px}}@media (min-width: 36em){.duet-modal-body,.duet-modal-sticky-header{padding:36px}.duet-modal-body.duet-modal-gutter-large,.duet-modal-sticky-header.duet-modal-gutter-large{padding:28px 72px}}@media (min-width: 48em){.duet-modal-body,.duet-modal-sticky-header{padding:36px 72px}.duet-modal-body.duet-modal-gutter-large,.duet-modal-sticky-header.duet-modal-gutter-large{padding:36px 72px}}@media (min-width: 76.25em){.duet-modal-body,.duet-modal-sticky-header{padding:36px 48px 48px}.duet-modal-body.duet-modal-gutter-large,.duet-modal-sticky-header.duet-modal-gutter-large{padding:48px 94px}.small .duet-modal-body,.small .duet-modal-sticky-header{padding:36px 48px}}.duet-modal-header{text-align:center}.duet-modal-sticky-header{position:sticky;top:0;z-index:300;display:block;padding-bottom:12px;text-align:left;background:rgb(240, 247, 250);border-bottom:1px solid rgb(212, 223, 229);border-radius:16px 16px 0 0}.duet-theme-turva .duet-modal-sticky-header{background:rgb(245, 247, 250);border-bottom:1px solid rgb(222, 224, 228)}.duet-modal-close{position:absolute;top:8px;right:8px}.duet-modal-heading{width:100%;padding-right:60px;overflow:hidden;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1.25rem;font-style:normal;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.25;color:rgb(8, 42, 77);text-decoration:none;text-overflow:ellipsis;letter-spacing:-0.01rem;white-space:nowrap}.duet-modal-heading.duet-p-0{padding:0 !important}.duet-modal-heading.duet-m-0{margin:0 !important}:host(.duet-theme-turva2) .duet-theme-turva .duet-modal{color:#172a3b}:host(.duet-theme-turva2) .duet-theme-turva .duet-modal-sticky-header{background:#fdf7f2;border-bottom:1px solid #d4dde2}";
 
@@ -174,9 +176,18 @@ const DuetModal = class {
             enableBodyScroll(this.variation === "slide-up" ? this.modalContentEl : this.modalEl);
             this.duetClose.emit();
             this.teleport.removeInertFromSiblings();
-            setTimeout(() => {
-                focusElement(this.focusedElBeforeOpen);
-            }, TRANSITION_MS);
+            if (this.focusElementOnClose !== "") {
+                setTimeout(() => {
+                    let focusEl = this.focusedElBeforeOpen;
+                    if (typeof this.focusElementOnClose === "string") {
+                        focusEl = document.getElementById(this.focusElementOnClose) || focusEl;
+                    }
+                    else {
+                        focusEl = this.focusElementOnClose || focusEl;
+                    }
+                    focusElement(focusEl);
+                }, TRANSITION_MS);
+            }
             if (this.isAndroidDevice) {
                 window.removeEventListener("resize", this.handleAndroidResizeEvents);
             }
@@ -246,6 +257,12 @@ const DuetModal = class {
     async hide() {
         this.open = false;
     }
+    /**
+     * Set focus on the close button of the modal.
+     */
+    async focusCloseButton() {
+        this.buttonEl.setFocus();
+    }
     /**
      * Scolls the top of the modal's content into view
      *
@@ -307,20 +324,16 @@ const DuetModal = class {
      */
     render() {
         var _a, _b;
-        let iconColor = "primary";
-        let closeColor = "secondary";
-        const closingButton = (h("div", { key: 'ec3d40550fa55963fb7593d76847c9cd88ce7d7f', class: "duet-modal-close" }, h("duet-button", { key: 'ba63577c49f70ce5a0afb069c611cc71889a1ecc', ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })));
-        if (this.theme === "turva") {
-            iconColor = "primary-turva";
-            closeColor = "secondary-turva";
-        }
-        return (h("div", { key: '45ef05dd96f31c9f905e06a7fd39458e896342ec', ref: modal => (this.modalEl = modal), "aria-label": (_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.heading, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: this.variation === "loader" ? "alert" : "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", class: {
+        const iconColor = postfixTheme("primary", this.theme);
+        const closeColor = postfixTheme("secondary", this.theme);
+        const closingButton = (h("div", { key: '39d89598c50f59be771033542b474cc6b7e1df0b', class: "duet-modal-close" }, h("duet-button", { key: 'b5c6f0c486eaa24d4c7747a839288562e63808bf', ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })));
+        return (h("div", { key: '07de0b18de78d147afa8cdaeadc39c877cd32dca', ref: modal => (this.modalEl = modal), "aria-label": (_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.heading, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: this.variation === "loader" ? "alert" : "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", class: {
                 "duet-modal-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-modal-active": this.open,
                 "duet-modal-slide-up": this.variation === "slide-up",
                 "duet-modal-has-sticky-header": this.hasStickyHeader,
-            } }, h("duet-overlay", { key: 'fae07b0b15aa32b393f28bcb70a2807b67d9afc1', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: 'c3afda30fb6503e4f9f2a6bdfd61b5ffadf33b98', ref: modalInner => (this.modalInnerEl = modalInner), class: {
+            } }, h("duet-overlay", { key: '08d67fe06635ffce14ed2151c9b7211740f5366f', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: '83d7365182d8a008dbceca7d19d5f110d4e3e39a', ref: modalInner => (this.modalInnerEl = modalInner), class: {
                 "duet-modal-inner": true,
                 [this.size]: true,
                 "duet-modal-slide-up": this.variation === "slide-up",
@@ -331,18 +344,22 @@ const DuetModal = class {
                         this.closeModal(e);
                     }
                 }
-            } }, h("div", { key: 'ed730970e831d8b6d399da50b2b7e27fb686b12c', ref: modalContentEl => (this.modalContentEl = modalContentEl), class: {
+            } }, h("div", { key: '926f82204442851d8fa4d3b83c49fa1b3e0970f0', ref: modalContentEl => (this.modalContentEl = modalContentEl), "aria-live": this.accessibleAnnounceChanges === "all" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "all" ? "true" : null, class: {
                 "duet-modal": true,
                 "duet-modal-has-sticky-header": this.hasStickyHeader,
                 [this.size]: true,
                 [this.variation]: true,
-            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: 'f2ee177793bd6df80606fa4ed029cc1df3cc581c' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: 'f5a12b8a53096e75656c8d7fd879055d26da43a4', class: {
+            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: 'b1b6c5d0fab63540a89c585e09db2044a9944957' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: '55e0891ac4dc8e5eaebd53740ccc2afb4759c45c', class: {
                 "duet-modal-body": true,
                 "duet-modal-gutter-none": this.gutterSize === "none",
                 "duet-modal-gutter-small": this.gutterSize === "small",
                 "duet-modal-gutter-medium": this.gutterSize === "medium",
                 "duet-modal-gutter-large": this.gutterSize === "large",
-            } }, h("div", { key: '7580715861362da09389b987b5e40c5460c9d833', class: "duet-modal-header" }, h("span", { key: 'da33874c652058416c832a1b28219bba3113fff1', class: "duet-modal-inner-slot-top" }, h("slot", { key: '5ac1de4f0ead45d55a72603d465eeff16519a059', name: "top" })), this.icon && h("duet-icon", { key: '9c44461274fde27a1b0a58c4c18a31c49821959c', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: 'b9cfb51b630ec505e221b51ff98b47f87fe84ae8', "visual-level": (_b = this.headingVisualLevel) !== null && _b !== void 0 ? _b : this.headingLevel, level: this.headingLevel, theme: this.theme }, this.heading))), this.variation === "loader" && (h("div", { key: '205e11c6fd001742285c628707cb7758a238b65d', class: "duet-modal-spinner" }, h("duet-spinner", { key: 'ce31836f38e2524b6748993ce45e1c4aed3e55f4', size: "large", color: "primary" }))), h("div", { key: '458d7617638b4ce61afe259a1a0f2d3eb6dca38c', class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el), "aria-live": this.variation === "loader" ? "assertive" : "off" }, h("slot", { key: '6e85fec665aa51db0ee3ce5726e833cd798709f5' })))))));
+            }, "aria-live": this.accessibleAnnounceChanges === "heading" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "heading" ? "true" : null }, h("div", { key: '1cab42f970d7b12c6684ac63e37324516180d168', class: "duet-modal-header" }, h("span", { key: 'a3e9c69a6eb8ebcc8e0cbb282e14438c20153f7c', class: "duet-modal-inner-slot-top" }, h("slot", { key: 'b719c6a7ae968b6687f259d061ec414326ad9301', name: "top" })), this.icon && h("duet-icon", { key: '378d48739073800b81634af0441e5b82013df9a6', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: '8052f57a3d06363e38bcf748d81e37ec8d9e7928', "visual-level": (_b = this.headingVisualLevel) !== null && _b !== void 0 ? _b : this.headingLevel, level: this.headingLevel, theme: this.theme }, this.heading))), this.variation === "loader" && (h("div", { key: 'c98e91827794451431e8f875994446ee09d5bd9f', class: "duet-modal-spinner" }, h("duet-spinner", { key: '08f09524dd18e633063e5a5ac5fced5103610d7d', size: "large", color: postfixTheme("primary", this.theme) }))), h("div", { key: 'b237e8483fd62056b4f99507a78580983b1135a8', "aria-live": this.variation === "loader"
+                ? "assertive"
+                : this.accessibleAnnounceChanges === "body"
+                    ? "polite"
+                    : null, "aria-atomic": this.accessibleAnnounceChanges === "body" ? "true" : null, class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el) }, h("slot", { key: 'f9ed9945e262cbb20ff4c51d1a2e67329eae9a5e' })))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/lib/esm/duet-multiselect.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 { D as DuetInternalLabel } from './label-CSouuUKb.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 { D as DuetInternalLabel } from './label-l-Eza5H3.js';
+import { i as inheritGlobalTheme } from './themeable-component-DPqozkF4.js';
 import { c as createID } from './create-id-Cfr_DJqU.js';
 import { a as isEscapeKey, b as isTabKey, c as isEnterKey, d as isArrowLeftKey, e as isArrowUpKey, f as isArrowRightKey, g as isArrowDownKey } from './keyboard-utils-Db8rvjPI.js';
-import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-fAqNRSrI.js';
-import { c as checkNamedSlotElement } from './slot-utils-CgXzS75x.js';
+import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-B7PXWqpg.js';
+import { c as checkNamedSlotElement } from './slot-utils-aDCRCdc4.js';
 import { p as parsePossibleJSON } from './string-utils-C6E9F6QT.js';
 
 const duetMultiselectCss = ".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:inline-flex;width:100%;max-width:100%;vertical-align:bottom}: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-multiselect-tooltip,::slotted(duet-tooltip){position:absolute;top:12px;right:0}@media (min-width: 48em){.duet-multiselect-tooltip,::slotted(duet-tooltip){position:relative;top:4px;right:auto}}.duet-multiselect-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-multiselect-container{position:relative;width:100%}.duet-multiselect-wrapper{position:relative;width: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.25}.duet-theme-turva .duet-multiselect-wrapper{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-multiselect{display:flex;align-items:center;justify-content:flex-start;width:100%;min-width:8rem;padding:12px 14px !important;overflow:hidden;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.5;color:rgb(8, 42, 77);text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;background:rgb(255, 255, 255);border:1px solid rgb(127, 150, 165);border-radius:4px;transition:150ms ease}.duet-multiselect .duet-multiselect-label{overflow:hidden;text-overflow:ellipsis}.duet-multiselect:hover{border-color:rgb(127, 150, 165);box-shadow:0 0 0 1px #909599}.duet-theme-turva .duet-multiselect:hover{border-color:rgb(143, 147, 158);box-shadow:0 0 0 1px #747475}.has-error .duet-multiselect:hover{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error .duet-multiselect:hover{box-shadow:0 0 0 1px #e55039}.duet-multiselect:focus,.duet-multiselect.duet-multiselect-active{border-color:rgb(0, 119, 179);outline:0;box-shadow:0 0 0 1px #0077b3 !important;transition:none}.duet-theme-turva .duet-multiselect:focus,.duet-theme-turva .duet-multiselect.duet-multiselect-active{border-color:rgb(23, 28, 58);box-shadow:0 0 0 1px #171c3a !important}.has-error .duet-multiselect:focus,.has-error .duet-multiselect.duet-multiselect-active{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error .duet-multiselect:focus,.duet-theme-turva.has-error .duet-multiselect.duet-multiselect-active{box-shadow:0 0 0 1px #e55039}.duet-multiselect[disabled]{color:rgb(8, 42, 77) !important;cursor:default !important;background:rgb(245, 248, 250) !important;border-color:rgb(245, 248, 250) !important;box-shadow:none !important;opacity:1 !important;-webkit-text-fill-color:rgb(8, 42, 77) !important}.duet-theme-turva .duet-multiselect[disabled]{color:rgb(23, 28, 58) !important;background:rgb(245, 247, 250) !important;border-color:rgb(245, 247, 250) !important;-webkit-text-fill-color:rgb(23, 28, 58) !important}.duet-multiselect>:first-child{flex:1;min-height:24px}.duet-multiselect .duet-multiselect-badge{padding:4px 8px 4px;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.75rem;font-weight:600;line-height:1.25;color:rgb(8, 42, 77);background:#d9ebf4;border-radius:20rem}.duet-theme-turva .duet-multiselect .duet-multiselect-badge{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-weight:700;color:rgb(23, 28, 58);background:#e8e8eb}.duet-multiselect .duet-multiselect-icon{margin-left:12px}.has-error .duet-multiselect{border-color:rgb(214, 28, 82) !important}.has-error .duet-multiselect .duet-multiselect-icon{color:rgb(214, 28, 82) !important}.duet-theme-turva.has-error .duet-multiselect{border-color:rgb(214, 28, 82) !important}.duet-theme-turva.has-error .duet-multiselect .duet-multiselect-icon{color:rgb(214, 28, 82) !important}.duet-theme-turva .duet-multiselect{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)}.duet-multiselect svg{width:20px;height:20px;color:rgb(8, 42, 77);pointer-events:none}.duet-theme-turva .duet-multiselect svg{color:rgb(23, 28, 58)}.duet-multiselect svg.duet-multiselect-icon--rotate{transform:rotate(180deg)}.duet-multiselect-checkboxes{position:absolute;z-index:700;width:100%;padding:16px;margin:8px 0 0;visibility:hidden;background:rgb(255, 255, 255);border:1px solid rgb(212, 223, 229);border-radius:4px;box-shadow:0 4px 10px 0 rgba(0, 41, 77, 0.15);opacity:0;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right}.duet-theme-turva .duet-multiselect-checkboxes{background:rgb(255, 255, 255);border-color:rgb(222, 224, 228);box-shadow:0 4px 10px 0 rgba(23, 28, 58, 0.15)}.duet-multiselect-checkboxes.duet-multiselect-checkboxes-active{visibility:visible;opacity:1;transition-property:transform, opacity;transform:scale(1.0001) translateZ(0) translateY(0)}.duet-multiselect-checkboxes .duet-multiselect-all-control-buttons{padding:8px 0;margin:-16px;margin-bottom:16px;border-bottom:1px solid rgb(212, 223, 229)}.duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button{padding:6px 16px;margin:-4px 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:600;color:rgb(0, 119, 179);cursor:pointer;border-radius:4px}.duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:focus,.duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:first-child{border-right:1px solid rgb(212, 223, 229)}.duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons 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(198, 12, 48)}.duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:hover{color:rgb(23, 28, 58)}.duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:hover{color:rgb(8, 42, 77)}.duet-multiselect-checkboxes fieldset{margin-top:8px;margin-bottom:12px}.duet-multiselect-checkboxes fieldset+fieldset{margin-top:28px}.duet-multiselect-checkboxes legend{margin-bottom:12px;font-size:1rem;font-weight:600}.duet-multiselect-help{display:block;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(98, 121, 138);border-radius:4px}.duet-multiselect-help span{display:block;margin-top:8px}.duet-theme-turva .duet-multiselect-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-multiselect-help{color:rgb(214, 28, 82)}.duet-theme-turva.has-error .duet-multiselect-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}:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect:focus,:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect.duet-multiselect-active{border-color:#172a3b}:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect[disabled]{color:#172a3b !important;background:#f5f6f7 !important;border-color:#f5f6f7 !important;-webkit-text-fill-color:#172a3b !important}:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect{color:#172a3b}:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect svg{color:#172a3b}:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect .duet-multiselect-badge{color:#172a3b;background:#e8eaeb}:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect-checkboxes{border-color:#d4dde2}:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button{color:#e61740}:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:hover{color:#172a3b}";
@@ -277,23 +277,23 @@ const DuetMultiselect = class {
      */
     render() {
         var _a;
-        return (h(Host, { key: '9462771c3a5152e905cf83ba95ade9dda200833b', class: {
+        return (h(Host, { key: '9039645a1068225798fac400466f0f782d6f508a', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-expand": this.expand,
-            } }, h("div", { key: '1235786e07d83c91d28a13462b2fa5cf8e7907e4', class: {
+            } }, h("div", { key: '2e521282f27925d3753473b8ad88673583aa9ef2', class: {
                 "duet-multiselect-container": true,
                 "duet-label-hidden": this.labelHidden,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h(DuetInternalLabel, { key: '5ccd987600f461c3c9a7f7c2f46b602f169b658d', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: 'e519c7bf79fa2214804ca502285f52a553b79ac3', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: 'cfc287863231de5436fc09d8cd57b53d4ef24820', name: "tooltip" }), this.caption && (h("duet-caption", { key: '28baa67909e4027ae56a35d87a4e15a5f118e703', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '2b734b81c229392334276022638d7265e23c2168', class: "duet-multiselect-wrapper" }, h("button", { key: 'd6fb96ae298ce6e3d7df71217c728f29e1550c9a', id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { key: '7581bf2f7629efe48e128c941beee89c4d22f709', role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("span", { key: '7b747555309afe0dc4716f4335269a5dc46f17ff', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: '22f9e68fe690b60dfe7e28ba5767d613e1037070' }, this.selectedLangObject[this.language], ",", " ", Array.isArray(this.value) ? this.value.map(item => item.label).join(", ") : ""))), h("svg", { key: '8058039ac3e9c6cf1fdf9b45468adc80673e7096', class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ac8d3582da5151508ede09fe95ea1fe7a6b79444', d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { key: '0c1236ae0fad913c3e9d2fdd2d8a558467d415e8', id: `${this.identifier}-checkboxes`, role: "listbox", class: {
+            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h(DuetInternalLabel, { key: '201f6c1455bdcd9f91b55ce0a0b4cd4a9d0320d0', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '121b63fbe0bd9421760ba61450a98c5b45033b60', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '7eda0177c7e86224b0cc85f1ef9fe9861c689d33', name: "tooltip" }), this.caption && (h("duet-caption", { key: 'd13578e0bd40d7f37c4e7806f49f88020632ecfc', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '6612657d3f9c621dd266233f3c181f15131888f6', class: "duet-multiselect-wrapper" }, h("button", { key: '1f302558ed3d929b35608bd8993a34cea470e248', id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { key: '6a5d345b0703da1d72fb28f1b8da5aaf708f1718', role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("span", { key: '7c9de445eddbe7aa6cc7ab0e6f950e24255c83f5', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: '5484d17e999f5c43e0b1c55d74809fd731702c8f' }, this.selectedLangObject[this.language], ",", " ", Array.isArray(this.value) ? this.value.map(item => item.label).join(", ") : ""))), h("svg", { key: '27d2c25756197490d9ad767b717bcc0a65f321a8', class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '60d61a8ab5924b9b6efa3f90b2c5ad680b9caa90', d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { key: 'c95d55f51da346b5cbd36f784ae32033f702e03d', id: `${this.identifier}-checkboxes`, role: "listbox", class: {
                 "duet-multiselect-checkboxes": true,
                 "duet-multiselect-checkboxes-active": this.checkboxesVisible,
-            }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, ((_a = this.processedItems) === null || _a === void 0 ? void 0 : _a.length) && this.allControls && (h("div", { key: '2117b075e96a7825514769fde136f51b1ebf59f9', class: "duet-multiselect-all-control-buttons" }, h("button", { key: 'ca41c3bf1cb8dc88c6bf4c5d237e8e3cc5fccd6c', class: "duet-multiselect-select-all", onClick: this.handleSelectAllClick, id: this.getOptionIdentifier(-2), onKeyDown: (e) => this.onCheckboxKeyDown(e, -2) }, this.selectAllLabel[this.language]), h("button", { key: '7070fc9475815328dc21256e8ddf279f182dd2ad', class: "duet-multiselect-clear-all", onClick: this.handleClearAllClick, id: this.getOptionIdentifier(-1), onKeyDown: (e) => this.onCheckboxKeyDown(e, -1) }, this.clearAllLabel[this.language]))), this.processedItems &&
+            }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, ((_a = this.processedItems) === null || _a === void 0 ? void 0 : _a.length) && this.allControls && (h("div", { key: '960369ca4a160516357ece0d5e68e5ab91ce468b', class: "duet-multiselect-all-control-buttons" }, h("button", { key: '9eafc40e7ba1a7d145c10ab150c0f212e74f3940', class: "duet-multiselect-select-all", onClick: this.handleSelectAllClick, id: this.getOptionIdentifier(-2), onKeyDown: (e) => this.onCheckboxKeyDown(e, -2) }, this.selectAllLabel[this.language]), h("button", { key: '3e8788a43be5d079e60384996624141f20cc7ead', class: "duet-multiselect-clear-all", onClick: this.handleClearAllClick, id: this.getOptionIdentifier(-1), onKeyDown: (e) => this.onCheckboxKeyDown(e, -1) }, this.clearAllLabel[this.language]))), this.processedItems &&
             this.processedGroups.map(group => (h("fieldset", null, group.label && h("legend", null, group.label), group.items.map((item, key) => {
                 var _a, _b;
                 return (h("duet-checkbox", { identifier: this.getOptionIdentifier(key), role: "option", label: item.label, value: item.value, key: item.value, checked: (_a = this.value) === null || _a === void 0 ? void 0 : _a.includes(item), "accessible-selected": ((_b = this.value) === null || _b === void 0 ? void 0 : _b.includes(item)) ? "true" : undefined, disabled: !this.checkboxesVisible || item.disabled, onDuetChange: e => this.toggleCheckbox(e, item), onKeyDown: (e) => this.onCheckboxKeyDown(e, key), theme: this.theme }));
-            })))))), h("span", { key: '5842f53e10a3f9984cb668fa4730e7d18bb03a21', class: "duet-multiselect-help duet-multiselect-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'd9ba81594560d3f2c01f50b4832736144aeafe71' }, this.error)))));
+            })))))), h("span", { key: 'a33a3bb5da53083960cda036401e48b578c32747', class: "duet-multiselect-help duet-multiselect-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'abf98e9c3d01f524e5293f13929281d0e80f8b42' }, this.error)))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/lib/esm/duet-nav.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';
 
 const duetNavCss = "*,*::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([sticky]){position:relative;z-index:300}.container{position:relative;z-index:400}::slotted(*[slot=mobile]){display:inherit}::slotted(*[slot=desktop]){display:none}@media (min-width: 62em){::slotted(*[slot=mobile]){display:none}::slotted(*[slot=desktop]){display:inherit}}.sticky{position:sticky;top:0}@media (min-width: 62em){.sticky{position:relative;top:unset}}";
 
@@ -30,7 +30,7 @@ const DuetNav = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'eba9be23a2185429204c40d8bc881d36ba4347b2' }, h("div", { key: '92a2c02b1be2e6d2422f48b4ca0ceb62599af14a', class: { container: true, sticky: this.sticky } }, h("slot", { key: 'b7061a136c9003c794cd95a673e35e9275d57a1e' }), h("slot", { key: '27b5c3e8d84d665200d5df42b98bfc0c376324f4', name: "mobile" }), h("slot", { key: 'edf2f2ef8f2db435f9a54c41eb0992b7e0a080d0', name: "desktop" }))));
+        return (h(Host, { key: 'fff23e9c9f994ed80cebebdf7bb16d05a0b13281' }, h("div", { key: 'bf9f4a0d164a27073a8f3be2fc14e7f14f39e479', class: { container: true, sticky: this.sticky } }, h("slot", { key: '4fa7cc506db4c4b6fa9ff5219ba7b7e56107a8da' }), h("slot", { key: 'e9e8c0e724f76feb3aa320207f5a3ef7a7ab5ac9', name: "mobile" }), h("slot", { key: '49e37c33533e3ba9c733660c0420d85a3a63e80f', name: "desktop" }))));
     }
     get element() { return getElement(this); }
 };

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

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, g as getElement } from './index-CUNSbdt4.js';
-import { i as inheritGlobalTheme } from './themeable-component-EVqsr6Ut.js';
+import { r as registerInstance, h, g as getElement } from './index-B_VBeM3r.js';
+import { i as inheritGlobalTheme } from './themeable-component-DPqozkF4.js';
 import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-Db8rvjPI.js';
-import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-fAqNRSrI.js';
+import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-B7PXWqpg.js';
 import { a as arrowDownIcon } from './action-arrow-down-small-Bk3GShyI.js';
 import './string-utils-C6E9F6QT.js';
 import './_commonjsHelpers-DvwKrUS6.js';
@@ -79,11 +79,11 @@ const DuetNotification = class {
         this.linkElement.focus(options);
     }
     render() {
-        return (h("div", { key: 'e9780a745bc103c0eab1387924e9382dc60bff3c', role: "listitem", class: {
+        return (h("div", { key: '16098cf5ca86dd0bd72d9429d1e78557246f850b', role: "listitem", class: {
                 "duet-notification": true,
                 "duet-notification-highlight": this.highlight,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("a", { key: '431b8cdff6f259708fc7ad25c2f5cd6c9392bb95', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: 'c8cc56cc53bb242a159aa4a03d3e60d984388630', class: "duet-notification-container" }, h("div", { key: '72bd20f9dc41cbe781591acb8b629ddd7826c332', class: "duet-notification-badge-container" }, this.highlight && (h("div", { key: 'fb2ed998c5a7389dbf0d70f475929092ef2e33f4', class: "duet-notification-badge" }, h("duet-visually-hidden", { key: '0d788165d1ad770a2debcd3efb212d5cd394f32c' }, this.accessibleLabelUnread, ":")))), h("div", { key: 'd9831696985ad34b1bacb4cd7e0ba0466784f44b', class: "duet-notification-content" }, h("slot", { key: '1611ad31717366e3852e70a742be63ebb1283e14' })), h("div", { key: 'ef31c5774b1164e4703f15f6b8a32985b294bd7c', class: "duet-notification-date" }, this.date)))));
+            } }, h("a", { key: '440018559e85d3ae11cde70edbaa3848cb453995', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: '6b14d618dda184d06f059b1a3acf99e38e5c17f3', class: "duet-notification-container" }, h("div", { key: 'f65f90dc005eb72c52335cc5c8ca39bffdd88c8a', class: "duet-notification-badge-container" }, this.highlight && (h("div", { key: '7e64283158dd4015c8f676f6ee03efe2cefae043', class: "duet-notification-badge" }, h("duet-visually-hidden", { key: 'c306ae4dc490d35c8aff9259ba3fdf182a5f7e00' }, this.accessibleLabelUnread, ":")))), h("div", { key: '444db9cd85d2dab3181834ba371e1d01f2e6b596', class: "duet-notification-content" }, h("slot", { key: 'efebf98a71ddb109a1bf26729ca0365a624e9f18' })), h("div", { key: 'e9dd7f7817e9e5fd06f38c33225d0821db760cd4', class: "duet-notification-date" }, this.date)))));
     }
     get element() { return getElement(this); }
 };
@@ -212,10 +212,10 @@ const DuetNotificationDrawer = class {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: '659136cc65a195a1de4228bd580d2368d2244a86', class: {
+        return (h("div", { key: '5a100874ee332b5f81a62d4d398273cfb1b039e6', class: {
                 "duet-drawer": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: this.handleKeyDown }, h("button", { key: 'abe8757b0f4db9939465b4ab6011c8625b5baf76', ref: el => (this.drawerButtonEl = el), type: "button", class: "duet-drawer-toggle", id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (h("div", { key: 'a99654516249d53e1a9fd81021998c2e461365a7', class: "duet-drawer-icon" }, h("duet-icon", { key: '76b8f2f443ab22637765dfef1db4000215ef5a19', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("div", { key: '6efbba81b7cf33402531b445e5e297d5e48a4fc6', class: "duet-drawer-badge" }))), h("span", { key: '5b9df974799ba860b7d2d964fc22c50d18aa0282', class: "duet-drawer-label" }, this.label), h("div", { key: 'ed02df2f85e017956770c841d1882b6a6ae45280', class: "duet-drawer-caret" }, h("duet-icon", { key: '646368ab0a187e896f1110e4015a05b3bad71a9d', margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))), h("div", { key: '0e2cfc291004260d5f02350fd624396768c06b3b', id: "duet-drawer-content", class: {
+            }, onKeyDown: this.handleKeyDown }, h("button", { key: '277c6476693a7d387596fbfbfb23abc166faebc9', ref: el => (this.drawerButtonEl = el), type: "button", class: "duet-drawer-toggle", id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (h("div", { key: 'd951e69affa0c3eb4ec008e8aeb89ec555e36206', class: "duet-drawer-icon" }, h("duet-icon", { key: '2aac18cf9ac8ef0f7294eba31290be645b8d6492', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("div", { key: '58263ae4479e929348353d164fd036a8e822ba8d', class: "duet-drawer-badge" }))), h("span", { key: 'e046d2b1be747afa753163314d777aea3dd25eda', class: "duet-drawer-label" }, this.label), h("div", { key: '34cbbf033a8ac22acb04e995235df355a22c806d', class: "duet-drawer-caret" }, h("duet-icon", { key: '2b3c734862192aeaa3b8e7866a08000fd6e776d9', margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))), h("div", { key: 'c2f6ce8c30baba066a0eda032d3162638a24b0a6', id: "duet-drawer-content", class: {
                 "duet-drawer-content": true,
                 "duet-drawer-right": this.direction === "right",
                 "duet-drawer-left": this.direction === "left",