@duetds/components 10.3.1 → 10.5.0

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

@@ -45,11 +45,11 @@ export class DuetIndicator {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: 'dec9ae44791d7c11742399064ae9f5abcb25a0da' }, h("span", { key: '869ad4db73c79b071b6b1cc4667926874f836351', 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: '95d24f44ddab59732430691a257eebe5de008870' }, 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

@@ -339,11 +339,11 @@ duet-caption:not(:last-of-type) {
   color: rgb(181, 198, 208);
 }
 .duet-input[disabled] {
-  color: rgb(8, 42, 77) !important;
+  color: rgb(98, 121, 138) !important;
   cursor: not-allowed !important;
   outline: none !important;
   background: rgb(228, 236, 239) !important;
-  border-color: rgb(228, 236, 239) !important;
+  border-color: rgb(181, 198, 208) !important;
   opacity: 1 !important;
   -webkit-text-fill-color: rgb(8, 42, 77) !important;
 }
@@ -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);
 }
@@ -602,6 +637,15 @@ duet-caption:not(:last-of-type) {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: rgb(23, 42, 59) !important;
 }
+.duet-theme-turva .duet-input[disabled] {
+  color: rgb(95, 122, 143) !important;
+  cursor: not-allowed !important;
+  outline: none !important;
+  background: rgb(228, 233, 237) !important;
+  border-color: rgb(178, 194, 205) !important;
+  opacity: 1 !important;
+  -webkit-text-fill-color: rgb(23, 42, 59) !important;
+}
 .duet-theme-turva .duet-input::placeholder {
   color: rgb(120, 145, 164);
 }

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";
         /**
@@ -204,6 +208,10 @@ export class DuetInput {
          * Component event handling.
          */
         this.onInput = (ev) => {
+            if (this.maxlength && this.nativeInput.value.length > this.maxlength) {
+                // Android doesn't honor maxlength
+                this.nativeInput.value = this.nativeInput.value.slice(0, this.maxlength);
+            }
             if (this.disallowPatternRegex) {
                 cleanValue(this.nativeInput, this.disallowPatternRegex);
             }
@@ -251,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) {
@@ -271,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);
@@ -361,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
@@ -376,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) {
@@ -484,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.
      */
@@ -523,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") {
@@ -548,7 +606,7 @@ export class DuetInput {
             this.type !== "password" &&
             this.type !== "time" &&
             this.variation !== "button";
-        return (h(Host, { key: '1eb6191aaab4c5bd1077c68882b28d04fe1affef', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: '606e2f2ae2ab2b48318b7fd8f4d2192e9c1d9ea8', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: '80a74a720c101407751f1004d0ded71d9f5b0cca', 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,
@@ -561,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: 'e75d978a35f9329df71ec9e85f0eed8433addb13', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: '42155bef67e2f2ed2bc401abbed050e9b147c5b0', 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: '0b17713442d9e85a071fd8f891ad8b18e6d41c1b', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '574024190707b602760edf56f6f081cdc5ce3a06', name: "tooltip" })), this.caption && (h("duet-caption", { key: '3bfd4db6bcb18def8439d3b3532fed1f4ec2c3ed', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '0db5fecd76df4b90a6990d382e5af5ea655597a2', 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: 'd501c8b4037074997020bca7c3ea488e85eecd00', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: '80ada9143fc5d0a80be79225176321dde4c2b751', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), this.variation === "button-left" && h("slot", { key: 'd2f2297577b918f9b00dffe210310f8b5902b8f4', name: "button-left" }), h("input", Object.assign({ key: 'c73b07336a423b55fc1365d51db107df4ec3c9d0', 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",
@@ -574,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: '1c17a9d9d010a4f780603790a88dee696a2b9cc4', class: "duet-input-icon" }, h("duet-icon", { key: '31a464daf54eb879f7e29821dfea02e2e0a3ea1a', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: 'ceeb34206ddc6e2b5aa413e1811cf9884b88aa02', 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: '1857977acef2e30274a24d1d79f517e2f4c85622', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: '7873a22bdde0030f84d65a12eb9eef6f7e5b4f05', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: '772cbb355e2e10bd6ed14b8f5f3f7759943d564e', class: "duet-input-icon" }, h("duet-icon", { key: 'a814a80c20d9b449b780bfb76300c0bfd2a81179', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: 'e5dc657f02e11f18fce79ac4ae100ec22d7c6262', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: 'f6f4f1af8a5597235245bfa13c569a3b8b15b58c', 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: '8194008037516aa17ab2ee14066ee3b936dee6dd' }, h("span", { key: '3eaba770a22e3c7fce643f29204cba36837ae6ca', "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: '85d82cb13cee107e0bbf8a45a882954cb680b1ef' })), h("span", { key: '7dc23251785bd369b7485d5e07c7b13b8594b3bd', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '6e5d9037b73b4aac9643ce004fafa25eb0a2ad9d', 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"; }
@@ -632,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,
@@ -1270,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",
@@ -1283,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,
@@ -1366,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",
@@ -1471,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: '2cdbe38f663ea0d8cc15fd500ecda5f411b9e0ad', class: {
+        return (h(Host, { key: '7796cda5c4db65768c100838b80382b318b3ac73', class: {
                 center: this.center,
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '3844cb119e6ee20b71358c128536e493c0cefa10', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: 'fc18a4c1bf4b0779f72fbe64409a7b34bf352761', 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: '3737558d8a28f5d5036e7a80dcaaf0b4414e62fb', class: "duet-layout-top-wrapper" }, h("slot", { key: '7fb843ff9f8debeb3690193a15fd76c1bcf4e12d', name: "top" })))), h("div", { key: 'adfd7395cbb2e39f853b88a14f991b00f8476090', 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: '0506f7e5ae428fbab490af792a6c9662b7b4e9fd', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '820596fd9584dc5abfc82f2aae4b1fafe6d1f7a5', name: "page-heading" }), h("slot", { key: '8f513267e5becd3d5f079983895ebd7c4a409e74', name: "main" })), this.hasSidebar && (h("aside", { key: 'c3689c4105724962cffbedef78edbfa5d51e114b', class: "duet-sidebar" }, h("div", { key: 'b327b7c652bf43acaf36442b9aa47e0289d52d0c', 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: '75ea637d7fc09abde7ffb80b306b4f688811e415', 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: 'b7bc738a8b128a9e56337a4ddc2b3d8cb87d4cf6', class: {
+        return (h(Host, { key: '63ea212c967fed116f28d316bf7b4dc6f7bed88d', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: '5b530346d4036ccf8d777a2114ab74385d390eb9', 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: '8db79297c536ab67ccc4692ce3fba04812ad38f0', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: '9644e8591deac7c8e4ac380f65e93ffb54154e70' })));
+        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: '47185c0399f547a7d80ac43adf617b617e33e604', 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: '6ae3c144789f6f61efd296b660b88b180a5e0e38' }, h("slot", { key: 'c33e76c13b822b05a938e421d6eb53ef95e403f7', name: "label" })), h("dd", { key: '31bda43d4a91ec3b4a44746a0ddde2f7b91845c2' }, h("slot", { key: 'c1ce54a0b9a7dd7256a7dcf3a32bef70bb063621', 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: 'd99854962d44321597d2a365ebb9a1cc9ea96ef5', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: 'a68c65c4e68571831417a0c6ae7e8ae339f7fe29', 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: '20953eddb5841bc9c3270486dd3734ec5cc3a952' }, h("nav", { key: '1c25040ecad0544d6875be135b0e37d228d252ac', 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: '8f97938d286808eeaac40b082bce5e01011d23be', class: "top" }), h("div", { key: '1e9f311e8d1cfd877a927a8088b898446dd180ac', class: { container: true, "with-info-text": !!this.logoInfoText && !this.centerSlotUsed }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: 'c294599cde52e8fcabd0412fcd803e472bf97e45' }, h("duet-logo", { key: '0a25bba9944d981a0c0a0fc030df98c3ab191a20', 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: '93471aa81e550289950f4bf1334ec780bbffa658', 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: '08c23b2467aa25bb26f2d63b6bcf282b66930ece', 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: '56afacfd12bbaf8221f0054098db968d6cf48821', 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: 'f0c2016af395fbf2b559d04250b37e615ec6aa6d', class: "list center", role: "list" }, h("div", { key: 'f22dc0cbdccf64d0eca130fadaa5ce0a94a49652', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: '013cb15f8cf0e113f61ee79951145ba591643c8e', name: "center" }), h("div", { key: '261f3b02c4a5479c55f14d184d1f62f0e1b423e5', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '340de122eae1f45e67510326ed7853d554620629', class: "list right", role: "list" }, h("slot", { key: '4e06e5759df443ea2f958eb3337714b353c46a1a', name: "right" }))), h("div", { key: 'd7cf80a004bef36a8d4ddd7b15276ba703393e11', 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: '5e64c2ede59d8e16972663cace2e98dffca3a060', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '362525c4f563bd1a5ffad7b8fee029d904fb72c8', 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: '439d74e7bdfb1396a7c1e2940c3bcf142c3150b6', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '61a36d95ee1b2962b3f966dc99678c7e00c00692' }))));
+            }, "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: '870e7ba2d40001532dabdb4c9468b73570e1ade7', role: "listitem" }, h("div", { key: '7c60bf682acd9d11e8633f862f07391a706de817', 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: 'c0bdf57ef46ae179d3c0d6e7f45bdd7ffe10769b', 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: 'c97e52d72933959ecbd6b9519940427735cdeccc', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'd831c0f2defb108643ac9a11f6be93f4f98a8dbc', class: "label" }, h("slot", { key: 'c396567614cd3badd2b373a1922ea907f75750a8', name: "label" }), h("duet-icon", { key: '4e8adfdf9998028a514fa386275affa9c4fe29be', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '683257ed3f02ee4cde289c0efe48af7f06fa50c5', 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: '281de42fd56a1c9be76c9b4218d4354032a56834' })))));
+            } }, h("slot", { key: '4a0657ee88ab885d6e177b654e0e9231d0027ec1' })))));
     }
     static get is() { return "duet-menu-bar-dropdown"; }
     static get encapsulation() { return "shadow"; }