@duetds/components 10.0.0-alpha.2 → 10.0.0-alpha.4

package/lib/dist-custom-elements/duet-popup-menu.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetPopupMenu$1, d as defineCustomElement$1 } from './p-29782b53.js';
+import { D as DuetPopupMenu$1, d as defineCustomElement$1 } from './p-19a763d1.js';
 
 const DuetPopupMenu = DuetPopupMenu$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-progress.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetProgress$1, d as defineCustomElement$1 } from './p-5086d1a0.js';
+import { D as DuetProgress$1, d as defineCustomElement$1 } from './p-9263fe36.js';
 
 const DuetProgress = DuetProgress$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-promo-card.js

@@ -1,12 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-d77db171.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-188506d4.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { h as hasSlot, c as checkNamedSlotElement } from './p-ad615991.js';
-import { g as getColorByName } from './p-88ed3495.js';
-import { d as defineCustomElement$3 } from './p-19172e2c.js';
-import { d as defineCustomElement$2 } from './p-1df834b1.js';
+import { g as getColorByName } from './p-0562173d.js';
+import { d as defineCustomElement$3 } from './p-a6f6eeea.js';
+import { d as defineCustomElement$2 } from './p-d46e8086.js';
 
 const duetPromoCardCss = "*,*::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;margin-right:4px !important;margin-bottom:2px !important;display:block;width:auto}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.duet-promo-card{display:flex;flex-direction:column;width:100%;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-style:normal;color:rgb(8, 42, 77);text-align:left;border-radius:20px}.duet-promo-card.duet-p-0{padding:0 !important}.duet-promo-card.duet-m-0{margin:0 !important}.duet-promo-card .content-wrapper{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}.duet-promo-card .content-wrapper:focus{border-radius:20px;outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-promo-card .image{position:relative;width:100%;overflow:hidden;border-top-left-radius:20px;border-top-right-radius:20px;object-fit:cover}.duet-promo-card .content{display:flex;flex-direction:column;flex-grow:1;gap:8px;padding:20px}@media (min-width: 36em){.duet-promo-card .content{padding:28px}}.duet-promo-card .action{display:flex;flex-grow:1;align-items:flex-end;padding-top:16px}.duet-promo-card.no-bg-color .content{padding:20px 0 0}.duet-promo-card.no-bg-color .image{border-radius:16px}.duet-promo-card.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-promo-card.duet-theme-turva .content-wrapper:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-promo-card-link{transition:box-shadow 300ms ease}.duet-promo-card-link:hover{box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07), 0 2px 10px 0 rgba(0, 41, 77, 0.1)}.duet-promo-card-link:hover.duet-theme-turva{box-shadow:0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07), 0 2px 10px 0 rgba(117, 117, 117, 0.15)}";
 const DuetPromoCardStyle0 = duetPromoCardCss;
@@ -56,12 +56,12 @@ const DuetPromoCard$1 = /*@__PURE__*/ proxyCustomElement(class DuetPromoCard ext
             backgroundColor: backgroundColor ? backgroundColor : "none",
         };
         const TagName = this.url ? "a" : "div";
