@duetds/components 10.6.0 → 10.7.0

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

@@ -0,0 +1,462 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
+import { DuetPicture } from "../../utils/picture-utils";
+import { checkNamedSlotElement, hasSlot } from "../../utils/slot-utils";
+import { parsePossibleJSON } from "../../utils/string-utils";
+const LONG_HEADING_LENGTH = 60;
+/**
+ * @slot links - Slot for links or buttons related to the teaser. Only default duet-link and plain duet-button components should be used in this slot. Not rendered when the `url` property is set.
+ */
+export class DuetTeaser {
+    constructor() {
+        /**
+         * Theme.
+         */
+        this.theme = "";
+        /**
+         * The actual heading level used in the HTML markup.
+         */
+        this.headingLevel = "h3";
+        /**
+         * Controls the visual size of the heading. Headings longer than 60 characters
+         * always use "h5" visually, regardless of this setting.
+         */
+        this.headingVisualLevel = "h3";
+        /**
+         * Background color for the icon
+         */
+        this.iconBackground = "color-background-accent-secondary";
+        /**
+         * Color for the icon
+         */
+        this.iconColor = "color-foreground-accent-secondary";
+        /**
+         * Creates/updates the actual heading element as a light DOM child of the
+         * host, slotted into the "heading" slot.
+         */
+        this.headingSetUp = () => {
+            const existing = this.element.querySelector(":scope > [slot='heading']");
+            if (!this.heading) {
+                existing === null || existing === void 0 ? void 0 : existing.remove();
+                return;
+            }
+            const tagMatches = (existing === null || existing === void 0 ? void 0 : existing.tagName.toLowerCase()) === this.headingLevel;
+            const headingElement = tagMatches ? existing : document.createElement(this.headingLevel);
+            headingElement.slot = "heading";
+            headingElement.textContent = this.heading;
+            headingElement.className = `teaser-heading teaser-heading-${this.getHeadingVisualLevel()}`;
+            if (!tagMatches) {
+                existing === null || existing === void 0 ? void 0 : existing.remove();
+                this.element.appendChild(headingElement);
+            }
+        };
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+        this.hasLinksSlot = hasSlot(this.element, "links");
+        checkNamedSlotElement(this.element, "links", "duet-link[variation=default],duet-link:not([variation]),duet-button[variation=plain]", 0, true);
+    }
+    componentDidRender() {
+        this.headingSetUp();
+    }
+    /**
+     * Sets focus on underlying a element.
+     * Available only when url attribute is used.
+     * Use this method instead of the native `focus()`.
+     */
+    async setFocus(options) {
+        if (this.url && this.aOrDivElement) {
+            this.aOrDivElement.focus(options);
+        }
+    }
+    getHeadingVisualLevel() {
+        return this.heading && this.heading.length > LONG_HEADING_LENGTH ? "h5" : this.headingVisualLevel;
+    }
+    /**
+     * render() function
+     * Always the last one of the class.
+     */
+    render() {
+        const TagName = this.url ? "a" : "div";
+        const pictureSource = {
+            img: {
+                src: this.image,
+                alt: this.imageAlt || "",
+                loading: this.imagePriority === "high" ? "eager" : "lazy",
+                fetchpriority: this.imagePriority,
+                class: "duet-teaser-image",
+            },
+            sources: parsePossibleJSON(this.sources),
+        };
+        return (h(Host, { key: 'e65b22becf6cc35870584bb5d4984a5c92c52f80' }, h(TagName, { key: '39bab1e7a6e59414e18110a6513634c4da99dbe6', href: this.url, class: {
+                "duet-teaser": true,
+                "duet-theme-turva": this.theme === "turva",
+                "duet-teaser-link": !!this.url,
+            }, ref: element => (this.aOrDivElement = element) }, this.image ? (h("div", { class: "image-wrap" }, h(DuetPicture, Object.assign({}, pictureSource)))) : (this.icon && (h("div", { class: "icon-wrap" }, h("duet-icon", { class: "duet-teaser-icon", shape: "brand", color: this.iconColor, background: this.iconBackground, name: this.icon, margin: "none" })))), h("div", { key: '985108c747576fb8fa5e522402ad6518d471a8c5', class: "duet-teaser-body" }, this.heading && (h("div", { key: '2c49e6b10827a31060a9a0263d20648835008aa0' }, h("slot", { key: '4f4470ff29f50d5b4deaa6b1e28593156c4d5b06', name: "heading" }))), this.meta && (h("duet-paragraph", { key: '86b2aca7b9b6345e14bb0e21d1e92bda158288c4', class: "duet-teaser-meta", margin: "none" }, this.meta)), this.description && h("duet-paragraph", { key: '1a4979c9fcc3e6b75724a8cf031a401d47992d43' }, this.description), !this.url && this.hasLinksSlot && (h("duet-grid", { key: 'f5d445c279ed382840cc879bf84317d329b060a4', direction: "vertical" }, h("slot", { key: '259f34f776ea59e48904321663fd54d864aa4dc0', name: "links" })))))));
+    }
+    static get is() { return "duet-teaser"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-teaser.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["duet-teaser.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "attribute": "theme",
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "heading": {
+                "type": "string",
+                "attribute": "heading",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The heading text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "headingLevel": {
+                "type": "string",
+                "attribute": "heading-level",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetHeadingLevel",
+                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+                    "references": {
+                        "DuetHeadingLevel": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetHeadingLevel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The actual heading level used in the HTML markup."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"h3\""
+            },
+            "headingVisualLevel": {
+                "type": "string",
+                "attribute": "heading-visual-level",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetTeaserHeadingVisualLevel",
+                    "resolved": "\"h3\" | \"h5\"",
+                    "references": {
+                        "DuetTeaserHeadingVisualLevel": {
+                            "location": "local",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-teaser/duet-teaser.tsx",
+                            "id": "src/components/duet-teaser/duet-teaser.tsx::DuetTeaserHeadingVisualLevel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the visual size of the heading. Headings longer than 60 characters\nalways use \"h5\" visually, regardless of this setting."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"h3\""
+            },
+            "description": {
+                "type": "string",
+                "attribute": "description",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Description text shown below the heading."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "meta": {
+                "type": "string",
+                "attribute": "meta",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Meta text (date, category, etc.). Placed after the heading in source order, but rendered visually above it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "url": {
+                "type": "string",
+                "attribute": "url",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A destination to link to, rendered in the href attribute of a link. Makes\nthe whole teaser act as a link and disables the links slot."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "image": {
+                "type": "string",
+                "attribute": "image",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Image URL. If provided, the icon property is ignored."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "imageAlt": {
+                "type": "string",
+                "attribute": "image-alt",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt attribute text for the image. If not provided, image is assigned presentation role."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "imagePriority": {
+                "type": "string",
+                "attribute": "image-priority",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"high\" | \"low\"",
+                    "resolved": "\"high\" | \"low\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Make the image load with higher or lower priority. Value \"high\" sets the img's attributes fetchpriority and loading to\n\"high\" and \"eager\", while value \"low\" sets those attributes to \"low\" and \"lazy\""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "sources": {
+                "type": "string",
+                "attribute": "sources",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetSource[] | string",
+                    "resolved": "DuetSource[] | string",
+                    "references": {
+                        "DuetSource": {
+                            "location": "import",
+                            "path": "../../utils/picture-utils",
+                            "id": "src/utils/picture-utils.tsx::DuetSource"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of sources for responsive images. Sources have the properties of <source> element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "attribute": "icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetIconName",
+                    "resolved": "string",
+                    "references": {
+                        "DuetIconName": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetIconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon to display when no image is set. Not used if the image property is given."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "iconBackground": {
+                "type": "string",
+                "attribute": "icon-background",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetColor",
+                    "resolved": "string",
+                    "references": {
+                        "DuetColor": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Background color for the icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"color-background-accent-secondary\""
+            },
+            "iconColor": {
+                "type": "string",
+                "attribute": "icon-color",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetIconColor",
+                    "resolved": "string",
+                    "references": {
+                        "DuetIconColor": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetIconColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color for the icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"color-foreground-accent-secondary\""
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on underlying a element.\nAvailable only when url attribute is used.\nUse this method instead of the native `focus()`.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+}

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

@@ -240,17 +240,17 @@ export class DuetTextarea {
      */
     render() {
         const identifier = this.identifier || this.textareaId;
-        return (h(Host, { key: 'a84e87889b86103cfb25a6fb62d5ae9fc921dde3', class: {
+        return (h(Host, { key: 'c645b374c5569d125e844312777f69b913951785', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-has-counter": this.counter && !this.error,
                 "duet-expand": this.expand,
-            } }, h("div", { key: '1cac0725d91c47a8539a3a915e033ff98dbcefeb', class: {
+            } }, h("div", { key: '5c57fd8c8f91750d834147fa416e8cda82dcf025', class: {
                 "duet-textarea-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-label-hidden": this.labelHidden,
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            } }, h(DuetInternalLabel, { key: '902dadd1b95a410ed378ce38e71644138e3aae28', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: 'db32f6f507a45acaeb0c1a5128544855ae8e0e31', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '40464ec1d95d3880de8197f5780865cdff77233d', name: "tooltip" }), this.caption && (h("duet-caption", { key: '818b2b3294cca406e31397dfb2a77110891bd4ee', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: '515635119956e32aba3bf1949f183bd37dcbbf63', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: '040fe7c9caaa720aa2b2ae9124252da85d083ceb', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: '39f181d89675a7c0cdd6a0492108c61aa8a66779', onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, rows: this.rows, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { key: '4cefb97e18df23468e25743c4f62e4df7e5d9257', alignment: "stretch" }, h("duet-grid-item", { key: 'bb2d8ca91b5478ceb814090fe1c24e48704f5747', margin: "none", fill: true }, h("div", { key: '208c4ddda91e2b97459815079c7b9a552366d4ab', class: "duet-textarea-help duet-textarea-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '9957ee1bbb21233d09e116992fa88f14185f043a' }, this.error))), h("duet-grid-item", { key: '99713afc0205b671f95297e3991ed28a55a73b73', margin: "none", class: "duet-character-count-caption" }, this.counter && h(CharacterCount, { key: '855bec2958e7aa564ec9ca5958881ad1d597fd2b', theme: this.theme, value: this.value, maxlength: this.maxlength }))), this.counter && this.maxlength && (h("duet-visually-hidden", { key: 'd76477f0c64de79265740ae7a6bb251bdba9dd0f', id: this.characterCountId, class: "visually-hidden-counter", "aria-live": "polite" }, this.visuallyHiddenCounterText)))));
+            } }, h(DuetInternalLabel, { key: '7cf923d382d2623fa18ec9ad084275e2b9792ebf', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '09a04a79bc4f13351c51ffca8332d863c7d22280', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: 'f46daf8b99a53de5e5164f0f9f357ae91e1aa586', name: "tooltip" }), this.caption && (h("duet-caption", { key: 'a2b9079234a7ec3b9b793e7912bcd4c8addc9e70', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: '7f68db3beca35abb4fb53fa1056d99857e1e8316', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: '250b6e1eb6abbb79f71e176c1c241cb1fa3da18f', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: 'c50e5d4e25d0a499cd6a1bfc03cbc546d92a3b74', onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, rows: this.rows, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { key: '20b668af694a652ea88adc161052fbff65517eb5', alignment: "stretch" }, h("duet-grid-item", { key: 'b795843db0959cc83c8724dbd587debd68f58594', margin: "none", fill: true }, h("div", { key: 'ab3999585663d8d1081fe39b43a35933af7ca9b8', class: "duet-textarea-help duet-textarea-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '4ad7dbac61a6398ec4f8459449162d002030f29e' }, this.error))), h("duet-grid-item", { key: '25e2bb115dada7a5b0baaa58efcad756c3cdfc30', margin: "none", class: "duet-character-count-caption" }, this.counter && h(CharacterCount, { key: '3e68a56f36758415be927efbc10cf267ec4d414e', theme: this.theme, value: this.value, maxlength: this.maxlength }))), this.counter && this.maxlength && (h("duet-visually-hidden", { key: '7af4e00427232548222397a4439f2e71a54ac586', id: this.characterCountId, class: "visually-hidden-counter", "aria-live": "polite" }, this.visuallyHiddenCounterText)))));
     }
     static get is() { return "duet-textarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -118,11 +118,11 @@ export class DuetToggle {
      */
     render() {
         const identifier = this.identifier || this.toggleId;
-        return (h(Host, { key: 'ba421a50fdc02e229fa28f85ff056b7871a49622', onClick: this.disabled || this.loading ? undefined : this.onClick, class: {
+        return (h(Host, { key: '8e33f58775179856fa30813d64699b5fd99d8340', onClick: this.disabled || this.loading ? undefined : this.onClick, class: {
                 "duet-m-0": this.margin === "none",
                 "duet-toggle-is-disabled": this.disabled,
                 "duet-toggle-is-loading": this.loading,
-            } }, h("div", { key: '81bcd7c487268f6f79e227a5964049c31c50537e', class: {
+            } }, h("div", { key: '814cdf2738bbf743e689d706d00999d2476474a9', class: {
                 "duet-toggle": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-side-label": this.labelPosition !== "top",
@@ -130,7 +130,7 @@ export class DuetToggle {
                 "duet-label-hidden": this.labelHidden,
                 "duet-toggle-is-disabled": this.disabled,
                 "duet-toggle-is-loading": this.loading,
-            } }, h(DuetInternalLabel, { key: '9a9c911786434d7324b8e88a8d908102a433b4f6', theme: this.theme, color: this.labelColor, weight: this.labelWeight, for: identifier, margin: this.labelPosition === "top" ? "auto" : "none" }, this.label), h("div", { key: 'de416640cd8c34241f9f8f014c71f0ec664a16a7', class: "duet-switch" }, h("input", { key: 'd420b3d44b53e0daf276c9a7cabde816bff13fa2', type: "checkbox", value: this.value, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, id: identifier, role: this.role, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled || this.loading, ref: input => (this.nativeInput = input) }), h("div", { key: '5def29eef95fba6e68134ce1c9061404bd390760', class: { "duet-slider": true, "duet-theme-turva": this.theme === "turva" } }), this.loading && h("duet-spinner", { key: '1bf177270fc0d8e66aae450110abe9ca2340c156', color: "primary" }))), this.loading && (h("duet-visually-hidden", { key: '101bf2c1752bbd1a263128aa1501b63938fee3d3', "aria-live": "polite" }, this.accessibleLabelLoading || DuetStringsLoadingDefaults[getLanguage()])), this.loadingComplete && (h("duet-visually-hidden", { key: 'd1e8b6bf58b301f82fee88b83a5591e146a16d86', "aria-live": "polite" }, this.accessibleLabelComplete || DuetStringsCompleteDefaults[getLanguage()]))));
+            } }, h(DuetInternalLabel, { key: '48309fafb420e187486b8de7eef212f614008295', theme: this.theme, color: this.labelColor, weight: this.labelWeight, for: identifier, margin: this.labelPosition === "top" ? "auto" : "none" }, this.label), h("div", { key: 'b4f62f86018a7bb7f34a450175ad996c63059ed3', class: "duet-switch" }, h("input", { key: '8c314ffe85e67fa4740ef3bb6357c17e4fc2659a', type: "checkbox", value: this.value, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, id: identifier, role: this.role, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled || this.loading, ref: input => (this.nativeInput = input) }), h("div", { key: '6e55a2738a881cf60ab6699e2e8e1fc0026362a3', class: { "duet-slider": true, "duet-theme-turva": this.theme === "turva" } }), this.loading && h("duet-spinner", { key: '1ae23364dffc828696a3591fab7e48832a18653a', color: "primary" }))), this.loading && (h("duet-visually-hidden", { key: 'a4f566fbcdb66615228cf9fc16056378cc41eda3', "aria-live": "polite" }, this.accessibleLabelLoading || DuetStringsLoadingDefaults[getLanguage()])), this.loadingComplete && (h("duet-visually-hidden", { key: 'db35c9a6927a435ed193f696e8a775f74b7d47cb', "aria-live": "polite" }, this.accessibleLabelComplete || DuetStringsCompleteDefaults[getLanguage()]))));
     }
     static get is() { return "duet-toggle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,11 +36,11 @@ export class DuetToolbar {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: '810537e117ab39b71cb7722178846736f3cb0b85' }, h("nav", { key: '12bad772d5ab1ff3e4adfca687da6c4d46ce93f0', class: {
+        return (h(Host, { key: 'a4427ddcb41378eb22a7ef7f077c9fdf1d290880' }, h("nav", { key: '255a4f21a692c5a1231d619f33a73bfece27de9c', class: {
                 "duet-toolbar": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variation]: true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: 'c4dc60b980cfaa54fed8a7578a766e9f7fe01825', class: "container" }, h("div", { key: 'cc4af5be82d76864f8160d04419533a13223fa28', class: "list", role: "list" }, h("slot", { key: 'e23afafe23ac2a9d8025e2239421e4a3c033d667', name: "left" })), h("div", { key: '28bc42be2ee3cbfda1a9645ad8b66e8dec71977b', class: "list", role: "list" }, h("slot", { key: '2f304cb81562a3bd030d5d2398a0516a6491d4e5', name: "right" }))))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'ac3f72269798fe1d29734ed2848149b1f3197815', class: "container" }, h("div", { key: '01fd28d4455b94221b7664475f7f8d948851b1ae', class: "list", role: "list" }, h("slot", { key: '51d7c5144022b4d1e580a9d33e9fff683e06e537', name: "left" })), h("div", { key: '2fd278a57422a9751f84a4faedbb26cfd8a6095c', class: "list", role: "list" }, h("slot", { key: '0e7197b5ed23a575b00e3c5dca361da1b1dfbfb0', name: "right" }))))));
     }
     static get is() { return "duet-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-toolbar-dropdown/duet-toolbar-dropdown.js

@@ -64,18 +64,18 @@ export class DuetToolbarDropdown {
             itemsAlign = this.element.parentElement.getAttribute("slot") === "left" ? "right" : "left";
         }
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { key: '537cb902a5fa3e679997e4e794d3335d0400caf6', role: "listitem" }, h("div", { key: '8ff38e056a74dcd7a30e1ab09bfa7b757e0e224f', class: {
+        return (h(Host, { key: '260d43c3c36ccc6473ada8644b3cdd6a59ae12b8', role: "listitem" }, h("div", { key: 'cd8bcc17284e41d498018e7a0f8bc202b263c27c', class: {
                 "duet-toolbar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 [itemsAlign]: true,
                 [variation]: true,
-            } }, h("button", { key: 'ed4415937f60d79cdff2794e8d0c9e32e2144ada', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, id: "button", type: "button", class: {
+            } }, h("button", { key: '8a4052995f9e9c148b96254b173ea8cad339b9b5', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, id: "button", type: "button", class: {
                 active: this.active,
                 open: this.open,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '9b594c5aa508947d9cfe551cb9c9add1bcc95a7f', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: '3f23e7a0c570956fbcaff50417cc79869b04c122', class: "label" }, h("slot", { key: '51bdc6f723e217d090f4b611eaac211611e952e6', name: "label" }), h("duet-icon", { key: 'e3ffbfb325327902cc56f9684f879164f4b3a659', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'dfcc391bafb75c326a62c89ac9d4221508e00efd', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'cc9305e0cab43bdddd6b29985921bc0e3ac6f2cc', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: 'bfa1bcc44a13762c3c7ed54b788ac83e4f9eaf36', class: "label" }, h("slot", { key: 'bb0fca1e6dd3a2bedb48f3cc737847fa92f4f887', name: "label" }), h("duet-icon", { key: '8a4ebc94bf7951dcab09cd91c77858559020da81', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '95fbfa1b864246ce99b84ca5a99832683d0cfea3', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '946f25dc7587b757fbdb11125b9aade9501c6d91' })))));
+            } }, h("slot", { key: '029b14e34e87faf198b6d77b234d40c9579d72f7' })))));
     }
     static get is() { return "duet-toolbar-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-toolbar-dropdown-link/duet-toolbar-dropdown-link.js

@@ -45,11 +45,11 @@ export class DuetToolbarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '5503edc925ef9f59d266699d49f280d803d96b1a' }, h("a", { key: '78cfd5795087aa0668130fcd1aef9af8f6afe74d', class: {
+        return (h(Host, { key: 'b00b4ee6b05837bd3221558d4031e19655e78c2d' }, h("a", { key: '4bc395b03ce0515b092b261364b0461838ce5cbc', class: {
                 "duet-toolbar-dropdown-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "link menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: '94cbf93524f24784189c22358378e2c0c21d6cc6', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '61d5272e3b2670262dabd167c898f160b9c3c751', class: "label" }, h("slot", { key: 'ce66bfda77a5f5e8292b1b05a3aac6e55f37a43b' })), this.active && (h("duet-icon", { key: 'b6ae3a0972462f8034fceda49f652477849c555d', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
+            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "link menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: 'f8d7e0d960179596c5ee99525bfbd9ee2bdc5509', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '6713e5f3ad08944baddaa01c8264293861d2aae2', class: "label" }, h("slot", { key: 'd64f498eb934e4e40c3851eff2565412bfdad6d0' })), this.active && (h("duet-icon", { key: '454ecd536a2b3643e93b7373fa5c9820a33cecdf', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     static get is() { return "duet-toolbar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-toolbar-item/duet-toolbar-item.js

@@ -86,17 +86,17 @@ export class DuetToolbarItem {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: '862f45e9efe5b3b54645c3a9627456ab5f723263', role: "listitem" }, this.badge && h("duet-indicator", { key: '29d7bdff76bcf999e4ecff6e3eedd10e006bc968', variation: "change" }), h(TagName, { key: 'b3c0820e95170ce048b75d7e02a2f2e6b7264301', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: '96487fd2e42789280cf1dc0538ff07b0f1f79264', role: "listitem" }, this.badge && h("duet-indicator", { key: '5bfd9faa52039e80c72afce6d477602c5b6e3f8e', variation: "change" }), h(TagName, { key: 'b5c8b5ac1cfe6549946e9820a2dd540490c606da', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
                 "duet-toolbar-item": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [variation]: true,
-            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("div", { key: '52d2726d3619462ac9fa1ed0b3444675a3965d6d', class: "duet-toolbar-icon" }, h("duet-icon", { key: 'f4cf50d1e5dddaaf3cebd50a4271ebb8060d2aaa', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: '545d508631827013ae6062243f7cd07e37361f1f', class: "duet-toolbar-badge" }))), h("slot", { key: 'ccf3f266976067a8dcfaeb78310ea0e9e4b740cc' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: 'f589e763aa5474a3a0dfcfbada1672d3fbb0862a', class: "duet-toolbar-icon" }, h("duet-icon", { key: '288b80450871df0f784182e1f0802cfbad4daeed', class: {
+            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("div", { key: '082cebef94f34c57a5617891c46e05cfc59f3c2c', class: "duet-toolbar-icon" }, h("duet-icon", { key: '802fab1146fc2154f1c80e097e10464507548e5f', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: 'a484198c098521fd9e8745ac234f6dbc231f029c', class: "duet-toolbar-badge" }))), h("slot", { key: '0993265ee4d23c17f425ee776ec9c14cb6454308' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: '90af7cbc5f00e4dc859cde8ae0d1166b358f097e', class: "duet-toolbar-icon" }, h("duet-icon", { key: 'd2df808e4c985501fbd5bb96946f2d9c20a2b116', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!(this.url && this.external),
                 rotate: this.trailingIcon === "action-arrow-down-small" && this.accessibleExpanded,
-            }, theme: this.theme, name: this.trailingIcon ? this.trailingIcon : this.url && this.external ? newWindowIcon.title : "", margin: "none", size: "auto", color: "currentColor" }), this.badge && this.trailingIcon !== "action-arrow-down-small" && h("div", { key: '7853154ae4ebb785a34b1de3ce36d7b1a23f304b', class: "duet-toolbar-badge" }))))));
+            }, theme: this.theme, name: this.trailingIcon ? this.trailingIcon : this.url && this.external ? newWindowIcon.title : "", margin: "none", size: "auto", color: "currentColor" }), this.badge && this.trailingIcon !== "action-arrow-down-small" && h("div", { key: 'e9b4919435ccd37e9906c033822de9195c57d73e', class: "duet-toolbar-badge" }))))));
     }
     static get is() { return "duet-toolbar-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,12 +38,12 @@ export class DuetToolbarLink {
      */
     render() {
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { key: '07041c0aec0959d4d85042618c07a5c6c5e7a80a', role: "listitem" }, h("a", { key: '5c422ec1435313ecad17c03eafaecdb42444c847', class: {
+        return (h(Host, { key: 'f932af82492da79cb86e7c40bbb887e7228489eb', role: "listitem" }, h("a", { key: 'ad12f0ddfa37ebe9be01756fd35696a00687a736', class: {
                 "duet-toolbar-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [variation]: true,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '4a127553bf1f1e27ebb5787f7b736cc7a80cf9fe', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '97573b5159185b7aae35dc962560e707de1a28b2' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '143aac785a87f5989758021a4aa61a1794e9bada', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '9e6764f6a433cd437e0d248a09f87727cf9799cf' }))));
     }
     static get is() { return "duet-toolbar-link"; }
     static get encapsulation() { return "shadow"; }