@duetds/components 9.8.0 → 9.9.0

package/lib/cjs/duet-share-chart.cjs.entry.js

@@ -0,0 +1,83 @@
+/*!
+ * Built with Duet Design System
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-45354cdd.js');
+const themeableComponent = require('./themeable-component-ad21363c.js');
+const slotUtils = require('./slot-utils-4e1bb28c.js');
+const tokenUtils = require('./token-utils-6258d3f7.js');
+require('./tokens.module-a7c77c13.js');
+
+const duetShareChartCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-share-chart-horizontal-bar{height:16px;margin-bottom:20px;border-radius:4px}.duet-share-chart-horizontal-bar .duet-share-chart-share{box-sizing:border-box;display:inline-block;height:16px;border-color:rgb(255, 255, 255);border-style:solid;border-width:0 1px}.duet-share-chart-horizontal-bar .duet-share-chart-share:first-child{border-left-width:0;border-radius:4px 0 0 4px}.duet-share-chart-horizontal-bar .duet-share-chart-share:last-child{border-right-width:0;border-radius:0 4px 4px 0}.duet-share-chart-item-list{padding:0 4px;margin:0;list-style:none}.duet-share-chart-item-list li{display:flex;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-style:normal;font-weight:400;font-variant-numeric:tabular-nums;color:rgb(8, 42, 77)}.duet-share-chart-item-list li.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-share-chart-item-list span{display:inline-block}.duet-share-chart-item-list .duet-share-chart-item-color{flex-shrink:0;width:12px;height:12px;margin-top:calc((1.5rem - 12px) / 2);margin-right:12px;border-radius:4px}.duet-share-chart-item-list .duet-share-chart-item-value{font-weight:600}";
+const DuetShareChartStyle0 = duetShareChartCss;
+
+const DuetShareChart = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.defaultColors = [
+            "lt-blue-800",
+            "lt-blue-600",
+            "success-600",
+            "success-800",
+            "warning-600",
+            "danger-600",
+            "danger-800",
+        ];
+        /**
+         * Local methods
+         */
+        this.colorPickCount = 0;
+        this.items = undefined;
+        this.theme = "";
+        this.unit = "%";
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        themeableComponent.inheritGlobalTheme(this);
+    }
+    connectedCallback() {
+        {
+            this.childObserver = new MutationObserver(this.updateChartItems.bind(this));
+            this.childObserver.observe(this.element, { childList: true });
+        }
+        this.updateChartItems();
+    }
+    disconnectedCallback() {
+        if (this.childObserver) {
+            this.childObserver.disconnect();
+            this.childObserver = undefined;
+        }
+    }
+    pickColor() {
+        const color = this.defaultColors[this.colorPickCount];
+        this.colorPickCount += 1;
+        if (this.colorPickCount > this.defaultColors.length - 1) {
+            this.colorPickCount = 0;
+        }
+        return color;
+    }
+    updateChartItems() {
+        const children = slotUtils.getElementsFromDefaultSlot(this.element).filter(el => el.tagName.toLocaleLowerCase() === "duet-share-chart-item");
+        this.items = children.map(child => ({
+            text: child.innerText,
+            value: child.value,
+            color: child.color || this.pickColor(),
+        }));
+        this.itemsTotalValue = this.items.reduce((total, { value }) => total + value, 0);
+    }
+    render() {
+        return (index.h(index.Host, { key: '230ed44d6302403fc483392a556cdd6a994ece90' }, index.h("div", { key: '491a97e31835484f390449c35cd21720e06b6a7a', class: "duet-share-chart-horizontal-bar", role: "presentation" }, this.items.map(item => (index.h("span", { class: "duet-share-chart-share", style: {
+                width: `${(item.value / this.itemsTotalValue) * 100}%`,
+                backgroundColor: tokenUtils.getColorByName(item.color, this.theme),
+            } })))), index.h("ul", { key: '943e85740a3ece5878daa1138dfca90ee5798ab2', class: "duet-share-chart-item-list" }, this.items.map(item => (index.h("li", { class: { "duet-theme-turva": this.theme === "turva" } }, index.h("span", { class: "duet-share-chart-item-color", style: { background: tokenUtils.getColorByName(item.color, this.theme) } }), index.h("span", { class: "duet-share-chart-item-text" }, item.text, ":"), index.h("span", { class: "duet-share-chart-item-value" }, "\u00A0", item.value, "\u00A0", this.unit), this.unit !== "%" && (index.h("duet-visually-hidden", null, `${(item.value / this.itemsTotalValue) * 100}%`)))))), index.h("slot", { key: '5c102cbf81beeb8b1c9f2a66508bd34d7547a2b5' })));
+    }
+    get element() { return index.getElement(this); }
+};
+DuetShareChart.style = DuetShareChartStyle0;
+
+exports.duet_share_chart = DuetShareChart;

package/lib/cjs/duet-show-more.cjs.entry.js

@@ -5,11 +5,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d8a31a0.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
+const index = require('./index-45354cdd.js');
+const themeableComponent = require('./themeable-component-ad21363c.js');
 const createId = require('./create-id-1f8c438f.js');
 const keyboardUtils = require('./keyboard-utils-f7c9f980.js');
-const languageUtils = require('./language-utils-53bb7035.js');
+const languageUtils = require('./language-utils-5a4f4a41.js');
 require('./string-utils-7b13c16e.js');
 
 const duetShowMoreCss = "*,*::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-show-more{margin-bottom:16px !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;line-height:1.5;color:rgb(8, 42, 77)}.duet-show-more.duet-m-0{margin:0 !important}.duet-show-more .slotted-content{display:none}.duet-show-more.open .slotted-content{display:block}.duet-show-more .content:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-show-more.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-show-more.duet-theme-turva .content:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}";
