@duetds/components 9.15.0 → 9.16.0

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

@@ -18,6 +18,11 @@ export class DuetPhoneInput {
             fi: "Valitse maatunnus",
             sv: "Välj landskod",
         };
+        /**
+         * 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;
         this.setListFirstCountries = () => {
             const listFirstCodes = (typeof this.listFirst === "string" ? this.listFirst.split(",") : this.listFirst).map(c => c.trim().toUpperCase());
             const listFirstCountries = Object.values(countries).filter(c => listFirstCodes.includes(c.isoCode));
@@ -91,6 +96,8 @@ export class DuetPhoneInput {
         this.name = undefined;
         this.error = "";
         this.tooltip = "";
+        this.maxlength = undefined;
+        this.minlength = undefined;
         this.listFirst = ["FI", "SE"];
     }
     /**
@@ -145,8 +152,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
@@ -163,6 +175,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);
@@ -238,7 +255,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"; }
@@ -640,6 +657,44 @@ export class DuetPhoneInput {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "maxlength": {
+                "type": "number",
+                "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,
+                "attribute": "maxlength",
+                "reflect": false
+            },
+            "minlength": {
+                "type": "number",
+                "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,
+                "attribute": "minlength",
+                "reflect": false
+            },
             "value": {
                 "type": "string",
                 "mutable": false,

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

@@ -69,11 +69,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: 'eade853d9656feba3f1c183a9d496b056b1efab1', role: this.accessibleRole === "menuitem" && this.isSafariBrowser ? null : this.accessibleRole }, h(TagName, { key: '390261bc354ca208b61e9d653478dc2a9d6db956', 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: '0e33f555ecced822df70e017274ef9b2a05806b3', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: '7223f5c991169e250db10d39513a14379e8a328c', class: "duet-popup-menu-item-label" }, h("slot", { key: '0ef37ea3f2a8246a7fcc4d611cae5792fedc6588' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: 'c79c060559a1fe3698b321ba3f91a95949cf0320', name: this.url && this.external
+        return (h(Host, { key: 'd62c7b684bbf98e2ff38ae6303e7aaad03942ff9', role: this.accessibleRole === "menuitem" && this.isSafariBrowser ? null : this.accessibleRole }, h(TagName, { key: '171d91b4a5f612c2b60a7c908ca0da3a0824e2fd', 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: '37db0ce85c42bb23dd33c522a5ebcaa174df58fa', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: '8af23f7a78dc25f8d1d05adfdd8dc3bd1d489af8', class: "duet-popup-menu-item-label" }, h("slot", { key: 'ef86e949a4bacdc7755e6e49f5814d554584a9be' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: 'e20daf8a4e639ab2369cc9b8f5a1c725480f60ad', 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: 'bef480bed8100c06a5f8acf0e059dab3896f94d5', 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: 'e2dd555bf026bf0197428aec002bb0d49f532bb5', 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

@@ -53,12 +53,12 @@ export class DuetPromoCard {
             backgroundColor: backgroundColor ? backgroundColor : "none",
         };
         const TagName = this.url ? "a" : "div";
-        return (h(Host, { key: 'b3cf1ece939303bd018e7867fd778f5a87ee3cd8', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '0092deba7be1b2919449ad5dfd8dded164e87f05', class: {
+        return (h(Host, { key: '8f689b5d1894c5e0662f73aea0aed2b93d693d72', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '0eddae7614061bf37233ab26b7c5ce7960961cc6', 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: '7e1fb4a4ea214ab7e20adc52f39bfb32ed8e2a1c', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: 'b5a0b853b6acadae7c97d6fb4797227c2a7ae28e', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: '14e1ac388a095ef0c8a8ead34110ec359347362e', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: 'd5fbab6b6a608b6e73bc99ffe0491e712d75086a', class: "pre-heading" }, h("slot", { key: '5e9f652880fce32993f4706a1a161e0a6ead70b7', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '3bf90e8da8519381d513cfdedab8ed05812c6234', class: "heading" }, h("duet-heading", { key: '2d7fddfc7c1ca3ea3f2404bab4c61c9403482982', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '7478054b7ce3217ddac0c125bf03d026b19a49e5' }, h("slot", { key: '4c8bab71593cfcbb330e1bb2f5b903fe4825ddc4', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'febc65d2b2194bb72ce1c8fabd590a1f4f4103f6', class: "description" }, h("duet-paragraph", { key: '7d486fcff20946fe85ebe4d52aa0583e75edb1fa', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '7492391b20821a6804d420fe4edcb15955dc0495' }, h("slot", { key: '5e18314dfa768889fcbd6e1516ab509eb5436c15', name: "description" }))))), this.hasActionSlot && (h("div", { key: '9b12685d626e2ee470edd33c00fd9a17c5c450d3', class: "action" }, h("slot", { key: '2b00177a0bda18642f776e2ce56eca6c826e267c', name: "action" }))))))));
+            }, style: bannerStyles }, h(TagName, { key: '6c2f3bc4656a8fdace5aa5c9d871dafe76f36484', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: '5b937c96ac8b623cbeb5e6c280dba1e19744d67c', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: '7dddf830e713a82cfed044e9846cfbaaed422d76', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: '8aa7b7e2c6781e15d2a4a6bdbba72fbd1135384f', class: "pre-heading" }, h("slot", { key: 'cb0fa806c7517362d4da2ab9870de84dfcbc8c16', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: 'a6a86cd4c7d75b2c0649d416bf286c04e4e28dbf', class: "heading" }, h("duet-heading", { key: 'eac343c0aa5b97e8d708be8f60893caa961cda4d', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '0b25be163809e467df3efe5c4803ba29cb548297' }, h("slot", { key: '7a054f1b24cd8d813da34c62911c6b22bfd52613', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'ae147d63613bfb30bcd55188741a88817a6268b9', class: "description" }, h("duet-paragraph", { key: 'fcdd8b0f8c9863ee1fde670de8689464b093aa48', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'cae433f1bc9c9483bec0e92076e2b137ed489001' }, h("slot", { key: '8b26833d0c320e0df13b6f47170914c604e6a0a1', name: "description" }))))), this.hasActionSlot && (h("div", { key: '718dbe99fd6852116a62a6fdda6b23059fe2911d', class: "action" }, h("slot", { key: '2524edf69cde6300e52045a9069637465658623f', name: "action" }))))))));
     }
     static get is() { return "duet-promo-card"; }
     static get encapsulation() { return "shadow"; }

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: '0d213325a438908c6fbb5ef3be056baf2dd9a9cc', class: {
+        return (h("div", { key: '38130851d0d8f6035593e95652d33059ee2887d0', class: {
                 "duet-range-stepper": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, h("span", { key: '2fcef9d93303d111aa7de17a44614ae8a7be97b9', class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { key: '8cb9d3c298a12c9b4e539676020702d346731b76', 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: 'f53a8b31d7f5d5fa9df56765fefe8096d08eea44', 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: 'd37af09c95ad4ddbee42896b59b605e0582b1395', class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { key: '7045f2fd9e678036cb7d20d1877f60405198e1fd', 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: '312372ac0a265b90b2e30a0fab64e4b4a8738398', 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

@@ -228,18 +228,18 @@ export class DuetScrollable {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'b83340472bd0299ef946a14d98cca2c05dbde0b2', class: {
+        return (h(Host, { key: '3858f9356ec3ea38a7c475ce2d2fff6485827f82', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
-            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: '60f4c2b0a0c9042965e8b2ed5f84dc0643b04e58', class: {
+            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: 'b142496c0e6686103983b537b53ccdc7e8cae7c0', class: {
                 collapse: true,
                 hide: !this.needsScrolling && !this.collapsed,
-            } }, h("duet-button", { key: 'e838bec53c6b51ae8bddb5632ad6571aec939faf', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '7f29fd420848f2ced7b844ebd51e707e120ddb5e', name: "collapse-button-label" })))), h("div", { key: 'a993a456f32f2f7a3e87fc8c0737b68969899225', class: {
+            } }, h("duet-button", { key: '50d5f6266a0f0432cd1dd752a00260d5246890d3', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '5c05fd2e927df5ebd7b5c2cec3112013b58cec01', name: "collapse-button-label" })))), h("div", { key: '33f0efaf3fcc09241a9e75fa75b86ef093bc811f', 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: 'b2a6a9f2553d32e89ac185915c85ab5c5888b2f1', class: {
+            } }, this.buttons && this.renderButton("left"), h("div", { key: '6b0f1e40aa5c8406b448e93bcecb8343a0a883a3', class: {
                 "duet-scrollable-list": true,
                 [`duet-scrollable-list--${this.buttonPosition}`]: true,
                 [`gap-${this.gap}`]: true,
@@ -247,7 +247,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: '8e376adf402c2d4b3788c6fd43b247b296feed13' })), this.buttons && this.renderButton("right"))));
+            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: '77747e312df865dc66478dd32fcf87507bde8016' })), 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: '7243686dd34b2a76a253f9d9e8961daa0649da26', class: {
+        return (h(Host, { key: 'f512bf9741608c9c04847ad772f19788feee6431', class: {
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '9d44e3bc9ca4c7f662006425eb97a5bf0964edbb', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: '3796d5bdee3c678105506cb6975bba6bfa309381', class: {
+            } }, h("div", { key: '9020dcc8f511fd02b4a9d19663ae65696107d20e', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: '16617879cac9b9b1ff776187bf4a3fcc8dd5f8eb', class: {
                 "duet-layout": true,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("section", { key: 'd41ca54533dc53ef39df66aa4725b958dfa46677', class: "duet-main" }, h("slot", { key: '870419b7ca6283a06b39aeb75d7b9cea8b1f49d1' }))))));
+            } }, h("section", { key: 'a62bcb0c68b4104b40babe31e3113d457c784414', class: "duet-main" }, h("slot", { key: 'ae6241e0135d468cc3a4a22b4c1cb8c52c64d23a' }))))));
     }
     static get is() { return "duet-section-layout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -169,7 +169,7 @@ export class DuetSelect {
         }))), h("div", { 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 duet-select-error", 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", { 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", { class: "duet-select-error" }, this.error)))));
     }
     static get is() { return "duet-select"; }
     static get encapsulation() { return "scoped"; }

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: '4808d1d1aa7e0920a21fea000c4eb5a97a965758', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: '1544c2c209e973585db6308d48eafe716e660d4b', class: {
+        return (h(Host, { key: '22fc022036e3c4dcabcda2dd05d2803c2661237a', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: '65e58f4f533ee30849ad65714dd9457851c84446', class: {
                 "shaped-image": true,
-            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: '3abd57a2b34ab25cb188520f11581c648e73552b', class: "shaped-image-mask", role: "presentation" }, h("span", { key: '7e3ae25ddc3f938a470e74b01256b6ad83c5152f', class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
+            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: 'eec616c0b8b9b83bffab93d1365fb567888f1982', class: "shaped-image-mask", role: "presentation" }, h("span", { key: '4b8a720f9cd2202408d923befb228ba6420ef375', 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

@@ -58,12 +58,12 @@ export class DuetShareChart {
         this.itemsTotalValue = this.items.reduce((total, { value }) => total + value, 0);
     }
     render() {
-        return (h(Host, { key: '6a305e0aa4dab7e686adc04f6604d95017ca6733' }, h("div", { key: '1a1b450a9e914db856c093a04ad40babc35834fd', class: "duet-share-chart-horizontal-bar", role: "presentation" }, this.items
+        return (h(Host, { key: '70e0558ae1aa0042d3488c4610edf2ae7f0ce700' }, h("div", { key: '5bd7c4afeb50bc140af45a753caab394d6e0e296', 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: '749865dbd69fd61094948fc31a5b9dcbd3e9c5ce', 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: '463680d23036b1221179737e2ee3fd77da2bf872' })));
+            } })))), h("ul", { key: 'c5aa993b912a4ed0d6ab461c9c7cc9759ed4e61c', 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: '61ede20c0cd58db96135ac036084888a09e2d4ad' })));
     }
     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

@@ -8,7 +8,7 @@ export class DuetShareChartItem {
         this.color = undefined;
     }
     render() {
-        return (h(Host, { key: '0c4c98d037bb5aad9a7b64df632b99b6a5e7f240' }, h("div", { key: 'ac6aeb9e9cdefb3f9081b7b81274e5c7af006eaf', hidden: true }, h("slot", { key: '536ec08e46d4e9279ff276f4ef3a542392beb5fe' }))));
+        return (h(Host, { key: 'a534a2301783cbc13c21ddb49139b2d3a8e11624' }, h("div", { key: '0ebe764e832f7c717d589971936e666873f49651', hidden: true }, h("slot", { key: '8ac2ae8ae9da5d60cb860192e34906cbec2185ff' }))));
     }
     static get is() { return "duet-share-chart-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -91,12 +91,12 @@ export class DuetShowMore {
      * Always the last one of the class.
      */
     render() {
-        return (h(Host, { key: '5e26089215401ad079494ecfc48a5463ecd0be23' }, h("div", { key: 'ccc9db6a4f25f032076816c455c478bdd9a9689b', class: {
+        return (h(Host, { key: '56ef8d68e3957481eb3c0fd77169a3830a6c0ec3' }, h("div", { key: 'd73ea6ea5f16f353ca41d0600aecf3eb91734338', class: {
                 "duet-show-more": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
                 open: this.open,
-            } }, h("div", { key: '9548a87e1fe2469470e5bc736e9be84ff49f1b29', ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "-1" : "" }, h("div", { key: '89ad3dcc67ee7b8025483cbdb94e77380249869a', class: { "slotted-content": true } }, h("slot", { key: '3d8d799bfeceaa39c118f8b77ff1854e92111bf5' }))), h("duet-button", { key: 'e7215cf992e31e23150c57d3d5677584a38bd45e', 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: 'dcf013a42f3580bae6247f0fc11925ca63967425' }, this.open ? this.showLessLabel : this.showMoreLabel)))));
+            } }, h("div", { key: 'aa3781bcb009ab2f72dce109180c32c29e5a86d5', ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "-1" : "" }, h("div", { key: '79305d6a5745287d4baeda24e227cd0ee2e6cd28', class: { "slotted-content": true } }, h("slot", { key: 'b75e7fbce1ab1e8e1680bc88cca241d0a8503375' }))), h("duet-button", { key: '103cd44aef5b443ed759a845f684db2e9881b67c', 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: 'c185219d1cbab88f4efb3e254dc3130c432f83f6' }, 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

@@ -260,16 +260,16 @@ export class DuetSlideout {
         };
         const topLevelOpenMenuBarTranslation = getLocaleString(this.topLevelOpenMenuBarLangObject);
         const exitTranslation = getLocaleString(this.exitLangObject);
-        return (h(Host, { key: '9333789c721a340099e10ded0a75fd40e9a11351' }, h("div", { key: '401f5878c00c8844606f58cf65bd970fefc9aab7', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: 'ee8e733825dc3a76a590f10c5575b9b696c5c920', visible: this.open, "display-device": "large", zIndex: "600" }), h("div", { key: 'ceed0da1890638fbacd6ff8c98e1444545c4ce9f', 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: '092ff7252a26d276ee0925def1cb985c4963f9f9' }, h("div", { key: '4798e60685324dc1d96b79ed05d847531821734e', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: '6af2c640de7f635373f2f795e4adeebc4432fc87', visible: this.open, zIndex: "600" }), h("div", { key: '6613f55b6e61baa05833e225741427abc9c810bb', 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: '5ba5f11f9e65dd3b4e7f41dc425cb504fdf41227', moveFocusTo: this.closeButton }), h("div", { key: '644cb47533203d7a1a0411ad3d685f772f1727af', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '27811bda6d392533473673dd1f9e3384fc010c9a', class: "top" }, h("button", { key: 'afcf0a441eb2100eece645b01229005076a98b0b', 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: '2bcc71858b33eb7031d874753e5b56ae08d27232', moveFocusTo: this.closeButton }), h("div", { key: 'e93b3e3e696fed7a15af0b629cdc75d4e6c6a42e', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '3264075d1c8a40dd86f3fd0e54f6c0c3fd14042a', class: "top" }, h("button", { key: '65e408749cc6f7ee8c01d1d261cc610df794f3fc', 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: 'a1f41fbc6db6c3e139c86c5243947230e6d3f3c0', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '6333fb0cb464bd1bae7295a7ed3dba2f82aa4afe', class: "sticky-header" }, h("slot", { key: '9295f086423cb44b73d2df211b7095facfa77c79', name: "sticky-header" }))), h("div", { key: '1535ab887ae6f901cc97f3b7a7cd541d423e174c', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
+            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: '0e81890e31a7c1935f81687260391f8a4efee1dc', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'a337d39c4c83b1f55addb400087a26a359f46167', class: "sticky-header" }, h("slot", { key: '4a06486e639fac6b9fa5844e8b4bb0ad30ebe50a', name: "sticky-header" }))), h("div", { key: '3f809bf568d2364e7aaf4ffe4974a7a221b8fbb5', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
                 items: true,
-            } }, h("slot", { key: '5dff867d2868e62737eb06a1618c269187db5468' })), h(FocusGuard, { key: 'fcfc5f9ea11a7edac6b76a1479dfb0374b8f16eb', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: '61358e482b8f13d7facf58c55618bd6c45e044f9' })), h(FocusGuard, { key: 'bb6241de5b1dd23f17300cb51361bb10b4e6bfc6', 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

@@ -35,7 +35,7 @@ export class DuetSlideoutLang {
      */
     render() {
         const langTranslation = getLocaleString(this.chooseLangObject);
-        return (h(Host, { key: '9b9ad45986a3dcfdb55b5f0ba70688ca195db838' }, h("div", { key: '6094526122040f9602eaff0be103623ba489617f', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '1b0eef8fe172f80c3a955e6104a7728b903830f1', name: "navigation-language", margin: "none", color: "secondary" }), h("slot", { key: '0793321a6531c610413d42a8700b87e92ce922b7' }))));
+        return (h(Host, { key: '2d8d0ea8ccd8932027c97026ab0fd8ff94b13f5d' }, h("div", { key: '8ecd4a30d2535356b74019ea8a6e6243bb05b88c', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '825bf7a329128b49e03969c52b7abb3c76922fef', name: "navigation-language", margin: "none", color: "secondary", size: "small" }), h("slot", { key: 'a43360f381937d2d74610b34de107c10e384a880' }))));
     }
     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

@@ -42,12 +42,12 @@ export class DuetSlideoutLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '85b04b902faeb2e3444ff20971a517cdb5abdd02' }, h("a", { key: 'b249137ea0b61d56f0a2699341334febeccb6b0e', target: !this.href ? null : this.external ? "_blank" : "_self", class: {
+        return (h(Host, { key: '8f75d1b8cc2f5509ee8c41c0f09a1e0b7c325e2b' }, h("a", { key: '470e7d3de6ae4220816ce83100eab2798017637c', 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: 'b14c636765c3b990b3c6c6f6c57b0641bbdfe006', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { key: '63ff80e401e011a6792a623ef4be0da0f3f40634', class: "label" }, h("span", { key: 'b9d5c8b4ed62ef045da9f02e6a7ab00084c4dfbf' }, h("span", { key: '5499b4548d27509b4e6294e3b335c56a264160b6', class: "label-container" }, h("span", { key: '495a1abd5fdb4a18af251d7c15c449968e700725', class: "label-content" }, h("slot", { key: '2cb954b89c28550f7f00008da0a87805062c8f38' })), this.external && (h("duet-icon", { key: '16ad7d515886268c1f1a2db9dd19a38549df15de', class: "external-icon", theme: this.theme, name: newWindowIcon.title, margin: "none", size: "auto", color: "currentColor" }))), h("slot", { key: 'ede009435b1cae9498c0f94a50040c322b494757', name: "description" })), this.caret && (h("duet-icon", { key: 'd3398cd49789c167b1f084856b49ba1a483ca263', 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: '280f1b56285002d77cdae1dd796ccc4cead40484', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "small", margin: "none" })), h("div", { key: 'c20e8bd370c0c9419dac439bc9be417f532caa80', class: "label" }, h("span", { key: 'c9e43ff4e0f400bb100908512d4832941833413e' }, h("span", { key: '362461c72afbd9a669ca2be4bb63b0e0a0816ae8', class: "label-container" }, h("span", { key: 'a5cd71224f0299bc2f8c63c65e28c8f535da4b59', class: "label-content" }, h("slot", { key: '59eb785f2e0fe626375adca66fa6c0c1dc63f6d0' })), this.external && (h("duet-icon", { key: '55f8b1ed150acb31ad46d9f8ba2f7d47ada4f3ca', class: "external-icon", theme: this.theme, name: newWindowIcon.title, margin: "none", size: "auto", color: "currentColor" }))), h("slot", { key: 'ddba75f06da785a06950ed38f726c1ac3cfea012', name: "description" })), this.caret && (h("duet-icon", { key: 'f9091c7a26c7db26a48b8b96bd3b4502cb79bc10', 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.css

@@ -42,7 +42,7 @@
 .duet-slideout-panel .link {
   position: relative;
   display: flex;
-  gap: 20px;
+  gap: 16px;
   align-items: center;
   justify-content: flex-start;
   width: 100%;
@@ -64,20 +64,6 @@
   line-height: normal;
   vertical-align: baseline;
 }
-.duet-slideout-panel .link .duet-slideout-icon .duet-slideout-badge {
-  position: absolute;
-  top: 0;
-  left: 16px;
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  background: rgb(247, 178, 40);
-  border-radius: 50%;
-  box-shadow: 0 0 0 1px #c18b1f;
-}
-.duet-theme-turva .duet-slideout-panel .link .duet-slideout-icon .duet-slideout-badge {
-  background: rgb(247, 178, 40);
-}
 @media (min-width: 62em) {
   .duet-slideout-panel .link .duet-slideout-icon {
     margin-right: 8px;
@@ -95,11 +81,11 @@
   font-weight: 600;
 }
 .duet-slideout-panel .link .label-text.medium {
-  font-size: 1.25rem;
+  font-size: 1rem;
   font-weight: 600;
 }
 .duet-slideout-panel .link .label-text.large {
-  font-size: 1.5rem;
+  font-size: 1.25rem;
   font-weight: 800;
 }
 .duet-slideout-panel .link:focus {
@@ -128,9 +114,9 @@
 .duet-slideout-panel .dialog {
   position: fixed;
   top: 0;
-  left: 0;
+  right: 0;
   z-index: 600;
-  width: 100%;
+  width: min(450px, 100%);
   height: 100%;
   overflow-y: auto;
   visibility: visible;
@@ -174,8 +160,8 @@
 }
 .duet-slideout-panel .top span {
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-size: 1rem;
-  font-weight: 600;
+  font-size: 1.1rem;
+  font-weight: 700;
   line-height: 1.5;
   color: rgb(8, 42, 77);
   opacity: 1;
@@ -194,10 +180,18 @@
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
-  padding: 1rem 16px;
+  padding: 12px 20px;
   overflow-y: auto;
   color: rgb(8, 42, 77);
 }
+@media (min-width: 36em) {
+  .duet-slideout-panel .items {
+    padding: 16px 28px;
+  }
+}
+.duet-slideout-panel duet-indicator {
+  top: 4px;
+}
 .duet-slideout-panel.duet-theme-turva .link {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: rgb(23, 28, 58);