@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.31

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

@@ -67,6 +67,142 @@ export class DuetInput {
             fi: "valittu",
             sv: "valt",
         };
+        /**
+         * State() variables
+         */
+        this.language = getLanguage();
+        /**
+         * Indicates whether the input is focused.
+         */
+        this.isFocused = false;
+        /**
+         * Indicates the id or a string of space seperated ids of a component(s) that describes the input.
+         */
+        this.accessibleDescribedBy = "";
+        /**
+         * Indicates value of any popup element associated with the input.
+         */
+        this.accessibleHasPopup = undefined;
+        /**
+         * Aria Details of the component
+         */
+        this.accessibleDetails = undefined;
+        /**
+         * String of id's that indicate alternative labels elements
+         */
+        this.accessibleLabelledBy = undefined;
+        /**
+         * Aria description the button
+         */
+        this.accessibleDescription = undefined;
+        /**
+         * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive"
+         * makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave
+         * the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message
+         * unread by screen readers.
+         */
+        this.accessibleLiveError = "polite";
+        /**
+         * Set the amount of time, in milliseconds, to wait to trigger the duetChange
+         * event after each keystroke.
+         */
+        this.debounce = 0;
+        /**
+         * If set, the input field will display a clear button that can be accessed with tabbing.
+         */
+        this.clear = false;
+        /**
+         * If form input field has a placeholder text, and user types anything (causing the placeholder text to disappear),
+         * settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)
+         */
+        this.echoPlaceholder = false;
+        /**
+         * Theme of the input.
+         */
+        this.theme = "";
+        /**
+         * Expands the input to fill 100% of the container width.
+         */
+        this.expand = false;
+        /**
+         * Makes the input component disabled. This prevents users from being able to
+         * interact with the input, and conveys its inactive state to assistive technologies.
+         */
+        this.disabled = false;
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Alignment of the input element
+         */
+        this.inputAlign = "left";
+        /**
+         * Padding of the input element. Use this only in special cases, never with regular forms.
+         * Setting this to other than the default will not work properly with button variation or
+         * together with icons.
+         */
+        this.inputPadding = "medium";
+        /**
+         * Set whether the input is required or not. Please note that this is necessary for
+         * accessible inputs when the user is required to fill them. When using this property
+         * you need to also set “novalidate” attribute to your form element to prevent
+         * browser from displaying its own validation errors.
+         */
+        this.required = false;
+        /**
+         * Type of the input.
+         */
+        this.type = "text";
+        /**
+         * Variation of button. Use "button" to render a button element next to the input, "button-left" to render a button on
+         * the left edge of the input, and "revealable" to render a button that reveals the password.
+         */
+        this.variation = "default";
+        /**
+         * Render a container into which Duet Chip components can be added with the method "addChip".
+         */
+        this.chips = false;
+        /**
+         * Label for the input.
+         */
+        this.label = "Label";
+        /**
+         * Display the input in error state along with an error message.
+         */
+        this.error = "";
+        /**
+         * Visually hide the label, but still show it to screen readers.
+         */
+        this.labelHidden = false;
+        /**
+         * Enable numeric keyboard for the input.
+         */
+        this.numericKeyboard = false;
+        /**
+         * @internal
+         * Used internally in Duet to adjust whether this component acts as e.g. number input.
+         */
+        this.component = "input";
+        /**
+         * Enable or disable automatic completion by the browser
+         */
+        this.autoComplete = "on";
+        /**
+         * A regular expression that matches any characters which should be *disallowed*.
+         * This differs from `pattern`, as it actively prevents users entering any characters which match the regular expression.
+         * e.g. the following will disallow any non-numeric characters `[^0-9]`
+         */
+        this.disallowPattern = null;
+        /**
+         * Tooltip to display next to the label of the input.
+         */
+        this.tooltip = "";
+        /**
+         * With direction setting you can force the tooltip to always open towards left
+         * or right instead of automatically determining the direction.
+         */
+        this.tooltipDirection = "auto";
         /**
          * Component event handling.
          */
@@ -181,54 +317,6 @@ export class DuetInput {
             }
             return this.type;
         };