@@ -107,7 +107,7 @@ const DuetShowMore = class {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
                 open: this.open,
-            } }, index.h("div", { key: 'cb5ee3dc6799544ca3143b393e56c1e071a2d665', ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "0" : "" }, index.h("div", { key: '76e41c6973f3726aa33d00976cc63193eec441fc', class: { "slotted-content": true } }, index.h("slot", { key: '28428da989122f03a691452b9d9dfdad572a020f' }))), index.h("duet-button", { key: 'cb1b97b696381ce1ce411c164cfb4871a99453d0', id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, accessiblePressed: this.isSafariBrowser ? this.open : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "icon-right": true, icon: this.open ? "action-arrow-up-small" : "action-arrow-down-small", "icon-size": "medium-small", size: "small", margin: this.buttonMargin, padding: this.buttonPadding, theme: this.theme === "turva" ? "turva" : "default" }, index.h("span", { key: '3fd3eaa07a9d0d5b021a9c32c552801bee29986c' }, this.open ? this.showLessLabel : this.showMoreLabel)))));
+            } }, index.h("div", { key: 'bc1f2d3525d4e5ce6b10770013aa6696822a71aa', ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "-1" : "" }, index.h("div", { key: 'b250102aac08de1604938717797afcfc7f28f624', class: { "slotted-content": true } }, index.h("slot", { key: '95f39f8e5abf0a79bf9f40cf34281013991cdd8b' }))), index.h("duet-button", { key: 'b07f00cb1d84ba412a711f7f1f37e7e3269e1984', id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, accessiblePressed: this.isSafariBrowser ? this.open : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "icon-right": true, icon: this.open ? "action-arrow-up-small" : "action-arrow-down-small", "icon-size": "medium-small", size: "small", margin: this.buttonMargin, padding: this.buttonPadding, theme: this.theme === "turva" ? "turva" : "default" }, index.h("span", { key: '33157363432909baaa57cb03d67c71c0de61b073' }, this.open ? this.showLessLabel : this.showMoreLabel)))));
     }
     get element() { return index.getElement(this); }
 };

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

