@duetds/components 9.2.8 → 10.0.0-alpha.0

package/lib/collection/components/duet-radio/duet-radio.js

@@ -1,9 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { Build, h, Host } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
+import { getElementsFromNamedSlot, hasSlot } from "../../utils/slot-utils";
 /**
  * @slot label - Label content.
  */
@@ -13,6 +14,70 @@ export class DuetRadio {
          * Own Properties.
          */
         this.radioId = createID("DuetRadio");
+        this.radioInputListenersRemove = radioInput => {
+            radioInput.removeEventListener("change", this.onChange);
+            //radioInput.removeEventListener("click", this.onRadioClick)
+            radioInput.removeEventListener("focus", this.onFocus);
+            radioInput.removeEventListener("blur", this.onBlur);
+        };
+        this.radioInputListenersAdd = radioInput => {
+            radioInput.addEventListener("change", this.onChange);
+            //radioInput.addEventListener("click", this.onRadioClick)
+            radioInput.addEventListener("focus", this.onFocus);
+            radioInput.addEventListener("blur", this.onBlur);
+        };
+        this.radioInputSetUp = () => {
+            const slotInput = this.element.querySelector("input[slot=input]");
+            const radioInput = slotInput || document.createElement("input");
+            radioInput.slot = "input";
+            radioInput.disabled = this.disabled || this.groupDisabled ? true : undefined;
+            radioInput.id = this.identifier || this.radioId;
+            radioInput.type = "radio";
+            radioInput.name = this.name;
+            radioInput.value = this.value;
+            radioInput.checked = this.checked;
+            if (this.accessibleIndex) {
+                radioInput.tabIndex = Number(this.accessibleIndex);
+            }
+            radioInput.required = this.required;
+            radioInput.role = this.role;
+            if (this.accessibleControls) {
+                radioInput.setAttribute("aria-controls", this.accessibleControls);
+            }
+            if (this.accessibleActiveDescendant) {
+                radioInput.setAttribute("aria-activedescendant", this.accessibleActiveDescendant);
+            }
+            if (this.accessibleOwns) {
+                radioInput.setAttribute("aria-owns", this.accessibleOwns);
+            }
+            if (this.accessibleDescribedBy) {
+                radioInput.setAttribute("aria-describedby", this.accessibleDescribedBy);
+            }
+            if (this.accessibleLabelledBy) {
+                radioInput.setAttribute("aria-labelledby", this.accessibleLabelledBy);
+            }
+            if (this.accessibleDetails) {
+                radioInput.setAttribute("aria-details", this.accessibleDetails);
+            }
+            if (this.accessibleDescription) {
+                radioInput.setAttribute("aria-description", this.accessibleDescription);
+            }
+            if (this.hasLabel) {
+                const slotContent = getElementsFromNamedSlot(this.element, "label");
+                radioInput.ariaLabel = slotContent.length > 0 ? slotContent[0].textContent : this.labelElement.textContent;
+            }
+            else {
+                radioInput.ariaLabel = this.labelElement.textContent;
+            }
+            if (slotInput) {
+                this.radioInputListenersRemove(radioInput);
+            }
+            else {
+                this.element.appendChild(radioInput);
+            }
+            this.radioInputListenersAdd(radioInput);
+            this.focusableElement = radioInput;
+        };
         /**
          * Component event handling.
          */
@@ -20,7 +85,9 @@ export class DuetRadio {
             ev.stopPropagation();
         };
         this.onChange = (ev) => {
-            this.checked = this.nativeInput.checked || false;
+            const input = this.focusableElement;
+            const inputChecked = input.checked;
+            this.checked = inputChecked;
             if (this.checked && !this.blockEvents) {
                 this.duetChange.emit({
                     originalEvent: ev,
@@ -31,6 +98,7 @@ export class DuetRadio {
             }
         };
         this.onBlur = (ev) => {
+            this.focus = false;
             this.duetBlur.emit({
                 originalEvent: ev,
                 checked: this.checked,
@@ -39,6 +107,7 @@ export class DuetRadio {
             });
         };
         this.onFocus = (ev) => {
+            this.focus = true;
             this.duetFocus.emit({
                 originalEvent: ev,
                 checked: this.checked,
@@ -46,6 +115,7 @@ export class DuetRadio {
                 component: "duet-radio",
             });
         };
+        this.focus = false;
         this.accessibleActiveDescendant = undefined;
         this.accessibleDetails = undefined;
         this.accessibleLabelledBy = undefined;
@@ -74,37 +144,39 @@ export class DuetRadio {
      */
     componentWillLoad() {
         inheritGlobalTheme(this);
-        this.hasLabel = Build.isServer
-            ? Array.from(this.element.children).filter(el => el.matches("[slot='label']")).length > 0
-            : !!this.element.querySelector(":scope > [slot='label']");
+        this.hasLabel = hasSlot(this.element, "label");
         if (this.value === undefined) {
             this.value = this.identifier;
         }
     }
+    componentDidRender() {
+        this.radioInputSetUp();
+    }
     /**
      * Sets focus on the specified `duet-radio`. Use this method instead of the global
      * `input.focus()`.
      */
     async setFocus(options) {
-        this.nativeInput.focus(options);
+        this.focusableElement.focus(options);
     }
     /**
      * render() function
      * Always the last one in the class.
      */
     render() {
-        if (Build.isServer) {
-            return;
-        }
-        const identifier = this.identifier || this.radioId;
-        return (h(Host, { onClick: this.onClick, class: {
+        return (h(Host, { key: '45b1545ee1fba45f0e798ecc8d00e3a1008626f8', 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", { class: { "duet-radio-container": true, "duet-theme-turva": this.theme === "turva" } }, h("input", { type: "radio", onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, value: this.value, tabindex: this.accessibleIndex, class: { "duet-radio": true, disabled: this.disabled || this.groupDisabled }, checked: this.checked, disabled: this.disabled || this.groupDisabled, required: this.required, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, role: this.role, name: this.name, id: identifier, ref: input => (this.nativeInput = input) }), h("label", { class: "duet-label", htmlFor: identifier }, h("div", { class: "duet-label-content" }, this.hasLabel ? h("slot", { name: "label" }) : this.label)))));
+            } }, 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: {
+                "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)))));
     }
     static get is() { return "duet-radio"; }
-    static get encapsulation() { return "scoped"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["duet-radio.scss"]
@@ -573,6 +645,11 @@ export class DuetRadio {
             }
         };
     }
+    static get states() {
+        return {
+            "focus": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "duetChange",

package/lib/collection/components/duet-radio-group/duet-radio-group.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { Build, h, Host } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { checkNamedSlotElement } from "../../utils/slot-utils";
 import { findCheckedOption, watchForOptions } from "../../utils/watch-options";
@@ -113,13 +113,10 @@ export class DuetRadioGroup {
      * Always the last one in the class.
      */
     render() {
-        if (Build.isServer) {
-            return;
-        }
-        return (h(Host, { onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, h("duet-fieldset", { label: this.label, labelHidden: this.labelHidden, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { name: "tooltip" }), h("div", { class: { "duet-radio-group": true, "duet-no-stacking": !this.responsive } }, h("slot", null)))));
+        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' })))));
     }
     static get is() { return "duet-radio-group"; }
-    static get encapsulation() { return "scoped"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["duet-radio-group.scss"]

package/lib/collection/components/duet-range-slider/duet-range-slider.js

@@ -2,11 +2,12 @@
  * Built with Duet Design System
  */
 import { colorGray, colorGrayTurva, colorPrimary, colorPrimaryTurva } from "@duetds/tokens";
-import { Build, h, Host } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import isInternetExplorer from "../../utils/is-internet-explorer";
 import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
+import { proxyInputToSlot } from "../../utils/slot-utils";
 const colors = {
     turva: {
         active: colorPrimaryTurva,
@@ -23,6 +24,7 @@ export class DuetRangeSlider {
          * Own Properties
          */
         this.rangeId = createID("DuetRange");
+        this.proxyId = createID("DuetRange");
         /**
          * Component event handling.
          */
@@ -86,6 +88,9 @@ export class DuetRangeSlider {
     disconnectedCallback() {
         unsubscribeTabbingChange(this);
     }
+    componentDidRender() {
+        proxyInputToSlot(this.element, this.proxyId, this.name, this.value, this.required);
+    }
     /**
      * Sets focus on the specified `duet-range-slider`. Use this method instead of the global
      * `input.focus()`.
@@ -104,9 +109,6 @@ export class DuetRangeSlider {
      * Always the last one in the class.
      */
     render() {
-        if (Build.isServer) {
-            return;
-        }
         const identifier = this.identifier || this.rangeId;
         const theme = this.theme === "turva" ? "turva" : "default";
         const { inactive, active } = colors[theme];
@@ -114,16 +116,16 @@ export class DuetRangeSlider {
         const rangeStyles = {
             background: `-webkit-linear-gradient(left,${active} 0%,${active} ${percentage}%,${inactive} ${percentage}%)`,
         };
-        return (h(Host, { class: { "duet-m-0": this.margin === "none", "duet-expand": this.expand } }, h("div", { class: {
+        return (h(Host, { key: '88829030a8bbb0f4f4029de9ec16b04e3e476798', class: { "duet-m-0": this.margin === "none", "duet-expand": this.expand } }, h("div", { key: 'be11c8a8f243506acbd30ee4676104dbcea9a1ba', 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("duet-label", { theme: theme, color: this.labelColor, weight: this.labelWeight, margin: "small", for: identifier }, this.label), h("output", { "aria-hidden": "true", htmlFor: identifier, class: "duet-output" }, this.value.toLocaleString(this.locale), this.unit), h("input", { 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("duet-label", { key: 'c732b5fee1e4bfdb9873dfea49c26fdc34d6b03d', theme: theme, color: this.labelColor, weight: this.labelWeight, margin: "small" }, this.label), h("output", { key: '43e6503a9b071299e557c6e39b64679e32f8f483', "aria-hidden": "true", htmlFor: identifier, class: "duet-output" }, this.value.toLocaleString(this.locale), this.unit), h("input", { key: '2cc4a064e002ac2c4ae45d6fd13f0bdc3401f5de', 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-label": this.label, "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" }))));
     }
     static get is() { return "duet-range-slider"; }
-    static get encapsulation() { return "scoped"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["duet-range-slider.scss"]

package/lib/collection/components/duet-range-stepper/duet-range-stepper.js

@@ -169,10 +169,10 @@ export class DuetRangeStepper {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: '43d93bf62ed3c3b091933da841d015662b158e50', class: {
+        return (h("div", { key: 'e398ec0cf2d35150c78f4e3475fd7e4c95d646ad', class: {
                 "duet-range-stepper": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, h("span", { key: '0eb7fa8f8e1f5853a16c85f8d9670c70d531f13a', class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { key: 'b89f2b93dfe5a510bf6acbdf30ce694ff1ac59dc', 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: 'a9d84ec5096ae382828ee82ba75bd558b08d49ea', 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: '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: "" })));
     }
     static get is() { return "duet-range-stepper"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-scrollable/duet-scrollable.js

@@ -222,21 +222,21 @@ export class DuetScrollable {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'ba1e4f4c2221fec32507a3ba66829f2f34dcb225', class: {
+        return (h(Host, { key: 'b4198b556c21a0b793694cfc88c23d2ae01d50bf', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
-            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: '5d9131e9e7be00a46d1f919d04127586cc9a6d91', class: {
+            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: 'c15a9e37829ff7f41eb5c90156f78086777a44d7', class: {
                 collapse: true,
                 hide: !this.needsScrolling && !this.collapsed,
-            } }, h("duet-button", { key: 'af675db06e61bd24d608ba0395ca54bd8feac172', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '686ee5f4804f2a3ffd059778eee189633615bf37', name: "collapse-button-label" })))), h("div", { key: '074caf18d31c3b9a019cebf7ca2e8ac6b7ca61e4', class: {
+            } }, h("duet-button", { key: '69ac59727a4efdf372e05a241e53f3f465278782', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '9ae0e03e390f546425e0c4a36ba4e1b14e9df548', name: "collapse-button-label" })))), h("div", { key: '693aa91ad582ae80b569a3d1c1cdcd6a2fd5b4fc', class: {
                 "duet-scrollable-items": true,
                 buttons: this.buttons,
                 center: this.center,
-            } }, this.buttons && this.renderButton("left"), this.renderFadeOverlay("left"), h("div", { key: '64cd0312d4a7b8db126efb7c153519d8c99f61a5', class: {
+            } }, this.buttons && this.renderButton("left"), this.renderFadeOverlay("left"), h("div", { key: 'f24739dbd27c222602e2aaf283e1ebdbc9a4af0b', class: {
                 "duet-scrollable-list": true,
                 collapsed: this.collapsed,
                 [`duet-overflow-padding--${this.padding}`]: this.padding !== "none",
-            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: '380081180cef409cb8b9e6cd4e572e0699678137' })), this.renderFadeOverlay("right"), this.buttons && this.renderButton("right"))));
+            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: 'a27f4a34f1c196b441eebf291c9cfd9e2a632299' })), this.renderFadeOverlay("right"), this.buttons && this.renderButton("right"))));
     }
     static get is() { return "duet-scrollable"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-section-layout/duet-section-layout.js

@@ -14,13 +14,13 @@ export class DuetSectionLayout {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '5a0fe7bda2f99a571bb9a91389d22bb429b92176', class: {
+        return (h(Host, { key: '7f434babace607653e64faabeddb9c27bb616862', class: {
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: 'fa8ce66fb4314c7b613db9d9c8a41a6184998e6f', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: 'eec70679e3914498d52cf5fabc0b6f107afcb263', class: {
+            } }, h("div", { key: '9fbdea587d94910e97eb9ecbea464c1778fc1ff8', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: 'f4c957ebabd014d3ebf626d7539f3542314ce0a1', class: {
                 "duet-layout": true,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("section", { key: 'a6816d9b522355e91cd3e226d5501b50b27ca0cc', class: "duet-main" }, h("slot", { key: 'be71578ddc8566d81734e0e036416767b0c42899' }))))));
+            } }, h("section", { key: 'd803f587fb3f7f481d22d2a3e3566bcd85c7f98b', class: "duet-main" }, h("slot", { key: 'fb1c82948b2d25d0437c41743abf0f9ed666b4d5' }))))));
     }
     static get is() { return "duet-section-layout"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-select/duet-select.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { Build, h, Host } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { checkNamedSlotElement } from "../../utils/slot-utils";
@@ -149,30 +149,27 @@ export class DuetSelect {
      * Always the last one in the class.
      */
     render() {
-        if (Build.isServer) {
-            return;
-        }
         const identifier = this.identifier || this.selectId;
-        return (h(Host, { onClick: this.onClick, class: {
+        return (h(Host, { key: '28f5db49f64ea0115fa20745df6d535fac98ca08', onClick: this.onClick, class: {
                 "duet-m-0": this.margin === "none",
                 "duet-expand": this.expand,
                 [`duet-select-variation-${this.variation}`]: true,
-            } }, h("div", { class: {
+            } }, h("div", { key: '73e7a3937df41f97d6501cb393b05a1e11e07b97', class: {
                 "duet-select-container": true,
                 "duet-label-hidden": this.labelHidden,
                 "duet-theme-turva": this.theme === "turva",
                 [`duet-select-variation-${this.variation}`]: true,
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { name: "tooltip" }), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("select", { ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required }, this.placeholder && (h("option", { disabled: true, selected: true, value: "" }, this.placeholder)), !this.processedItems ? (h("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {
+            } }, h("duet-label", { key: '1b908d4ce2db347aea7654f7d150c3536023be7e', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: 'f4ae4625f3844a0a4ff41ceeb5b09cc73f2c3139', direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '56432a29cd588587216dcb91b1d7fa29ae80c12d', name: "tooltip" }), this.caption && (h("duet-caption", { key: '2664591e6e79d7786ecd95e2136b7eb6ac46eb43', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '17a7d144eb109640535302879dc8e46622f7542a', class: "duet-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: '2777dafee5e8f98ca467b83cfa672aeb2bd51d26', id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("select", { key: '2d00bf64843b3d4402d75b50660baaa701e776bd', ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required }, this.placeholder && (h("option", { key: '9f4a48986073692a67a221d489c3bc9402324828', disabled: true, selected: true, value: "" }, this.placeholder)), !this.processedItems ? (h("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {
             return isOptionGroup(item) ? this.renderOptionGroup(item) : this.renderOption(item);
-        }))), h("div", { class: {
+        }))), h("div", { key: '00870092e20d5e30222ad0afa3072d1dfba03dce', class: {
                 "duet-select": true,
                 [`duet-select-variation-${this.variation}`]: true,
-            }, "aria-hidden": "true" }, h("span", { key: this.value, class: "duet-select-selected-value" }, this.getSelectedItemLabel()), (this.variation === "default" && (h("svg", { role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" })))) || (h("duet-icon", { theme: this.theme, name: "action-arrow-down-small", color: "currentColor", margin: "none", size: this.variation === "compact" ? "xxx-small" : "xx-small" }))), h("span", { class: "duet-keep-container-height", role: "presention", "aria-hidden": "true" }, "_")), h("span", { class: "duet-select-help", id: this.errorId, "aria-live": this.accessibleLiveError, "aria-atomic": "true", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
+            }, "aria-hidden": "true" }, h("span", { key: this.value, class: "duet-select-selected-value" }, this.getSelectedItemLabel()), (this.variation === "default" && (h("svg", { key: 'e1e57dfb22ba2d97a460c34b18a49355e8fa41a7', role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '5fedaf97f4a4293f318512cc312d4c1d6ac9fce2', d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" })))) || (h("duet-icon", { key: '52b2404b48602331e322f5ccf6f338cf5dba46e4', theme: this.theme, name: "action-arrow-down-small", color: "currentColor", margin: "none", size: this.variation === "compact" ? "xxx-small" : "xx-small" }))), h("span", { key: 'c647fdcfac98bfd444789464f4e89f905a3db068', class: "duet-keep-container-height", role: "presention", "aria-hidden": "true" }, "_")), h("span", { key: '2f8730fa473524bdc6fbfe52f295215fe023b984', class: "duet-select-help", id: this.errorId, "aria-live": this.accessibleLiveError, "aria-atomic": "true", "aria-relevant": "additions removals" }, this.error && h("span", { key: '438e8329537edfc708bb57ce8de8d91abb7aaae8' }, this.error)))));
     }
     static get is() { return "duet-select"; }
-    static get encapsulation() { return "scoped"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["duet-select.scss"]

package/lib/collection/components/duet-shaped-image/duet-shaped-image.js

@@ -25,9 +25,9 @@ export class DuetShapedImage {
         const style = {
             "--rotation": `${this.rotation}deg`,
         };
-        return (h(Host, { key: 'cb4154853051eec78a10658344407c1653d737b3', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: '5cab0035d46b9e020cf7e4a18105a999646ad437', class: {
+        return (h(Host, { key: '555cbcb9c76cbda51c3c4cede13d764de7334c4e', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: '11704c842ec39f85048625cc78eb3dac55c18508', class: {
                 "shaped-image": true,
-            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: '8c2d2bb60ac9042377402dea4453e4ec17885aac', class: "shaped-image-mask", role: "presentation" }, h("span", { key: '765b32769035c6746c0412be9fe3b70bf8c75039', class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
+            }, 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}")` } })))));
     }
     static get is() { return "duet-shaped-image"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-show-more/duet-show-more.js

@@ -90,12 +90,12 @@ export class DuetShowMore {
      * Always the last one of the class.
      */
     render() {
-        return (h(Host, { key: 'f2ae77fcd733d57404b733d43ffb049d3503ecd0' }, h("div", { key: 'a0a01d9f4ef3065ced4d4de652969744e6e1e227', class: {
+        return (h(Host, { key: 'e795502d610ccc4d9fb5e2820c6e50a58b1f1d9d' }, h("div", { key: '7f3dc284c84c60fea4742b85c080e43e4529b6f8', class: {
                 "duet-show-more": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
                 open: this.open,
-            } }, h("div", { key: '8b799e3b59a456e4873357daa72313f0d29bffcf', ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "0" : "" }, h("div", { key: 'e5e04fa045ab43f00086e8799f87ab2b57f0a13b', class: { "slotted-content": true } }, h("slot", { key: 'ca94e5187354a6debb373955df2d046a9c9271a4' }))), h("duet-button", { key: 'fc11f79ebc689843332bc829f108d62180fa62fe', id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, accessiblePressed: this.open, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "icon-right": true, icon: this.open ? "action-arrow-up-small" : "action-arrow-down-small", "icon-size": "medium-small", size: "small", margin: this.buttonMargin, padding: this.buttonPadding, theme: this.theme === "turva" ? "turva" : "default" }, h("span", { key: '63e4d04789225b2ff7938e8e1156345b14b6633f' }, this.open ? this.showLessLabel : this.showMoreLabel)))));
+            } }, h("div", { key: '7f2d9de11a429a5d9e219cdeb5835e2ea8be2c2b', ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "0" : "" }, h("div", { key: 'f10b510dd9a1369178d5bc4259d2ef55fc569e10', class: { "slotted-content": true } }, h("slot", { key: '21169537ec721827e96bd24710de3f5d6d81fa8f' }))), h("duet-button", { key: 'fd0aae5f657aeab52c5a9a49003e0d70c3644a10', id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, accessiblePressed: this.open, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "icon-right": true, icon: this.open ? "action-arrow-up-small" : "action-arrow-down-small", "icon-size": "medium-small", size: "small", margin: this.buttonMargin, padding: this.buttonPadding, theme: this.theme === "turva" ? "turva" : "default" }, h("span", { key: 'e4996c3f3a786b12ef395679e892ccce7d84399d' }, this.open ? this.showLessLabel : this.showMoreLabel)))));
     }
     static get is() { return "duet-show-more"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout/duet-slideout.js

@@ -243,16 +243,16 @@ export class DuetSlideout {
         };
         const topLevelOpenMenuBarTranslation = getLocaleString(this.topLevelOpenMenuBarLangObject);
         const exitTranslation = getLocaleString(this.exitLangObject);
-        return (h(Host, { key: '14fdba7fda5928417732464bfb4fd9b16f7b2064' }, h("div", { key: 'ad888076253b6aadf02beac7fd057ac3fb4fdf3d', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: '402885b296bd543ddbe8cf83908e90a181b9da10', visible: this.open, "display-device": "large", zIndex: "600" }), h("div", { key: 'e93a803cbfbe0be22ec7fd6f70c890bf1b652532', 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: '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: {
                 dialog: true,
                 hidden: !this.open,
                 modal: this.modal,
-            }, style: styles }, h(FocusGuard, { key: '0e6e26357b438fb966c72cf164a4c39ce8b235bd', moveFocusTo: this.closeButton }), h("div", { key: 'c65959274e1c3191495c03d01adb69c76d23e3e4', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'd03362b067baf916076e9992e63933b309e84e44', class: "top" }, h("button", { key: '893421c3ed8c0224031b2db5c2db1f1eb7f1791a', 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: '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: {
                 "slideout-close": true,
                 active: this.open,
-            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: '354bcaf0344522712c12904991ade60e97924b88', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'a55711bc7b1ad408dc4720372cedc676a303fe84', class: "sticky-header" }, h("slot", { key: '15ef13899e66f98dd681b8105528d8f55fd2f2a2', name: "sticky-header" }))), h("div", { key: '698ce98219d2c6d387e92b96a71967bc632dee00', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
+            }, 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: {
                 items: true,
-            } }, h("slot", { key: '75862e49d89cdd2e20ecaa574b1c76da95f3c1c6' })), h(FocusGuard, { key: 'e74750f4e595532c2fb7185a40f57efa7e032122', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: 'facef4d207e8df7c34a8aeca8595d832fd6de5e6' })), h(FocusGuard, { key: '5733820870caa0acd80b157d88b03ae1797360b8', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout-lang/duet-slideout-lang.js

@@ -35,7 +35,7 @@ export class DuetSlideoutLang {
      */
     render() {
         const langTranslation = getLocaleString(this.chooseLangObject);
-        return (h(Host, { key: 'a3f0902bcc3942cfdd9bd39d753bfcfeeebf8bd4' }, h("div", { key: 'e4b2d5245b065602e7b74bab03d2ad9a6390d5ab', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '10f383d1179787ca4dda410b10ac2785bcbbcc36', name: "navigation-language", margin: "none", color: "secondary" }), h("slot", { key: '3a3f899dd72eb996f48ac588474810a95fa6fc19' }))));
+        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' }))));
     }
     static get is() { return "duet-slideout-lang"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout-link/duet-slideout-link.js

@@ -26,12 +26,12 @@ export class DuetSlideoutLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '756d30871c5f34ca3520a5bdecf5269c6a0b4afb' }, h("a", { key: '16dfc8d2bcae2379ab25ce353eda255e79d6ad6b', class: {
+        return (h(Host, { key: 'dbcb8bf6b8c65743fb716cbdda625cf4ea5162f8' }, h("a", { key: '542c9910bad183af64eff3b965ef1cec19b4ac7b', 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: '6551aa92fee9498b1fc2b4ebb18a89ff1c72e607', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { key: 'f841f0d234ffca0d1dbaaae18e9de9f1de02de55', class: "label" }, h("span", { key: '452f28fecf67c0da43ea807dd572d1db83e10ae6' }, h("slot", { key: '896258d4f5fbcc5efa21d49cd867e0578302dbef' }), h("slot", { key: '6de4aa964201a5ffe68d7f894a499289db302527', name: "description" })), this.caret && (h("duet-icon", { key: '3b7c9337d8d76eb9bcc71fe7277e84599692bce4', 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: '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" }))))));
     }
     static get is() { return "duet-slideout-link"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout-panel/duet-slideout-panel.js

@@ -159,23 +159,23 @@ export class DuetSlideoutPanel {
         };
         const exitTranslation = getLocaleString(this.exitLangObject);
         const backTranslation = getLocaleString(this.backLangObject);
-        return (h(Host, { key: '10b414a1d813be3e7f5ef8070b2c1d984c25ac44' }, h("div", { key: '50ee38592ea290018fefaf87e3c8625579636ed9', class: {
+        return (h(Host, { key: '0318776fab9cea36b44efcbd8a066fc7a71aa59e' }, h("div", { key: '1d95822243d5c86ec5b5173e4e681b4146e4476f', class: {
                 "duet-slideout-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: '4222c80ec11e0f6acb4eeaebf216968e42537c70', 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: '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: {
                 link: true,
                 active: this.active,
-            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: 'ef87af453a36ae15d81ed98b882798092522610c', class: "duet-slideout-icon" }, h("duet-icon", { key: '540a8e1f36285104c675438d0a053ce5a8aeaa38', name: this.icon, size: "medium", margin: "none", color: "secondary" }), this.badge && h("div", { key: 'a90b2189e9b0fe8325b12db27faa55955a5aaa0b', class: "duet-slideout-badge" }))), h("span", { key: '9f266762f46f74d6c627098e57315df106bf9dfe', class: "label" }, h("span", { key: '60a41c1094f9ba9b51cd6e29666af8f601b8a8d2', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '4160b184173ed8e9e3e93cee11cb8b797911c350', name: "label" })), h("duet-icon", { key: '1572389c79f37ff516d2462ec7dfc9e6e740c6c8', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: 'fc738196e7f3d69ca2cc01db8fcbf5a7be3c39f1', ref: element => (this.dialog = element), class: {
+            }, 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: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, h(FocusGuard, { key: '00a3795728a3374280aaa5f2b6b97f67bac388c6', moveFocusTo: this.closeButton }), h("div", { key: '84e8cf7f05aedd1fd6df3f08cd06b66abbd1ef17', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'a462d45d835fe35e6ce1e64e9527aeae033c192f', class: "top" }, h("button", { key: '5b4eb5d8985437d6701987273dbe10d55185c0cf', 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: '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: {
                 back: true,
-            }, onClick: this.onClick }, h("duet-icon", { key: 'b17a49853ca91e459db693d0c1dcbe861f9ee663', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '033f64eb9236b0a1cc28214b0393f3c7e62d62f2' }, this.label.innerHTML), h("button", { key: '005c6e62887ae4effd15bc19266a4b72d45f11bc', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '0934dfbccb73be3827e684b1414f2a76c080b0fb', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '984c15369f3cd4a09dfd02efe5aa65effb2f453c', class: "sticky-header" }, h("slot", { key: '28aea810fee655e0039f9412a5a0e979d4e0991e', name: "sticky-header" }))), h("div", { key: 'd0fed891a8cd1320d5edd35d4461d1df9f1bec7d', tabindex: "-1", role: "menu",
+            }, 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",
             //TODO: slideout menu fades out, needs to be instant
             id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, h("slot", { key: '859c0b8b029620561483192901482f2d7ac69fd8' })), h(FocusGuard, { key: '5676e24c74f3223c83eaa6cf67d05cc93c8ea339', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: '59168289af3be6afbf35af828da4800c1209809c' })), h(FocusGuard, { key: '688c55a2b0881c10204aa353123bc524c88a23b9', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout-panel"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout-panel-dropdown/duet-slideout-panel-dropdown.js

@@ -40,16 +40,16 @@ export class DuetSlideoutPanelDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '79b5b5d923940bc3b0ab0515ccab7d498b327d5e' }, h("div", { key: 'b66ac749e1950d6c70c1c465479604cd91c03cfd', class: {
+        return (h(Host, { key: 'f7a1b3521e799c7792945551a66c1c295dd5ffdc' }, h("div", { key: 'd63da6a1f3650e633c97795042a7b34b8ad48302', class: {
                 "duet-slideout-panel-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: '7155b74267a0786267237b0170e30a4c20d8d180', 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: '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: {
                 active: this.active,
-            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: '014c5790e8eb52f02d10ecf398271b233b88f7b0', name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { key: 'be3875ea25d4f094220b3599aa15bf7e014e81bd', class: "label" }, h("slot", { key: '36b0112f4b2aa6ed192c19da3397beca24b8b29c', name: "label" }), h("duet-icon", { key: '2d4c1df9d41e97d1c7bb031252d31baa865a587c', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: 'a9729a27afa76ccee3c7d3b14e7d48dab1dcb7a3', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, 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: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '63761e3a8bbea310fbc531dd63eae808be5cf3e4' })))));
+            } }, h("slot", { key: '473c54c7f46f6cb77f5656ff8c7d60106836aa73' })))));
     }
     static get is() { return "duet-slideout-panel-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-spacer/duet-spacer.js

@@ -13,7 +13,7 @@ export class DuetSpacer {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '2c46d1a310dd476d040392ebcda6643f1981d624', class: {
+        return (h(Host, { key: '9983782e43b5323f7af87b3b18656794fa851208', class: {
                 "duet-spacer": true,
                 "duet-spacer-xx-small": this.breakpoint === "xx-small",
                 "duet-spacer-x-small": this.breakpoint === "x-small",

package/lib/collection/components/duet-spinner/duet-spinner.js

@@ -23,11 +23,11 @@ export class DuetSpinner {
      */
     render() {
         const color = this.color === "currentColor" ? "currentColor" : getColorByName(this.color);
-        return (h(Host, { key: '16af92c8d2b1991913980843b6d2a8dcb8646d67', class: {
+        return (h(Host, { key: 'dee78f5cd0044c327f345f8fc6f36a79eb92552e', class: {
                 "duet-custom-color": this.color !== "currentColor" && this.theme !== "turva" && this.theme !== "default",
                 "duet-theme-turva": this.theme === "turva" && this.color !== "currentColor",
                 "duet-theme-default": this.theme === "default" && this.color !== "currentColor",
-            } }, h("div", { key: 'e381215186c28e547272b8692f541cea84e0679f', class: {
+            } }, h("div", { key: 'e896d825e335fa91c0b583b17fce6b5012fee1ca', class: {
                 "duet-spinner": true,
                 [this.size]: true,
             }, style: { color }, "aria-label": this.accessibleLabel })));