@duetds/components 10.4.0 → 10.5.0

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

@@ -144,11 +144,11 @@ export class DuetIcon {
             : {};
         const iconStyles = Object.assign({}, iconRotationStyles);
         const shapeStyle = this.shape === "brand-rotated" ? "duet-icon-shape-brand" : `duet-icon-shape-${this.shape}`;
-        return (h(Host, { key: '2a800d3292964b5a1dd5fd454662f690ce9e6b5a', class: {
+        return (h(Host, { key: 'f6a74ccabd59055d22eec3654bde9c81fd4a9ce3', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-icon-has-outline": !!this.outline,
                 "duet-icon-has-background": !!this.background,
-            } }, h("span", { key: '4d5d3fc155d6d2e4f677d8753c116c82eb865a2c', "aria-hidden": "true", style: styles, class: {
+            } }, h("span", { key: 'f2ea10e9ec8459d5a5995781e193c6d8df7fb1ef', "aria-hidden": "true", style: styles, class: {
                 "duet-icon": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
@@ -157,7 +157,7 @@ export class DuetIcon {
                 [shapeStyle]: true,
                 rotated: this.shape === "brand-rotated" && this.theme !== "turva",
                 "duet-icon-not-responsive": !this.responsive,
-            } }, h("span", { key: '6c79866426237ff75ff36401a9117dca1a68cf19', "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, "data-name": this.name, innerHTML: this.svgContent, style: iconStyles }))));
+            } }, h("span", { key: '3d93b31d1831fa77b71a5f574a38d838636c7757', "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, "data-name": this.name, innerHTML: this.svgContent, style: iconStyles }))));
     }
     static get is() { return "duet-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -45,11 +45,11 @@ export class DuetIndicator {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '0513ee5c8cb2770eb10e753901e8db638c665112' }, h("span", { key: '64ec0e8625b9cf03ed41d6cbe6ae9e286f5cd08a', class: {
+        return (h(Host, { key: '6c412435545134515ed6bb4eb8f5e1ec8701dce7' }, h("span", { key: 'f7c0f6b5019c3d9abcd01b8da701ad123910b5b3', class: {
                 "duet-indicator": true,
                 [`duet-indicator-${this.variation}`]: true,
                 "duet-theme-turva": this.theme === "turva",
-            } }), h("duet-visually-hidden", { key: 'ae27d7871ca7bbde4e8e62d3c389c4f0c5b17090' }, this.getAccessibleLabel())));
+            } }), h("duet-visually-hidden", { key: 'c4ceeb86a4ab008a251f1ce9f4f6271c3fab73ef' }, this.getAccessibleLabel())));
     }
     static get is() { return "duet-indicator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -525,27 +525,35 @@ duet-caption:not(:last-of-type) {
   border-color: rgb(214, 28, 82) !important;
 }
 
+.duet-input-container.has-adornment.has-focus .duet-input-relative,
 .duet-input-container.has-chips.has-focus .duet-input-relative {
   outline: 2px solid;
   outline-color: rgb(0, 119, 179) !important;
   outline-offset: -1px;
 }
-.duet-theme-turva .duet-input-container.has-chips.has-focus .duet-input-relative, .duet-input-container.has-chips.has-focus .duet-input-relative.duet-theme-turva {
+.duet-theme-turva .duet-input-container.has-adornment.has-focus .duet-input-relative, .duet-input-container.has-adornment.has-focus .duet-input-relative.duet-theme-turva,
+.duet-theme-turva .duet-input-container.has-chips.has-focus .duet-input-relative,
+.duet-input-container.has-chips.has-focus .duet-input-relative.duet-theme-turva {
   outline-color: rgb(23, 42, 59) !important;
 }
+.duet-input-container.has-adornment:hover:not(:disabled):not(.has-focus) .duet-input-relative,
 .duet-input-container.has-chips:hover:not(:disabled):not(.has-focus) .duet-input-relative {
   outline: 2px solid;
   outline-color: rgb(127, 150, 165) !important;
   outline-offset: -1px;
 }
-.duet-theme-turva .duet-input-container.has-chips:hover:not(:disabled):not(.has-focus) .duet-input-relative, .duet-input-container.has-chips:hover:not(:disabled):not(.has-focus) .duet-input-relative.duet-theme-turva {
+.duet-theme-turva .duet-input-container.has-adornment:hover:not(:disabled):not(.has-focus) .duet-input-relative, .duet-input-container.has-adornment:hover:not(:disabled):not(.has-focus) .duet-input-relative.duet-theme-turva,
+.duet-theme-turva .duet-input-container.has-chips:hover:not(:disabled):not(.has-focus) .duet-input-relative,
+.duet-input-container.has-chips:hover:not(:disabled):not(.has-focus) .duet-input-relative.duet-theme-turva {
   outline-color: rgb(120, 145, 164) !important;
 }
+.duet-input-container.has-adornment.has-error .duet-input-relative,
 .duet-input-container.has-chips.has-error .duet-input-relative {
   outline-offset: -1px;
   background-color: rgb(255, 240, 243) !important;
   border-color: rgb(214, 28, 82) !important;
 }
+.duet-input-container.has-adornment.has-error.has-focus .duet-input-relative,
 .duet-input-container.has-chips.has-error.has-focus .duet-input-relative {
   outline-offset: -1px;
   background-color: rgb(255, 240, 243) !important;
@@ -554,6 +562,7 @@ duet-caption:not(:last-of-type) {
   outline-color: rgb(214, 28, 82) !important;
   background: rgb(255, 255, 255) !important;
 }
+.duet-input-container.has-adornment.has-error:hover:not(:disabled):not(.has-focus) .duet-input-relative,
 .duet-input-container.has-chips.has-error:hover:not(:disabled):not(.has-focus) .duet-input-relative {
   outline-offset: -1px;
   background-color: rgb(255, 240, 243) !important;
@@ -561,6 +570,7 @@ duet-caption:not(:last-of-type) {
   outline-width: 2px;
   outline-color: rgb(214, 28, 82) !important;
 }
+.duet-input-container.has-adornment .duet-input-relative,
 .duet-input-container.has-chips .duet-input-relative {
   display: flex;
   flex-direction: row;
@@ -574,6 +584,7 @@ duet-caption:not(:last-of-type) {
   border-radius: 4px;
   transition: border 150ms ease;
 }
+.duet-input-container.has-adornment .duet-input-relative .duet-input,
 .duet-input-container.has-chips .duet-input-relative .duet-input {
   flex-grow: 1;
   flex-basis: 4rem;
@@ -581,11 +592,35 @@ duet-caption:not(:last-of-type) {
   margin-left: 12px !important;
   border-width: 0 !important;
 }
-.duet-input-container.has-chips .duet-input-relative .duet-input:focus, .duet-input-container.has-chips .duet-input-relative .duet-input:hover {
+.duet-input-container.has-adornment .duet-input-relative .duet-input:focus, .duet-input-container.has-adornment .duet-input-relative .duet-input:hover,
+.duet-input-container.has-chips .duet-input-relative .duet-input:focus,
+.duet-input-container.has-chips .duet-input-relative .duet-input:hover {
   outline: none !important;
   border-width: 0 !important;
 }
 
+.duet-input-container.has-adornment .duet-input-relative .duet-input {
+  padding: 12px 14px !important;
+  margin: initial !important;
+}
+.duet-input-container.has-adornment .duet-input-relative .input-adornment {
+  color: rgb(98, 121, 138);
+}
+.duet-input-container.has-adornment .duet-input-relative .input-adornment.prefix {
+  padding-left: 14px;
+}
+.duet-input-container.has-adornment .duet-input-relative .input-adornment.suffix {
+  padding-right: 14px;
+}
+
+.duet-input-container.has-prefix .duet-input-relative .duet-input {
+  padding-left: 8px !important;
+}
+
+.duet-input-container.has-suffix .duet-input-relative .duet-input {
+  padding-right: 8px !important;
+}
+
 .duet-theme-turva .duet-input-icon {
   color: rgb(23, 42, 59);
 }

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

@@ -27,6 +27,8 @@ export class DuetInput {
         this.proxyId = createID("DuetInput");
         this.clearId = createID("DuetInputClear");
         this.labelId = createID("DuetLabel");
+        this.prefixId = createID("DuetInputPrefix");
+        this.suffixId = createID("DuetInputSuffix");
         this.topCaptionId = createID("DuetCaptionTop");
         this.topCaptionPlaceholderId = createID("DuetCaptionPlaceholderTop");
         this.chipCountId = createID("DuetInputChipCount");
@@ -173,7 +175,7 @@ export class DuetInput {
          */
         this.labelHidden = false;
         /**
-         * Enable numeric keyboard for the input.
+         * Enable numeric keyboard for the input. Note that on iOS the numeric keyboard does not contain minus.
          */
         this.numericKeyboard = false;
         /**
@@ -182,7 +184,9 @@ export class DuetInput {
          */
         this.component = "input";
         /**
-         * Enable or disable automatic completion by the browser
+         * Set the type of automatic completion by the browser. If possible use the standard tokens like "name", "given-name",
+         * "family-name", "postal-code", "street-address" etc. The component adds automatically "tel" and "email". If you must
+         * disable autocomplete use "off" (but avoid disabling unless absolutely necessary).
          */
         this.autoComplete = "on";
         /**
@@ -255,6 +259,8 @@ export class DuetInput {
         /**
          * Private functions
          */
+        // As comma may be used as decimal separator normalize value to have dot before parsing as number
+        this.valueAsNormalizedFloat = () => { var _a; return Number.parseFloat((_a = this.value) === null || _a === void 0 ? void 0 : _a.replace(/,/g, ".")); };
         this.getAriaDescribedBy = () => {
             const describedBy = [];
             if (this.isCaptionVisible && this.topCaptionId) {
@@ -275,6 +281,19 @@ export class DuetInput {
             }
             return describedBy.length > 0 ? describedBy.join(" ") : null;
         };
+        this.getAriaLabelledBy = () => {
+            const labelledBy = [this.labelId];
+            if (!!this.fieldPrefix) {
+                labelledBy.push(this.prefixId);
+            }
+            if (!!this.fieldSuffix) {
+                labelledBy.push(this.suffixId);
+            }
+            if (!!this.accessibleLabelledBy) {
+                labelledBy.push(this.accessibleLabelledBy);
+            }
+            return labelledBy.join(" ");
+        };
         this.handleClearClick = (event) => {
             const clearing = this.clearInput();
             this.onClear(event);
@@ -365,7 +384,31 @@ export class DuetInput {
      * This is a proxy for the enclosed native inputs validity
      */
     get validity() {
-        return this.nativeInput.validity;
+        var _a, _b;
+        // Copy the value of the native validity state to a proxy object, as native validity is readonly.
+        const validity = {
+            badInput: false,
+            customError: false,
+            patternMismatch: false,
+            rangeOverflow: false,
+            rangeUnderflow: false,
+            stepMismatch: false,
+            tooLong: false,
+            tooShort: false,
+            typeMismatch: false,
+            valid: true,
+            valueMissing: false,
+        };
+        Object.keys(validity).forEach(key => (validity[key] = this.nativeInput.validity[key]));
+        if (typeof this.max !== "undefined" && ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) && this.max < this.valueAsNormalizedFloat()) {
+            validity.rangeOverflow = true;
+            validity.valid = false;
+        }
+        if (typeof this.min !== "undefined" && ((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) && this.min > this.valueAsNormalizedFloat()) {
+            validity.rangeUnderflow = true;
+            validity.valid = false;
+        }
+        return validity;
     }
     /**
      * @internal
@@ -380,7 +423,8 @@ export class DuetInput {
         inheritGlobalTheme(this);
         this.disallowedPatternChange();
         this.isCaptionVisible = !!this.caption;
-        checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
+        // Accept also slot element so that other components using duet-input can pass their tooltip slots here.
+        checkNamedSlotElement(this.element, "tooltip", "duet-tooltip, slot", 1, true);
     }
     componentDidLoad() {
         if (this.variation === "revealable" && this.nativeInput.form) {
@@ -488,6 +532,16 @@ export class DuetInput {
             }
         }
     }
+    getAutocomplete() {
+        if (this.type === "password") {
+            return "off";
+        }
+        // If attribute includes "email", e.g. "work email", don't overwrite it
+        if (this.type === "email" && this.autoComplete !== "off" && !this.autoComplete.includes("email")) {
+            return "email";
+        }
+        return this.autoComplete;
+    }
     /**
      * Add a chip to the input. Property "chips" must be true.
      */
@@ -527,7 +581,7 @@ export class DuetInput {
         const identifier = this.identifier || this.inputId;
         const inputProps = {};
         if (this.numericKeyboard) {
-            inputProps.inputmode = "numeric";
+            inputProps.inputmode = "decimal";
         }
         // Set validation regexes
         if (this.pattern && this.type !== "tel") {
@@ -552,7 +606,7 @@ export class DuetInput {
             this.type !== "password" &&
             this.type !== "time" &&
             this.variation !== "button";
-        return (h(Host, { key: 'c36aabb598d1ab24aede9cacbbc0f8dfeaf7ff2f', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: 'ee9481c94a8beeeb5b22e5f9f3dc92a96111e3e8', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: 'a75cdb69696761e21eb42620bc3162f3ffbe062e', class: {
+        return (h(Host, { key: '776ea6ee90a20ff356574b64890a7b98d9947e6c', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: 'a56addb34f4bcf57a59e060921e3dacab36a98b7', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: '04447fa85e1470adbfc2307f7b2fd5758454e0b7', class: {
                 "duet-input-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 [`duet-input-variation-${this.variation}`]: true,
@@ -565,12 +619,15 @@ export class DuetInput {
                 "has-chips": this.chips,
                 "has-clear": this.clear,
                 "has-focus": this.isFocused,
+                "has-adornment": !!this.fieldPrefix || !!this.fieldSuffix,
+                "has-prefix": !!this.fieldPrefix,
+                "has-suffix": !!this.fieldSuffix,
                 disabled: this.disabled,
-            } }, h("div", { key: '84b4ba43c2fbbdf7b390dba0a7f0dc839626b5ed', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: 'a7134e94f657eab2c9c5156a81269712c83ec270', theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '669a1461aedfebd1c2e66077beda1c298b77458c', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: 'ad5e55d3a36ade247c1508eeffe9de96df514c51', name: "tooltip" })), this.caption && (h("duet-caption", { key: '5c4bfb71d79efe8be226ba521c95c5d8fbec67de', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '4dfa6f211f3d00f6906d8e18ea9c4fdcc8ec3877', class: {
+            } }, h("div", { key: 'f5f3de4654fac36f5ffb7e0302ffccb56263728a', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: '566d4df4f7cfe09b50f4aedaf342cef70e7fc80a', theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '7560dd36ade42746228061727b2fb2b38dce7ed6', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '9b8a15f4f79269696a24c9fd989186f95dfc1e62', name: "tooltip" })), this.caption && (h("duet-caption", { key: 'c425ac21ec5942adfe5a4e48ae20080ab661bf4d', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'ac98b112529396687ec21a938c55ce1b3d86f091', class: {
                 "duet-input-relative": true,
                 "duet-theme-turva": this.theme === "turva",
                 "has-error": !!this.error,
-            } }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: 'f7811efcc2acfa5b01b1efd6d334a35c35350ca1', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: 'f4c6f4a8974bfca86248b528b05f84d50c73ba4c', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), this.variation === "button-left" && h("slot", { key: 'b270e8b1fe5c958c76b9ba82e7c25aedf35ae710', name: "button-left" }), h("input", Object.assign({ key: 'ee3e9844d6fd27bafb895d0f08a2ce2282237024', ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
+            } }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: 'db332864c2b97112aa2b9347da3d6c2468f77b0b', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: 'e92de63c87071f00143ee9db06c94361970b704a', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), this.variation === "button-left" && h("slot", { key: '274e2fe6a604c30aa879ac72a33154f1fb3c8fc9', name: "button-left" }), this.fieldPrefix && (h("span", { key: '2bd5154e89d13c7562283684a3087c3c48481fb9', class: "input-adornment prefix", id: this.prefixId }, this.fieldPrefix)), h("input", Object.assign({ key: '0b77d2e90b3acdb1452d73ad2a736e924200009a', ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
                 "duet-input": true,
                 disabled: this.disabled,
                 "is-number": this.component === "number",
@@ -578,17 +635,17 @@ export class DuetInput {
                 "after-chip": this.getAllChips().length > 0,
                 "align-right": this.inputAlign === "right",
                 [`input-padding-${this.inputPadding}`]: true,
-            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.type === "password" ? "off" : this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (h("div", { key: 'f021ac46e0c9738775a03965e2c3497d80c4dced', class: "duet-input-icon" }, h("duet-icon", { key: '56bff364b7c70d530c3dd809b2a8a2f7fe1fff5b', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: '7eb63087db85f1095034e2584cf4d1d4b124c82a', class: {
+            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.getAriaLabelledBy(), "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.getAutocomplete(), required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), this.fieldSuffix && (h("span", { key: '00f86f44a74b91127a1c11b696b51983d62a7c28', class: "input-adornment suffix", id: this.suffixId }, this.fieldSuffix)), !this.value && hasInputIcon && (h("div", { key: 'f1d531cc26ab9de06b90e38a4b790069fe920d88', class: "duet-input-icon" }, h("duet-icon", { key: 'fb14ea462e583a24e6bbd0337666dfa4ef9c9a1a', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: 'f2e415cb5d8c5eaa0bbb1bb0cad942d8a976e9a5', class: {
                 "duet-input-clear-icon": true,
                 "duet-input-clear-icon-single": !hasInputIcon,
                 "duet-input-clear-icon-double": !!this.icon,
                 "duet-input-clear-icon-button": this.variation === "button",
                 [`input-padding-${this.inputPadding}`]: true,
-            } }, h("button", { key: '72fb4efe7f5d0ea161c7401acb59f2b20a77adac', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: 'f9df024692c1be597b37cedc74c8203e8fabb908', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: 'bca090dc2f20e1febe6674059e0a3b22c2d79d2f', class: "duet-input-icon" }, h("duet-icon", { key: '9066e27643ad85bc683cd36a5998e7bd0fcad572', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: 'c83a2b95a969c7f1c2f7a3915cdfce56d1c525b8', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: '86fc4aaddb775f76d602b699bdc8c811f41f2561', ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed
+            } }, h("button", { key: '7046a5f2c94bf429f4fc46dd4a9d590171975f04', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: 'd33b0603197b14c98b4b8d76773f0c2325d365a9', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: 'f5b6861e2cd8f9affe011fc08700092296ef50c8', class: "duet-input-icon" }, h("duet-icon", { key: 'af0f1a819e505da950eec079950eb2a6c13c5254', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: 'db2a27e9e1683615a207b34f63a2981e0bbfe3e8', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: 'f2c727cd4f07ea799ad033e737f490d14a285ded', ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed
                 ? this.hidePasswordLabel[this.language]
-                : this.showPasswordLabel[this.language], margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && this.isPasswordRevealed !== undefined && (h("duet-visually-hidden", { key: 'dfa0a59d038af09b5115dae28772c108918154ab' }, h("span", { key: '00408d3c2616c8e1aa64b41503ae7760c1fd60af', "aria-live": "polite" }, this.isPasswordRevealed
+                : this.showPasswordLabel[this.language], margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && this.isPasswordRevealed !== undefined && (h("duet-visually-hidden", { key: 'd240447d7431097c99bd50fa6241a48d87b48ae0' }, h("span", { key: '47d29c787f119d0dae23436a69b192855b7bca63', "aria-live": "polite" }, this.isPasswordRevealed
             ? this.passwordShownAriaAnnouncement[this.language]
-            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: '3b539164f49b311fcdc82ce75cb75d360e148c4b' })), h("span", { key: '2f2f5abff72831b7257d404dfedecb8bea316762', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '63e8da0c2b2638d8af7f0b87f4e00ab5d5b7aa8c', class: "duet-input-error" }, this.error)))));
+            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: 'cd872ef0355479149e3b926e98e33ebccc1d0faa' })), h("span", { key: 'bbbbc5e7b7b1ddd8064bdda229ad110686075dd2', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '91876b01063f2de6147210b06daad0e5a3c71b3c', class: "duet-input-error" }, this.error)))));
     }
     static get is() { return "duet-input"; }
     static get encapsulation() { return "shadow"; }
@@ -636,7 +693,7 @@ export class DuetInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Indicates what kind of user input completion suggestions are provided."
+                    "text": "Indicates in what mode user input completion suggestions are provided. Valid values are: \"none\", \"inline\",\n\"list\", \"both\""
                 },
                 "getter": false,
                 "setter": false,
@@ -1274,6 +1331,44 @@ export class DuetInput {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "fieldPrefix": {
+                "type": "string",
+                "attribute": "field-prefix",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to show before the start (left) of the input's editable area. Also used in accessible labelling."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "fieldSuffix": {
+                "type": "string",
+                "attribute": "field-suffix",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to show after the end (right) of the input's editable area. Also used in accessible labelling."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "numericKeyboard": {
                 "type": "boolean",
                 "attribute": "numeric-keyboard",
@@ -1287,7 +1382,7 @@ export class DuetInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Enable numeric keyboard for the input."
+                    "text": "Enable numeric keyboard for the input. Note that on iOS the numeric keyboard does not contain minus."
                 },
                 "getter": false,
                 "setter": false,
@@ -1370,6 +1465,44 @@ export class DuetInput {
                 "setter": false,
                 "reflect": false
             },
+            "max": {
+                "type": "number",
+                "attribute": "max",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When max is set and getting validity, the value of the input is interpreted as a number - possible comma as\ndecimal seprator changed to dot and the value then parsed as float - and compared to max and validity set\naccordingly. This simulates the behavior of max attribute of input[type=number]."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "min": {
+                "type": "number",
+                "attribute": "min",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When min is set and getting validity, the value of the input is interpreted as a number - possible comma as\ndecimal seprator changed to dot and the value then parsed as float - and compared to min and validity set\naccordingly. This simulates the behavior of min attribute of input[type=number]."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "placeholder": {
                 "type": "string",
                 "attribute": "placeholder",
@@ -1475,7 +1608,7 @@ export class DuetInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Enable or disable automatic completion by the browser"
+                    "text": "Set the type of automatic completion by the browser. If possible use the standard tokens like \"name\", \"given-name\",\n\"family-name\", \"postal-code\", \"street-address\" etc. The component adds automatically \"tel\" and \"email\". If you must\ndisable autocomplete use \"off\" (but avoid disabling unless absolutely necessary)."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -66,24 +66,24 @@ export class DuetLayout {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '53712da1e22dc258d30906570bf1271624379ed8', class: {
+        return (h(Host, { key: '7796cda5c4db65768c100838b80382b318b3ac73', class: {
                 center: this.center,
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '80dc2f3b86a02c22c7aebd8802bd332154c4a273', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: '9f3f4c713d5b921ad78480072e3dcea4d4867d04', class: {
+            } }, h("div", { key: '1b4f06b0ccaf2a93e30cb57085b3260c9d138d1f', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: '9b64258743ef0f5802e2853b2251788fc3c7f02d', class: {
                 "duet-layout-top": true,
                 "duet-center": this.center,
-            } }, h("div", { key: '7cd44f76b96b5e2bd6033cc044f08e75a10760ed', class: "duet-layout-top-wrapper" }, h("slot", { key: '7743f1fe659f31925b27a85a970e934506b935e7', name: "top" })))), h("div", { key: '637a68f8376e073f146c63f2c866b6f52722577e', class: {
+            } }, h("div", { key: '8de64147ed6cd7c0942f5f477da01c1ee4a8a0ce', class: "duet-layout-top-wrapper" }, h("slot", { key: '5b3dcec144e1e7a7707f52b18b8b1dc1d3cb13e7', name: "top" })))), h("div", { key: '57ef787cdd754a6749f76ce151ed15bb779b110b', class: {
                 "duet-layout": true,
                 "has-sidebar": this.hasSidebar,
                 "duet-center": this.center,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("main", { key: 'f6b2682dfb675be08976b23a485cf1a7ad76de0c', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '9ec618959d54d768b880f95e05df0e5aaf76de75', name: "page-heading" }), h("slot", { key: 'b3c960b48d55fb863854fc34e126b1a143b3d194', name: "main" })), this.hasSidebar && (h("aside", { key: '68671aab139ba365d60284909e489a78bd7438d3', class: "duet-sidebar" }, h("div", { key: '60a53e1fa61ccec8fa2b85f20b475c52e016b963', class: {
+            } }, h("main", { key: '11712887cb73595787e00eb4ae51be583e222d69', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '024128c99761e9ce2df803f1a7af98da0bb39d48', name: "page-heading" }), h("slot", { key: '5ec1793d46d607633b527d9497e9c160f1879f4a', name: "main" })), this.hasSidebar && (h("aside", { key: 'c68315f8b323267fabd94fb2f45fa29294c6e17a', class: "duet-sidebar" }, h("div", { key: '5222f4a3bc1b36710f1efc85cd09c31cd676d661', class: {
                 "duet-sidebar-container": true,
                 "has-tabs": this.tabs,
                 sticky: this.sticky,
                 [this.stickyDistance]: this.sticky,
-            } }, h("slot", { key: 'a6131a1af98bb5cf2c6c808b15cea9e6996143f3', name: "sidebar" }))))))));
+            } }, h("slot", { key: '2c51db0affb26210fbbf38b7776d66f64c530f6f', name: "sidebar" }))))))));
     }
     static get is() { return "duet-layout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -187,10 +187,10 @@ export class DuetLink {
         const Tag = !this.url && this.variation !== "default" ? "button" : "a";
         const role = !this.url && this.variation === "default" ? "button" : null;
         const isButton = Tag === "button";
-        return (h(Host, { key: '7fc9958dae390b84feaddc854bf6b039d3bd00a4', class: {
+        return (h(Host, { key: '63ea212c967fed116f28d316bf7b4dc6f7bed88d', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: '1d0baa8ee391bbfc51eb30936564d9e7d1a7de97', href: this.url, class: {
+            } }, h(Tag, { key: 'c799db0446fbca186340c781f23ccecaf58e4336', href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
                 "duet-link-is-download": !!this.download,

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

@@ -101,7 +101,7 @@ export class DuetList {
      * Always the last one in the class.
      */
     render() {
-        return (h("dl", { key: '82930dea1fe1193f295b5888ed5f06a85693faaa', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: '44602efe41782f5dc0221b0fe2dd2ac6dc905ae3' })));
+        return (h("dl", { key: '8b5a83409655ee3c79b0d076851d5f35ac038766', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: 'f9e3dfbf22a5055c0ee910c4347f2d69b7971d59' })));
     }
     static get is() { return "duet-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -34,7 +34,7 @@ export class DuetListItem {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'e4cd01b6b0c03f3d82beba7c85400711e49f6582', class: {
+        return (h(Host, { key: '2fc646c6ec771484ba741b13db4e05af02190613', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-no-stacking": !this.responsive,
                 "duet-list-item-breakpoint-x-small": this.breakpoint === "x-small",
@@ -42,7 +42,7 @@ export class DuetListItem {
                 "duet-list-item-breakpoint-medium": this.breakpoint === "medium",
                 "duet-list-item-breakpoint-large": this.breakpoint === "large",
                 "duet-list-item-breakpoint-x-large": this.breakpoint === "x-large",
-            } }, h("dt", { key: '9644bd50dfb2d6b45bd136bedcb6968f9a2675ba' }, h("slot", { key: 'db3550984b29dd4dad07eb4ab7d047652e83ac22', name: "label" })), h("dd", { key: '1e01b0449b667d1de8e9ba3ed9593725c5ce8353' }, h("slot", { key: 'c0662c72ff8ba3c2a13041b741b15ee1f9b0f544', name: "value" }))));
+            } }, h("dt", { key: 'a6f04cd679b723dec94b73f49a1f01e765cc2c2c' }, h("slot", { key: '3406e6b4499bc4e1ccbb65c8c20861a940058120', name: "label" })), h("dd", { key: '12904de4492dd50e266c323d2d038a514e4ed4f1' }, h("slot", { key: '1b5922436da8b77d4687c2fe55e7f58c5af37647', name: "value" }))));
     }
     static get is() { return "duet-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -123,7 +123,7 @@ export class DuetLogo {
      */
     render() {
         const TagName = this.href ? "a" : "div";
-        return (h(Host, { key: '31d7e480f3c9ef37d87d5af511489b235731973c', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: 'f280ec89b183ee99be0449f35a824b77aff8a2d0', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
+        return (h(Host, { key: 'e210c4ffcf033bc1f53fb90ae2d1a9c98c8f61f6', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: 'cabf21f4898aab94d08a9de35222313124a6645c', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
                 "duet-logo": true,
                 [this.size]: true,
                 "duet-logo-inverse": this.inverse,

package/lib/collection/components/duet-menu-bar/duet-menu-bar.js

@@ -132,17 +132,17 @@ export class DuetMenuBar {
     render() {
         const slideoutAvailable = document.querySelectorAll("duet-slideout").length > 0;
         const isUsedAsAdditionalHorizontalNav = slideoutAvailable && !this.logo;
-        return (h(Host, { key: 'da384aec934b8177658bc5b2ba9126dabe8b44cc' }, h("nav", { key: 'eb7dd8d958e964d1b0e5d2cf96a20a4d0c0c70dc', class: {
+        return (h(Host, { key: '0ebf784bb990ec8bd12412e38dd2ba2a78fb52b7' }, h("nav", { key: '64c163dbdfb5179dae0026489a795e2834141a8a', class: {
                 "duet-menu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 "horizontal-nav": isUsedAsAdditionalHorizontalNav,
                 "duet-menu-bar-slim": !this.centerSlotUsed,
                 hidden: this.hidden && this.hideOnScroll,
                 bottom: this.onBottom,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '4a8a38d9fd5457b716bff3252791d35eb8441aec', class: "top" }), h("div", { key: 'dfe385565d075aba16005d29790111cc51b5a464', class: { container: true, "with-info-text": !!this.logoInfoText && !this.centerSlotUsed }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: 'd7fa21e1f8b0f3ea5eeb5eff037790a47c57be22' }, h("duet-logo", { key: '081cd1b58c97e71196ff421dbb7b1ed4f2e2278e', class: "medium", size: "medium", margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), h("duet-logo", { key: '41b6ffe971ec6c9ff78c2f79834df3c9dceb3482', class: "large", size: "large", margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), h("duet-logo", { key: '16cc7621a8d50d64d63fd7b8af07f074e30a49d0', class: "only-symbol", onlySymbol: true, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), this.logoInfoText && !this.centerSlotUsed && (h("div", { key: '2f0bcec90b8c9f508d95fb31d8ad9904ea7bf652', class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'f98ccc695bc530e42a1301dfd641cc370657db84', class: "top" }), h("div", { key: 'd642b8235270592ef2fe2f8a0e09efc1f7c6642a', class: { container: true, "with-info-text": !!this.logoInfoText && !this.centerSlotUsed }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '0af4e7323cad0bd980ed583c1fca8d84d8bb91e5' }, h("duet-logo", { key: 'f6c4faec9956d31df570be2e37dcff785eb716e3', class: "medium", size: "medium", margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), h("duet-logo", { key: 'b32ee7cfe7ffdffe9daadb6a3e134fbd8f1a979a', class: "large", size: "large", margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), h("duet-logo", { key: '2051733dc6d65e369f731cc2060cc7ffd64433a9', class: "only-symbol", onlySymbol: true, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), this.logoInfoText && !this.centerSlotUsed && (h("div", { key: '3e4aabaf4fe328670b3c0aac894219ed8d8948b8', class: {
                 "duet-logo-info-text": true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, this.logoInfoText)))), h("div", { key: '0630a90a58cfcfdd4255c018db1ea172240b5611', class: "list center", role: "list" }, h("div", { key: '6e9f9d06775216dfa9ec70b2c768d5957ba67f10', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: '03f6a07cf3633d2ba2c62b76d40d2f74bba6f366', name: "center" }), h("div", { key: '7baeb903a2656bb33129bac0cf6007fce4604bd1', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '8a183192d62d7040c1ab2a8a684d8a7678803436', class: "list right", role: "list" }, h("slot", { key: 'd2f48181bf06824a5901fdc37f7f9eb729460c68', name: "right" }))), h("div", { key: '3b1e931eb638ea04b5a0743d2ab03413ca220a33', class: "bottom" }))));
+            } }, this.logoInfoText)))), h("div", { key: '69a656950f585ea5a403c2cbef0fe43a187c3fb9', class: "list center", role: "list" }, h("div", { key: 'c09b81f8d1445a9a6e160a17e8b2ae8385e48c32', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: '73b85aa0012107a492b4193248889d19dc4f0284', name: "center" }), h("div", { key: 'd63135139588f5edde15aa4fe06db312f81c2d16', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '2e226edcf43265cfe66c6d593b852e22bc0b184c', class: "list right", role: "list" }, h("slot", { key: 'ff09b9aca19634847dec1ae050e29378cffee6eb', name: "right" }))), h("div", { key: '037e499130954d66e9a319da25bbf134fa53acec', class: "bottom" }))));
     }
     static get is() { return "duet-menu-bar"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-menu-bar-button/duet-menu-bar-button.js

@@ -49,10 +49,10 @@ export class DuetMenuBarButton {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '0e1e537a15d9a7b7d94a2ce24a71281b4757b1d5', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: 'c7ab5d711a28d54af476fdf133e8f92bce25f020', ref: button => (this.nativeButton = button), class: {
+        return (h(Host, { key: '27fb2c633e88b04b7397830d15c881240d29a91b', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '29791cfd8473dc9407238460bcb1e169f183f074', ref: button => (this.nativeButton = button), class: {
                 "duet-menu-bar-button": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.icon && (h("duet-icon", { key: '922a6e2fa015b52aac218ce9e803c75a57465310', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'd85350f1fb803be4e524803b0bea4acc62f569fb' }))));
+            }, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.icon && (h("duet-icon", { key: 'e037dac1385bef39b070602ba5bfb278470a49dd', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '95fd0aef38328dece2756ceed18c904c0c447d76' }))));
     }
     static get is() { return "duet-menu-bar-button"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-menu-bar-dropdown/duet-menu-bar-dropdown.js

@@ -62,17 +62,17 @@ export class DuetMenuBarDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '549451747b5d958dcac03314e5571631ddb5681c', role: "listitem" }, h("div", { key: '91c7c1f71d878251370fd14fbe8a5f7e53a4d8bd', class: {
+        return (h(Host, { key: 'c46c77a3b37d72d4f026c5027a8bed6dc33621c5', role: "listitem" }, h("div", { key: 'bed24491075bfc2c5dcf225c5262a1af76e7a34f', class: {
                 "duet-menu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
                 [`duet-menu-bar-dropdown--slot-${this.getVariant()}`]: true,
-            } }, h("button", { key: 'a1bc6d43c28b9070c8f351111312cf436b02b3a2', ref: element => (this.button = element), "aria-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: 'bee18f72f97fe86364cdf6afa685602feea7f694', ref: element => (this.button = element), "aria-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
                 active: this.open,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '612895f551ed8c5045b2a5946b3528948fb34468', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '92d067edbc9fd30ed9113f20153943cfe99030fa', class: "label" }, h("slot", { key: '2dc4b402f56b0e45f4590a563bdbff368bf9e761', name: "label" }), h("duet-icon", { key: '97c55f40d40e52c267bdc2f0edf127c8868b91d2', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '625909f147e2f0d3ac7d74197d787621afd5ad5e', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '9b5beb13681712fe262c14ba74de6b30ab481dff', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'debea3ea41d1b4358dbf774b54558d8921b92006', class: "label" }, h("slot", { key: 'fffcc54cdfb0032577c066e374c3465eafac3206', name: "label" }), h("duet-icon", { key: 'a36c591292ca2c2b445e04f53721f788a4005934', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '3794aa5366239e4db4286303ef75f30778e3b911', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '927e1629164029ae374bf2a0828246865e682f21' })))));
+            } }, h("slot", { key: '4a0657ee88ab885d6e177b654e0e9231d0027ec1' })))));
     }
     static get is() { return "duet-menu-bar-dropdown"; }
     static get encapsulation() { return "shadow"; }