@@ -5,9 +5,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d8a31a0.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const languageUtils = require('./language-utils-53bb7035.js');
+const index = require('./index-45354cdd.js');
+const themeableComponent = require('./themeable-component-ad21363c.js');
+const languageUtils = require('./language-utils-5a4f4a41.js');
 require('./string-utils-7b13c16e.js');
 
 const duetSlideoutLangCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-slideout-lang{display:flex;gap:20px;align-items:center;justify-content:flex-start;width:min-content;white-space:nowrap}::slotted(*){position:relative}::slotted(:not(:first-child)){padding-right:0;padding-left:0.5rem}::slotted(:not(:last-child))::after{position:absolute;top:25%;right:-16px;width:2px;height:50%;content:\"\";background:rgb(8, 42, 77)}.duet-theme-turva ::slotted(:not(:last-child))::after{background:rgb(23, 28, 58)}";
@@ -45,7 +45,7 @@ const DuetSlideoutLang = class {
      */
     render() {
         const langTranslation = languageUtils.getLocaleString(this.chooseLangObject);
-        return (index.h(index.Host, { key: '26940a9efe3228ad051940cfb903980d683cf614' }, index.h("div", { key: 'a031d990d2bf459e73678e682d1952e7225a67e7', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, index.h("duet-icon", { key: '7ff54cdd19c444cb9d8c8a67b5e563df53f13e0b', name: "navigation-language", margin: "none", color: "secondary" }), index.h("slot", { key: '2c0a83341839a6953c176fd68882dbd05151948a' }))));
+        return (index.h(index.Host, { key: '848aaedd9e1c8ed6d539b69daef3a831af55b178' }, index.h("div", { key: '69695781b71a228e58973bd2673c7765582b6fcb', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, index.h("duet-icon", { key: '2305f5314bf1fb5c270d2a8eeb55f75382d2591a', name: "navigation-language", margin: "none", color: "secondary" }), index.h("slot", { key: '2d7a718ac92ce21dd138e7fb71e27a02ac5ca1ae' }))));
     }
     get element() { return index.getElement(this); }
 };

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

@@ -5,13 +5,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d8a31a0.js');
+const index = require('./index-45354cdd.js');
 const actionNewWindowSmall = require('./action-new-window-small-fa51dfb9.js');
 const commonStrings = require('./common-strings-2984301e.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const a11yUtils = require('./a11y-utils-a2456285.js');
-const languageUtils = require('./language-utils-53bb7035.js');
-require('./slot-utils-f85c14a2.js');
+const themeableComponent = require('./themeable-component-ad21363c.js');
+const a11yUtils = require('./a11y-utils-050310c7.js');
+const languageUtils = require('./language-utils-5a4f4a41.js');
+require('./slot-utils-4e1bb28c.js');
 require('./string-utils-7b13c16e.js');
 
 const duetSlideoutLinkCss = "*,*::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-slideout-link{position:relative;display:flex;gap:20px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 0;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:inherit;font-weight:inherit;line-height:1.25;color:inherit;text-align:left;text-decoration:none}.duet-slideout-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-slideout-link:focus,.duet-slideout-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-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\"}.duet-slideout-link.active span{position:relative}.duet-slideout-link.active .label-content::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:var(--active-height, 2px);content:\"\";background:rgb(0, 119, 179);transform:var(--active-translate-y, translateY(2px))}.duet-slideout-link.active.duet-theme-turva span::after{background:rgb(198, 12, 48)}.duet-slideout-link.small{font-size:1rem;font-weight:600}.duet-slideout-link.small span::after{--active-height:1px;--active-translate-y:1px}.duet-slideout-link.medium{font-size:1.25rem;font-weight:600}.duet-slideout-link.large{font-size:1.5rem;font-weight:800}.duet-slideout-link .label{display:flex;gap:8px;align-items:center;justify-content:space-between;width:100%}.duet-slideout-link .label-container{display:flex;gap:8px;align-items:center;justify-content:flex-start;width:100%}.duet-slideout-link .external-icon{width:10px;height:10px}.duet-slideout-link.medium .external-icon,.duet-slideout-link.large .external-icon{width:12px;height:12px}slot[name=description]::slotted(*){display:block;padding:8px 0 0;font-size:1rem;font-size:1.25;font-weight:400;color:rgb(98, 121, 138)}.duet-theme-turva slot[name=description]::slotted(*){color:rgb(113, 118, 132)}";
@@ -53,12 +53,12 @@ const DuetSlideoutLink = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: 'e58e7e022f359b763fff57c4794d9581204ae9f1' }, index.h("a", { key: 'b02485b104f43923bb51c25449ad782669da2a3f', target: !this.href ? null : this.external ? "_blank" : "_self", class: {
+        return (index.h(index.Host, { key: '9c7e694f19f234e14ac86c900c0f7ae6f765f7ab' }, index.h("a", { key: 'ff3e3a23d2d1b3f56b0b994e7eeccb6f71b4c5be', target: !this.href ? null : this.external ? "_blank" : "_self", class: {
                 "duet-slideout-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [this.size]: true,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": (this.href && a11yUtils.getAccessibleLinkLabel(this)) || this.accessibleLabel, rel: this.external ? "noopener" : undefined }, this.icon && (index.h("duet-icon", { key: 'f2a699889f3e342915733dc322f5607d4dc1b381', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), index.h("div", { key: '67777983021ac91e35b68e9b8bdb6f0b56279107', class: "label" }, index.h("span", { key: 'd0ac662968dec767e9a095843f32f7dcea698190' }, index.h("span", { key: '1e75583ea91cbe3bf1ff4720f9b2d9efc96be742', class: "label-container" }, index.h("span", { key: 'c8be5ead58f8ae2669a818f2d552c91d2f95804f', class: "label-content" }, index.h("slot", { key: 'fd51bd2d2971917a7259abc816268bfa38cb439d' })), this.external && (index.h("duet-icon", { key: '7ef7af0a841d9241becd86c1364c89f6cae59c6a', class: "external-icon", theme: this.theme, name: actionNewWindowSmall.actionNewWindowSmall.title, margin: "none", size: "auto", color: "currentColor" }))), index.h("slot", { key: 'fb1da47dfd02a661c7286b0c523a8c3ac5f83cf1', name: "description" })), this.caret && (index.h("duet-icon", { key: 'c4f51f17072cd66112993ed45421a5a8ccb59058', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": (this.href && a11yUtils.getAccessibleLinkLabel(this)) || this.accessibleLabel, rel: this.external ? "noopener" : undefined }, this.icon && (index.h("duet-icon", { key: 'f7528118eb9ac1331797c4e375e5373511ed2b5a', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), index.h("div", { key: '7ade705aba28a34b24d53a09ec067823b94c03d6', class: "label" }, index.h("span", { key: '84085ddeaa526502419641aefd0cd30106b89fe0' }, index.h("span", { key: '792db99a27189102d713db6351e724547297670f', class: "label-container" }, index.h("span", { key: '1416b4f044e1320c2f71a2db1b3839e21d482979', class: "label-content" }, index.h("slot", { key: '7f66789e0c27b6c09309f446179cdc8e5a6dfa6d' })), this.external && (index.h("duet-icon", { key: 'b1e870744e89431b43907f9ca6030a075af36be7', class: "external-icon", theme: this.theme, name: actionNewWindowSmall.actionNewWindowSmall.title, margin: "none", size: "auto", color: "currentColor" }))), index.h("slot", { key: '3dcd61fca8f725f97ea83d397d676ede325fb624', name: "description" })), this.caret && (index.h("duet-icon", { key: '4bcd014bb5cd4c1d1af3d42d113407b26bcad004', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
     }
     get element() { return index.getElement(this); }
 };

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

@@ -5,8 +5,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d8a31a0.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
+const index = require('./index-45354cdd.js');
+const themeableComponent = require('./themeable-component-ad21363c.js');
 
 const duetSlideoutPanelDropdownCss = "*,*::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%}:host slot:not([name=label])::slotted(*){position:relative;top:-0.5rem;opacity:0;transition:top 0.3s ease-in, opacity 0.3s ease-in}:host([open]) slot:not([name=label])::slotted(*){top:0;opacity:1}.duet-slideout-panel-dropdown{position:relative;width:100%;height:100%}.duet-slideout-panel-dropdown button{position:relative;display:flex;gap:20px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 0;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1.25rem;font-weight:800;line-height:1.25;color:rgb(8, 42, 77);text-align:center;text-decoration:none;cursor:pointer}.duet-slideout-panel-dropdown button .label{position:relative;display:flex;gap:0.5rem;align-items:center;justify-content:center}.duet-slideout-panel-dropdown button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout-panel-dropdown button.active .label::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:calc(100% - 18px);height:1px;content:\"\";background:rgb(0, 119, 179);transform:translateY(1px)}.duet-slideout-panel-dropdown .items{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-height:1000px;padding:4px 20px 8px 44px;overflow-y:auto;visibility:visible;transition:max-height 0.3s ease-in, padding-bottom 0.3s ease-in;-ms-overflow-style:none;scrollbar-width:none}.duet-slideout-panel-dropdown .items::-webkit-scrollbar{display:none}.duet-slideout-panel-dropdown .items.hidden{max-height:0;padding:0;overflow:hidden;visibility:hidden;transition:max-height 0.3s ease-out, padding-bottom 0.3s ease-out}.duet-slideout-panel-dropdown.duet-theme-turva button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-slideout-panel-dropdown.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-panel-dropdown.duet-theme-turva button.active .label::after{background:rgb(198, 12, 48)}slot{--active-height:1px;--active-translate-y:translateY(1px);font-size:1rem;font-weight:400;color:rgb(8, 42, 77)}.duet-theme-turva slot{color:rgb(23, 28, 58)}slot[name=label]{font-size:1rem;font-weight:600}";
 const DuetSlideoutPanelDropdownStyle0 = duetSlideoutPanelDropdownCss;
@@ -49,16 +49,16 @@ const DuetSlideoutPanelDropdown = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: '35bf0d91a006cd0fb6a50012f5f48b8b84d5ecac' }, index.h("div", { key: 'aebfdab784d0a2921fc1f5b461b881c241ef5066', class: {
+        return (index.h(index.Host, { key: '89618f83739daf830ec8b90e05e9f3e5f9b52f34' }, index.h("div", { key: 'e155beffd0996d1cace98318dc02b6a9cd6f1531', class: {
                 "duet-slideout-panel-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, index.h("button", { key: 'f3174e8f9f070b3c8cd4da9e6db8b695982f236b', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, index.h("button", { key: 'f2aeae59fdea3ec033d49a5a5539c5d5f076394a', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 active: this.active,
-            }, onClick: this.onClick }, this.icon && index.h("duet-icon", { key: '02b31af38cf8ef821d9bd8b83ede34c900b58c41', name: this.icon, size: "medium", margin: "none", color: "secondary" }), index.h("span", { key: '1244f292f215410cba0750e205392e5d5fcd9ab7', class: "label" }, index.h("slot", { key: 'a55379905e5ec24ec617910fccdba8f351494d11', name: "label" }), index.h("duet-icon", { key: 'c63d4943d43087e6ec52e7e54f8a4211daebeadd', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), index.h("div", { key: '31e1e8a311b9ee173852bcbf3733cc846d7f87da', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick }, this.icon && index.h("duet-icon", { key: 'c884fa8d6236722a189b5bc384eb85000587ffa1', name: this.icon, size: "medium", margin: "none", color: "secondary" }), index.h("span", { key: '73cfdab8bb78c2504a8fc0d45d581be2161b6039', class: "label" }, index.h("slot", { key: '656c5d97ba82b382db0feb02003427fe41eb1767', name: "label" }), index.h("duet-icon", { key: 'd927fed89d4414a08391ca31fdfde8d51cd64b01', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), index.h("div", { key: '2292a1771bdc183cc5b4eb3836e32af3caf69397', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, index.h("slot", { key: 'b7365965b0950b899e494162007d51130444478d' })))));
+            } }, index.h("slot", { key: '8b5ea9880c9444c6bd3d98db753a7503813cdd21' })))));
     }
     get element() { return index.getElement(this); }
 };

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

@@ -5,12 +5,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d8a31a0.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
+const index = require('./index-45354cdd.js');
+const themeableComponent = require('./themeable-component-ad21363c.js');
 const bodyScroll = require('./body-scroll-dba42314.js');
-const focusUtils = require('./focus-utils-923b8b88.js');
-const languageUtils = require('./language-utils-53bb7035.js');
-const slotUtils = require('./slot-utils-f85c14a2.js');
+const focusUtils = require('./focus-utils-17b92876.js');
+const languageUtils = require('./language-utils-5a4f4a41.js');
+const slotUtils = require('./slot-utils-4e1bb28c.js');
 const tokenUtils = require('./token-utils-6258d3f7.js');
 require('./string-utils-7b13c16e.js');
 require('./tokens.module-a7c77c13.js');
@@ -164,23 +164,23 @@ const DuetSlideoutPanel = class {
         };
         const exitTranslation = languageUtils.getLocaleString(this.exitLangObject);
         const backTranslation = languageUtils.getLocaleString(this.backLangObject);
-        return (index.h(index.Host, { key: '2b36b05ce039386747c09abf0e5323c48b5e0488' }, index.h("div", { key: 'd58f2b9732c3ab38b13bd4f0439efe9012b9d515', class: {
+        return (index.h(index.Host, { key: 'cb822cc9737388e773957e9167d9a3f3092a5024' }, index.h("div", { key: 'ecf89dccd7aaa7516815ddb1b3283dcb88561624', class: {
                 "duet-slideout-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, index.h("button", { key: '529140519e744fd8e36ff8afea01ca18938414b0', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, index.h("button", { key: '1c5d2a8c1e0ccc4d56c57c12e32f37fd2d8bdf28', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 link: true,
                 active: this.active,
-            }, onClick: this.onClick, inert: this.open }, this.icon && (index.h("div", { key: '4f8d0249d6221a523a3a0b3836933b432829d8c8', class: "duet-slideout-icon" }, index.h("duet-icon", { key: '230b927f9771d593709e791c14618db90d7aa895', name: this.icon, size: "medium", margin: "none", color: "secondary" }), this.badge && index.h("div", { key: '33617258b158f4f59b6e9655b058a84a3ee47af1', class: "duet-slideout-badge" }))), index.h("span", { key: '7da950982ae9adb1e9d37515b3e271e506836d41', class: "label" }, index.h("span", { key: '6046719acd63d608ed7a2a47452f5dba66c99d8b', class: { "label-text": true, [this.labelSize]: true } }, index.h("slot", { key: '4d7b76d2d25171390101ef25f431af7c8ef1a008', name: "label" })), index.h("duet-icon", { key: 'd9c3ae0d685375bc29e8901f2c41bf8e2028a1db', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), index.h("div", { key: '4e5a633d2f18f22bcf2cb69252f8f497def373fe', ref: element => (this.dialog = element), class: {
+            }, onClick: this.onClick, inert: this.open }, this.icon && (index.h("div", { key: '2ed84760445304c52dc13d7d5691fa83386a3fb3', class: "duet-slideout-icon" }, index.h("duet-icon", { key: 'a80ea5ba954811c488852ac37d6d7239b7b33a14', name: this.icon, size: "medium", margin: "none", color: "secondary" }), this.badge && index.h("div", { key: 'a66f32d3b20af0bbad481d024da7cc5616b1c879', class: "duet-slideout-badge" }))), index.h("span", { key: 'da846f3815471fb3fdcd4c1319e18f1a5597cfa0', class: "label" }, index.h("span", { key: 'f6e260a2a4e4b97d6f724f45e1e46ab386dff47d', class: { "label-text": true, [this.labelSize]: true } }, index.h("slot", { key: 'abddec9671e9c3b3a3cf43ee916ee198a06b0516', name: "label" })), index.h("duet-icon", { key: 'ed3ef00614b835aac2526866e71b05198dabe225', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), index.h("div", { key: 'f004a0beebfa0aea1f9140d94f44a53def61be84', ref: element => (this.dialog = element), class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, index.h(focusUtils.FocusGuard, { key: '9f810bf575701688ab08f60726de6da69bc12635', moveFocusTo: this.closeButton }), index.h("div", { key: '13828354ebc908614edfa649b633c78b5ca040d0', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, index.h("div", { key: 'd3a965830f5cb2f31d767b925c9f35470dab844d', class: "top" }, index.h("button", { key: 'c07c0504cb16358d05e42cce8554b99f034d07b9', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
+            }, style: styles }, index.h(focusUtils.FocusGuard, { key: '141275269b60c09c78245f2cdba73e3c1556ec89', moveFocusTo: this.closeButton }), index.h("div", { key: '8835c47450104420f6dd3a208375dfc129fe13fc', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, index.h("div", { key: 'e26413e851f98164d3f00b4839899a7a05c57a0d', class: "top" }, index.h("button", { key: 'e47be55cb0d87b1031a051ce164af014ca773e17', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
                 back: true,
-            }, onClick: this.onClick }, index.h("duet-icon", { key: '521c0a3724fe426035c1c941752d1498e41034be', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), index.h("span", { key: 'e9727f3f182d3bbfd2aa5f65d3f750b0e1da6131' }, this.label.innerHTML), index.h("button", { key: '6132ffcdc5f194d857698b0a8e4bb6b725113af2', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, index.h("duet-icon", { key: '2aa67d1f3468592b7886bafa0b168db8a8156b9b', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), index.h("div", { key: 'bc7eec6649885a979ed139c6742de251672a9821', class: "sticky-header" }, index.h("slot", { key: 'b9983428eb3d8232c5d68154a8bb200cd4cc7e2a', name: "sticky-header" }))), index.h("div", { key: '20ea66396b8e7d802a44d36c7aa326294e7a95cb', tabindex: "-1", role: "menu",
+            }, onClick: this.onClick }, index.h("duet-icon", { key: '6c1caa323b815ad3940991fdc7aacec7aab7f94a', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), index.h("span", { key: '96e9ac9d7ff5121db3d90ce76613d00db1864778' }, this.label.innerHTML), index.h("button", { key: '4557397517d57085b8442828c0b60164ce048a3e', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, index.h("duet-icon", { key: '7c00e8108b826b44fc9343d172fcda9eb700d4a9', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), index.h("div", { key: 'b9f1ebcaf47a9635917063bec751725fd580f019', class: "sticky-header" }, index.h("slot", { key: 'd70c5e23758b79af9cfadfab39349bf9b71b4a76', name: "sticky-header" }))), index.h("div", { key: 'c87464365151093c3edca5fc7478af7b3b90e2ff', tabindex: "-1", role: "menu",
             //TODO: slideout menu fades out, needs to be instant
             id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, index.h("slot", { key: '625703e33ae89586ed068b86912c37721035c645' })), index.h(focusUtils.FocusGuard, { key: 'e34b98e036503d08b5d653169fbff5bd8dea058f', moveFocusTo: this.closeButton })))));
+            } }, index.h("slot", { key: 'a0dd655320d212ccc005c3fb096b578f19f9c0a8' })), index.h(focusUtils.FocusGuard, { key: 'dafafa79bc1b13a9c9eb46379181a02ab0487aa5', moveFocusTo: this.closeButton })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -5,13 +5,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d8a31a0.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
+const index = require('./index-45354cdd.js');
+const themeableComponent = require('./themeable-component-ad21363c.js');
 const bodyScroll = require('./body-scroll-dba42314.js');
-const focusUtils = require('./focus-utils-923b8b88.js');
+const focusUtils = require('./focus-utils-17b92876.js');
 const keyboardUtils = require('./keyboard-utils-f7c9f980.js');
-const languageUtils = require('./language-utils-53bb7035.js');
-const slotUtils = require('./slot-utils-f85c14a2.js');
+const languageUtils = require('./language-utils-5a4f4a41.js');
+const slotUtils = require('./slot-utils-4e1bb28c.js');
 const teleport = require('./teleport-c0eede18.js');
 const tokenUtils = require('./token-utils-6258d3f7.js');
 require('./string-utils-7b13c16e.js');

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d8a31a0.js');
+const index = require('./index-45354cdd.js');
 const tokens = require('./tokens-e6fda5ee.js');
 
 const DuetStatusIcon = class {
@@ -44,14 +44,17 @@ const DuetStatusIcon = class {
         this.margin = "auto";
         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 +79,10 @@ const DuetStatusIcon = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '62f4a599636b2d283b9f41c94c9b6a1425e2c1a4', class: {
-                [`duet-status-icon-${this.variation}`]: true,
+        return (index.h(index.Host, { key: 'f2a27d2fd14f0521619a4a4acc078853914cb77d', class: {
+                [`duet-status-icon-${this.getVariation()}`]: true,
                 "duet-strong-bg": this.strong,
-            } }, index.h("duet-icon", { key: '8223a11f889eeb219bd27b1c70601904bca84ade', icon: this.getIcon(), size: this.size, margin: this.margin })));
+            } }, index.h("duet-icon", { key: '9fea7a807f88b0c840a4fb37ea025126edf80a3e', icon: this.getIcon(), size: this.size, margin: this.margin })));
     }
 };
 

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

@@ -5,8 +5,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d8a31a0.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
+const index = require('./index-45354cdd.js');
+const themeableComponent = require('./themeable-component-ad21363c.js');
 const createId = require('./create-id-1f8c438f.js');
 const keyboardUtils = require('./keyboard-utils-f7c9f980.js');
 

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

@@ -5,8 +5,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d8a31a0.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
+const index = require('./index-45354cdd.js');
+const themeableComponent = require('./themeable-component-ad21363c.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)}";
@@ -40,12 +40,12 @@ const DuetSubmenuBarDropdownLink = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: '8e171bfdd3a97a208d76852cad10497303cc6a41' }, index.h("a", { key: '6ef3bedf1b242e3564a6a32b5e564e50c0ca6e08', class: {
+        return (index.h(index.Host, { key: 'c9c117e150388808484adcbb1b89d8a1f402c5dd' }, index.h("a", { key: '4b79d238f3e36813339bea04e3c9a559ee3972a6', 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: '696a5c14ddf44486ccd7ae685987d3ae73819eda', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), index.h("span", { key: '0066ac29350ba089295585f001dde093e303028b', class: "label-container" }, index.h("span", { key: '003bfe108d7aa853d32238e6b888587965e63710', class: "label" }, index.h("slot", { key: '82c97684842fa6839700732f1bc75ef2b7eeda68' })), this.caret && index.h("duet-icon", { key: 'e85bc1b85802155eb3044d8ab5c78d7e4e8a247b', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (index.h("duet-icon", { key: 'ba3841ab9bd427fb8b9b31fb1f9340b59afd2949', 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: 'f0de902b75bd2c14f2e5ab7bab9045c6f7516219', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), index.h("span", { key: 'fb4cc6db27bd38658bbca4c0ac023c60b8c1f9f1', class: "label-container" }, index.h("span", { key: '4451bf79f482417ca15545d3c066d1bb5f2fabf4', class: "label" }, index.h("slot", { key: 'ff2def8614a7757177b420f8f0f071d5f6b2dda8' })), this.caret && index.h("duet-icon", { key: 'd2e513116a7031390c920b937617b8f365c2fa9a', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (index.h("duet-icon", { key: '0b9751d96777023aef4b13d1b06ac493975f219a', class: "active-check", name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     get element() { return index.getElement(this); }
 };

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

@@ -5,9 +5,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d8a31a0.js');
+const index = require('./index-45354cdd.js');
 const tokens = require('./tokens-e6fda5ee.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
+const themeableComponent = require('./themeable-component-ad21363c.js');
 const keyboardUtils = require('./keyboard-utils-f7c9f980.js');
 
 const duetSubmenuBarDropdownCss = "*,*::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%}@media (min-width: 62em){:host{width:auto}}.duet-submenu-bar-dropdown{position:relative;height:100%}.duet-submenu-bar-dropdown button{position:relative;display:flex;flex-direction:row;gap:16px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:12px 1.5rem;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;line-height:1.25;color:rgb(8, 42, 77);text-align:center;text-decoration:none;cursor:pointer}@media (min-width: 62em){.duet-submenu-bar-dropdown button{flex-direction:column;gap:5px;align-items:center;justify-content:center;width:auto;font-size:0.875rem;color:rgb(0, 75, 129)}}.duet-submenu-bar-dropdown button .label{display:flex;gap:5px;align-items:center;justify-content:center}@media (min-width: 62em){.duet-submenu-bar-dropdown button.open{background:rgb(228, 241, 247)}}.duet-submenu-bar-dropdown button.open .caret{transform:rotate(180deg)}.duet-submenu-bar-dropdown button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-submenu-bar-dropdown button.active .label-text{position:relative}.duet-submenu-bar-dropdown button.active .label-text::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transform:1px}@media (min-width: 62em){.duet-submenu-bar-dropdown button.active .label-text::after{display:none}}@media (min-width: 62em){.duet-submenu-bar-dropdown button .caret{position:absolute;right:12px}.duet-submenu-bar-dropdown button:hover{color:rgb(8, 42, 77);background:rgb(228, 241, 247)}.duet-submenu-bar-dropdown button:hover.active{color:rgb(8, 42, 77)}.duet-theme-turva .duet-submenu-bar-dropdown button:hover.active{color:rgb(23, 28, 58)}.duet-submenu-bar-dropdown button.active{color:rgb(0, 119, 179)}.duet-theme-turva .duet-submenu-bar-dropdown button.active{color:rgb(198, 12, 48)}.duet-submenu-bar-dropdown button.active::after,.duet-submenu-bar-dropdown button.open::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}.duet-theme-turva .duet-submenu-bar-dropdown button.active::after,.duet-theme-turva .duet-submenu-bar-dropdown button.open::after{background:rgb(198, 12, 48)}}.duet-submenu-bar-dropdown .submenu-bar-dropdown-icon{width:20px;height:20px}@media (min-width: 62em){.duet-submenu-bar-dropdown .submenu-bar-dropdown-icon{width:16px;height:16px}}.duet-submenu-bar-dropdown .items{display:flex;flex-direction:column;align-items:center;justify-content:center;max-height:1000px;padding:4px 0 16px;overflow-y:auto;color:rgb(8, 42, 77);visibility:visible;transition:max-height 0.3s ease-in, padding 0.3s ease-in;-ms-overflow-style:none;scrollbar-width:none}.duet-submenu-bar-dropdown .items::-webkit-scrollbar{display:none}@media (min-width: 62em){.duet-submenu-bar-dropdown .items{position:absolute;top:93%;z-index:600;min-width:320px;padding:8px;background:rgb(255, 255, 255);border-radius:8px;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.07), 0 4px 10px 0 rgba(0, 41, 77, 0.15);transition:none}}.duet-submenu-bar-dropdown .items.hidden{max-height:0;padding:0;overflow:hidden;visibility:hidden;transition:max-height 0.3s ease-in, padding 0.3s ease-in}.duet-submenu-bar-dropdown.duet-theme-turva button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva button:hover{background:rgb(222, 224, 228)}}.duet-submenu-bar-dropdown.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-submenu-bar-dropdown.duet-theme-turva button.active .label-text::after,.duet-submenu-bar-dropdown.duet-theme-turva button.open .label-text::after{background:rgb(198, 12, 48)}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva button.active,.duet-submenu-bar-dropdown.duet-theme-turva button.open{color:rgb(126, 2, 35)}}.duet-submenu-bar-dropdown.duet-theme-turva button.active::after,.duet-submenu-bar-dropdown.duet-theme-turva button.open::after{background:rgb(126, 2, 35)}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva button.open{background:rgb(222, 224, 228)}}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva .items{background:rgb(255, 255, 255)}}";
@@ -105,18 +105,18 @@ const DuetSubmenuBarDropdown = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: '1eb547e5709ea63b23354ca9c59b1b19c038c102', role: "listitem" }, index.h("div", { key: '570a652c6c926ccebcb1a9541fd676558a2239a4', class: {
+        return (index.h(index.Host, { key: '76e8b37395a41c08dfb79044c9aa9e8ca5ba5274', role: "listitem" }, index.h("div", { key: '16c3746948dd9f622b4cb003304e22f1dc1faf9d', class: {
                 "duet-submenu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 open: this.open,
                 active: this.active,
-            } }, index.h("button", { key: 'cb6806df3c0914e15d8b5fdfa96cdaba6b36ad6d', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, index.h("button", { key: 'e1714f05f37e793f5f83a72cf63a62a5798e0415', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 open: this.open,
                 active: this.active,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (index.h("duet-icon", { key: '3c866f7cb7ccf04b91b02bd01fa4a2e57462bc10', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), index.h("div", { key: 'a5aa098f80c23566bb2c91b50ce002a36c18a0ba', class: "label" }, index.h("span", { key: 'dbc5f7743345200a326a2367107b0b1fa3245ded', class: "label-text" }, index.h("slot", { key: '5da6e5fcef0e333fe29fb08b72696251cb067436', name: "label" })), index.h("duet-icon", { key: '875a3ffcc5d12b13e2d52fc338373c160f77939a', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), index.h("div", { key: '0d53fb12a29c3ef496d588e07565c47bf07c9fee', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (index.h("duet-icon", { key: 'f0e8d42456dd083616c6245a2a67f6f83a2e2553', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), index.h("div", { key: '4a8c42c00dab9378cee591e449d27c3e313fbed2', class: "label" }, index.h("span", { key: 'f04bb5583ba82c58534312b22dbb86129837fba4', class: "label-text" }, index.h("slot", { key: '1ff407f2b05a19f13d3cdf7abc508853e9fb951c', name: "label" })), index.h("duet-icon", { key: '8c0911d940e05310687d92a0cacc1ef55d388475', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), index.h("div", { key: '30970885dfcc36d710bb0fe2eed310a71348c0d2', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, index.h("slot", { key: 'aca1769900ed458bdfd1e8da0bd6cd516b0026db' })))));
+            } }, index.h("slot", { key: '19623f7c88cc36d51607272ac2e2e9e582c79654' })))));
     }
     get element() { return index.getElement(this); }
 };

package/lib/cjs/duet-submenu-bar-item.cjs.entry.js

@@ -5,14 +5,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d8a31a0.js');
+const index = require('./index-45354cdd.js');
 const actionNewWindowSmall = require('./action-new-window-small-fa51dfb9.js');
 const commonStrings = require('./common-strings-2984301e.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const a11yUtils = require('./a11y-utils-a2456285.js');
+const themeableComponent = require('./themeable-component-ad21363c.js');
+const a11yUtils = require('./a11y-utils-050310c7.js');
 const keyboardUtils = require('./keyboard-utils-f7c9f980.js');
-const languageUtils = require('./language-utils-53bb7035.js');
-require('./slot-utils-f85c14a2.js');
+const languageUtils = require('./language-utils-5a4f4a41.js');
+require('./slot-utils-4e1bb28c.js');
 require('./string-utils-7b13c16e.js');
 
 const duetSubmenuBarItemCss = "*,*::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%}@media (min-width: 62em){:host{width:auto}}.duet-submenu-bar-item{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;width:auto;height:100%;padding:12px 1.5rem;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:600;line-height:1.25;color:rgb(0, 75, 129);text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer}.duet-submenu-bar-item:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-submenu-bar-item:focus,.duet-submenu-bar-item:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-submenu-bar-item .label{display:flex;gap:5px;align-items:center;justify-content:center}.duet-submenu-bar-item .leading-icon,.duet-submenu-bar-item .trailing-icon{width:20px;height:20px}@media (min-width: 62em){.duet-submenu-bar-item .leading-icon,.duet-submenu-bar-item .trailing-icon{width:16px;height:16px}}.duet-submenu-bar-item .trailing-icon.trailing-icon-arrow{width:7px;height:7px}.duet-submenu-bar-item .external-icon{width:10px;height:10px}.duet-submenu-bar-item .trailing-icon{position:absolute;right:12px}.duet-submenu-bar-item[aria-expanded=true]{background:rgb(228, 241, 247)}.duet-submenu-bar-item[aria-expanded=true] .trailing-icon.rotate{transform:rotate(180deg)}.duet-submenu-bar-item.active{color:rgb(0, 119, 179)}.duet-submenu-bar-item.active.duet-theme-turva{color:rgb(126, 2, 35)}.duet-submenu-bar-item.active::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}.duet-submenu-bar-item.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-submenu-bar-item.duet-theme-turva.active .label::after{background:rgb(126, 2, 35)}.duet-submenu-bar-item.duet-theme-turva.active::after{background:rgb(126, 2, 35)}.duet-submenu-bar-item:hover{color:rgb(8, 42, 77);background:rgb(228, 241, 247)}.duet-submenu-bar-item:hover.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(222, 224, 228)}.duet-submenu-bar-item:hover.duet-theme-turva.active{color:rgb(126, 2, 35)}";
@@ -68,7 +68,7 @@ const DuetSubmenuBarItem = class {
     render() {
         const TagName = this.url ? "a" : "button";
         const role = this.url ? "link" : "button";
-        return (index.h(index.Host, { key: 'fcd533d6b3dfc93e0e759de65ecb3454a157d32f', role: "listitem" }, index.h(TagName, { key: '0ca1f847b9660fe205bf77e5bbe78a9f7c8616df', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: { "duet-submenu-bar-item": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.url, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false", "aria-label": (this.url && a11yUtils.getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, role: role, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (index.h("duet-icon", { key: '3f0da6b4b7ef1b9b6630a170fd6175125c849dd4', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), index.h("div", { key: 'c8406d5e73d587f29c3b8c5b09f2522c70fd4ea8', class: "label" }, index.h("span", { key: '7d6a4ad4c5358a5c16d4986946df79dcc040633c', class: "label-text" }, index.h("slot", { key: '3e615ac54c970f4f3576c2dd2451d93f1bb06fd1' })), (this.trailingIcon || this.external) && (index.h("duet-icon", { key: 'ce7aa0ea2fc8cecc831ecf940a2aca520b420c93', class: {
+        return (index.h(index.Host, { key: '286d31e43175b586e05d660dcae91f2ba0176f8d', role: "listitem" }, index.h(TagName, { key: 'ff2ee974d9ee8340c3c53e24c07eb4793f6f9bec', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: { "duet-submenu-bar-item": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.url, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false", "aria-label": (this.url && a11yUtils.getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, role: role, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (index.h("duet-icon", { key: '8ad8924d66e2bc49aa1605f59ae9c96b06c91ddc', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), index.h("div", { key: '3433ef2e595da4391f05927fab8deb99304887bc', class: "label" }, index.h("span", { key: 'df2750c809a744a98e41624478d8ff5616ba496c', class: "label-text" }, index.h("slot", { key: '83fb30a29389e5e2f5caebb04b99be1d480fdc3c' })), (this.trailingIcon || this.external) && (index.h("duet-icon", { key: 'b00f95d9b7f5c0ad824c25fc32936964cc5d9e69', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!this.external,

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

@@ -5,8 +5,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d8a31a0.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
+const index = require('./index-45354cdd.js');
+const themeableComponent = require('./themeable-component-ad21363c.js');
 const keyboardUtils = require('./keyboard-utils-f7c9f980.js');
 
 const duetSubmenuBarLinkCss = "*,*::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%}@media (min-width: 62em){:host{width:auto}}.duet-submenu-bar-link{display:flex;flex-direction:row;gap:16px;align-items:center;justify-content:flex-start;height:100%;padding:12px 1.5rem;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;line-height:1.25;color:rgb(8, 42, 77);text-align:center;text-decoration:none}.duet-submenu-bar-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-submenu-bar-link:focus,.duet-submenu-bar-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-link .submenu-bar-link-icon{width:20px;height:20px}@media (min-width: 62em){.duet-submenu-bar-link .submenu-bar-link-icon{width:16px;height:16px}}@media (min-width: 62em){.duet-submenu-bar-link{flex-direction:column;gap:5px;align-items:center;justify-content:center;font-size:0.875rem;color:rgb(0, 75, 129)}}@media (min-width: 62em){.duet-submenu-bar-link.active{color:rgb(0, 119, 179)}.duet-submenu-bar-link.active.duet-theme-turva{color:rgb(126, 2, 35)}}.duet-submenu-bar-link.active .label{position:relative}.duet-submenu-bar-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}@media (min-width: 62em){.duet-submenu-bar-link.active .label::after{display:none}.duet-submenu-bar-link.active::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}}.duet-submenu-bar-link.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-submenu-bar-link.duet-theme-turva.active .label::after{background:rgb(126, 2, 35)}.duet-submenu-bar-link.duet-theme-turva.active::after{background:rgb(126, 2, 35)}@media (min-width: 62em){.duet-submenu-bar-link:hover{color:rgb(8, 42, 77);background:rgb(228, 241, 247)}.duet-submenu-bar-link:hover.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(222, 224, 228)}.duet-submenu-bar-link:hover.duet-theme-turva.active{color:rgb(126, 2, 35)}}";
@@ -38,7 +38,7 @@ const DuetSubmenuBarLink = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: 'b569ba8e1407349d04924791421693d47d99c224', role: "listitem" }, index.h("a", { key: '632ba619dd762a3041bf7c17d2aa02d18d9c7033', class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false" }, this.icon && (index.h("duet-icon", { key: 'f69a20105e32823478e19579230083c4b08e97ac', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), index.h("span", { key: '53b5b5dc9e1f66785096f307bb980aa734cbb67c', class: "label" }, index.h("slot", { key: '937a94eda35d6fbb713f4a9b5073778ba6cb2e23' })))));
+        return (index.h(index.Host, { key: '523a71ea3cb2b043ce88a6bc11bbdb371eb665bb', role: "listitem" }, index.h("a", { key: 'e6a7fd1bbc7a46c356e2b1c682f170c263e18e46', class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false" }, this.icon && (index.h("duet-icon", { key: '3643314e71d9195799cdfed981987b062ed8fcd9', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), index.h("span", { key: '2605d1554838ec11a74e2f04767ab315f03bf14f', class: "label" }, index.h("slot", { key: '8a9329340f3efc9b0de1ac382941d01435bae8d4' })))));
     }
     get element() { return index.getElement(this); }
 };

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

@@ -5,10 +5,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d8a31a0.js');
+const index = require('./index-45354cdd.js');
 const tokens = require('./tokens-e6fda5ee.js');
 const bodyScrollLock_es6 = require('./bodyScrollLock.es6-dd2d7d91.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
+const themeableComponent = require('./themeable-component-ad21363c.js');
 
 const duetSubmenuBarCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%}:host(:not([open])) ::slotted(duet-submenu-bar-dropdown){display:none}@media (min-width: 62em){:host(:not([open])) ::slotted(duet-submenu-bar-dropdown){display:inherit}}.duet-submenu-bar{position:relative;top:0;z-index:1;background:rgb(240, 247, 250);transition:top 0.4s}.duet-submenu-bar.hidden{top:-200px}@media (min-width: 62em){.duet-submenu-bar{border-bottom:1px solid rgb(198, 225, 238)}}.duet-submenu-bar button{display:flex;align-items:center;justify-content:center;width:100%;padding:12px 0;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:400;line-height:1.25;color:rgb(8, 42, 77)}.duet-submenu-bar button.active .caret{transform:rotate(180deg)}.duet-submenu-bar button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-submenu-bar button .label{position:relative;display:flex;gap:8px;align-items:center;justify-content:center}@media (min-width: 62em){.duet-submenu-bar button{display:none}}.duet-submenu-bar .menu-container{position:absolute;z-index:399;width:100%}.duet-submenu-bar .menu-container.hidden{max-height:0;overflow:hidden;visibility:hidden}@media (min-width: 62em){.duet-submenu-bar .menu-container,.duet-submenu-bar .menu-container.hidden{position:static;z-index:auto;max-height:unset;overflow:visible;visibility:visible}}.duet-submenu-bar .items{width:100%;height:70vh;overflow-y:scroll;visibility:visible;background:rgb(240, 247, 250);border-bottom:1px solid rgb(181, 198, 208)}.duet-submenu-bar .items ::slotted(*){position:relative}.duet-submenu-bar .items.hidden{max-height:0;overflow:hidden;visibility:hidden;border-bottom:0 solid rgb(181, 198, 208)}.duet-submenu-bar .items .list-padding{padding-bottom:188px}@media (min-width: 62em){.duet-submenu-bar .items .list{display:flex;align-items:center;justify-content:space-between;height:100%}.duet-submenu-bar .items,.duet-submenu-bar .items.hidden{position:static;z-index:auto;display:flex;flex-direction:row;align-items:center;justify-content:center;height:auto;max-height:unset;overflow:visible;visibility:visible;border:0}.duet-submenu-bar .items .list-padding{display:none;padding-bottom:0}}.duet-submenu-bar.duet-theme-turva{background:rgb(245, 247, 250);border-bottom:1px solid rgb(222, 224, 228)}.duet-submenu-bar.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-submenu-bar.duet-theme-turva .items{background:rgb(245, 247, 250)}.duet-submenu-bar.duet-theme-turva .mobile-background{background:rgb(23, 28, 58)}.duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow{box-shadow:0 2px 6px 0 rgba(23, 28, 58, 0.07)}@media (min-width: 62em){.duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1)}}";
 const DuetSubmenuBarStyle0 = duetSubmenuBarCss;
@@ -131,19 +131,19 @@ const DuetSubmenuBar = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: '2720db892c55577581be1f5cff69e6b56d0eddb1' }, index.h("nav", { key: '6450c2d32c229ffc2cdefffaf4d0824c927f2dfe', class: {
+        return (index.h(index.Host, { key: '417d739470c7fe9b87ddc61a9f660113df598c22' }, index.h("nav", { key: '139ebc35685702253a213c7105407af7a141a62c', class: {
                 "duet-submenu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 hidden: this.hidden,
-            }, "aria-label": this.accessibleLabel }, this.hasItems && (index.h("button", { key: 'fbf58c54a86a16f1c9c9b018800e74dc86ad7827', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+            }, "aria-label": this.accessibleLabel }, this.hasItems && (index.h("button", { key: '501638b4c30ab12368c39a05f74bb1c3b1317362', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
                 active: this.open,
-            }, onClick: this.onClick }, index.h("span", { key: '95c4226bedf3122965ef044122688e824788fad4', class: "label" }, index.h("slot", { key: '93a3fb333e252ee09987a9832a782a86dd15e13c', name: "label" }), index.h("duet-icon", { key: '125465c2c40457117a28f562c60eb2b63ae061ad', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), index.h("div", { key: '4d23eea3732698f64ec388a4c65d29016c4b0b47', class: {
+            }, onClick: this.onClick }, index.h("span", { key: '403ee71ef7c4a79e36018e751e8beb7dc48049c9', class: "label" }, index.h("slot", { key: 'd3c17dd11de845bb119d8f753fd358bd2c65a6d9', name: "label" }), index.h("duet-icon", { key: '81b28c9228a242a36202f53c9ed9fd8a8b609221', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), index.h("div", { key: 'ba2b698fcce4246cbd779e87dfac3a6be181d926', class: {
                 "menu-container": true,
                 hidden: !this.open,
-            }, role: "presentation" }, index.h("div", { key: 'cedb273340657fe22fdcbd234b632079ba8bae94', role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
+            }, role: "presentation" }, index.h("div", { key: 'e76659541e9d8c28c9dad388f363d794e6d352e1', role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
                 items: true,
                 hidden: !this.open,
-            }, ref: element => (this.itemsContainer = element) }, index.h("div", { key: 'c0c2a1cdea75e574b2a5136164422716db80e020', class: "list", role: this.mobile ? "presentation" : "list" }, index.h("slot", { key: '43c189da567108214e33bd29bd5ecadf396c3be4' }), index.h("div", { key: '4e7ee2bf92b8446dbee5ac9e81a6cf6c4e424950', class: "list-padding" }))), index.h("duet-overlay", { key: 'df603367a1254cd933205e844295693c5d40e7b5', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
+            }, ref: element => (this.itemsContainer = element) }, index.h("div", { key: '51f96f2351bc5d0e236ce4b36f71aaa5054e5f15', class: "list", role: this.mobile ? "presentation" : "list" }, index.h("slot", { key: 'e82358ec5faa3172b05111c5cb8b4a92af93408b' }), index.h("div", { key: '1dc90575c0ca00419a1a6dabc94d997a658b4d04', class: "list-padding" }))), index.h("duet-overlay", { key: '6a46e855d0da8c13ca1bff8f69016dfab10afa5d', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {