@duetds/components 10.0.0-alpha.25 → 10.0.0-alpha.27

package/lib/collection/components/duet-phone-input/duet-phone-input.js

@@ -81,6 +81,11 @@ export class DuetPhoneInput {
          * Tooltip to display next to the label of the input.
          */
         this.tooltip = "";
+        /**
+         * If the value is set above before the component has rendered, the ref to duetInputElement has not yet been set.
+         * In these cases we set the value to this.pendingValue and after the first render pass it on to this.duetInputElement.
+         */
+        this.pendingValue = undefined;
         /**
          * Countries to list at the top of the popup-menu, given as an array or comma separated list of ISO 3166-2 codes.
          * @default ["FI", "SE"]
@@ -189,8 +194,13 @@ export class DuetPhoneInput {
         return (_c = (_b = (_a = this.duetInputElement) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.replace(/\s/g, "")) !== null && _c !== void 0 ? _c : "";
     }
     set value(val) {
-        this.duetInputElement.value = `${val}`.replace(/[^\d+ ]/g, "");
-        this.handleInput();
+        if (!this.duetInputElement) {
+            this.pendingValue = val;
+        }
+        else {
+            this.duetInputElement.value = `${val}`.replace(/[^\d+ ]/g, "");
+            this.handleInput();
+        }
     }
     /**
      * This is a proxy for the enclosed native inputs validity
@@ -207,6 +217,11 @@ export class DuetPhoneInput {
         checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
         this.setListFirstCountries();
     }
+    componentDidLoad() {
+        if (this.pendingValue) {
+            this.duetInputElement.value = this.pendingValue;
+        }
+    }
     connectedCallback() {
         connectLanguageChangeObserver(this, { prop: "label", defaults: "labelDefaults" });
         subscribeTabbingChange(this);
@@ -282,7 +297,7 @@ export class DuetPhoneInput {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-expand": this.expand,
                 "duet-m-0": this.margin === "none",
-            } }, h("div", { class: "duet-phone-input-container" }, h("duet-popup-menu", { ref: el => (this.countryCodePopup = el), scrollLimit: 10, showFilterInput: true }, this.countriesToList.map(country => country.isoCode === lastListFirstCode ? (h(Fragment, null, h("duet-popup-menu-item", { value: country.isoCode, onClick: this.handleCountryCodeSelectorSelect }, h("duet-grid", { alignment: "center" }, this.renderFlag(country.isoCode), h("span", null, country[this.language], " (+", country.telephoneCountryCode, ")"))), h("duet-divider", null))) : (h("duet-popup-menu-item", { value: country.isoCode, onClick: this.handleCountryCodeSelectorSelect }, h("duet-grid", { alignment: "center" }, this.renderFlag(country.isoCode), h("span", null, country[this.language], " (+", country.telephoneCountryCode, ")")))))), h("duet-input", { ref: el => (this.duetInputElement = el), onDuetChange: this.handleChange, onDuetFocus: this.handleFocus, onDuetBlur: this.handleBlur, onDuetInput: this.handleInput, label: this.label, caption: this.caption, error: this.error, name: this.name, component: "phone", variation: "button-left", type: "tel", disallowPattern: "[^\\+0-9 ]", required: this.required, disabled: this.disabled, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true }, h("duet-button", { ref: el => (this.countryCodeButton = el), slot: "button-left", variation: "input-button-left-secondary", margin: "none", fixed: true, icon: "action-arrow-down-small", iconSize: "small", iconRight: true, accessibleLabel: this.buttonAriaLabel[this.language], onClick: this.handleCountryCodeSelectorOpen }, h("span", { class: "flag-container" }, this.getFlagForButton())), h("slot", { name: "tooltip" })))));
+            } }, h("div", { class: "duet-phone-input-container" }, h("duet-popup-menu", { ref: el => (this.countryCodePopup = el), scrollLimit: 10, showFilterInput: true }, this.countriesToList.map(country => country.isoCode === lastListFirstCode ? (h(Fragment, null, h("duet-popup-menu-item", { value: country.isoCode, onClick: this.handleCountryCodeSelectorSelect }, h("duet-grid", { alignment: "center" }, this.renderFlag(country.isoCode), h("span", null, country[this.language], " (+", country.telephoneCountryCode, ")"))), h("duet-divider", null))) : (h("duet-popup-menu-item", { value: country.isoCode, onClick: this.handleCountryCodeSelectorSelect }, h("duet-grid", { alignment: "center" }, this.renderFlag(country.isoCode), h("span", null, country[this.language], " (+", country.telephoneCountryCode, ")")))))), h("duet-input", { ref: el => (this.duetInputElement = el), onDuetChange: this.handleChange, onDuetFocus: this.handleFocus, onDuetBlur: this.handleBlur, onDuetInput: this.handleInput, label: this.label, caption: this.caption, error: this.error, name: this.name, minlength: this.minlength, maxlength: this.maxlength, component: "phone", variation: "button-left", type: "tel", disallowPattern: "[^\\+0-9 ]", required: this.required, disabled: this.disabled, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true }, h("duet-button", { ref: el => (this.countryCodeButton = el), slot: "button-left", variation: "input-button-left-secondary", margin: "none", fixed: true, icon: "action-arrow-down-small", iconSize: "small", iconRight: true, accessibleLabel: this.buttonAriaLabel[this.language], onClick: this.handleCountryCodeSelectorOpen }, h("span", { class: "flag-container" }, this.getFlagForButton())), h("slot", { name: "tooltip" })))));
     }
     static get is() { return "duet-phone-input"; }
     static get encapsulation() { return "shadow"; }
@@ -684,6 +699,44 @@ export class DuetPhoneInput {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "maxlength": {
+                "type": "number",
+                "attribute": "maxlength",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use maxlength to specify the maximum length of the value that can be entered."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "minlength": {
+                "type": "number",
+                "attribute": "minlength",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use minlength to specify the minimum length of the value that can be entered."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "value": {
                 "type": "string",
                 "attribute": "value",

package/lib/collection/components/duet-popup-menu-item/duet-popup-menu-item.js

@@ -101,11 +101,11 @@ export class DuetPopupMenuItem {
         };
         // Without the role ternary Safari/iPhone wouldn't announce the label for role menuitem.
         // This is a tradeoff and now Safari announces these items as buttons and links with the label.
-        return (h(Host, { key: '8e31b4732e423f363115f217c220217f85a3899a', role: this.accessibleRole === "menuitem" && this.isSafariBrowser ? null : this.accessibleRole }, h(TagName, { key: '4c9a0b3966b5b11b3f8286fdc7bbe83ce93f5df9', ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "listitem" ? 0 : -1, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined, lang: TagName === "button" ? undefined : this.targetLanguage, hreflang: TagName === "button" ? undefined : this.targetLanguage }, this.leadingIcon && (h("duet-icon", { key: 'decd1fdc669965de735b9538d8256ea34b7d12b7', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: 'bd28f3d116506e2168fc3e5530d086fa0dd0edcd', class: "duet-popup-menu-item-label" }, h("slot", { key: '0aebe6bcf50f8fbbd7d89bbdc0c4f484f67adb6d' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: '616a80b13b29eb90f003a163bbcded07a551b58c', name: this.url && this.external
+        return (h(Host, { key: '69c44a1d58780969eb4ac52879cd12d91f138a54', role: this.accessibleRole === "menuitem" && this.isSafariBrowser ? null : this.accessibleRole }, h(TagName, { key: 'b4a7e9fc9c862bd2ef7e82abde09d9454e9b1585', ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "listitem" ? 0 : -1, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined, lang: TagName === "button" ? undefined : this.targetLanguage, hreflang: TagName === "button" ? undefined : this.targetLanguage }, this.leadingIcon && (h("duet-icon", { key: '8a4412f1d2aa25c099780b3441d4ed06699fe987', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: 'a08f5aef8339a1c96e16c05f87cf60bf0fda3a0e', class: "duet-popup-menu-item-label" }, h("slot", { key: '1ccdab3f89ce6fc1ce8222e7219c6d68f99ab61e' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: '0f2158f8bbbda5ef74e8b559d9c7399c15ec67b2', name: this.url && this.external
                 ? newWindowIcon.title
                 : this.active
                     ? "messaging-checked-small"
-                    : this.trailingIcon, size: (this.url && this.external) || this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { key: '74e587e4cc5c0c431f068bb7974ee8c385cf4259', class: "duet-popup-menu-item-trailing" }, this.trailingText))));
+                    : this.trailingIcon, size: (this.url && this.external) || this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { key: 'bdce9e7ce0ae1db78450e59113a6a48de13ef306', class: "duet-popup-menu-item-trailing" }, this.trailingText))));
     }
     static get is() { return "duet-popup-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-promo-card/duet-promo-card.js

@@ -70,12 +70,12 @@ export class DuetPromoCard {
             backgroundColor: backgroundColor ? backgroundColor : "none",
         };
         const TagName = this.url ? "a" : "div";
-        return (h(Host, { key: '427288a23a020a8ba83d29535a990685e56136cd', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: 'b34e5beb86c428cf1d23c252c9867d8109fa28c9', class: {
+        return (h(Host, { key: 'dc2cca9861a1e0c15b93ea6f29247986eb98d268', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: 'b0bf8b66f35c1edc6a61dbea64f18e3617ec2a11', 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: '3d17bf1dc1fa3bc580ef7feb08e1d749dafaec34', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: 'ba518b8e4449f267ebef440bed06ebb1349d90c5', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: '638d94d31bb60bec7019ed852f70269f73241d7e', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: '08e8bb35ced5d1f6fc9a442c017e96f3294c3341', class: "pre-heading" }, h("slot", { key: '3cc1c6bcaeea2e811bf8984b0574cc7086e997c3', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: 'edfb7d324d0d5f68392b7b4b2386183cad567698', class: "heading" }, h("duet-heading", { key: '57820fcebf0e3c172c232611843679bb47e41e61', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'e2b7014be3e8d44f00a418f76e1f9959a783e9e6' }, h("slot", { key: '094c582e2f0dfc6055563892bfa02dd9d5de4261', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '2af2637554173d2c40ad28bee0e589b6dc92a19c', class: "description" }, h("duet-paragraph", { key: 'f9a47265148a494e1803f5493ab359cfe4abb895', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '42af2e9a0d151bb22d303f453d481bb69891746c' }, h("slot", { key: '3a4173db824f27939a8abc88124a8751d10cbc71', name: "description" }))))), this.hasActionSlot && (h("div", { key: '59a84926d8d346d724980bef00e42a48a44574d1', class: "action" }, h("slot", { key: '52109f0d34365be7e7fe8ec5091ee5ddc5c83bce', name: "action" }))))))));
+            }, style: bannerStyles }, h(TagName, { key: '8e479735705a8fc5cbe67b78dc74d63eb351abb1', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: 'ca59fe0d082b54c7fcb3725d7ab17d9bcbdea992', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: 'bb932a867cca710efa77488065fea73293daddab', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: '642577f6fcd203efd73700e4c553502aa2d56733', class: "pre-heading" }, h("slot", { key: '153d63289a49239bc9aecdba096675757d4a1630', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '6a7cad0fc8841e0e65ddacd5d482d8df246923f6', class: "heading" }, h("duet-heading", { key: '5262b84f2429bc6c7e47876f24bc7139a8f1b46f', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '3cf56a75df5349003df143f2aa22cf439847a842' }, h("slot", { key: 'e6879565328b3898ee569cd7a13ad064da0686f7', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '1b6ce64573256914244b57f7a68297915846404c', class: "description" }, h("duet-paragraph", { key: '23e88abdcecce551c435aee9f927d64ec0e9ad61', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'e4e17be56c742e06ecafce3b10245e4a8fbeac5c' }, h("slot", { key: '87a1787857492630ca860582bd92d967899e6b41', name: "description" }))))), this.hasActionSlot && (h("div", { key: 'd24d4f1279e861f01dd9b36bd8bf6d2a765b9321', class: "action" }, h("slot", { key: '9abdd9f8370819e8d49ae68e7ee944d7bd970bdf', name: "action" }))))))));
     }
     static get is() { return "duet-promo-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -182,16 +182,16 @@ export class DuetRadio {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '173f8f9bee06f6f1fce187b223c661a737e724a5', onClick: this.onClick, class: {
+        return (h(Host, { key: '5b1a38835b8478e9e31e2893f654d4a7da0de880', 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: 'c234b7ed5eb36bcce5c89ebe92b3347245136267', class: { "duet-radio-container": true, "duet-theme-turva": this.theme === "turva" } }, h("slot", { key: '064045eefce1bcd83621abeba85129b345867a9e', name: "input" }), h("label", { key: '28efb57846fef34d8be372c9d9ac351120efa58d', inert: true, ref: element => (this.labelElement = element), class: {
+            } }, h("div", { key: '7397b43b1104dbdc870ec0ad65793bd372062eaf', class: { "duet-radio-container": true, "duet-theme-turva": this.theme === "turva" } }, h("slot", { key: '8daf569056a859f5362236e546a61e958ba4bcaf', name: "input" }), h("label", { key: '3acd012b17207cf38a15085d2cc868b3e4cc8c1c', 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: '1f6a2376b2c34c7f5479eac3817b3f3c92b7ca42', class: "duet-label-content" }, this.hasLabel ? h("slot", { name: "label" }) : this.label)))));
+            } }, h("div", { key: '5fb433fd2fe57f3e560fdefcabff68999301596a', class: "duet-label-content" }, this.hasLabel ? h("slot", { name: "label" }) : this.label)))));
     }
     static get is() { return "duet-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -158,7 +158,7 @@ export class DuetRadioGroup {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'b39897a5768066e81309d63d7f5c75c1c2eecfef', onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, h("duet-fieldset", { key: 'f26a8ac391a951b87e2015bfa3ffcfe63bc3f8c8', 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: '2c5bd82fbd17c3c959ee697de49ebc79382b08fd', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: 'ac3c4bc22b28dfb4e75d7ee646433f0dc54fd1cf', name: "tooltip" }), h("div", { key: '8eb867559bf7ad38008c675aea68ed32f4b1f78d', class: { "duet-radio-group": true, "duet-no-stacking": !this.responsive } }, h("slot", { key: 'b7c150d9ed7e6643a158032e3d110576358d14e2' })))));
+        return (h(Host, { key: '75281a29a3832c1cb7da47661917bfafc9c62417', onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, h("duet-fieldset", { key: '2901f0bea0d5dfc88cf8294e6327eae318126730', 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: '678ff82e3e50fcce19e728f2de3e6e5afdbab92b', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '9e6ab1dae2009df95255f36f15c81fffcfbf2550', name: "tooltip" }), h("div", { key: 'b5cafc4677568d85eb02dcd9db30a05415beabb7', class: { "duet-radio-group": true, "duet-no-stacking": !this.responsive } }, h("slot", { key: '7f6b9bf1351b7d2133068f7039aea53d8a8d51a3' })))));
     }
     static get is() { return "duet-radio-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -156,13 +156,13 @@ export class DuetRangeSlider {
         const rangeStyles = {
             background: `-webkit-linear-gradient(left,${active} 0%,${active} ${percentage}%,${inactive} ${percentage}%)`,
         };
-        return (h(Host, { key: '8ae2f8b801002f2d7f36a1f6f2c5d9de5e52d480', class: { "duet-m-0": this.margin === "none", "duet-expand": this.expand } }, h("div", { key: '3faa6f6b699d012b9d6ff43f0f5255dee1842fe8', class: {
+        return (h(Host, { key: 'b314e267c1ad480ad5bde17e9dcee976fd141e43', class: { "duet-m-0": this.margin === "none", "duet-expand": this.expand } }, h("div", { key: '87813c3a581e46540a20e21013e121db45cb7f5c', 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: '330e765a6f42437f0ec80c8fd12f02aa9c8f564d', theme: theme, color: this.labelColor, weight: this.labelWeight, margin: "small", for: identifier }, this.label), h("output", { key: '91a85bd1d5816c694a32882bbe3bce178afe76ba', "aria-hidden": "true", htmlFor: identifier, class: "duet-output" }, this.value.toLocaleString(this.locale), this.unit), h("input", { key: '9ccf4115591954ca7123216d7fda90ca24a3a06d', 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: 'b5d4bd9d56df7b88df2bdde8c28f1b01009e8821', theme: theme, color: this.labelColor, weight: this.labelWeight, margin: "small", for: identifier }, this.label), h("output", { key: '6c30c88731245730cfcf47e2d00a823147708e7d', "aria-hidden": "true", htmlFor: identifier, class: "duet-output" }, this.value.toLocaleString(this.locale), this.unit), h("input", { key: '3e72fea4ee736546b6eee5aa15e70c80d73ee4de', 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" }))));
     }
     static get is() { return "duet-range-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -196,10 +196,10 @@ export class DuetRangeStepper {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: '1b5b22965b01d2a7ae85b7339ee8645f8349f4b6', class: {
+        return (h("div", { key: '2a89e50996cd8e4042f3346509ddfa57d0bd52f1', class: {
                 "duet-range-stepper": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, h("span", { key: '54b38991bc5f22f1834a911aab5adcb3f5564728', class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { key: '1f0e154e3dc32e14ebf7ec696182b11915045b5a', 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: '2531345ee7783cc6b6c2e742abdf6240aea88bb9', 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: 'aaf1114df81cf75124d221b335b34836eab22c02', class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { key: 'b1b61bd073925f8bb4ecbbe04a90ed652f029254', 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: 'de3659fcb369d0501251878bf6a9edaa334893cf', 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

@@ -265,18 +265,18 @@ export class DuetScrollable {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'bc8b656d8f78f5f510d489faa85a4d2c4c15b913', class: {
+        return (h(Host, { key: '08bd619c649c87a18350a6482f12d1e4f5faa74f', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
-            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: '1964654ce6a29b231c13452ef75a6d7b5448da6e', class: {
+            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: 'bf374209112d29e4af9efff12abdf32d54b68b7b', class: {
                 collapse: true,
                 hide: !this.needsScrolling && !this.collapsed,
-            } }, h("duet-button", { key: '338e3a03214db233166699f2ed53f24a401113d8', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '574284b5aff3e856c4d752e5fea30b66a30b144d', name: "collapse-button-label" })))), h("div", { key: '8c4f8d877a2eb1bea136563524830c43a8a6e4ab', class: {
+            } }, h("duet-button", { key: '436c9918ceb503be3611af38dc0513ab300891af', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '64504fe187f7ce121654dbf25597dd06ef23fbb1', name: "collapse-button-label" })))), h("div", { key: '10852d822fc4164466dfe48b2ccf33904cae5e14', class: {
                 "duet-scrollable-items": true,
                 buttons: this.buttons,
                 center: this.center,
                 "duet-theme-turva": this.theme === "turva",
-            } }, this.buttons && this.renderButton("left"), h("div", { key: '8eee588b344791d7e40275b7c5ee8688a55848c7', class: {
+            } }, this.buttons && this.renderButton("left"), h("div", { key: '119261686c6a1e4511d4ed3ba74d3c5795f83b34', class: {
                 "duet-scrollable-list": true,
                 [`duet-scrollable-list--${this.buttonPosition}`]: true,
                 [`gap-${this.gap}`]: true,
@@ -284,7 +284,7 @@ export class DuetScrollable {
                 [`duet-overflow-padding--${this.padding}`]: this.padding !== "none",
                 [`duet-scrollable-list--${this.buttonPosition}`]: this.buttonPosition === "absolute",
                 "duet-scrollable-stretch": this.stretch,
-            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: '36bce964a756ce2b4ccd6314773baa06227e2530' })), this.buttons && this.renderButton("right"))));
+            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: 'dd02f8d349e59303232b4338d115fd192cb31f9b' })), this.buttons && this.renderButton("right"))));
     }
     static get is() { return "duet-scrollable"; }
     static get encapsulation() { return "shadow"; }
@@ -515,7 +515,7 @@ export class DuetScrollable {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "0"
             },
             "stretch": {

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

@@ -24,13 +24,13 @@ export class DuetSectionLayout {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'eb1923a8bfba01565e0452347752088c58d9ab08', class: {
+        return (h(Host, { key: '1423181d3efb8f77211a81db6dc7a415457b23f4', class: {
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '0c04bf013cc9644f09de55e114f3692022374c6f', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: 'bf2d3164111fad314c90114ce15e2b2488608505', class: {
+            } }, h("div", { key: '3b08e02d99ce4d269a90522f896ecfb43608c79f', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: '1c60dd6abba084bdf4b29b9cb4b6e94d137517e3', class: {
                 "duet-layout": true,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("section", { key: '5c07cbae7cf870868a5c8f897bf6393eb6a7e866', class: "duet-main" }, h("slot", { key: '5dea403267b9102ee9a375aac51c931bd0dde438' }))))));
+            } }, h("section", { key: 'be58aa5ae79e61f3ba8e2bbadb119d169ab51d59', class: "duet-main" }, h("slot", { key: '43f94baf777b2626fefaa2a85d752f3e4652ed94' }))))));
     }
     static get is() { return "duet-section-layout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -200,23 +200,23 @@ export class DuetSelect {
      */
     render() {
         const identifier = this.identifier || this.selectId;
-        return (h(Host, { key: '3d3bc7d84000806ae8fab973ba04c08a25dc0c2f', onClick: this.onClick, class: {
+        return (h(Host, { key: '12696ad891ed3aac656379150b4fb42ee9b438eb', onClick: this.onClick, class: {
                 "duet-m-0": this.margin === "none",
                 "duet-expand": this.expand,
                 [`duet-select-variation-${this.variation}`]: true,
-            } }, h("div", { key: 'fe0f4b2d68a812713191449693d63fa56513164e', class: {
+            } }, h("div", { key: '48c83de632dfb790e5cde841fd86e518806ab9d0', 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(DuetInternalLabel, { key: 'a44feea69dd179e6c27685de9074cf3fa966b571', 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: '7a3d46b3f60d283ecfa474b05a918fa8c505d1aa', direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '3566d83ece8668e83b0ccde241ed49418ed941e4', name: "tooltip" }), this.caption && (h("duet-caption", { key: '709ed39dea050b314217f5de4190535166a82f3c', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'cf8a14439328e37ccc1d41c38190c18414b894ea', class: "duet-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: '1b439a475ac5a6220bbab2d93f827c089a7a5c7b', id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("slot", { key: '15182f28fa38955377dc822ab7d8ff61238cb4d8' }), h("select", { key: '99ca572fb0b31f28659712b18accef2b30225d4a', 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: '8e7c047411a37cd3a8a82415566d6f73e71a5533', 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(DuetInternalLabel, { key: '58a180baf718e83ccd6afc154b0986098c378041', 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: 'e569b839a9c0c2e02624ec892239f94f84c0d2b5', direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: 'd6d7c011dfb11ddadbaf95b5391c124d1e7a76f1', name: "tooltip" }), this.caption && (h("duet-caption", { key: 'eeff5cb9ef75a161020d0c3ed5d7c4bc22cc2f75', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'b483936049468a651634c5d5e075c860d1ddbc91', class: "duet-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: 'eb3c277270c2177dfd2a2381d137815d22681d4f', id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("slot", { key: 'b6a901c14de9ba56540e08e685b1ae4bd95bfde3' }), h("select", { key: '19653ed57dce9ee8ebb05c92530e49940e72dd4c', 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: '61d96c9c682e4789d6ee1c38c7e77683851aea20', 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", { key: '05ac432d89ce773e077f01f7b272484f110f10db', class: {
+        }))), h("div", { key: 'c54b8f6526bdb4c98ea68c129515f218d0f6d72d', 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", { key: '3c6969c19468b5a26e8cc95ec2947442dcebc42a', role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '36c334a0f8ce00a2b0099d3941570f8526d15dbb', 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: 'f0698dcc03bf523766986c548fa5cad2a6b1875c', theme: this.theme, name: "action-arrow-down-small", color: "currentColor", margin: "none", size: this.variation === "compact" ? "xxx-small" : "xx-small" }))), h("span", { key: 'ae2878e5f962708b0a8cdcf15e22c79e9b26f9d5', class: "duet-keep-container-height", role: "presention", "aria-hidden": "true" }, "_")), h("span", { key: '9f818a79660ccb1e79c0b5160541da183d5b371e', class: "duet-select-help duet-select-error", id: this.errorId, "aria-live": this.accessibleLiveError, "aria-atomic": "true", "aria-relevant": "additions removals" }, this.error && h("span", { key: '38b9169e9a7418f193b97512f6303a8e90215e06' }, this.error)))));
+            }, "aria-hidden": "true" }, h("span", { key: this.value, class: "duet-select-selected-value" }, this.getSelectedItemLabel()), (this.variation === "default" && (h("svg", { key: '975172b711f315f369710ab9999b4923e8fd2e6c', role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '4ad21d1d0deb94b461d329c447165357d6c3fe41', 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: '69d1a79414b3f6a979f5f949f16c386e79c92014', theme: this.theme, name: "action-arrow-down-small", color: "currentColor", margin: "none", size: this.variation === "compact" ? "xxx-small" : "xx-small" }))), h("span", { key: 'da0790b7bc5ef09391ac1b111b168e0ea4a699e5', class: "duet-keep-container-height", role: "presention", "aria-hidden": "true" }, "_")), h("span", { key: 'ff0bd43faa6dee4142d0ae21c780becd40a73e8f', class: "duet-select-help", id: this.errorId, "aria-live": this.accessibleLiveError, "aria-atomic": "true", "aria-relevant": "additions removals" }, this.error && h("span", { key: '7b5256e5baf684112fc012ac735261731e128bb2', class: "duet-select-error" }, this.error)))));
     }
     static get is() { return "duet-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,9 +33,9 @@ export class DuetShapedImage {
         const style = {
             "--rotation": `${this.rotation}deg`,
         };
-        return (h(Host, { key: 'f1e1775c6baa92468f792435cbd7bf6b9b1bc04b', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: '9a55361487de0adea55f23a48613607bb366d712', class: {
+        return (h(Host, { key: '27f36b3527731cc1d47a65655e150c963b9a23d9', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: 'b3d7bf5649da0a77e9bee42baab54840e47f9505', class: {
                 "shaped-image": true,
-            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: 'cab98476c89fa5d135797f18601d1cd7f86be610', class: "shaped-image-mask", role: "presentation" }, h("span", { key: '03e422ae06acfbb4e5889d2f48e4eee064426877', class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
+            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: '84fe60ad6ee4fdcc2544b07c5c07a214cf5efb15', class: "shaped-image-mask", role: "presentation" }, h("span", { key: 'edb1df30260d26bb87ef59a97aa031c97e4dce6d', 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-share-chart/duet-share-chart.js

@@ -63,10 +63,12 @@ export class DuetShareChart {
         this.itemsTotalValue = this.items.reduce((total, { value }) => total + value, 0);
     }
     render() {
-        return (h(Host, { key: 'ecdd674f7aafaac0d6ce2b92ffee521d33f04f54' }, h("div", { key: '162f5b9eab9a30df3861a97264691d3796500286', class: "duet-share-chart-horizontal-bar", role: "presentation" }, this.items.map(item => (h("span", { class: "duet-share-chart-share", style: {
+        return (h(Host, { key: 'c22523d7e91ce5ef59f5553ed847309cc45c9499' }, h("div", { key: '9aa4f2e4c117c5f7c30bce27585c7abc4d5568ea', class: "duet-share-chart-horizontal-bar", role: "presentation" }, this.items
+            .filter(i => !!i.value)
+            .map(item => (h("span", { class: "duet-share-chart-share", style: {
                 width: `${(item.value / this.itemsTotalValue) * 100}%`,
                 backgroundColor: getColorByName(item.color, this.theme),
-            } })))), h("ul", { key: 'fbfb17146f550b7812355d34f4a0c44b667f1a58', class: "duet-share-chart-item-list" }, this.items.map(item => (h("li", { class: { "duet-theme-turva": this.theme === "turva" } }, h("span", { class: "duet-share-chart-item-color", style: { background: getColorByName(item.color, this.theme) } }), h("span", { class: "duet-share-chart-item-text" }, item.text, ":"), h("span", { class: "duet-share-chart-item-value" }, "\u00A0", formatNumber(item.value), "\u00A0", this.unit), this.unit !== "%" && (h("duet-visually-hidden", null, `${formatNumber((item.value / this.itemsTotalValue) * 100, 0)} %`)))))), h("slot", { key: '79fc779211d3b265620226647dcbd3508ad3c86c' })));
+            } })))), h("ul", { key: '428d17dde9185b071455325d5d2195618f4a0267', class: "duet-share-chart-item-list" }, this.items.map(item => (h("li", { class: { "duet-theme-turva": this.theme === "turva" } }, h("span", { class: "duet-share-chart-item-color", style: { background: getColorByName(item.color, this.theme) } }), h("span", { class: "duet-share-chart-item-text" }, item.text, ":"), h("span", { class: "duet-share-chart-item-value" }, "\u00A0", formatNumber(item.value), "\u00A0", this.unit), this.unit !== "%" && (h("duet-visually-hidden", null, `${formatNumber((item.value / this.itemsTotalValue) * 100, 0)} %`)))))), h("slot", { key: '2f394e013dfe0a533524bef6f0649f57d1c2d957' })));
     }
     static get is() { return "duet-share-chart"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-share-chart-item/duet-share-chart-item.js

@@ -10,7 +10,7 @@ export class DuetShareChartItem {
         this.value = 0;
     }
     render() {
-        return (h(Host, { key: 'd018941bdb98ff2a561661ac4ced29081d0783c5' }, h("div", { key: '3b07a96aa1150f1f51ab3a08344bd656c9d52eef', hidden: true }, h("slot", { key: 'cc7299ead2dbe45e3005a48a8da09bb7eb2fd9e0' }))));
+        return (h(Host, { key: 'fb5eafa552f0f72600a3cec4b325ce891073f5bb' }, h("div", { key: 'b982b99b868fee7e0211a9b0dba7306eb2615874', hidden: true }, h("slot", { key: 'e8501789a378faa695408b024dd6d7c83aa3c1c9' }))));
     }
     static get is() { return "duet-share-chart-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -136,12 +136,12 @@ export class DuetShowMore {
      * Always the last one of the class.
      */
     render() {
-        return (h(Host, { key: 'a43de6a4bae0a8c38852a11a7b384b7f104ec024' }, h("div", { key: '74f8d429039d38ea1151aeab159f34cfed375df6', class: {
+        return (h(Host, { key: '5a2691671f8db729580e5e163f0a4172065b60a1' }, h("div", { key: 'd00e9ad7eec18c34b53f35be55000cc238e96d41', class: {
                 "duet-show-more": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
                 open: this.open,
-            } }, h("div", { key: '1e7b359e2ec056100a22d4fcdf12a9afd3432f36', ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "-1" : "" }, h("div", { key: 'd56eb046a4f700defffcefd1c279149ab85b68ae', class: { "slotted-content": true } }, h("slot", { key: '4978e6989abb32797fd956d5bb35d1e860b63f71' }))), h("duet-button", { key: 'ba557d00ed023a0b31efcf3480e1b30b326e6799', 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.isSafariBrowser ? this.open : null, 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: '106762507a1b6c28e334d0c383ff481b9a4bf8aa' }, this.open ? this.showLessLabel : this.showMoreLabel)))));
+            } }, h("div", { key: '4db263318b4e7dd0a0b79d2ce7db9708194246c4', ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "-1" : "" }, h("div", { key: 'e3a7ffd7b7acf798ecbcbacd26e721471c48c447', class: { "slotted-content": true } }, h("slot", { key: 'db2dbe58ad4f75648f0e98c80dd00a1909f745f9' }))), h("duet-button", { key: '9ece7898fa0ad9effd08cc728b38d580aad8e906', 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.isSafariBrowser ? this.open : null, 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: '4f697ac0915ece52e0edb022923f05e2c2812cb1' }, 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.css

@@ -29,6 +29,8 @@
   width: 100%;
   visibility: hidden;
   opacity: 0;
+  transition: opacity 300ms ease;
+  transition-delay: 300ms;
 }
 
 :host([open]:not([open=false])) ::slotted(*) {
@@ -62,28 +64,20 @@
 .duet-slideout .dialog {
   position: fixed;
   top: 0;
+  right: 0;
   bottom: 0;
-  left: 0;
+  left: auto;
   z-index: 600;
-  width: 100%;
-  height: 100%;
+  width: min(450px, 100%);
   padding-bottom: 75px;
   overflow-y: auto;
   box-shadow: 0 3px 6px 0 rgba(0, 41, 77, 0.1) inset;
+  transition: bottom 300ms ease;
+  transition-delay: 0s;
 }
 .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;
@@ -102,6 +96,8 @@
   align-items: center;
   justify-content: flex-end;
   padding: 4px;
+  opacity: 1;
+  transition: opacity 300ms ease;
 }
 .duet-slideout .dialog .top button {
   cursor: pointer;
@@ -127,17 +123,28 @@
   align-items: flex-start;
   justify-content: center;
   width: 100%;
-  padding: 0 1.5rem;
+  padding: 12px 20px;
+  opacity: 1;
+  transition: padding 600ms ease, opacity 300ms ease;
+  transition-delay: 300ms;
+}
+@media (min-width: 36em) {
+  .duet-slideout .dialog .items {
+    padding: 16px 28px;
+  }
 }
 .duet-slideout .dialog.hidden {
+  bottom: 100vh;
   pointer-events: none;
   visibility: hidden;
+  transition: 300ms ease;
 }
-@media (min-width: 62em) {
-  .duet-slideout .dialog.hidden {
-    right: -500px;
-    transition: 300ms ease;
-  }
+.duet-slideout .dialog.hidden .items {
+  padding-top: 28px;
+  opacity: 0;
+}
+.duet-slideout .dialog.hidden .top {
+  opacity: 0;
 }
 .duet-slideout.duet-theme-turva .dialog {
   box-shadow: 0 3px 6px 0 rgba(23, 28, 58, 0.1) inset;

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

@@ -294,16 +294,16 @@ export class DuetSlideout {
         };
         const topLevelOpenMenuBarTranslation = getLocaleString(this.topLevelOpenMenuBarLangObject);
         const exitTranslation = getLocaleString(this.exitLangObject);
-        return (h(Host, { key: '80fe71cba1f67117359472cbc3d59ec80910cca2' }, h("div", { key: 'b4611be3d11b74e906804f32fa54f09ef03c9319', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: '72729044a85b3915f914f9b37efc503601681aed', visible: this.open, "display-device": "large", zIndex: "600" }), h("div", { key: 'dd793703df1c6412ba02021f6ee26232180db120', 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: 'ad0060e5e7d7b09eda9fe1c00d917a24cd72425e' }, h("div", { key: 'ffe49d23661b5297b214ce27e88defba216f840e', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: 'ed8951a46a9e18802724ca812ad1c0248d7ba334', visible: this.open, zIndex: "600" }), h("div", { key: '1fdbc5b634dc380494c1b389514c4bb24c3867e5', 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: '7217cb29c43fcab1a4d7a0ab2bc25516d5a3db86', moveFocusTo: this.closeButton }), h("div", { key: 'f660e3d4126342062aeef72abb440bfd8c638b26', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '05ed9fae1dd41c76c8af9e31ec907cc58f83d3d5', class: "top" }, h("button", { key: '65d0a9c2feb22186f337961c6967021d9dbc97f4', 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: '0dc00c309bd543a23e1ea874cb6398c2c39e1411', moveFocusTo: this.closeButton }), h("div", { key: '8d2adfc16b01db12ca6f7c47810cdee6021e5460', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'e389d21af73e9d8163ca89a167f0bbd596ba3450', class: "top" }, h("button", { key: '2bd8df761d9064e5ef73c4ebc98485e1754afe2e', 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: 'db5c0e81b4fdb700e9cd790249abcc7be8ddb93d', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '3056bf2ec202421d6314e9bbec1176990dac8d7d', class: "sticky-header" }, h("slot", { key: 'c9c7e39ec4d453a110ad37ba6e273bcb50cfe8a8', name: "sticky-header" }))), h("div", { key: 'a051d32697cb79fdf3dddcc5c28c5f6e1e11afb3', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
+            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: 'cb4da32359194cfa8c1cea2d09f5ebdfae3d1537', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'ede6365d0ba52b6794916367a4e42535a3666b98', class: "sticky-header" }, h("slot", { key: '58a33822c3e852ebd1e69fdc6f4be40f76e3c8a8', name: "sticky-header" }))), h("div", { key: '216d18823ac4376220aa985f5043ff3aa293fd40', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
                 items: true,
-            } }, h("slot", { key: 'b552c7adcb64a48b13ae808a26037b0c6ba34021' })), h(FocusGuard, { key: 'eb6637a6a2c879f6bcab0f798f8f13639d2fdc68', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: '495d7d363e0b0697b0733bec84c57cd234cdfcc9' })), h(FocusGuard, { key: 'a74db283e802ea746bf2777ffb4bd36f35412886', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -24,7 +24,7 @@
 
 .duet-slideout-lang {
   display: flex;
-  gap: 20px;
+  gap: 16px;
   align-items: center;
   justify-content: flex-start;
   width: min-content;
@@ -43,7 +43,7 @@
 ::slotted(:not(:last-child))::after {
   position: absolute;
   top: 25%;
-  right: -16px;
+  right: -14px;
   width: 2px;
   height: 50%;
   content: "";

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

@@ -38,7 +38,7 @@ export class DuetSlideoutLang {
      */
     render() {
         const langTranslation = getLocaleString(this.chooseLangObject);
-        return (h(Host, { key: '20fb38dbab51fb94d8cb27d0be873d5857809716' }, h("div", { key: 'eac5154fff5df2c8358398a3228909c0cf960b35', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: 'c5b9b485d6ab7fcd2172bb951ad88640d1979fee', name: "navigation-language", margin: "none", color: "secondary" }), h("slot", { key: '68cdb507db897fff3e4738ac384fdf504059943e' }))));
+        return (h(Host, { key: '8847b4894f616c58b889e51d183c71ec672554fc' }, h("div", { key: '86a6652e67569a898f9aceea571fd656ae22bfa6', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '038bdf514daccd3f28a27ad0225f4a46ea84ecea', name: "navigation-language", margin: "none", color: "secondary", size: "small" }), h("slot", { key: '49e912e3e178c2d4c3042c4d9d1ae39991bbef52' }))));
     }
     static get is() { return "duet-slideout-lang"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,7 +27,7 @@
 .duet-slideout-link {
   position: relative;
   display: flex;
-  gap: 20px;
+  gap: 16px;
   align-items: center;
   justify-content: flex-start;
   width: 100%;
@@ -78,11 +78,11 @@
   --active-translate-y: 1px;
 }
 .duet-slideout-link.medium {
-  font-size: 1.25rem;
+  font-size: 1rem;
   font-weight: 600;
 }
 .duet-slideout-link.large {
-  font-size: 1.5rem;
+  font-size: 1.25rem;
   font-weight: 800;
 }
 .duet-slideout-link .label {

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

@@ -77,12 +77,12 @@ export class DuetSlideoutLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'b0e234fc3dac2e49ce7e1cb175f1599ab9275530' }, h("a", { key: '3ec02799b58d7b1d44bfc5b0e24bf65720db1c3a', target: !this.href ? null : this.external ? "_blank" : "_self", class: {
+        return (h(Host, { key: 'eca2104ff848dfd3c52bab08c4377d19e374d13d' }, h("a", { key: '9915adbb807d80081d2d791f36926a5b8a6b2a3e', target: !this.href ? null : this.external ? "_blank" : "_self", 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.href && getAccessibleLinkLabel(this)) || this.accessibleLabel, rel: this.external ? "noopener" : undefined }, this.icon && (h("duet-icon", { key: 'b9e3b673239c5b9655c01bcec4a2a5abe515bd88', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { key: '498acf483827529da2b9f512228ca158edaf8faa', class: "label" }, h("span", { key: 'e6415f10f37d8b957ce06e93b5cbb042634d1672' }, h("span", { key: '53865ac539a3312b509ffb15594e72f9fa4d0f33', class: "label-container" }, h("span", { key: '81cbf04aec6b336558641516b55a554a11751aa7', class: "label-content" }, h("slot", { key: 'f217af73f101e8a8a9ab71f611f759f4c8a8ceef' })), this.external && (h("duet-icon", { key: '0696dda9b2fe219b2a76a0c65855d47cd151bc55', class: "external-icon", theme: this.theme, name: newWindowIcon.title, margin: "none", size: "auto", color: "currentColor" }))), h("slot", { key: '497d712ed9f5155cee76d0c9cca080a89fb26ea2', name: "description" })), this.caret && (h("duet-icon", { key: 'b3057bf91b4062442a5c7823d12c714ca74d86ae', 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.href && getAccessibleLinkLabel(this)) || this.accessibleLabel, rel: this.external ? "noopener" : undefined }, this.icon && (h("duet-icon", { key: 'eabe8fda17546094fafc6fa4a253e05c63fc1938', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "small", margin: "none" })), h("div", { key: '98d30980e7ac325c36be8bb86b788d60cd36831d', class: "label" }, h("span", { key: '7f96584e0ee24069a7cc9afc2649d3a0a7fe8758' }, h("span", { key: '2b844eb1ae6ff0f7215e7979776c673e6f1accfb', class: "label-container" }, h("span", { key: 'd6de09afc6dbb0cfd6855f98e34c6b7b0b2c6421', class: "label-content" }, h("slot", { key: 'ef0c11c80556e88596d115ef534f86cc044362f8' })), this.external && (h("duet-icon", { key: 'ffe4c9d8a90105199e4a79702847705f958adf00', class: "external-icon", theme: this.theme, name: newWindowIcon.title, margin: "none", size: "auto", color: "currentColor" }))), h("slot", { key: 'd329594665a0964175ea0872747342f4e070227d', name: "description" })), this.caret && (h("duet-icon", { key: 'aafabb173724e1a6b736f289a7d76582f03f78c4', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
     }
     static get is() { return "duet-slideout-link"; }
     static get encapsulation() { return "shadow"; }