@duetds/components 9.12.2 → 9.14.0

package/lib/dist-custom-elements/duet-menu-bar-item.js

@@ -1,13 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-daa2778f.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-fddb3ec1.js';
 import { a as actionNewWindowSmall } from './p-f11208c3.js';
 import { D as DuetStringsExternalDefaults } from './p-9b044291.js';
-import { i as inheritGlobalTheme } from './p-6f57e174.js';
+import { i as inheritGlobalTheme } from './p-3757c660.js';
 import { g as getAccessibleLinkLabel } from './p-1e3171d9.js';
 import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-d9b2e80e.js';
-import { d as defineCustomElement$2 } from './p-16f01714.js';
+import { d as defineCustomElement$2 } from './p-d5c72ea3.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}}";
 const DuetMenuBarItemStyle0 = duetMenuBarItemCss;
@@ -56,11 +56,11 @@ const DuetMenuBarItem$1 = /*@__PURE__*/ proxyCustomElement(class DuetMenuBarItem
      */
     render() {
         const TagName = this.url ? "a" : "button";
-        return (h(Host, { key: '78cb2d5a9f36203918418ade091de2156c3a290e', role: "listitem" }, h(TagName, { key: '90b92ad5dc5b77d425d19471f115aa94179428c4', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: '135b92b36c52ad014567c93c0bfacff2001f16ef', role: "listitem" }, h(TagName, { key: 'd8772442ee0a49f7c300c398ef4021acf0fb74f0', 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: '69d0ae59d451360c14945e1517c26e9d017f4d7a', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'a7903797ed84cb566185ca79f8bacfae5d88bb28' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: 'c300697850a2cd3bd6b9236e29be7433fcec7e45', 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: '31ac80c4f12447cadcd0def7a2941a98d063a1cc', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '1f9e4b935f68d57288190e3572dabe90c2c49efb' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: '24c559a7d56a2adce2fc4aa7d00c2eb5682c2c8e', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!this.external,

package/lib/dist-custom-elements/duet-menu-bar-link.js

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-daa2778f.js';
-import { i as inheritGlobalTheme } from './p-6f57e174.js';
-import { d as defineCustomElement$2 } from './p-16f01714.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-fddb3ec1.js';
+import { i as inheritGlobalTheme } from './p-3757c660.js';
+import { d as defineCustomElement$2 } from './p-d5c72ea3.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}}";
 const DuetMenuBarLinkStyle0 = duetMenuBarLinkCss;
@@ -30,11 +30,11 @@ const DuetMenuBarLink$1 = /*@__PURE__*/ proxyCustomElement(class DuetMenuBarLink
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'a253a92fe5b3c7bd02870ef60733f31208778829', role: "listitem" }, h("a", { key: '6cc592290262edf3bf027c15be55aea0d05b2185', class: {
+        return (h(Host, { key: '27e73349cd24930dd1d7ddee302de2260471c5a8', role: "listitem" }, h("a", { key: '524e83c821e67703be8ec2cdb09e937d04202ff2', 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: '8a6c8ee57536ab2a5edee32c75c86988277a7b49', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'f8c916a98522baae5e70febed4316c6cd3daa3dc' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'e85b83e58a78898ca57f6db72178915e4cad29f5', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '11758cbe02d818cb5f5f7af2a8832d1712c99fa5' }))));
     }
     get element() { return this; }
     static get style() { return DuetMenuBarLinkStyle0; }

package/lib/dist-custom-elements/duet-menu-bar.js

@@ -1,13 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-daa2778f.js';
-import { a as media_query_large, b as media_query_xx_large } from './p-d32bd233.js';
-import { i as inheritGlobalTheme } from './p-6f57e174.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-fddb3ec1.js';
+import { i as inheritGlobalTheme } from './p-3757c660.js';
 import { a as getLanguage } from './p-d9b2e80e.js';
-import { d as defineCustomElement$2 } from './p-38225a71.js';
+import { d as defineCustomElement$2 } from './p-5e16131c.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 DuetMenuBarStyle0 = duetMenuBarCss;
 
 const DuetMenuBar$1 = /*@__PURE__*/ proxyCustomElement(class DuetMenuBar extends H {
@@ -16,14 +15,6 @@ const DuetMenuBar$1 = /*@__PURE__*/ proxyCustomElement(class DuetMenuBar extends
         this.__registerHost();
         this.__attachShadow();
         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.scrollbarCheck = () => {
             this.leftMoreVisible = this.container.scrollLeft > 0;
@@ -51,15 +42,6 @@ const DuetMenuBar$1 = /*@__PURE__*/ proxyCustomElement(class DuetMenuBar extends
             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",
@@ -76,11 +58,13 @@ const DuetMenuBar$1 = /*@__PURE__*/ proxyCustomElement(class DuetMenuBar extends
         this.leftMoreVisible = false;
         this.rightMoreVisible = false;
         this.centerSlotUsed = false;
+        this.mediaQueryMediumMatches = false;
         this.theme = "";
         this.language = getLanguage();
         this.logo = true;
         this.logoHref = undefined;
         this.logoLinkAccessibleLabel = undefined;
+        this.logoInfoText = undefined;
         this.accessibleLabel = undefined;
         this.hideOnScroll = false;
     }
@@ -116,26 +100,8 @@ const DuetMenuBar$1 = /*@__PURE__*/ proxyCustomElement(class DuetMenuBar extends
         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();
@@ -156,14 +122,17 @@ const DuetMenuBar$1 = /*@__PURE__*/ proxyCustomElement(class DuetMenuBar extends
     render() {
         const slideoutAvailable = document.querySelectorAll("duet-slideout").length > 0;
         const isUsedAsAdditionalHorizontalNav = slideoutAvailable && !this.logo;
-        return (h(Host, { key: '664846aed5fa5418883aa8e7d285f43bca31b9b7' }, h("nav", { key: '67eb2be48aa07d8839de507ac2e7a3d549a7bf1b', class: {
+        return (h(Host, { key: '5f05a259d0950cb2cdbc37222b1007ba49d5fe53' }, h("nav", { key: '24398b2d0d6d01c22eef86430e0f7db7c6b97171', 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: 'e4cb471892ccd3b07e2ba137cfe5f09d2aede935', class: "top" }), h("div", { key: 'a3956e49657add3b004a7f48c1039c95e768cf3f', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: 'daa83bf253d89d2691a128d4449ec3bd27a0fd1c' }, h("duet-logo", { key: '519732ee4b3a9e8db70315d561859b569c3acf9d', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: '7baa6a6cfbfcfe80e4965d9a2ba8fbd5c2e908fb', class: "list center", role: "list" }, h("div", { key: '214ec3b02204a0ff8f09f5ebe8545b3b52e4b27a', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: '8f039e09a7b69764151356d5697a2ab65e7b5a2e', name: "center" }), h("div", { key: '25fb60d81a3cb648049e51f9497282feddf24d48', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: 'b86943b205d836a309c61260e20599ff95bf1a1a', class: "list right", role: "list" }, h("slot", { key: '16eaaf4fb82ae25c9fd3d8324134f100b0b77c19', name: "right" }))), h("div", { key: '637eb362a07458d226c916447385262fb2b0c32d', class: "bottom" }))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'abf2962527bf92ead5a89f8648ff3b88a73fbc55', class: "top" }), h("div", { key: '068d450752f636f98e7cdeb5043e6bf9297b4c3d', class: { container: true, "with-info-text": !!this.logoInfoText && !this.centerSlotUsed }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '7e5b816d6ae4e36268ee911cadf56358a864e264' }, h("duet-logo", { key: 'c1a02ba4230ab960c1e01d20636a23d015823580', 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: 'fa3ba5116af9eecd8d886f546c4bdef922bbdd4d', 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: 'a3593373202664a79f8095931fa53d72e1f6c188', 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: 'ebf9c252a82db480eff2fca195f87dfcd2a186f4', class: {
+                "duet-logo-info-text": true,
+                "duet-theme-turva": this.theme === "turva",
+            } }, this.logoInfoText)))), h("div", { key: '980619619bf98cc80c36dc5c8d27042f97ff492d', class: "list center", role: "list" }, h("div", { key: 'b6f5e67dd04a56da886a3795b21b2f3f4d7e0393', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: 'f5bc728c183398eba439475b6a29771476944b5b', name: "center" }), h("div", { key: 'bf7274db341938f7f0a8fa7784985a6239a5fcc6', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '6e3343fcef3b45b1a6e741c673d072b994cf4110', class: "list right", role: "list" }, h("slot", { key: '3a76e5089f8cc4a1e04786a61c2f8e9cb1160426', name: "right" }))), h("div", { key: '6041af35982542751bb94df6ebc8725dd17a6349', class: "bottom" }))));
     }
     get element() { return this; }
     static get style() { return DuetMenuBarStyle0; }
@@ -173,6 +142,7 @@ const DuetMenuBar$1 = /*@__PURE__*/ proxyCustomElement(class DuetMenuBar extends
         "logo": [1028],
         "logoHref": [1025, "logo-href"],
         "logoLinkAccessibleLabel": [1025, "logo-link-accessible-label"],
+        "logoInfoText": [1, "logo-info-text"],
         "accessibleLabel": [1, "accessible-label"],
         "hideOnScroll": [4, "hide-on-scroll"],
         "hidden": [32],
@@ -180,7 +150,8 @@ const DuetMenuBar$1 = /*@__PURE__*/ proxyCustomElement(class DuetMenuBar extends
         "logoSize": [32],
         "leftMoreVisible": [32],
         "rightMoreVisible": [32],
-        "centerSlotUsed": [32]
+        "centerSlotUsed": [32],
+        "mediaQueryMediumMatches": [32]
     }, [[9, "scroll", "checkScroll"], [9, "resize", "onWindowResize"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/lib/dist-custom-elements/duet-modal.js

@@ -1,22 +1,23 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-daa2778f.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-fddb3ec1.js';
 import { d as disableBodyScroll, e as enableBodyScroll } from './p-8354d1f1.js';
-import { i as inheritGlobalTheme } from './p-6f57e174.js';
+import { i as inheritGlobalTheme } from './p-3757c660.js';
 import { c as DuetStringsPleaseWaitDefaults } from './p-9b044291.js';
 import { f as focusElement } from './p-e30dc66d.js';
 import { b as isEscapeKey } from './p-8db11326.js';
 import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-d9b2e80e.js';
 import { h as hasSlot } from './p-f21662ea.js';
 import { T as Teleport } from './p-8cb0e6bd.js';
-import { d as defineCustomElement$8 } from './p-1a647490.js';
-import { d as defineCustomElement$7 } from './p-b879c406.js';
-import { d as defineCustomElement$6 } from './p-16f01714.js';
-import { d as defineCustomElement$5 } from './p-74971fe9.js';
-import { d as defineCustomElement$4 } from './p-7b0e3959.js';
-import { d as defineCustomElement$3 } from './p-6f969e11.js';
-import { d as defineCustomElement$2 } from './p-14f9f7a0.js';
+import { p as postfixTheme } from './p-499da71e.js';
+import { d as defineCustomElement$8 } from './p-65300e85.js';
+import { d as defineCustomElement$7 } from './p-706a9a13.js';
+import { d as defineCustomElement$6 } from './p-d5c72ea3.js';
+import { d as defineCustomElement$5 } from './p-e9c8ad74.js';
+import { d as defineCustomElement$4 } from './p-db2b09ab.js';
+import { d as defineCustomElement$3 } from './p-9f715fa9.js';
+import { d as defineCustomElement$2 } from './p-36f6ec52.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}";
 const DuetModalStyle0 = duetModalCss;
@@ -78,6 +79,8 @@ const DuetModal$1 = /*@__PURE__*/ proxyCustomElement(class DuetModal extends H {
         this.color = "";
         this.active = false;
         this.closeOnBlur = false;
+        this.focusElementOnClose = undefined;
+        this.accessibleAnnounceChanges = undefined;
     }
     openChanged() {
         if (this.open) {
@@ -124,9 +127,18 @@ const DuetModal$1 = /*@__PURE__*/ proxyCustomElement(class DuetModal extends H {
             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);
             }
@@ -194,6 +206,12 @@ const DuetModal$1 = /*@__PURE__*/ proxyCustomElement(class DuetModal extends H {
     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
      *
@@ -255,20 +273,16 @@ const DuetModal$1 = /*@__PURE__*/ proxyCustomElement(class DuetModal extends H {
      */
     render() {
         var _a, _b;
-        let iconColor = "primary";
-        let closeColor = "secondary";
-        const closingButton = (h("div", { key: '675dc50327ab1e0f8033a2befcdf37cd4d3e0bf2', class: "duet-modal-close" }, h("duet-button", { key: '4184913dd9b92a9b95f1d5e773800766530b97cf', 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: '0751e3ddbaa09c8c1abc7986e3fabd97dba82be6', 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: '9de636719074c96f49913c1a19b33329ae39a3a0', class: "duet-modal-close" }, h("duet-button", { key: '1852a8322aaeb49c937cfd4b4d80d61073f12f96', 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: '4c602c318db94b02ca730640b8c0c6fc7eb96453', 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: 'c1e924fd65887cf4378aab5b0a8a240ed48eb04a', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: 'a9e7ab02f299be796797683d7f1ba696bc5c884f', ref: modalInner => (this.modalInnerEl = modalInner), class: {
+            } }, h("duet-overlay", { key: 'c70e730388bdfa452ab51fb810304ba004022885', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: 'ceae3fcf909fdfa380eaddc2f8c9ac2637fc8810', ref: modalInner => (this.modalInnerEl = modalInner), class: {
                 "duet-modal-inner": true,
                 [this.size]: true,
                 "duet-modal-slide-up": this.variation === "slide-up",
@@ -279,18 +293,22 @@ const DuetModal$1 = /*@__PURE__*/ proxyCustomElement(class DuetModal extends H {
                         this.closeModal(e);
                     }
                 }
-            } }, h("div", { key: '86107c52f7cdb102f409586020bdeb116c041720', ref: modalContentEl => (this.modalContentEl = modalContentEl), class: {
+            } }, h("div", { key: 'c0559f2b2d236a3e0fd339cd65900d400547fb70', 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: 'c728a3caf6df68ed0c97baf1425c2ddab6a98f5b' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: '36b15d0c3595fdcecc6f14abb3578eefef74a8c9', class: {
+            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: '81664165163cd30e192906cb50bb71a4906256ba' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: '92c81c3e5545b4a08b93b3174a888cc42837f2ac', 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: '5dfb5b08e6593777e82f58c9a8d4db36cd3efbbc', class: "duet-modal-header" }, h("span", { key: '0a95f7b53f47eb9e75ea99a007b0951b9a0fe11a', class: "duet-modal-inner-slot-top" }, h("slot", { key: '56cbb6d090f309f66c7e79f90b3b8b4920501fca', name: "top" })), this.icon && h("duet-icon", { key: '1918983d8ba93e09a80ab19f9dd2d5d88b9c483e', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: '7e77994203cb473aa15b6e7356660278bad02d57', "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: 'cb74816a66ac5eb67938c8a4358d0ecb2f7769f3', class: "duet-modal-spinner" }, h("duet-spinner", { key: '70156c240cc4d32e660349992be704be48d55c54', size: "large", color: "primary" }))), h("div", { key: '7d20cd4b16628ed66118f41c9f2cb626cb87fd6b', class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el), "aria-live": this.variation === "loader" ? "assertive" : "off" }, h("slot", { key: '229d35cca36167acf3d262376b3d11a6473d5635' })))))));
+            }, "aria-live": this.accessibleAnnounceChanges === "heading" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "heading" ? "true" : null }, h("div", { key: '72936aa2c2d2551e34b2c2d7344f666d49c3d0f4', class: "duet-modal-header" }, h("span", { key: '30ac91712c2d7065901679fcf1cd5cb0191cbb11', class: "duet-modal-inner-slot-top" }, h("slot", { key: 'c7e4bd42dfac73ebdfcf98f9d16438c14945d30b', name: "top" })), this.icon && h("duet-icon", { key: '3664c556ad580c917e80e796df4236f89134ab9d', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: 'd77b16d2577ce36f4e135790a7f49d8a2b17096c', "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: 'ed0fa900e15be0fef3166e61f2f7c860dab067f0', class: "duet-modal-spinner" }, h("duet-spinner", { key: '1d15d8e837273755c1c6242098e198f51c1cda90', size: "large", color: postfixTheme("primary", this.theme) }))), h("div", { key: '4d06b9164f277a7cc586a6b754429764cccb1f2e', "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: '520b8542f921248916d3470204ce4ee2533da5ee' })))))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -318,9 +336,12 @@ const DuetModal$1 = /*@__PURE__*/ proxyCustomElement(class DuetModal extends H {
         "color": [1],
         "active": [1540],
         "closeOnBlur": [1028, "close-on-blur"],
+        "focusElementOnClose": [1, "focus-element-on-close"],
+        "accessibleAnnounceChanges": [1, "accessible-announce-changes"],
         "open": [32],
         "show": [64],
         "hide": [64],
+        "focusCloseButton": [64],
         "scrollToTop": [64],
         "addMessage": [64]
     }, [[8, "keyup", "handleKeyUp"]], {

package/lib/dist-custom-elements/duet-multiselect.js

@@ -1,21 +1,21 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-daa2778f.js';
-import { i as inheritGlobalTheme } from './p-6f57e174.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-fddb3ec1.js';
+import { i as inheritGlobalTheme } from './p-3757c660.js';
 import { c as createID } from './p-5e59e970.js';
 import { b as isEscapeKey, d as isTabKey, c as isEnterKey, j as isArrowLeftKey, f as isArrowUpKey, k as isArrowRightKey, g as isArrowDownKey } from './p-8db11326.js';
 import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-d9b2e80e.js';
 import { c as checkNamedSlotElement } from './p-f21662ea.js';
 import { p as parsePossibleJSON } from './p-9c3c64b9.js';
-import { d as defineCustomElement$9 } from './p-b34c0bc0.js';
-import { d as defineCustomElement$8 } from './p-e40817b6.js';
-import { d as defineCustomElement$7 } from './p-16f01714.js';
-import { d as defineCustomElement$6 } from './p-1b344cf7.js';
-import { d as defineCustomElement$5 } from './p-f42fd1a5.js';
-import { d as defineCustomElement$4 } from './p-b760d510.js';
-import { d as defineCustomElement$3 } from './p-64f1c43c.js';
-import { d as defineCustomElement$2 } from './p-14f9f7a0.js';
+import { d as defineCustomElement$9 } from './p-dc970fdb.js';
+import { d as defineCustomElement$8 } from './p-10893657.js';
+import { d as defineCustomElement$7 } from './p-d5c72ea3.js';
+import { d as defineCustomElement$6 } from './p-3471fa90.js';
+import { d as defineCustomElement$5 } from './p-f290964d.js';
+import { d as defineCustomElement$4 } from './p-f479ee47.js';
+import { d as defineCustomElement$3 } from './p-85f0068e.js';
+import { d as defineCustomElement$2 } from './p-36f6ec52.js';
 
 const duetMultiselectCss = "*,*::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-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}";
 const DuetMultiselectStyle0 = duetMultiselectCss;
@@ -238,23 +238,23 @@ const DuetMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class DuetMultiselect
      */
     render() {
         var _a;
-        return (h(Host, { key: 'e933fce43ece20fa3594dda5d6d94ccec3eee384', class: {
+        return (h(Host, { key: '5b6e1d90d6ac55b6572f755b273359a4942de03c', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-expand": this.expand,
-            } }, h("div", { key: '172c8416e6bcea127b91615f030e589d55456577', class: {
+            } }, h("div", { key: '42c64faf69c0e05c608d915ef295c7f04507de3e', 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("duet-label", { key: 'c527b091b91bbc52d86e99d5dff9115cc8d6aeeb', 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: 'f3596fdcc13e54984e38299db1cd32a541ce22aa', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '5c0ec4c3de6ed4d0df0e9ecc97e10b16ec52974f', name: "tooltip" }), this.caption && (h("duet-caption", { key: '8cae964591dce5a58a576ed00209f1f50b89bd1b', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '31780c7861708d52df9f5bc7fd7714259a2abdb8', class: "duet-multiselect-wrapper" }, h("button", { key: '2ffdcde08e1d5fcc3c63bcfd48bf22831dea2296', 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: '2b04c64dd7004356a0dd7833be28935c39e50217', 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: 'c952cd7f33d700d4af685ff3b7fc19de02054f1f', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: 'b9bf58b48509aaedd4f2e0cb05aec8cc192f2eee' }, this.selectedLangObject[this.language], ", ", this.value.map(item => item.label).join(", ")))), h("svg", { key: '5ecaefc2630e9810f4f9f5887677b9f87dc91ff1', 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: '4c3240169e55ab9b2daca51cce27dfc8c20dbeb0', 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: 'b473ebcd1f110e4d6151b5dbc49b08f6347eae37', id: `${this.identifier}-checkboxes`, role: "listbox", class: {
+            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h("duet-label", { key: '62a7becf4dc2411071c59ba7aa11ac8ffe59d10f', 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: '1af019df96ed925e720df2185ce8550e17bc3d13', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '12aca2ebbc428087ff72677118ed94b3937626a1', name: "tooltip" }), this.caption && (h("duet-caption", { key: '019a13573c4f09327bb85d19d78fd62df2a19ec5', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '6be290abbd25957f4849d67b2027cc8be3bd3d5f', class: "duet-multiselect-wrapper" }, h("button", { key: '97d828de6991623f141f37b096cfacd3f2d71893', 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: '84fae0748a4ad41ad9acdd9f84914f8cb6d86a73', 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: '1099b73e404bff6a29affe5a9ac8d274b3043635', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: 'd3ffa065cbdb21c570d090ab5e00bb66d7f61e5b' }, this.selectedLangObject[this.language], ", ", this.value.map(item => item.label).join(", ")))), h("svg", { key: '36d83fe06bdeb6fb2ec527ee00d0b4dbf516d2b4', 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: 'fe716d3a1dd834f3e0ffa400adf5c6c739c597b4', 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: 'e8a2854bf90c63117909679f114a33b05e90d875', 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: '9f299cd541560553ea17e375851abb114dc8008f', class: "duet-multiselect-all-control-buttons" }, h("button", { key: 'dcf47773c56375580656437e03ccd4e0a66614e9', 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: '601c87eb96bfe560d68f6a8d9680278b60e1cc10', 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: '6caec2f7891c084ce21925e0e88c89b3fb8003ad', class: "duet-multiselect-all-control-buttons" }, h("button", { key: 'e6d0bb2f3dda58a1f067f25d29f51a39a1fbacf2', 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: '44ed480da7790492fb59104916824512823db17b', 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: '40712a9ae545260e392b6bbe7fc741a8ff4981bf', 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: 'eb59b5ccb5fa6ccff42f7b1ac44d0439874561ed' }, this.error)))));
+            })))))), h("span", { key: '24258b589cff6e202daaea401563647f8521ba3d', 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: 'edbe9b532e550088d66073eeca1a521ffe478ad7' }, this.error)))));
     }
     get element() { return this; }
     static get watchers() { return {

package/lib/dist-custom-elements/duet-nav.js

@@ -1,8 +1,8 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-daa2778f.js';
-import { i as inheritGlobalTheme } from './p-6f57e174.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-fddb3ec1.js';
+import { i as inheritGlobalTheme } from './p-3757c660.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}}";
 const DuetNavStyle0 = duetNavCss;
@@ -26,7 +26,7 @@ const DuetNav$1 = /*@__PURE__*/ proxyCustomElement(class DuetNav extends H {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'b2c2d87c29d07d11c1676681d1c1a60ef70ff9db' }, h("div", { key: '0f56f360c8fffa3551d9d444fd304b1631cab66e', class: { container: true, sticky: this.sticky } }, h("slot", { key: '6659d61b2bc3900452b84e6fafa8f7a8b6846af3' }), h("slot", { key: '908166b86fc4d025decbe75ba53ef2f295dc825f', name: "mobile" }), h("slot", { key: '9533b0f6f9616b5994513feeda5b82ad4316765c', name: "desktop" }))));
+        return (h(Host, { key: '1bd9e1c748e898763d70850e3e7995557aa70828' }, h("div", { key: '256c0acc4e956aea59eb153bc7b3bad1126501f3', class: { container: true, sticky: this.sticky } }, h("slot", { key: '64f9a6096d183ce0cbd496db4dcee65d565e15b9' }), h("slot", { key: 'b0f455061d1e7d8affab734c72b8479239184b0b', name: "mobile" }), h("slot", { key: 'dce4933ac2f67107843c4121100f7adae7a3b72f', name: "desktop" }))));
     }
     get element() { return this; }
     static get style() { return DuetNavStyle0; }

package/lib/dist-custom-elements/duet-notification-drawer.js

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h } from './p-daa2778f.js';
+import { p as proxyCustomElement, H, h } from './p-fddb3ec1.js';
 import { a as actionArrowDownSmall } from './p-115c79b6.js';
-import { i as inheritGlobalTheme } from './p-6f57e174.js';
+import { i as inheritGlobalTheme } from './p-3757c660.js';
 import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-8db11326.js';
 import { a as getLanguage, g as getLocaleString } from './p-d9b2e80e.js';
-import { d as defineCustomElement$4 } from './p-3600a7d8.js';
-import { d as defineCustomElement$3 } from './p-16f01714.js';
-import { d as defineCustomElement$2 } from './p-9f5cbda4.js';
+import { d as defineCustomElement$4 } from './p-a4513f7a.js';
+import { d as defineCustomElement$3 } from './p-d5c72ea3.js';
+import { d as defineCustomElement$2 } from './p-c7f33aed.js';
 
 const duetNotificationDrawerCss = "*,*::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;display:block;width:100%}.duet-drawer{position:relative}@media (min-width: 62em){.duet-drawer{display:inline-block}}.duet-drawer-toggle{position:relative;display:flex;align-items:center;width:100%;height:48px;padding:0 20px;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:48px;color:rgb(8, 42, 77);text-align:left;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;background-color:rgb(255, 255, 255);border-bottom:1px solid rgb(212, 223, 229);border-radius:0;-webkit-appearance:none;appearance:none}@media (min-width: 62em){.duet-drawer-toggle{z-index:200;width:auto;max-width:200px;padding:0 30px 0 12px;overflow:hidden;font-size:0.875rem;line-height:4rem;border:0;border-radius:4px;transition:border 300ms ease}}.duet-theme-turva .duet-drawer-toggle{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);background-color:rgb(255, 255, 255);border-color:rgb(222, 224, 228)}.duet-drawer-toggle:active{opacity:0.75}.duet-drawer-toggle:focus{outline:0}:host(.user-is-tabbing) .duet-drawer-toggle:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-theme-turva .duet-drawer-toggle:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-drawer-toggle:hover{color:rgb(0, 75, 129)}.duet-theme-turva .duet-drawer-toggle:hover{color:rgb(113, 118, 132)}.duet-drawer-toggle::after{display:none !important}@media (min-width: 62em){.duet-drawer-toggle::after{position:absolute;top:auto;bottom:0;left:0;display:block !important;width:100%;height:3px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(3px)}.duet-theme-turva .duet-drawer-toggle::after{background:rgb(198, 12, 48)}}.duet-drawer-toggle[aria-expanded=true],.duet-drawer-toggle[aria-expanded=true]:hover{color:rgb(0, 75, 129);border-bottom:1px solid rgb(245, 248, 250);border-radius:0}.duet-theme-turva .duet-drawer-toggle[aria-expanded=true],.duet-theme-turva .duet-drawer-toggle[aria-expanded=true]:hover{color:rgb(113, 118, 132);border-color:rgb(245, 247, 250)}@media (min-width: 62em){.duet-drawer-toggle[aria-expanded=true],.duet-drawer-toggle[aria-expanded=true]:hover{border:0}.duet-drawer-toggle[aria-expanded=true]::after,.duet-drawer-toggle[aria-expanded=true]:hover::after{left:0;width:100%;transform:translateY(0)}}.duet-drawer-icon{position:relative;display:inline-flex;min-width:12px;margin-right:12px;font-size:0;line-height:normal;vertical-align:baseline}@media (min-width: 62em){.duet-drawer-icon{margin-right:8px}}.duet-drawer-label{line-height:1}.duet-drawer-caret{position:absolute;top:50%;right:20px;display:flex;width:10px;height:10px;margin-left:8px;line-height:normal;pointer-events:none;transition:300ms ease;transform:translateY(-50%);transform-origin:50% 50%}@media (min-width: 62em){.duet-drawer-caret{right:16px;width:7px;height:7px}}.duet-drawer-caret duet-icon{width:10px}.duet-drawer-toggle[aria-expanded=true] .duet-drawer-caret{transform:translateY(-50%) rotate(180deg)}.duet-drawer-badge{position:absolute;top:0;right:0;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-drawer-badge{background:rgb(247, 178, 40)}.duet-drawer-content{display:none;background-color:rgb(255, 255, 255);border-bottom:1px solid rgb(212, 223, 229)}.duet-drawer-content:focus{outline:0}.duet-theme-turva .duet-drawer-content{background-color:rgb(255, 255, 255);border-color:rgb(212, 223, 229)}@media (min-width: 62em){.duet-drawer-content{position:absolute;top:100%;z-index:600;display:block;width:450px;max-height:420px;padding-left:0;overflow-y:auto;visibility:hidden;background-color:rgb(255, 255, 255);border:1px solid rgb(212, 223, 229);border-radius:4px;border-top-left-radius:0;border-top-right-radius:0;box-shadow:0 4px 10px 0 rgba(0, 41, 77, 0.15);opacity:0;transition:300ms ease;transform:scale(0.95) translateZ(0) translateY(-10px);transform-origin:50% 0}.duet-theme-turva .duet-drawer-content{background-color:rgb(255, 255, 255)}.duet-drawer-content.duet-drawer-left{right:0}.duet-drawer-content.duet-drawer-right{left:0}}.duet-drawer-content.duet-drawer-open{display:block}@media (min-width: 62em){.duet-drawer-content.duet-drawer-open{visibility:visible;opacity:1;transform:scale(1) translateZ(0) translateY(0)}}:host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle{color:#172a3b;border-color:#d4dde2}:host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle::after{background:#e61740}:host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle[aria-expanded=true],:host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle[aria-expanded=true]:hover{color:#8c001e;border-color:#f5f6f7}";
 const DuetNotificationDrawerStyle0 = duetNotificationDrawerCss;
@@ -106,10 +106,10 @@ const DuetNotificationDrawer$1 = /*@__PURE__*/ proxyCustomElement(class DuetNoti
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: '07a40aaf2c047740782943b82091b327d32a4b96', class: {
+        return (h("div", { key: '8ef9649e5f79d548b8ea459e702e8cfac4fcfff4', class: {
                 "duet-drawer": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: this.handleKeyDown }, h("button", { key: 'bca6b6110eecf1f0a2ec99e50c342660e1d34122', 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: 'a57aef93c238e0a3be0af1011c4d7b1301ef2e9a', class: "duet-drawer-icon" }, h("duet-icon", { key: 'b1d2a9785065bfe493f23e62807eae56a158523b', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("div", { key: '29d4679a41ba16fb661bfdf915ddb5a2633bd60f', class: "duet-drawer-badge" }))), h("span", { key: '710ce29cd624f643aa28374faaba4088c42473fc', class: "duet-drawer-label" }, this.label), h("div", { key: 'eb03a8f523a70dcdc7a138c942a9b69bbc600beb', class: "duet-drawer-caret" }, h("duet-icon", { key: '58316288a870f547c4b3205f291fcb440cbd9691', margin: "none", size: "auto", icon: actionArrowDownSmall.svg, color: "currentColor" }))), h("div", { key: '7c2e7cd82364cd233fcdddd309eaa6b820d7d526', id: "duet-drawer-content", class: {
+            }, onKeyDown: this.handleKeyDown }, h("button", { key: '88f5571a59e721e77c275927ba134edf616f8c2b', 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: 'ae96c1156e5f3533c6cfe14f71cb06e3d5f37dcd', class: "duet-drawer-icon" }, h("duet-icon", { key: '25623fed9e75f768b6617506af5f24d47cf491a4', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("div", { key: 'b2ebd4178aa5680e97f5ff9f0b12fb6cb92b1e33', class: "duet-drawer-badge" }))), h("span", { key: '9f8446b2cbbd5041e0431b3e724364364493e773', class: "duet-drawer-label" }, this.label), h("div", { key: '162eea01bfbd402f5325b4428ca0e75d51cf1ab1', class: "duet-drawer-caret" }, h("duet-icon", { key: '93086f79bf7f637b9933ed53999718cd2797d2c2', margin: "none", size: "auto", icon: actionArrowDownSmall.svg, color: "currentColor" }))), h("div", { key: '106c804293207a14600e49af7f996cce568d0b5c', id: "duet-drawer-content", class: {
                 "duet-drawer-content": true,
                 "duet-drawer-right": this.direction === "right",
                 "duet-drawer-left": this.direction === "left",