npm - @duetds/components - Versions diffs - 6.2.4 → 6.2.5 - Mend

@duetds/components 6.2.4 → 6.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (566) hide show

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { Component, Element, Event, h, Host, Method, Prop, Watch, } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { cleanValue } from "../../utils/input-utils";
@@ -12,13 +12,7 @@ const CharacterCount = ({ value, maxlength, label, theme }) => {
   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("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true", class: "duet-textarea-counter-remaining" }, isApproachingLimit && `${remainder} ${label}`), h("span", { "aria-hidden": "true" }, length, "/", maxlength))));
 };
 export class DuetTextarea {
   constructor() {
@@ -31,84 +25,6 @@ export class DuetTextarea {
     this.labelId = createID("DuetLabel");
     this.errorId = createID("DuetError");
     this.disallowPatternRegex = null;
-    /**
-     * 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;
-    /**
-     * 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** and **counterLabel** properties.
-     */
-    this.counter = false;
     /**
      * Component event handling.
      */
@@ -146,6 +62,36 @@ export class DuetTextarea {
         component: "duet-textarea",
       });
     };
+    this.margin = "auto";
+    this.accessibleActiveDescendant = undefined;
+    this.accessibleAutocomplete = undefined;
+    this.accessibleControls = undefined;
+    this.accessibleDetails = undefined;
+    this.accessibleLabelledBy = undefined;
+    this.accessibleDescription = undefined;
+    this.accessibleOwns = undefined;
+    this.accessibleDescribedBy = undefined;
+    this.theme = "";
+    this.expand = false;
+    this.disabled = false;
+    this.identifier = undefined;
+    this.required = false;
+    this.label = "label";
+    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 = undefined;
   }
   disallowedPatternChange() {
     this.disallowPatternRegex = this.disallowPattern ? new RegExp(this.disallowPattern, "g") : null;
@@ -184,683 +130,684 @@ export class DuetTextarea {
         "duet-m-0": this.margin === "none",
         "duet-has-counter": this.counter && !this.error,
         "duet-expand": this.expand,
-      } },
-      h("div", { 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("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label),
-        this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)),
-        this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)),
-        h("div", { class: "duet-textarea-wrapper" },
-          this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)),
-          h("textarea", { 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.errorId} ${this.labelId} ${this.accessibleLabelledBy}`
-              : `${this.errorId} ${this.labelId} `, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-errormessage": this.error ? this.errorId : null, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": `${this.isCaptionVisible ? this.topCaptionId : ""} ${this.accessibleDescribedBy}`, "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", { alignment: "stretch" },
-          h("duet-grid-item", { margin: "none", fill: true },
-            h("div", { class: "duet-textarea-help", id: this.errorId, "aria-atomic": "true", "aria-live": "polite", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error))),
-          h("duet-grid-item", { margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))))));
+      } }, h("div", { 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("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { 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.errorId} ${this.labelId} ${this.accessibleLabelledBy}`
+        : `${this.errorId} ${this.labelId} `, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-errormessage": this.error ? this.errorId : null, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": `${this.isCaptionVisible ? this.topCaptionId : ""} ${this.accessibleDescribedBy}`, "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", { alignment: "stretch" }, h("duet-grid-item", { margin: "none", fill: true }, h("div", { class: "duet-textarea-help", id: this.errorId, "aria-atomic": "true", "aria-live": "polite", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error))), h("duet-grid-item", { margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))))));
   }
   static get is() { return "duet-textarea"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["duet-textarea.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["duet-textarea.css"]
-  }; }
-  static get properties() { return {
-    "margin": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetMargin",
-        "resolved": "\"auto\" | \"none\"",
-        "references": {
-          "DuetMargin": {
-            "location": "import",
-            "path": "../../common-types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-textarea.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-textarea.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "margin": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetMargin",
+          "resolved": "\"auto\" | \"none\"",
+          "references": {
+            "DuetMargin": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Controls the margin of the component."
-      },
-      "attribute": "margin",
-      "reflect": false,
-      "defaultValue": "\"auto\""
-    },
-    "accessibleActiveDescendant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates the id of a related component\u2019s visually focused element."
-      },
-      "attribute": "accessible-active-descendant",
-      "reflect": false
-    },
-    "accessibleAutocomplete": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates what kind of user input completion suggestions are provided."
-      },
-      "attribute": "accessible-autocomplete",
-      "reflect": false
-    },
-    "accessibleControls": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Use this prop to add an aria-controls attribute. Use the attribute to\nindicate the id of a component controlled by this component."
-      },
-      "attribute": "accessible-controls",
-      "reflect": false
-    },
-    "accessibleDetails": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Aria Details of the component"
-      },
-      "attribute": "accessible-details",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "accessibleLabelledBy": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "String of id's that indicate alternative labels elements"
-      },
-      "attribute": "accessible-labelled-by",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "accessibleDescription": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Aria description the button"
-      },
-      "attribute": "accessible-description",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "accessibleOwns": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates the id of a component owned by the textarea."
-      },
-      "attribute": "accessible-owns",
-      "reflect": false
-    },
-    "accessibleDescribedBy": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates the id of a component that describes the input."
-      },
-      "attribute": "accessible-described-by",
-      "reflect": false
-    },
-    "theme": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "DuetTheme",
-        "resolved": "\"\" | \"default\" | \"turva\"",
-        "references": {
-          "DuetTheme": {
-            "location": "import",
-            "path": "../../common-types"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls the margin of the component."
+        },
+        "attribute": "margin",
+        "reflect": false,
+        "defaultValue": "\"auto\""
+      },
+      "accessibleActiveDescendant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the id of a related component\u2019s visually focused element."
+        },
+        "attribute": "accessible-active-descendant",
+        "reflect": false
+      },
+      "accessibleAutocomplete": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates what kind of user input completion suggestions are provided."
+        },
+        "attribute": "accessible-autocomplete",
+        "reflect": false
+      },
+      "accessibleControls": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use this prop to add an aria-controls attribute. Use the attribute to\nindicate the id of a component controlled by this component."
+        },
+        "attribute": "accessible-controls",
+        "reflect": false
+      },
+      "accessibleDetails": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Aria Details of the component"
+        },
+        "attribute": "accessible-details",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "accessibleLabelledBy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "String of id's that indicate alternative labels elements"
+        },
+        "attribute": "accessible-labelled-by",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "accessibleDescription": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Aria description the button"
+        },
+        "attribute": "accessible-description",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "accessibleOwns": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the id of a component owned by the textarea."
+        },
+        "attribute": "accessible-owns",
+        "reflect": false
+      },
+      "accessibleDescribedBy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the id of a component that describes the input."
+        },
+        "attribute": "accessible-described-by",
+        "reflect": false
+      },
+      "theme": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "DuetTheme",
+          "resolved": "\"\" | \"default\" | \"turva\"",
+          "references": {
+            "DuetTheme": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Theme of the textarea."
-      },
-      "attribute": "theme",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "expand": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Expands the textarea to fill 100% of the container width."
-      },
-      "attribute": "expand",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Makes the textarea component disabled. This prevents users from being able\nto interact with the textarea, and conveys its inactive state to assistive\ntechnologies."
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "identifier": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Adds a unique identifier for the textarea."
-      },
-      "attribute": "identifier",
-      "reflect": false
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set whether the textarea is required or not. Please note that this is required for\naccessible inputs when the user is required to fill them. When using this property\nyou need to also set \u201Cnovalidate\u201D attribute to your form element to prevent\nbrowser from displaying its own validation errors."
-      },
-      "attribute": "required",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label for the textarea."
-      },
-      "attribute": "label",
-      "reflect": false,
-      "defaultValue": "\"label\""
-    },
-    "labelHidden": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Visually hide the label, but still show it to screen readers."
-      },
-      "attribute": "label-hidden",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Name of the textarea."
-      },
-      "attribute": "name",
-      "reflect": false
-    },
-    "placeholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Hint text to display."
-      },
-      "attribute": "placeholder",
-      "reflect": false
-    },
-    "caption": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Caption (underneath label) that can be set as a way of adding extra information"
-      },
-      "attribute": "caption",
-      "reflect": false
-    },
-    "echoPlaceholder": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If form input field has a placeholder text, and user types anything (causing the text to dissapear),\nsettings 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)"
-      },
-      "attribute": "echo-placeholder",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "maxlength": {
-      "type": "number",
-      "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.\nPlease note that this uses native HTML5 pattern validation."
-      },
-      "attribute": "maxlength",
-      "reflect": false
-    },
-    "minlength": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "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."
-      },
-      "attribute": "minlength",
-      "reflect": false
-    },
-    "error": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Display the textarea in error state along with an error message."
-      },
-      "attribute": "error",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "role": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines a specific role attribute for the input."
-      },
-      "attribute": "role",
-      "reflect": false
-    },
-    "tooltip": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Tooltip to display next to the label of the input."
-      },
-      "attribute": "tooltip",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "tooltipDirection": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetTooltipDirection",
-        "resolved": "\"auto\" | \"left\" | \"right\"",
-        "references": {
-          "DuetTooltipDirection": {
-            "location": "import",
-            "path": "../../common-types"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme of the textarea."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "expand": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Expands the textarea to fill 100% of the container width."
+        },
+        "attribute": "expand",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Makes the textarea component disabled. This prevents users from being able\nto interact with the textarea, and conveys its inactive state to assistive\ntechnologies."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "identifier": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds a unique identifier for the textarea."
+        },
+        "attribute": "identifier",
+        "reflect": false
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set whether the textarea is required or not. Please note that this is required for\naccessible inputs when the user is required to fill them. When using this property\nyou need to also set \u201Cnovalidate\u201D attribute to your form element to prevent\nbrowser from displaying its own validation errors."
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label for the textarea."
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"label\""
+      },
+      "labelHidden": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Visually hide the label, but still show it to screen readers."
+        },
+        "attribute": "label-hidden",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name of the textarea."
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hint text to display."
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
+      "caption": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Caption (underneath label) that can be set as a way of adding extra information"
+        },
+        "attribute": "caption",
+        "reflect": false
+      },
+      "echoPlaceholder": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If form input field has a placeholder text, and user types anything (causing the text to dissapear),\nsettings 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)"
+        },
+        "attribute": "echo-placeholder",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "maxlength": {
+        "type": "number",
+        "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.\nPlease note that this uses native HTML5 pattern validation."
+        },
+        "attribute": "maxlength",
+        "reflect": false
+      },
+      "minlength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "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."
+        },
+        "attribute": "minlength",
+        "reflect": false
+      },
+      "error": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Display the textarea in error state along with an error message."
+        },
+        "attribute": "error",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "role": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines a specific role attribute for the input."
+        },
+        "attribute": "role",
+        "reflect": false
+      },
+      "tooltip": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tooltip to display next to the label of the input."
+        },
+        "attribute": "tooltip",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "tooltipDirection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetTooltipDirection",
+          "resolved": "\"auto\" | \"left\" | \"right\"",
+          "references": {
+            "DuetTooltipDirection": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "With direction setting you can force the tooltip to always open towards left\nor right instead of automatically determining the direction."
-      },
-      "attribute": "tooltip-direction",
-      "reflect": false,
-      "defaultValue": "\"auto\""
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Value of the textarea."
-      },
-      "attribute": "value",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "disallowPattern": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "A regular expression that matches any characters which should be *disallowed*.\nThis differs from `pattern`, as it actively prevents users entering any characters which match the regular expression.\ne.g. the following will disallow any non-numeric characters `[^0-9]`"
-      },
-      "attribute": "disallow-pattern",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "counter": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Display character counter. Must be used in conjunction with\n**maxlength** and **counterLabel** properties."
-      },
-      "attribute": "counter",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "counterLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Accessible label for character counter. Must be used in conjunction with\n**counter** property."
-      },
-      "attribute": "counter-label",
-      "reflect": false
-    }
-  }; }
-  static get events() { return [{
-      "method": "duetInput",
-      "name": "duetInput",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when a keyboard input ocurred."
-      },
-      "complexType": {
-        "original": "DuetTextareaEvent",
-        "resolved": "{ originalEvent?: Event; component: \"duet-textarea\"; value: string; }",
-        "references": {
-          "DuetTextareaEvent": {
-            "location": "local"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "With direction setting you can force the tooltip to always open towards left\nor right instead of automatically determining the direction."
+        },
+        "attribute": "tooltip-direction",
+        "reflect": false,
+        "defaultValue": "\"auto\""
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value of the textarea."
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "disallowPattern": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A regular expression that matches any characters which should be *disallowed*.\nThis differs from `pattern`, as it actively prevents users entering any characters which match the regular expression.\ne.g. the following will disallow any non-numeric characters `[^0-9]`"
+        },
+        "attribute": "disallow-pattern",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "counter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Display character counter. Must be used in conjunction with\n**maxlength** and **counterLabel** properties."
+        },
+        "attribute": "counter",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "counterLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Accessible label for character counter. Must be used in conjunction with\n**counter** property."
+        },
+        "attribute": "counter-label",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "duetInput",
+        "name": "duetInput",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when a keyboard input ocurred."
+        },
+        "complexType": {
+          "original": "DuetTextareaEvent",
+          "resolved": "{ originalEvent?: Event; component: \"duet-textarea\"; value: string; }",
+          "references": {
+            "DuetTextareaEvent": {
+              "location": "local"
+            }
           }
         }
