@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.31

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

@@ -1,28 +1,45 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1d0b7c66.js';
-import { a as media_query_large, c as media_query_xx_large } from './tokens-84fb2357.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { a as getLanguage } from './language-utils-14969cef.js';
-import './string-utils-192eb3c8.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BVAkfiYN.js';
+import { i as inheritGlobalTheme } from './themeable-component-B8TGOi99.js';
+import { a as getLanguage } from './language-utils-uFQZRSPE.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:-1px;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:-1px;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)}";
-const DuetMenuBarStyle0 = duetMenuBarCss;
+const duetMenuBarCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;position:relative;width:100%;pointer-events:none}:host *{pointer-events:auto}.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-grow:1;flex-basis:0;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-grow:1;flex-basis:0;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;text-overflow:ellipsis;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;line-height:1.1;color:rgb(62, 84, 102);-webkit-hyphens:auto;hyphens:auto;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:rgb(23, 42, 59)}:host(.duet-theme-turva2) .duet-theme-turva .right{color:rgb(23, 42, 59)}:host(.duet-theme-turva2) .duet-theme-turva .duet-logo-info-text{color:rgb(53, 79, 101);border-left-color:rgb(212, 221, 226)}";
 
 const DuetMenuBar = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.duetEvent = createEvent(this, "duetEvent", 7);
+        this.previousYScroll = 0;
+        this.hidden = false;
+        this.onBottom = false;
+        this.logoSize = "large";
+        this.leftMoreVisible = false;
+        this.rightMoreVisible = false;
+        this.centerSlotUsed = false;
+        this.mediaQueryMediumMatches = false;
         /**
-         * Own Properties.
+         * Theme.
          */
