@duetds/components 8.4.4 → 8.4.6

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-3c6b5eb8.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-16313fd4.js';
 import { i as inheritGlobalTheme } from './themeable-component-724c0f7e.js';
 import { c as createID } from './create-id-149a1b6d.js';
 import { c as checkNamedSlotElement } from './slot-utils-3c3ab3d6.js';

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-3c6b5eb8.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-16313fd4.js';
 import { i as colorPrimaryTurva, j as colorGrayTurva, k as colorPrimary, l as colorGray } from './tokens.module-3547915d.js';
 import { i as inheritGlobalTheme } from './themeable-component-724c0f7e.js';
 import { c as createID } from './create-id-149a1b6d.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-3c6b5eb8.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-16313fd4.js';
 import { i as inheritGlobalTheme } from './themeable-component-724c0f7e.js';
 import { s as subscribeTabbingChange, u as unsubscribeTabbingChange, o as isTabKey, p as isShiftTabKey, d as isArrowLeftKey, b as isArrowUpKey, a as isArrowRightKey, c as isArrowDownKey } from './keyboard-utils-0708be80.js';
 import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, a as getLanguage } from './language-utils-00ca4c55.js';
@@ -10,7 +10,7 @@ import { c as createID } from './create-id-149a1b6d.js';
 import './string-utils-ca039233.js';
 import './tokens.module-3547915d.js';
 