-      }
-    }, {
-      "method": "duetChange",
-      "name": "duetChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the value has changed."
-      },
-      "complexType": {
-        "original": "DuetTextareaEvent",
-        "resolved": "{ originalEvent?: Event; component: \"duet-textarea\"; value: string; }",
-        "references": {
-          "DuetTextareaEvent": {
-            "location": "local"
+      }, {
+        "method": "duetChange",
+        "name": "duetChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the value has changed."
+        },
+        "complexType": {
+          "original": "DuetTextareaEvent",
+          "resolved": "{ originalEvent?: Event; component: \"duet-textarea\"; value: string; }",
+          "references": {
+            "DuetTextareaEvent": {
+              "location": "local"
+            }
           }
         }
-      }
-    }, {
-      "method": "duetBlur",
-      "name": "duetBlur",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the input loses focus."
-      },
-      "complexType": {
-        "original": "DuetTextareaEvent",
-        "resolved": "{ originalEvent?: Event; component: \"duet-textarea\"; value: string; }",
-        "references": {
-          "DuetTextareaEvent": {
-            "location": "local"
+      }, {
+        "method": "duetBlur",
+        "name": "duetBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the input loses focus."
+        },
+        "complexType": {
+          "original": "DuetTextareaEvent",
+          "resolved": "{ originalEvent?: Event; component: \"duet-textarea\"; value: string; }",
+          "references": {
+            "DuetTextareaEvent": {
+              "location": "local"
+            }
           }
         }
-      }
-    }, {
-      "method": "duetFocus",
-      "name": "duetFocus",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the input has focus."
-      },
-      "complexType": {
-        "original": "DuetTextareaEvent",
-        "resolved": "{ originalEvent?: Event; component: \"duet-textarea\"; value: string; }",
-        "references": {
-          "DuetTextareaEvent": {
-            "location": "local"
+      }, {
+        "method": "duetFocus",
+        "name": "duetFocus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the input has focus."
+        },
+        "complexType": {
+          "original": "DuetTextareaEvent",
+          "resolved": "{ originalEvent?: Event; component: \"duet-textarea\"; value: string; }",
+          "references": {
+            "DuetTextareaEvent": {
+              "location": "local"
+            }
           }
         }
-      }
-    }]; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "(options?: FocusOptions) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "(options?: FocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "FocusOptions": {
+              "location": "global"
+            }
           },
-          "FocusOptions": {
-            "location": "global"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Sets focus on the specified `duet-textarea`. Use this method instead of the global\n`textarea.focus()`.",
-        "tags": []
+        "docs": {
+          "text": "Sets focus on the specified `duet-textarea`. Use this method instead of the global\n`textarea.focus()`.",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "element"; }
-  static get watchers() { return [{
-      "propName": "disallowPattern",
-      "methodName": "disallowedPatternChange"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "disallowPattern",
+        "methodName": "disallowedPatternChange"
+      }];
+  }
 }