-        this.language = getLanguage();
-        this.isPasswordRevealed = undefined;
-        this.isFocused = false;
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleAutocomplete = undefined;
-        this.accessibleControls = undefined;
-        this.accessibleOwns = undefined;
-        this.accessibleExpanded = undefined;
-        this.accessibleDescribedBy = "";
-        this.accessibleHasPopup = undefined;
-        this.accessibleDetails = undefined;
-        this.accessibleLabelledBy = undefined;
-        this.accessibleDescription = undefined;
-        this.accessibleLiveError = "polite";
-        this.debounce = 0;
-        this.clear = false;
-        this.caption = undefined;
-        this.echoPlaceholder = false;
-        this.theme = "";
-        this.expand = false;
-        this.disabled = false;
-        this.identifier = undefined;
-        this.margin = "auto";
-        this.inputAlign = "left";
-        this.inputPadding = "medium";
-        this.required = false;
-        this.type = "text";
-        this.variation = "default";
-        this.chips = false;
-        this.label = "Label";
-        this.labelColor = undefined;
-        this.labelWeight = undefined;
-        this.error = "";
-        this.labelHidden = false;
-        this.numericKeyboard = false;
-        this.name = undefined;
-        this.pattern = undefined;
-        this.maxlength = undefined;
-        this.minlength = undefined;
-        this.placeholder = undefined;
-        this.component = "input";
-        this.role = undefined;
-        this.icon = undefined;
-        this.autoComplete = "on";
-        this.disallowPattern = null;
-        this.value = undefined;
-        this.tooltip = "";
-        this.tooltipDirection = "auto";
     }
     disallowedPatternChange() {
         this.disallowPatternRegex = this.disallowPattern ? new RegExp(this.disallowPattern, "gu") : null;
@@ -254,6 +342,12 @@ export class DuetInput {
             this.timeoutId = setTimeout(emitEvent, this.debounce);
         }
     }
+    /**
+     * This is a proxy for the enclosed native inputs validity
+     */
+    get validity() {
+        return this.nativeInput.validity;
+    }
     /**
      * Component lifecycle events.
      */