-        this.mql = [
-            window.matchMedia(media_query_large.replace(/'/g, "")),
-            window.matchMedia(media_query_xx_large.replace(/'/g, "")),
-        ];
-        this.boundMqlFunctions = [];
-        this.previousYScroll = 0;
+        this.theme = "";
+        /**
+         * The currently active language. This setting changes the accessible labels to match the
+         * chosen language.
+         * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+         * @default "fi"
+         */
+        this.language = getLanguage();
+        /**
+         * Logo.
+         */
+        this.logo = true;
+        /**
+         * Makes the menu bar hide on top of the window when page is scrolled down
+         * Should be used only with sticky navigation.
+         */
+        this.hideOnScroll = false;
         this.scrollbarCheck = () => {
             this.leftMoreVisible = this.container.scrollLeft > 0;
             this.rightMoreVisible = this.container.scrollLeft !== this.container.scrollWidth - this.container.clientWidth;
@@ -49,14 +66,6 @@ const DuetMenuBar = class {
             const centerSlot = this.element.querySelector('[slot="center"]');
             this.centerSlotUsed = !!centerSlot;
         };
-        this.changeLogoSize = () => {
-            if (this.mql[1].matches && this.centerSlotUsed) {
-                this.logoSize = "large";
-            }
-            else {
-                this.logoSize = "medium";
-            }
-        };
         this.handleLogoClick = (e) => {
             this.duetEvent.emit({
                 name: "logoClick",
@@ -67,19 +76,6 @@ const DuetMenuBar = class {
                 originalEvent: e,
             });
         };
-        this.hidden = false;
-        this.onBottom = false;
-        this.logoSize = "large";
-        this.leftMoreVisible = false;
-        this.rightMoreVisible = false;
-        this.centerSlotUsed = false;
-        this.theme = "";
-        this.language = getLanguage();
-        this.logo = true;
-        this.logoHref = undefined;
-        this.logoLinkAccessibleLabel = undefined;
-        this.accessibleLabel = undefined;
-        this.hideOnScroll = false;
     }
     checkScroll() {
         if (!this.hideOnScroll) {
@@ -113,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();
@@ -153,17 +131,20 @@ const DuetMenuBar = class {
     render() {
         const slideoutAvailable = document.querySelectorAll("duet-slideout").length > 0;
         const isUsedAsAdditionalHorizontalNav = slideoutAvailable && !this.logo;
-        return (h(Host, { key: '879fc36781875cd6dea48e11839a85a185085dc0' }, h("nav", { key: '2ea40e5fc7e651f516d4f9edae5ac2f71fd4fee9', class: {
+        return (h(Host, { key: '9f357dd163db230760ba15408c721b345619e369' }, h("nav", { key: '515afdd6ce472b843bb59ab038fa87b76158743d', 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: 'ff8cc7d764c170ddd58d7ed93375961a95db7e20', class: "top" }), h("div", { key: 'f1a58089bfde393327f4602887e2c3bb850f2344', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: 'f3ef014e2ea267d5b52553854490be997f13cf25' }, h("duet-logo", { key: '063b69ae891ce4cb9bc6960aa0f0a9dbeca46cb8', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: '241a7083365bb7b039787e4f8debcd9185092057', class: "list center", role: "list" }, h("div", { key: 'e91f65554fe261b6eac8f2e27b1a38a41f26ad11', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: '54aca3809af67d932ccde820be7575dceb6c422c', name: "center" }), h("div", { key: '89998cee04eba79bb73de1a494b5a6b87790276b', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: 'e949ddcfac19ccaf615fdcbc2ce2faacbf7b9a91', class: "list right", role: "list" }, h("slot", { key: 'c29da062d16c0070f56c034008c6cc911f6570b2', name: "right" }))), h("div", { key: '02cca0e6a68888052ccc9721adc8d8692b6f2841', class: "bottom" }))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'd19d82b1e1c35dd8f0ac72fc3625058f939d2b66', class: "top" }), h("div", { key: '8bd01db2edc2ab2c43e931e07288e252a6838abc', class: { container: true, "with-info-text": !!this.logoInfoText && !this.centerSlotUsed }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '28a65925e1aa7a73822e398a0aaa705de521cc66' }, h("duet-logo", { key: 'f7a068293211c3e3a7c091a084ecf4e7b3c2317c', 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: 'dcb75e146d612870f0b65295df9f33a2be699d29', 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: '675cb30c9aaa18f8352d2c8d84978bb291f2337d', 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: '48cd2679315bb52d535c58b1b54831bcc1120bd4', class: {
+                "duet-logo-info-text": true,
+                "duet-theme-turva": this.theme === "turva",
+            } }, this.logoInfoText)))), h("div", { key: '0cc0ebfc6fe8b9582f8677ca8eba79c7fb102a97', class: "list center", role: "list" }, h("div", { key: '8ed1c963529c2ad79182293ac831fc2a5c4ba308', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: 'c997b17308d679e6364b79e9549600ea88307ebe', name: "center" }), h("div", { key: 'e4d05f0c17fe62eb12a4708237703d32cb8ac339', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '438911a93d2bbcfd6a1084c095611bc031636313', class: "list right", role: "list" }, h("slot", { key: 'd8b922aca72f608f7acd42e29742efa50d0b2343', name: "right" }))), h("div", { key: 'cd333a535ef8eac9c224cd6ebc6a2a4145ba20bd', class: "bottom" }))));
     }
     get element() { return getElement(this); }
 };
-DuetMenuBar.style = DuetMenuBarStyle0;
+DuetMenuBar.style = duetMenuBarCss;
 
 export { DuetMenuBar as duet_menu_bar };

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

@@ -1,19 +1,20 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-1d0b7c66.js';
-import { d as disableBodyScroll, e as enableBodyScroll } from './bodyScrollLock.es6-ecbf187e.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { a as DuetStringsPleaseWaitDefaults } from './common-strings-af765cad.js';
-import { f as focusElement } from './focus-utils-adcd9463.js';
-import { f as isEscapeKey } from './keyboard-utils-439bcc8b.js';
-import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-14969cef.js';
-import { h as hasSlot } from './slot-utils-4e5ed4eb.js';
-import { T as Teleport } from './teleport-546f382d.js';
-import './string-utils-192eb3c8.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-BVAkfiYN.js';
+import { d as disableBodyScroll, e as enableBodyScroll } from './bodyScrollLock.es6-B1B-PPrh.js';
+import { i as inheritGlobalTheme } from './themeable-component-B8TGOi99.js';
+import { b as DuetStringsPleaseWaitDefaults } from './common-strings-BWvtXbhA.js';
+import { f as focusElement } from './focus-utils-C8cj1ygp.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-uFQZRSPE.js';
+import { h as hasSlot } from './slot-utils-D8NnYUf2.js';
+import { T as Teleport } from './teleport-CooAqTCj.js';
+import { p as postfixTheme } from './token-utils-Dw-GA7-4.js';
+import './string-utils-C6E9F6QT.js';
+import './tokens.module-Bh9dkusU.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:4px;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:4px 4px 0 0;opacity:1;transition:top 600ms ease}@media (max-width: 35.9375em){.duet-modal.slide-up{border-radius:16px 16px 0 0}}.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:4px 4px 0 0}@media (max-width: 35.9375em){.duet-modal-sticky-header{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:12px;right:12px}.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}";
-const DuetModalStyle0 = duetModalCss;
+const duetModalCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}.duet-modal-container{position:fixed;top:0;right:0;bottom:0;left:0;z-index:900;visibility:hidden;max-height:100vh;overflow-y:auto;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;transform:scale(0.96);transition:300ms ease;transition-delay:0ms}.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;transform:none;transition:300ms ease;transition-delay:200ms}.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;transform:scaleY(0);transform-origin:top;transition:all 300ms ease}.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;text-overflow:ellipsis;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);letter-spacing:-0.01rem;white-space:nowrap;text-decoration:none}.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:rgb(23, 42, 59)}:host(.duet-theme-turva2) .duet-theme-turva .duet-modal-sticky-header{background:rgb(253, 247, 242);border-bottom:1px solid rgb(212, 221, 226)}";
 
 // The transition below is slightly higher than the actual CSS transition as VoiceOver on
 // iOS has otherwise problems moving the focus from modal back to the original element.
@@ -50,25 +51,84 @@ const DuetModal = class {
                 }, 100);
             }
         };
