@duetds/components 10.4.0 → 10.6.0

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

@@ -8,7 +8,7 @@ import { inheritGlobalTheme } from "../../common";
 import { DuetInternalLabel } from "../../common/label";
 import { createID } from "../../utils/create-id";
 import { cleanValue, resetCursor } from "../../utils/input-utils";
-import { isArrowLeftKey, isArrowRightKey, isBackspaceKey, isEnterKey, isEscapeKey } from "../../utils/keyboard-utils";
+import { isArrowLeftKey, isArrowRightKey, isBackspaceKey, isCharacterInsertKey, isEnterKey, isEscapeKey, } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { checkNamedSlotElement, proxyInputToSlot } from "../../utils/slot-utils";
 const icons = {
@@ -27,10 +27,13 @@ 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");
         this.errorId = createID("DuetError");
+        this.maxlengthAnnouncementKey = 0;
         this.disallowPatternRegex = null;
         this.clearLabel = {
             en: "Clear",
@@ -67,6 +70,11 @@ export class DuetInput {
             fi: "valittu",
             sv: "valt",
         };
+        this.maxlengthReachedLabel = {
+            en: "This field has a maximum length of {max} characters. Limit reached.",
+            fi: "Tämän kentän enimmäispituus on {max} merkkiä. Raja on saavutettu.",
+            sv: "Det här fältet har en maximal längd på {max} tecken. Gränsen är nådd.",
+        };
         /**
          * State() variables
          */
@@ -76,6 +84,10 @@ export class DuetInput {
          */
         this.isFocused = false;
         this._accessiblePopup = undefined;
+        /**
+         * Text announced to screen readers when the maxlength limit is reached.
+         */
+        this.maxlengthAnnouncement = "";
         /**
          * Indicates the id or a string of space seperated ids of a component(s) that describes the input.
          */
@@ -173,7 +185,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 +194,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,9 +218,22 @@ export class DuetInput {
          * Component event handling.
          */
         this.onInput = (ev) => {
-            if (this.maxlength && this.nativeInput.value.length > this.maxlength) {
+            var _a;
+            // In addition to input event, maxlength handling uses also keyDown and paste events as input event may not be
+            // triggered when entry is truncated by the browser.
+            if (this.maxlength) {
+                const wasAtMaxlength = (((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0) >= this.maxlength;
+                const nativeLength = this.nativeInput.value.length;
                 // Android doesn't honor maxlength
-                this.nativeInput.value = this.nativeInput.value.slice(0, this.maxlength);
+                const inputOverflow = nativeLength > this.maxlength;
+                if (inputOverflow) {
+                    this.nativeInput.value = this.nativeInput.value.slice(0, this.maxlength);
+                }
+                const limitJustReached = !wasAtMaxlength && nativeLength === this.maxlength;
+                const limitExceededWhileFull = wasAtMaxlength && inputOverflow;
+                if (limitJustReached || limitExceededWhileFull) {
+                    this.handleMaxlengthLimitReached();
+                }
             }
             if (this.disallowPatternRegex) {
                 cleanValue(this.nativeInput, this.disallowPatternRegex);
@@ -252,9 +279,35 @@ export class DuetInput {
                 component: "duet-input",
             });
         };
+        this.onInputKeyDown = (ev) => {
+            if (this.maxlength && isCharacterInsertKey(ev) && this.isAtMaxlengthWithoutSelection()) {
+                this.handleMaxlengthLimitReached();
+            }
+        };
+        this.onInputPaste = () => {
+            if (this.maxlength && this.isAtMaxlengthWithoutSelection()) {
+                this.handleMaxlengthLimitReached();
+            }
+        };
+        this.isAtMaxlengthWithoutSelection = () => {
+            const input = this.nativeInput;
+            const inputIsWithoutSelection = input.selectionStart === input.selectionEnd;
+            const inputIsAtMaxlength = input.value.length >= this.maxlength;
+            return inputIsWithoutSelection && inputIsAtMaxlength;
+        };
+        this.handleMaxlengthLimitReached = () => {
+            clearTimeout(this.maxlengthAnnouncementTimeoutId);
+            this.maxlengthAnnouncement = "";
+            this.maxlengthAnnouncementTimeoutId = setTimeout(() => {
+                this.maxlengthAnnouncementKey++;
+                this.maxlengthAnnouncement = this.maxlengthReachedLabel[this.language].replace("{max}", String(this.maxlength));
+            }, 300);
+        };
         /**
          * 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 +328,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 +431,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 +470,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 +579,21 @@ export class DuetInput {
             }
         }
     }
+    getAutocomplete() {
+        if (this.type === "password") {
+            return "off";
+        }
+        const tokens = this.autoComplete.split(/\s+/);
+        // If attribute includes "email", e.g. "work email", don't overwrite it
+        if (this.type === "email" && this.autoComplete !== "off" && !tokens.includes("email")) {
+            return "email";
+        }
+        // If attribute includes "tel", e.g. "mobile tel", don't overwrite it
+        if (this.type === "tel" && this.autoComplete !== "off" && !tokens.includes("tel")) {
+            return "tel";
+        }
+        return this.autoComplete;
+    }
     /**
      * Add a chip to the input. Property "chips" must be true.
      */
@@ -527,7 +633,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 +658,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: '1119e8e51f3a490e34665e77ce32ec21f7bc70c7', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: '31afa65dcb1b161f8c5a87c65953a26a552066b8', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: '5574afef8c592593193cbf0c99eaf8eaa84dbf11', class: {
                 "duet-input-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 [`duet-input-variation-${this.variation}`]: true,
@@ -565,12 +671,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: 'cd0dfb4e8ef821c84d342fff017da9b3e6938134', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: '7ef9a4e3ccbc5b7ac030ca66912eb0471103ed10', 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: 'f263424aa51a59f4252cad4b4a1347b5986869ae', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: 'b4afd5ae65bbc03083b81996965cb354d6fd2a35', name: "tooltip" })), this.caption && (h("duet-caption", { key: '1d126824ee2ef4b7a4dae8650363e9da0b58c288', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'adb5b8fa3b3de37c96d74fd1b888de75689a3ce0', 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: 'fcadd06bf9e0dc4115c0bd004de23fa5692b03fc', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: '84a8a1feed5a0895936f5e1d5ee310c6282f1678', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), this.variation === "button-left" && h("slot", { key: '90533c1b234e2644eb97317f903abbf04fee8138', name: "button-left" }), this.fieldPrefix && (h("span", { key: '151fd6757766b8c7e86ded73639d87bb32814089', class: "input-adornment prefix", id: this.prefixId }, this.fieldPrefix)), h("input", Object.assign({ key: '06811722717032661d4ba5e3bfa9c2b6196cf082', ref: input => (this.nativeInput = input), onInput: this.onInput, onKeyDown: this.onInputKeyDown, onPaste: this.onInputPaste, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
                 "duet-input": true,
                 disabled: this.disabled,
                 "is-number": this.component === "number",
@@ -578,17 +687,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.maxlength && (h("duet-visually-hidden", { key: `maxlength-announcement-${this.maxlengthAnnouncementKey}`, "aria-live": "polite", "aria-atomic": "true" }, this.maxlengthAnnouncement)), this.fieldSuffix && (h("span", { key: 'b2d284fc05798f7dab08555f524cabf4f94f0e19', class: "input-adornment suffix", id: this.suffixId }, this.fieldSuffix)), !this.value && hasInputIcon && (h("div", { key: '8364a8a7687b6e37279585edf55da9005673f4df', class: "duet-input-icon" }, h("duet-icon", { key: '1b420da3e76241f1e105ce5ef8b9f40e6490424d', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: 'c67978258fbf64a22563a8e139b7a7de012bb4ca', 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: 'b243244d6d5184c42a9afb93483479a0b07bad7d', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: '2ff21863005e55dc7a4dc1a16e2e2e40ad7f85cf', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: '7732892f159a6c7c9ad7c89b0031052b1ed45502', class: "duet-input-icon" }, h("duet-icon", { key: '97de6dc8ff0c506db494dc36edc6d0107792c2b9', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: '5c940caf605e2eaff4db2a36c63548db78f36f41', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: 'caf0a7c8bec4a620e2ca5f897eaabc1814f32c5d', 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: 'cc394dbd7d28fc9e1cf0a864c67e7e7a6a835d1a' }, h("span", { key: '20033ed28c86634d6faf03180e53cff84def1329', "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: 'b72c50503fa80fd1ba6764b7b3348bc5d7b2813c' })), h("span", { key: '25790e8c5147bb271fefa6cbce2343287b57c816', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'c62d261a03ebec492aed9c65a836525e47660cfc', class: "duet-input-error" }, this.error)))));
     }
     static get is() { return "duet-input"; }
     static get encapsulation() { return "shadow"; }
@@ -636,7 +745,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,
@@ -1108,7 +1217,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputType": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputType"
                         }
                     }
@@ -1134,7 +1243,7 @@ export class DuetInput {
                     "references": {
                         "DuetVariationType": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetVariationType"
                         }
                     }
@@ -1274,6 +1383,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 +1434,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 +1517,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",
@@ -1399,7 +1584,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputComponentType": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputComponentType"
                         }
                     }
@@ -1475,7 +1660,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,
@@ -1623,7 +1808,8 @@ export class DuetInput {
             "language": {},
             "isPasswordRevealed": {},
             "isFocused": {},
-            "_accessiblePopup": {}
+            "_accessiblePopup": {},
+            "maxlengthAnnouncement": {}
         };
     }
     static get events() {
@@ -1643,7 +1829,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }
@@ -1664,7 +1850,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }
@@ -1685,7 +1871,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }
@@ -1706,7 +1892,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }
@@ -1727,7 +1913,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }

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

@@ -121,7 +121,7 @@ export class DuetLabel {
                     "references": {
                         "DuetLabelMargin": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-label/duet-label.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-label/duet-label.tsx",
                             "id": "src/components/duet-label/duet-label.tsx::DuetLabelMargin"
                         }
                     }
@@ -147,7 +147,7 @@ export class DuetLabel {
                     "references": {
                         "DuetLabelSize": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-label/duet-label.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-label/duet-label.tsx",
                             "id": "src/components/duet-label/duet-label.tsx::DuetLabelSize"
                         }
                     }

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: 'c3ba619c0c3088257b425ba8f5022ebef33c1100', 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: 'd627f63579dfb957bf3abe17191e8a8e943f0aae', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: '4586ff77f2ef4209020a2401eef63273527a2e27', 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: 'daebb47e73054b59bb0459dc3327e0e60b17ebbe', class: "duet-layout-top-wrapper" }, h("slot", { key: '339fac00b53c0b4f532cfc77d5743217b5f72057', name: "top" })))), h("div", { key: 'bbf287d1f0aa701c40553a426b7a77b0a1c24c17', 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: '0d75aa9aeb65fa61f8e0ff114cee467abe49f1cd', class: "duet-main" }, this.hasPageHeading && h("slot", { key: 'fd0ed7464c54122f1cfbbfbfc40f78d8c9ab41c7', name: "page-heading" }), h("slot", { key: '1004e4007a1d82e22147ddf3a883e8ddc9c7b0dc', name: "main" })), this.hasSidebar && (h("aside", { key: '167c6d2495c8bbc7cd0275f723e0810b9fc311b6', class: "duet-sidebar" }, h("div", { key: 'f0bbcbeb756bf18ba1b678c405c3890fb00ad857', 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: 'b8b30e8b29bb87ea6a0c0891ca5f841d0921f72b', name: "sidebar" }))))))));
     }
     static get is() { return "duet-layout"; }
     static get encapsulation() { return "shadow"; }
