@duetds/components 10.0.0-alpha.9 → 10.0.0

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

@@ -3,22 +3,20 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-C0kw3uAi.js');
+var themeableComponent = require('./themeable-component-BEm0vuJc.js');
+var bodyScroll = require('./body-scroll-FWPe3_T_.js');
+var a11yUtils = require('./a11y-utils-DmZK4TTO.js');
+var focusUtils = require('./focus-utils-DFa0zwT7.js');
+var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
+var languageUtils = require('./language-utils-v37OZJFe.js');
+var slotUtils = require('./slot-utils-DFmRJ2pY.js');
+var teleport = require('./teleport-D5NDbuu0.js');
+var tokenUtils = require('./token-utils-BJtlJxnJ.js');
+require('./string-utils-B35hEUBv.js');
+require('./tokens.module-DJt2h4FX.js');
 
-const index = require('./index-7b1d76ef.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const bodyScroll = require('./body-scroll-dba42314.js');
-const focusUtils = require('./focus-utils-47d23c45.js');
-const keyboardUtils = require('./keyboard-utils-f7c9f980.js');
-const languageUtils = require('./language-utils-a6a152b8.js');
-const slotUtils = require('./slot-utils-7e6aa48b.js');
-const teleport = require('./teleport-c6f8391a.js');
-const tokenUtils = require('./token-utils-5000595c.js');
-require('./string-utils-7b13c16e.js');
-require('./tokens.module-7c947029.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) {
@@ -38,7 +36,50 @@ const DuetSlideout = class {
         this.hasStickyHeaderSlot = false;
         this.disconnectController = new AbortController();
         this.eventListenerController = new AbortController();
-        this.setOpenButton = (element, addClickListener = false) => {
+        this.language = languageUtils.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();
             }
@@ -48,8 +89,7 @@ const DuetSlideout = class {
             }
             try {
                 const button = element;
-                button.accessiblePopup = "true";
-                button.accessibleExpanded = false;
+                a11yUtils.setOpenerExpanded(button, false);
                 this.openButton = button;
                 if (addClickListener && !this.disconnectController.signal.aborted) {
                     this.eventListenerController = new AbortController();
@@ -87,35 +127,12 @@ const DuetSlideout = class {
         this.onClick = (e) => {
             this.toggleMenu(e);
         };
-        this.language = languageUtils.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) {
-        const isString = typeof value === "string";
-        const element = isString ? document.getElementById(value) : value;
-        if (this.openButton !== element) {
-            this._opener = value;
-            this.setOpenButton(element, isString);
-        }
     }
     /**
      * Alias for property opener.
      */
     get controller() {
-        return this._opener;
+        return this.opener;
     }
     set controller(value) {
         this.opener = value;
@@ -135,9 +152,11 @@ const DuetSlideout = class {
         if (!this.teleport) {
             this.teleport = new teleport.Teleport(this.element);
         }
-        if (this.teleport) {
+        if (!this.teleport.isActive) {
             this.teleport.activate();
+            return;
         }
+        this.teleport.observeDeletion();
         this.setStickHeaderStyleMutations();
         if (!this.mutationObserver) {
             this.mutationObserver = new MutationObserver(() => {
@@ -147,6 +166,7 @@ const DuetSlideout = class {
         if (this.mutationObserver) {
             this.mutationObserver.observe(this.element, { childList: true, attributeFilter: ["open"], subtree: true });
         }
+        this.setOpenButton();
     }
     disconnectedCallback() {
         languageUtils.disconnectLanguageChangeObserver(this);
@@ -159,7 +179,7 @@ const DuetSlideout = class {
         if (this.disconnectController) {
             this.disconnectController.abort();
         }
-        this.setOpenButton(undefined);
+        this.setOpenButton(null);
         this.setStickHeaderStyleMutations(true);
     }
     handleOpenChange(newValue, oldValue) {
@@ -168,7 +188,7 @@ const DuetSlideout = class {
         }
         if (this.open && !oldValue) {
             if (this.openButton) {
-                this.openButton.accessibleExpanded = true;
+                a11yUtils.setOpenerExpanded(this.openButton, true);
             }
             const openPanel = this.getOpenPanel();
             this.teleport.makeSiblingsInert();
@@ -186,7 +206,7 @@ const DuetSlideout = class {
         }
         else if (!this.open && oldValue) {
             if (this.openButton) {
-                this.openButton.accessibleExpanded = false;
+                a11yUtils.setOpenerExpanded(this.openButton, false);
             }
             setTimeout(() => {
                 focusUtils.focusElement(this.openButton);
@@ -197,6 +217,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.
      */
@@ -266,22 +297,24 @@ const DuetSlideout = class {
         };
         const topLevelOpenMenuBarTranslation = languageUtils.getLocaleString(this.topLevelOpenMenuBarLangObject);
         const exitTranslation = languageUtils.getLocaleString(this.exitLangObject);
-        return (index.h(index.Host, { key: 'c299a850fff6c11bcca6e85576c04bf74e367619' }, index.h("div", { key: '76b69d00087367d0cfcf5de14d4023180b4fa42d', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && index.h("duet-overlay", { key: '6daa912479f25ecd3e5527ab40861590fc36f150', visible: this.open, "display-device": "large", zIndex: "600" }), index.h("div", { key: '9dc84e8113b5243b44224407df8d4c89eafdf2b7', 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 (index.h(index.Host, { key: 'fc8b5893c7783b60a166c82acaac01ede594e43a' }, index.h("div", { key: '57b51e3b1224155ce14db9ecb22b2655cfecf63c', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && index.h("duet-overlay", { key: '415b8638b3df2ded878996d2190f27c6e7405b6d', visible: this.open, zIndex: "600" }), index.h("div", { key: '7f7e122f27d2cf36ab6768543b6e311b4ef6dec4', 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 }, index.h(focusUtils.FocusGuard, { key: '132b28a73aa0dc07ee1f159c59c0f6ca5c7c5e09', moveFocusTo: this.closeButton }), index.h("div", { key: 'cb528ca9e0ee385299a9e042d8f1a42d422d7a1a', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, index.h("div", { key: 'b9e5deae2f2cf48c3d652e885002f30cc434660d', class: "top" }, index.h("button", { key: 'fc5ab74ac6519c2c503131d21fc9239ddf3a1bf8', 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 }, index.h(focusUtils.FocusGuard, { key: '1ca9f5168c94535babbd4438d532efe528edd02b', moveFocusTo: this.closeButton }), index.h("div", { key: '4c3f037a457ef9cb0443cd4c299c03b4a19f2370', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, index.h("div", { key: '9666004103f958a0ce43497706ca6dba3543c787', class: "top" }, index.h("button", { key: '5a68f86a03e7500d8685e48db89e8db791b63a9e', 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 }, index.h("duet-icon", { key: '2c2217a591e73c3121d123a9e3f6062e8d243d9a', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), index.h("div", { key: '1bf96970d244ee1941f3db97c89cac30c4d71f9e', class: "sticky-header" }, index.h("slot", { key: '1d6dca6fc160b198115c7d1469576c6bc4f863ac', name: "sticky-header" }))), index.h("div", { key: '514f42edc0e6477bf154e0de2fdaa9bbe7c3ffea', 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 }, index.h("duet-icon", { key: 'dad816041c74637f1939c86bf7b84713309476f9', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), index.h("div", { key: '07c8ab3b5d1a02e457a8631934d9bb7348abba29', class: "sticky-header" }, index.h("slot", { key: 'baaa3a79e2626a3d484ceab504da10cf90c44ef6', name: "sticky-header" }))), index.h("div", { key: '4024ba5ad42da1d50c4964caa0c20c50e1fb0f10', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
                 items: true,
-            } }, index.h("slot", { key: '982778a16720e0b741c702729b87aa3f805da499' })), index.h(focusUtils.FocusGuard, { key: 'ee76635f5ccb38cc512e1d8a862fc9fd85f72666', moveFocusTo: this.closeButton })))));
+            } }, index.h("slot", { key: 'fc3ed36022c9cee52f7f299fe28d223bc8c71544' })), index.h(focusUtils.FocusGuard, { key: '8055e66cb43e26f56174b1246630b4e75b927ddc', moveFocusTo: this.closeButton })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
-        "open": ["handleOpenChange"]
+        "open": ["handleOpenChange"],
+        "opener": ["handleOpenerChange"]
     }; }
 };
-DuetSlideout.style = DuetSlideoutStyle0;
+DuetSlideout.style = duetSlideoutCss;
 
 exports.duet_slideout = DuetSlideout;

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

@@ -3,23 +3,21 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-7b1d76ef.js');
-const tokens = require('./tokens-57e06fe4.js');
+var index = require('./index-C0kw3uAi.js');
+var tokens = require('./tokens-BxWzRxOl.js');
 
 const DuetStatusIcon = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.bg = {
             default: {
-                default: "color_lt_blue_100",
+                default: "color_lt_blue_200",
                 success: "color_success_200",
                 warning: "color_warning_200",
-                danger: "color_danger_100",
+                danger: "color_danger_200",
             },
             strong: {
-                default: "color_lt_blue_600",
+                default: "color_lt_blue_700",
                 success: "color_success_700",
                 warning: "color_warning_500",
                 danger: "color_danger_600",
@@ -27,10 +25,10 @@ const DuetStatusIcon = class {
         };
         this.color = {
             default: {
-                default: "color_lt_blue_700",
+                default: "color_lt_blue_800",
                 success: "color_success_800",
                 warning: "color_warning_800",
-                danger: "color_danger_700",
+                danger: "color_danger_800",
             },
             strong: {
                 default: "color_lt_blue_100",
@@ -39,19 +37,34 @@ const DuetStatusIcon = class {
                 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.tokens[this.bg[this.strong ? "strong" : "default"][this.variation]];
+        return tokens.tokens[this.bg[this.strong ? "strong" : "default"][this.getVariation()]];
     }
     getColor() {
-        return tokens.tokens[this.color[this.strong ? "strong" : "default"][this.variation]];
+        return tokens.tokens[this.color[this.strong ? "strong" : "default"][this.getVariation()]];
     }
     getIcon() {
-        switch (this.variation) {
+        switch (this.getVariation()) {
             case "default":
                 return `
           <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img">
@@ -76,10 +89,10 @@ const DuetStatusIcon = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '8389c107ccded337d2e5121703d5221e70edcb42', class: {
-                [`duet-status-icon-${this.variation}`]: true,
+        return (index.h(index.Host, { key: '7f80e70111b54c6828f96f9b4701ed969e592e0e', class: {
+                [`duet-status-icon-${this.getVariation()}`]: true,
                 "duet-strong-bg": this.strong,
-            } }, index.h("duet-icon", { key: 'c05e3c223a16541133d3be5cb74f39760cc46ba1', icon: this.getIcon(), size: this.size, margin: this.margin })));
+            } }, index.h("duet-icon", { key: '8a5d1ee9135d47f515b8e74bbbaea58d7e6815b6', icon: this.getIcon(), size: this.size, margin: this.margin })));
     }
 };
 

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

@@ -3,17 +3,29 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-C0kw3uAi.js');
+var _commonjsHelpers = require('./_commonjsHelpers-4N64IRaP.js');
+var themeableComponent = require('./themeable-component-BEm0vuJc.js');
+var createId = require('./create-id-DtslnIOq.js');
+var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
+var commonStrings = require('./common-strings-CC6Xpjb8.js');
+var languageUtils = require('./language-utils-v37OZJFe.js');
+require('./string-utils-B35hEUBv.js');
 
-const index = require('./index-7b1d76ef.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const createId = require('./create-id-1f8c438f.js');
-const keyboardUtils = require('./keyboard-utils-f7c9f980.js');
+var actionEdit2;
+var hasRequiredActionEdit2;
 
-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>"};
+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__*/_commonjsHelpers.getDefaultExportFromCjs(actionEdit2Exports);
 
-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;
+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) {
@@ -21,6 +33,22 @@ const DuetStep = class {
         this.duetStepClick = index.createEvent(this, "duetStepClick", 7);
         this.buttonId = createId.createID("DuetStepButton");
         this.contentId = createId.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;
@@ -36,13 +64,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({
@@ -82,7 +103,7 @@ const DuetStep = class {
     }
     renderStepCounter() {
         if (this.state === "complete" || this.state === "disabled") {
-            return (index.h("div", { class: "duet-step-icon" }, index.h("duet-icon", { margin: "none", size: "auto", color: "gray-lightest", icon: actionEdit2.svg })));
+            return (index.h("div", { class: "duet-step-icon" }, index.h("duet-icon", { margin: "none", size: "auto", color: "gray-lightest", icon: editIcon.svg })));
         }
         return `${this.stepIndex + 1} `;
     }
@@ -91,17 +112,17 @@ const DuetStep = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h("div", { key: '2be03e57885747f4abcf887167a50be41f202172', class: {
+        return (index.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",
-            } }, index.h("div", { key: '13a6b9a9d5a8b5e11441d344768333afbd0006bc', 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) }, index.h("div", { key: '4cdf824131a34f5a722ff75b5865c6968c946b84', "aria-hidden": "true" }, index.h("div", { key: '697c430716ee8b1d61161fbb6cfbfdb347754170', class: "duet-step-counter" }, this.renderStepCounter())), index.h("duet-spacer", { key: '0df10d7cd8c8033debe7e429f052ba3e785c68fd', direction: "horizontal", size: "large", breakpoint: "small" }), index.h("duet-spacer", { key: 'f8be9274607789f07981bb288d19516f222e613b', direction: "horizontal", size: "medium", breakpoint: "x-small" }), index.h("div", { key: 'bc8046dd49578c57e41ff6c301b57711dbf47db8' }, index.h("duet-heading", { key: '841be21a0beabe2000a75341302462ecd0cd3cd6', theme: this.theme, level: this.headingLevel, visualLevel: "h4", color: this.headingColor(), margin: "none" }, this.heading)), index.h("duet-spacer", { key: '992fc197dcc5b85f6d95e016e0736e1b65d0c3de', direction: "horizontal", size: "large" }), index.h("div", { key: '8040a9695f6d0e297b7e0887814a3723e511b8ec', class: "duet-step-heading-slot" }, index.h("slot", { key: 'e7d76c7f8b978934cf234bd29e4e600504f42164', name: "heading-content" }))), index.h("div", { key: '14a1a0370d7443a3181b82b5d0531e9b208ecc1e', class: "duet-step-content-wrapper" }, index.h("div", { key: '19dad47c5c9e09671dbf4318b40f5a5fe4ad852b', class: "duet-step-content", role: "region", "aria-labelledby": this.buttonId, id: this.contentId }, index.h("slot", { key: 'e51e6b4b82722a271c2eba19b54d6bcea10ab5a5' })))));
+            } }, index.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) }, index.h("div", { key: '80895fe6a9d2581b54ddeb9095f50ab2ae2c40ec', "aria-hidden": "true" }, index.h("div", { key: '8b38a04e831e7feb20bfbccaf56a017b0c52260d', class: "duet-step-counter" }, this.renderStepCounter())), index.h("duet-spacer", { key: '2220531e141df3a5cd47dbcecdf5992265af1fff', direction: "horizontal", size: "large", breakpoint: "small" }), index.h("duet-spacer", { key: '80ba3be5b395b09c02a15ddabc70319bdb710ec2', direction: "horizontal", size: "medium", breakpoint: "x-small" }), index.h("div", { key: '7426ac138a49a07b9d914c7b92b24dde89fd2220' }, index.h("duet-heading", { key: '2cf9505b640081b6bc33bf726aa95fb8b49a100e', theme: this.theme, level: this.headingLevel, visualLevel: "h4", color: this.headingColor(), margin: "none" }, this.heading)), index.h("duet-spacer", { key: '8888b2e5b45f4bc049454ef6166b97af508a09b6', direction: "horizontal", size: "large" }), index.h("div", { key: '2931ae9df30278381ee5634a45d3bb934ae34215', class: "duet-step-heading-slot" }, index.h("slot", { key: '0f4314f52c16ef8f3929cea2bf0b5e405168593e', name: "heading-content" }))), index.h("div", { key: '43264d21b4cb69938551d3e81d4378369c4b23b3', class: "duet-step-content-wrapper" }, index.h("div", { key: '4913f58605148bb81539d7a24b29b288210f2f3d', class: "duet-step-content", role: "region", "aria-labelledby": this.buttonId, id: this.contentId }, index.h("slot", { key: '7e7ce320adcd8b1dd456fdb63249c983b03a829e' })))));
     }
     get element() { return index.getElement(this); }
 };
-DuetStep.style = DuetStepStyle0;
+DuetStep.style = duetStepCss;
 
 function groupBy(prop, items) {
     const result = {};
@@ -115,17 +136,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) {
         index.registerInstance(this, hostRef);
         this.duetStepChange = index.createEvent(this, "duetStepChange", 7);
+        this.language = languageUtils.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 = languageUtils.getLocaleString(commonStrings.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) {
@@ -158,8 +196,18 @@ const DuetStepper = class {
         themeableComponent.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"));
     }
@@ -204,7 +252,7 @@ const DuetStepper = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: '52c2d87726509e40615a19b3eea7c78622cec07a', class: { "duet-m-0": this.margin === "none" } }, index.h("div", { key: 'b2f275d436eb7db9dda96c97147d8225a604b527', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, index.h("duet-visually-hidden", { key: 'b639ea4862b8547f0a92c711008ff55ab9935d7f', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), index.h("slot", { key: '081d088375f8343f6484e992ae437daf6ccc9234' }))));
+        return (index.h(index.Host, { key: 'df89f1e452d33048371e02ceb399b3392e370b00', class: { "duet-m-0": this.margin === "none" } }, index.h("div", { key: '41faad40942a4fbc0bfec56801d76f6972f87eb4', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, index.h("duet-visually-hidden", { key: '225714f663a988bfcca3ae1ff3846bf9bafa12fb', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), index.h("slot", { key: 'e24151a3887c08c59be65fb9b9ab14be52db5fa7' }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -212,7 +260,7 @@ const DuetStepper = class {
         "backDisabled": ["currentStepInvokedDisable"]
     }; }
 };
-DuetStepper.style = DuetStepperStyle0;
+DuetStepper.style = duetStepperCss;
 
 exports.duet_step = DuetStep;
 exports.duet_stepper = DuetStepper;

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

@@ -3,23 +3,38 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-C0kw3uAi.js');
+var themeableComponent = require('./themeable-component-BEm0vuJc.js');
+var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
 
-const index = require('./index-7b1d76ef.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const keyboardUtils = require('./keyboard-utils-f7c9f980.js');
-
-const duetSubmenuBarDropdownLinkCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%}.duet-submenu-bar-dropdown-link{display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:flex-start;height:100%;padding:8px 20px 8px 60px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.25;color:rgb(8, 42, 77);text-align:left;text-decoration:none}.duet-submenu-bar-dropdown-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-submenu-bar-dropdown-link:focus,.duet-submenu-bar-dropdown-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-submenu-bar-dropdown-link .label-container{display:flex;flex:1;gap:12px;align-items:center;justify-content:flex-start}@media (min-width: 62em){.duet-submenu-bar-dropdown-link{padding:0.5rem 8px;font-size:1rem;line-height:1.5}}.duet-submenu-bar-dropdown-link.active .label{position:relative}.duet-submenu-bar-dropdown-link.active .label::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transform:1px}.duet-submenu-bar-dropdown-link.active .active-check{display:none}.duet-submenu-bar-dropdown-link.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-submenu-bar-dropdown-link.duet-theme-turva.active .label::after{background:rgb(198, 12, 48)}@media (min-width: 62em){.duet-submenu-bar-dropdown-link.active{background:rgb(240, 247, 250)}.duet-submenu-bar-dropdown-link.active .label::after{display:none}.duet-submenu-bar-dropdown-link.active .active-check{display:block}.duet-submenu-bar-dropdown-link.active.duet-theme-turva{background:rgb(245, 247, 250)}.duet-submenu-bar-dropdown-link:hover{background:rgb(228, 241, 247)}.duet-submenu-bar-dropdown-link:hover.duet-theme-turva{background:rgb(222, 224, 228)}}.duet-submenu-bar-dropdown-link.highlight{color:rgb(0, 119, 179)}.duet-submenu-bar-dropdown-link.highlight.duet-theme-turva{color:rgb(126, 2, 35)}";
-const DuetSubmenuBarDropdownLinkStyle0 = duetSubmenuBarDropdownLinkCss;
+const duetSubmenuBarDropdownLinkCss = "*,*::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;width:100%;height:100%}.duet-submenu-bar-dropdown-link{display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:flex-start;height:100%;padding:8px 20px 8px 60px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.25;color:rgb(8, 42, 77);text-align:left;text-decoration:none}.duet-submenu-bar-dropdown-link:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva .duet-submenu-bar-dropdown-link:focus,.duet-submenu-bar-dropdown-link:focus.duet-theme-turva,.duet-theme-turva2 .duet-submenu-bar-dropdown-link:focus,.duet-submenu-bar-dropdown-link:focus.duet-theme-turva2{outline:2px solid;outline-offset:2px;outline-color:rgba(53, 79, 101, 0.8)}.duet-submenu-bar-dropdown-link .label-container{display:flex;flex:1;gap:12px;align-items:center;justify-content:flex-start}@media (min-width: 62em){.duet-submenu-bar-dropdown-link{padding:0.5rem 8px;font-size:1rem;line-height:1.5}}.duet-submenu-bar-dropdown-link.active .label{position:relative}.duet-submenu-bar-dropdown-link.active .label::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transform:1px}.duet-submenu-bar-dropdown-link.active .active-check{display:none}.duet-submenu-bar-dropdown-link.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-submenu-bar-dropdown-link.duet-theme-turva.active .label::after{background:rgb(198, 12, 48)}@media (min-width: 62em){.duet-submenu-bar-dropdown-link.active{background:rgb(240, 247, 250)}.duet-submenu-bar-dropdown-link.active .label::after{display:none}.duet-submenu-bar-dropdown-link.active .active-check{display:block}.duet-submenu-bar-dropdown-link.active.duet-theme-turva{background:rgb(245, 247, 250)}.duet-submenu-bar-dropdown-link:hover{background:rgb(228, 241, 247)}.duet-submenu-bar-dropdown-link:hover.duet-theme-turva{background:rgb(222, 224, 228)}}.duet-submenu-bar-dropdown-link.highlight{color:rgb(0, 119, 179)}.duet-submenu-bar-dropdown-link.highlight.duet-theme-turva{color:rgb(126, 2, 35)}:host(.duet-theme-turva2) .duet-submenu-bar-dropdown-link.duet-theme-turva{color:rgb(23, 42, 59)}:host(.duet-theme-turva2) .duet-submenu-bar-dropdown-link.duet-theme-turva.active .label::after{background:rgb(230, 23, 64)}@media (min-width: 62em){:host(.duet-theme-turva2) .duet-submenu-bar-dropdown-link.duet-theme-turva.active{background:rgb(253, 247, 242)}:host(.duet-theme-turva2) .duet-submenu-bar-dropdown-link.duet-theme-turva:hover{background:rgb(251, 225, 209)}}:host(.duet-theme-turva2) .duet-submenu-bar-dropdown-link.duet-theme-turva.highlight{color:rgb(230, 23, 64)}";
 
 const DuetSubmenuBarDropdownLink = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Active
+         */
         this.active = false;
+        /**
+         * Href
+         */
         this.href = "#";
+        /**
+         * Icon
+         */
         this.icon = undefined;
+        /**
+         * Caret
+         */
         this.caret = false;
+        /**
+         * Highlight
+         */
         this.highlight = false;
     }
     /**
@@ -40,15 +55,15 @@ const DuetSubmenuBarDropdownLink = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: 'df8e2cce51cd8663e22e083e3aecff5cd19f698f' }, index.h("a", { key: 'f8c5abbcf4c71a27a70d2ed3ec2970b0a74a8fd1', class: {
+        return (index.h(index.Host, { key: '206adf55a559a97afad7c5bc107b46f6a099d8c0' }, index.h("a", { key: 'a61437b76e1ecd5c7d61b773b0b97fe43c457bc5', class: {
                 "duet-submenu-bar-dropdown-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 highlight: this.highlight,
                 active: this.active,
-            }, "aria-current": this.active ? "true" : "false", href: this.href, onKeyUp: e => this.handleEscape(e) }, this.icon && index.h("duet-icon", { key: '1e5a4a47052cf2b062b3b8d10085422b60407c5d', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), index.h("span", { key: 'ca88f89ae807c0217a8921a1ad14261a9da98abc', class: "label-container" }, index.h("span", { key: 'e32914f41e511de24aba0e22fb3703818b795acd', class: "label" }, index.h("slot", { key: '59920cb56fb89f6ac10d94e9e61392dc0724dbdb' })), this.caret && index.h("duet-icon", { key: '603991182270c3942a6f4850fd5d6fb6af18b105', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (index.h("duet-icon", { key: 'ce869a1d9c2edfd036031a730fd6826347bcce8c', class: "active-check", name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
+            }, "aria-current": this.active ? "true" : "false", href: this.href, onKeyUp: e => this.handleEscape(e) }, this.icon && index.h("duet-icon", { key: '50c64c74c7f21aebcb34252b9a5fbf75c391c0d3', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), index.h("span", { key: '0e697759844c9f0255d18fdb41765290f1389581', class: "label-container" }, index.h("span", { key: '3fafa6fece2c5188ec289dbc6fab760d49c73fb4', class: "label" }, index.h("slot", { key: '498dacafcd6fa3c3d097e9bcceb9e78c906cc236' })), this.caret && index.h("duet-icon", { key: 'd7055d84b2cd8de873b0400e7b3434f7670f987a', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (index.h("duet-icon", { key: '40d559b351fcc4d3f56f26045d065a55b840c740', class: "active-check", name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     get element() { return index.getElement(this); }
 };
-DuetSubmenuBarDropdownLink.style = DuetSubmenuBarDropdownLinkStyle0;
+DuetSubmenuBarDropdownLink.style = duetSubmenuBarDropdownLinkCss;
 
 exports.duet_submenu_bar_dropdown_link = DuetSubmenuBarDropdownLink;