@duetds/components 10.0.0-alpha.9 → 10.0.0

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

@@ -1,21 +1,21 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host } from './index-1a6cee61.js';
-import { t as tokens } from './tokens-84fb2357.js';
+import { r as registerInstance, h, H as Host } from './index-EZOAO_vc.js';
+import { t as tokens } from './tokens-DOuLHrH5.js';
 
 const DuetStatusIcon = class {
     constructor(hostRef) {
         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",
@@ -23,10 +23,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",
@@ -35,19 +35,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[this.bg[this.strong ? "strong" : "default"][this.variation]];
+        return tokens[this.bg[this.strong ? "strong" : "default"][this.getVariation()]];
     }
     getColor() {
-        return tokens[this.color[this.strong ? "strong" : "default"][this.variation]];
+        return 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">
@@ -72,10 +87,10 @@ const DuetStatusIcon = class {
         }
     }
     render() {
-        return (h(Host, { key: '8389c107ccded337d2e5121703d5221e70edcb42', class: {
-                [`duet-status-icon-${this.variation}`]: true,
+        return (h(Host, { key: '7f80e70111b54c6828f96f9b4701ed969e592e0e', class: {
+                [`duet-status-icon-${this.getVariation()}`]: true,
                 "duet-strong-bg": this.strong,
-            } }, h("duet-icon", { key: 'c05e3c223a16541133d3be5cb74f39760cc46ba1', icon: this.getIcon(), size: this.size, margin: this.margin })));
+            } }, h("duet-icon", { key: '8a5d1ee9135d47f515b8e74bbbaea58d7e6815b6', icon: this.getIcon(), size: this.size, margin: this.margin })));
     }
 };
 

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

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

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

@@ -1,21 +1,38 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-1a6cee61.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { f as isEscapeKey } from './keyboard-utils-daf80d44.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-EZOAO_vc.js';
+import { i as inheritGlobalTheme } from './themeable-component-spmVa3d3.js';
+import { a as isEscapeKey } from './keyboard-utils-Db8rvjPI.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) {
         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;
     }
     /**
@@ -36,15 +53,15 @@ const DuetSubmenuBarDropdownLink = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'df8e2cce51cd8663e22e083e3aecff5cd19f698f' }, h("a", { key: 'f8c5abbcf4c71a27a70d2ed3ec2970b0a74a8fd1', class: {
+        return (h(Host, { key: '206adf55a559a97afad7c5bc107b46f6a099d8c0' }, 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 && h("duet-icon", { key: '1e5a4a47052cf2b062b3b8d10085422b60407c5d', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: 'ca88f89ae807c0217a8921a1ad14261a9da98abc', class: "label-container" }, h("span", { key: 'e32914f41e511de24aba0e22fb3703818b795acd', class: "label" }, h("slot", { key: '59920cb56fb89f6ac10d94e9e61392dc0724dbdb' })), this.caret && h("duet-icon", { key: '603991182270c3942a6f4850fd5d6fb6af18b105', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (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 && h("duet-icon", { key: '50c64c74c7f21aebcb34252b9a5fbf75c391c0d3', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: '0e697759844c9f0255d18fdb41765290f1389581', class: "label-container" }, h("span", { key: '3fafa6fece2c5188ec289dbc6fab760d49c73fb4', class: "label" }, h("slot", { key: '498dacafcd6fa3c3d097e9bcceb9e78c906cc236' })), this.caret && h("duet-icon", { key: 'd7055d84b2cd8de873b0400e7b3434f7670f987a', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: '40d559b351fcc4d3f56f26045d065a55b840c740', class: "active-check", name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     get element() { return getElement(this); }
 };
-DuetSubmenuBarDropdownLink.style = DuetSubmenuBarDropdownLinkStyle0;
+DuetSubmenuBarDropdownLink.style = duetSubmenuBarDropdownLinkCss;
 
 export { DuetSubmenuBarDropdownLink as duet_submenu_bar_dropdown_link };

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

@@ -1,13 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-1a6cee61.js';
-import { a as media_query_large } from './tokens-84fb2357.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { f as isEscapeKey } from './keyboard-utils-daf80d44.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-EZOAO_vc.js';
+import { a as media_query_large } from './tokens-DOuLHrH5.js';
+import { i as inheritGlobalTheme } from './themeable-component-spmVa3d3.js';
+import { a as isEscapeKey } from './keyboard-utils-Db8rvjPI.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)}}";
-const DuetSubmenuBarDropdownStyle0 = duetSubmenuBarDropdownCss;
+const duetSubmenuBarDropdownCss = "*,*::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%}@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}.duet-submenu-bar-dropdown button:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva .duet-submenu-bar-dropdown button:focus,.duet-submenu-bar-dropdown button:focus.duet-theme-turva,.duet-theme-turva2 .duet-submenu-bar-dropdown button:focus,.duet-submenu-bar-dropdown button:focus.duet-theme-turva2{outline:2px solid;outline-offset:2px;outline-color:rgba(53, 79, 101, 0.8)}@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.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);transform:translateY(1px);transition:300ms ease}.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;visibility:visible;flex-direction:column;align-items:center;justify-content:center;max-height:1000px;padding:4px 0 16px;overflow-y:auto;color:rgb(8, 42, 77);scrollbar-width:none;transition:max-height 0.3s ease-in, padding 0.3s ease-in;-ms-overflow-style: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{visibility:hidden;max-height:0;padding:0;overflow: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.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)}}:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button{color:rgb(23, 42, 59)}@media (min-width: 62em){:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button:hover{background:rgb(251, 225, 209)}}:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.active .label-text::after,:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.open .label-text::after{background:rgb(230, 23, 64)}@media (min-width: 62em){:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.active,:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.open{color:rgb(140, 0, 30)}:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.active::after,:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.open::after{background:rgb(230, 23, 64)}:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.open{background:rgb(251, 225, 209)}}@media (min-width: 62em){:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva .items{background:rgb(255, 255, 255)}}";
 
 const DuetSubmenuBarDropdown = class {
     constructor(hostRef) {
@@ -17,6 +16,23 @@ const DuetSubmenuBarDropdown = class {
          */
         this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
         this.boundMqlFunctions = [];
