@duetds/components 8.0.4 → 8.0.6

package/hydrate/index.js

@@ -8156,6 +8156,12 @@ class DuetChoice {
       sv: "Mera information om",
     };
     this.infoLabel = getLocaleString(this.infoLabelDefaults, getLanguage());
+    this.collapsibleNotificationDefaults = {
+      fi: "Tämä valinta sisältää lisätietoja, jotka avautuivat alle",
+      en: "This choice has additional information opened below",
+      sv: "Det här val har mer information som öppnades nedan",
+    };
+    this.collapsibleNotification = getLocaleString(this.collapsibleNotificationDefaults, getLanguage());
   }
   /**
    * Component lifecycle events.
@@ -8173,6 +8179,7 @@ class DuetChoice {
     connectLanguageChangeObserver(this, [
       { prop: "accessibleLabelInfoButton", defaults: "accessibleLabelInfoButtonDefaults" },
       { prop: "infoLabel", defaults: "infoLabelDefaults" },
+      { prop: "collapsibleNotification", defaults: "collapsibleNotificationDefaults" },
     ]);
     this.duetChoiceReady.emit();
   }
@@ -8217,6 +8224,17 @@ class DuetChoice {
   async toggleInfoMethod() {
     this.isInfoOpen = !this.isInfoOpen;
   }
+  /**
+   * Should the collapsible content be announced by screen readers
+   */
+  isCollapsibleAnnounceable() {
+    if (!this.collapsible || !this.getExpanded()) {
+      return false;
+    }
+    const children = Array.from(this.element.querySelectorAll(`#${this.choiceId}-collapsible-content > *`) || []);
+    const announceableElements = ["duet-paragraph", "duet-heading", "duet-fieldset"];
+    return children.every(child => announceableElements.includes(child.tagName.toLowerCase()));
+  }
   getAriaDescribedby() {
     if (this.accessibleDescribedBy) {
       return this.accessibleDescribedBy;
@@ -8225,9 +8243,12 @@ class DuetChoice {
       if (this.hasHeader) {
         return this.headerId;
       }
-      else {
+      else if (this.isCollapsibleAnnounceable()) {
         return this.expandId;
       }
+      else {
+        return `${this.choiceId}-collapsible-notification`;
+      }
     }
     return null;
   }
@@ -8293,10 +8314,10 @@ class DuetChoice {
       } }, hAsync("input", { class: "duet-choice-input", type: this.type, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, disabled: this.getDisabled(), required: this.required, id: identifier, name: this.name, value: this.value, checked: this.checked, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedby(), onKeyDown: this.handleKeyDown, ref: input => (this.nativeInput = input) }), hAsync("label", { htmlFor: identifier, class: { "duet-choice-label": true, "has-before-text": this.hasBeforeText }, onClick: this.onClick }, this.hasBeforeText && hAsync("slot", { name: "before-text" }), this.icon && (hAsync("div", { class: "duet-choice-card-icon" }, hAsync("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), hAsync("div", { class: "duet-choice-card-text" }, choiceGroupLabel && hAsync("duet-visually-hidden", null, choiceGroupLabel, ", "), hAsync("div", null, this.hasLabel ? hAsync("slot", { name: "label" }) : this.label), this.caption && (hAsync("div", null, hAsync("duet-spacer", { size: "xx-small" }), hAsync("duet-caption", { margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (hAsync("div", null, hAsync("duet-spacer", { size: "xx-small" }), hAsync("slot", { name: "additional" })))), hAsync("div", null, hAsync("div", { class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && hAsync("div", { class: "duet-checkmark" }))))), this.hasInfo && !this.collapsible && (hAsync("button", { ref: button => (this.infoButtonEl = button), id: this.infoButtonId, class: {
         "duet-choice-info-toggle": true,
         "duet-theme-turva": this.theme === "turva",
-      }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onClick: this.toggleInfo, disabled: this.getDisabled(), "aria-expanded": this.isInfoOpen ? "true" : "false", "aria-label": `${this.infoLabel} ${this.label}`, "aria-controls": this.expandId, "aria-flowto": this.expandId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button" }, hAsync("duet-visually-hidden", { "aria-hidden": !this.isBlurred ? "true" : "false" }, this.accessibleLabelInfoButton), hAsync("div", { class: "duet-choice-info-icon" }, hAsync("duet-icon", { icon: messagingInfo.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible || this.hasInfo ? (hAsync("div", { class: this.getClassNames(), id: this.expandId }, hAsync("span", { class: {
+      }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onClick: this.toggleInfo, disabled: this.getDisabled(), "aria-expanded": this.isInfoOpen ? "true" : "false", "aria-label": `${this.infoLabel} ${this.label}`, "aria-controls": this.expandId, "aria-flowto": this.expandId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button" }, hAsync("duet-visually-hidden", { "aria-hidden": !this.isBlurred ? "true" : "false" }, this.accessibleLabelInfoButton), hAsync("div", { class: "duet-choice-info-icon" }, hAsync("duet-icon", { icon: messagingInfo.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible && (hAsync("span", { id: `${this.choiceId}-collapsible-notification`, hidden: true }, this.collapsibleNotification)), this.collapsible || this.hasInfo ? (hAsync("div", { class: this.getClassNames(), id: this.expandId }, hAsync("span", { class: {
         "duet-choice-section-visible": this.collapsible ? this.getExpanded() : this.isInfoOpen,
         "duet-choice-section-hidden": this.collapsible ? !this.getExpanded() : !this.isInfoOpen,
-      } }, hAsync("span", { id: this.headerId }, hAsync("slot", { name: "header" })), this.hasInfo ? (hAsync("span", { ref: span => (this.infoContainer = span), tabindex: "0", class: "duet-choice-info-container" }, hAsync("span", { "aria-relevant": "all", "aria-atomic": "true", "aria-live": this.isInfoOpen ? "polite" : "off" }, hAsync("slot", { name: "info" })), hAsync("slot", null))) : (hAsync("span", null, hAsync("slot", null)))), this.isInfoOpen && hAsync(FocusGuard, { moveFocusTo: this.infoButtonEl }))) : null));
+      } }, hAsync("span", { id: this.headerId }, hAsync("slot", { name: "header" })), this.hasInfo ? (hAsync("span", { ref: span => (this.infoContainer = span), tabindex: "0", class: "duet-choice-info-container" }, hAsync("span", { "aria-relevant": "all", "aria-atomic": "true", "aria-live": this.isInfoOpen ? "polite" : "off" }, hAsync("slot", { name: "info" })), hAsync("slot", null))) : (hAsync("span", { id: `${this.choiceId}-collapsible-content` }, hAsync("slot", null)))), this.isInfoOpen && hAsync(FocusGuard, { moveFocusTo: this.infoButtonEl }))) : null));
   }
   get element() { return getElement(this); }
   static get style() { return duetChoiceCss; }
