@duetds/components 8.0.4 → 8.0.6

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-6b66b5c3.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-b3bf9761.js';
 import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
 import { c as createID } from './create-id-2b0cd46d.js';
 import { d as debounce } from './js-utils-a35dcc8c.js';

package/lib/esm/duet-popup-menu-item.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6b66b5c3.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b3bf9761.js';
 import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
 
 const duetPopupMenuItemCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:flex;flex-direction:row;gap:0.5rem;align-items:center;justify-content:flex-start}.duet-popup-menu-item{display:flex;flex-grow:1;gap:8px;align-items:center;height:100%;padding:8px 20px;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);text-align:left;text-decoration:none;cursor:pointer}.duet-popup-menu-item:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-popup-menu-item:focus,.duet-popup-menu-item:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-popup-menu-item.active,.duet-popup-menu-item.active:hover{color:rgb(255, 255, 255);background:rgb(0, 119, 179)}.duet-popup-menu-item.active.duet-theme-turva,.duet-popup-menu-item.active:hover.duet-theme-turva{color:rgb(255, 255, 255);background:rgb(198, 12, 48)}.duet-popup-menu-item:hover{background:rgb(230, 242, 248)}.duet-popup-menu-item:hover.duet-theme-turva{background:rgb(228, 228, 230)}.duet-popup-menu-item .duet-popup-menu-item-label{flex-grow:1}";

package/lib/esm/duet-popup-menu.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6b66b5c3.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b3bf9761.js';
 import { c as computePosition, o as offset, f as flip } from './floating-ui.dom.esm-efad5c89.js';
 import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
 import { f as isEscapeKey, c as isArrowDownKey, b as isArrowUpKey, o as isTabKey } from './keyboard-utils-5746e126.js';

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-6b66b5c3.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b3bf9761.js';
 import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
 import { c as createID } from './create-id-2b0cd46d.js';
 import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-9ff76444.js';

package/lib/esm/duet-promo-card.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-6b66b5c3.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b3bf9761.js';
 import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
 import { g as getColorByName } from './token-utils-46c8fe31.js';
 import './tokens.module-c7944140.js';

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6b66b5c3.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b3bf9761.js';
 import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
 import { c as createID } from './create-id-2b0cd46d.js';
 import { f as findCheckedOption, w as watchForOptions } from './watch-options-f189118b.js';
