@duetds/components 9.13.0 → 9.14.0

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

@@ -24,7 +24,7 @@ export class DuetNav {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '8d7e53e58f968acb9be34f895909df3b4f5d5c34' }, h("div", { key: '123fa743b84c16f63fc588574a9aca0cabf29c80', class: { container: true, sticky: this.sticky } }, h("slot", { key: 'd58ed528272eb49e4391e06146cfecacd23f5066' }), h("slot", { key: 'beeb3ee1a1eaa779fa6e25abdfae15b1d8d2a222', name: "mobile" }), h("slot", { key: '69ac854fa98e6625c20dc274cc913845cb4ec40a', name: "desktop" }))));
+        return (h(Host, { key: '1bd9e1c748e898763d70850e3e7995557aa70828' }, h("div", { key: '256c0acc4e956aea59eb153bc7b3bad1126501f3', class: { container: true, sticky: this.sticky } }, h("slot", { key: '64f9a6096d183ce0cbd496db4dcee65d565e15b9' }), h("slot", { key: 'b0f455061d1e7d8affab734c72b8479239184b0b', name: "mobile" }), h("slot", { key: 'dce4933ac2f67107843c4121100f7adae7a3b72f', name: "desktop" }))));
     }
     static get is() { return "duet-nav"; }
     static get encapsulation() { return "shadow"; }

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