-        return (h(Host, { key: 'cf0d6881f2f47a55a8143ca7b3456883bb2d772a', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '928893cdc7ec06b1d2c063bb97534847c647272e', class: {
+        return (h(Host, { key: 'cf84dae7441eb54639e24b8cecefaed8387f60c4', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '76e71f258c2a4f15b26cb2954e6c48eb93e1bfeb', class: {
                 "duet-promo-card": true,
                 "duet-theme-turva": this.theme === "turva",
                 "no-bg-color": !this.backgroundColor,
                 "duet-promo-card-link": !!this.url,
-            }, style: bannerStyles }, h(TagName, { key: '364938761185a64da7aa41156bc9537a98214cd9', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: '2c0cf1389b24e9f83d2ceaa0f8c9b7d61497be6d', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: '1d0b3d4c573a508916a2764704371938cde06015', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: '2b37c5cdafaed100d881143c347afb3c61001204', class: "pre-heading" }, h("slot", { key: '25a7c6af10e95f45da8d0b541f62deef43e1425c', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: 'd442b4843e6ef12edaf638fa40ea1dfeb7530b67', class: "heading" }, h("duet-heading", { key: 'a958109c2ee15936268c1f4d2442c882b2201f23', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("span", { key: 'c0e6cfbc00e165a7d268e523f70fb9bd35319d74' }, h("slot", { key: '0486de64216f817a4beea3c033cc8358b1c5e0e4', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '290862c134b87ef88be10e76b8bbcdd4d3b81e4a', class: "description" }, h("duet-paragraph", { key: '62c172d0ca03aaf5a07eebc9ba746522b3ad4111', theme: this.theme, margin: "none", color: this.textColor }, h("span", { key: '2e1aa4953e82e554989d540ea3457b4e3bf41ab1' }, h("slot", { key: 'e84b12f234411a1cc96e6e3162a1c0c18014dd2b', name: "description" }))))), this.hasActionSlot && (h("div", { key: '2fb7c4c6c1c6e1726ea7ae5b2dc98964523f7161', class: "action" }, h("slot", { key: '62ed799aa718b7dfe639a2c06e868ed5d019d881', name: "action" }))))))));
+            }, style: bannerStyles }, h(TagName, { key: 'a621b3f1b8f675a0c7643b80268a1a1fae44634e', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: 'f81167006440e7d2849bca5b6998f56aef84270c', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: '0f57e628e3de81ba03a435591bb79f23765f3e0c', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: '004cb19ae4521948a4f3c92efd7749fa2daa65a1', class: "pre-heading" }, h("slot", { key: '891ce96361f3291e64af70299a30cacaa6658305', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '32103b0e907ae34c0f79c49aa4f5a01a15ac622b', class: "heading" }, h("duet-heading", { key: '4d464e8fcfff685c8cff29b09d8b966f7060bc86', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("span", { key: 'e75ab8c05ecaa5f16dce99bd818738385315cf5b' }, h("slot", { key: '0f21589923a3be27f2b9e7cd08ff10b87bdcbcbd', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '97bedc93d874049ff15560abac99d4de3617de6c', class: "description" }, h("duet-paragraph", { key: '869c2b82f2915641778bdb2c5f894d7069ac4600', theme: this.theme, margin: "none", color: this.textColor }, h("span", { key: '55d9c3b34a7c538f6abaaf64268666f3d2fab6d9' }, h("slot", { key: '18fd004f6a5a6d7cd1410a5365de315027b8872d', name: "description" }))))), this.hasActionSlot && (h("div", { key: '2f1dcdd2f0d8a45795c2ca89eedbde7803d27de8', class: "action" }, h("slot", { key: '0f123542154cd285f35d66b4a2ee5b19eaad98ef', name: "action" }))))))));
     }
     get element() { return this; }
     static get style() { return DuetPromoCardStyle0; }

package/lib/dist-custom-elements/duet-radio-group.js

@@ -1,17 +1,17 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-d77db171.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-188506d4.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { c as checkNamedSlotElement } from './p-ad615991.js';
 import { f as findCheckedOption, w as watchForOptions } from './p-7d8a2628.js';
-import { d as defineCustomElement$8 } from './p-d2a5148f.js';
-import { d as defineCustomElement$7 } from './p-a2b5c68e.js';
-import { d as defineCustomElement$6 } from './p-b4289ed0.js';
-import { d as defineCustomElement$5 } from './p-7f69e1e3.js';
-import { d as defineCustomElement$4 } from './p-e774334b.js';
-import { d as defineCustomElement$3 } from './p-4c1f4287.js';
-import { d as defineCustomElement$2 } from './p-6a285be8.js';
+import { d as defineCustomElement$8 } from './p-ceace5a5.js';
+import { d as defineCustomElement$7 } from './p-b59d4ed8.js';
+import { d as defineCustomElement$6 } from './p-06932c23.js';
+import { d as defineCustomElement$5 } from './p-fbf7b0a3.js';
+import { d as defineCustomElement$4 } from './p-f08fd5ce.js';
+import { d as defineCustomElement$3 } from './p-1f07910e.js';
+import { d as defineCustomElement$2 } from './p-b3ffc8ec.js';
 
 const duetRadioGroupCss = "*,*::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;width:100%}:host(.horizontal) .duet-radio-group{display:block}@media (min-width: 48em){:host(.horizontal) .duet-radio-group{display:flex}}:host(.horizontal) .duet-radio-group.duet-no-stacking{display:flex}.deut-radio-group{width:100%}";
 const DuetRadioGroupStyle0 = duetRadioGroupCss;
@@ -124,7 +124,7 @@ const DuetRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class DuetRadioGroup e
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'e516156e7c44831a8e14c4025a5533d4b2a4b7c9', onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, h("duet-fieldset", { key: 'dec5b7cb93bc57ea111b05a52dc0a3c2bf34cd79', 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", { key: 'e26e641c572e513574e148f6fb7132a6456a5692', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '27b29b5694912bcbac44b04c4842eaf18acfb941', name: "tooltip" }), h("div", { key: '6ddeead79d117c688fcb68166a7eecbd51f5b7df', class: { "duet-radio-group": true, "duet-no-stacking": !this.responsive } }, h("slot", { key: '3b8f61ca49010d8ebd8aed718c514a5e51f9feaf' })))));
+        return (h(Host, { key: '58915e6da750001fd46c97b2101776c6631fc02f', onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, h("duet-fieldset", { key: '8b454dcd733beeea8c9cfb065fc3ea538d628882', 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", { key: 'c2a46c8277ab66b0e5c114465cfe12d4d2b9e8b3', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '3518ff371ea67b21be7abe499770fd0f1e0c7751', name: "tooltip" }), h("div", { key: '797c9eb9ed9fbfc2aeed8387737988edd97196e3', class: { "duet-radio-group": true, "duet-no-stacking": !this.responsive } }, h("slot", { key: 'ee43ef03fa86da26eff0ee82ae7f828b4b486a88' })))));
     }
     get element() { return this; }
     static get watchers() { return {

package/lib/dist-custom-elements/duet-radio.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-d77db171.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-188506d4.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { c as createID } from './p-5e59e970.js';
 import { g as getElementsFromNamedSlot, h as hasSlot } from './p-ad615991.js';
@@ -171,16 +171,16 @@ const DuetRadio$1 = /*@__PURE__*/ proxyCustomElement(class DuetRadio extends H {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '45b1545ee1fba45f0e798ecc8d00e3a1008626f8', onClick: this.onClick, class: {
+        return (h(Host, { key: 'd0e3f85414ec58c2ad43fc2b5270169f0215d135', onClick: this.onClick, class: {
                 horizontal: this.groupDirection === "horizontal" && !this.groupResponsive,
                 "horizontal-responsive": this.groupDirection === "horizontal" && this.groupResponsive,
                 "duet-m-0": this.margin === "none",
-            } }, h("div", { key: '08a710d7eba8d2d525f28914ee1a607772193aad', class: { "duet-radio-container": true, "duet-theme-turva": this.theme === "turva" } }, h("slot", { key: '0ae4454c2bbca3802ff1e39a9a8cc9fa8e5a0f55', name: "input" }), h("label", { key: '135a95b34307d57a9af5fe5768da8df2a74e7803', inert: true, ref: element => (this.labelElement = element), class: {
+            } }, h("div", { key: '53abf70ecca3cb7982df21e96daf3e534d9830ea', class: { "duet-radio-container": true, "duet-theme-turva": this.theme === "turva" } }, h("slot", { key: 'bb6b9872a4cad75a191a8ac5b1e7e0678fb8f2d5', name: "input" }), h("label", { key: '9ed92050ef44dbc0c78dc3e815ff9ab50d118c2d', inert: true, ref: element => (this.labelElement = element), class: {
                 "duet-label": true,
                 checked: this.checked,
                 focus: this.focus,
                 disabled: this.disabled || this.groupDisabled,
-            } }, h("div", { key: '908ecfc2809c9ff575ded9cc37c034921d7c4966', class: "duet-label-content" }, this.hasLabel ? h("slot", { name: "label" }) : this.label)))));
+            } }, h("div", { key: '58c329e0c4ff19df4d30be153a66aac885dcc89d', class: "duet-label-content" }, this.hasLabel ? h("slot", { name: "label" }) : this.label)))));
     }
     get element() { return this; }
     static get style() { return DuetRadioStyle0; }

package/lib/dist-custom-elements/duet-range-slider.js

@@ -1,8 +1,8 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-d77db171.js';
-import { n as colorPrimaryTurva, p as colorGrayTurva, o as colorPrimary, q as colorGray } from './p-4c179c1e.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-188506d4.js';
+import { G as colorPrimaryTurva, H as colorGrayTurva, C as colorPrimary, I as colorGray } from './p-cea716f7.js';
 import { D as DuetInternalLabel } from './p-42619f94.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { c as createID } from './p-5e59e970.js';
@@ -126,13 +126,13 @@ const DuetRangeSlider$1 = /*@__PURE__*/ proxyCustomElement(class DuetRangeSlider
         const rangeStyles = {
             background: `-webkit-linear-gradient(left,${active} 0%,${active} ${percentage}%,${inactive} ${percentage}%)`,
         };
-        return (h(Host, { key: '0462822be845868f320cd128459db2c4dd0c3d9b', class: { "duet-m-0": this.margin === "none", "duet-expand": this.expand } }, h("div", { key: '4dad1dcb14b05b79dad097337e2f99827eecaa1e', class: {
+        return (h(Host, { key: '98fe15c2f253a8bee32d5271e6de03605e669c28', class: { "duet-m-0": this.margin === "none", "duet-expand": this.expand } }, h("div", { key: 'e2344803fd443a83024cf3fcfe9ed87d952d1038', class: {
                 "duet-range-container": true,
                 "duet-label-hidden": this.labelHidden,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-ie": isInternetExplorer(),
                 "duet-range-disabled": this.disabled,
-            } }, h(DuetInternalLabel, { key: '90a4b100e8b76d1acb45eb27a611bba1bbf49a69', theme: theme, color: this.labelColor, weight: this.labelWeight, margin: "small", for: identifier }, this.label), h("output", { key: 'e3bb3da27713b30b891522bb338688c03e26f630', "aria-hidden": "true", htmlFor: identifier, class: "duet-output" }, this.value.toLocaleString(this.locale), this.unit), h("input", { key: 'a47f6a94847e123d96917777681312c340cc2b0d', onInput: this.onInput, onChange: this.onChange, ref: input => (this.nativeInput = input), type: "range", min: this.min, max: this.max, step: this.step, value: this.value, style: rangeStyles, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} ${this.unit}`, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, id: identifier, name: this.name, disabled: this.disabled, required: this.required, class: "duet-range" }))));
+            } }, h(DuetInternalLabel, { key: '0780aee7170b90a56e56e59abe19287e536ed531', theme: theme, color: this.labelColor, weight: this.labelWeight, margin: "small", for: identifier }, this.label), h("output", { key: 'eef1575763000465607bb91eec29b4491df22660', "aria-hidden": "true", htmlFor: identifier, class: "duet-output" }, this.value.toLocaleString(this.locale), this.unit), h("input", { key: 'e38f080b37e93b2abc1ce740d413c349ce4c893f', onInput: this.onInput, onChange: this.onChange, ref: input => (this.nativeInput = input), type: "range", min: this.min, max: this.max, step: this.step, value: this.value, style: rangeStyles, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} ${this.unit}`, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, id: identifier, name: this.name, disabled: this.disabled, required: this.required, class: "duet-range" }))));
     }
     get element() { return this; }
     static get style() { return DuetRangeSliderStyle0; }

package/lib/dist-custom-elements/duet-range-stepper.js

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-d77db171.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-188506d4.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { c as createID } from './p-5e59e970.js';
 import { h as isArrowLeftKey, e as isArrowUpKey, n as isMinusKey, l as isArrowKey, j as isArrowRightKey, f as isArrowDownKey, o as isPlusKey } from './p-ca700701.js';
 import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-35375593.js';
-import { d as defineCustomElement$4 } from './p-f9994ef4.js';
-import { d as defineCustomElement$3 } from './p-b4289ed0.js';
-import { d as defineCustomElement$2 } from './p-6a285be8.js';
+import { d as defineCustomElement$4 } from './p-5ccb11e5.js';
+import { d as defineCustomElement$3 } from './p-06932c23.js';
+import { d as defineCustomElement$2 } from './p-b3ffc8ec.js';
 
 const duetRangeStepperCss = "*,*::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;margin:0 auto}.duet-range-stepper{display:flex;flex-wrap:wrap;gap:0;align-items:baseline;justify-content:center;min-width:30px;min-height:30px;font-weight:600;text-decoration:none;border-left-width:0}.duet-range-stepper{white-space:nowrap}.duet-range-stepper .duet-range-step-counter{font-weight:600;color:rgb(8, 42, 77)}.duet-range-stepper ::part(button){border:0}";
 const DuetRangeStepperStyle0 = duetRangeStepperCss;
@@ -173,10 +173,10 @@ const DuetRangeStepper$1 = /*@__PURE__*/ proxyCustomElement(class DuetRangeStepp
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: 'e398ec0cf2d35150c78f4e3475fd7e4c95d646ad', class: {
+        return (h("div", { key: '72ad680e3e9c66bb07767d39809f1c9238e72e57', class: {
                 "duet-range-stepper": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, h("span", { key: '24a874579791e03416eb316216ea44c6d35d7e0b', class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { key: '13d2b13c96b44797b61192a0e99c63ec0098e7a6', disabled: this.disabled || this.buttonLeftDisabled, class: "duet-range-step-button duet-range-step-minus", onClick: e => this.handleClick(e, -1), id: this.leftBn, "accessible-label": `${this.ariaLabels.previous_increment} ${this.generatePreviousIncrementLabel()}`, ref: el => (this.leftBnRef = el), part: "navigation-arrow", iconName: "action-arrow-left-small", title: "" }), h("duet-action-button", { key: 'd8b25262e3f9549252640e5479b83dd2c7ea4930', disabled: this.disabled || this.buttonRightDisabled, class: "duet-range-step-button duet-range-step-plus", onClick: e => this.handleClick(e, 1), "accessible-label": `${this.ariaLabels.next_increment} ${this.generateNextIncrementLabel()}`, id: this.rightBn, ref: el => (this.rightBnRef = el), part: "navigation-arrow", iconName: "action-arrow-right-small", title: "" })));
+            }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, h("span", { key: '06a6d22a4872a4f52d52853769e886b5101016a9', class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { key: 'a91caa95ba2262118e2d0a5615da3bbdc3cd456d', disabled: this.disabled || this.buttonLeftDisabled, class: "duet-range-step-button duet-range-step-minus", onClick: e => this.handleClick(e, -1), id: this.leftBn, "accessible-label": `${this.ariaLabels.previous_increment} ${this.generatePreviousIncrementLabel()}`, ref: el => (this.leftBnRef = el), part: "navigation-arrow", iconName: "action-arrow-left-small", title: "" }), h("duet-action-button", { key: 'a03a4cdd46c44378b5e544f0a1287320a58cfc58', disabled: this.disabled || this.buttonRightDisabled, class: "duet-range-step-button duet-range-step-plus", onClick: e => this.handleClick(e, 1), "accessible-label": `${this.ariaLabels.next_increment} ${this.generateNextIncrementLabel()}`, id: this.rightBn, ref: el => (this.rightBnRef = el), part: "navigation-arrow", iconName: "action-arrow-right-small", title: "" })));
     }
     get element() { return this; }
     static get watchers() { return {

package/lib/dist-custom-elements/duet-scrollable.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetScrollable$1, d as defineCustomElement$1 } from './p-a9e09647.js';
+import { D as DuetScrollable$1, d as defineCustomElement$1 } from './p-a95aa79f.js';
 
 const DuetScrollable = DuetScrollable$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-section-layout.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-d77db171.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-188506d4.js';
 import { i as isInternetExplorer } from './p-43b89e38.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-wrapper{display:block;margin:48px 0 36px;overflow-x:clip}@media (min-width: 36em){.duet-layout-wrapper{margin-top:72px}}@media (min-width: 62em){.duet-layout-wrapper{margin-bottom:48px}}.duet-layout-wrapper.duet-m-0{margin-top:0 !important;margin-bottom:0 !important}.duet-layout-wrapper>*{width:100%}.duet-layout{position:relative;padding:0 16px;margin:0 auto}@media (max-width: 20.5em){.duet-layout.padding-xxx-small{padding:0}}@media (max-width: 22.5em){.duet-layout.padding-xx-small{padding:0}}@media (max-width: 35.9375em){.duet-layout.padding-x-small{padding:0}}@media (min-width: 36em){.duet-layout.padding-small{padding:0}}@media (min-width: 48em){.duet-layout.padding-medium{padding:0}}@media (min-width: 62em){.duet-layout.padding-large{padding:0}}@media (min-width: 64.0625em){.duet-layout.padding-x-large{padding:0}}@media (min-width: 76.25em){.duet-layout.padding-xx-large{padding:0}}@media (min-width: 106.25em){.duet-layout.padding-xxx-large{padding:0}}@media (min-width: 36em){.duet-layout{padding:0 28px}}@media (min-width: 62em){.duet-layout{display:flex;flex-direction:row;padding:0 56px}}@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}}";
@@ -21,13 +21,13 @@ const DuetSectionLayout$1 = /*@__PURE__*/ proxyCustomElement(class DuetSectionLa
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '7f434babace607653e64faabeddb9c27bb616862', class: {
+        return (h(Host, { key: 'd59fd803c2d331d93c517799dffba4ba780206c9', class: {
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '9fbdea587d94910e97eb9ecbea464c1778fc1ff8', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: 'f4c957ebabd014d3ebf626d7539f3542314ce0a1', class: {
+            } }, h("div", { key: '6199393352b4a25123cc6944b9eb7938b587d8c8', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: 'e8b4016587163de6c1257f6bb35a8afb18466622', class: {
                 "duet-layout": true,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("section", { key: 'd803f587fb3f7f481d22d2a3e3566bcd85c7f98b', class: "duet-main" }, h("slot", { key: 'fb1c82948b2d25d0437c41743abf0f9ed666b4d5' }))))));
+            } }, h("section", { key: '074cc43ee4127e6ed8b268f081086eeddfb1c066', class: "duet-main" }, h("slot", { key: '387b88c324e3f25cad2b7e3af3b9b6cfb804fce1' }))))));
     }
     get element() { return this; }
     static get style() { return DuetSectionLayoutStyle0; }

package/lib/dist-custom-elements/duet-select.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetSelect$1, d as defineCustomElement$1 } from './p-e4936fed.js';
+import { D as DuetSelect$1, d as defineCustomElement$1 } from './p-44f0c510.js';
 
 const DuetSelect = DuetSelect$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-shaped-image.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-d77db171.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-188506d4.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.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}";
@@ -32,9 +32,9 @@ const DuetShapedImage$1 = /*@__PURE__*/ proxyCustomElement(class DuetShapedImage
         const style = {
             "--rotation": `${this.rotation}deg`,
         };
-        return (h(Host, { key: '555cbcb9c76cbda51c3c4cede13d764de7334c4e', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: '11704c842ec39f85048625cc78eb3dac55c18508', class: {
+        return (h(Host, { key: 'f1c8d161c2283c6244394301f825cba95d3e9b7e', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: 'bbdaa4aff9bd834201ae92822ff1ad6f249c8b6e', class: {
                 "shaped-image": true,
-            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: 'f4ebb6576b8d69bc929ccae1662a87bc7c2481c7', class: "shaped-image-mask", role: "presentation" }, h("span", { key: 'd7d83206a5d52dd0ec81ea25256ace0b0f68df6c', class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
+            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: '09a783d38ac534c9a11357afda22e817f64374e7', class: "shaped-image-mask", role: "presentation" }, h("span", { key: 'f0d718945e2be9e95e33acfb49e94e102698812f', class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
     }
     static get style() { return DuetShapedImageStyle0; }
 }, [1, "duet-shaped-image", {

package/lib/dist-custom-elements/duet-show-more.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetShowMore$1, d as defineCustomElement$1 } from './p-a0f74881.js';
+import { D as DuetShowMore$1, d as defineCustomElement$1 } from './p-9b7e188a.js';
 
 const DuetShowMore = DuetShowMore$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-slideout-lang.js

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-d77db171.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-188506d4.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './p-35375593.js';
-import { d as defineCustomElement$2 } from './p-b4289ed0.js';
+import { d as defineCustomElement$2 } from './p-06932c23.js';
 
 const duetSlideoutLangCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-slideout-lang{display:flex;gap:20px;align-items:center;justify-content:flex-start;width:min-content;white-space:nowrap}::slotted(*){position:relative}::slotted(:not(:first-child)){padding-right:0;padding-left:0.5rem}::slotted(:not(:last-child))::after{position:absolute;top:25%;right:-16px;width:2px;height:50%;content:\"\";background:rgb(8, 42, 77)}.duet-theme-turva ::slotted(:not(:last-child))::after{background:rgb(23, 28, 58)}";
 const DuetSlideoutLangStyle0 = duetSlideoutLangCss;
@@ -43,7 +43,7 @@ const DuetSlideoutLang$1 = /*@__PURE__*/ proxyCustomElement(class DuetSlideoutLa
      */
     render() {
         const langTranslation = getLocaleString(this.chooseLangObject);
-        return (h(Host, { key: 'd163f56230650efc540cf21892239905271a775e' }, h("div", { key: '7b1d95d36da23db34a90055407a7f307ab0d4ffa', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '07ed0679705221e14ba5e20d0db83a5b3073a7cf', name: "navigation-language", margin: "none", color: "secondary" }), h("slot", { key: 'e847d0a2bf84e7099988d6bc9f6e59dfa0ba99d7' }))));
+        return (h(Host, { key: '2e3786b9379cc0898afe8242d6261f7f638ee055' }, h("div", { key: 'd732dcd99d2623c69b4ef90da80250d92a181345', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '40bcd65531b9bf0b184b4839edb93999bb1baf8f', name: "navigation-language", margin: "none", color: "secondary" }), h("slot", { key: '80aba1c3733a7372e2d923efae445d312ae77eef' }))));
     }
     get element() { return this; }
     static get style() { return DuetSlideoutLangStyle0; }

package/lib/dist-custom-elements/duet-slideout-link.js

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-d77db171.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-188506d4.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { d as defineCustomElement$2 } from './p-b4289ed0.js';
+import { d as defineCustomElement$2 } from './p-06932c23.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(98, 121, 138)}.duet-theme-turva slot[name=description]::slotted(*){color:rgb(113, 118, 132)}";
 const DuetSlideoutLinkStyle0 = duetSlideoutLinkCss;
@@ -34,12 +34,12 @@ const DuetSlideoutLink$1 = /*@__PURE__*/ proxyCustomElement(class DuetSlideoutLi
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'dbcb8bf6b8c65743fb716cbdda625cf4ea5162f8' }, h("a", { key: '542c9910bad183af64eff3b965ef1cec19b4ac7b', class: {
+        return (h(Host, { key: 'a029203320f713bb35536f330eb844dd30a6f642' }, h("a", { key: 'a4330b8ae522bc1f1730777fbb3d2238617cb8bd', class: {
                 "duet-slideout-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [this.size]: true,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'c192e191c1323e742022c48651a75c16017b4837', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { key: 'b0e214e358e524f13a884c78e1d78118b171e3ed', class: "label" }, h("span", { key: 'af8697663031dc729bc98cf7c15cd2d58a03f861' }, h("slot", { key: '84b1b365ac8fabcbf3c6451a8aa51caa18010aa9' }), h("slot", { key: '82b78e911b41cfd441fb9eab798093f6b726c993', name: "description" })), this.caret && (h("duet-icon", { key: 'ee835e2bd7427531239041e03b19ed4335b8ad74', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '2f6f44567d1d0977a30ccad6fac3c15d6f324ba2', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { key: '10cdd450e97db14094ee2650b9d15fee0d11b8ac', class: "label" }, h("span", { key: 'a7819f3cb48b547fd6a033b048148fb0a0b3d1dc' }, h("slot", { key: '1b4500ab2c18ba67f3b0c356156cbc4939248376' }), h("slot", { key: 'f1b1cab15e6bd356e34438076c4292d998bd5881', name: "description" })), this.caret && (h("duet-icon", { key: '757f3c16fe571ce1743a9175fe99da0b107dc59b', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
     }
     get element() { return this; }
     static get style() { return DuetSlideoutLinkStyle0; }

package/lib/dist-custom-elements/duet-slideout-panel-dropdown.js

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-d77db171.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-188506d4.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { d as defineCustomElement$2 } from './p-b4289ed0.js';
+import { d as defineCustomElement$2 } from './p-06932c23.js';
 
 const duetSlideoutPanelDropdownCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%}:host slot:not([name=label])::slotted(*){position:relative;top:-0.5rem;opacity:0;transition:top 0.3s ease-in, opacity 0.3s ease-in}:host([open]) slot:not([name=label])::slotted(*){top:0;opacity:1}.duet-slideout-panel-dropdown{position:relative;width:100%;height:100%}.duet-slideout-panel-dropdown button{position:relative;display:flex;gap:20px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 0;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1.25rem;font-weight:800;line-height:1.25;color:rgb(8, 42, 77);text-align:center;text-decoration:none;cursor:pointer}.duet-slideout-panel-dropdown button .label{position:relative;display:flex;gap:0.5rem;align-items:center;justify-content:center}.duet-slideout-panel-dropdown button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout-panel-dropdown button.active .label::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:calc(100% - 18px);height:1px;content:\"\";background:rgb(0, 119, 179);transform:translateY(1px)}.duet-slideout-panel-dropdown .items{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-height:1000px;padding:4px 20px 8px 44px;overflow-y:auto;visibility:visible;transition:max-height 0.3s ease-in, padding-bottom 0.3s ease-in;-ms-overflow-style:none;scrollbar-width:none}.duet-slideout-panel-dropdown .items::-webkit-scrollbar{display:none}.duet-slideout-panel-dropdown .items.hidden{max-height:0;padding:0;overflow:hidden;visibility:hidden;transition:max-height 0.3s ease-out, padding-bottom 0.3s ease-out}.duet-slideout-panel-dropdown.duet-theme-turva button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-slideout-panel-dropdown.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-panel-dropdown.duet-theme-turva button.active .label::after{background:rgb(198, 12, 48)}slot{--active-height:1px;--active-translate-y:translateY(1px);font-size:1rem;font-weight:400;color:rgb(8, 42, 77)}.duet-theme-turva slot{color:rgb(23, 28, 58)}slot[name=label]{font-size:1rem;font-weight:600}";
 const DuetSlideoutPanelDropdownStyle0 = duetSlideoutPanelDropdownCss;
@@ -48,16 +48,16 @@ const DuetSlideoutPanelDropdown$1 = /*@__PURE__*/ proxyCustomElement(class DuetS
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'f7a1b3521e799c7792945551a66c1c295dd5ffdc' }, h("div", { key: 'd63da6a1f3650e633c97795042a7b34b8ad48302', class: {
+        return (h(Host, { key: '395dbb7ccae945eb7b868151f9718d1cd6610cb9' }, h("div", { key: 'e20a30d16e26fa8b8d1d79282121aa096ab5eefb', class: {
                 "duet-slideout-panel-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: 'ed40e8b4d2a431e4f578ea26583a70b8977d951c', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: '66ab3aeaedb579191ea05f7144d49a5a7797da15', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 active: this.active,
-            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: '44a4510103738db121e37e1d18f3a5f2484e7683', name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { key: 'b2ce145800f498a7382885190458bb49205b7ada', class: "label" }, h("slot", { key: '6ce00dfcd2d2ef3ac62143b9150b80f1ecc9a69d', name: "label" }), h("duet-icon", { key: 'e6890351789e07002b0b9fc85d79baf6862bd239', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: '81a201018140f6519e9ed18baec3855790ef4cb4', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: '74325e60be48fe2f61db0abdd0bdfeb4076ac210', name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { key: '5b6534465bd89bc9943fe95179d1484e0523cffd', class: "label" }, h("slot", { key: '1a720277e982c04d1ee3c52c5b705a72eb6b639f', name: "label" }), h("duet-icon", { key: '94cdfb7634f121957894a58400797dc9fd0f8fbf', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: 'dde8244123fcf328f0ff21d34f816078cdf794c4', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '473c54c7f46f6cb77f5656ff8c7d60106836aa73' })))));
+            } }, h("slot", { key: '6a4ec5ae0afb953b1aa2ba49f564b06a18acfcfa' })))));
     }
     get element() { return this; }
     static get style() { return DuetSlideoutPanelDropdownStyle0; }

package/lib/dist-custom-elements/duet-slideout-panel.js

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-d77db171.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-188506d4.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { e as enableBodyScroll, d as disableBodyScroll } from './p-fc09c464.js';
 import { F as FocusGuard } from './p-e30dc66d.js';
 import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './p-35375593.js';
 import { h as hasSlot } from './p-ad615991.js';
-import { g as getColorByName } from './p-88ed3495.js';
-import { d as defineCustomElement$2 } from './p-b4289ed0.js';
+import { g as getColorByName } from './p-0562173d.js';
+import { d as defineCustomElement$2 } from './p-06932c23.js';
 
 const duetSlideoutPanelCss = "*,*::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%}: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{position:relative;height:100%}.duet-slideout-panel .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:1.5rem;font-weight:800;line-height:1.25;color:rgb(8, 42, 77);text-align:left;text-decoration:none;cursor:pointer}.duet-slideout-panel .link .duet-slideout-icon{position:relative;display:inline-flex;font-size:0;line-height:normal;vertical-align:baseline}.duet-slideout-panel .link .duet-slideout-icon .duet-slideout-badge{position:absolute;top:0;left:16px;display:inline-block;width:6px;height:6px;background:rgb(247, 178, 40);border-radius:50%;box-shadow:0 0 0 1px #c18b1f}.duet-theme-turva .duet-slideout-panel .link .duet-slideout-icon .duet-slideout-badge{background:rgb(247, 178, 40)}@media (min-width: 62em){.duet-slideout-panel .link .duet-slideout-icon{margin-right:8px}}.duet-slideout-panel .link .label{display:flex;gap:0.5rem;align-items:center;justify-content:space-between;width:100%}.duet-slideout-panel .link .label-text.small{font-size:1rem;font-weight:600}.duet-slideout-panel .link .label-text.medium{font-size:1.25rem;font-weight:600}.duet-slideout-panel .link .label-text.large{font-size:1.5rem;font-weight:800}.duet-slideout-panel .link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout-panel .link.active .label-text{position:relative}.duet-slideout-panel .link.active .label-text.small::after{height:1px;transform:translateY(1px)}.duet-slideout-panel .link.active .label-text::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:2px;content:\"\";background:rgb(0, 119, 179);transform:translateY(2px)}.duet-slideout-panel .dialog{position:fixed;top:0;left:0;z-index:600;width:100%;height:100%;overflow-y:auto;visibility:visible}.duet-slideout-panel .dialog.hidden{visibility:hidden}.duet-slideout-panel .dialog.hidden .top .back,.duet-slideout-panel .dialog.hidden .top span{opacity:0}.duet-slideout-panel .top-container.has-sticky-header-slot{position:sticky;top:0;z-index:200}.duet-slideout-panel .top-container.has-sticky-header-slot .top{background:rgb(240, 247, 250)}.duet-slideout-panel .top-container.has-sticky-header-slot .sticky-header{display:block;padding:0 16px}.duet-slideout-panel .top{display:flex;align-items:center;justify-content:space-between;padding:4px}.duet-slideout-panel .top .back{opacity:1;transition:top 0.3s ease-in, opacity 0.3s ease-in}.duet-slideout-panel .top .back:focus,.duet-slideout-panel .top .close:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout-panel .top duet-icon{padding:16px}.duet-slideout-panel .top span{font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.5;color:rgb(8, 42, 77);opacity:1;transition:top 0.3s ease-in, opacity 0.3s ease-in}.duet-slideout-panel .sticky-header{display:none;width:100%;padding:0 1.5rem;margin-bottom:20px;background:rgb(240, 247, 250);border-bottom:1px solid rgb(212, 223, 229)}.duet-slideout-panel .items{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:1rem 16px;overflow-y:auto;color:rgb(8, 42, 77)}.duet-slideout-panel.duet-theme-turva .link{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-slideout-panel.duet-theme-turva .link:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-panel.duet-theme-turva .link.active .label-text::after{background:rgb(198, 12, 48)}.duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .top{background:rgb(245, 247, 250)}.duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .sticky-header{background:rgb(245, 247, 250);border-bottom:1px solid rgb(222, 224, 228)}.duet-slideout-panel.duet-theme-turva .top .back:focus,.duet-slideout-panel.duet-theme-turva .top .close:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-panel.duet-theme-turva .top span{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}slot:not([name=label]){--active-height:1px;--active-translate-y:translateY(1px);font-size:1rem;font-weight:600;color:rgb(8, 42, 77)}.duet-theme-turva slot:not([name=label]){color:rgb(23, 28, 58)}";
 const DuetSlideoutPanelStyle0 = duetSlideoutPanelCss;
@@ -161,23 +161,23 @@ const DuetSlideoutPanel$1 = /*@__PURE__*/ proxyCustomElement(class DuetSlideoutP
         };
         const exitTranslation = getLocaleString(this.exitLangObject);
         const backTranslation = getLocaleString(this.backLangObject);
-        return (h(Host, { key: '0318776fab9cea36b44efcbd8a066fc7a71aa59e' }, h("div", { key: '1d95822243d5c86ec5b5173e4e681b4146e4476f', class: {
+        return (h(Host, { key: '1fdecfc05e8d865359ade74def89509ede4b640d' }, h("div", { key: '5f01158076efebc4228dc02f4d2c935c8c2b1b53', class: {
                 "duet-slideout-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: 'a45e36b09686a148c2ba62e9984627920710ecb7', 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: {
+            } }, h("button", { key: 'e4a202123cc409499442c9ad9237ef25d91afb9b', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 link: true,
                 active: this.active,
-            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: '6f2dee22c324bf4ead87048ebff2a20c47ca896a', class: "duet-slideout-icon" }, h("duet-icon", { key: '44e1cac15f61dab325132fcc3514c8e0354cc43a', name: this.icon, size: "medium", margin: "none", color: "secondary" }), this.badge && h("div", { key: '024312ec408282554844e751ab4b49d05b96b548', class: "duet-slideout-badge" }))), h("span", { key: '283051aa5c3b14ee17ca9da70c094a57235e749e', class: "label" }, h("span", { key: '81b5642422add92e13dbf34d95a26c0588858de7', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: 'd44a3600f9a66a1768a530317ee8e97d61d7d5a4', name: "label" })), h("duet-icon", { key: '4e27c46508e15f8a57b08025121d7a30386fd7e1', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: '0e7fce1743db4fe772c3165ea76ddd2b5215e3c3', ref: element => (this.dialog = element), class: {
+            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: '00973456c8c03852e7f3cce1deb832cfb315d151', class: "duet-slideout-icon" }, h("duet-icon", { key: 'b52abe82284aa610518b113fae26f4d6ee08fb76', name: this.icon, size: "medium", margin: "none", color: "secondary" }), this.badge && h("div", { key: 'd3d4401ebedef89cb2509a8b9f44b27ff27ffe7a', class: "duet-slideout-badge" }))), h("span", { key: '87803383a92d8ae0298ad3b1a4731f5982215d71', class: "label" }, h("span", { key: '8c0de2a43822dbbad951886d6658a74863fecbb6', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: 'f3fcc66001ef3f15cc1c179eb26d5b7ddc55b52b', name: "label" })), h("duet-icon", { key: '15a3ad5adc96e793705f455989dc4db44b6510fe', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: '618f75004e95a0b85850cc1f8e480c4b4f8f99d0', ref: element => (this.dialog = element), class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, h(FocusGuard, { key: '40a3ed99c1bf1bceb7378326804d3f5e76a2caf0', moveFocusTo: this.closeButton }), h("div", { key: '513ce8191e12b73aa0ec22360499905c9a120aca', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'f6d518848785f147415050e356dcfe42e00e64af', class: "top" }, h("button", { key: '6c6d3320016eeabed6b06b5d997bf0fe871b7d5b', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
+            }, style: styles }, h(FocusGuard, { key: 'be8cbff0348dcb36daf49410a46057911878ab6b', moveFocusTo: this.closeButton }), h("div", { key: '67d750c50b72dbbbb55ce0507634483d107b2afd', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '0ddae96c7a72f15d58196c28827a0e50b378b245', class: "top" }, h("button", { key: '48f823a1ce20d6988bf672ad70f44a52f0ecb56b', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
                 back: true,
-            }, onClick: this.onClick }, h("duet-icon", { key: 'e68686b85946c9e54babfb2aa7012e37048b6a23', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: 'b2082182002d6fc1687fdbe1a75c30a62061a083' }, this.label.innerHTML), h("button", { key: 'b6cfea3156d9398f6ff290c6abbdbdff55a16edd', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '4f973e329f5254a4d6fbb230bb2e1c815d07fab5', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'b2f3ca3d5bd5e4881cfbe6acd61b8ff209408f35', class: "sticky-header" }, h("slot", { key: '9a1594cd89ffce28613a575b53219736fcf02bae', name: "sticky-header" }))), h("div", { key: '74a5a1eefa940a78f4904f118fbb22da52177d83', tabindex: "-1", role: "menu",
+            }, onClick: this.onClick }, h("duet-icon", { key: '14263fd7430103f651285262e3e26ce785005a40', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '44d2456e6d944ff4e99332a1cc92ea89742251c3' }, this.label.innerHTML), h("button", { key: 'e9a1c830c74e427847185e2f90ca3f82ba582523', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '6cff167e773690ddf3b27a92d60f84186848d58d', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '67d5e9fbee252fe03fba053c529a8f93c07e9193', class: "sticky-header" }, h("slot", { key: '6d8530f7db55035d6999708de1ad3ad010a74f5d', name: "sticky-header" }))), h("div", { key: '30c1508f93d6cc911e96992d8bf3ae1edff54fcc', tabindex: "-1", role: "menu",
             //TODO: slideout menu fades out, needs to be instant
             id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, h("slot", { key: '59168289af3be6afbf35af828da4800c1209809c' })), h(FocusGuard, { key: '688c55a2b0881c10204aa353123bc524c88a23b9', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: 'ebc44ee8022282e5baaf0141848dc623a819905e' })), h(FocusGuard, { key: 'e5d212d17206f611fc0b18d4566606c3abffe33b', moveFocusTo: this.closeButton })))));
     }
     get element() { return this; }
     static get watchers() { return {

package/lib/dist-custom-elements/duet-slideout.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-d77db171.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-188506d4.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { e as enableBodyScroll, d as disableBodyScroll } from './p-fc09c464.js';
 import { f as focusElement, F as FocusGuard } from './p-e30dc66d.js';
@@ -9,9 +9,9 @@ import { b as isEscapeKey } from './p-ca700701.js';
 import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './p-35375593.js';
 import { h as hasSlot } from './p-ad615991.js';
 import { T as Teleport } from './p-ca3cb21e.js';
-import { g as getColorByName } from './p-88ed3495.js';
-import { d as defineCustomElement$3 } from './p-b4289ed0.js';
-import { d as defineCustomElement$2 } from './p-1e88beeb.js';
+import { g as getColorByName } from './p-0562173d.js';
+import { d as defineCustomElement$3 } from './p-06932c23.js';
+import { d as defineCustomElement$2 } from './p-8b5ed6f5.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(8, 42, 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:600;width:100%;height:100%;padding-bottom:75px;overflow-y:auto;box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1) inset}.duet-slideout .dialog:not(.modal){box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.2)}@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(240, 247, 250)}.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(240, 247, 250);border-bottom:1px solid rgb(212, 223, 229)}.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 .dialog:not(.modal){box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.2)}.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, 247, 250)}.duet-slideout.duet-theme-turva .has-sticky-header-slot .sticky-header{background:rgb(245, 247, 250);border-bottom:1px solid rgb(222, 224, 228)}.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(8, 42, 77)}.duet-theme-turva slot{color:rgb(23, 28, 58)}";
 const DuetSlideoutStyle0 = duetSlideoutCss;
@@ -34,8 +34,12 @@ const DuetSlideout$1 = /*@__PURE__*/ proxyCustomElement(class DuetSlideout exten
         };
         this.isSafariBrowser = /^((?!chrome|android).)*safari/i.test(navigator === null || navigator === void 0 ? void 0 : navigator.userAgent);
         this.hasStickyHeaderSlot = false;
-        this.setOpenButton = (element) => {
+        this.setOpenButton = (element, addClickListener = false) => {
+            if (this.openButton) {
+                this.openButton.removeEventListener("click", this.openButtonEventListener);
+            }
             if (!element) {
+                this.openButton = undefined;
                 return;
             }
             try {
@@ -43,6 +47,9 @@ const DuetSlideout$1 = /*@__PURE__*/ proxyCustomElement(class DuetSlideout exten
                 button.accessiblePopup = "true";
                 button.accessibleExpanded = false;
                 this.openButton = button;
+                if (addClickListener) {
+                    this.openButton.addEventListener("click", this.openButtonEventListener);
+                }
             }
             catch (_e) { }
         };
@@ -90,11 +97,9 @@ const DuetSlideout$1 = /*@__PURE__*/ proxyCustomElement(class DuetSlideout exten
         if (this.opener === value) {
             return;
         }
+        this._opener = value;
         if (typeof value === "string") {
-            this.setOpenButton(document.getElementById(value));
-            if (this.openButton) {
-                this.openButton.addEventListener("click", this.openButtonEventListener);
-            }
+            this.setOpenButton(document.getElementById(value), true);
         }
         else {
             this.setOpenButton(value);
@@ -138,9 +143,7 @@ const DuetSlideout$1 = /*@__PURE__*/ proxyCustomElement(class DuetSlideout exten
         if (this.mutationObserver) {
             this.mutationObserver.disconnect();
         }
-        if (this.openButton) {
-            this.openButton.removeEventListener("click", this.openButtonEventListener);
-        }
+        this.setOpenButton(undefined);
         this.setStickHeaderStyleMutations(true);
     }
     handleOpenChange(newValue, oldValue) {
@@ -247,16 +250,16 @@ const DuetSlideout$1 = /*@__PURE__*/ proxyCustomElement(class DuetSlideout exten
         };
         const topLevelOpenMenuBarTranslation = getLocaleString(this.topLevelOpenMenuBarLangObject);
         const exitTranslation = getLocaleString(this.exitLangObject);
-        return (h(Host, { key: '7e5384e7a8da21a6bfcd4e6f84f8c0cb60d3250a' }, h("div", { key: 'a0ddecf72e05002132592afbea9ab503e8929698', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: 'bd9eb4bb301549c79486fbec4ec9cc3306001152', visible: this.open, "display-device": "large", zIndex: "600" }), h("div", { key: '8bcb933d1862b16a784105144cbb830b085b7a37', 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, { key: '41a80c4595a58da1bcd603e141e24292fc1424cf' }, h("div", { key: '5d7498bbf72f282746fbd98c6598cf0ef64c92fc', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: '4c75f1d7efb902c5a085c764f1dd5bd3110690d7', visible: this.open, "display-device": "large", zIndex: "600" }), h("div", { key: '02a46010735f650bd529528c654d14e9d86fd162', 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,
                 modal: this.modal,
-            }, style: styles }, h(FocusGuard, { key: '4f32ae824a9963b9324a6a75aec30a1ec3b9da34', moveFocusTo: this.closeButton }), h("div", { key: 'b3a2d23360f0080c3345925ab2dd3ba71726102e', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '346320e78d1b3b31cd27505873e27d9de14e7105', class: "top" }, h("button", { key: '70bd3ca676c250d31bf67ffc0cd4900c73d2e093', ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
+            }, style: styles }, h(FocusGuard, { key: '336ede420dcd736609210a4f4420359d7d7408ad', moveFocusTo: this.closeButton }), h("div", { key: '992217114a78eb26370dd40654693f3b693dae36', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '2ee4c40418f711ec612e2b1ac9654af56fcd994a', class: "top" }, h("button", { key: '48660c605accd14f318102ece5bcf1b0ee2fecec', 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, inert: this.openPanel }, h("duet-icon", { key: '1aa814b1f9015483a3b4bc7f473b5aede84f3cd0', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'f11c81c8efcdca2ddb6cdc987e2e1f220d467398', class: "sticky-header" }, h("slot", { key: 'e0bf8ba236ee29c1f1b497df27b337ab1f96628a', name: "sticky-header" }))), h("div", { key: 'dbf227d18aed0d6d3db65db6522ffda1b69d8dba', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
+            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: '8cd881f81db33a16072ef633bebfb5fc4faa7f17', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '3b1302d4a8e711ab31b6de50d23518f909cd5194', class: "sticky-header" }, h("slot", { key: 'eca82fca6e9b3eb68aad6092a799fa383f9172db', name: "sticky-header" }))), h("div", { key: 'e0c6e3c281d5a0451300675f7cc6fd808cd3382c', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
                 items: true,
-            } }, h("slot", { key: 'facef4d207e8df7c34a8aeca8595d832fd6de5e6' })), h(FocusGuard, { key: '5733820870caa0acd80b157d88b03ae1797360b8', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: '7b2f64fb669a13f1122b71b3a1866d2e3ff71557' })), h(FocusGuard, { key: 'b6bbd2ef228796ced15b024c03457ab37c15478c', moveFocusTo: this.closeButton })))));
     }
     get element() { return this; }
     static get watchers() { return {

package/lib/dist-custom-elements/duet-spacer.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetSpacer$1, d as defineCustomElement$1 } from './p-d5812145.js';
+import { D as DuetSpacer$1, d as defineCustomElement$1 } from './p-7307e4ef.js';
 
 const DuetSpacer = DuetSpacer$1;
 const defineCustomElement = defineCustomElement$1;