@duetds/components 9.13.0 → 9.15.0

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

@@ -129,7 +129,7 @@ export class DuetNumberInput {
             // Set the localized prop value.
             this.value = this.localizeValue(value);
             // Finally also set the visible input value and unit.
-            this.duetInputElement.value = `${this.value} ${this.unit}`;
+            this.duetInputElement.value = `${this.value}${this.getUnitString()}`;
         };
         this.add = (ev) => {
             // If this was called via a html button, prevent the default functionality
@@ -276,6 +276,10 @@ export class DuetNumberInput {
             this.emitNull(ev);
         }
     }
+    // prefix existing unit with white space or return empty string if no unit
+    getUnitString() {
+        return this.unit ? ` ${this.unit}` : "";
+    }
     formatAnnouncement() {
         const current = !!this.value ? SafeParseFloat(this.value, this.locale) : null;
         if (current == null) {
@@ -292,13 +296,13 @@ export class DuetNumberInput {
             return;
         }
         const identifier = this.identifier || this.inputId;
-        const maxlength = `${this.localizeValue(this.max)} ${this.unit}`.length;
+        const maxlength = `${this.localizeValue(this.max)}${this.getUnitString()}`.length;
         const cleanedValue = !!this.value ? SafeParseFloat(this.value, this.locale) : null;
         return (h(Host, { class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-expand": this.expand,
                 "duet-m-0": this.margin === "none",
-            } }, h("div", { class: "duet-number-container" }, h("duet-input", { ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value} ${this.unit}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, h("slot", { name: "tooltip" }), h("div", { class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, h("button", { "aria-controls": identifier, disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, h("duet-visually-hidden", null, this.accessibleSubtract, " ", this.step), h("duet-icon", { icon: subtractIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), h("button", { "aria-controls": identifier, disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, h("duet-visually-hidden", null, this.accessibleAdd, " ", this.step), h("duet-icon", { icon: addIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
+            } }, h("div", { class: "duet-number-container" }, h("duet-input", { ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value}${this.getUnitString()}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, h("slot", { name: "tooltip" }), h("div", { class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, h("button", { "aria-controls": identifier, disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, h("duet-visually-hidden", null, this.accessibleSubtract, " ", this.step), h("duet-icon", { icon: subtractIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), h("button", { "aria-controls": identifier, disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, h("duet-visually-hidden", null, this.accessibleAdd, " ", this.step), h("duet-icon", { icon: addIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
     }
     static get is() { return "duet-number-input"; }
     static get encapsulation() { return "scoped"; }
@@ -572,7 +576,7 @@ export class DuetNumberInput {
                             "name": "default",
                             "text": "{fi: \"{current} euroa valittuna\", en: \"{current} euros selected\", sv: \"{current} valda euro\"}"
                         }],
-                    "text": "Format of message used to announce current amount when switching between amounts.\nThe string {current} is replaced with the current amount."
+                    "text": "Format of message used to announce current amount when switching between amounts. Note that the default has \"euros\"\nso if you use another unit is is essential you set this attribute to reflect that unit.\nThe string {current} is replaced with the current amount."
                 },
                 "getter": false,
                 "setter": false,

package/lib/collection/components/duet-page-heading/duet-page-heading.js

@@ -35,12 +35,12 @@ export class DuetPageHeading {
      */
     render() {
         const layout = this.layout === "narrow" ? "narrow" : this.layout === "fluid" ? "fluid" : "auto";
-        return (h("div", { key: 'fba553b4413df6bb21199c6662bd4925565257ec', class: {
+        return (h("div", { key: '4bf323f7f3880de300ec37bf1cad195a8cbc5be6', class: {
                 "duet-page-heading": true,
                 "duet-theme-turva": this.theme === "turva",
                 "has-icon": !!this.icon,
                 [layout]: true,
-            } }, h("div", { key: 'e6e97a25087b75ccb7b398154838104935f12634', class: "background" }, this.theme === "turva" && h("div", { key: '2ae0b70ceb016c085242e7957fb3120e001474cb', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'c28c3ae1a2ec5d620f874249fc316a522f1bd66a', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: '088f96be8c434a1bb2a3649824238201f3cdd384', class: "brand-shape second-shape" }), this.icon && (h("div", { key: '4356433ecfd4d75820e6ce9f9b23321a20db02db', class: "brand-shaped-icon" }, h("duet-icon", { key: '2a0c22e18ebe8b50eec0e7c3ed255a77ff8db597', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: '4cf9fed40ec2968cf45348dac887df9a5bba7560', class: "heading" }, h("slot", { key: '9840ced09f3ca4fd899a29b3aa2e9783af03ae2f', name: "heading" }), this.progressCurrentStep && this.progressTotalSteps && (h("div", { key: 'cfd079f730fb38743729f8ffe23f61cee6a50a7b' }, h("duet-spacer", { key: '1d08222bf22b908e8c7333e4b3263cd56a62fc88', size: "large" }), h("div", { key: '0b28bb2c19b6f0061d0c5db1dcf54753a2ac5031', role: "presentation" }, this.progressIndicator()))))));
+            } }, h("div", { key: 'ba9e048853e596861f47f1d7a53bbda463cf3e93', class: "background" }, this.theme === "turva" && h("div", { key: 'e91b82c9756f702b8511585e96a16b756a8bf010', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '457b0dfb63e20cd8f67193625f073f7d77d74468', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: 'd28811c585280049f3e7d5160b7306c5dc3e6bf0', class: "brand-shape second-shape" }), this.icon && (h("div", { key: '2fe96fc8b40c2384570ea7d0ea3dd968f7c30c34', class: "brand-shaped-icon" }, h("duet-icon", { key: 'a2ffb32d52eadfa643b80433d39d49d90fcdfc77', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: '1fe6bd4221110dc7fbc3d04715edc6497e4b82d7', class: "heading" }, h("slot", { key: 'bd46a7403fe998b860885f6fa89e984c37d8dc76', name: "heading" }), this.progressCurrentStep && this.progressTotalSteps && (h("div", { key: '3cf7edbd42680a200cf99c59e1e448cd8d64c6e0' }, h("duet-spacer", { key: 'f86c8309c76219962a4044a3164f48061a24c668', size: "large" }), h("div", { key: '0b0616b9650b9d98d5150152bbe9914a31e8b7d3', role: "presentation" }, this.progressIndicator()))))));
     }
     static get is() { return "duet-page-heading"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-panel/duet-panel.css

@@ -0,0 +1,98 @@
+:host {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  position: relative;
+  display: block;
+  width: 100%;
+  margin: 8px 0 20px 0;
+}
+@media (min-width: 36em) {
+  :host {
+    margin: 12px 0 28px 0;
+  }
+}
+:host .duet-m-0 {
+  margin: 0 !important;
+}
+
+.duet-panel {
+  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  color: rgb(8, 42, 77);
+  background-color: rgb(255, 255, 255);
+  border: 0 solid rgb(212, 223, 229);
+  border-radius: 16px;
+}
+.duet-panel.duet-theme-turva {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  color: rgb(23, 28, 58);
+  border-color: rgb(222, 224, 228);
+}
+.duet-panel.padding-small {
+  padding: 16px;
+  border-radius: 12px;
+}
+@media (min-width: 36em) {
+  .duet-panel.padding-small {
+    padding: 20px;
+  }
+}
+.duet-panel.padding-medium {
+  padding: 20px;
+}
+@media (min-width: 36em) {
+  .duet-panel.padding-medium {
+    padding: 28px;
+  }
+}
+.duet-panel.padding-large {
+  padding: 28px;
+}
+@media (min-width: 36em) {
+  .duet-panel.padding-large {
+    padding: 36px;
+  }
+}
+.duet-panel.border {
+  border-width: 1px;
+}
+.duet-panel.secondary {
+  background-color: rgb(245, 248, 250);
+}
+.duet-panel.secondary.duet-theme-turva {
+  background-color: rgb(245, 247, 250);
+}
+.duet-panel.accent {
+  background-color: rgb(240, 247, 250);
+  border-color: rgb(198, 225, 238);
+}
+.duet-panel.accent.duet-theme-turva {
+  background-color: rgb(245, 247, 250);
+  border-color: rgb(199, 202, 207);
+}
+.duet-panel.accent.secondary {
+  background-color: rgb(217, 236, 245);
+}
+.duet-panel.accent.secondary.duet-theme-turva {
+  background-color: rgb(222, 224, 228);
+}
+
+:host(.duet-theme-turva2) .duet-panel.duet-theme-turva {
+  color: #172a3b;
+  border-color: #d4dde2;
+}
+:host(.duet-theme-turva2) .duet-panel.duet-theme-turva.secondary {
+  background-color: #f5f6f7;
+}
+:host(.duet-theme-turva2) .duet-panel.duet-theme-turva.accent {
+  background-color: #fdf7f2;
+  border-color: #f1cab2;
+}
+:host(.duet-theme-turva2) .duet-panel.duet-theme-turva.accent.secondary {
+  background-color: #fbe1d1;
+}

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

@@ -0,0 +1,225 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
+export class DuetPanel {
+    constructor() {
+        this.theme = "";
+        this.padding = "medium";
+        this.variation = "";
+        this.margin = "auto";
+        this.border = undefined;
+        this.accessibleLabel = undefined;
+        this.accessibleLabelledBy = undefined;
+        this.accessibleDescribedBy = undefined;
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+    }
+    render() {
+        return (h(Host, { key: '13228863e0bd8364a1624863047eecc22101529e' }, h("section", { key: '0548dea2315bd39b2f55b3796ebb9f7c0d29240c', "aria-label": this.accessibleLabel, "aria-labelledby": this.accessibleLabelledBy, "aria-describedby": this.accessibleDescribedBy, class: {
+                "duet-panel": true,
+                "duet-theme-turva": this.theme === "turva",
+                [this.variation.split("-")[0]]: true,
+                [this.variation.split("-")[1]]: true,
+                [`padding-${this.padding}`]: true,
+                border: this.border,
+                "duet-m-0": this.margin === "none",
+            } }, h("slot", { key: 'f83407ac8d792c512b5df894f066adefa37bf3a4' }))));
+    }
+    static get is() { return "duet-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-panel.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["duet-panel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTheme",
+                    "resolved": "\"\" | \"default\" | \"turva\"",
+                    "references": {
+                        "DuetTheme": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme of the panel."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "padding": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"small\" | \"medium\" | \"large\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the padding of the component. Padding is automatically responsive."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "padding",
+                "reflect": false,
+                "defaultValue": "\"medium\""
+            },
+            "variation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetPanelVariation",
+                    "resolved": "\"\" | \"accent\" | \"accent-primary\" | \"accent-secondary\" | \"default\" | \"default-primary\" | \"default-secondary\" | \"primary\" | \"primary-accent\" | \"primary-default\" | \"secondary\" | \"secondary-accent\" | \"secondary-default\"",
+                    "references": {
+                        "DuetPanelVariation": {
+                            "location": "local",
+                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-panel/duet-panel.tsx",
+                            "id": "src/components/duet-panel/duet-panel.tsx::DuetPanelVariation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The color variation of the panel. Combination of palette (\"default\", \"accent\") and palette variation (\"primary\",\n\"secondary\"). You can ommit \"default\" and \"primary\" - they are the defaults."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variation",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "margin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetMargin",
+                    "resolved": "\"auto\" | \"none\"",
+                    "references": {
+                        "DuetMargin": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetMargin"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the margin of the component."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin",
+                "reflect": false,
+                "defaultValue": "\"auto\""
+            },
+            "border": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set this attribute to draw a border around the panel."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "border",
+                "reflect": false
+            },
+            "accessibleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds accessible label for the panel that is only shown for screen readers."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "accessible-label",
+                "reflect": false
+            },
+            "accessibleLabelledBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the id of a component that labels the panel."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "accessible-labelled-by",
+                "reflect": false
+            },
+            "accessibleDescribedBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the id of a component that describes the panel."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "accessible-described-by",
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+}

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

@@ -32,7 +32,7 @@ export class DuetParagraph {
         const color = getColorByName(this.color);
         // aria-describedby is to fix accessibility issue in Chrome where duet-paragraphs
         // are not announced when placed inside duet-modal
-        return (h(Host, { key: '440e68e865c345c8a54036e303a0a90ef1213ad0', "aria-describedby": this.id }, h("p", { key: 'cc4abdee501c88469f34129a1238332e2e42dca9', id: this.id, class: {
+        return (h(Host, { key: 'e0a1fc0374987c1390c1139195f8dc69bb497da2', "aria-describedby": this.id }, h("p", { key: '89978d42d63df315736996c9bb4c264098d46fe3', id: this.id, class: {
                 "duet-paragraph": true,
                 "duet-paragraph-small": this.size === "small",
                 "duet-paragraph-semi-bold": this.weight === "semi-bold",
@@ -40,7 +40,7 @@ export class DuetParagraph {
                 "duet-m-0": this.margin === "none",
                 [this.variation]: true,
                 "duet-theme-turva": this.theme === "turva",
-            }, style: { color }, part: "duet-paragraph" }, h("slot", { key: '0766fae004e9085b078a41c58bae0a3ef7f8a96d' }))));
+            }, style: { color }, part: "duet-paragraph" }, h("slot", { key: 'befa3faf8f7b1f565f1a17d2ae668c49b7694db2' }))));
     }
     static get is() { return "duet-paragraph"; }
     static get encapsulation() { return "shadow"; }

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: '76a5ddd0306fa03e605cef3d3e484dca33446d14', role: this.accessibleRole === "menuitem" && this.isSafariBrowser ? null : this.accessibleRole }, h(TagName, { key: '55c06e263ba92718f8927cb910e239023a5de9f4', 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: '8283f27db74c5905d7510f0aa46bccdfc229c3a7', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: 'd37328836527cbae445ebf804c9a9b6cfc841df3', class: "duet-popup-menu-item-label" }, h("slot", { key: '48d6351f97fd1a41dd9168bbb15d3c18b5896f7c' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: '9796f803a10e25097178ff191c003ee6ceee5dba', name: this.url && this.external
+        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
                 ? 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: '4380153a8426a1254a897efe10cad603dbf8a7d6', 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: 'bef480bed8100c06a5f8acf0e059dab3896f94d5', 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

@@ -4,7 +4,7 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { checkNamedSlotElement, hasSlot } from "../../utils/slot-utils";
-import { getColorByName } from "../../utils/token-utils";
+import { getColorByName, postfixTheme } from "../../utils/token-utils";
 /**
  * @slot pre-heading - Slot for pre-heading content.
  * @slot heading - Slot for heading content. Only span should be used in this slot.
@@ -53,12 +53,12 @@ export class DuetPromoCard {
             backgroundColor: backgroundColor ? backgroundColor : "none",
         };
         const TagName = this.url ? "a" : "div";
-        return (h(Host, { key: '3d281bb1f739ba86d5b36c6043be731799ad8fa5', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '0aa1940692ce1672ca4af76af2fa4126306f1235', class: {
+        return (h(Host, { key: 'b3cf1ece939303bd018e7867fd778f5a87ee3cd8', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '0092deba7be1b2919449ad5dfd8dded164e87f05', 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: '5cf0d74f8a0212ed297d2619d49e39d8c28e246a', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: 'b7cc5de830483c0e7a964cfcb72d7f3151a41a24', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: '7608b5880c5906171f05a3c1e87c0e17bd2935d0', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: 'ad6469a6f8edddc9f7752c1f834571787b89cc38', class: "pre-heading" }, h("slot", { key: 'd4f0a18260609d18b0178f397a459997f5355def', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '8bc0b5df3919ec6a4a8cade9004a1f62813f5c77', class: "heading" }, h("duet-heading", { key: 'c55032096a863f88788173207ee7c22f2538106e', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("span", { key: '365672773038187f60ad94999a42b214a865a233' }, h("slot", { key: '8e1e4376fd09e6c2cc91e71c02874db4cce56786', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '00a6f5bd073cb18c9fdc307615466c885c9be409', class: "description" }, h("duet-paragraph", { key: '0c750a27469650603afb05b38762fb26c542ca51', theme: this.theme, margin: "none", color: this.textColor }, h("span", { key: '7ae8e761077676b809d53e23b649d554e0f8d3fc' }, h("slot", { key: '8dab7cd1b4e77586abc3f266179c621c4aed3921', name: "description" }))))), this.hasActionSlot && (h("div", { key: '4eadb71d3c9f7f6598ab708251ad2ee1bcf94719', class: "action" }, h("slot", { key: '43d40d4c3afacd136f1a05f44bc0964675bfa53d', name: "action" }))))))));
+            }, 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" }))))))));
     }
     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: '3d8d9ed5879447251d48ae757daaf8ffef02ad3d', class: {
+        return (h("div", { key: '0d213325a438908c6fbb5ef3be056baf2dd9a9cc', class: {
                 "duet-range-stepper": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, h("span", { key: 'c88c202c7002fb522a26377fb353ca2a24a94eb7', class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { key: 'bfab979e32c0b863937a1cab50cd8f6b48d0fb69', 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: '59a4f61632394157513cd4f632bed9e46a19e44c', 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: '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: "" })));
     }
     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: 'd16fe365f308d4f01e90314b861a38a391766069', class: {
+        return (h(Host, { key: 'b83340472bd0299ef946a14d98cca2c05dbde0b2', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
-            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: '4ba3965faddef21a8b2a8158ca7b5a15826c41c2', class: {
+            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: '60f4c2b0a0c9042965e8b2ed5f84dc0643b04e58', class: {
                 collapse: true,
                 hide: !this.needsScrolling && !this.collapsed,
-            } }, h("duet-button", { key: 'c09fe36578bc21723d8956cfa1179eb193f8a8aa', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '99ade10a731e97298c3414da467877a6f7b03db3', name: "collapse-button-label" })))), h("div", { key: 'dae4d1c1c6a48c295b67a3897185ee32aab91d45', class: {
+            } }, 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: {
                 "duet-scrollable-items": true,
                 buttons: this.buttons,
                 center: this.center,
                 "duet-theme-turva": this.theme === "turva",
-            } }, this.buttons && this.renderButton("left"), h("div", { key: 'abfe476824df3e3ff6532458d19a4036d6c25c65', class: {
+            } }, this.buttons && this.renderButton("left"), h("div", { key: 'b2a6a9f2553d32e89ac185915c85ab5c5888b2f1', 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: '91dfa3fca48d62c75a1df155ac59c10dc97ad395' })), this.buttons && this.renderButton("right"))));
+            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: '8e376adf402c2d4b3788c6fd43b247b296feed13' })), this.buttons && this.renderButton("right"))));
     }
     static get is() { return "duet-scrollable"; }
     static get encapsulation() { return "shadow"; }
@@ -478,7 +478,7 @@ export class DuetScrollable {
                 "getter": false,
                 "setter": false,
                 "attribute": "selected",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "0"
             },
             "stretch": {

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: 'abc489bb9f01029b229a5021e8918bb04bfdd2e4', class: {
+        return (h(Host, { key: '7243686dd34b2a76a253f9d9e8961daa0649da26', class: {
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '31a1523883a51b86ad132ca814a54327f0c8d950', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: '50e8bf12a2c214d17322c63a53aab9b6b375eac0', class: {
+            } }, h("div", { key: '9d44e3bc9ca4c7f662006425eb97a5bf0964edbb', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: '3796d5bdee3c678105506cb6975bba6bfa309381', class: {
                 "duet-layout": true,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("section", { key: '9d316453e681f174990e0832ab37ca81d5791900', class: "duet-main" }, h("slot", { key: 'e4de9102f8914fb94d228c3db88b48aa96d17616' }))))));
+            } }, h("section", { key: 'd41ca54533dc53ef39df66aa4725b958dfa46677', class: "duet-main" }, h("slot", { key: '870419b7ca6283a06b39aeb75d7b9cea8b1f49d1' }))))));
     }
     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", 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 duet-select-error", id: this.errorId, "aria-live": this.accessibleLiveError, "aria-atomic": "true", "aria-relevant": "additions removals" }, this.error && h("span", null, 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: '638dcfbd244960e00fd9d26cd3a78e1f28b85e84', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: 'bfa3cd57dfa2f5e01314890b5827c37f3b9f1933', class: {
+        return (h(Host, { key: '4808d1d1aa7e0920a21fea000c4eb5a97a965758', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: '1544c2c209e973585db6308d48eafe716e660d4b', class: {
                 "shaped-image": true,
-            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: 'bc68a2fa96268d470a352482d6023666fcc04d5e', class: "shaped-image-mask", role: "presentation" }, h("span", { key: 'fe3d0cbb8686f710b2c267306669203de22aaa05', class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
+            }, 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}")` } })))));
     }
     static get is() { return "duet-shaped-image"; }
     static get encapsulation() { return "shadow"; }

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

@@ -58,10 +58,12 @@ export class DuetShareChart {
         this.itemsTotalValue = this.items.reduce((total, { value }) => total + value, 0);
     }
     render() {
-        return (h(Host, { key: '4fdb192aa20cd6f6437d85d5a3f747acdbff79ef' }, h("div", { key: 'aa0fb6bec4450f520c6717af033535a1dba32e4e', class: "duet-share-chart-horizontal-bar", role: "presentation" }, this.items.map(item => (h("span", { class: "duet-share-chart-share", style: {
+        return (h(Host, { key: '6a305e0aa4dab7e686adc04f6604d95017ca6733' }, h("div", { key: '1a1b450a9e914db856c093a04ad40babc35834fd', 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: 'e1fcc132bd62897160224822eb8b6260e3915cf3', 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: '2eeb09621a94b00304aa0a8ebcc89d99c2b9485d' })));
+            } })))), 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' })));
     }
     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: 'd445b3fcd17ec7e9a3b0a2a8cadb9396883c8059' }, h("div", { key: '5cc83a7a215cbf2c11d2efea994394e31161ecc5', hidden: true }, h("slot", { key: 'efe3dd0892bce32e1adfde3f8f818b4c3112291d' }))));
+        return (h(Host, { key: '0c4c98d037bb5aad9a7b64df632b99b6a5e7f240' }, h("div", { key: 'ac6aeb9e9cdefb3f9081b7b81274e5c7af006eaf', hidden: true }, h("slot", { key: '536ec08e46d4e9279ff276f4ef3a542392beb5fe' }))));
     }
     static get is() { return "duet-share-chart-item"; }
     static get encapsulation() { return "shadow"; }