@@ -370,32 +464,32 @@ export class DuetInput {
         }
     }
     /**
-     * @internal
-     * Add a chip to the input
+     * Add a chip to the input. Property "chips" must be true.
      */
     async addChip(chip) {
+        if (!this.chips) {
+            console.error("The method addChips requires the property chips to be true");
+            return;
+        }
         const container = this.element.shadowRoot.querySelector(".duet-input-relative");
         const input = container.querySelector("input:not(duet-chip input)");
         chip.id = createID("DuetInputChip");
         container.insertBefore(chip, input);
     }
     /**
-     * @internal
-     * Does the input have a chip with the given value and text
+     * Does the input have a chip with the given value and text.
      */
     async hasChip({ value, text }) {
         return this.getAllChips().some(chip => chip.value === value && chip.textContent === text);
     }
     /**
-     * @internal
-     * Get all chips from the input
+     * Get all chips from the input.
      */
     async getChips() {
         return this.getAllChips();
     }
     /**
-     * @internal
-     * Remove all chips from the input
+     * Remove all chips from the input.
      */
     async clearChips() {
         this.getAllChips().forEach(chip => chip.remove());
@@ -433,7 +527,7 @@ export class DuetInput {
             this.type !== "password" &&
             this.type !== "time" &&
             this.variation !== "button";
-        return (h(Host, { key: '27157f0e0ef781231dc53f62242c93dd77416fe3', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: '0950770844044af41ffeb7f505312cf68dbc2fa6', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: '0487bdedb2b60c45282063b1d0c4effeb6b79829', class: {
+        return (h(Host, { key: '114adc16746f53eff8aaf5e8d40f7705dc7e6f21', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: 'dd579486970d79ed302f16de907aaaec01d24a08', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: 'd687b1b683ffab3045c2668cd691123682549163', class: {
                 "duet-input-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 [`duet-input-variation-${this.variation}`]: true,
@@ -447,7 +541,7 @@ export class DuetInput {
                 "has-clear": this.clear,
                 "has-focus": this.isFocused,
                 disabled: this.disabled,
-            } }, h("div", { key: '40e554a5592ea303807714f476945a51d4cd0302', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: '82145a5b72cfa13cce38d0e8af3e8d0f8aa7fab7', 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: '74e0e7af69d8365d2066b542eba340291b76a9ec', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '5ccfc047cab7357c2e6e55808ccf9f111be22276', name: "tooltip" })), this.caption && (h("duet-caption", { key: '160a25f13bd945f574883cc89b5b829082a18008', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'cab2e63b8540c1fdf2e91547b340e2bc6e9c4031', class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: 'f57924871c11446e290fbaace72833a2de1dbe44', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: '5f06062a838de900d4375ff88cb41d81e9b10cb1', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), h("input", Object.assign({ key: 'b609360af202b5553aad22388d27d3373044a9d6', ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
+            } }, h("div", { key: 'fa683202d05f4eab1f4ce8a24bda5a145c862f4d', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: '54065b39f6bab8d3082096f2fb9151e2d92d9c04', 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: '1ab4bede74df49fcc2a11eb4d259ee49a25eb6f6', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '14ab07e67e7cdbeac4e96128177b336daed9500f', name: "tooltip" })), this.caption && (h("duet-caption", { key: 'fa7deb88045a38d9b31bc395d87e061c599edd2f', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'efc1fcb507a40731adf2e3e698951a450c58898d', class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: '1224f040086ac6a27de0080a01e61c282b6082c3', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: '61f65a6638d3be429701fc1485216b46132b1b99', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), this.variation === "button-left" && h("slot", { key: '26dadaa62adc545911f4c6e54621dd72318e7d36', name: "button-left" }), h("input", Object.assign({ key: '7d254243306b9cdbdbd86be50068c307b34bc316', 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",
@@ -455,16 +549,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: '5a464779c56b22fa5e47864b08645a6000b9e367', class: "duet-input-icon" }, h("duet-icon", { key: '07c479f447dbc3e7c0c49fdf2aa96635afb428e3', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: '7fa36d6ad59a8b190d640412faf6d57f50b60c7f', class: {
+            }, 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: '634cf27751d584258d0afba60e28e3ffc77077b7', class: "duet-input-icon" }, h("duet-icon", { key: '0ac55c1115030c99f3e5339749e881184920f704', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: 'f59573bd40a8e5fb4d1c82b1619b9be8ab75ec45', 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",
-            } }, h("button", { key: 'dfd9300e5066f5954a1d9c2064442d6bda1c55c4', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: '555bcd3e91c25634dcff7e6fe5943f03911aa9ad', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: '2b55687e10eccff71ee6a9352374bbe6580a31fb', class: "duet-input-icon" }, h("duet-icon", { key: 'e2c67768dfdaac05944a056a7ada779c597dd296', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: '2f973344b0c97c66d9b4ec434c40cbe2b63f7fde', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: 'a357be477c11b6b966bb15109feaaa7bd9a6381b', ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed
+                [`input-padding-${this.inputPadding}`]: true,
+            } }, h("button", { key: '591370f9af7be91b78a1553a5bba5f6a0fa69a57', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: '2c4124a3e9b05925f2e29b54eb8cd5ebdb315f18', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: '9803a77a5ae599994e1fd4b7dcc3a91c7efcabdb', class: "duet-input-icon" }, h("duet-icon", { key: 'b7618b017964582807de116dcc37c70b498aa97f', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: 'a2359de76233b102bee918f4c9349f7785c46169', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: '4d69f99e663c77e7574b9b5c1229648533464925', 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: '23d4b1ae14b4a0c21c4fbde49023db0d6413ee73' }, h("span", { key: '9891ed43653dfa4c27457299fb1f3bbc3c248943', "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: '4e683b6138b1e9c651f5b16b375cdd90db28b093' }, h("span", { key: 'e20e93bb8aae9f8dc9bee33b7cf9b9bc7b7ce615', "aria-live": "polite" }, this.isPasswordRevealed
             ? this.passwordShownAriaAnnouncement[this.language]
-            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: '55200ed3023d68f4f7fbd8acaa523e5b616221f9' })), h("span", { key: '5172ad8b5d0544b20e7fd5d2a9ba37c4a8eb6aa5', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '97f1f28f046074d7a450b1b56b1af793d41a734d', class: "duet-input-error" }, this.error)))));
+            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: '04f3a1b6af610d890d77b7aa42041145144299b0' })), h("span", { key: '89b2554748c89a52f5ecce6a32a39f001468db58', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '870e9c2ca62ca98d42c295f63ab813726140aeff', class: "duet-input-error" }, this.error)))));
     }
     static get is() { return "duet-input"; }
     static get encapsulation() { return "shadow"; }
@@ -482,6 +577,7 @@ export class DuetInput {
         return {
             "accessibleActiveDescendant": {
                 "type": "string",
+                "attribute": "accessible-active-descendant",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -496,11 +592,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-active-descendant",
                 "reflect": false
             },
             "accessibleAutocomplete": {
                 "type": "string",
+                "attribute": "accessible-autocomplete",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -515,11 +611,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-autocomplete",
                 "reflect": false
             },
             "accessibleControls": {
                 "type": "string",
+                "attribute": "accessible-controls",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -534,11 +630,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-controls",
                 "reflect": false
             },
             "accessibleOwns": {
                 "type": "string",
+                "attribute": "accessible-owns",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -553,11 +649,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-owns",
                 "reflect": false
             },
             "accessibleExpanded": {
                 "type": "string",
+                "attribute": "accessible-expanded",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -572,11 +668,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-expanded",
                 "reflect": false
             },
             "accessibleDescribedBy": {
                 "type": "string",
+                "attribute": "accessible-described-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -591,12 +687,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-described-by",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "accessibleHasPopup": {
                 "type": "string",
+                "attribute": "accessible-has-popup",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -611,12 +707,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-has-popup",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleDetails": {
                 "type": "string",
+                "attribute": "accessible-details",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -631,12 +727,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-details",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleLabelledBy": {
                 "type": "string",
+                "attribute": "accessible-labelled-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -651,12 +747,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-labelled-by",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleDescription": {
                 "type": "string",
+                "attribute": "accessible-description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -671,12 +767,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-description",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleLiveError": {
                 "type": "string",
+                "attribute": "accessible-live-error",
                 "mutable": false,
                 "complexType": {
                     "original": "\"off\" | \"polite\" | \"assertive\"",
@@ -691,12 +787,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-live-error",
                 "reflect": false,
                 "defaultValue": "\"polite\""
             },
             "debounce": {
                 "type": "number",
+                "attribute": "debounce",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -711,12 +807,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "debounce",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "clear": {
                 "type": "boolean",
+                "attribute": "clear",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -731,12 +827,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "clear",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "caption": {
                 "type": "string",
+                "attribute": "caption",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -751,11 +847,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caption",
                 "reflect": false
             },
             "echoPlaceholder": {
                 "type": "boolean",
+                "attribute": "echo-placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -770,12 +866,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "echo-placeholder",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -796,12 +892,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "expand": {
                 "type": "boolean",
+                "attribute": "expand",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -816,12 +912,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expand",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -836,12 +932,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -856,11 +952,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -881,12 +977,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "inputAlign": {
                 "type": "string",
+                "attribute": "input-align",
                 "mutable": false,
                 "complexType": {
                     "original": "\"left\" | \"right\"",
@@ -901,12 +997,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input-align",
                 "reflect": false,
                 "defaultValue": "\"left\""
             },
             "inputPadding": {
                 "type": "string",
+                "attribute": "input-padding",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetInputPadding",
@@ -927,12 +1023,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input-padding",
                 "reflect": false,
                 "defaultValue": "\"medium\""
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -947,12 +1043,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetInputType",
@@ -973,16 +1069,16 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": false,
                 "defaultValue": "\"text\""
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetVariationType",
-                    "resolved": "\"button\" | \"default\" | \"revealable\"",
+                    "resolved": "\"button\" | \"button-left\" | \"default\" | \"revealable\"",
                     "references": {
                         "DuetVariationType": {
                             "location": "local",
@@ -995,16 +1091,16 @@ export class DuetInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Variation of button. Use \"button\" to render a button element next to the input. Use \"revealable\" to render a button that reveals the password."
+                    "text": "Variation of button. Use \"button\" to render a button element next to the input, \"button-left\" to render a button on\nthe left edge of the input, and \"revealable\" to render a button that reveals the password."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "chips": {
                 "type": "boolean",
+                "attribute": "chips",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1014,20 +1110,17 @@ export class DuetInput {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": "Render a container for chips"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "Render a container into which Duet Chip components can be added with the method \"addChip\"."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "chips",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -1042,12 +1135,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"Label\""
             },
             "labelColor": {
                 "type": "string",
+                "attribute": "label-color",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -1062,11 +1155,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-color",
                 "reflect": false
             },
             "labelWeight": {
                 "type": "string",
+                "attribute": "label-weight",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTextFontWeight",
@@ -1087,11 +1180,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-weight",
                 "reflect": false
             },
             "error": {
                 "type": "string",
+                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1106,12 +1199,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "\"\""
             },
             "labelHidden": {
                 "type": "boolean",
+                "attribute": "label-hidden",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1126,12 +1219,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-hidden",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "numericKeyboard": {
                 "type": "boolean",
+                "attribute": "numeric-keyboard",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1146,12 +1239,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "numeric-keyboard",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1166,11 +1259,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "pattern": {
                 "type": "string",
+                "attribute": "pattern",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1185,11 +1278,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "pattern",
                 "reflect": false
             },
             "maxlength": {
                 "type": "number",
+                "attribute": "maxlength",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -1200,15 +1293,15 @@ export class DuetInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Use maxlength to specify the maximum length of the value that can be entered.\nPlease note that this uses native HTML5 pattern validation."
+                    "text": "Use maxlength to specify the maximum length of the value that can be entered."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "maxlength",
                 "reflect": false
             },
             "minlength": {
                 "type": "number",
+                "attribute": "minlength",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -1219,15 +1312,15 @@ export class DuetInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Use minlength to specify the minimum length of the value that can be entered.\nPlease note that this uses native HTML5 pattern validation."
+                    "text": "Use minlength to specify the minimum length of the value that can be entered."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "minlength",
                 "reflect": false
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1242,15 +1335,15 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false
             },
             "component": {
                 "type": "string",
+                "attribute": "component",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetInputComponentType",
-                    "resolved": "\"date\" | \"input\" | \"number\"",
+                    "resolved": "\"date\" | \"input\" | \"number\" | \"phone\"",
                     "references": {
                         "DuetInputComponentType": {
                             "location": "local",
@@ -1270,12 +1363,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component",
                 "reflect": false,
                 "defaultValue": "\"input\""
             },
             "role": {
                 "type": "string",
+                "attribute": "role",
                 "mutable": false,
                 "complexType": {
                     "original": "string | null",
@@ -1290,11 +1383,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "role",
                 "reflect": false
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -1315,11 +1408,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false
             },
             "autoComplete": {
                 "type": "string",
+                "attribute": "auto-complete",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1334,12 +1427,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "auto-complete",
                 "reflect": false,
                 "defaultValue": "\"on\""
             },
             "disallowPattern": {
                 "type": "string",
+                "attribute": "disallow-pattern",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1354,12 +1447,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disallow-pattern",
                 "reflect": false,
                 "defaultValue": "null"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -1374,11 +1467,34 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false
             },
+            "validity": {
+                "type": "unknown",
+                "attribute": "validity",
+                "mutable": false,
+                "complexType": {
+                    "original": "ValidityState",
+                    "resolved": "ValidityState",
+                    "references": {
+                        "ValidityState": {
+                            "location": "global",
+                            "id": "global::ValidityState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This is a proxy for the enclosed native inputs validity"
+                },
+                "getter": true,
+                "setter": false
+            },
             "tooltip": {
                 "type": "string",
+                "attribute": "tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1393,12 +1509,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "tooltipDirection": {
                 "type": "string",
+                "attribute": "tooltip-direction",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetTooltipDirection",
@@ -1419,7 +1535,6 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip-direction",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             }
@@ -1622,11 +1737,8 @@ export class DuetInput {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "internal",
-                            "text": "Add a chip to the input"
-                        }]
+                    "text": "Add a chip to the input. Property \"chips\" must be true.",
+                    "tags": []
                 }
             },
             "hasChip": {
@@ -1646,11 +1758,8 @@ export class DuetInput {
                     "return": "Promise<boolean>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "internal",
-                            "text": "Does the input have a chip with the given value and text"
-                        }]
+                    "text": "Does the input have a chip with the given value and text.",
+                    "tags": []
                 }
             },
             "getChips": {
@@ -1670,11 +1779,8 @@ export class DuetInput {
                     "return": "Promise<HTMLDuetChipElement[]>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "internal",
-                            "text": "Get all chips from the input"
-                        }]
+                    "text": "Get all chips from the input.",
+                    "tags": []
                 }
             },
             "clearChips": {
@@ -1690,11 +1796,8 @@ export class DuetInput {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "internal",
-                            "text": "Remove all chips from the input"
-                        }]
+                    "text": "Remove all chips from the input.",
+                    "tags": []
                 }
             }
         };