@@ -8334,6 +8355,8 @@ class DuetChoice {
       "required": [4],
       "infoLabelDefaults": [1, "accessible-label-info-default"],
       "infoLabel": [1025, "info-label"],
+      "collapsibleNotificationDefaults": [1, "accessible-collapsible-notification-default"],
+      "collapsibleNotification": [1025, "collapsible-notification"],
       "isHovering": [32],
       "isInfoOpen": [32],
       "isBlurred": [32],
@@ -8391,6 +8414,8 @@ class DuetChoiceGroup {
     this.breakpoint = "small";
     this.value = undefined;
     this.disabled = undefined;
+    this.required = false;
+    this.accessibleLiveError = "polite";
   }
   /**
    * Component lifecycle events.
@@ -8418,6 +8443,7 @@ class DuetChoiceGroup {
     // Walk the DOM in reverse order, since the last selected one wins
     for (const choice of this.choices) {
       choice.name = this.name;
+      choice.required = this.required;
       choice.groupDisabled = this.disabled;
       choice.groupDirection = this.direction;
       choice.groupResponsive = this.responsive;
@@ -8452,7 +8478,7 @@ class DuetChoiceGroup {
         "duet-choice-group-breakpoint-medium": this.responsive && this.breakpoint === "medium",
         "duet-choice-group-breakpoint-large": this.responsive && this.breakpoint === "large",
         "duet-choice-group-breakpoint-x-large": this.responsive && this.breakpoint === "x-large",
-      } }, hAsync("duet-fieldset", { label: this.label, labelHidden: this.labelHidden, compactLabel: true, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme }, this.tooltip && (hAsync("duet-tooltip", { slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), hAsync("div", { class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, hAsync("slot", null)))));
+      } }, hAsync("duet-fieldset", { label: this.label, labelHidden: this.labelHidden, compactLabel: true, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (hAsync("duet-tooltip", { slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), hAsync("div", { class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, hAsync("slot", null)))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
@@ -8480,7 +8506,9 @@ class DuetChoiceGroup {
       "responsive": [4],
       "breakpoint": [1],
       "value": [1537],
-      "disabled": [4]
+      "disabled": [4],
+      "required": [4],
+      "accessibleLiveError": [1, "accessible-live-error"]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -9182,7 +9210,7 @@ class DuetCombobox {
     const path = e.composedPath();
     const isClickOutside = path.every(el => el !== this.element);
     if (isClickOutside) {
-      this.updateInputText(true);
+      this.updateInputText(true, true);
       this.listOpen = false;
     }
   }
@@ -9295,7 +9323,7 @@ class DuetCombobox {
    * Updates the input text based on the selected/clicked items.
    * @param bool -override to clear if invoked by "click outside"
    */
-  async updateInputText(isBlurred = false) {
+  async updateInputText(isBlurred = false, isClickOutside = false) {
     const item = this.selectedItems.size === 0 ? [] : this.items.filter(item => this.selectedItems.has(item.id));
     //if items changed and given id no longer exists
     if (item.length === 0 && this.selectedItems.size > 0) {
@@ -9304,7 +9332,7 @@ class DuetCombobox {
       this.value = undefined;
       this.activeItem = undefined;
     }
-    if (this.selectedItems.size === 1) {
+    if (!isClickOutside && this.selectedItems.size === 1) {
       this.input.value = ""; // set value to empty so that cursor position follows accordingly
       this.input.value = await this.formatItem(item[0]);
       this.input.scrollLeft = this.input.scrollWidth;
@@ -12665,7 +12693,7 @@ class DuetInput {
     this.tooltipDirection = "auto";
   }
   disallowedPatternChange() {
-    this.disallowPatternRegex = this.disallowPattern ? new RegExp(this.disallowPattern, "g") : null;
+    this.disallowPatternRegex = this.disallowPattern ? new RegExp(this.disallowPattern, "gu") : null;
   }
   valueChanged() {
     var _a;
@@ -13364,7 +13392,7 @@ class DuetLogo {
   }; }
 }
 
-const duetMenuBarCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-menu-bar,*.sc-duet-menu-bar::after,*.sc-duet-menu-bar::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-menu-bar-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%}/*!@.duet-menu-bar*/.duet-menu-bar.sc-duet-menu-bar{display:flex;align-items:center;justify-content:center;background:rgb(255, 255, 255);box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07)}@media (min-width: 62em){/*!@.duet-menu-bar*/.duet-menu-bar.sc-duet-menu-bar{box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1)}}/*!@.duet-menu-bar .top*/.duet-menu-bar.sc-duet-menu-bar .top.sc-duet-menu-bar{display:none}/*!@.duet-menu-bar .bottom*/.duet-menu-bar.sc-duet-menu-bar .bottom.sc-duet-menu-bar{display:none}/*!@.duet-menu-bar.horizontal-nav*/.duet-menu-bar.horizontal-nav.sc-duet-menu-bar{position:relative}/*!@.duet-menu-bar.horizontal-nav .top*/.duet-menu-bar.horizontal-nav.sc-duet-menu-bar .top.sc-duet-menu-bar{position:absolute;top:0;left:3.5%;display:block;width:93%;height:1px;background:rgb(245, 248, 250)}/*!@.duet-menu-bar.horizontal-nav .bottom*/.duet-menu-bar.horizontal-nav.sc-duet-menu-bar .bottom.sc-duet-menu-bar{position:absolute;bottom:0;left:0;display:block;width:100%;height:1px;background:rgb(225, 227, 230)}/*!@.duet-menu-bar.horizontal-nav .more-left*/.duet-menu-bar.horizontal-nav.sc-duet-menu-bar .more-left.sc-duet-menu-bar{position:absolute;top:0;left:-1px;z-index:1;width:56px;height:49px;background:linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%)}@media (min-width: 62em){/*!@.duet-menu-bar.horizontal-nav .more-left*/.duet-menu-bar.horizontal-nav.sc-duet-menu-bar .more-left.sc-duet-menu-bar{display:none}}/*!@.duet-menu-bar.horizontal-nav .more-right*/.duet-menu-bar.horizontal-nav.sc-duet-menu-bar .more-right.sc-duet-menu-bar{position:absolute;top:0;right:-1px;z-index:1;width:56px;height:49px;background:linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0) 100%)}@media (min-width: 62em){/*!@.duet-menu-bar.horizontal-nav .more-right*/.duet-menu-bar.horizontal-nav.sc-duet-menu-bar .more-right.sc-duet-menu-bar{display:none}}@media (pointer: fine){/*!@.duet-menu-bar.horizontal-nav*/.duet-menu-bar.horizontal-nav.sc-duet-menu-bar{display:none}}@media (pointer: fine) and ((min-width: 62em)){/*!@.duet-menu-bar.horizontal-nav*/.duet-menu-bar.horizontal-nav.sc-duet-menu-bar{display:flex}}/*!@.duet-menu-bar .container*/.duet-menu-bar.sc-duet-menu-bar .container.sc-duet-menu-bar{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1440px;height:100%;height:3.25rem;padding:0 8px 0 20px;overflow-x:auto;scrollbar-width:none}/*!@.duet-menu-bar .container::-webkit-scrollbar*/.duet-menu-bar.sc-duet-menu-bar .container.sc-duet-menu-bar::-webkit-scrollbar{width:0;height:0}@media (min-width: 62em){/*!@.duet-menu-bar .container*/.duet-menu-bar.sc-duet-menu-bar .container.sc-duet-menu-bar{height:5rem;padding:0 28px;overflow-x:visible}}/*!@.duet-menu-bar .container .list*/.duet-menu-bar.sc-duet-menu-bar .container.sc-duet-menu-bar .list.sc-duet-menu-bar{height:100%;list-style-type:none}/*!@.duet-menu-bar .container ::slotted(*)*/.duet-menu-bar .container .sc-duet-menu-bar-s>*{height:100%}/*!@.duet-menu-bar .container > **/.duet-menu-bar.sc-duet-menu-bar .container.sc-duet-menu-bar>*.sc-duet-menu-bar{display:flex;align-items:center;justify-content:center;height:100%}/*!@.duet-menu-bar .container > :first-child*/.duet-menu-bar.sc-duet-menu-bar .container.sc-duet-menu-bar>.sc-duet-menu-bar:first-child{flex-basis:0;flex-grow:1;justify-content:flex-start}/*!@.duet-menu-bar .container > :last-child*/.duet-menu-bar.sc-duet-menu-bar .container.sc-duet-menu-bar>.sc-duet-menu-bar:last-child{flex-basis:0;flex-grow:1;justify-content:flex-end}/*!@.duet-menu-bar .container ::slotted(*)*/.duet-menu-bar .container .sc-duet-menu-bar-s>*{display:flex;align-items:center;justify-content:center;height:100%}/*!@.duet-menu-bar.duet-theme-turva*/.duet-menu-bar.duet-theme-turva.sc-duet-menu-bar{background:rgb(255, 255, 255);box-shadow:0 2px 6px 0 rgba(23, 28, 58, 0.07)}@media (min-width: 62em){/*!@.duet-menu-bar.duet-theme-turva*/.duet-menu-bar.duet-theme-turva.sc-duet-menu-bar{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1)}}/*!@.center*/.center.sc-duet-menu-bar{font-size:1rem;font-weight:600;line-height:1.25;color:rgb(0, 41, 77)}/*!@.duet-theme-turva .center*/.duet-theme-turva.sc-duet-menu-bar .center.sc-duet-menu-bar{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}/*!@.right*/.right.sc-duet-menu-bar{font-size:0.875rem;font-weight:400;line-height:1.25;color:rgb(0, 77, 128)}/*!@.duet-theme-turva .right*/.duet-theme-turva.sc-duet-menu-bar .right.sc-duet-menu-bar{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}";
+const duetMenuBarCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-menu-bar,*.sc-duet-menu-bar::after,*.sc-duet-menu-bar::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-menu-bar-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%}/*!@.duet-menu-bar*/.duet-menu-bar.sc-duet-menu-bar{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;background:rgb(255, 255, 255);box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07)}@media (min-width: 62em){/*!@.duet-menu-bar*/.duet-menu-bar.sc-duet-menu-bar{box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1)}}/*!@.duet-menu-bar .top*/.duet-menu-bar.sc-duet-menu-bar .top.sc-duet-menu-bar{display:none}/*!@.duet-menu-bar .bottom*/.duet-menu-bar.sc-duet-menu-bar .bottom.sc-duet-menu-bar{display:none}/*!@.duet-menu-bar.horizontal-nav*/.duet-menu-bar.horizontal-nav.sc-duet-menu-bar{position:relative}/*!@.duet-menu-bar.horizontal-nav .top*/.duet-menu-bar.horizontal-nav.sc-duet-menu-bar .top.sc-duet-menu-bar{position:absolute;top:0;left:3.5%;display:block;width:93%;height:1px;background:rgb(245, 248, 250)}/*!@.duet-menu-bar.horizontal-nav .bottom*/.duet-menu-bar.horizontal-nav.sc-duet-menu-bar .bottom.sc-duet-menu-bar{position:absolute;bottom:0;left:0;display:block;width:100%;height:1px;background:rgb(225, 227, 230)}/*!@.duet-menu-bar.horizontal-nav .more-left*/.duet-menu-bar.horizontal-nav.sc-duet-menu-bar .more-left.sc-duet-menu-bar{position:absolute;top:0;left:-1px;z-index:1;width:56px;height:49px;background:linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%)}@media (min-width: 62em){/*!@.duet-menu-bar.horizontal-nav .more-left*/.duet-menu-bar.horizontal-nav.sc-duet-menu-bar .more-left.sc-duet-menu-bar{display:none}}/*!@.duet-menu-bar.horizontal-nav .more-right*/.duet-menu-bar.horizontal-nav.sc-duet-menu-bar .more-right.sc-duet-menu-bar{position:absolute;top:0;right:-1px;z-index:1;width:56px;height:49px;background:linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0) 100%)}@media (min-width: 62em){/*!@.duet-menu-bar.horizontal-nav .more-right*/.duet-menu-bar.horizontal-nav.sc-duet-menu-bar .more-right.sc-duet-menu-bar{display:none}}@media (pointer: fine){/*!@.duet-menu-bar.horizontal-nav*/.duet-menu-bar.horizontal-nav.sc-duet-menu-bar{display:none}}@media (pointer: fine) and ((min-width: 62em)){/*!@.duet-menu-bar.horizontal-nav*/.duet-menu-bar.horizontal-nav.sc-duet-menu-bar{display:flex}}/*!@.duet-menu-bar .container*/.duet-menu-bar.sc-duet-menu-bar .container.sc-duet-menu-bar{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1440px;height:100%;height:3.25rem;padding:0 8px 0 20px;overflow-x:auto;scrollbar-width:none}/*!@.duet-menu-bar .container::-webkit-scrollbar*/.duet-menu-bar.sc-duet-menu-bar .container.sc-duet-menu-bar::-webkit-scrollbar{width:0;height:0}@media (min-width: 62em){/*!@.duet-menu-bar .container*/.duet-menu-bar.sc-duet-menu-bar .container.sc-duet-menu-bar{height:5rem;padding:0 28px;overflow-x:visible}}/*!@.duet-menu-bar .container .list*/.duet-menu-bar.sc-duet-menu-bar .container.sc-duet-menu-bar .list.sc-duet-menu-bar{height:100%;list-style-type:none}/*!@.duet-menu-bar .container ::slotted(*)*/.duet-menu-bar .container .sc-duet-menu-bar-s>*{height:100%}/*!@.duet-menu-bar .container > **/.duet-menu-bar.sc-duet-menu-bar .container.sc-duet-menu-bar>*.sc-duet-menu-bar{display:flex;align-items:center;justify-content:center;height:100%}/*!@.duet-menu-bar .container > :first-child*/.duet-menu-bar.sc-duet-menu-bar .container.sc-duet-menu-bar>.sc-duet-menu-bar:first-child{flex-basis:0;flex-grow:1;justify-content:flex-start}/*!@.duet-menu-bar .container > :last-child*/.duet-menu-bar.sc-duet-menu-bar .container.sc-duet-menu-bar>.sc-duet-menu-bar:last-child{flex-basis:0;flex-grow:1;justify-content:flex-end}/*!@.duet-menu-bar .container ::slotted(*)*/.duet-menu-bar .container .sc-duet-menu-bar-s>*{display:flex;align-items:center;justify-content:center;height:100%}/*!@.duet-menu-bar.duet-theme-turva*/.duet-menu-bar.duet-theme-turva.sc-duet-menu-bar{background:rgb(255, 255, 255);box-shadow:0 2px 6px 0 rgba(23, 28, 58, 0.07)}@media (min-width: 62em){/*!@.duet-menu-bar.duet-theme-turva*/.duet-menu-bar.duet-theme-turva.sc-duet-menu-bar{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1)}}/*!@.center*/.center.sc-duet-menu-bar{font-size:1rem;font-weight:600;line-height:1.25;color:rgb(0, 41, 77)}/*!@.duet-theme-turva .center*/.duet-theme-turva.sc-duet-menu-bar .center.sc-duet-menu-bar{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}/*!@.right*/.right.sc-duet-menu-bar{font-size:0.875rem;font-weight:400;line-height:1.25;color:rgb(0, 77, 128)}/*!@.duet-theme-turva .right*/.duet-theme-turva.sc-duet-menu-bar .right.sc-duet-menu-bar{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)}";
 
 /**
  * @slot center - Slot for content in center.
@@ -17396,6 +17424,8 @@ class DuetRadioGroup {
     this.responsive = false;
     this.value = undefined;
     this.disabled = undefined;
+    this.required = false;
+    this.accessibleLiveError = "polite";
   }
   /**
    * Component lifecycle events.
@@ -17446,6 +17476,7 @@ class DuetRadioGroup {
     // Walk the DOM in reverse order, since the last selected one wins
     for (const radio of radios) {
       radio.name = this.name;
+      radio.required = this.required;
       radio.groupDisabled = this.disabled;
       radio.groupDirection = this.direction;
       radio.groupResponsive = this.responsive;
@@ -17470,7 +17501,7 @@ class DuetRadioGroup {
    * Always the last one in the class.
    */
   render() {
-    return (hAsync(Host, { onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, hAsync("duet-fieldset", { label: this.label, labelHidden: this.labelHidden, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme }, this.tooltip && (hAsync("duet-tooltip", { slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), hAsync("div", { class: { "duet-radio-group": true, "duet-no-stacking": !this.responsive } }, hAsync("slot", null)))));
+    return (hAsync(Host, { onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, hAsync("duet-fieldset", { label: this.label, labelHidden: this.labelHidden, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (hAsync("duet-tooltip", { slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), hAsync("div", { class: { "duet-radio-group": true, "duet-no-stacking": !this.responsive } }, hAsync("slot", null)))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
@@ -17497,7 +17528,9 @@ class DuetRadioGroup {
       "caption": [1],
       "responsive": [4],
       "value": [1537],
-      "disabled": [4]
+      "disabled": [4],
+      "required": [4],
+      "accessibleLiveError": [1, "accessible-live-error"]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -18374,6 +18407,8 @@ class DuetShowMore {
     };
     this.showLessAccessibleLabel = getLocaleString(this.showLessAccessibleLabelDefaults);
     this.margin = "auto";
+    this.buttonMargin = "auto";
+    this.buttonPadding = "auto";
     this.open = false;
   }
   /**
@@ -18404,7 +18439,7 @@ class DuetShowMore {
         "duet-theme-turva": this.theme === "turva",
         "duet-m-0": this.margin === "none",
         open: this.open,
-      } }, hAsync("div", { ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "0" : "" }, hAsync("div", { class: { "slotted-content": true } }, hAsync("slot", null))), hAsync("duet-button", { id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, 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" }, this.open ? this.showLessLabel : this.showMoreLabel))));
+      } }, hAsync("div", { ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "0" : "" }, hAsync("div", { class: { "slotted-content": true } }, hAsync("slot", null))), hAsync("duet-button", { id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, 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 }, this.open ? this.showLessLabel : this.showMoreLabel))));
   }
   get element() { return getElement(this); }
   static get style() { return duetShowMoreCss; }
@@ -18423,6 +18458,8 @@ class DuetShowMore {
       "showLessAccessibleLabelDefaults": [16],
       "showLessAccessibleLabel": [1537, "show-less-accessible-label"],
       "margin": [1],
+      "buttonMargin": [1, "button-margin"],
+      "buttonPadding": [1, "button-padding"],
       "open": [1540],
       "buttonAriaOpen": [32]
     },
@@ -18443,6 +18480,11 @@ class DuetSlideout {
       fi: "Poistu valikosta",
       sv: "Avsluta menyn",
     };
+    this.topLevelOpenMenuBarLangObject = {
+      en: "Exit this menu to find top level items",
+      fi: "Poistu tästä valikosta löytääksesi ylätason kohteet",
+      sv: "Stäng den här menyn för att hitta objekt på toppnivå",
+    };
     this.isSafariBrowser = /^((?!chrome|android).)*safari/i.test(navigator === null || navigator === void 0 ? void 0 : navigator.userAgent);
     this.handleBodyScrolling = () => {
       if (this.displaying && this.open) {
@@ -18452,6 +18494,9 @@ class DuetSlideout {
         enableBodyScroll(this.dialog);
       }
     };
+    this.getOpenPanel = () => {
+      return this.element.querySelector("duet-slideout-panel[open]");
+    };
     this.toggleMenu = (e) => {
       this.open = !this.open;
       if (this.openButton) {
@@ -18463,7 +18508,7 @@ class DuetSlideout {
         component: "duet-slideout",
       });
       if (this.open) {
-        const openPanel = this.element.querySelector("duet-slideout-panel[open]");
+        const openPanel = this.getOpenPanel();
         this.teleport.go(true);
         if (openPanel) {
           openPanel.setFocus();
@@ -18490,6 +18535,7 @@ class DuetSlideout {
     };
     this.language = getLanguage();
     this.displaying = false;
+    this.openPanel = false;
     this.theme = "";
     this.open = false;
     this.opener = undefined;
@@ -18556,11 +18602,19 @@ class DuetSlideout {
   }
   connectedCallback() {
     connectLanguageChangeObserver(this);
+    {
+      return;
+    }
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
     enableBodyScroll(this.dialog);
-    this.intersectionObserver.disconnect();
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+    }
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+    }
   }
   /**
    * Component event handling.
@@ -18588,6 +18642,7 @@ class DuetSlideout {
     const styles = {
       background: getColorByName(this.backgroundColor, this.theme),
     };
+    const topLevelOpenMenuBarTranslation = getLocaleString(this.topLevelOpenMenuBarLangObject);
     const exitTranslation = getLocaleString(this.exitLangObject);
     return (hAsync(Host, null, hAsync("div", { class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, hAsync("div", { class: {
         "desktop-bg": true,
@@ -18600,7 +18655,7 @@ class DuetSlideout {
       }, style: styles }, hAsync(FocusGuard, { moveFocusTo: this.closeButton }), hAsync("div", { class: "top" }, hAsync("button", { ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
         "slideout-close": true,
         active: this.open,
-      }, onClick: this.onClick }, hAsync("duet-icon", { name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), hAsync("div", { id: "menubar", role: "menubar", class: {
+      }, onClick: this.onClick, inert: this.openPanel }, hAsync("duet-icon", { name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), hAsync("div", { id: "menubar", role: "menubar", "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
         items: true,
       } }, hAsync("slot", null)), hAsync(FocusGuard, { moveFocusTo: this.closeButton })))));
   }
@@ -18616,6 +18671,7 @@ class DuetSlideout {
       "backgroundColor": [1537, "background-color"],
       "language": [32],
       "displaying": [32],
+      "openPanel": [32],
       "toggle": [64],
       "show": [64],
       "hide": [64],
@@ -18757,11 +18813,21 @@ class DuetSlideoutPanel {
       this.open = toggle;
       if (toggle) {
         setTimeout(() => {
+          const siblings = Array.from(this.element.parentElement.children);
+          siblings.forEach(sibling => {
+            if (sibling !== this.element) {
+              sibling.inert = true;
+            }
+          });
           this.closeButton.focus();
         }, 200);
       }
       else {
         setTimeout(() => {
+          const siblings = Array.from(this.element.parentElement.children);
+          siblings.forEach(sibling => {
+            sibling.inert = false;
+          });
           this.openButton.focus();
         }, 200);
       }
@@ -18833,7 +18899,7 @@ class DuetSlideoutPanel {
       } }, hAsync("button", { 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.onToggleClick }, this.icon && hAsync("duet-icon", { name: this.icon, size: "medium", margin: "none", color: "secondary" }), hAsync("div", { class: "label" }, hAsync("span", { class: { "label-text": true, [this.labelSize]: true } }, hAsync("slot", { name: "label" })), hAsync("duet-icon", { class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), hAsync("div", { class: {
+      }, onClick: this.onToggleClick, inert: this.open }, this.icon && hAsync("duet-icon", { name: this.icon, size: "medium", margin: "none", color: "secondary" }), hAsync("div", { class: "label" }, hAsync("span", { class: { "label-text": true, [this.labelSize]: true } }, hAsync("slot", { name: "label" })), hAsync("duet-icon", { class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), hAsync("div", { class: {
         dialog: true,
         hidden: !this.open,
       }, style: styles }, hAsync(FocusGuard, { moveFocusTo: this.closeButton }), hAsync("div", { class: "top" }, hAsync("button", { ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
@@ -19246,7 +19312,7 @@ class DuetStepper {
   }; }
 }
 
-const duetSubmenuBarCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-submenu-bar,*.sc-duet-submenu-bar::after,*.sc-duet-submenu-bar::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-submenu-bar-h{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)*/.sc-duet-submenu-bar-h:not([open]) .sc-duet-submenu-bar-s>duet-submenu-bar-dropdown{display:none}@media (min-width: 62em){/*!@:host(:not([open])) ::slotted(duet-submenu-bar-dropdown)*/.sc-duet-submenu-bar-h:not([open]) .sc-duet-submenu-bar-s>duet-submenu-bar-dropdown{display:inherit}}/*!@.duet-submenu-bar*/.duet-submenu-bar.sc-duet-submenu-bar{position:relative;background:rgb(243, 249, 252)}/*!@.duet-submenu-bar .shadow-container*/.duet-submenu-bar.sc-duet-submenu-bar .shadow-container.sc-duet-submenu-bar{position:absolute;width:100%;height:100%;overflow:hidden}/*!@.duet-submenu-bar .shadow-container .top-shadow*/.duet-submenu-bar.sc-duet-submenu-bar .shadow-container.sc-duet-submenu-bar .top-shadow.sc-duet-submenu-bar{position:absolute;top:-52px;width:100%;height:52px;box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07)}@media (min-width: 62em){/*!@.duet-submenu-bar .shadow-container .top-shadow*/.duet-submenu-bar.sc-duet-submenu-bar .shadow-container.sc-duet-submenu-bar .top-shadow.sc-duet-submenu-bar{top:-80px;height:80px;box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1)}}@media (min-width: 62em){/*!@.duet-submenu-bar*/.duet-submenu-bar.sc-duet-submenu-bar{border-bottom:1px solid rgb(205, 229, 241)}}/*!@.duet-submenu-bar button*/.duet-submenu-bar.sc-duet-submenu-bar button.sc-duet-submenu-bar{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(0, 41, 77)}/*!@.duet-submenu-bar button.active .caret*/.duet-submenu-bar.sc-duet-submenu-bar button.active.sc-duet-submenu-bar .caret.sc-duet-submenu-bar{transform:rotate(180deg)}/*!@.duet-submenu-bar button:focus*/.duet-submenu-bar.sc-duet-submenu-bar button.sc-duet-submenu-bar: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*/.duet-submenu-bar.sc-duet-submenu-bar button.sc-duet-submenu-bar .label.sc-duet-submenu-bar{position:relative;display:flex;gap:8px;align-items:center;justify-content:center}@media (min-width: 62em){/*!@.duet-submenu-bar button*/.duet-submenu-bar.sc-duet-submenu-bar button.sc-duet-submenu-bar{display:none}}/*!@.duet-submenu-bar .menu-container*/.duet-submenu-bar.sc-duet-submenu-bar .menu-container.sc-duet-submenu-bar{position:absolute;z-index:399;width:100%}/*!@.duet-submenu-bar .menu-container.hidden*/.duet-submenu-bar.sc-duet-submenu-bar .menu-container.hidden.sc-duet-submenu-bar{max-height:0;overflow:hidden;visibility:hidden}@media (min-width: 62em){/*!@.duet-submenu-bar .menu-container, .duet-submenu-bar .menu-container.hidden*/.duet-submenu-bar.sc-duet-submenu-bar .menu-container.sc-duet-submenu-bar,.duet-submenu-bar.sc-duet-submenu-bar .menu-container.hidden.sc-duet-submenu-bar{position:static;z-index:auto;max-height:unset;overflow:visible;visibility:visible}}/*!@.duet-submenu-bar .items*/.duet-submenu-bar.sc-duet-submenu-bar .items.sc-duet-submenu-bar{width:100%;height:70vh;overflow-y:scroll;visibility:visible;background:rgb(243, 249, 252);border-bottom:1px solid rgb(207, 210, 212)}/*!@.duet-submenu-bar .items ::slotted(*)*/.duet-submenu-bar .items .sc-duet-submenu-bar-s>*{position:relative}/*!@.duet-submenu-bar .items.hidden*/.duet-submenu-bar.sc-duet-submenu-bar .items.hidden.sc-duet-submenu-bar{max-height:0;overflow:hidden;visibility:hidden;border-bottom:0 solid rgb(207, 210, 212)}/*!@.duet-submenu-bar .items .list-padding*/.duet-submenu-bar.sc-duet-submenu-bar .items.sc-duet-submenu-bar .list-padding.sc-duet-submenu-bar{padding-bottom:188px}@media (min-width: 62em){/*!@.duet-submenu-bar .items .list*/.duet-submenu-bar.sc-duet-submenu-bar .items.sc-duet-submenu-bar .list.sc-duet-submenu-bar{display:flex;align-items:center;justify-content:space-between;height:100%}/*!@.duet-submenu-bar .items, .duet-submenu-bar .items.hidden*/.duet-submenu-bar.sc-duet-submenu-bar .items.sc-duet-submenu-bar,.duet-submenu-bar.sc-duet-submenu-bar .items.hidden.sc-duet-submenu-bar{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*/.duet-submenu-bar.sc-duet-submenu-bar .items.sc-duet-submenu-bar .list-padding.sc-duet-submenu-bar{display:none;padding-bottom:0}}/*!@.duet-submenu-bar .mobile-background*/.duet-submenu-bar.sc-duet-submenu-bar .mobile-background.sc-duet-submenu-bar{position:absolute;width:100%;height:100%;background:rgba(0, 41, 77, 0.6)}@media (min-width: 62em){/*!@.duet-submenu-bar .mobile-background*/.duet-submenu-bar.sc-duet-submenu-bar .mobile-background.sc-duet-submenu-bar{display:none}}/*!@.duet-submenu-bar.duet-theme-turva*/.duet-submenu-bar.duet-theme-turva.sc-duet-submenu-bar{background:rgb(245, 245, 247);border-bottom:1px solid rgb(228, 228, 230)}/*!@.duet-submenu-bar.duet-theme-turva button:focus*/.duet-submenu-bar.duet-theme-turva.sc-duet-submenu-bar button.sc-duet-submenu-bar: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*/.duet-submenu-bar.duet-theme-turva.sc-duet-submenu-bar .items.sc-duet-submenu-bar{background:rgb(245, 245, 247)}/*!@.duet-submenu-bar.duet-theme-turva .mobile-background*/.duet-submenu-bar.duet-theme-turva.sc-duet-submenu-bar .mobile-background.sc-duet-submenu-bar{background:rgba(23, 28, 58, 0.6)}/*!@.duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow*/.duet-submenu-bar.duet-theme-turva.sc-duet-submenu-bar .shadow-container.sc-duet-submenu-bar .top-shadow.sc-duet-submenu-bar{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*/.duet-submenu-bar.duet-theme-turva.sc-duet-submenu-bar .shadow-container.sc-duet-submenu-bar .top-shadow.sc-duet-submenu-bar{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1)}}";
+const duetSubmenuBarCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-submenu-bar,*.sc-duet-submenu-bar::after,*.sc-duet-submenu-bar::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-submenu-bar-h{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)*/.sc-duet-submenu-bar-h:not([open]) .sc-duet-submenu-bar-s>duet-submenu-bar-dropdown{display:none}@media (min-width: 62em){/*!@:host(:not([open])) ::slotted(duet-submenu-bar-dropdown)*/.sc-duet-submenu-bar-h:not([open]) .sc-duet-submenu-bar-s>duet-submenu-bar-dropdown{display:inherit}}/*!@.duet-submenu-bar*/.duet-submenu-bar.sc-duet-submenu-bar{position:relative;background:rgb(243, 249, 252)}@media (min-width: 62em){/*!@.duet-submenu-bar*/.duet-submenu-bar.sc-duet-submenu-bar{border-bottom:1px solid rgb(205, 229, 241)}}/*!@.duet-submenu-bar button*/.duet-submenu-bar.sc-duet-submenu-bar button.sc-duet-submenu-bar{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(0, 41, 77)}/*!@.duet-submenu-bar button.active .caret*/.duet-submenu-bar.sc-duet-submenu-bar button.active.sc-duet-submenu-bar .caret.sc-duet-submenu-bar{transform:rotate(180deg)}/*!@.duet-submenu-bar button:focus*/.duet-submenu-bar.sc-duet-submenu-bar button.sc-duet-submenu-bar: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*/.duet-submenu-bar.sc-duet-submenu-bar button.sc-duet-submenu-bar .label.sc-duet-submenu-bar{position:relative;display:flex;gap:8px;align-items:center;justify-content:center}@media (min-width: 62em){/*!@.duet-submenu-bar button*/.duet-submenu-bar.sc-duet-submenu-bar button.sc-duet-submenu-bar{display:none}}/*!@.duet-submenu-bar .menu-container*/.duet-submenu-bar.sc-duet-submenu-bar .menu-container.sc-duet-submenu-bar{position:absolute;z-index:399;width:100%}/*!@.duet-submenu-bar .menu-container.hidden*/.duet-submenu-bar.sc-duet-submenu-bar .menu-container.hidden.sc-duet-submenu-bar{max-height:0;overflow:hidden;visibility:hidden}@media (min-width: 62em){/*!@.duet-submenu-bar .menu-container, .duet-submenu-bar .menu-container.hidden*/.duet-submenu-bar.sc-duet-submenu-bar .menu-container.sc-duet-submenu-bar,.duet-submenu-bar.sc-duet-submenu-bar .menu-container.hidden.sc-duet-submenu-bar{position:static;z-index:auto;max-height:unset;overflow:visible;visibility:visible}}/*!@.duet-submenu-bar .items*/.duet-submenu-bar.sc-duet-submenu-bar .items.sc-duet-submenu-bar{width:100%;height:70vh;overflow-y:scroll;visibility:visible;background:rgb(243, 249, 252);border-bottom:1px solid rgb(207, 210, 212)}/*!@.duet-submenu-bar .items ::slotted(*)*/.duet-submenu-bar .items .sc-duet-submenu-bar-s>*{position:relative}/*!@.duet-submenu-bar .items.hidden*/.duet-submenu-bar.sc-duet-submenu-bar .items.hidden.sc-duet-submenu-bar{max-height:0;overflow:hidden;visibility:hidden;border-bottom:0 solid rgb(207, 210, 212)}/*!@.duet-submenu-bar .items .list-padding*/.duet-submenu-bar.sc-duet-submenu-bar .items.sc-duet-submenu-bar .list-padding.sc-duet-submenu-bar{padding-bottom:188px}@media (min-width: 62em){/*!@.duet-submenu-bar .items .list*/.duet-submenu-bar.sc-duet-submenu-bar .items.sc-duet-submenu-bar .list.sc-duet-submenu-bar{display:flex;align-items:center;justify-content:space-between;height:100%}/*!@.duet-submenu-bar .items, .duet-submenu-bar .items.hidden*/.duet-submenu-bar.sc-duet-submenu-bar .items.sc-duet-submenu-bar,.duet-submenu-bar.sc-duet-submenu-bar .items.hidden.sc-duet-submenu-bar{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*/.duet-submenu-bar.sc-duet-submenu-bar .items.sc-duet-submenu-bar .list-padding.sc-duet-submenu-bar{display:none;padding-bottom:0}}/*!@.duet-submenu-bar .mobile-background*/.duet-submenu-bar.sc-duet-submenu-bar .mobile-background.sc-duet-submenu-bar{position:absolute;width:100%;height:100%;background:rgba(0, 41, 77, 0.6)}@media (min-width: 62em){/*!@.duet-submenu-bar .mobile-background*/.duet-submenu-bar.sc-duet-submenu-bar .mobile-background.sc-duet-submenu-bar{display:none}}/*!@.duet-submenu-bar.duet-theme-turva*/.duet-submenu-bar.duet-theme-turva.sc-duet-submenu-bar{background:rgb(245, 245, 247);border-bottom:1px solid rgb(228, 228, 230)}/*!@.duet-submenu-bar.duet-theme-turva button:focus*/.duet-submenu-bar.duet-theme-turva.sc-duet-submenu-bar button.sc-duet-submenu-bar: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*/.duet-submenu-bar.duet-theme-turva.sc-duet-submenu-bar .items.sc-duet-submenu-bar{background:rgb(245, 245, 247)}/*!@.duet-submenu-bar.duet-theme-turva .mobile-background*/.duet-submenu-bar.duet-theme-turva.sc-duet-submenu-bar .mobile-background.sc-duet-submenu-bar{background:rgba(23, 28, 58, 0.6)}/*!@.duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow*/.duet-submenu-bar.duet-theme-turva.sc-duet-submenu-bar .shadow-container.sc-duet-submenu-bar .top-shadow.sc-duet-submenu-bar{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*/.duet-submenu-bar.duet-theme-turva.sc-duet-submenu-bar .shadow-container.sc-duet-submenu-bar .top-shadow.sc-duet-submenu-bar{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1)}}";
 
 class DuetSubmenuBar {
   constructor(hostRef) {
@@ -19350,7 +19416,7 @@ class DuetSubmenuBar {
    * Always the last one in the class.
    */
   render() {
-    return (hAsync(Host, null, hAsync("nav", { class: { "duet-submenu-bar": true, "duet-theme-turva": this.theme === "turva" }, "aria-label": this.accessibleLabel }, hAsync("div", { class: "shadow-container", role: "presentation" }, hAsync("div", { class: "top-shadow" })), this.hasItems && (hAsync("button", { ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+    return (hAsync(Host, null, hAsync("nav", { class: { "duet-submenu-bar": true, "duet-theme-turva": this.theme === "turva" }, "aria-label": this.accessibleLabel }, this.hasItems && (hAsync("button", { 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 }, hAsync("div", { class: "label" }, hAsync("slot", { name: "label" }), hAsync("duet-icon", { theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), hAsync("div", { class: {
         "menu-container": true,
@@ -19382,7 +19448,7 @@ class DuetSubmenuBar {
   }; }
 }
 
-const duetSubmenuBarDropdownCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-submenu-bar-dropdown,*.sc-duet-submenu-bar-dropdown::after,*.sc-duet-submenu-bar-dropdown::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-submenu-bar-dropdown-h{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*/.sc-duet-submenu-bar-dropdown-h{width:auto}}/*!@.duet-submenu-bar-dropdown*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown{position:relative;height:100%}/*!@.duet-submenu-bar-dropdown button*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown{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(0, 41, 77);text-align:center;text-decoration:none;cursor:pointer}@media (min-width: 62em){/*!@.duet-submenu-bar-dropdown button*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown{flex-direction:column;gap:5px;align-items:center;justify-content:center;width:auto;font-size:0.875rem;color:rgb(0, 77, 128)}}/*!@.duet-submenu-bar-dropdown button .label*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown .label.sc-duet-submenu-bar-dropdown{display:flex;gap:5px;align-items:center;justify-content:center}@media (min-width: 62em){/*!@.duet-submenu-bar-dropdown button.open*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.open.sc-duet-submenu-bar-dropdown{background:rgb(230, 242, 248)}}/*!@.duet-submenu-bar-dropdown button.open .caret*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.open.sc-duet-submenu-bar-dropdown .caret.sc-duet-submenu-bar-dropdown{transform:rotate(180deg)}/*!@.duet-submenu-bar-dropdown button:focus*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown: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*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown .label-text.sc-duet-submenu-bar-dropdown{position:relative}/*!@.duet-submenu-bar-dropdown button.active .label-text::after*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown .label-text.sc-duet-submenu-bar-dropdown::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*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown .label-text.sc-duet-submenu-bar-dropdown::after{display:none}}@media (min-width: 62em){/*!@.duet-submenu-bar-dropdown button .caret*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown .caret.sc-duet-submenu-bar-dropdown{position:absolute;right:12px}/*!@.duet-submenu-bar-dropdown button:hover*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown:hover{color:rgb(0, 41, 77);background:rgb(230, 242, 248)}/*!@.duet-submenu-bar-dropdown button:hover.active*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown:hover.active{color:rgb(0, 41, 77)}/*!@.duet-theme-turva .duet-submenu-bar-dropdown button:hover.active*/.duet-theme-turva.sc-duet-submenu-bar-dropdown .duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown:hover.active{color:rgb(23, 28, 58)}/*!@.duet-submenu-bar-dropdown button.active*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown{color:rgb(0, 119, 179)}/*!@.duet-theme-turva .duet-submenu-bar-dropdown button.active*/.duet-theme-turva.sc-duet-submenu-bar-dropdown .duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown{color:rgb(198, 12, 48)}/*!@.duet-submenu-bar-dropdown button.active::after, .duet-submenu-bar-dropdown button.open::after*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown::after,.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.open.sc-duet-submenu-bar-dropdown::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*/.duet-theme-turva.sc-duet-submenu-bar-dropdown .duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown::after,.duet-theme-turva.sc-duet-submenu-bar-dropdown .duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.open.sc-duet-submenu-bar-dropdown::after{background:rgb(198, 12, 48)}}/*!@.duet-submenu-bar-dropdown .items*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown .items.sc-duet-submenu-bar-dropdown{display:flex;flex-direction:column;align-items:center;justify-content:center;max-height:1000px;padding:4px 0 16px;overflow-y:auto;color:rgb(0, 41, 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*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown .items.sc-duet-submenu-bar-dropdown::-webkit-scrollbar{display:none}@media (min-width: 62em){/*!@.duet-submenu-bar-dropdown .items*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown .items.sc-duet-submenu-bar-dropdown{position:absolute;top:102%;z-index:600;min-width:320px;padding:4px 0 0;background:rgb(255, 255, 255);border-radius:0 0 4px 4px;box-shadow:0 6px 6px 0 rgba(0, 41, 77, 0.1);transition:none}}/*!@.duet-submenu-bar-dropdown .items.hidden*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown .items.hidden.sc-duet-submenu-bar-dropdown{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*/.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown{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*/.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown:hover{background:rgb(228, 228, 230)}}/*!@.duet-submenu-bar-dropdown.duet-theme-turva button:focus*/.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown: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*/.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown .label-text.sc-duet-submenu-bar-dropdown::after,.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown button.open.sc-duet-submenu-bar-dropdown .label-text.sc-duet-submenu-bar-dropdown::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*/.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown,.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown button.open.sc-duet-submenu-bar-dropdown{color:rgb(148, 9, 37);background:rgb(228, 228, 230)}}/*!@.duet-submenu-bar-dropdown.duet-theme-turva button.active::after, .duet-submenu-bar-dropdown.duet-theme-turva button.open::after*/.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown::after,.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown button.open.sc-duet-submenu-bar-dropdown::after{background:rgb(148, 9, 37)}@media (min-width: 62em){/*!@.duet-submenu-bar-dropdown.duet-theme-turva .items*/.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown .items.sc-duet-submenu-bar-dropdown{background:rgb(255, 255, 255)}}";
+const duetSubmenuBarDropdownCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-submenu-bar-dropdown,*.sc-duet-submenu-bar-dropdown::after,*.sc-duet-submenu-bar-dropdown::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-submenu-bar-dropdown-h{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*/.sc-duet-submenu-bar-dropdown-h{width:auto}}/*!@.duet-submenu-bar-dropdown*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown{position:relative;height:100%}/*!@.duet-submenu-bar-dropdown button*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown{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(0, 41, 77);text-align:center;text-decoration:none;cursor:pointer}@media (min-width: 62em){/*!@.duet-submenu-bar-dropdown button*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown{flex-direction:column;gap:5px;align-items:center;justify-content:center;width:auto;font-size:0.875rem;color:rgb(0, 77, 128)}}/*!@.duet-submenu-bar-dropdown button .label*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown .label.sc-duet-submenu-bar-dropdown{display:flex;gap:5px;align-items:center;justify-content:center}@media (min-width: 62em){/*!@.duet-submenu-bar-dropdown button.open*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.open.sc-duet-submenu-bar-dropdown{background:rgb(230, 242, 248)}}/*!@.duet-submenu-bar-dropdown button.open .caret*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.open.sc-duet-submenu-bar-dropdown .caret.sc-duet-submenu-bar-dropdown{transform:rotate(180deg)}/*!@.duet-submenu-bar-dropdown button:focus*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown: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*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown .label-text.sc-duet-submenu-bar-dropdown{position:relative}/*!@.duet-submenu-bar-dropdown button.active .label-text::after*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown .label-text.sc-duet-submenu-bar-dropdown::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*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown .label-text.sc-duet-submenu-bar-dropdown::after{display:none}}@media (min-width: 62em){/*!@.duet-submenu-bar-dropdown button .caret*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown .caret.sc-duet-submenu-bar-dropdown{position:absolute;right:12px}/*!@.duet-submenu-bar-dropdown button:hover*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown:hover{color:rgb(0, 41, 77);background:rgb(230, 242, 248)}/*!@.duet-submenu-bar-dropdown button:hover.active*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown:hover.active{color:rgb(0, 41, 77)}/*!@.duet-theme-turva .duet-submenu-bar-dropdown button:hover.active*/.duet-theme-turva.sc-duet-submenu-bar-dropdown .duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown:hover.active{color:rgb(23, 28, 58)}/*!@.duet-submenu-bar-dropdown button.active*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown{color:rgb(0, 119, 179)}/*!@.duet-theme-turva .duet-submenu-bar-dropdown button.active*/.duet-theme-turva.sc-duet-submenu-bar-dropdown .duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown{color:rgb(198, 12, 48)}/*!@.duet-submenu-bar-dropdown button.active::after, .duet-submenu-bar-dropdown button.open::after*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown::after,.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.open.sc-duet-submenu-bar-dropdown::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*/.duet-theme-turva.sc-duet-submenu-bar-dropdown .duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown::after,.duet-theme-turva.sc-duet-submenu-bar-dropdown .duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown button.open.sc-duet-submenu-bar-dropdown::after{background:rgb(198, 12, 48)}}/*!@.duet-submenu-bar-dropdown .items*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown .items.sc-duet-submenu-bar-dropdown{display:flex;flex-direction:column;align-items:center;justify-content:center;max-height:1000px;padding:4px 0 16px;overflow-y:auto;color:rgb(0, 41, 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*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown .items.sc-duet-submenu-bar-dropdown::-webkit-scrollbar{display:none}@media (min-width: 62em){/*!@.duet-submenu-bar-dropdown .items*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown .items.sc-duet-submenu-bar-dropdown{position:absolute;top:102%;z-index:600;min-width:320px;padding:4px 0 0;background:rgb(255, 255, 255);border-radius:0 0 4px 4px;box-shadow:0 6px 6px 0 rgba(0, 41, 77, 0.1);transition:none}}/*!@.duet-submenu-bar-dropdown .items.hidden*/.duet-submenu-bar-dropdown.sc-duet-submenu-bar-dropdown .items.hidden.sc-duet-submenu-bar-dropdown{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*/.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown{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*/.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown:hover{background:rgb(228, 228, 230)}}/*!@.duet-submenu-bar-dropdown.duet-theme-turva button:focus*/.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown button.sc-duet-submenu-bar-dropdown: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*/.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown .label-text.sc-duet-submenu-bar-dropdown::after,.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown button.open.sc-duet-submenu-bar-dropdown .label-text.sc-duet-submenu-bar-dropdown::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*/.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown,.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown button.open.sc-duet-submenu-bar-dropdown{color:rgb(148, 9, 37)}}/*!@.duet-submenu-bar-dropdown.duet-theme-turva button.active::after, .duet-submenu-bar-dropdown.duet-theme-turva button.open::after*/.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown button.active.sc-duet-submenu-bar-dropdown::after,.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown button.open.sc-duet-submenu-bar-dropdown::after{background:rgb(148, 9, 37)}@media (min-width: 62em){/*!@.duet-submenu-bar-dropdown.duet-theme-turva button.open*/.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown button.open.sc-duet-submenu-bar-dropdown{background:rgb(228, 228, 230)}}@media (min-width: 62em){/*!@.duet-submenu-bar-dropdown.duet-theme-turva .items*/.duet-submenu-bar-dropdown.duet-theme-turva.sc-duet-submenu-bar-dropdown .items.sc-duet-submenu-bar-dropdown{background:rgb(255, 255, 255)}}";
 
 class DuetSubmenuBarDropdown {
   constructor(hostRef) {
@@ -19512,7 +19578,7 @@ class DuetSubmenuBarDropdown {
   }; }
 }
 
-const duetSubmenuBarDropdownLinkCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-submenu-bar-dropdown-link,*.sc-duet-submenu-bar-dropdown-link::after,*.sc-duet-submenu-bar-dropdown-link::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-submenu-bar-dropdown-link-h{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*/.duet-submenu-bar-dropdown-link.sc-duet-submenu-bar-dropdown-link{display:flex;flex-direction:row;gap:0.5rem;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(0, 41, 77);text-align:left;text-decoration:none}/*!@.duet-submenu-bar-dropdown-link:focus*/.duet-submenu-bar-dropdown-link.sc-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*/.duet-theme-turva.sc-duet-submenu-bar-dropdown-link .duet-submenu-bar-dropdown-link.sc-duet-submenu-bar-dropdown-link:focus,.duet-submenu-bar-dropdown-link.sc-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}@media (min-width: 62em){/*!@.duet-submenu-bar-dropdown-link*/.duet-submenu-bar-dropdown-link.sc-duet-submenu-bar-dropdown-link{padding:0.675rem 16px;font-size:0.875rem;text-align:center}}/*!@.duet-submenu-bar-dropdown-link.active .label*/.duet-submenu-bar-dropdown-link.active.sc-duet-submenu-bar-dropdown-link .label.sc-duet-submenu-bar-dropdown-link{position:relative}/*!@.duet-submenu-bar-dropdown-link.active .label::after*/.duet-submenu-bar-dropdown-link.active.sc-duet-submenu-bar-dropdown-link .label.sc-duet-submenu-bar-dropdown-link::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.duet-theme-turva*/.duet-submenu-bar-dropdown-link.duet-theme-turva.sc-duet-submenu-bar-dropdown-link{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*/.duet-submenu-bar-dropdown-link.duet-theme-turva.active.sc-duet-submenu-bar-dropdown-link .label.sc-duet-submenu-bar-dropdown-link::after{background:rgb(198, 12, 48)}@media (min-width: 62em){/*!@.duet-submenu-bar-dropdown-link:hover*/.duet-submenu-bar-dropdown-link.sc-duet-submenu-bar-dropdown-link:hover{color:rgb(0, 77, 128);background:rgb(243, 249, 252)}/*!@.duet-submenu-bar-dropdown-link:hover.duet-theme-turva*/.duet-submenu-bar-dropdown-link.sc-duet-submenu-bar-dropdown-link:hover.duet-theme-turva{color:rgb(148, 9, 37);background:rgb(245, 245, 247)}}/*!@.duet-submenu-bar-dropdown-link.highlight*/.duet-submenu-bar-dropdown-link.highlight.sc-duet-submenu-bar-dropdown-link{color:rgb(0, 119, 179)}/*!@.duet-submenu-bar-dropdown-link.highlight.duet-theme-turva*/.duet-submenu-bar-dropdown-link.highlight.duet-theme-turva.sc-duet-submenu-bar-dropdown-link{color:rgb(148, 9, 37)}";
+const duetSubmenuBarDropdownLinkCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-submenu-bar-dropdown-link,*.sc-duet-submenu-bar-dropdown-link::after,*.sc-duet-submenu-bar-dropdown-link::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-submenu-bar-dropdown-link-h{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*/.duet-submenu-bar-dropdown-link.sc-duet-submenu-bar-dropdown-link{display:flex;flex-direction:row;gap:0.5rem;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(0, 41, 77);text-align:left;text-decoration:none}/*!@.duet-submenu-bar-dropdown-link:focus*/.duet-submenu-bar-dropdown-link.sc-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*/.duet-theme-turva.sc-duet-submenu-bar-dropdown-link .duet-submenu-bar-dropdown-link.sc-duet-submenu-bar-dropdown-link:focus,.duet-submenu-bar-dropdown-link.sc-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}@media (min-width: 62em){/*!@.duet-submenu-bar-dropdown-link*/.duet-submenu-bar-dropdown-link.sc-duet-submenu-bar-dropdown-link{padding:0.675rem 16px;font-size:0.875rem}}/*!@.duet-submenu-bar-dropdown-link.active .label*/.duet-submenu-bar-dropdown-link.active.sc-duet-submenu-bar-dropdown-link .label.sc-duet-submenu-bar-dropdown-link{position:relative}/*!@.duet-submenu-bar-dropdown-link.active .label::after*/.duet-submenu-bar-dropdown-link.active.sc-duet-submenu-bar-dropdown-link .label.sc-duet-submenu-bar-dropdown-link::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.duet-theme-turva*/.duet-submenu-bar-dropdown-link.duet-theme-turva.sc-duet-submenu-bar-dropdown-link{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*/.duet-submenu-bar-dropdown-link.duet-theme-turva.active.sc-duet-submenu-bar-dropdown-link .label.sc-duet-submenu-bar-dropdown-link::after{background:rgb(198, 12, 48)}@media (min-width: 62em){/*!@.duet-submenu-bar-dropdown-link:hover*/.duet-submenu-bar-dropdown-link.sc-duet-submenu-bar-dropdown-link:hover{color:rgb(0, 77, 128);background:rgb(243, 249, 252)}/*!@.duet-submenu-bar-dropdown-link:hover.duet-theme-turva*/.duet-submenu-bar-dropdown-link.sc-duet-submenu-bar-dropdown-link:hover.duet-theme-turva{color:rgb(148, 9, 37);background:rgb(245, 245, 247)}}/*!@.duet-submenu-bar-dropdown-link.highlight*/.duet-submenu-bar-dropdown-link.highlight.sc-duet-submenu-bar-dropdown-link{color:rgb(0, 119, 179)}/*!@.duet-submenu-bar-dropdown-link.highlight.duet-theme-turva*/.duet-submenu-bar-dropdown-link.highlight.duet-theme-turva.sc-duet-submenu-bar-dropdown-link{color:rgb(148, 9, 37)}";
 
 class DuetSubmenuBarDropdownLink {
   constructor(hostRef) {
@@ -19755,7 +19821,7 @@ class DuetTabGroup {
     };
     this.renderTab = () => {
       const renderedTabs = this.tabs.map((element, index) => {
-        return (hAsync("button", { role: "tab", id: this.getButtonId(index), "aria-controls": this.getTabId(index), "aria-selected": element.selected ? "true" : "false", "aria-description": this.getAccessibleDescription(index), tabindex: index === 0 ? "0" : "-1", part: `${this.identifier}-button ${element.selected ? `${this.identifier}-button--selected` : ""}`, type: "button", class: {
+        return (hAsync("button", { role: "tab", id: this.getButtonId(index), "aria-selected": element.selected ? "true" : "false", "aria-description": this.getAccessibleDescription(index), tabindex: index === 0 ? "0" : "-1", part: `${this.identifier}-button ${element.selected ? `${this.identifier}-button--selected` : ""}`, type: "button", class: {
             "duet-p-0": this.padding === "none",
             "duet-tab-button": true,
             "stackable-tab": this.variation === "checked" && this.tabs.length <= 3,
@@ -19873,7 +19939,6 @@ class DuetTabGroup {
     this.tabs = this.getTabs();
     this.tabs.forEach((tab, index) => {
       tab.id = this.getTabId(index);
-      tab.setAttribute("accessible-labelled-by", this.getButtonId(index));
       if (tab.selected) {
         if (this.selected === undefined) {
           this.selected = index;
@@ -20188,7 +20253,7 @@ class DuetTextarea {
     this.counterLabel = undefined;
   }
   disallowedPatternChange() {
-    this.disallowPatternRegex = this.disallowPattern ? new RegExp(this.disallowPattern, "g") : null;
+    this.disallowPatternRegex = this.disallowPattern ? new RegExp(this.disallowPattern, "gu") : null;
   }
   /**
    * Component lifecycle events.
@@ -20390,7 +20455,7 @@ class DuetToggle {
   }; }
 }
 
-const duetToolbarCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-toolbar,*.sc-duet-toolbar::after,*.sc-duet-toolbar::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-toolbar-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%}/*!@.duet-toolbar*/.duet-toolbar.sc-duet-toolbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;background:rgb(255, 255, 255)}/*!@.duet-toolbar .container*/.duet-toolbar.sc-duet-toolbar .container.sc-duet-toolbar{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1384px;height:36px;margin:0 28px;border-bottom:1px solid rgb(225, 227, 230)}/*!@.duet-toolbar .list*/.duet-toolbar.sc-duet-toolbar .list.sc-duet-toolbar{display:flex;align-items:center;justify-content:space-between;height:100%;list-style-type:none}/*!@.duet-toolbar ::slotted(*)*/.duet-toolbar .sc-duet-toolbar-s>*{display:flex;align-items:center;justify-content:center;height:100%}/*!@.duet-toolbar.duet-theme-turva*/.duet-toolbar.duet-theme-turva.sc-duet-toolbar{background:rgb(255, 255, 255)}/*!@.duet-toolbar.duet-theme-turva .container*/.duet-toolbar.duet-theme-turva.sc-duet-toolbar .container.sc-duet-toolbar{border-bottom:1px solid rgb(228, 228, 230)}";
+const duetToolbarCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-toolbar,*.sc-duet-toolbar::after,*.sc-duet-toolbar::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-toolbar-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%}/*!@.duet-toolbar*/.duet-toolbar.sc-duet-toolbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;background:rgb(255, 255, 255)}/*!@.duet-toolbar .container*/.duet-toolbar.sc-duet-toolbar .container.sc-duet-toolbar{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1384px;height:36px;margin:0 28px;border-bottom:1px solid rgb(225, 227, 230)}/*!@.duet-toolbar .list*/.duet-toolbar.sc-duet-toolbar .list.sc-duet-toolbar{display:flex;align-items:center;justify-content:space-between;height:100%;list-style-type:none}/*!@.duet-toolbar ::slotted(*)*/.duet-toolbar .sc-duet-toolbar-s>*{display:flex;align-items:center;justify-content:center;height:100%}/*!@.duet-toolbar.negative*/.duet-toolbar.negative.sc-duet-toolbar{background:rgb(0, 119, 179)}/*!@.duet-toolbar.negative .container*/.duet-toolbar.negative.sc-duet-toolbar .container.sc-duet-toolbar{border-bottom:0}/*!@.duet-toolbar.duet-theme-turva*/.duet-toolbar.duet-theme-turva.sc-duet-toolbar{background:rgb(255, 255, 255)}/*!@.duet-toolbar.duet-theme-turva .container*/.duet-toolbar.duet-theme-turva.sc-duet-toolbar .container.sc-duet-toolbar{border-bottom:1px solid rgb(228, 228, 230)}/*!@.duet-toolbar.duet-theme-turva.negative*/.duet-toolbar.duet-theme-turva.negative.sc-duet-toolbar{background:rgb(198, 12, 48)}/*!@.duet-toolbar.duet-theme-turva.negative .container*/.duet-toolbar.duet-theme-turva.negative.sc-duet-toolbar .container.sc-duet-toolbar{border-bottom:0}";
 
 /**
  * @slot left - Slot for content in left side.
@@ -20400,6 +20465,7 @@ class DuetToolbar {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.theme = "";
+    this.variation = "default";
     this.accessibleLabel = undefined;
   }
   /**
@@ -20426,7 +20492,8 @@ class DuetToolbar {
    * Always the last one in the class.
    */
   render() {
-    return (hAsync(Host, null, hAsync("nav", { class: { "duet-toolbar": true, "duet-theme-turva": this.theme === "turva" }, "aria-label": this.accessibleLabel }, hAsync("div", { class: "container" }, hAsync("div", { class: "list", role: "list" }, hAsync("slot", { name: "left" })), hAsync("div", { class: "list", role: "list" }, hAsync("slot", { name: "right" }))))));
+    const variation = this.variation === "negative" ? "negative" : "default";
+    return (hAsync(Host, null, hAsync("nav", { class: { "duet-toolbar": true, "duet-theme-turva": this.theme === "turva", [variation]: true }, "aria-label": this.accessibleLabel }, hAsync("div", { class: "container" }, hAsync("div", { class: "list", role: "list" }, hAsync("slot", { name: "left" })), hAsync("div", { class: "list", role: "list" }, hAsync("slot", { name: "right" }))))));
   }
   get element() { return getElement(this); }
   static get style() { return duetToolbarCss; }
@@ -20435,6 +20502,7 @@ class DuetToolbar {
     "$tagName$": "duet-toolbar",
     "$members$": {
       "theme": [1025],
+      "variation": [1025],
       "accessibleLabel": [1, "accessible-label"]
     },
     "$listeners$": undefined,
@@ -20443,7 +20511,7 @@ class DuetToolbar {
   }; }
 }
 
-const duetToolbarDropdownCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-toolbar-dropdown,*.sc-duet-toolbar-dropdown::after,*.sc-duet-toolbar-dropdown::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-toolbar-dropdown-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;height:100%}/*!@.duet-toolbar-dropdown*/.duet-toolbar-dropdown.sc-duet-toolbar-dropdown{position:relative;height:100%}/*!@.duet-toolbar-dropdown button*/.duet-toolbar-dropdown.sc-duet-toolbar-dropdown button.sc-duet-toolbar-dropdown{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;padding:0 16px;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(0, 77, 128);text-align:center;text-decoration:none;cursor:pointer}/*!@.duet-toolbar-dropdown button .label*/.duet-toolbar-dropdown.sc-duet-toolbar-dropdown button.sc-duet-toolbar-dropdown .label.sc-duet-toolbar-dropdown{display:flex;gap:0.5rem;align-items:center;justify-content:center}/*!@.duet-toolbar-dropdown button:hover*/.duet-toolbar-dropdown.sc-duet-toolbar-dropdown button.sc-duet-toolbar-dropdown:hover{color:rgb(0, 41, 77);background:rgb(243, 249, 252)}/*!@.duet-toolbar-dropdown button.open .caret*/.duet-toolbar-dropdown.sc-duet-toolbar-dropdown button.open.sc-duet-toolbar-dropdown .caret.sc-duet-toolbar-dropdown{transform:rotate(180deg)}/*!@.duet-toolbar-dropdown button:focus*/.duet-toolbar-dropdown.sc-duet-toolbar-dropdown button.sc-duet-toolbar-dropdown:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}/*!@.duet-toolbar-dropdown button.active, .duet-toolbar-dropdown button.open*/.duet-toolbar-dropdown.sc-duet-toolbar-dropdown button.active.sc-duet-toolbar-dropdown,.duet-toolbar-dropdown.sc-duet-toolbar-dropdown button.open.sc-duet-toolbar-dropdown{color:rgb(0, 41, 77)}/*!@.duet-toolbar-dropdown button.active::after, .duet-toolbar-dropdown button.open::after*/.duet-toolbar-dropdown.sc-duet-toolbar-dropdown button.active.sc-duet-toolbar-dropdown::after,.duet-toolbar-dropdown.sc-duet-toolbar-dropdown button.open.sc-duet-toolbar-dropdown::after{position:absolute;top:auto;bottom:1px;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}/*!@.duet-toolbar-dropdown .items*/.duet-toolbar-dropdown.sc-duet-toolbar-dropdown .items.sc-duet-toolbar-dropdown{position:absolute;top:102%;right:0%;left:auto;z-index:600;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:175px;padding:1rem 0;color:rgb(0, 41, 77);background:rgb(243, 249, 252);border-radius:0 0 8px 8px;box-shadow:0 6px 6px 0 rgba(0, 41, 77, 0.1)}/*!@.duet-toolbar-dropdown .items.hidden*/.duet-toolbar-dropdown.sc-duet-toolbar-dropdown .items.hidden.sc-duet-toolbar-dropdown{display:none}/*!@.duet-toolbar-dropdown.right .items*/.duet-toolbar-dropdown.right.sc-duet-toolbar-dropdown .items.sc-duet-toolbar-dropdown{right:auto;left:0%}/*!@.duet-toolbar-dropdown.duet-theme-turva button*/.duet-toolbar-dropdown.duet-theme-turva.sc-duet-toolbar-dropdown button.sc-duet-toolbar-dropdown{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-toolbar-dropdown.duet-theme-turva button:hover*/.duet-toolbar-dropdown.duet-theme-turva.sc-duet-toolbar-dropdown button.sc-duet-toolbar-dropdown:hover{color:rgb(23, 28, 58);background:rgb(245, 245, 247)}/*!@.duet-toolbar-dropdown.duet-theme-turva button:focus*/.duet-toolbar-dropdown.duet-theme-turva.sc-duet-toolbar-dropdown button.sc-duet-toolbar-dropdown:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}/*!@.duet-toolbar-dropdown.duet-theme-turva button.active, .duet-toolbar-dropdown.duet-theme-turva button.open*/.duet-toolbar-dropdown.duet-theme-turva.sc-duet-toolbar-dropdown button.active.sc-duet-toolbar-dropdown,.duet-toolbar-dropdown.duet-theme-turva.sc-duet-toolbar-dropdown button.open.sc-duet-toolbar-dropdown{color:rgb(23, 28, 58)}/*!@.duet-toolbar-dropdown.duet-theme-turva button.active::after, .duet-toolbar-dropdown.duet-theme-turva button.open::after*/.duet-toolbar-dropdown.duet-theme-turva.sc-duet-toolbar-dropdown button.active.sc-duet-toolbar-dropdown::after,.duet-toolbar-dropdown.duet-theme-turva.sc-duet-toolbar-dropdown button.open.sc-duet-toolbar-dropdown::after{background:rgb(198, 12, 48)}/*!@.duet-toolbar-dropdown.duet-theme-turva .items*/.duet-toolbar-dropdown.duet-theme-turva.sc-duet-toolbar-dropdown .items.sc-duet-toolbar-dropdown{background:rgb(245, 245, 247)}";
+const duetToolbarDropdownCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-toolbar-dropdown,*.sc-duet-toolbar-dropdown::after,*.sc-duet-toolbar-dropdown::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-toolbar-dropdown-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;height:100%}/*!@.duet-toolbar-dropdown*/.duet-toolbar-dropdown.sc-duet-toolbar-dropdown{position:relative;height:100%}/*!@.duet-toolbar-dropdown button*/.duet-toolbar-dropdown.sc-duet-toolbar-dropdown button.sc-duet-toolbar-dropdown{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;padding:0 16px;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(0, 77, 128);text-align:center;text-decoration:none;cursor:pointer}/*!@.duet-toolbar-dropdown button .label*/.duet-toolbar-dropdown.sc-duet-toolbar-dropdown button.sc-duet-toolbar-dropdown .label.sc-duet-toolbar-dropdown{display:flex;gap:0.5rem;align-items:center;justify-content:center}/*!@.duet-toolbar-dropdown button:hover*/.duet-toolbar-dropdown.sc-duet-toolbar-dropdown button.sc-duet-toolbar-dropdown:hover{color:rgb(0, 41, 77);background:rgb(243, 249, 252)}/*!@.duet-toolbar-dropdown button.open .caret*/.duet-toolbar-dropdown.sc-duet-toolbar-dropdown button.open.sc-duet-toolbar-dropdown .caret.sc-duet-toolbar-dropdown{transform:rotate(180deg)}/*!@.duet-toolbar-dropdown button:focus*/.duet-toolbar-dropdown.sc-duet-toolbar-dropdown button.sc-duet-toolbar-dropdown:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}/*!@.duet-toolbar-dropdown button.active, .duet-toolbar-dropdown button.open*/.duet-toolbar-dropdown.sc-duet-toolbar-dropdown button.active.sc-duet-toolbar-dropdown,.duet-toolbar-dropdown.sc-duet-toolbar-dropdown button.open.sc-duet-toolbar-dropdown{color:rgb(0, 41, 77)}/*!@.duet-toolbar-dropdown button.active::after, .duet-toolbar-dropdown button.open::after*/.duet-toolbar-dropdown.sc-duet-toolbar-dropdown button.active.sc-duet-toolbar-dropdown::after,.duet-toolbar-dropdown.sc-duet-toolbar-dropdown button.open.sc-duet-toolbar-dropdown::after{position:absolute;top:auto;bottom:1px;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}/*!@.duet-toolbar-dropdown .items*/.duet-toolbar-dropdown.sc-duet-toolbar-dropdown .items.sc-duet-toolbar-dropdown{position:absolute;top:102%;right:0%;left:auto;z-index:600;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:175px;padding:1rem 0;color:rgb(0, 41, 77);background:rgb(243, 249, 252);border-radius:0 0 8px 8px;box-shadow:0 6px 6px 0 rgba(0, 41, 77, 0.1)}/*!@.duet-toolbar-dropdown .items.hidden*/.duet-toolbar-dropdown.sc-duet-toolbar-dropdown .items.hidden.sc-duet-toolbar-dropdown{display:none}/*!@.duet-toolbar-dropdown.right .items*/.duet-toolbar-dropdown.right.sc-duet-toolbar-dropdown .items.sc-duet-toolbar-dropdown{right:auto;left:0%}/*!@.duet-toolbar-dropdown.duet-theme-turva button*/.duet-toolbar-dropdown.duet-theme-turva.sc-duet-toolbar-dropdown button.sc-duet-toolbar-dropdown{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-toolbar-dropdown.duet-theme-turva button:hover*/.duet-toolbar-dropdown.duet-theme-turva.sc-duet-toolbar-dropdown button.sc-duet-toolbar-dropdown:hover{color:rgb(23, 28, 58);background:rgb(245, 245, 247)}/*!@.duet-toolbar-dropdown.duet-theme-turva button:focus*/.duet-toolbar-dropdown.duet-theme-turva.sc-duet-toolbar-dropdown button.sc-duet-toolbar-dropdown:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}/*!@.duet-toolbar-dropdown.duet-theme-turva button.active, .duet-toolbar-dropdown.duet-theme-turva button.open*/.duet-toolbar-dropdown.duet-theme-turva.sc-duet-toolbar-dropdown button.active.sc-duet-toolbar-dropdown,.duet-toolbar-dropdown.duet-theme-turva.sc-duet-toolbar-dropdown button.open.sc-duet-toolbar-dropdown{color:rgb(23, 28, 58)}/*!@.duet-toolbar-dropdown.duet-theme-turva button.active::after, .duet-toolbar-dropdown.duet-theme-turva button.open::after*/.duet-toolbar-dropdown.duet-theme-turva.sc-duet-toolbar-dropdown button.active.sc-duet-toolbar-dropdown::after,.duet-toolbar-dropdown.duet-theme-turva.sc-duet-toolbar-dropdown button.open.sc-duet-toolbar-dropdown::after{background:rgb(198, 12, 48)}/*!@.duet-toolbar-dropdown.duet-theme-turva .items*/.duet-toolbar-dropdown.duet-theme-turva.sc-duet-toolbar-dropdown .items.sc-duet-toolbar-dropdown{background:rgb(245, 245, 247)}/*!@.duet-toolbar-dropdown.negative button*/.duet-toolbar-dropdown.negative.sc-duet-toolbar-dropdown button.sc-duet-toolbar-dropdown{color:rgb(255, 255, 255)}/*!@.duet-toolbar-dropdown.negative button:hover*/.duet-toolbar-dropdown.negative.sc-duet-toolbar-dropdown button.sc-duet-toolbar-dropdown:hover{color:rgb(255, 255, 255);background:rgba(0, 41, 77, 0.2)}/*!@.duet-toolbar-dropdown.negative button.active*/.duet-toolbar-dropdown.negative.sc-duet-toolbar-dropdown button.active.sc-duet-toolbar-dropdown{font-weight:600;color:rgb(255, 255, 255);background:rgba(0, 41, 77, 0.2)}/*!@.duet-toolbar-dropdown.negative button.open*/.duet-toolbar-dropdown.negative.sc-duet-toolbar-dropdown button.open.sc-duet-toolbar-dropdown{color:rgb(255, 255, 255);background:rgba(0, 41, 77, 0.2)}/*!@.duet-toolbar-dropdown.negative button duet-icon*/.duet-toolbar-dropdown.negative.sc-duet-toolbar-dropdown button.sc-duet-toolbar-dropdown duet-icon.sc-duet-toolbar-dropdown{color:rgb(205, 229, 241)}/*!@.duet-toolbar-dropdown.duet-theme-turva.negative button*/.duet-toolbar-dropdown.duet-theme-turva.negative.sc-duet-toolbar-dropdown button.sc-duet-toolbar-dropdown{color:rgb(255, 255, 255)}/*!@.duet-toolbar-dropdown.duet-theme-turva.negative button:hover*/.duet-toolbar-dropdown.duet-theme-turva.negative.sc-duet-toolbar-dropdown button.sc-duet-toolbar-dropdown:hover{color:rgb(255, 255, 255);background:rgba(23, 28, 58, 0.2)}/*!@.duet-toolbar-dropdown.duet-theme-turva.negative button.active*/.duet-toolbar-dropdown.duet-theme-turva.negative.sc-duet-toolbar-dropdown button.active.sc-duet-toolbar-dropdown{font-weight:600;color:rgb(255, 255, 255);background:rgba(23, 28, 58, 0.2)}/*!@.duet-toolbar-dropdown.duet-theme-turva.negative button.open*/.duet-toolbar-dropdown.duet-theme-turva.negative.sc-duet-toolbar-dropdown button.open.sc-duet-toolbar-dropdown{color:rgb(255, 255, 255);background:rgba(23, 28, 58, 0.2)}/*!@.duet-toolbar-dropdown.duet-theme-turva.negative button duet-icon*/.duet-toolbar-dropdown.duet-theme-turva.negative.sc-duet-toolbar-dropdown button.sc-duet-toolbar-dropdown duet-icon.sc-duet-toolbar-dropdown{color:rgb(244, 207, 214)}";
 
 class DuetToolbarDropdown {
   constructor(hostRef) {
@@ -20452,6 +20520,7 @@ class DuetToolbarDropdown {
       this.open = !this.open;
     };
     this.theme = "";
+    this.variation = "default";
     this.accessibleLabel = undefined;
     this.active = false;
     this.open = false;
@@ -20490,10 +20559,12 @@ class DuetToolbarDropdown {
     if (this.element && this.element.parentElement) {
       itemsAlign = this.element.parentElement.getAttribute("slot") === "left" ? "right" : "left";
     }
+    const variation = this.variation === "negative" ? "negative" : "white";
     return (hAsync(Host, null, hAsync("div", { class: {
         "duet-toolbar-dropdown": true,
         "duet-theme-turva": this.theme === "turva",
         [itemsAlign]: true,
+        [variation]: true,
       } }, hAsync("button", { ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, id: "button", type: "button", class: {
         active: this.active,
         open: this.open,
@@ -20509,6 +20580,7 @@ class DuetToolbarDropdown {
     "$tagName$": "duet-toolbar-dropdown",
     "$members$": {
       "theme": [1025],
+      "variation": [1025],
       "accessibleLabel": [1, "accessible-label"],
       "active": [1540],
       "open": [1540],
@@ -20576,12 +20648,13 @@ class DuetToolbarDropdownLink {
   }; }
 }
 
-const duetToolbarLinkCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-toolbar-link,*.sc-duet-toolbar-link::after,*.sc-duet-toolbar-link::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-toolbar-link-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;height:100%}/*!@.duet-toolbar-link*/.duet-toolbar-link.sc-duet-toolbar-link{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;padding:0 16px;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(0, 77, 128);text-align:center;text-decoration:none;white-space:nowrap}/*!@.duet-toolbar-link:focus*/.duet-toolbar-link.sc-duet-toolbar-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-toolbar-link:focus, .duet-toolbar-link:focus.duet-theme-turva*/.duet-theme-turva.sc-duet-toolbar-link .duet-toolbar-link.sc-duet-toolbar-link:focus,.duet-toolbar-link.sc-duet-toolbar-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}/*!@.duet-toolbar-link.duet-theme-turva*/.duet-toolbar-link.duet-theme-turva.sc-duet-toolbar-link{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-toolbar-link:hover*/.duet-toolbar-link.sc-duet-toolbar-link:hover{color:rgb(0, 41, 77);background:rgb(243, 249, 252)}/*!@.duet-toolbar-link:hover.duet-theme-turva*/.duet-toolbar-link.sc-duet-toolbar-link:hover.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(245, 245, 247)}/*!@.duet-toolbar-link.active*/.duet-toolbar-link.active.sc-duet-toolbar-link{color:rgb(0, 41, 77)}/*!@.duet-toolbar-link.active::after*/.duet-toolbar-link.active.sc-duet-toolbar-link::after{position:absolute;top:auto;bottom:1px;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}/*!@.duet-toolbar-link.active::after.duet-theme-turva*/.duet-toolbar-link.active.sc-duet-toolbar-link::after.duet-theme-turva{background:rgb(198, 12, 48)}/*!@.duet-toolbar-link.active.duet-theme-turva*/.duet-toolbar-link.active.duet-theme-turva.sc-duet-toolbar-link{color:rgb(23, 28, 58)}/*!@.duet-toolbar-link.active.duet-theme-turva::after*/.duet-toolbar-link.active.duet-theme-turva.sc-duet-toolbar-link::after{background:rgb(198, 12, 48)}";
+const duetToolbarLinkCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-toolbar-link,*.sc-duet-toolbar-link::after,*.sc-duet-toolbar-link::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-toolbar-link-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;height:100%}/*!@.duet-toolbar-link*/.duet-toolbar-link.sc-duet-toolbar-link{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;padding:0 16px;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(0, 77, 128);text-align:center;text-decoration:none;white-space:nowrap}/*!@.duet-toolbar-link:focus*/.duet-toolbar-link.sc-duet-toolbar-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-toolbar-link:focus, .duet-toolbar-link:focus.duet-theme-turva*/.duet-theme-turva.sc-duet-toolbar-link .duet-toolbar-link.sc-duet-toolbar-link:focus,.duet-toolbar-link.sc-duet-toolbar-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}/*!@.duet-toolbar-link.negative*/.duet-toolbar-link.negative.sc-duet-toolbar-link{color:rgb(255, 255, 255)}/*!@.duet-toolbar-link.negative duet-icon*/.duet-toolbar-link.negative.sc-duet-toolbar-link duet-icon.sc-duet-toolbar-link{color:rgb(205, 229, 241)}/*!@.duet-toolbar-link.duet-theme-turva*/.duet-toolbar-link.duet-theme-turva.sc-duet-toolbar-link{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-toolbar-link.duet-theme-turva.negative*/.duet-toolbar-link.duet-theme-turva.negative.sc-duet-toolbar-link{color:rgb(255, 255, 255)}/*!@.duet-toolbar-link.duet-theme-turva.negative duet-icon*/.duet-toolbar-link.duet-theme-turva.negative.sc-duet-toolbar-link duet-icon.sc-duet-toolbar-link{color:rgb(244, 207, 214)}/*!@.duet-toolbar-link:hover*/.duet-toolbar-link.sc-duet-toolbar-link:hover{color:rgb(0, 41, 77);background:rgb(243, 249, 252)}/*!@.duet-toolbar-link:hover.negative*/.duet-toolbar-link.sc-duet-toolbar-link:hover.negative{color:rgb(255, 255, 255);background:rgba(0, 41, 77, 0.2)}/*!@.duet-toolbar-link:hover.duet-theme-turva*/.duet-toolbar-link.sc-duet-toolbar-link:hover.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(245, 245, 247)}/*!@.duet-toolbar-link:hover.duet-theme-turva.negative*/.duet-toolbar-link.sc-duet-toolbar-link:hover.duet-theme-turva.negative{color:rgb(255, 255, 255);background:rgba(23, 28, 58, 0.2)}/*!@.duet-toolbar-link.active*/.duet-toolbar-link.active.sc-duet-toolbar-link{color:rgb(0, 41, 77)}/*!@.duet-toolbar-link.active.negative*/.duet-toolbar-link.active.negative.sc-duet-toolbar-link{font-weight:600;color:rgb(255, 255, 255);background:rgba(23, 28, 58, 0.2)}/*!@.duet-toolbar-link.active.negative::after*/.duet-toolbar-link.active.negative.sc-duet-toolbar-link::after{display:none}/*!@.duet-toolbar-link.active::after*/.duet-toolbar-link.active.sc-duet-toolbar-link::after{position:absolute;top:auto;bottom:1px;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}/*!@.duet-toolbar-link.active::after.duet-theme-turva*/.duet-toolbar-link.active.sc-duet-toolbar-link::after.duet-theme-turva{background:rgb(198, 12, 48)}/*!@.duet-toolbar-link.active.duet-theme-turva*/.duet-toolbar-link.active.duet-theme-turva.sc-duet-toolbar-link{color:rgb(23, 28, 58)}/*!@.duet-toolbar-link.active.duet-theme-turva::after*/.duet-toolbar-link.active.duet-theme-turva.sc-duet-toolbar-link::after{background:rgb(198, 12, 48)}/*!@.duet-toolbar-link.active.duet-theme-turva.negative*/.duet-toolbar-link.active.duet-theme-turva.negative.sc-duet-toolbar-link{color:rgb(255, 255, 255);background:rgba(23, 28, 58, 0.2)}";
 
 class DuetToolbarLink {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.theme = "";
+    this.variation = "default";
     this.active = false;
     this.href = "#";
     this.icon = undefined;
@@ -20598,7 +20671,13 @@ class DuetToolbarLink {
    * Always the last one in the class.
    */
   render() {
-    return (hAsync(Host, null, hAsync("a", { class: { "duet-toolbar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (hAsync("duet-icon", { size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), hAsync("slot", null))));
+    const variation = this.variation === "negative" ? "negative" : "white";
+    return (hAsync(Host, null, hAsync("a", { class: {
+        "duet-toolbar-link": true,
+        "duet-theme-turva": this.theme === "turva",
+        active: this.active,
+        [variation]: true,
+      }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (hAsync("duet-icon", { size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), hAsync("slot", null))));
   }
   get element() { return getElement(this); }
   static get style() { return duetToolbarLinkCss; }
@@ -20607,6 +20686,7 @@ class DuetToolbarLink {
     "$tagName$": "duet-toolbar-link",
     "$members$": {
       "theme": [1025],
+      "variation": [1025],
       "active": [1028],
       "href": [1025],
       "icon": [1537],
@@ -22469,6 +22549,68 @@ class DuetUploadAriaStatus {
   }; }
 }
 
+const duetFileChooserCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-file-chooser,*.sc-duet-file-chooser::after,*.sc-duet-file-chooser::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@.container*/.container.sc-duet-file-chooser{display:flex;flex-direction:row;gap:8px;align-items:center}/*!@.container .label*/.container.sc-duet-file-chooser .label.sc-duet-file-chooser{margin-bottom:8px}";
+
+class DuetUploadItem$1 {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.duetChange = createEvent$2(this, "duetChange", 3);
+    this.onChange = (ev) => {
+      ev.preventDefault();
+      ev.stopPropagation();
+      this.duetChange.emit({
+        originalEvent: ev,
+        data: { files: this.nativeInput.files },
+        component: "duet-file-chooser",
+      });
+    };
+    this.theme = "";
+    this.multiple = false;
+    this.accept = undefined;
+  }
+  /**
+   * Opens file choose dialog.
+   */
+  async open() {
+    var _a;
+    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.click();
+  }
+  /**
+   * Returns actually selected files in file chooser.
+   */
+  async getFiles() {
+    return this.nativeInput.files;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  render() {
+    return (hAsync(Host, null, hAsync("duet-visually-hidden", { "aria-hidden": "true" }, hAsync("input", { ref: input => {
+        this.nativeInput = input;
+      }, type: "file", class: {
+        "duet-upload": true,
+      }, "aria-hidden": "true", tabIndex: -1, onChange: this.onChange, multiple: this.multiple, accept: this.accept }))));
+  }
+  static get style() { return duetFileChooserCss; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "duet-file-chooser",
+    "$members$": {
+      "theme": [1025],
+      "multiple": [4],
+      "accept": [1],
+      "open": [64],
+      "getFiles": [64]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": []
+  }; }
+}
+
 const formatBytes = (bytes, decimals = 2) => {
   if (bytes === 0) {
     return "0 Bytes";
@@ -22695,6 +22837,7 @@ registerComponents([
   DuetTray,
   DuetUpload,
   DuetUploadAriaStatus,
+  DuetUploadItem$1,
   DuetUploadItem,
   DuetVisuallyHidden,
 ]);