@@ -43,11 +43,11 @@ export class DuetNotification {
         this.linkElement.focus(options);
     }
     render() {
-        return (h("div", { key: '5673c370989123dc6c1dc1ec214c995064564f56', role: "listitem", class: {
+        return (h("div", { key: '49b14512d29db67c3f5bcb27f101a51fc9036fd0', role: "listitem", class: {
                 "duet-notification": true,
                 "duet-notification-highlight": this.highlight,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("a", { key: '1beae6445e3d4c1a3351a077ec57f0915fae8d2d', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: 'b12f670a6966b1aad67ad42f75e793d2ddd2e833', class: "duet-notification-container" }, h("div", { key: '5ef4f93707358582ff4ff4b96579d5a3554a82cb', class: "duet-notification-badge-container" }, this.highlight && (h("div", { key: '387c2d580ff608512510b8629f1e7821a8f7dd3a', class: "duet-notification-badge" }, h("duet-visually-hidden", { key: '264d0f56b026c4e320d6c25607934506a531a622' }, this.accessibleLabelUnread, ":")))), h("div", { key: '89cf2d458e2267d8325d1cf051e439f1384e7f2e', class: "duet-notification-content" }, h("slot", { key: '471d37b00002cb9fe0333f103af855fb46a54c59' })), h("div", { key: '1026a308355cd17fbc16f386a88e6f7def9df8f7', class: "duet-notification-date" }, this.date)))));
+            } }, h("a", { key: '6f042207812b140e4527347593e928cc3493af31', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: '2d479ec70393a50322b0ed54f2807c222dc13a1a', class: "duet-notification-container" }, h("div", { key: 'ee94c09c0cd7087c3a9012938ff8ca45d2c3a2ad', class: "duet-notification-badge-container" }, this.highlight && (h("div", { key: '12c75cc56f374dbb3219009ed71e3133c2f1f490', class: "duet-notification-badge" }, h("duet-visually-hidden", { key: '63608edd5d1768c8a2963273ecaa2cf51ddf3e20' }, this.accessibleLabelUnread, ":")))), h("div", { key: '6ec5105d17c74d1cf8b29e08c5488cc14cd41377', class: "duet-notification-content" }, h("slot", { key: '9aa83e4b79fa59c4336ec10f0b3c2ba69e26b5ec' })), h("div", { key: 'cf580f03e32ff454941cf973497fe4a97066fa5d', class: "duet-notification-date" }, this.date)))));
     }
     static get is() { return "duet-notification"; }
     static get encapsulation() { return "shadow"; }

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: 'a7f8ed31eea2471a6f6daeab1a41ebbf3274974a', 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: '29929daebf61d58c95ecb45ea75fe53303cd90c6', class: "background" }, this.theme === "turva" && h("div", { key: '8e16ccbc29987d20713eefb78f1272640023cd19', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'c853c2efb26521b9421413e85e6f468d411fa016', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: 'd3a2d96868a56e251bace2d82ad6c9ad55294794', class: "brand-shape second-shape" }), this.icon && (h("div", { key: '3b4627a7ed9f38878dc057717df1b3dcef713963', class: "brand-shaped-icon" }, h("duet-icon", { key: 'b2489267d519d737b77fd292f21fb828553f7c3b', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: 'bfc316227a81b1ae3b600c0fa8a5ea7242523dcc', class: "heading" }, h("slot", { key: '8e0397609bafb4de4ef85422f6397ded1ec15039', name: "heading" }), this.progressCurrentStep && this.progressTotalSteps && (h("div", { key: '337621f9ecdc98a53fa649fdc7e001985577ac7a' }, h("duet-spacer", { key: 'e548da55d72cce0c0fa88ce29bac93184673d1e2', size: "large" }), h("div", { key: '1b6d8f3e486a69add538d4a5f786944521a8906f', 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: '1515fc190e761f1806452d49d62b61412a4c28f9', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: 'a4939b94e4f746437fdf950d860c18cbdcb7bd55', 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: '807abfae3d508b57899c6db98e25f9d55ca2da14', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: 'c8aff5a3a991787ed36ae5413111eea8e72d180e', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: '98ca8b87d56b052ec8b284060e9d40db91e76ae4', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: 'd523708f802adba25c3cbbb49a701d2ba9e1c4c4', class: "pre-heading" }, h("slot", { key: '497b57d5a7f7dd3ad40f4b7d1fea749bbe24a0f8', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '8ffed905559c96f7216b589ad6c7cac539ed6da8', class: "heading" }, h("duet-heading", { key: '28b56308bca5a9c51618b9fc5781cd9c72d11aff', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '48dd4256899ce88967628e402039ee2b48823962' }, h("slot", { key: 'ee8c4c059c2e763e12977ec375485f9302f89794', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '84c464f1982f18704a6c58711f2833f812b576f5', class: "description" }, h("duet-paragraph", { key: 'e7b5bfcb91f583d32445076db2a9dd802a7284a8', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '1af43961242bc227beef31940ab6d4a6fb2baedf' }, h("slot", { key: '2a0fd2143ed221fea16af81d8aed863c1e889014', name: "description" }))))), this.hasActionSlot && (h("div", { key: '7edc91af1e9bce504fa3fef8d01c3a6edfed202c', class: "action" }, h("slot", { key: '7e8cd91e532de002a468327a6870dfeae9b13011', 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: '6901fea371dda6fd20b8c14a15f007356a4f0a38', 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: '59b5b0b6b1a791fadf53a07f33466cb10ed3dedb', 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: 'ef2ce19aa8cbf5829d7f54d3b79a53d84e79f4a3', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '2c0f7231015097adadcd7143cef863b8c75da68c', name: "collapse-button-label" })))), h("div", { key: 'efdef383e022816af6dfd91ae609ab81d5ef1fa1', 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: 'a429707e2ff1d17f2865300ee65a42c1ff4217f1', 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: '792a604368bc6fe33577173b8986babb17e95050' })), 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: 'abc489bb9f01029b229a5021e8918bb04bfdd2e4', class: {
+        return (h(Host, { key: '3760201c8af426d8ce0a3e736e1ea158aa52d98e', 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: '94d48826fd6b116936f4850e1e21b1cf761c7260', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: 'b33936aa900e4503eed9d5b82dbcdf07f51e9b19', class: {
                 "duet-layout": true,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("section", { key: '9d316453e681f174990e0832ab37ca81d5791900', class: "duet-main" }, h("slot", { key: 'e4de9102f8914fb94d228c3db88b48aa96d17616' }))))));
+            } }, h("section", { key: 'a2177f2b863ec3782382f8b5b512913af6bbe4b0', class: "duet-main" }, h("slot", { key: '446c361279e487f659f839b9b21b19ff7f6b0739' }))))));
     }
     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: 'b750a11c4dccb225ec7f6a62eb41137cd21a45b7', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: '77296c3eed29b5b7fbd1f5296b194d2b4f74babc', 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: '6ca14f632c8c963c66895b10759946a4dae0ee90', class: "shaped-image-mask", role: "presentation" }, h("span", { key: 'ff5781d620721b0997aec9c03bf899a0a1e21ff6', 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,10 @@ 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: '3b18282d22572dd1fa224333f5cd1b50459873b9' }, h("div", { key: 'fb1a5532570e59e9d1998eccbaffc5e72cd23337', class: "duet-share-chart-horizontal-bar", role: "presentation" }, this.items.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: '4749f8f2d599d9e34b834aaa55a5919f1193aa9f', 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: 'fa8b976fc09c00aebebe41cb580aee8664e93f3d' })));
     }
     static get is() { return "duet-share-chart"; }
     static get encapsulation() { return "shadow"; }