-const duetScrollableCss = "*,*::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;-webkit-tap-highlight-color:transparent}:host{position:relative !important}:host .duet-scrollable-items{display:flex}:host .duet-scrollable-items .duet-scrollable-button{position:relative;flex:0 0 auto;flex-basis:40px;padding:10px;cursor:pointer}:host .duet-scrollable-items .duet-scrollable-button:active{transform:scale(0.8)}:host .duet-scrollable-items .duet-scrollable-button--left{left:-12px}:host .duet-scrollable-items .duet-scrollable-button--right{right:-12px}:host .duet-scrollable-items .duet-scrollable-button--occluded{visibility:hidden}:host .duet-scrollable-items .duet-scrollable-list{display:flex;flex-wrap:nowrap;gap:20px;padding-top:2px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-margin:0 20px;-ms-overflow-style:-ms-autohiding-scrollbar;-webkit-overflow-scrolling:touch;}:host .duet-scrollable-items .duet-scrollable-list:not(.buttons){white-space:normal}:host .duet-scrollable-items .duet-scrollable-list::-webkit-scrollbar{display:none}:host .duet-scrollable-items .duet-scrollable-list.collapsed{flex-wrap:wrap}:host .duet-scrollable-items.center{justify-content:center}:host .duet-scrollable-items.center .duet-scrollable-list.collapsed{justify-content:center}.collapse{width:100%;text-align:center}.collapse.hide{visibility:hidden}::slotted(*){scroll-snap-align:center;margin-left:0;-webkit-transition:-webkit-transform 0.2s ease-in-out;transition:-webkit-transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out}";
+const duetScrollableCss = "*,*::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;-webkit-tap-highlight-color:transparent}:host{position:relative !important}:host .duet-scrollable-items{display:flex}:host .duet-scrollable-items .duet-scrollable-button{position:relative;flex:0 0 auto;flex-basis:40px;padding:10px;cursor:pointer;transition:all 300ms ease}:host .duet-scrollable-items .duet-scrollable-button:active{transform:scale(0.8)}:host .duet-scrollable-items .duet-scrollable-button--left{left:-12px}:host .duet-scrollable-items .duet-scrollable-button--right{right:-12px}:host .duet-scrollable-items .duet-scrollable-button--top{align-self:flex-start}:host .duet-scrollable-items .duet-scrollable-button--bottom{align-self:flex-end}:host .duet-scrollable-items .duet-scrollable-button--occluded{flex-basis:0;flex-shrink:1;width:0;padding:10px 0;overflow:hidden;visibility:hidden}:host .duet-scrollable-items .duet-scrollable-list{display:flex;flex-wrap:nowrap;gap:20px;padding-top:2px;padding-right:5px;padding-left:5px;margin:0 -5px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-margin:0 20px;-ms-overflow-style:-ms-autohiding-scrollbar;-webkit-overflow-scrolling:touch;}:host .duet-scrollable-items .duet-scrollable-list:not(.buttons){white-space:normal}:host .duet-scrollable-items .duet-scrollable-list::-webkit-scrollbar{display:none}:host .duet-scrollable-items .duet-scrollable-list.collapsed{flex-wrap:wrap}:host .duet-scrollable-items.center{justify-content:center}:host .duet-scrollable-items.center .duet-scrollable-list.collapsed{justify-content:center}.collapse{width:100%;text-align:center}.collapse.hide{visibility:hidden}::slotted(*){flex-shrink:0;margin-left:0;-webkit-transition:-webkit-transform 0.2s ease-in-out;transition:-webkit-transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;scroll-snap-align:center}";
 
 const DuetScrollable = class {
     constructor(hostRef) {
@@ -19,8 +19,7 @@ const DuetScrollable = class {
          * Private variables and constants index
          */
         this.currentIndex = 0;
-        this.tabListElement = undefined;
-        this.tabListClass = "duet-scrollable-list";
+        this.scrollPaneElement = undefined;
         this.hasCollapseButtonLabelSlot = false;
         this.resizeObserver = new ResizeObserver(entries => {
             var _a, _b, _c, _d;
@@ -29,25 +28,26 @@ const DuetScrollable = class {
                 const currentWidth = (_b = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
                 const scrollWidth = (_d = (_c = entries[0]) === null || _c === void 0 ? void 0 : _c.target) === null || _d === void 0 ? void 0 : _d.scrollWidth;
                 // in order to avoid state "jumping" on the boundary condition we add a few pixels to the comparison
-                this.isTabContentSmallerThanWrapper = scrollWidth > currentWidth + 5;
+                this.isScrollPaneContentSmallerThanWrapper = scrollWidth > currentWidth + 5;
             }
         });
         this.collapsedOnClick = () => {
             this.collapsed = !this.collapsed;
         };
-        this.tablistAtStart = true;
-        this.isTabContentSmallerThanWrapper = false;
-        this.tablistAtEnd = false;
+        this.scrollPaneAtStart = true;
+        this.isScrollPaneContentSmallerThanWrapper = true;
+        this.scrollPaneAtEnd = false;
         this.childrenData = {};
         this.theme = "";
         this.identifier = "";
         this.collapsed = false;
         this.buttons = true;
+        this.buttonAlignment = "center";
         this.center = false;
         this.selected = 0;
     }
     watchPropHandler(newValue) {
-        this.scrollToTab(newValue, "center");
+        this.scrollToElement(newValue, "center");
     }
     /**
      * Component lifecycle events.
@@ -55,11 +55,9 @@ const DuetScrollable = class {
     componentWillLoad() {
         inheritGlobalTheme(this);
         this.hasCollapseButtonLabelSlot = !!this.element.querySelector(":scope > [slot='collapse-button-label']");
-        const slotted = this.element.querySelectorAll(":scope > :not([slot='collapse-button-label'])");
-        this.childrenData = { hasChildren: slotted && slotted.length > 0, numberOfChildren: slotted && slotted.length };
     }
     componentDidLoad() {
-        this.resizeObserver.observe(this.tabListElement);
+        this.resizeObserver.observe(this.scrollPaneElement);
     }
     disconnectedCallback() {
         this.resizeObserver.disconnect();
@@ -67,55 +65,56 @@ const DuetScrollable = class {
     /**
      * Private methods.
      */
+    getScrollPaneElemnets() {
+        return Array.from(this.element.querySelectorAll(":scope > :not([slot='collapse-button-label'])"));
+    }
     getLastVisibleElement() {
-        const clientWidth = this.tabListElement.clientWidth;
-        const xValues = Array.from(this.element.querySelectorAll("button")).findIndex(element => element.getBoundingClientRect().x > clientWidth);
-        return xValues;
+        const clientWidth = this.scrollPaneElement.clientWidth;
+        const elementIndex = this.getScrollPaneElemnets().findIndex(el => el.getBoundingClientRect().x > clientWidth);
+        return elementIndex;
     }
     getFirstVisibleElement() {
-        const buttonCollection = this.element.querySelectorAll("button");
-        // reverse the array because we want the first invisible element form the middle, not the first in the list
-        const arrayOfXValues = Array.from(buttonCollection).map(el => el.getBoundingClientRect().x - el.getBoundingClientRect().width);
-        const xValues = arrayOfXValues.findIndex(element => {
-            return element > 0;
+        const arrayOfXValues = this.getScrollPaneElemnets().map(el => el.getBoundingClientRect().x - el.getBoundingClientRect().width);
+        const elementIndex = arrayOfXValues.findIndex(xValue => {
+            return xValue > 0;
         });
-        return xValues;
+        return elementIndex;
     }
-    updateScrollButtons(container = this.tabListElement) {
+    updateScrollButtons(container = this.scrollPaneElement) {
         if (!this.buttons) {
             return;
         }
         if (container.scrollLeft <= 0) {
-            this.tablistAtStart = true;
+            this.scrollPaneAtStart = true;
         }
         else if (container.scrollLeft > 0) {
-            this.tablistAtStart = false;
+            this.scrollPaneAtStart = false;
         }
         if (container.clientWidth + container.scrollLeft + 10 >= container.scrollWidth) {
-            this.tablistAtEnd = true;
+            this.scrollPaneAtEnd = true;
         }
         else if (container.clientWidth + container.scrollLeft + 10 < container.scrollWidth) {
-            this.tablistAtEnd = false;
+            this.scrollPaneAtEnd = false;
         }
     }
-    scrollToTab(index = this.currentIndex, inline) {
-        if (!this.childrenData.hasChildren) {
+    scrollToElement(index = this.currentIndex, inline) {
+        const elements = this.getScrollPaneElemnets();
+        if (!elements || elements.length === 0) {
             return;
         }
-        if (index + 1 >= this.childrenData.numberOfChildren) {
-            index = this.childrenData.numberOfChildren - 1;
+        if (index + 1 >= elements.length) {
+            index = elements.length - 1;
         }
         if (index < 0) {
             index = 0;
         }
-        const buttons = this.element.querySelectorAll("button");
         // store previous position
-        let prevPosition = buttons[0].getBoundingClientRect().x;
+        let prevPosition = elements[0].getBoundingClientRect().x;
         // iterations to run
         let ticksWhereScrollDidNotHappen = 5;
         const getAnimationFrame = () => {
             // if we get the same value enter the logic loop
-            if (buttons[0].getBoundingClientRect().x === prevPosition) {
+            if (elements[0].getBoundingClientRect().x === prevPosition) {
                 ticksWhereScrollDidNotHappen--;
                 // When iteration is not complete run the calculation again
                 if (ticksWhereScrollDidNotHappen !== 0) {
@@ -126,21 +125,21 @@ const DuetScrollable = class {
             }
             else {
                 window.requestAnimationFrame(getAnimationFrame);
-                prevPosition = buttons[0].getBoundingClientRect().x;
+                prevPosition = elements[0].getBoundingClientRect().x;
             }
         };
-        buttons[index].scrollIntoView({ behavior: "smooth", inline });
+        elements[index].scrollIntoView({ behavior: "smooth", inline });
         window.requestAnimationFrame(getAnimationFrame);
     }
     scrollLeft() {
-        this.tablistAtEnd = false;
+        this.scrollPaneAtEnd = false;
         const first = this.getFirstVisibleElement() - 1;
-        this.scrollToTab(first, "center");
+        this.scrollToElement(first, "center");
     }
     scrollRight() {
-        this.tablistAtStart = false;
+        this.scrollPaneAtStart = false;
         const last = this.getLastVisibleElement() + 1;
-        this.scrollToTab(last, "center");
+        this.scrollToElement(last, "center");
     }
     /**
      * render() function
@@ -152,23 +151,25 @@ const DuetScrollable = class {
                 "duet-theme-default": this.theme === "default",
             } }, this.hasCollapseButtonLabelSlot && (h("div", { class: {
                 collapse: true,
-                hide: !this.isTabContentSmallerThanWrapper && !this.collapsed,
+                hide: !this.isScrollPaneContentSmallerThanWrapper && !this.collapsed,
             } }, h("duet-button", { variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { name: "collapse-button-label" })))), h("div", { class: {
                 "duet-scrollable-items": true,
                 buttons: this.buttons,
                 center: this.center,
             } }, h("button", { part: `${this.identifier}-button-left`, "aria-hidden": "true", class: {
                 "duet-scrollable-button": true,
+                [`duet-scrollable-button--${this.buttonAlignment}`]: true,
                 "duet-scrollable-button--left": true,
-                "duet-scrollable-button--occluded": !this.isTabContentSmallerThanWrapper,
-            }, onClick: () => this.scrollLeft(), disabled: this.tablistAtStart, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { name: "action-arrow-left-small", size: "small", margin: "none" })), h("div", { class: {
-                [this.tabListClass]: true,
+                "duet-scrollable-button--occluded": !this.isScrollPaneContentSmallerThanWrapper,
+            }, onClick: () => this.scrollLeft(), disabled: this.scrollPaneAtStart, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { name: "action-arrow-left-small", size: "small", margin: "none" })), h("div", { class: {
+                "duet-scrollable-list": true,
                 collapsed: this.collapsed,
-            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.tabListElement = element) }, h("slot", null)), h("button", { part: `${this.identifier}-button-right`, "aria-hidden": "true", class: {
+            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", null)), h("button", { part: `${this.identifier}-button-right`, "aria-hidden": "true", class: {
                 "duet-scrollable-button": true,
+                [`duet-scrollable-button--${this.buttonAlignment}`]: true,
                 "duet-scrollable-button--right": true,
-                "duet-scrollable-button--occluded": !this.isTabContentSmallerThanWrapper,
-            }, onClick: () => this.scrollRight(), disabled: this.tablistAtEnd, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { name: "action-arrow-right-small", size: "small", margin: "none" })))));
+                "duet-scrollable-button--occluded": !this.isScrollPaneContentSmallerThanWrapper,
+            }, onClick: () => this.scrollRight(), disabled: this.scrollPaneAtEnd, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { name: "action-arrow-right-small", size: "small", margin: "none" })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

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-3c6b5eb8.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-16313fd4.js';
 import { i as isInternetExplorer } from './is-internet-explorer-2c48f686.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-3c6b5eb8.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-16313fd4.js';
 import { i as inheritGlobalTheme } from './themeable-component-724c0f7e.js';
 import { c as createID } from './create-id-149a1b6d.js';
 import { c as checkNamedSlotElement } from './slot-utils-3c3ab3d6.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-3c6b5eb8.js';
+import { r as registerInstance, h, H as Host } from './index-16313fd4.js';
 import { i as inheritGlobalTheme } from './themeable-component-724c0f7e.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-3c6b5eb8.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-16313fd4.js';
 import { i as inheritGlobalTheme } from './themeable-component-724c0f7e.js';
 import { c as createID } from './create-id-149a1b6d.js';
 import { i as isKeyboardClick } from './keyboard-utils-0708be80.js';

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-3c6b5eb8.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-16313fd4.js';
 import { i as inheritGlobalTheme } from './themeable-component-724c0f7e.js';
 import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './language-utils-00ca4c55.js';
 import './string-utils-ca039233.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-3c6b5eb8.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-16313fd4.js';
 import { i as inheritGlobalTheme } from './themeable-component-724c0f7e.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-3c6b5eb8.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-16313fd4.js';
 import { i as inheritGlobalTheme } from './themeable-component-724c0f7e.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-3c6b5eb8.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-16313fd4.js';
 import { i as inheritGlobalTheme } from './themeable-component-724c0f7e.js';
-import { F as FocusGuard } from './focus-utils-c70f9fb9.js';
+import { F as FocusGuard } from './focus-utils-c44d7981.js';
 import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './language-utils-00ca4c55.js';
 import { h as hasSlot } from './slot-utils-3c3ab3d6.js';
 import { g as getColorByName } from './token-utils-be83d039.js';
@@ -30,29 +30,11 @@ const DuetSlideoutPanel = class {
             const labelSlotElement = this.element.querySelector("[slot='label']");
             this.label = labelSlotElement;
         };
-        this.onToggleClick = () => {
-            const toggle = !this.open;
-            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);
-            }
+        this.toggleMenu = () => {
+            this.open = !this.open;
+        };
+        this.onClick = () => {
+            this.toggleMenu();
         };
         this.onCloseClick = e => {
             e.stopPropagation();
@@ -85,6 +67,31 @@ const DuetSlideoutPanel = class {
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
     }
+    handleOpenChange(newValue, oldValue) {
+        if (!!newValue === !!oldValue) {
+            return;
+        }
+        if (this.open && !oldValue) {
+            setTimeout(() => {
+                const siblings = Array.from(this.element.parentElement.children);
+                siblings.forEach(sibling => {
+                    if (sibling !== this.element) {
+                        sibling.inert = true;
+                    }
+                });
+                this.closeButton.focus();
+            }, 200);
+        }
+        else if (!this.open && oldValue) {
+            setTimeout(() => {
+                const siblings = Array.from(this.element.parentElement.children);
+                siblings.forEach(sibling => {
+                    sibling.inert = false;
+                });
+                this.openButton.focus();
+            }, 200);
+        }
+    }
     /**
      * Sets focus. Use this method instead of the global focus().
      */
@@ -122,16 +129,19 @@ 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, inert: this.open }, this.icon && h("duet-icon", { name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { 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.onClick, inert: this.open }, this.icon && h("duet-icon", { name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { 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-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, 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: {
                 back: true,
-            }, onClick: this.onToggleClick }, h("duet-icon", { class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", null, this.label.innerHTML), h("button", { class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { class: "sticky-header" }, h("slot", { name: "sticky-header" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick }, h("duet-icon", { class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", null, this.label.innerHTML), h("button", { class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { class: "sticky-header" }, h("slot", { name: "sticky-header" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
             } }, h("slot", null)), h(FocusGuard, { moveFocusTo: this.closeButton })))));
     }
     get element() { return getElement(this); }
+    static get watchers() { return {
+        "open": ["handleOpenChange"]
+    }; }
 };
 DuetSlideoutPanel.style = duetSlideoutPanelCss;
 

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-3c6b5eb8.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-16313fd4.js';
 import { e as enableBodyScroll, d as disableBodyScroll } from './bodyScrollLock.es6-ecbf187e.js';
 import { i as inheritGlobalTheme } from './themeable-component-724c0f7e.js';
-import { f as focusElement, F as FocusGuard } from './focus-utils-c70f9fb9.js';
+import { f as focusElement, F as FocusGuard } from './focus-utils-c44d7981.js';
 import { f as isEscapeKey } from './keyboard-utils-0708be80.js';
 import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './language-utils-00ca4c55.js';
 import { h as hasSlot } from './slot-utils-3c3ab3d6.js';
@@ -13,7 +13,7 @@ import { g as getColorByName } from './token-utils-be83d039.js';
 import './string-utils-ca039233.js';
 import './tokens.module-3547915d.js';
 
-const duetSlideoutCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:absolute;height:100%}::slotted(*){position:relative;width:100%;visibility:hidden;opacity:0}:host([open]:not([open=false])) ::slotted(*){visibility:visible;opacity:1}:host(:not([open])) ::slotted(duet-slideout-panel){display:none}.duet-slideout{display:flex;align-items:center;height:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.5;color:rgb(0, 41, 77)}.duet-slideout.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-slideout .desktop-bg{display:none}@media (min-width: 62em){.duet-slideout .desktop-bg{position:fixed;top:0;left:0;z-index:400;display:block;width:100%;height:100%;visibility:hidden;background:rgb(0, 41, 77);opacity:0;transition:600ms ease}.duet-slideout .desktop-bg:not(.hidden){visibility:visible;opacity:0.3;transition:600ms ease}}@media (min-width: 62em){.duet-slideout.duet-theme-turva .desktop-bg{background:rgb(23, 28, 58)}}.duet-slideout .dialog{position:fixed;top:0;bottom:0;left:0;z-index:400;width:100%;height:100%;padding-bottom:75px;overflow-y:auto;box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1) inset}@media (min-width: 62em){.duet-slideout .dialog{right:0;left:auto;width:500px;padding-bottom:0;transition:right 300ms ease;transition-delay:0s}}.duet-slideout .dialog .top-container.has-sticky-header-slot{position:sticky;top:0;z-index:200}.duet-slideout .dialog .top-container.has-sticky-header-slot .top{background:rgb(243, 249, 252)}.duet-slideout .dialog .top-container.has-sticky-header-slot .sticky-header{display:block}.duet-slideout .dialog .top{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end;padding:4px}.duet-slideout .dialog .top button{cursor:pointer}.duet-slideout .dialog .top button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout .dialog .top duet-icon{padding:16px}.duet-slideout .dialog .sticky-header{display:none;width:100%;padding:0 1.5rem;margin-bottom:20px;background:rgb(243, 249, 252);border-bottom:1px solid rgb(225, 227, 230)}.duet-slideout .dialog .items{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;padding:0 1.5rem}.duet-slideout .dialog.hidden{pointer-events:none;visibility:hidden}@media (min-width: 62em){.duet-slideout .dialog.hidden{right:-500px;transition:300ms ease}}.duet-slideout.duet-theme-turva .dialog{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1) inset}.duet-slideout.duet-theme-turva button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-slideout.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout.duet-theme-turva button.active{color:rgb(198, 12, 48)}.duet-slideout.duet-theme-turva button.active::after{background:rgb(198, 12, 48)}.duet-slideout.duet-theme-turva .has-sticky-header-slot .top{background:rgb(245, 245, 247)}.duet-slideout.duet-theme-turva .has-sticky-header-slot .sticky-header{background:rgb(245, 245, 247);border-bottom:1px solid rgb(228, 228, 230)}.duet-slideout.duet-theme-turva .dialog .top button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}slot{color:rgb(0, 41, 77)}.duet-theme-turva slot{color:rgb(23, 28, 58)}";
+const duetSlideoutCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:absolute;height:100%}::slotted(*){position:relative;width:100%;visibility:hidden;opacity:0}:host([open]:not([open=false])) ::slotted(*){visibility:visible;opacity:1}:host(:not([open])) ::slotted(duet-slideout-panel){display:none}.duet-slideout{display:flex;align-items:center;height:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.5;color:rgb(0, 41, 77)}.duet-slideout.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}@media (min-width: 62em){.duet-slideout.duet-theme-turva .desktop-bg{background:rgb(23, 28, 58)}}.duet-slideout .dialog{position:fixed;top:0;bottom:0;left:0;z-index:400;width:100%;height:100%;padding-bottom:75px;overflow-y:auto;box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1) inset}@media (min-width: 62em){.duet-slideout .dialog{right:0;left:auto;width:500px;padding-bottom:0;transition:right 300ms ease;transition-delay:0s}}.duet-slideout .dialog .top-container.has-sticky-header-slot{position:sticky;top:0;z-index:200}.duet-slideout .dialog .top-container.has-sticky-header-slot .top{background:rgb(243, 249, 252)}.duet-slideout .dialog .top-container.has-sticky-header-slot .sticky-header{display:block}.duet-slideout .dialog .top{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end;padding:4px}.duet-slideout .dialog .top button{cursor:pointer}.duet-slideout .dialog .top button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout .dialog .top duet-icon{padding:16px}.duet-slideout .dialog .sticky-header{display:none;width:100%;padding:0 1.5rem;margin-bottom:20px;background:rgb(243, 249, 252);border-bottom:1px solid rgb(225, 227, 230)}.duet-slideout .dialog .items{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;padding:0 1.5rem}.duet-slideout .dialog.hidden{pointer-events:none;visibility:hidden}@media (min-width: 62em){.duet-slideout .dialog.hidden{right:-500px;transition:300ms ease}}.duet-slideout.duet-theme-turva .dialog{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1) inset}.duet-slideout.duet-theme-turva button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-slideout.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout.duet-theme-turva button.active{color:rgb(198, 12, 48)}.duet-slideout.duet-theme-turva button.active::after{background:rgb(198, 12, 48)}.duet-slideout.duet-theme-turva .has-sticky-header-slot .top{background:rgb(245, 245, 247)}.duet-slideout.duet-theme-turva .has-sticky-header-slot .sticky-header{background:rgb(245, 245, 247);border-bottom:1px solid rgb(228, 228, 230)}.duet-slideout.duet-theme-turva .dialog .top button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}slot{color:rgb(0, 41, 77)}.duet-theme-turva slot{color:rgb(23, 28, 58)}";
 
 const DuetSlideout = class {
     constructor(hostRef) {
@@ -207,10 +207,7 @@ const DuetSlideout = class {
         };
         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,
-                hidden: !this.open,
-            }, onClick: this.bgOnClick }), h("div", { ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "slot-container", class: {
+        return (h(Host, null, h("div", { class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-overlay", { onClick: this.bgOnClick, visible: this.open, "display-device": "large" }), h("div", { ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "slot-container", class: {
                 dialog: true,
                 hidden: !this.open,
             }, style: styles }, h(FocusGuard, { moveFocusTo: this.closeButton }), h("div", { class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, 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: {

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-3c6b5eb8.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-16313fd4.js';
 import { i as inheritGlobalTheme } from './themeable-component-724c0f7e.js';
 import { c as createID } from './create-id-149a1b6d.js';
 import { i as isKeyboardClick, s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-0708be80.js';

package/lib/esm/duet-submenu-bar-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-3c6b5eb8.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-16313fd4.js';
 import { i as inheritGlobalTheme } from './themeable-component-724c0f7e.js';
 import { f as isEscapeKey } from './keyboard-utils-0708be80.js';
 

package/lib/esm/duet-submenu-bar-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-3c6b5eb8.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-16313fd4.js';
 import { a as media_query_large } from './tokens-94133fa9.js';
 import { i as inheritGlobalTheme } from './themeable-component-724c0f7e.js';
 import { f as isEscapeKey } from './keyboard-utils-0708be80.js';

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-3c6b5eb8.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-16313fd4.js';
 import { a as media_query_large } from './tokens-94133fa9.js';
 import { i as inheritGlobalTheme } from './themeable-component-724c0f7e.js';
 import { f as isEscapeKey } from './keyboard-utils-0708be80.js';

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-3c6b5eb8.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-16313fd4.js';
 import { a as media_query_large } from './tokens-94133fa9.js';
 import { i as inheritGlobalTheme } from './themeable-component-724c0f7e.js';
 import { f as isEscapeKey } from './keyboard-utils-0708be80.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-3c6b5eb8.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-16313fd4.js';
 import { a as media_query_large } from './tokens-94133fa9.js';
 import { e as enableBodyScroll, d as disableBodyScroll } from './bodyScrollLock.es6-ecbf187e.js';
 import { i as inheritGlobalTheme } from './themeable-component-724c0f7e.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;z-index:1;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:rgb(0, 41, 77);opacity:0.3}@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:rgb(23, 28, 58)}.duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow{box-shadow:0 2px 6px 0 rgba(23, 28, 58, 0.07)}@media (min-width: 62em){.duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1)}}";
+const 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;z-index:1;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.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:rgb(23, 28, 58)}.duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow{box-shadow:0 2px 6px 0 rgba(23, 28, 58, 0.07)}@media (min-width: 62em){.duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1)}}";
 
 const DuetSubmenuBar = class {
     constructor(hostRef) {
@@ -119,7 +119,7 @@ const DuetSubmenuBar = class {
             }, role: "presentation" }, h("div", { role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
                 items: true,
                 hidden: !this.open,
-            }, ref: element => (this.itemsContainer = element) }, h("div", { class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", null), h("div", { class: "list-padding" }))), h("div", { class: "mobile-background" })))));
+            }, ref: element => (this.itemsContainer = element) }, h("div", { class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", null), h("div", { class: "list-padding" }))), h("duet-overlay", { "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

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-3c6b5eb8.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-16313fd4.js';
 import { i as inheritGlobalTheme } from './themeable-component-724c0f7e.js';
 import { c as createID } from './create-id-149a1b6d.js';
 import { c as cleanValue } from './input-utils-85681162.js';

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-3c6b5eb8.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-16313fd4.js';
 import { i as inheritGlobalTheme } from './themeable-component-724c0f7e.js';
 import { c as createID } from './create-id-149a1b6d.js';
 import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-0708be80.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-3c6b5eb8.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-16313fd4.js';
 import { i as inheritGlobalTheme } from './themeable-component-724c0f7e.js';
 import { f as isEscapeKey } from './keyboard-utils-0708be80.js';
 

package/lib/esm/duet-toolbar-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-3c6b5eb8.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-16313fd4.js';
 import { i as inheritGlobalTheme } from './themeable-component-724c0f7e.js';
 import { f as isEscapeKey } from './keyboard-utils-0708be80.js';