+        /**
+         * State() variables
+         * Inlined decorator, alphabetical order.
+         */
         this.open = false;
+        /**
+         * The currently active language. This setting also changes the logo to match
+         * the chosen language.
+         * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+         * @default "fi"
+         */
         this.language = getLanguage();
+        /**
+         * Adds accessible label for the close icon that is only shown for screen
+         * readers. This property is always required to create an accessibly interface!
+         * Swedish translation for this property is “Stäng fönstret”.
+         * @default {fi: "Sulje ikkuna", sv: "Stäng fönstret", en: "Close the dialog", }
+         */
         this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefaults, this.language);
+        /**
+         * When modal used as a lodader, as an audible substitute for the spinner, we use this message
+         * @default {fi: "Odota, ole hyvä.", sv: "Vänligen vänta.", en: "Please wait.", }
+         */
         this.accessibleLoaderAnnouncement = getLocaleString(this.accessibleLoaderAnnouncementDefaults, this.language);
+        /**
+         * Size of the modal window.
+         */
         this.size = "medium";
-        this.accessibleDescribedBy = undefined;
-        this.accessibleLabelledBy = undefined;
-        this.accessibleLabel = undefined;
+        /**
+         * Details of the component
+         */
         this.accessibleDetails = undefined;
+        /**
+         * Aria description the button
+         */
         this.accessibleDescription = undefined;
+        /**
+         * Variation of the modal window. Slide-up variation has fixed height so it suits well for
+         * situations where the modal content height changes. Loader variation is used when the user
+         * initiates an action that takes time to complete - it can be used with addMessage() method to
+         * insert accessible message to the modal to inform the user about the progress.
+         */
         this.variation = "default";
+        /**
+         * Size of the modal window's padding.
+         */
         this.gutterSize = "medium";
+        /**
+         * Theme of the modal.
+         */
         this.theme = "";
+        /**
+         * Accessible heading displayed in the modal. The modal marks this as the
+         * label of the modal when used. This helps screen reader users which is
+         * why this is a required property.
+         */
         this.heading = "";
+        /**
+         * Accessible heading size
+         */
         this.headingLevel = "h3";
-        this.headingVisualLevel = undefined;
+        /**
+         * Icon to display above the heading (from Duet’s icons). Example:
+         * "form-location"
+         */
         this.icon = "";
+        /**
+         * Custom color to be used for the icon, as a design token entered in camelCase
+         * or kebab-case. Example: "primary".
+         */
         this.color = "";
+        /**
+         * Use this property when you need to have the modal dialog initially active.
+         */
         this.active = false;
+        /**
+         * Use this property when you want the modal to close when clicked outside of modal.
+         */
         this.closeOnBlur = false;
     }
     openChanged() {
@@ -116,9 +176,30 @@ 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(async () => {
+                    let focusEl = this.focusedElBeforeOpen;
+                    if (typeof this.focusElementOnClose === "string") {
+                        focusEl = document.getElementById(this.focusElementOnClose) || focusEl;
+                    }
+                    else {
+                        focusEl = this.focusElementOnClose || focusEl;
+                    }
+                    if (focusEl.tagName.toLowerCase() === "duet-popup-menu-item") {
+                        const menu = focusEl.closest("duet-popup-menu");
+                        const isOpen = await menu.isOpen();
+                        if (!isOpen && menu.controller) {
+                            if (typeof menu.controller === "string") {
+                                focusEl = document.getElementById(menu.controller);
+                            }
+                            else {
+                                focusEl = menu.controller;
+                            }
+                        }
+                    }
+                    focusElement(focusEl);
+                }, TRANSITION_MS);
+            }
             if (this.isAndroidDevice) {
                 window.removeEventListener("resize", this.handleAndroidResizeEvents);
             }