@@ -137,6 +137,8 @@ const DuetRadioGroup = class {
     this.responsive = false;
     this.value = undefined;
     this.disabled = undefined;
+    this.required = false;
+    this.accessibleLiveError = "polite";
   }
   /**
    * Component lifecycle events.
@@ -187,6 +189,7 @@ const DuetRadioGroup = class {
     // 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;
@@ -211,7 +214,7 @@ const DuetRadioGroup = class {
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, { onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, h("duet-fieldset", { label: this.label, labelHidden: this.labelHidden, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme }, this.tooltip && (h("duet-tooltip", { slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("div", { class: { "duet-radio-group": true, "duet-no-stacking": !this.responsive } }, h("slot", null)))));
+    return (h(Host, { onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, h("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 && (h("duet-tooltip", { slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("div", { class: { "duet-radio-group": true, "duet-no-stacking": !this.responsive } }, h("slot", null)))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {

package/lib/esm/duet-range-slider.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6b66b5c3.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b3bf9761.js';
 import { i as colorPrimaryTurva, j as colorGrayTurva, k as colorPrimary, l as colorGray } from './tokens.module-c7944140.js';
 import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
 import { c as createID } from './create-id-2b0cd46d.js';

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-6b66b5c3.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-b3bf9761.js';
 import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
 import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, a as getLanguage } from './language-utils-9ff76444.js';
 import { c as createID } from './create-id-2b0cd46d.js';
@@ -264,7 +264,7 @@ const DuetTabGroup = class {
     };
     this.renderTab = () => {
       const renderedTabs = this.tabs.map((element, index) => {
-        return (h("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 (h("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,
@@ -382,7 +382,6 @@ const DuetTabGroup = class {
     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;

package/lib/esm/duet-section-layout.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-6b66b5c3.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b3bf9761.js';
 import { i as isInternetExplorer } from './is-internet-explorer-032d4dae.js';
 
 const duetSectionLayoutCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;flex:1 0 auto;width:100%}:host(.duet-middle){display:flex}:host(.duet-middle) .duet-layout{padding:36px 28px !important}@media (min-width: 36em){:host(.duet-middle) .duet-layout{padding:48px 36px !important}}@media (min-width: 62em){:host(.duet-middle) .duet-layout{padding:56px !important}}:host(.duet-ie){height:100%}:host(.duet-middle.duet-ie){height:auto}.duet-layout{position:relative;padding:0 16px;margin:48px auto 36px}@media (min-width: 36em){.duet-layout{margin-top:72px}}.duet-layout.duet-m-0{margin-top:0 !important;margin-bottom:0 !important}@media (min-width: 36em){.duet-layout{padding:0 28px}}@media (min-width: 62em){.duet-layout{display:flex;flex-direction:row;padding:0 56px;margin-bottom:48px}}@media (min-width: 76.25em){.duet-layout{max-width:1110px;padding:0}}.duet-main{display:block;width:100%}@media (min-width: 62em){.duet-main{min-width:600px;margin:0 auto}.has-sidebar .duet-main{max-width:734px;margin-right:20px}}";

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6b66b5c3.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b3bf9761.js';
 import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
 import { c as createID } from './create-id-2b0cd46d.js';
 import { p as parsePossibleJSON } from './string-utils-59ad4cb2.js';

package/lib/esm/duet-shaped-image.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host } from './index-6b66b5c3.js';
+import { r as registerInstance, h, H as Host } from './index-b3bf9761.js';
 import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
 
 const duetShapedImageCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline-block;width:100%;height:100%;margin:5%}:host(.duet-theme-turva){margin:3%}:host(.duet-m-0){margin:0}.shaped-image{position:relative;display:inline-block;width:100%;height:100%}.shaped-image .shaped-image-mask{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:25%;transform:rotate(var(--rotation))}.shaped-image .shaped-image-mask .shaped-image-img{position:relative;display:block;width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:cover;transform:scale(1.07) rotate(calc(-1 * var(--rotation)));transform-origin:center}:host(.duet-theme-turva) .shaped-image .shaped-image-mask{transform:none;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E\");-webkit-mask-repeat:no-repeat;mask-image:url(\"data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E\");mask-repeat:no-repeat}:host(.duet-theme-turva) .shaped-image .shaped-image-mask .shaped-image-img{transform:none}";

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6b66b5c3.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b3bf9761.js';
 import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
 import { c as createID } from './create-id-2b0cd46d.js';
 import { i as isKeyboardClick } from './keyboard-utils-5746e126.js';
@@ -69,6 +69,8 @@ const DuetShowMore = class {
     };
     this.showLessAccessibleLabel = getLocaleString(this.showLessAccessibleLabelDefaults);
     this.margin = "auto";
+    this.buttonMargin = "auto";
+    this.buttonPadding = "auto";
     this.open = false;
   }
   /**
@@ -99,7 +101,7 @@ const DuetShowMore = class {
         "duet-theme-turva": this.theme === "turva",
         "duet-m-0": this.margin === "none",
         open: this.open,
-      } }, h("div", { ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "0" : "" }, h("div", { class: { "slotted-content": true } }, h("slot", null))), h("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))));
+      } }, h("div", { ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "0" : "" }, h("div", { class: { "slotted-content": true } }, h("slot", null))), h("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); }
 };

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-6b66b5c3.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b3bf9761.js';
 import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
 import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './language-utils-9ff76444.js';
 import './string-utils-59ad4cb2.js';

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-6b66b5c3.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b3bf9761.js';
 import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
 
 const duetSlideoutLinkCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%}.duet-slideout-link{position:relative;display:flex;gap:20px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 0;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:inherit;font-weight:inherit;line-height:1.25;color:inherit;text-align:left;text-decoration:none}.duet-slideout-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-slideout-link:focus,.duet-slideout-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-link.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-slideout-link.active span{position:relative}.duet-slideout-link.active span::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:var(--active-height, 2px);content:\"\";background:rgb(0, 119, 179);transform:var(--active-translate-y, translateY(2px))}.duet-slideout-link.active.duet-theme-turva span::after{background:rgb(198, 12, 48)}.duet-slideout-link.small{font-size:1rem;font-weight:600}.duet-slideout-link.small span::after{--active-height:1px;--active-translate-y:1px}.duet-slideout-link.medium{font-size:1.25rem;font-weight:600}.duet-slideout-link.large{font-size:1.5rem;font-weight:800}.duet-slideout-link .label{display:flex;gap:0.5rem;align-items:center;justify-content:space-between;width:100%}slot[name=description]::slotted(*){display:block;padding:8px 0 0;font-size:1rem;font-size:1.25;font-weight:400;color:rgb(101, 119, 135)}.duet-theme-turva slot[name=description]::slotted(*){color:rgb(68, 68, 69)}";

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-6b66b5c3.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b3bf9761.js';
 import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
 
 const duetSlideoutPanelDropdownCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%}:host slot:not([name=label])::slotted(*){position:relative;top:-0.5rem;opacity:0;transition:top 0.3s ease-in, opacity 0.3s ease-in}:host([open]) slot:not([name=label])::slotted(*){top:0;opacity:1}.duet-slideout-panel-dropdown{position:relative;width:100%;height:100%}.duet-slideout-panel-dropdown button{position:relative;display:flex;gap:20px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 0;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1.25rem;font-weight:800;line-height:1.25;color:rgb(0, 41, 77);text-align:center;text-decoration:none;cursor:pointer}.duet-slideout-panel-dropdown button .label{position:relative;display:flex;gap:0.5rem;align-items:center;justify-content:center}.duet-slideout-panel-dropdown button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout-panel-dropdown button.active .label::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:calc(100% - 18px);height:1px;content:\"\";background:rgb(0, 119, 179);transform:translateY(1px)}.duet-slideout-panel-dropdown .items{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-height:1000px;padding:4px 20px 8px 44px;overflow-y:auto;visibility:visible;transition:max-height 0.3s ease-in, padding-bottom 0.3s ease-in;-ms-overflow-style:none;scrollbar-width:none}.duet-slideout-panel-dropdown .items::-webkit-scrollbar{display:none}.duet-slideout-panel-dropdown .items.hidden{max-height:0;padding:0;overflow:hidden;visibility:hidden;transition:max-height 0.3s ease-out, padding-bottom 0.3s ease-out}.duet-slideout-panel-dropdown.duet-theme-turva button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-slideout-panel-dropdown.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-panel-dropdown.duet-theme-turva button.active .label::after{background:rgb(198, 12, 48)}slot{--active-height:1px;--active-translate-y:translateY(1px);font-size:1rem;font-weight:400;color:rgb(0, 41, 77)}.duet-theme-turva slot{color:rgb(23, 28, 58)}slot[name=label]{font-size:1rem;font-weight:600}";

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

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-6b66b5c3.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b3bf9761.js';
 import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
-import { F as FocusGuard } from './focus-utils-616b6903.js';
+import { F as FocusGuard } from './focus-utils-74961919.js';
 import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './language-utils-9ff76444.js';
 import { g as getColorByName } from './token-utils-46c8fe31.js';
 import './string-utils-59ad4cb2.js';
@@ -33,11 +33,21 @@ const DuetSlideoutPanel = class {
       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);
       }
@@ -109,7 +119,7 @@ const DuetSlideoutPanel = class {
       } }, h("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 && h("duet-icon", { name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("div", { class: "label" }, h("span", { class: { "label-text": true, [this.labelSize]: true } }, h("slot", { name: "label" })), h("duet-icon", { class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { class: {
+      }, onClick: this.onToggleClick, inert: this.open }, this.icon && h("duet-icon", { name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("div", { class: "label" }, h("span", { class: { "label-text": true, [this.labelSize]: true } }, h("slot", { name: "label" })), h("duet-icon", { class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { class: {
         dialog: true,
         hidden: !this.open,
       }, style: styles }, h(FocusGuard, { moveFocusTo: this.closeButton }), h("div", { class: "top" }, h("button", { ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {

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

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6b66b5c3.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b3bf9761.js';
 import { d as disableBodyScroll, e as enableBodyScroll } from './bodyScrollLock.es6-8dc7cca7.js';
 import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
-import { F as FocusGuard } from './focus-utils-616b6903.js';
+import { F as FocusGuard } from './focus-utils-74961919.js';
 import { f as isEscapeKey } from './keyboard-utils-5746e126.js';
 import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './language-utils-9ff76444.js';
 import { T as Teleport } from './teleport-15747328.js';
@@ -23,6 +23,11 @@ const DuetSlideout = class {
       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) {
@@ -32,6 +37,9 @@ const DuetSlideout = class {
         enableBodyScroll(this.dialog);
       }
     };
+    this.getOpenPanel = () => {
+      return this.element.querySelector("duet-slideout-panel[open]");
+    };
     this.toggleMenu = (e) => {
       this.open = !this.open;
       if (this.openButton) {
@@ -43,7 +51,7 @@ const DuetSlideout = class {
         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();
@@ -70,6 +78,7 @@ const DuetSlideout = class {
     };
     this.language = getLanguage();
     this.displaying = false;
+    this.openPanel = false;
     this.theme = "";
     this.open = false;
     this.opener = undefined;
@@ -143,11 +152,20 @@ const DuetSlideout = class {
   }
   connectedCallback() {
     connectLanguageChangeObserver(this);
+    this.mutationObserver = new MutationObserver(() => {
+      this.openPanel = !!this.getOpenPanel();
+    });
+    this.mutationObserver.observe(this.element, { childList: true, attributeFilter: ["open"], subtree: true });
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
     enableBodyScroll(this.dialog);
-    this.intersectionObserver.disconnect();
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+    }
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+    }
   }
   /**
    * Component event handling.
@@ -175,6 +193,7 @@ const DuetSlideout = class {
     const styles = {
       background: getColorByName(this.backgroundColor, this.theme),
     };
+    const topLevelOpenMenuBarTranslation = getLocaleString(this.topLevelOpenMenuBarLangObject);
     const exitTranslation = getLocaleString(this.exitLangObject);
     return (h(Host, null, h("div", { class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, h("div", { class: {
         "desktop-bg": true,
@@ -187,7 +206,7 @@ const DuetSlideout = class {
       }, style: styles }, h(FocusGuard, { moveFocusTo: this.closeButton }), h("div", { class: "top" }, h("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 }, h("duet-icon", { name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { id: "menubar", role: "menubar", class: {
+      }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { id: "menubar", role: "menubar", "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
         items: true,
       } }, h("slot", null)), h(FocusGuard, { moveFocusTo: this.closeButton })))));
   }

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-6b66b5c3.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-b3bf9761.js';
 import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
 import { c as createID } from './create-id-2b0cd46d.js';
 import { i as isKeyboardClick } from './keyboard-utils-5746e126.js';

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

@@ -1,11 +1,11 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-6b66b5c3.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b3bf9761.js';
 import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
 import { f as isEscapeKey } from './keyboard-utils-5746e126.js';
 
-const duetSubmenuBarDropdownLinkCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%}.duet-submenu-bar-dropdown-link{display:flex;flex-direction:row;gap: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{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-submenu-bar-dropdown-link:focus,.duet-submenu-bar-dropdown-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}@media (min-width: 62em){.duet-submenu-bar-dropdown-link{padding:0.675rem 16px;font-size:0.875rem;text-align:center}}.duet-submenu-bar-dropdown-link.active .label{position:relative}.duet-submenu-bar-dropdown-link.active .label::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transform:1px}.duet-submenu-bar-dropdown-link.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-submenu-bar-dropdown-link.duet-theme-turva.active .label::after{background:rgb(198, 12, 48)}@media (min-width: 62em){.duet-submenu-bar-dropdown-link:hover{color:rgb(0, 77, 128);background:rgb(243, 249, 252)}.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{color:rgb(0, 119, 179)}.duet-submenu-bar-dropdown-link.highlight.duet-theme-turva{color:rgb(148, 9, 37)}";
+const duetSubmenuBarDropdownLinkCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%}.duet-submenu-bar-dropdown-link{display:flex;flex-direction:row;gap: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{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-submenu-bar-dropdown-link:focus,.duet-submenu-bar-dropdown-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}@media (min-width: 62em){.duet-submenu-bar-dropdown-link{padding:0.675rem 16px;font-size:0.875rem}}.duet-submenu-bar-dropdown-link.active .label{position:relative}.duet-submenu-bar-dropdown-link.active .label::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transform:1px}.duet-submenu-bar-dropdown-link.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-submenu-bar-dropdown-link.duet-theme-turva.active .label::after{background:rgb(198, 12, 48)}@media (min-width: 62em){.duet-submenu-bar-dropdown-link:hover{color:rgb(0, 77, 128);background:rgb(243, 249, 252)}.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{color:rgb(0, 119, 179)}.duet-submenu-bar-dropdown-link.highlight.duet-theme-turva{color:rgb(148, 9, 37)}";
 
 const DuetSubmenuBarDropdownLink = class {
   constructor(hostRef) {

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

@@ -1,12 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-6b66b5c3.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b3bf9761.js';
 import { a as media_query_large } from './tokens-e6b6db9b.js';
 import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
 import { f as isEscapeKey } from './keyboard-utils-5746e126.js';
 
-const duetSubmenuBarDropdownCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%}@media (min-width: 62em){:host{width:auto}}.duet-submenu-bar-dropdown{position:relative;height:100%}.duet-submenu-bar-dropdown button{position:relative;display:flex;flex-direction:row;gap:16px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:12px 1.5rem;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.25;color:rgb(0, 41, 77);text-align:center;text-decoration:none;cursor:pointer}@media (min-width: 62em){.duet-submenu-bar-dropdown button{flex-direction:column;gap:5px;align-items:center;justify-content:center;width:auto;font-size:0.875rem;color:rgb(0, 77, 128)}}.duet-submenu-bar-dropdown button .label{display:flex;gap:5px;align-items:center;justify-content:center}@media (min-width: 62em){.duet-submenu-bar-dropdown button.open{background:rgb(230, 242, 248)}}.duet-submenu-bar-dropdown button.open .caret{transform:rotate(180deg)}.duet-submenu-bar-dropdown button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-submenu-bar-dropdown button.active .label-text{position:relative}.duet-submenu-bar-dropdown button.active .label-text::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transform:1px}@media (min-width: 62em){.duet-submenu-bar-dropdown button.active .label-text::after{display:none}}@media (min-width: 62em){.duet-submenu-bar-dropdown button .caret{position:absolute;right:12px}.duet-submenu-bar-dropdown button:hover{color:rgb(0, 41, 77);background:rgb(230, 242, 248)}.duet-submenu-bar-dropdown button:hover.active{color:rgb(0, 41, 77)}.duet-theme-turva .duet-submenu-bar-dropdown button:hover.active{color:rgb(23, 28, 58)}.duet-submenu-bar-dropdown button.active{color:rgb(0, 119, 179)}.duet-theme-turva .duet-submenu-bar-dropdown button.active{color:rgb(198, 12, 48)}.duet-submenu-bar-dropdown button.active::after,.duet-submenu-bar-dropdown button.open::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}.duet-theme-turva .duet-submenu-bar-dropdown button.active::after,.duet-theme-turva .duet-submenu-bar-dropdown button.open::after{background:rgb(198, 12, 48)}}.duet-submenu-bar-dropdown .items{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{display:none}@media (min-width: 62em){.duet-submenu-bar-dropdown .items{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{max-height:0;padding:0;overflow:hidden;visibility:hidden;transition:max-height 0.3s ease-in, padding 0.3s ease-in}.duet-submenu-bar-dropdown.duet-theme-turva button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva button:hover{background:rgb(228, 228, 230)}}.duet-submenu-bar-dropdown.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-submenu-bar-dropdown.duet-theme-turva button.active .label-text::after,.duet-submenu-bar-dropdown.duet-theme-turva button.open .label-text::after{background:rgb(198, 12, 48)}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva button.active,.duet-submenu-bar-dropdown.duet-theme-turva button.open{color:rgb(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{background:rgb(148, 9, 37)}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva .items{background:rgb(255, 255, 255)}}";
+const duetSubmenuBarDropdownCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%}@media (min-width: 62em){:host{width:auto}}.duet-submenu-bar-dropdown{position:relative;height:100%}.duet-submenu-bar-dropdown button{position:relative;display:flex;flex-direction:row;gap:16px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:12px 1.5rem;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.25;color:rgb(0, 41, 77);text-align:center;text-decoration:none;cursor:pointer}@media (min-width: 62em){.duet-submenu-bar-dropdown button{flex-direction:column;gap:5px;align-items:center;justify-content:center;width:auto;font-size:0.875rem;color:rgb(0, 77, 128)}}.duet-submenu-bar-dropdown button .label{display:flex;gap:5px;align-items:center;justify-content:center}@media (min-width: 62em){.duet-submenu-bar-dropdown button.open{background:rgb(230, 242, 248)}}.duet-submenu-bar-dropdown button.open .caret{transform:rotate(180deg)}.duet-submenu-bar-dropdown button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-submenu-bar-dropdown button.active .label-text{position:relative}.duet-submenu-bar-dropdown button.active .label-text::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transform:1px}@media (min-width: 62em){.duet-submenu-bar-dropdown button.active .label-text::after{display:none}}@media (min-width: 62em){.duet-submenu-bar-dropdown button .caret{position:absolute;right:12px}.duet-submenu-bar-dropdown button:hover{color:rgb(0, 41, 77);background:rgb(230, 242, 248)}.duet-submenu-bar-dropdown button:hover.active{color:rgb(0, 41, 77)}.duet-theme-turva .duet-submenu-bar-dropdown button:hover.active{color:rgb(23, 28, 58)}.duet-submenu-bar-dropdown button.active{color:rgb(0, 119, 179)}.duet-theme-turva .duet-submenu-bar-dropdown button.active{color:rgb(198, 12, 48)}.duet-submenu-bar-dropdown button.active::after,.duet-submenu-bar-dropdown button.open::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}.duet-theme-turva .duet-submenu-bar-dropdown button.active::after,.duet-theme-turva .duet-submenu-bar-dropdown button.open::after{background:rgb(198, 12, 48)}}.duet-submenu-bar-dropdown .items{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{display:none}@media (min-width: 62em){.duet-submenu-bar-dropdown .items{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{max-height:0;padding:0;overflow:hidden;visibility:hidden;transition:max-height 0.3s ease-in, padding 0.3s ease-in}.duet-submenu-bar-dropdown.duet-theme-turva button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva button:hover{background:rgb(228, 228, 230)}}.duet-submenu-bar-dropdown.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-submenu-bar-dropdown.duet-theme-turva button.active .label-text::after,.duet-submenu-bar-dropdown.duet-theme-turva button.open .label-text::after{background:rgb(198, 12, 48)}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva button.active,.duet-submenu-bar-dropdown.duet-theme-turva button.open{color:rgb(148, 9, 37)}}.duet-submenu-bar-dropdown.duet-theme-turva button.active::after,.duet-submenu-bar-dropdown.duet-theme-turva button.open::after{background:rgb(148, 9, 37)}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva button.open{background:rgb(228, 228, 230)}}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva .items{background:rgb(255, 255, 255)}}";
 
 const DuetSubmenuBarDropdown = class {
   constructor(hostRef) {

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-6b66b5c3.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b3bf9761.js';
 import { a as media_query_large } from './tokens-e6b6db9b.js';
 import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
 import { f as isEscapeKey } from './keyboard-utils-5746e126.js';

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

@@ -1,12 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-6b66b5c3.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b3bf9761.js';
 import { a as media_query_large } from './tokens-e6b6db9b.js';
 import { e as enableBodyScroll, d as disableBodyScroll } from './bodyScrollLock.es6-8dc7cca7.js';
 import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
 
-const duetSubmenuBarCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%}:host(:not([open])) ::slotted(duet-submenu-bar-dropdown){display:none}@media (min-width: 62em){:host(:not([open])) ::slotted(duet-submenu-bar-dropdown){display:inherit}}.duet-submenu-bar{position:relative;background:rgb(243, 249, 252)}.duet-submenu-bar .shadow-container{position:absolute;width:100%;height:100%;overflow:hidden}.duet-submenu-bar .shadow-container .top-shadow{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{top:-80px;height:80px;box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1)}}@media (min-width: 62em){.duet-submenu-bar{border-bottom:1px solid rgb(205, 229, 241)}}.duet-submenu-bar button{display:flex;align-items:center;justify-content:center;width:100%;padding:12px 0;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:400;line-height:1.25;color:rgb(0, 41, 77)}.duet-submenu-bar button.active .caret{transform:rotate(180deg)}.duet-submenu-bar button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-submenu-bar button .label{position:relative;display:flex;gap:8px;align-items:center;justify-content:center}@media (min-width: 62em){.duet-submenu-bar button{display:none}}.duet-submenu-bar .menu-container{position:absolute;z-index:399;width:100%}.duet-submenu-bar .menu-container.hidden{max-height:0;overflow:hidden;visibility:hidden}@media (min-width: 62em){.duet-submenu-bar .menu-container,.duet-submenu-bar .menu-container.hidden{position:static;z-index:auto;max-height:unset;overflow:visible;visibility:visible}}.duet-submenu-bar .items{width:100%;height:70vh;overflow-y:scroll;visibility:visible;background:rgb(243, 249, 252);border-bottom:1px solid rgb(207, 210, 212)}.duet-submenu-bar .items ::slotted(*){position:relative}.duet-submenu-bar .items.hidden{max-height:0;overflow:hidden;visibility:hidden;border-bottom:0 solid rgb(207, 210, 212)}.duet-submenu-bar .items .list-padding{padding-bottom:188px}@media (min-width: 62em){.duet-submenu-bar .items .list{display:flex;align-items:center;justify-content:space-between;height:100%}.duet-submenu-bar .items,.duet-submenu-bar .items.hidden{position:static;z-index:auto;display:flex;flex-direction:row;align-items:center;justify-content:center;height:auto;max-height:unset;overflow:visible;visibility:visible;border:0}.duet-submenu-bar .items .list-padding{display:none;padding-bottom:0}}.duet-submenu-bar .mobile-background{position:absolute;width:100%;height:100%;background:rgba(0, 41, 77, 0.6)}@media (min-width: 62em){.duet-submenu-bar .mobile-background{display:none}}.duet-submenu-bar.duet-theme-turva{background:rgb(245, 245, 247);border-bottom:1px solid rgb(228, 228, 230)}.duet-submenu-bar.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-submenu-bar.duet-theme-turva .items{background:rgb(245, 245, 247)}.duet-submenu-bar.duet-theme-turva .mobile-background{background:rgba(23, 28, 58, 0.6)}.duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow{box-shadow:0 2px 6px 0 rgba(23, 28, 58, 0.07)}@media (min-width: 62em){.duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1)}}";
+const duetSubmenuBarCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%}:host(:not([open])) ::slotted(duet-submenu-bar-dropdown){display:none}@media (min-width: 62em){:host(:not([open])) ::slotted(duet-submenu-bar-dropdown){display:inherit}}.duet-submenu-bar{position:relative;background:rgb(243, 249, 252)}@media (min-width: 62em){.duet-submenu-bar{border-bottom:1px solid rgb(205, 229, 241)}}.duet-submenu-bar button{display:flex;align-items:center;justify-content:center;width:100%;padding:12px 0;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:400;line-height:1.25;color:rgb(0, 41, 77)}.duet-submenu-bar button.active .caret{transform:rotate(180deg)}.duet-submenu-bar button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-submenu-bar button .label{position:relative;display:flex;gap:8px;align-items:center;justify-content:center}@media (min-width: 62em){.duet-submenu-bar button{display:none}}.duet-submenu-bar .menu-container{position:absolute;z-index:399;width:100%}.duet-submenu-bar .menu-container.hidden{max-height:0;overflow:hidden;visibility:hidden}@media (min-width: 62em){.duet-submenu-bar .menu-container,.duet-submenu-bar .menu-container.hidden{position:static;z-index:auto;max-height:unset;overflow:visible;visibility:visible}}.duet-submenu-bar .items{width:100%;height:70vh;overflow-y:scroll;visibility:visible;background:rgb(243, 249, 252);border-bottom:1px solid rgb(207, 210, 212)}.duet-submenu-bar .items ::slotted(*){position:relative}.duet-submenu-bar .items.hidden{max-height:0;overflow:hidden;visibility:hidden;border-bottom:0 solid rgb(207, 210, 212)}.duet-submenu-bar .items .list-padding{padding-bottom:188px}@media (min-width: 62em){.duet-submenu-bar .items .list{display:flex;align-items:center;justify-content:space-between;height:100%}.duet-submenu-bar .items,.duet-submenu-bar .items.hidden{position:static;z-index:auto;display:flex;flex-direction:row;align-items:center;justify-content:center;height:auto;max-height:unset;overflow:visible;visibility:visible;border:0}.duet-submenu-bar .items .list-padding{display:none;padding-bottom:0}}.duet-submenu-bar .mobile-background{position:absolute;width:100%;height:100%;background:rgba(0, 41, 77, 0.6)}@media (min-width: 62em){.duet-submenu-bar .mobile-background{display:none}}.duet-submenu-bar.duet-theme-turva{background:rgb(245, 245, 247);border-bottom:1px solid rgb(228, 228, 230)}.duet-submenu-bar.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-submenu-bar.duet-theme-turva .items{background:rgb(245, 245, 247)}.duet-submenu-bar.duet-theme-turva .mobile-background{background:rgba(23, 28, 58, 0.6)}.duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow{box-shadow:0 2px 6px 0 rgba(23, 28, 58, 0.07)}@media (min-width: 62em){.duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1)}}";
 
 const DuetSubmenuBar = class {
   constructor(hostRef) {
@@ -110,7 +110,7 @@ const DuetSubmenuBar = class {
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, null, h("nav", { class: { "duet-submenu-bar": true, "duet-theme-turva": this.theme === "turva" }, "aria-label": this.accessibleLabel }, h("div", { class: "shadow-container", role: "presentation" }, h("div", { class: "top-shadow" })), this.hasItems && (h("button", { ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+    return (h(Host, null, h("nav", { class: { "duet-submenu-bar": true, "duet-theme-turva": this.theme === "turva" }, "aria-label": this.accessibleLabel }, this.hasItems && (h("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 }, h("div", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { class: {
         "menu-container": true,

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6b66b5c3.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b3bf9761.js';
 import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
 import { c as createID } from './create-id-2b0cd46d.js';
 import { c as cleanValue } from './input-utils-a0225b92.js';
@@ -123,7 +123,7 @@ const DuetTextarea = class {
     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.

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6b66b5c3.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b3bf9761.js';
 import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
 import { c as createID } from './create-id-2b0cd46d.js';
 

package/lib/esm/duet-toolbar-dropdown-link.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-6b66b5c3.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b3bf9761.js';
 import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
 import { f as isEscapeKey } from './keyboard-utils-5746e126.js';
 

package/lib/esm/duet-toolbar-dropdown.entry.js

@@ -1,11 +1,11 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-6b66b5c3.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b3bf9761.js';
 import { i as inheritGlobalTheme } from './themeable-component-fdce4fd7.js';
 import { f as isEscapeKey } from './keyboard-utils-5746e126.js';
 
-const duetToolbarDropdownCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;height:100%}.duet-toolbar-dropdown{position:relative;height:100%}.duet-toolbar-dropdown button{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{display:flex;gap:0.5rem;align-items:center;justify-content:center}.duet-toolbar-dropdown button:hover{color:rgb(0, 41, 77);background:rgb(243, 249, 252)}.duet-toolbar-dropdown button.open .caret{transform:rotate(180deg)}.duet-toolbar-dropdown button: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{color:rgb(0, 41, 77)}.duet-toolbar-dropdown button.active::after,.duet-toolbar-dropdown button.open::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{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{display:none}.duet-toolbar-dropdown.right .items{right:auto;left:0%}.duet-toolbar-dropdown.duet-theme-turva button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-toolbar-dropdown.duet-theme-turva button:hover{color:rgb(23, 28, 58);background:rgb(245, 245, 247)}.duet-toolbar-dropdown.duet-theme-turva button: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{color:rgb(23, 28, 58)}.duet-toolbar-dropdown.duet-theme-turva button.active::after,.duet-toolbar-dropdown.duet-theme-turva button.open::after{background:rgb(198, 12, 48)}.duet-toolbar-dropdown.duet-theme-turva .items{background:rgb(245, 245, 247)}";
+const duetToolbarDropdownCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;height:100%}.duet-toolbar-dropdown{position:relative;height:100%}.duet-toolbar-dropdown button{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{display:flex;gap:0.5rem;align-items:center;justify-content:center}.duet-toolbar-dropdown button:hover{color:rgb(0, 41, 77);background:rgb(243, 249, 252)}.duet-toolbar-dropdown button.open .caret{transform:rotate(180deg)}.duet-toolbar-dropdown button: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{color:rgb(0, 41, 77)}.duet-toolbar-dropdown button.active::after,.duet-toolbar-dropdown button.open::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{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{display:none}.duet-toolbar-dropdown.right .items{right:auto;left:0%}.duet-toolbar-dropdown.duet-theme-turva button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-toolbar-dropdown.duet-theme-turva button:hover{color:rgb(23, 28, 58);background:rgb(245, 245, 247)}.duet-toolbar-dropdown.duet-theme-turva button: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{color:rgb(23, 28, 58)}.duet-toolbar-dropdown.duet-theme-turva button.active::after,.duet-toolbar-dropdown.duet-theme-turva button.open::after{background:rgb(198, 12, 48)}.duet-toolbar-dropdown.duet-theme-turva .items{background:rgb(245, 245, 247)}.duet-toolbar-dropdown.negative button{color:rgb(255, 255, 255)}.duet-toolbar-dropdown.negative button:hover{color:rgb(255, 255, 255);background:rgba(0, 41, 77, 0.2)}.duet-toolbar-dropdown.negative button.active{font-weight:600;color:rgb(255, 255, 255);background:rgba(0, 41, 77, 0.2)}.duet-toolbar-dropdown.negative button.open{color:rgb(255, 255, 255);background:rgba(0, 41, 77, 0.2)}.duet-toolbar-dropdown.negative button duet-icon{color:rgb(205, 229, 241)}.duet-toolbar-dropdown.duet-theme-turva.negative button{color:rgb(255, 255, 255)}.duet-toolbar-dropdown.duet-theme-turva.negative button:hover{color:rgb(255, 255, 255);background:rgba(23, 28, 58, 0.2)}.duet-toolbar-dropdown.duet-theme-turva.negative button.active{font-weight:600;color:rgb(255, 255, 255);background:rgba(23, 28, 58, 0.2)}.duet-toolbar-dropdown.duet-theme-turva.negative button.open{color:rgb(255, 255, 255);background:rgba(23, 28, 58, 0.2)}.duet-toolbar-dropdown.duet-theme-turva.negative button duet-icon{color:rgb(244, 207, 214)}";
 
 const DuetToolbarDropdown = class {
   constructor(hostRef) {
@@ -14,6 +14,7 @@ const DuetToolbarDropdown = class {
       this.open = !this.open;
     };
     this.theme = "";
+    this.variation = "default";
     this.accessibleLabel = undefined;
     this.active = false;
     this.open = false;
@@ -52,10 +53,12 @@ const DuetToolbarDropdown = class {
     if (this.element && this.element.parentElement) {
       itemsAlign = this.element.parentElement.getAttribute("slot") === "left" ? "right" : "left";
     }
+    const variation = this.variation === "negative" ? "negative" : "white";
     return (h(Host, null, h("div", { class: {
         "duet-toolbar-dropdown": true,
         "duet-theme-turva": this.theme === "turva",
         [itemsAlign]: true,
+        [variation]: true,
       } }, h("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,