+        this.isDesktop = false;
+        /**
+         * Theme.
+         */
+        this.theme = "";
+        /**
+         * Active
+         */
+        this.active = false;
+        /**
+         * Open
+         */
+        this.open = false;
+        /**
+         * Icon
+         */
+        this.icon = undefined;
         this.checkIsDesktop = () => {
             if (this.mql[0].matches) {
                 this.isDesktop = true;
@@ -40,11 +56,6 @@ const DuetSubmenuBarDropdown = class {
                 this.open = true;
             }
         };
-        this.isDesktop = false;
-        this.theme = "";
-        this.active = false;
-        this.open = false;
-        this.icon = undefined;
     }
     handleFocus(e) {
         const isClickOutside = e.composedPath().every(node => node !== this.element);
@@ -101,21 +112,21 @@ const DuetSubmenuBarDropdown = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'fc9fd551cd7be45b0c727e03c27a76625c983d41', role: "listitem" }, h("div", { key: '939b988a67b1f3d481fc32a2e89dba58bc25b53a', class: {
+        return (h(Host, { key: 'b08d71c303bbbb5dc488ccb9df3a6606cbcee45f', role: "listitem" }, h("div", { key: 'f27808ba704701f0857e90d8c4474f11f2bd284d', class: {
                 "duet-submenu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 open: this.open,
                 active: this.active,
-            } }, h("button", { key: 'c9be9c700d763082e4353b433868969d6ebaaea8', 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: {
+            } }, h("button", { key: 'da50cea3b3daea0da483dc01649345a9fcc27d55', 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 && (h("duet-icon", { key: '74d49bbb0f3ca8143654d9cbcdaee4d6ffe4bf8f', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'f2416c123b2c0112e9569de33db0d291e1ad3d4a', class: "label" }, h("span", { key: 'c5db63f1dac7bc2a0fa55d5beee9c85ad4cfb4ee', class: "label-text" }, h("slot", { key: '0036b819c74ba5367ab40605ff199fe69d3a7231', name: "label" })), h("duet-icon", { key: '8ad850e0dbcfa9e277ee32336e164f942ef11dff', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '8a36bcfda8ed30579703bdb9fc783d83981212d3', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '41562541f2cf4bbe9e8d6ccb3214b8fc5b44079f', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '8b2782607b3478bc491ce2fa423257d4233968fa', class: "label" }, h("span", { key: '5b22aff9852f284416e15d60b1a262e963ff228e', class: "label-text" }, h("slot", { key: 'aec50191a12adf0fbd6f9e388c2dc09954d21f83', name: "label" })), h("duet-icon", { key: '154795bda221d38ca73b47a86c97da4c6e4d573b', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '574669c2280fa1e7e4d14666f95fbe912a068119', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '67bf3b51da2fa18ec2662094cebbb039ec117523' })))));
+            } }, h("slot", { key: '9a69e63aae77e184049ed7d8f7f511d47eca642e' })))));
     }
     get element() { return getElement(this); }
 };
-DuetSubmenuBarDropdown.style = DuetSubmenuBarDropdownStyle0;
+DuetSubmenuBarDropdown.style = duetSubmenuBarDropdownCss;
 
 export { DuetSubmenuBarDropdown as duet_submenu_bar_dropdown };

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

@@ -1,32 +1,55 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-1a6cee61.js';
-import { a as actionNewWindowSmall } from './action-new-window-small-1945be91.js';
-import { D as DuetStringsExternalDefaults } from './common-strings-af765cad.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { g as getAccessibleLinkLabel } from './a11y-utils-c3a7fd7e.js';
-import { f as isEscapeKey } from './keyboard-utils-daf80d44.js';
-import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-8a9d5323.js';
-import './slot-utils-bf214ae5.js';
-import './string-utils-192eb3c8.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-EZOAO_vc.js';
+import { n as newWindowIcon } from './action-new-window-small-EH8_HdAm.js';
+import { a as DuetStringsExternalDefaults } from './common-strings-CVPfl9fc.js';
+import { i as inheritGlobalTheme } from './themeable-component-spmVa3d3.js';
+import { g as getAccessibleLinkLabel } from './a11y-utils-By9FOQXs.js';
+import { a as isEscapeKey } from './keyboard-utils-Db8rvjPI.js';
+import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-COd-eoxb.js';
+import './_commonjsHelpers-DvwKrUS6.js';
+import './slot-utils-BSu3Mnho.js';
+import './string-utils-C6E9F6QT.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)}";
-const DuetSubmenuBarItemStyle0 = duetSubmenuBarItemCss;
+const duetSubmenuBarItemCss = "*,*::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%}@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;white-space:nowrap;text-decoration:none;cursor:pointer}.duet-submenu-bar-item:focus{outline:2px solid;outline-offset:-4px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva .duet-submenu-bar-item:focus,.duet-submenu-bar-item:focus.duet-theme-turva,.duet-theme-turva2 .duet-submenu-bar-item:focus,.duet-submenu-bar-item:focus.duet-theme-turva2{outline:2px solid;outline-offset:-4px;outline-color:rgba(53, 79, 101, 0.8)}.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);transform:translateY(1px);transition:300ms ease}.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)}:host(.duet-theme-turva2) .duet-submenu-bar-item.duet-theme-turva{color:rgb(23, 42, 59)}:host(.duet-theme-turva2) .duet-submenu-bar-item.active.duet-theme-turva{color:rgb(230, 23, 64)}:host(.duet-theme-turva2) .duet-submenu-bar-item.duet-theme-turva.active .label::after{background:rgb(230, 23, 64)}:host(.duet-theme-turva2) .duet-submenu-bar-item.duet-theme-turva.active::after{background:rgb(230, 23, 64)}:host(.duet-theme-turva2) .duet-submenu-bar-item.duet-theme-turva:hover{color:rgb(23, 42, 59);background:rgb(251, 225, 209)}:host(.duet-theme-turva2) .duet-submenu-bar-item.duet-theme-turva:hover.active{color:rgb(230, 23, 64)}";
 
 const DuetSubmenuBarItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Active
+         */
         this.active = false;
-        this.url = undefined;
+        /**
+         * Left icon.
+         */
         this.leadingIcon = undefined;
+        /**
+         * Right icon.
+         */
         this.trailingIcon = undefined;
-        this.accessibleLabel = undefined;
-        this.accessibleExpanded = undefined;
+        /**
+         * Use this property to add an aria-haspopup attribute to a button.
+         */
         this.accessiblePopup = "false";
+        /**
+         * Defaults for accessibleLabelExternal
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
         this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
+        /**
+         * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
         this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
+        /**
+         * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
         this.external = false;
     }
     /**
@@ -64,15 +87,15 @@ const DuetSubmenuBarItem = class {
     render() {
         const TagName = this.url ? "a" : "button";
         const role = this.url ? "link" : "button";
-        return (h(Host, { key: 'ad3a2fa9bbd134e4bfa1ced12278dabaf0206fc5', role: "listitem" }, h(TagName, { key: '5a36cd09f5b34ca0031e1f6fd98b6d4e7d085024', 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 && 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 && (h("duet-icon", { key: '093405d3733611c349635aa71e3bf8179eba4153', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '0399adb8e4cd01b6fa66b37a91869813efaf3942', class: "label" }, h("span", { key: '50e11f94b21a9379d77ece6e8ab2437b6cf016d0', class: "label-text" }, h("slot", { key: '05204a743cb4c3f29f478908e2b91782827da04b' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: 'a62b60af0e3f2e1508d33547241081633c30a5aa', class: {
+        return (h(Host, { key: '35be20639e3574ca775aa4b697485c84a1512045', role: "listitem" }, h(TagName, { key: '10e74fbfad350fa687d2ed5c6d5bfa6c3c3b7a08', 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 && 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 && (h("duet-icon", { key: 'e4de062ea87077cdf5ab2f80a72cb746d10b32e9', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '1829e95b6db1e8970ca53e5f8332b0aa97df310a', class: "label" }, h("span", { key: '815b45070604d6a9fc3f875677119480812c448d', class: "label-text" }, h("slot", { key: '195a9798c946491c1ec6318a99b5738e92d68f58' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: '8718695a96ec8294833a18791aeefbe51526308f', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!this.external,
                 rotate: this.trailingIcon === "action-arrow-down-small" && this.accessibleExpanded,
-            }, theme: this.theme, name: this.trailingIcon ? this.trailingIcon : this.external ? actionNewWindowSmall.title : "", margin: "none", size: "auto", color: "currentColor" }))))));
+            }, theme: this.theme, name: this.trailingIcon ? this.trailingIcon : this.external ? newWindowIcon.title : "", margin: "none", size: "auto", color: "currentColor" }))))));
     }
     get element() { return getElement(this); }
 };
-DuetSubmenuBarItem.style = DuetSubmenuBarItemStyle0;
+DuetSubmenuBarItem.style = duetSubmenuBarItemCss;
 
 export { DuetSubmenuBarItem as duet_submenu_bar_item };