@@ -146,9 +227,11 @@ const DuetModal = class {
         if (!this.teleport) {
             this.teleport = new Teleport(this.element);
         }
-        if (this.teleport) {
+        if (!this.teleport.isActive) {
             this.teleport.activate();
+            return;
         }
+        this.teleport.observeDeletion();
         connectLanguageChangeObserver(this, [
             { prop: "accessibleCloseLabel", defaults: "accessibleCloseLabelDefaults" },
             { prop: "accessibleLoaderAnnouncement", defaults: "accessibleLoaderAnnouncementDefaults" },
@@ -186,6 +269,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
      *
@@ -247,20 +336,16 @@ const DuetModal = class {
      */
     render() {
         var _a, _b;
-        let iconColor = "primary";
-        let closeColor = "secondary";
-        const closingButton = (h("div", { key: 'e3680a1a39e49c693a42fc7fb9759bc668d40db6', class: "duet-modal-close" }, h("duet-button", { key: 'f83e0f5cb99b5a95989e6c142c12dd4abdccd4c5', 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: '958d3dcd432c8954835f6cb522b2fe09bccafaa4', 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: 'c025f6cdd3a46f67dabf96a33953cf975a4b7d23', class: "duet-modal-close" }, h("duet-button", { key: '07adb7bd15b71826eea2c5fe8fdd9675c34b10a2', 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: '34d84de0dff1153e1fa04d8b2d568edd06ed92a1', 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: 'fbc2fc13d50311db1c8a0a4f2cc2803129eafe58', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: '8a07986bcfc3448a09fef42541dbe3cfada8bdcb', ref: modalInner => (this.modalInnerEl = modalInner), class: {
+            } }, h("duet-overlay", { key: '94c016b5e1d57159562e7b7bc75203976d56c133', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: 'fb081fde606dbe819fbd9f4dd85928e06b73fc4b', ref: modalInner => (this.modalInnerEl = modalInner), class: {
                 "duet-modal-inner": true,
                 [this.size]: true,
                 "duet-modal-slide-up": this.variation === "slide-up",
@@ -271,18 +356,22 @@ const DuetModal = class {
                         this.closeModal(e);
                     }
                 }
-            } }, h("div", { key: 'a0b9f37bf6628afa8f99e12a917d57eaeec54583', ref: modalContentEl => (this.modalContentEl = modalContentEl), class: {
+            } }, h("div", { key: '35ff01594b4d85fae78d7ad2dda042d4b6fe3f18', 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: '9168f67fd2f8ede394df502d619287153224558e' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: '9f08ea38b797e2f08e90b844af00bc7520f74524', class: {
+            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: '79e1b71a87689e6b8509b859836f039c9fef0a76' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: '86c37c55bd8a7738e4a859815f24ee06fefcb53d', 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: '46de5037af55d3b54aea4f8a133aa3ed573c0599', class: "duet-modal-header" }, h("span", { key: 'ce17770a8dd4f97629729ab7823f9f7da02e5234', class: "duet-modal-inner-slot-top" }, h("slot", { key: 'b347be9693d36ac02bd0bbfb004c84fbe2a27b2f', name: "top" })), this.icon && h("duet-icon", { key: '4e60fc0b0a51d95dcc67841be4e780c5e71538e0', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: '3749e6adf5b669773e1ecf50e989b8dceac017bd', "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: 'ec5d5a5d428cc6cd4cb86c1c7ba9e34f0725a4c0', class: "duet-modal-spinner" }, h("duet-spinner", { key: 'c4459171ed652867da2bcc125dcab78ba11aca07', size: "large", color: "primary" }))), h("div", { key: '4aa8b636aca91d1178fc3749a905d467c102461e', class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el), "aria-live": this.variation === "loader" ? "assertive" : "off" }, h("slot", { key: '47bb63f76e7bb4ae0a4c765bc4fbd4f26a8b47f9' })))))));
+            }, "aria-live": this.accessibleAnnounceChanges === "heading" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "heading" ? "true" : null }, h("div", { key: 'eddd353009b508fe5ecd04aa866f076a064626de', class: "duet-modal-header" }, h("span", { key: '696ad960d20a5e5bf68dc9ec9da5d59773accf10', class: "duet-modal-inner-slot-top" }, h("slot", { key: '28f0677621250a3da6899f055ba374dd78a17a35', name: "top" })), this.icon && h("duet-icon", { key: '7b9e797b9f5296effdfc0beaac29be90e0310436', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: 'ba31f51f36989421ecb8f741b285d7d2638f2f7a', "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: '2bae6fedd2f1ab7b40264c2d6c3b4f69f9627d2c', class: "duet-modal-spinner" }, h("duet-spinner", { key: 'd5f27b579909233f930b09251b7faa6fd7d35a78', size: "large", color: postfixTheme("primary", this.theme) }))), h("div", { key: 'f667634f35e5048df2ea536709e76beca9cb3a49', "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: 'c8523317779ddc6acd2de899022ea31535612291' })))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -290,6 +379,6 @@ const DuetModal = class {
         "active": ["activeChanged"]
     }; }
 };
-DuetModal.style = DuetModalStyle0;
+DuetModal.style = duetModalCss;
 
 export { DuetModal as duet_modal };