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

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

@@ -1,20 +1,19 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1d0b7c66.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { e as enableBodyScroll, d as disableBodyScroll } from './body-scroll-46854769.js';
-import { f as focusElement, F as FocusGuard } from './focus-utils-adcd9463.js';
-import { f as isEscapeKey } from './keyboard-utils-439bcc8b.js';
-import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './language-utils-14969cef.js';
-import { h as hasSlot } from './slot-utils-4e5ed4eb.js';
-import { T as Teleport } from './teleport-546f382d.js';
-import { g as getColorByName } from './token-utils-b9ba8c5e.js';
-import './string-utils-192eb3c8.js';
-import './tokens.module-2d02f5ff.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 { e as enableBodyScroll, d as disableBodyScroll } from './body-scroll-C6CAT054.js';
+import { f as focusElement, F as FocusGuard } from './focus-utils-C8cj1ygp.js';
+import { a as isEscapeKey } from './keyboard-utils-Db8rvjPI.js';
+import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './language-utils-uFQZRSPE.js';
+import { h as hasSlot } from './slot-utils-D8NnYUf2.js';
+import { T as Teleport } from './teleport-CooAqTCj.js';
+import { g as getColorByName } from './token-utils-Dw-GA7-4.js';
+import './string-utils-C6E9F6QT.js';
+import './tokens.module-Bh9dkusU.js';
 