@@ -155,7 +155,7 @@ export class DuetLayout {
                     "references": {
                         "DuetLayoutStickyDistance": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-layout/duet-layout.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-layout/duet-layout.tsx",
                             "id": "src/components/duet-layout/duet-layout.tsx::DuetLayoutStickyDistance"
                         }
                     }

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: '07cf184d2f321700e665e358f8a0cb988e798da8', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: '1d0baa8ee391bbfc51eb30936564d9e7d1a7de97', href: this.url, class: {
+            } }, h(Tag, { key: 'bb416240f5adc73c8eeacbd4ca0524619326a954', 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: 'c83e43f3d82e32198e0a5d45a0812b8358f6be07', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: '7a65328f555edf10f4da02166eebcfcf8b8f68f7' })));
     }
     static get is() { return "duet-list"; }
     static get encapsulation() { return "shadow"; }
@@ -205,7 +205,7 @@ export class DuetList {
                     "references": {
                         "DuetListMobileAlignment": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-list/duet-list.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-list/duet-list.tsx",
                             "id": "src/components/duet-list/duet-list.tsx::DuetListMobileAlignment"
                         }
                     }
@@ -257,7 +257,7 @@ export class DuetList {
                     "references": {
                         "DuetListVariation": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-list/duet-list.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-list/duet-list.tsx",
                             "id": "src/components/duet-list/duet-list.tsx::DuetListVariation"
                         }
                     }
@@ -283,7 +283,7 @@ export class DuetList {
                     "references": {
                         "DuetListLabelWidth": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-list/duet-list.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-list/duet-list.tsx",
                             "id": "src/components/duet-list/duet-list.tsx::DuetListLabelWidth"
                         }
                     }

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: '83029afa5ebc666926eb1572b8ad9a311bdbfcf1', 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: '884936458d12b95cd553cd4dc4d8a237cd8e5830' }, h("slot", { key: 'b17473caf7b410acf49f8c68f9ae53b3071397d7', name: "label" })), h("dd", { key: 'e5c6aa8b8d8998d500d27493896a288f71861df6' }, h("slot", { key: '7a6a3b223c394bb3376d7734791cfd439076d5f7', name: "value" }))));
     }
     static get is() { return "duet-list-item"; }
     static get encapsulation() { return "shadow"; }