@duetds/components 10.0.0-alpha.9 → 10.0.0

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

@@ -6,16 +6,15 @@ import { inheritGlobalTheme } from "../../common";
 import { DuetInternalLabel } from "../../common/label";
 import { createID } from "../../utils/create-id";
 import { cleanValue } from "../../utils/input-utils";
-import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLocaleString, } from "../../utils/language-utils";
+import { debounce } from "../../utils/js-utils";
+import { getLanguage, formatNumber } from "../../utils/language-utils";
 import { checkNamedSlotElement, proxyInputToSlot } from "../../utils/slot-utils";
-const CharacterCount = ({ value, maxlength, label, theme }) => {
+const CharacterCount = ({ value, maxlength, theme }) => {
     if (maxlength == null) {
         return;
     }
     const length = value.length;
-    const remainder = Math.max(maxlength - length, 0); // ensure we never have negative numbers
-    const isApproachingLimit = remainder / maxlength <= 0.1; // <= 10% chars remaining
-    return (h("div", { class: "duet-character-count" }, h("duet-caption", { margin: "none", theme: theme, size: "small" }, h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true", class: "duet-textarea-counter-remaining" }, isApproachingLimit && `${remainder} ${label}`), h("span", { "aria-hidden": "true" }, length, "/", maxlength))));
+    return (h("div", { class: "duet-character-count" }, h("duet-caption", { margin: "none", theme: theme, size: "small" }, h("span", { "aria-hidden": "true" }, length, "/", maxlength))));
 };
 /**
  * @slot tooltip - Use to place a tooltip alongside the label.
@@ -32,12 +31,103 @@ export class DuetTextarea {
         this.labelId = createID("DuetLabel");
         this.errorId = createID("DuetError");
         this.characterCountId = createID("DuetCharacterCount");
+        this.visuallyHiddenCounterDebounceMS = 1000;
         this.disallowPatternRegex = null;
-        this.counterLabelDefaults = {
-            fi: "merkkiä jäljellä",
-            en: "characters remaining",
-            sv: "tecken kvar",
+        this.charactersRemainingLabel = {
+            // The comma in Finnish is to prevent use of partitive case for remaining
+            fi: "{remaining}, merkkiä jäljellä {max}{postfix}.",
+            en: "{remaining} characters remaining out of {max}.",
+            sv: "{remaining} tecken kvar av {max}.",
         };
+        this.language = getLanguage();
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * 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";
+        /**
+         * Theme of the textarea.
+         */
+        this.theme = "";
+        /**
+         * Expands the textarea to fill 100% of the container width.
+         */
+        this.expand = false;
+        /**
+         * Makes the textarea component disabled. This prevents users from being able
+         * to interact with the textarea, and conveys its inactive state to assistive
+         * technologies.
+         */
+        this.disabled = false;
+        /**
+         * Set whether the textarea is required or not. Please note that this is required 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;
+        /**
+         * Label for the textarea.
+         */
+        this.label = "label";
+        /**
+         * Visually hide the label, but still show it to screen readers.
+         */
+        this.labelHidden = false;
+        /**
+         * If form input field has a placeholder text, and user types anything (causing the text to dissapear),
+         * 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;
+        /**
+         * Display the textarea in error state along with an error message.
+         */
+        this.error = "";
+        /**
+         * 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";
+        /**
+         * Value of the textarea.
+         */
+        this.value = "";
+        /**
+         * 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;
+        /**
+         * Display character counter. Must be used in conjunction with  **maxlength** property.
+         */
+        this.counter = false;
+        /**
+         * @deprecated, the visually hidden counter label is no longer changeable
+         */
+        this.counterLabel = "";
         /**
          * Component event handling.
          */
@@ -69,15 +159,23 @@ export class DuetTextarea {
             });
         };
         this.handleFocus = (ev) => {
-            if (this.counter) {
-                this.hiddenCounterLabel.textContent = `${Math.max(this.maxlength - this.value.length, 0)}/${this.maxlength} ${this.counterLabel}`;
-            }
             this.duetFocus.emit({
                 originalEvent: ev,
                 value: this.value,
                 component: "duet-textarea",
             });
         };
+        /**
+         * When the character limit has been reached and key is pressed, switch the
+         * visually hidden label temprorily to empty so it is re-read.
+         */
+        this.handleKeyDown = () => {
+            var _a;
+            if (((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === this.maxlength) {
+                this.visuallyHiddenCounterText = "";
+                setTimeout(() => this.updateVisuallyHiddenCounterText(), 10);
+            }
+        };
         this.getDescribedBy = () => {
             const describedBy = [];
             if (this.isCaptionVisible && this.topCaptionId) {
@@ -89,44 +187,22 @@ export class DuetTextarea {
             if (this.error) {
                 describedBy.push(this.errorId);
             }
-            if (this.counter) {
+            if (this.counter && this.maxlength) {
                 describedBy.push(this.characterCountId);
             }
             return describedBy.length > 0 ? describedBy.join(" ") : null;
         };
-        this.margin = "auto";
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleAutocomplete = undefined;
-        this.accessibleControls = undefined;
-        this.accessibleDetails = undefined;
-        this.accessibleLabelledBy = undefined;
-        this.accessibleDescription = undefined;
-        this.accessibleLiveError = "polite";
-        this.accessibleOwns = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.theme = "";
-        this.expand = false;
-        this.disabled = false;
-        this.identifier = undefined;
-        this.required = false;
-        this.label = "label";
-        this.labelColor = undefined;
-        this.labelWeight = undefined;
-        this.labelHidden = false;
-        this.name = undefined;
-        this.placeholder = undefined;
-        this.caption = undefined;
-        this.echoPlaceholder = false;
-        this.maxlength = undefined;
-        this.minlength = undefined;
-        this.error = "";
-        this.role = undefined;
-        this.tooltip = "";
-        this.tooltipDirection = "auto";
-        this.value = "";
-        this.disallowPattern = null;
-        this.counter = false;
-        this.counterLabel = getLocaleString(this.counterLabelDefaults);
+    }
+    /**
+     * This is a proxy for the enclosed native textarea's validity
+     */
+    get validity() {
+        return this.nativeInput.validity;
+    }
+    valueChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            debounce(() => this.updateVisuallyHiddenCounterText(), this.visuallyHiddenCounterDebounceMS)();
+        }
     }
     disallowedPatternChange() {
         this.disallowPatternRegex = this.disallowPattern ? new RegExp(this.disallowPattern, "gu") : null;
@@ -138,19 +214,22 @@ export class DuetTextarea {
         inheritGlobalTheme(this);
         this.disallowedPatternChange();
         this.isCaptionVisible = !!this.caption;
+        this.updateVisuallyHiddenCounterText();
         checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
         if (this.counter && this.maxlength == null) {
             console.warn("[DUET WARNING]: counter will only take effect if maxlength is set");
         }
     }
-    connectedCallback() {
-        connectLanguageChangeObserver(this, {
-            prop: "counterLabel",
-            defaults: "counterLabelDefaults",
-        });
-    }
-    disconnectedCallback() {
-        disconnectLanguageChangeObserver(this);
+    updateVisuallyHiddenCounterText() {
+        var _a;
+        const remaining = formatNumber(Math.max(this.maxlength - (((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0), 0));
+        // postfix is used only in Finnish
+        // with "a" for full hundreds or numbers ending with 2, 3, 6, or 8; with "ä" otherwise
+        const postfix = this.maxlength % 100 === 0 || [2, 3, 6, 8].includes(this.maxlength % 10) ? ":sta" : ":stä";
+        this.visuallyHiddenCounterText = this.charactersRemainingLabel[this.language]
+            .replace("{remaining}", remaining)
+            .replace("{max}", formatNumber(this.maxlength))
+            .replace("{postfix}", postfix);
     }
     componentDidRender() {
         proxyInputToSlot(this.element, this.proxyId, this.name, this.value, this.required);
@@ -168,19 +247,17 @@ export class DuetTextarea {
      */
     render() {
         const identifier = this.identifier || this.textareaId;
-        return (h(Host, { key: '25556769dbf4727f9d03bb5228fb1bf5c68d7538', class: {
+        return (h(Host, { key: '6b4a9a29634b3b4eebba44aa1329c044ad4627e0', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-has-counter": this.counter && !this.error,
                 "duet-expand": this.expand,
-            } }, h("div", { key: '6eab14bf213903b968c01b6cd4393a20ab0c69b4', class: {
+            } }, h("div", { key: 'fc6fff054e8c331eaa64eb81ea38fec26ccf2623', class: {
                 "duet-textarea-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-label-hidden": this.labelHidden,
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            } }, h(DuetInternalLabel, { key: '78bc0d0c4482d4fc8b612790b2e698dd680982ff', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: 'a00e86034ac4577ad2e4eda40f472287c0b0c44b', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: 'eed07c3a64048d9665ff69a8eb692869c127d36f', name: "tooltip" }), this.caption && (h("duet-caption", { key: '18120445b792f306348fa86eb7d55137e4494430', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: '31e9534d6f280d3cb598046d63e4a42a0389ea81', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: '41850e7a6582f51589e68d93a8548d61048d6ff9', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: 'e1fe2634a7667802d287159982873db894ef76c9', onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { key: 'ebbc277489ee738b58006041ea840c228c744453', alignment: "stretch" }, h("duet-grid-item", { key: '29c30dd91c5ccd5b917448c817692fd2f6dcd9a9', margin: "none", fill: true }, h("div", { key: '48a87c0a148de98bb97b7a4a82c148232279ec8f', class: "duet-textarea-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'a35dd6fd14ab2ba3a31e20010dd0eaf9a54df673' }, this.error))), h("duet-grid-item", { key: '71169ae9f709699fc5f416eb7c1e6f7fd58bbe43', margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { key: 'f0301f5b479f78ca89ada4cd46ab54f2ab637773', theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))), this.counter && (h("duet-visually-hidden", { key: '00edef3db000d963cc48b85b1c1d7917acb6d85b', class: "duet-visually-hidden", id: this.characterCountId, ref: el => {
-                this.hiddenCounterLabel = el;
-            } })))));
+            } }, h(DuetInternalLabel, { key: '72a397fea607b1bf78eb044d2edfe908b531c196', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: 'df27e380533776bbd55e322ee553a4e7307a9c25', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '0ad23242a566add6660b8d0d05f0945f2881c736', name: "tooltip" }), this.caption && (h("duet-caption", { key: '2140852f453a515fdc400664083170df2c5d25b8', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: '3d8086ad2a9120553f7d9348a12f122513743f9e', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: '41d5d3fbe9b850ae576456b65c38e70d7b54d1c4', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: '958b5b54572eeeb9a14cccc84768c94ac8934751', onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, rows: this.rows, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { key: '2eeb3e5cc00bb5323ace41bc47c8704065ed9cf8', alignment: "stretch" }, h("duet-grid-item", { key: 'df795c73d5e1d02b95780b00a3109a08af5265d1', margin: "none", fill: true }, h("div", { key: '0ca123aee248bdefecb272d01744496e14fca789', class: "duet-textarea-help duet-textarea-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'fab26ce8771f27cc8bd7df1b32f027f7e1a77f5c' }, this.error))), h("duet-grid-item", { key: 'af06a4534964dea7090defa29dcae06c463f987a', margin: "none", class: "duet-character-count-caption" }, this.counter && h(CharacterCount, { key: '9feddf09bed0a8dba0e3ec415e02a895e6cf20b7', theme: this.theme, value: this.value, maxlength: this.maxlength }))), this.counter && this.maxlength && (h("duet-visually-hidden", { key: '923f821ec7eea31d6538bec8e9e80d5bed1a8e85', id: this.characterCountId, class: "visually-hidden-counter" }, this.visuallyHiddenCounterText)))));
     }
     static get is() { return "duet-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -198,6 +275,7 @@ export class DuetTextarea {
         return {
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -218,12 +296,12 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "accessibleActiveDescendant": {
                 "type": "string",
+                "attribute": "accessible-active-descendant",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -238,11 +316,11 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-active-descendant",
                 "reflect": false
             },
             "accessibleAutocomplete": {
                 "type": "string",
+                "attribute": "accessible-autocomplete",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -257,11 +335,11 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-autocomplete",
                 "reflect": false
             },
             "accessibleControls": {
                 "type": "string",
+                "attribute": "accessible-controls",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -276,11 +354,11 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-controls",
                 "reflect": false
             },
             "accessibleDetails": {
                 "type": "string",
+                "attribute": "accessible-details",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -295,12 +373,12 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-details",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleLabelledBy": {
                 "type": "string",
+                "attribute": "accessible-labelled-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -315,12 +393,12 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-labelled-by",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleDescription": {
                 "type": "string",
+                "attribute": "accessible-description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -335,12 +413,12 @@ export class DuetTextarea {
                 },
                 "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\"",
@@ -355,12 +433,12 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-live-error",
                 "reflect": false,
                 "defaultValue": "\"polite\""
             },
             "accessibleOwns": {
                 "type": "string",
+                "attribute": "accessible-owns",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -375,11 +453,11 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-owns",
                 "reflect": false
             },
             "accessibleDescribedBy": {
                 "type": "string",
+                "attribute": "accessible-described-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -394,11 +472,11 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-described-by",
                 "reflect": false
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -419,12 +497,12 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "expand": {
                 "type": "boolean",
+                "attribute": "expand",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -439,12 +517,12 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expand",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -459,12 +537,12 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -479,11 +557,11 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -498,12 +576,12 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -518,12 +596,12 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"label\""
             },
             "labelColor": {
                 "type": "string",
+                "attribute": "label-color",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -538,11 +616,11 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-color",
                 "reflect": false
             },
             "labelWeight": {
                 "type": "string",
+                "attribute": "label-weight",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTextFontWeight",
@@ -563,11 +641,11 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-weight",
                 "reflect": false
             },
             "labelHidden": {
                 "type": "boolean",
+                "attribute": "label-hidden",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -582,12 +660,12 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-hidden",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -602,11 +680,11 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -621,11 +699,11 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false
             },
             "caption": {
                 "type": "string",
+                "attribute": "caption",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -640,11 +718,11 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caption",
                 "reflect": false
             },
             "echoPlaceholder": {
                 "type": "boolean",
+                "attribute": "echo-placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -659,12 +737,12 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "echo-placeholder",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "maxlength": {
+            "rows": {
                 "type": "number",
+                "attribute": "rows",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -675,15 +753,34 @@ export class DuetTextarea {
                 "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": "Rows attribute for the contained native textarea element. If set, overrides the default style's minheight."
                 },
                 "getter": false,
                 "setter": false,
+                "reflect": false
+            },
+            "maxlength": {
+                "type": "number",
                 "attribute": "maxlength",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use maxlength to specify the maximum length of the value that can be entered."
+                },
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "minlength": {
                 "type": "number",
+                "attribute": "minlength",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -694,15 +791,15 @@ export class DuetTextarea {
                 "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
             },
             "error": {
                 "type": "string",
+                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -717,12 +814,35 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "\"\""
             },
+            "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 textarea's validity"
+                },
+                "getter": true,
+                "setter": false
+            },
             "role": {
                 "type": "string",
+                "attribute": "role",
                 "mutable": false,
                 "complexType": {
                     "original": "string | null",
@@ -737,11 +857,11 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "role",
                 "reflect": false
             },
             "tooltip": {
                 "type": "string",
+                "attribute": "tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -756,12 +876,12 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "tooltipDirection": {
                 "type": "string",
+                "attribute": "tooltip-direction",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetTooltipDirection",
@@ -782,12 +902,12 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip-direction",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -802,12 +922,12 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "disallowPattern": {
                 "type": "string",
+                "attribute": "disallow-pattern",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -822,12 +942,12 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disallow-pattern",
                 "reflect": false,
                 "defaultValue": "null"
             },
             "counter": {
                 "type": "boolean",
+                "attribute": "counter",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -842,12 +962,12 @@ export class DuetTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "counter",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "counterLabel": {
                 "type": "string",
+                "attribute": "counter-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -858,19 +978,24 @@ export class DuetTextarea {
                 "optional": false,
                 "docs": {
                     "tags": [{
-                            "name": "default",
-                            "text": "fi: \"merkki\u00E4 j\u00E4ljell\u00E4\", en: \"characters remaining\", sv: \"tecken kvar\""
+                            "name": "deprecated",
+                            "text": ", the visually hidden counter label is no longer changeable"
                         }],
-                    "text": "Accessible label for character counter."
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "counter-label",
                 "reflect": false,
-                "defaultValue": "getLocaleString(this.counterLabelDefaults)"
+                "defaultValue": "\"\""
             }
         };
     }
+    static get states() {
+        return {
+            "language": {},
+            "visuallyHiddenCounterText": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "duetInput",
@@ -990,6 +1115,9 @@ export class DuetTextarea {
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{
+                "propName": "value",
+                "methodName": "valueChange"
+            }, {
                 "propName": "disallowPattern",
                 "methodName": "disallowedPatternChange"
             }];