-const duetSlideoutCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:absolute;height:100%}::slotted(*){position:relative;width:100%;visibility:hidden;opacity:0}:host([open]:not([open=false])) ::slotted(*){visibility:visible;opacity:1}:host(:not([open])) ::slotted(duet-slideout-panel){display:none}.duet-slideout{display:flex;align-items:center;height:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.5;color:rgb(8, 42, 77)}.duet-slideout.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}@media (min-width: 62em){.duet-slideout.duet-theme-turva .desktop-bg{background:rgb(23, 28, 58)}}.duet-slideout .dialog{position:fixed;top:0;bottom:0;left:0;z-index:600;width:100%;height:100%;padding-bottom:75px;overflow-y:auto;box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1) inset}.duet-slideout .dialog:not(.modal){box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.2)}@media (min-width: 62em){.duet-slideout .dialog{right:0;left:auto;width:500px;padding-bottom:0;transition:right 300ms ease;transition-delay:0s}}.duet-slideout .dialog .top-container.has-sticky-header-slot{position:sticky;top:0;z-index:200}.duet-slideout .dialog .top-container.has-sticky-header-slot .top{background:rgb(240, 247, 250)}.duet-slideout .dialog .top-container.has-sticky-header-slot .sticky-header{display:block}.duet-slideout .dialog .top{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end;padding:4px}.duet-slideout .dialog .top button{cursor:pointer}.duet-slideout .dialog .top button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout .dialog .top duet-icon{padding:16px}.duet-slideout .dialog .sticky-header{display:none;width:100%;padding:0 1.5rem;margin-bottom:20px;background:rgb(240, 247, 250);border-bottom:1px solid rgb(212, 223, 229)}.duet-slideout .dialog .items{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;padding:0 1.5rem}.duet-slideout .dialog.hidden{pointer-events:none;visibility:hidden}@media (min-width: 62em){.duet-slideout .dialog.hidden{right:-500px;transition:300ms ease}}.duet-slideout.duet-theme-turva .dialog{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1) inset}.duet-slideout.duet-theme-turva .dialog:not(.modal){box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.2)}.duet-slideout.duet-theme-turva button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-slideout.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout.duet-theme-turva button.active{color:rgb(198, 12, 48)}.duet-slideout.duet-theme-turva button.active::after{background:rgb(198, 12, 48)}.duet-slideout.duet-theme-turva .has-sticky-header-slot .top{background:rgb(245, 247, 250)}.duet-slideout.duet-theme-turva .has-sticky-header-slot .sticky-header{background:rgb(245, 247, 250);border-bottom:1px solid rgb(222, 224, 228)}.duet-slideout.duet-theme-turva .dialog .top button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}slot{color:rgb(8, 42, 77)}.duet-theme-turva slot{color:rgb(23, 28, 58)}";
-const DuetSlideoutStyle0 = duetSlideoutCss;
+const duetSlideoutCss = "*,*::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:absolute;height:100%}::slotted(*){position:relative;visibility:hidden;width:100%;opacity:0;transition:opacity 300ms ease;transition-delay:300ms}:host([open]:not([open=false])) ::slotted(*){visibility:visible;opacity:1}:host(:not([open])) ::slotted(duet-slideout-panel){display:none}.duet-slideout{display:flex;align-items:center;height:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.5;color:rgb(8, 42, 77)}.duet-slideout.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}@media (min-width: 62em){.duet-slideout.duet-theme-turva .desktop-bg{background:rgb(23, 28, 58)}}.duet-slideout .dialog{position:fixed;top:0;right:0;bottom:0;left:auto;z-index:600;width:min(450px, 100%);padding-bottom:75px;overflow-y:auto;box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1) inset;transition:bottom 300ms ease;transition-delay:0s}.duet-slideout .dialog:not(.modal){box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.2)}.duet-slideout .dialog .top-container.has-sticky-header-slot{position:sticky;top:0;z-index:200}.duet-slideout .dialog .top-container.has-sticky-header-slot .top{background:rgb(255, 255, 255)}.duet-slideout .dialog .top-container.has-sticky-header-slot .sticky-header{display:block}.duet-slideout .dialog .top{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end;padding:4px;opacity:1;transition:opacity 300ms ease}.duet-slideout .dialog .top button{cursor:pointer}.duet-slideout .dialog .top button:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva .duet-slideout .dialog .top button:focus,.duet-slideout .dialog .top button:focus.duet-theme-turva,.duet-theme-turva2 .duet-slideout .dialog .top button:focus,.duet-slideout .dialog .top button:focus.duet-theme-turva2{outline:2px solid;outline-offset:2px;outline-color:rgba(53, 79, 101, 0.8)}.duet-slideout .dialog .top duet-icon{padding:16px}.duet-slideout .dialog .sticky-header{display:none;width:100%;padding:0 20px 20px;margin-bottom:20px;background:rgb(255, 255, 255);border-bottom:1px solid rgb(212, 223, 229)}@media (min-width: 36em){.duet-slideout .dialog .sticky-header{padding:0 28px 28px}}.duet-slideout .dialog .items{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;padding:12px 20px;opacity:1;transition:padding 600ms ease, opacity 300ms ease;transition-delay:300ms}@media (min-width: 36em){.duet-slideout .dialog .items{padding:16px 28px}}.duet-slideout .dialog.hidden{bottom:100vh;visibility:hidden;pointer-events:none;transition:300ms ease}.duet-slideout .dialog.hidden .items{padding-top:28px;opacity:0}.duet-slideout .dialog.hidden .top{opacity:0}.duet-slideout.duet-theme-turva .dialog{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1) inset}.duet-slideout.duet-theme-turva .dialog:not(.modal){box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.2)}.duet-slideout.duet-theme-turva button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-slideout.duet-theme-turva button.active{color:rgb(198, 12, 48)}.duet-slideout.duet-theme-turva button.active::after{background:rgb(198, 12, 48)}.duet-slideout.duet-theme-turva .has-sticky-header-slot .sticky-header{border-bottom:1px solid rgb(222, 224, 228)}slot{color:rgb(8, 42, 77)}.duet-theme-turva slot{color:rgb(23, 28, 58)}:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva{color:rgb(23, 42, 59)}@media (min-width: 62em){:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .desktop-bg{background:rgb(23, 42, 59)}}:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button{color:rgb(23, 42, 59)}:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button.active{color:rgb(230, 23, 64)}:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button.active::after{background:rgb(230, 23, 64)}:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .has-sticky-header-slot .sticky-header{border-bottom-color:rgb(212, 221, 226)}:host(.duet-theme-turva2) slot{color:rgb(23, 42, 59)}";
 
 const DuetSlideout = class {
     constructor(hostRef) {
@@ -32,8 +31,57 @@ const DuetSlideout = class {
         };
         this.isSafariBrowser = /^((?!chrome|android).)*safari/i.test(navigator === null || navigator === void 0 ? void 0 : navigator.userAgent);
         this.hasStickyHeaderSlot = false;
-        this.setOpenButton = (element) => {
+        this.disconnectController = new AbortController();
+        this.eventListenerController = new AbortController();
+        this.language = getLanguage();
+        this.displaying = false;
+        this.openPanel = false;
+        /**
+         * Theme.
+         */
+        this.theme = "";
+        /**
+         * Role of the slot's container. By default this is menubar and the slideout should by default contain menuitems.
+         */
+        this.accessibleRole = "menubar";
+        /**
+         * Open
+         */
+        this.open = false;
+        /**
+         * Background color. Use one of the color tokens.
+         */
+        this.backgroundColor = "gray-lightest";
+        /**
+         * Whether the slideout behaves as a modal, i.e. with an overlay and preventing scrolling of the page content.
+         * Note that even when false, we still use focus guards to contain keyboard navigation within, as moving focus out
+         * could result in unexpected behavior.
+         */
+        this.modal = true;
+        this.setOpenButton = (givenElement) => {
+            let element;
+            let addClickListener;
+            if (givenElement || givenElement === null) {
+                element = givenElement;
+                addClickListener = false;
+            }
+            else {
+                if (typeof this.opener === "string") {
+                    element = typeof this.opener === "string" ? document.getElementById(this.opener) : undefined;
+                }
+                else {
+                    element = this.opener;
+                }
+                if (element && this.openButton === element) {
+                    return;
+                }
+                addClickListener = true;
+            }
+            if (this.eventListenerController) {
+                this.eventListenerController.abort();
+            }
             if (!element) {
+                this.openButton = undefined;
                 return;
             }
             try {
@@ -41,14 +89,23 @@ const DuetSlideout = class {
                 button.accessiblePopup = "true";
                 button.accessibleExpanded = false;
                 this.openButton = button;
+                if (addClickListener && !this.disconnectController.signal.aborted) {
+                    this.eventListenerController = new AbortController();
+                    this.openButton.addEventListener("click", this.openButtonEventListener, {
+                        signal: this.eventListenerController.signal,
+                    });
+                }
+            }
+            catch (e) {
+                console.error(e);
             }
-            catch (_e) { }
         };
         this.setStickHeaderStyleMutations = (clean = false) => {
             const stickyHeaderTabGroups = this.element.querySelectorAll('[slot="sticky-header"] duet-tab-group');
             stickyHeaderTabGroups.forEach(tabGroup => {
                 tabGroup.style.position = clean ? null : "relative";
                 tabGroup.style.top = clean ? null : "1px";
+                tabGroup.switchLargeBreakpoint = "always";
             });
         };
         this.openButtonEventListener = (e) => {
@@ -68,41 +125,12 @@ const DuetSlideout = class {
         this.onClick = (e) => {
             this.toggleMenu(e);
         };
-        this.language = getLanguage();
-        this.displaying = false;
-        this.openPanel = false;
-        this.theme = "";
-        this.accessibleRole = "menubar";
-        this.open = false;
-        this.backgroundColor = "gray-lightest";
-        this.modal = true;
-    }
-    /**
-     * DuetMenuBarButton or DuetButton element, or id of an element, that opens the slideout. If id is given,
-     * the component automatically sets the click event listener to open the slideout.
-     */
-    get opener() {
-        return this._opener;
-    }
-    set opener(value) {
-        if (this.opener === value) {
-            return;
-        }
-        if (typeof value === "string") {
-            this.setOpenButton(document.getElementById(value));
-            if (this.openButton) {
-                this.openButton.addEventListener("click", this.openButtonEventListener);
-            }
-        }
-        else {
-            this.setOpenButton(value);
-        }
     }
     /**
      * Alias for property opener.
      */
     get controller() {
-        return this._opener;
+        return this.opener;
     }
     set controller(value) {
         this.opener = value;
@@ -116,17 +144,27 @@ const DuetSlideout = class {
     }
     connectedCallback() {
         connectLanguageChangeObserver(this);
+        if (this.disconnectController && this.disconnectController.signal.aborted) {
+            this.disconnectController = new AbortController();
+        }
         if (!this.teleport) {
             this.teleport = new Teleport(this.element);
         }
-        if (this.teleport) {
+        if (!this.teleport.isActive) {
             this.teleport.activate();
+            return;
         }
+        this.teleport.observeDeletion();
         this.setStickHeaderStyleMutations();
-        this.mutationObserver = new MutationObserver(() => {
-            this.openPanel = !!this.getOpenPanel();
-        });
-        this.mutationObserver.observe(this.element, { childList: true, attributeFilter: ["open"], subtree: true });
+        if (!this.mutationObserver) {
+            this.mutationObserver = new MutationObserver(() => {
+                this.openPanel = !!this.getOpenPanel();
+            });
+        }
+        if (this.mutationObserver) {
+            this.mutationObserver.observe(this.element, { childList: true, attributeFilter: ["open"], subtree: true });
+        }
+        this.setOpenButton();
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
@@ -136,9 +174,10 @@ const DuetSlideout = class {
         if (this.mutationObserver) {
             this.mutationObserver.disconnect();
         }
-        if (this.openButton) {
-            this.openButton.removeEventListener("click", this.openButtonEventListener);
+        if (this.disconnectController) {
+            this.disconnectController.abort();
         }
+        this.setOpenButton(null);
         this.setStickHeaderStyleMutations(true);
     }
     handleOpenChange(newValue, oldValue) {
@@ -176,6 +215,17 @@ const DuetSlideout = class {
             }, 200);
         }
     }
+    handleOpenerChange(newValue, oldValue) {
+        if (newValue === oldValue) {
+            return;
+        }
+        if (typeof newValue === "string") {
+            this.setOpenButton();
+        }
+        else {
+            this.setOpenButton(newValue);
+        }
+    }
     /**
      * Component event handling.
      */
@@ -245,22 +295,24 @@ const DuetSlideout = class {
         };
         const topLevelOpenMenuBarTranslation = getLocaleString(this.topLevelOpenMenuBarLangObject);
         const exitTranslation = getLocaleString(this.exitLangObject);
-        return (h(Host, { key: '4642a8ace569ca295407eda479135ae7fd5617bf' }, h("div", { key: '7df49b85ec162cd738dca6cfcdac057a87bbdc13', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: '71364dcd7bdac4d224eae40ef7b43ee2571a1adf', visible: this.open, "display-device": "large", zIndex: "600" }), h("div", { key: '62eade96c8ad9c494d3843adc75b19b7ad18cada', ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "slot-container", class: {
+        return (h(Host, { key: 'ad0060e5e7d7b09eda9fe1c00d917a24cd72425e' }, h("div", { key: 'ffe49d23661b5297b214ce27e88defba216f840e', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: 'ed8951a46a9e18802724ca812ad1c0248d7ba334', visible: this.open, zIndex: "600" }), h("div", { key: '1fdbc5b634dc380494c1b389514c4bb24c3867e5', ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "slot-container", class: {
                 dialog: true,
                 hidden: !this.open,
                 modal: this.modal,
-            }, style: styles }, h(FocusGuard, { key: '2a3b77e3e65a92028c5dc3b787f85165e15eeb79', moveFocusTo: this.closeButton }), h("div", { key: '4b0dc292f4e488e4d0d0499c5c2c5e5cced54d35', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '6eabc63710bcbb2f2673eb2fe25bb5b88b6697bb', class: "top" }, h("button", { key: 'e697b74648bb04e0083b88d3bb8e808de86d7112', ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
+            }, style: styles }, h(FocusGuard, { key: '0dc00c309bd543a23e1ea874cb6398c2c39e1411', moveFocusTo: this.closeButton }), h("div", { key: '8d2adfc16b01db12ca6f7c47810cdee6021e5460', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'e389d21af73e9d8163ca89a167f0bbd596ba3450', class: "top" }, h("button", { key: 'ac47b07bb9738ec69af8db1c8f2acc01b70bfc03', ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
                 "slideout-close": true,
                 active: this.open,
-            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: '9d03c80e89da1ef8a573fc482b7cc248e9c777a5', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '807b9077f797cde0ae3d59701d5d9cb5adecf989', class: "sticky-header" }, h("slot", { key: '2f1e747dad6226d8894931fcbfcc1716014e9a7e', name: "sticky-header" }))), h("div", { key: 'b14462c558ad7ec4030c461de80e604a9bd1204a', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
+                "duet-theme-turva": this.theme === "turva",
+            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: 'bdcb201f72601e5a430bbe2b0653b08a8c2ead5d', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'e7ea3e266991f5ff6659de6e5cc20ef4ea7cff21', class: "sticky-header" }, h("slot", { key: 'a2d3344b22e38a2439dd5df39460d784d56beaf7', name: "sticky-header" }))), h("div", { key: 'a326e1e74d27ff368035519861e2acd607acf6c6', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
                 items: true,
-            } }, h("slot", { key: 'ee510eec06bfef03ad124b9cd0ea5a26aeaad9cf' })), h(FocusGuard, { key: '64f7a35f2435307ca7572160445c4fad38812c87', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: 'a4edf66da57892a957d1e16e12ccaf7d1e6a6fb4' })), h(FocusGuard, { key: '976f9dc8217f77d115b0ef2ec246b4231b8d3282', moveFocusTo: this.closeButton })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
-        "open": ["handleOpenChange"]
+        "open": ["handleOpenChange"],
+        "opener": ["handleOpenerChange"]
     }; }
 };
-DuetSlideout.style = DuetSlideoutStyle0;
+DuetSlideout.style = duetSlideoutCss;
 
 export { DuetSlideout as duet_slideout };

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

@@ -0,0 +1,97 @@
+/*!
+ * Built with Duet Design System
+ */
+import { r as registerInstance, h, H as Host } from './index-BVAkfiYN.js';
+import { t as tokens } from './tokens-DcQPCCbT.js';
+
+const DuetStatusIcon = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bg = {
+            default: {
+                default: "color_lt_blue_200",
+                success: "color_success_200",
+                warning: "color_warning_200",
+                danger: "color_danger_200",
+            },
+            strong: {
+                default: "color_lt_blue_700",
+                success: "color_success_700",
+                warning: "color_warning_500",
+                danger: "color_danger_600",
+            },
+        };
+        this.color = {
+            default: {
+                default: "color_lt_blue_800",
+                success: "color_success_800",
+                warning: "color_warning_800",
+                danger: "color_danger_800",
+            },
+            strong: {
+                default: "color_lt_blue_100",
+                success: "color_gray_lightest",
+                warning: "color_warning_900",
+                danger: "color_gray_lightest",
+            },
+        };
+        /**
+         * Status the icon indicates
+         */
+        this.variation = "default";
+        /**
+         * Icon size. Entered as one of the icon size design tokens.
+         */
+        this.size = "medium";
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Use strong background color when the icon would not otherwise stand out from the surrounding background.
+         */
+        this.strong = false;
+    }
+    getVariation() {
+        return ["default", "success", "danger", "warning"].includes(this.variation) ? this.variation : "default";
+    }
+    getBg() {
+        return tokens[this.bg[this.strong ? "strong" : "default"][this.getVariation()]];
+    }
+    getColor() {
+        return tokens[this.color[this.strong ? "strong" : "default"][this.getVariation()]];
+    }
+    getIcon() {
+        switch (this.getVariation()) {
+            case "default":
+                return `
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img">
+          <rect width="24" height="24" rx="12" fill="${this.getBg()}"/>
+          <path fill="${this.getColor()}" d="M13.5 17.25A2.252 2.252 0 0 1 11.25 15v-3.75h-.75a.75.75 0 0 1 0-1.5h.75c.827 0 1.5.673 1.5 1.5V15c0 .414.336.75.75.75h.75a.75.75 0 0 1 0 1.5z"/>
+          <circle fill="${this.getColor()}" cx="11.625" cy="7.125" r="1.125"/>
+          </svg>`;
+            case "success":
+                return `
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img">
+          <rect width="24" height="24" rx="12" fill="${this.getBg()}"/>
+          <path fill="${this.getColor()}" d="M9.325 17.916a1.79 1.79 0 0 1-1.498-.799l-2.44-3.462a.75.75 0 0 1 1.227-.864l2.45 3.477a.306.306 0 0 0 .261.148.294.294 0 0 0 .236-.119l7.852-9.935a.75.75 0 1 1 1.175.93l-7.843 9.923a1.781 1.781 0 0 1-.423.396 1.78 1.78 0 0 1-.997.305z"/>
+          </svg>`;
+            case "warning":
+            case "danger":
+                return `
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img">
+          <path fill="${this.getBg()}" d="M1.27,23.767C1.58,23.919 1.926,24 2.273,24L21.73,24C22.336,24 22.906,23.764 23.334,23.336C23.764,22.908 24.001,22.337 24.001,21.73C24.001,21.383 23.92,21.037 23.768,20.727L14.295,1.429C13.862,0.547 12.981,0 11.997,0C11.605,0 11.227,0.088 10.873,0.262C10.369,0.51 9.954,0.924 9.706,1.429L0.234,20.728C-0.034,21.271 -0.073,21.888 0.123,22.462C0.319,23.036 0.727,23.5 1.27,23.767Z"/>
+          <rect fill="${this.getColor()}" x="11.1" y="7.2" width="1.8" height="8.4" rx="0.9"/>
+          <rect fill="${this.getColor()}" x="10.8" y="18" width="2.4" height="2.4" rx="1.2"/>
+          </svg>`;
+        }
+    }
+    render() {
+        return (h(Host, { key: '7f80e70111b54c6828f96f9b4701ed969e592e0e', class: {
+                [`duet-status-icon-${this.getVariation()}`]: true,
+                "duet-strong-bg": this.strong,
+            } }, h("duet-icon", { key: '8a5d1ee9135d47f515b8e74bbbaea58d7e6815b6', icon: this.getIcon(), size: this.size, margin: this.margin })));
+    }
+};
+
+export { DuetStatusIcon as duet_status_icon };

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

@@ -1,15 +1,29 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-1d0b7c66.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { c as createID } from './create-id-149a1b6d.js';
-import { i as isKeyboardClick, s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-439bcc8b.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-BVAkfiYN.js';
+import { g as getDefaultExportFromCjs } from './_commonjsHelpers-DvwKrUS6.js';
+import { i as inheritGlobalTheme } from './themeable-component-B8TGOi99.js';
+import { c as createID } from './create-id-Cfr_DJqU.js';
+import { i as isKeyboardClick, s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-Db8rvjPI.js';
+import { d as DuetStringsListStepOfTotal } from './common-strings-BWvtXbhA.js';
+import { a as getLanguage, g as getLocaleString } from './language-utils-uFQZRSPE.js';
+import './string-utils-C6E9F6QT.js';
 
-var actionEdit2={"title":"action-edit-2","tags":"action edit 2 pen pencil","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M.748 24a.755.755 0 0 1-.531-.22.754.754 0 0 1-.196-.716l1.77-6.905a.84.84 0 0 1 .045-.121.73.73 0 0 1 .151-.223L16.513 1.289A4.355 4.355 0 0 1 19.611 0c1.178 0 2.277.454 3.106 1.279l.029.029a4.367 4.367 0 0 1 1.251 3.121 4.356 4.356 0 0 1-1.32 3.087L8.183 22.01a.735.735 0 0 1-.231.154.784.784 0 0 1-.111.042L.933 23.978A.773.773 0 0 1 .748 24zm1.041-1.791 4.41-1.131-3.281-3.275zm5.868-1.795 13.02-13.02-4.074-4.074L3.58 16.344zM21.736 6.332a2.893 2.893 0 0 0-.059-3.972l-.02-.02a2.872 2.872 0 0 0-2.037-.84v-.375l-.001.375a2.873 2.873 0 0 0-1.954.762z\"/></svg>"};
+var actionEdit2;
+var hasRequiredActionEdit2;
 
-const duetStepCss = "*,*::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}.duet-step{padding:20px !important;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;background:rgb(255, 255, 255);box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)}.duet-step.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\";box-shadow:0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)}.duet-step.rounded-top{border-top-left-radius:4px;border-top-right-radius:4px}.duet-step.rounded-bottom{margin-bottom:20px !important;border-bottom-right-radius:4px;border-bottom-left-radius:4px}@media (min-width: 36em){.duet-step.rounded-bottom{margin-bottom:0 !important}}@media (min-width: 36em){.duet-step{padding:0 20px 0 0 !important;margin:0 !important;font-size:1.25rem;box-shadow:none !important}}.duet-step-heading{display:flex;align-items:center;border-radius:4px}.duet-step-heading[aria-disabled=false]{cursor:pointer}.duet-step-heading:focus{outline:0}.duet-step-heading:active{opacity:0.75}:host(.user-is-tabbing) .duet-step-heading: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-step-heading:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.is-complete .duet-step-heading:hover .duet-step-counter,.is-disabled .duet-step-heading:hover .duet-step-counter{background-color:#005f8f}.duet-theme-turva.is-complete .duet-step-heading:hover .duet-step-counter,.duet-theme-turva.is-disabled .duet-step-heading:hover .duet-step-counter{background-color:#9e0a26}.is-current .duet-step-heading{margin-bottom:20px}@media (min-width: 36em){.duet-step-heading{margin-top:8px;margin-bottom:8px !important}:host(:first-of-type) .duet-step-heading{margin-top:0}:host(:last-of-type) .duet-step-heading{margin-bottom:0 !important}}.duet-step-counter{-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;width:30px;height:30px;line-height:30px;color:rgb(255, 255, 255);text-align:center;border-radius:50%;transition:background-color 300ms ease}@media (min-width: 36em){.duet-step-counter{width:40px;height:40px;line-height:40px}}.is-complete .duet-step-counter,.is-current .duet-step-counter,.is-disabled .duet-step-counter{background-color:rgb(0, 119, 179)}.duet-theme-turva.is-complete .duet-step-counter,.duet-theme-turva.is-current .duet-step-counter,.duet-theme-turva.is-disabled .duet-step-counter{background-color:rgb(198, 12, 48)}.is-incomplete .duet-step-counter{background-color:rgb(98, 121, 138)}.duet-theme-turva.is-incomplete .duet-step-counter{background-color:rgb(143, 147, 158)}.duet-step-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px}@media (min-width: 36em){.duet-step-icon{width:20px;height:20px}}.duet-step-icon duet-icon{width:16px;height:16px}@media (min-width: 36em){.duet-step-icon duet-icon{width:20px;height:20px}}@media (min-width: 36em){.duet-step-content-wrapper{min-height:20px;padding-left:40px;margin-left:19px;border-left:2px solid rgb(212, 223, 229)}.duet-theme-turva .duet-step-content-wrapper{border-color:rgb(222, 224, 228)}:host(:last-of-type) .duet-step-content-wrapper{min-height:0;border:transparent}}.duet-step-content{display:none;padding-bottom:16px}@media (min-width: 36em){.duet-step-content{padding-bottom:28px}}.is-current .duet-step-content{display:block}.duet-step-heading-slot{display:none;margin-top:2px}@media (min-width: 48em){.duet-step-heading-slot{display:block}}";
-const DuetStepStyle0 = duetStepCss;
+function requireActionEdit2 () {
+	if (hasRequiredActionEdit2) return actionEdit2;
+	hasRequiredActionEdit2 = 1;
+	actionEdit2={"title":"action-edit-2","tags":"action edit 2 pen pencil","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M.748 24a.755.755 0 0 1-.531-.22.754.754 0 0 1-.196-.716l1.77-6.905a.84.84 0 0 1 .045-.121.73.73 0 0 1 .151-.223L16.513 1.289A4.355 4.355 0 0 1 19.611 0c1.178 0 2.277.454 3.106 1.279l.029.029a4.367 4.367 0 0 1 1.251 3.121 4.356 4.356 0 0 1-1.32 3.087L8.183 22.01a.735.735 0 0 1-.231.154.784.784 0 0 1-.111.042L.933 23.978A.773.773 0 0 1 .748 24zm1.041-1.791 4.41-1.131-3.281-3.275zm5.868-1.795 13.02-13.02-4.074-4.074L3.58 16.344zM21.736 6.332a2.893 2.893 0 0 0-.059-3.972l-.02-.02a2.872 2.872 0 0 0-2.037-.84v-.375l-.001.375a2.873 2.873 0 0 0-1.954.762z\"/></svg>"};
+	return actionEdit2;
+}
+
+var actionEdit2Exports = requireActionEdit2();
+var editIcon = /*@__PURE__*/getDefaultExportFromCjs(actionEdit2Exports);
+
+const duetStepCss = "*,*::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;display:block}.duet-step{padding:20px !important;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;background:rgb(255, 255, 255);box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)}.duet-step.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\";box-shadow:0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)}.duet-step.rounded-top{border-top-left-radius:4px;border-top-right-radius:4px}.duet-step.rounded-bottom{margin-bottom:20px !important;border-bottom-right-radius:4px;border-bottom-left-radius:4px}@media (min-width: 36em){.duet-step.rounded-bottom{margin-bottom:0 !important}}@media (min-width: 36em){.duet-step{padding:0 20px 0 0 !important;margin:0 !important;font-size:1.25rem;box-shadow:none !important}}.duet-step-heading{display:flex;align-items:center;border-radius:4px}.duet-step-heading:focus{outline:0}:host(.user-is-tabbing) .duet-step-heading:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva :host(.user-is-tabbing) .duet-step-heading:focus,:host(.user-is-tabbing) .duet-step-heading:focus.duet-theme-turva,.duet-theme-turva2 :host(.user-is-tabbing) .duet-step-heading:focus,:host(.user-is-tabbing) .duet-step-heading:focus.duet-theme-turva2{outline-color:rgba(53, 79, 101, 0.8)}.duet-step-heading[aria-disabled=false]{cursor:pointer}.duet-step-heading:active{opacity:0.75}.is-complete .duet-step-heading:hover .duet-step-counter,.is-disabled .duet-step-heading:hover .duet-step-counter{background-color:#005f8f}.duet-theme-turva.is-complete .duet-step-heading:hover .duet-step-counter,.duet-theme-turva.is-disabled .duet-step-heading:hover .duet-step-counter{background-color:#9e0a26}.is-current .duet-step-heading{margin-bottom:20px}@media (min-width: 36em){.duet-step-heading{margin-top:8px;margin-bottom:8px !important}:host(:first-of-type) .duet-step-heading{margin-top:0}:host(:last-of-type) .duet-step-heading{margin-bottom:0 !important}}.duet-step-counter{-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;width:30px;height:30px;line-height:30px;color:rgb(255, 255, 255);text-align:center;border-radius:50%;transition:background-color 300ms ease}@media (min-width: 36em){.duet-step-counter{width:40px;height:40px;line-height:40px}}.is-complete .duet-step-counter,.is-current .duet-step-counter,.is-disabled .duet-step-counter{background-color:rgb(0, 119, 179)}.duet-theme-turva.is-complete .duet-step-counter,.duet-theme-turva.is-current .duet-step-counter,.duet-theme-turva.is-disabled .duet-step-counter{background-color:rgb(198, 12, 48)}.is-incomplete .duet-step-counter{background-color:rgb(98, 121, 138)}.duet-theme-turva.is-incomplete .duet-step-counter{background-color:rgb(143, 147, 158)}.duet-step-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px}@media (min-width: 36em){.duet-step-icon{width:20px;height:20px}}.duet-step-icon duet-icon{width:16px;height:16px}@media (min-width: 36em){.duet-step-icon duet-icon{width:20px;height:20px}}@media (min-width: 36em){.duet-step-content-wrapper{min-height:20px;padding-left:40px;margin-left:19px;border-left:2px solid rgb(212, 223, 229)}.duet-theme-turva .duet-step-content-wrapper{border-color:rgb(222, 224, 228)}:host(:last-of-type) .duet-step-content-wrapper{min-height:0;border:transparent}}.duet-step-content{display:none;padding-bottom:16px}@media (min-width: 36em){.duet-step-content{padding-bottom:28px}}.is-current .duet-step-content{display:block}.duet-step-heading-slot{display:none;margin-top:2px}@media (min-width: 48em){.duet-step-heading-slot{display:block}}:host(.duet-theme-turva2) .duet-theme-turva.is-complete .duet-step-counter,:host(.duet-theme-turva2) .duet-theme-turva.is-current .duet-step-counter,:host(.duet-theme-turva2) .duet-theme-turva.is-disabled .duet-step-counter{background-color:rgb(230, 23, 64)}:host(.duet-theme-turva2) .duet-theme-turva.is-complete .duet-step-heading:hover .duet-step-counter,:host(.duet-theme-turva2) .duet-theme-turva.is-disabled .duet-step-heading:hover .duet-step-counter{background-color:#b81233}:host(.duet-theme-turva2) .duet-theme-turva .duet-step-content-wrapper{border-color:rgb(251, 225, 209)}";
 
 const DuetStep = class {
     constructor(hostRef) {
@@ -17,6 +31,22 @@ const DuetStep = class {
         this.duetStepClick = createEvent(this, "duetStepClick", 7);
         this.buttonId = createID("DuetStepButton");
         this.contentId = createID("DuetStepContent");
+        /**
+         * Theme of the component.
+         */
+        this.theme = "";
+        /**
+         * @internal
+         * Enable/disable rounded top corners (on mobile).
+         * This property is used internally by stepper, and should not be set by the developer.
+         */
+        this.roundedTop = false;
+        /**
+         * @internal
+         * Enable/disable rounded bottom corners (on mobile).
+         * This property is used internally by stepper, and should not be set by the developer.
+         */
+        this.roundedBottom = false;
         this.handleKeyDown = (e) => {
             if (this.isClickDisabled()) {
                 return;
@@ -32,13 +62,6 @@ const DuetStep = class {
             }
             this.handleStepClick(e);
         };
-        this.theme = "";
-        this.heading = undefined;
-        this.headingLevel = undefined;
-        this.stepIndex = undefined;
-        this.state = undefined;
-        this.roundedTop = false;
-        this.roundedBottom = false;
     }
     handleStepClick(e) {
         this.duetStepClick.emit({
@@ -78,7 +101,7 @@ const DuetStep = class {
     }
     renderStepCounter() {
         if (this.state === "complete" || this.state === "disabled") {
-            return (h("div", { class: "duet-step-icon" }, h("duet-icon", { margin: "none", size: "auto", color: "gray-lightest", icon: actionEdit2.svg })));
+            return (h("div", { class: "duet-step-icon" }, h("duet-icon", { margin: "none", size: "auto", color: "gray-lightest", icon: editIcon.svg })));
         }
         return `${this.stepIndex + 1} `;
     }
@@ -87,17 +110,17 @@ const DuetStep = class {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: 'cf7f017c189308e969ac8fc319fff799b44b675b', class: {
+        return (h("div", { key: '369f656f742589a178915ed4e72365d3dda7b907', class: {
                 "duet-step": true,
                 [`is-${this.state}`]: true,
                 "rounded-top": this.roundedTop,
                 "rounded-bottom": this.roundedBottom,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("div", { key: '2742f57e0e278b597d2fb9715b6b85207446064f', class: "duet-step-heading", id: this.buttonId, role: this.state !== "current" ? "button" : "region", "aria-current": this.state === "current" ? "step" : undefined, tabindex: this.state !== "current" ? "0" : undefined, "aria-disabled": this.isClickDisabled().toString(), "aria-expanded": (this.state === "current").toString(), "aria-controls": this.contentId, "aria-selected": (this.state === "current").toString(), onClick: this.handleClick, onKeyDown: this.handleKeyDown, ref: element => (this.buttonElement = element) }, h("div", { key: 'c32bbaed270ec8ea14228ca59f7077128c952b78', "aria-hidden": "true" }, h("div", { key: 'fee937f7b9f3ef92d303fa0502f29632558c3967', class: "duet-step-counter" }, this.renderStepCounter())), h("duet-spacer", { key: '8fa4deb09aaa709141dcfd6d4b8b2969840fb48d', direction: "horizontal", size: "large", breakpoint: "small" }), h("duet-spacer", { key: 'dadc92ff570d92e7e600918019ab84ea6f22ca36', direction: "horizontal", size: "medium", breakpoint: "x-small" }), h("div", { key: '412ba9538aea65069601a21a229a13e38a959cf1' }, h("duet-heading", { key: 'b85991761212bba3610b566a9cf48b28562859d6', theme: this.theme, level: this.headingLevel, visualLevel: "h4", color: this.headingColor(), margin: "none" }, this.heading)), h("duet-spacer", { key: '7b28ba235ac2d4ef273bb4825a1bb53e4069150e', direction: "horizontal", size: "large" }), h("div", { key: '74230c5744cf324e8f406a8d0dfadce54f8cf82d', class: "duet-step-heading-slot" }, h("slot", { key: '74ef4c487e447ba8fc2dfa181a27d5bead1f7cd1', name: "heading-content" }))), h("div", { key: 'a4df2c7c64cbb35185b4d7665235a85d1c503ea0', class: "duet-step-content-wrapper" }, h("div", { key: '0a2fbd936f386294c6fe75bbacb3bd2b324a6311', class: "duet-step-content", role: "region", "aria-labelledby": this.buttonId, id: this.contentId }, h("slot", { key: 'a748fceef07a8ec5cc280d1e7d655b3e9ae14860' })))));
+            } }, h("div", { key: '486a6f5b91cd3a6435bd02202b2191077469044d', class: "duet-step-heading", id: this.buttonId, role: this.state !== "current" ? "button" : "region", "aria-current": this.state === "current" ? "step" : undefined, tabindex: this.state !== "current" ? "0" : undefined, "aria-disabled": this.isClickDisabled().toString(), "aria-expanded": (this.state === "current").toString(), "aria-controls": this.contentId, "aria-selected": (this.state === "current").toString(), onClick: this.handleClick, onKeyDown: this.handleKeyDown, ref: element => (this.buttonElement = element) }, h("div", { key: '80895fe6a9d2581b54ddeb9095f50ab2ae2c40ec', "aria-hidden": "true" }, h("div", { key: '8b38a04e831e7feb20bfbccaf56a017b0c52260d', class: "duet-step-counter" }, this.renderStepCounter())), h("duet-spacer", { key: '2220531e141df3a5cd47dbcecdf5992265af1fff', direction: "horizontal", size: "large", breakpoint: "small" }), h("duet-spacer", { key: '80ba3be5b395b09c02a15ddabc70319bdb710ec2', direction: "horizontal", size: "medium", breakpoint: "x-small" }), h("div", { key: '7426ac138a49a07b9d914c7b92b24dde89fd2220' }, h("duet-heading", { key: '2cf9505b640081b6bc33bf726aa95fb8b49a100e', theme: this.theme, level: this.headingLevel, visualLevel: "h4", color: this.headingColor(), margin: "none" }, this.heading)), h("duet-spacer", { key: '8888b2e5b45f4bc049454ef6166b97af508a09b6', direction: "horizontal", size: "large" }), h("div", { key: '2931ae9df30278381ee5634a45d3bb934ae34215', class: "duet-step-heading-slot" }, h("slot", { key: '0f4314f52c16ef8f3929cea2bf0b5e405168593e', name: "heading-content" }))), h("div", { key: '43264d21b4cb69938551d3e81d4378369c4b23b3', class: "duet-step-content-wrapper" }, h("div", { key: '4913f58605148bb81539d7a24b29b288210f2f3d', class: "duet-step-content", role: "region", "aria-labelledby": this.buttonId, id: this.contentId }, h("slot", { key: '7e7ce320adcd8b1dd456fdb63249c983b03a829e' })))));
     }
     get element() { return getElement(this); }
 };
-DuetStep.style = DuetStepStyle0;
+DuetStep.style = duetStepCss;
 
 function groupBy(prop, items) {
     const result = {};
@@ -111,17 +134,34 @@ function groupBy(prop, items) {
     return result;
 }
 
-const duetStepperCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:20px !important;display:block;width:100%}:host(.duet-m-0){margin:0 !important}.duet-stepper{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}@media (min-width: 36em){.duet-stepper{padding:28px !important;padding-top:36px !important;padding-bottom:36px !important;background:rgb(255, 255, 255);border-radius:4px;box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)}}";
-const DuetStepperStyle0 = duetStepperCss;
+const duetStepperCss = ":host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;margin-bottom:20px !important;display:block;width:100%}:host(.duet-m-0){margin:0 !important}.duet-stepper{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}@media (min-width: 36em){.duet-stepper{padding:28px !important;padding-top:36px !important;padding-bottom:36px !important;background:rgb(255, 255, 255);border-radius:4px;box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)}}";
 
 const DuetStepper = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.duetStepChange = createEvent(this, "duetStepChange", 7);
+        this.language = getLanguage();
+        /**
+         * Theme of the component.
+         */
         this.theme = "";
-        this.accessibleLive = "Lista jossa {total} kohtaa. Olet kohdassa {current}.";
+        /**
+         * Format of message used to announce current step when navigating between steps.
+         * The string {current} is replaced with the current step number.
+         * The string {total} is replaced with the total number of steps.
+         */
+        this.accessibleLive = getLocaleString(DuetStringsListStepOfTotal, this.language);
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Controls whether navigation back to previous steps is allowed or not.
+         */
         this.backDisabled = false;
+        /**
+         * The index of the current step.
+         */
         this.selected = 0;
     }
     currentStepChanged(nextStep) {
@@ -154,8 +194,18 @@ const DuetStepper = class {
         inheritGlobalTheme(this);
     }
     async connectedCallback() {
+        {
+            this.childObserver = new MutationObserver(this.updateStepState.bind(this));
+            this.childObserver.observe(this.element, { childList: true });
+        }
         this.updateStepState();
     }
+    disconnectedCallback() {
+        if (this.childObserver) {
+            this.childObserver.disconnect();
+            this.childObserver = undefined;
+        }
+    }
     getSteps() {
         return Array.from(this.element.querySelectorAll("duet-step"));
     }
@@ -200,7 +250,7 @@ const DuetStepper = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '082c93b48c5dfaadde04f9352ef6181ccdb38334', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '703904a5ecf2f0eb09c89c65639ec8ade1f674e6', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-visually-hidden", { key: 'aa4c9cec5585ee50da88bf4143ee998bbe98f9db', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), h("slot", { key: '708b76a314c85e496f66a12f9f578c2f97e8a96b' }))));
+        return (h(Host, { key: 'df89f1e452d33048371e02ceb399b3392e370b00', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '41faad40942a4fbc0bfec56801d76f6972f87eb4', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-visually-hidden", { key: '225714f663a988bfcca3ae1ff3846bf9bafa12fb', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), h("slot", { key: 'e24151a3887c08c59be65fb9b9ab14be52db5fa7' }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -208,6 +258,6 @@ const DuetStepper = class {
         "backDisabled": ["currentStepInvokedDisable"]
     }; }
 };
-DuetStepper.style = DuetStepperStyle0;
+DuetStepper.style = duetStepperCss;
 
 export { DuetStep as duet_step, DuetStepper as duet_stepper };