@duetds/components 8.0.6 → 8.1.1

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

@@ -1,865 +1,869 @@
 /*!
  * Built with Duet Design System
  */
-import { h, Host, } from "@stencil/core";
+import { Build, h, Host, } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { cleanValue } from "../../utils/input-utils";
 const CharacterCount = ({ value, maxlength, label, 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))));
+    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))));
 };
 export class DuetTextarea {
-  constructor() {
-    /**
-     * Own Properties
-     */
-    this.textareaId = createID("DuetTextarea");
-    this.topCaptionId = createID("DuetCaptionTop");
-    this.topCaptionPlaceholderId = createID("DuetCaptionPlaceholderTop");
-    this.labelId = createID("DuetLabel");
-    this.errorId = createID("DuetError");
-    this.characterCountId = createID("DuetCharacterCount");
-    this.disallowPatternRegex = null;
-    /**
-     * Component event handling.
-     */
-    this.handleInput = (ev) => {
-      if (this.disallowPatternRegex) {
-        cleanValue(this.nativeInput, this.disallowPatternRegex);
-      }
-      this.value = this.nativeInput.value;
-      this.isCaptionVisible = !!this.caption;
-      this.duetInput.emit({
-        originalEvent: ev,
-        value: this.value,
-        component: "duet-textarea",
-      });
-    };
-    this.handleChange = (ev) => {
-      this.value = this.nativeInput.value;
-      this.duetChange.emit({
-        originalEvent: ev,
-        value: this.value,
-        component: "duet-textarea",
-      });
-    };
-    this.handleBlur = (ev) => {
-      this.duetBlur.emit({
-        originalEvent: ev,
-        value: this.value,
-        component: "duet-textarea",
-      });
-    };
-    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",
-      });
-    };
-    this.getDescribedBy = () => {
-      const describedBy = [];
-      if (this.isCaptionVisible && this.topCaptionId) {
-        describedBy.push(this.topCaptionId);
-      }
-      if (this.accessibleDescribedBy) {
-        describedBy.push(this.accessibleDescribedBy);
-      }
-      if (this.error) {
-        describedBy.push(this.errorId);
-      }
-      if (this.counter) {
-        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.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, "gu") : null;
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-    this.disallowedPatternChange();
-    this.isCaptionVisible = !!this.caption;
-    if (this.counter && this.maxlength == null) {
-      console.warn("[DUET WARNING]: counter will only take effect if maxlength is set");
-    }
-    if (!this.counter && this.counterLabel != null) {
-      console.warn("[DUET WARNING]: counter-label is redundant unless used with counter");
-    }
-    if (this.counter && !this.counterLabel) {
-      console.warn("[DUET WARNING]: counter requires counter-label to be set");
-    }
-  }
-  /**
-   * Sets focus on the specified `duet-textarea`. Use this method instead of the global
-   * `textarea.focus()`.
-   */
-  async setFocus(options) {
-    this.nativeInput.focus(options);
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    const identifier = this.identifier || this.textareaId;
-    return (h(Host, { class: {
-        "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.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", { alignment: "stretch" }, h("duet-grid-item", { margin: "none", fill: true }, h("div", { class: "duet-textarea-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "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 })))), this.counter && (h("duet-visually-hidden", { class: "duet-visually-hidden", id: this.characterCountId, ref: el => {
-        this.hiddenCounterLabel = el;
-      } })))));
-  }
-  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",
-              "id": "src/common-types.d.ts::DuetMargin"
+    constructor() {
+        /**
+         * Own Properties
+         */
+        this.textareaId = createID("DuetTextarea");
+        this.topCaptionId = createID("DuetCaptionTop");
+        this.topCaptionPlaceholderId = createID("DuetCaptionPlaceholderTop");
+        this.labelId = createID("DuetLabel");
+        this.errorId = createID("DuetError");
+        this.characterCountId = createID("DuetCharacterCount");
+        this.disallowPatternRegex = null;
+        /**
+         * Component event handling.
+         */
+        this.handleInput = (ev) => {
+            if (this.disallowPatternRegex) {
+                cleanValue(this.nativeInput, this.disallowPatternRegex);
             }
-          }
-        },
-        "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"
-      },
-      "accessibleLiveError": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"off\" | \"polite\" | \"assertive\"",
-          "resolved": "\"assertive\" | \"off\" | \"polite\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The aria-live attribute for the error message. When the input is validated on blur, use \"off\", as using \"polite\" or \"assertive\"\nmakes the screen reader read the error message twice. When the input is validated on submit, use \"polite\", as \"off\" would leave\nthe messages unread by screen readers. Use \"assertive\" only in those rare cases when \"polite\" would leave the error message\nunread by screen readers."
-        },
-        "attribute": "accessible-live-error",
-        "reflect": false,
-        "defaultValue": "\"polite\""
-      },
-      "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",
-              "id": "src/common-types.d.ts::DuetTheme"
+            this.value = this.nativeInput.value;
+            this.isCaptionVisible = !!this.caption;
+            this.duetInput.emit({
+                originalEvent: ev,
+                value: this.value,
+                component: "duet-textarea",
+            });
+        };
+        this.handleChange = (ev) => {
+            this.value = this.nativeInput.value;
+            this.duetChange.emit({
+                originalEvent: ev,
+                value: this.value,
+                component: "duet-textarea",
+            });
+        };
+        this.handleBlur = (ev) => {
+            this.duetBlur.emit({
+                originalEvent: ev,
+                value: this.value,
+                component: "duet-textarea",
+            });
+        };
+        this.handleFocus = (ev) => {
+            if (this.counter) {
+                this.hiddenCounterLabel.textContent = `${Math.max(this.maxlength - this.value.length, 0)}/${this.maxlength} ${this.counterLabel}`;
             }
-          }
-        },
-        "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 | null",
-          "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",
-              "id": "src/common-types.d.ts::DuetTooltipDirection"
+            this.duetFocus.emit({
+                originalEvent: ev,
+                value: this.value,
+                component: "duet-textarea",
+            });
+        };
+        this.getDescribedBy = () => {
+            const describedBy = [];
+            if (this.isCaptionVisible && this.topCaptionId) {
+                describedBy.push(this.topCaptionId);
             }
-          }
-        },
-        "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",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx",
-              "id": "src/components/duet-textarea/duet-textarea.tsx::DuetTextareaEvent"
+            if (this.accessibleDescribedBy) {
+                describedBy.push(this.accessibleDescribedBy);
             }
-          }
-        }
-      }, {
-        "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",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx",
-              "id": "src/components/duet-textarea/duet-textarea.tsx::DuetTextareaEvent"
+            if (this.error) {
+                describedBy.push(this.errorId);
             }
-          }
-        }
-      }, {
-        "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",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx",
-              "id": "src/components/duet-textarea/duet-textarea.tsx::DuetTextareaEvent"
+            if (this.counter) {
+                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.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, "gu") : null;
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+        this.disallowedPatternChange();
+        this.isCaptionVisible = !!this.caption;
+        if (this.counter && this.maxlength == null) {
+            console.warn("[DUET WARNING]: counter will only take effect if maxlength is set");
         }
-      }, {
-        "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",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx",
-              "id": "src/components/duet-textarea/duet-textarea.tsx::DuetTextareaEvent"
-            }
-          }
+        if (!this.counter && this.counterLabel != null) {
+            console.warn("[DUET WARNING]: counter-label is redundant unless used with counter");
+        }
+        if (this.counter && !this.counterLabel) {
+            console.warn("[DUET WARNING]: counter requires counter-label to be set");
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "(options?: FocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+    }
+    /**
+     * Sets focus on the specified `duet-textarea`. Use this method instead of the global
+     * `textarea.focus()`.
+     */
+    async setFocus(options) {
+        this.nativeInput.focus(options);
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        if (Build.isServer) {
+            return;
+        }
+        const identifier = this.identifier || this.textareaId;
+        return (h(Host, { class: {
+                "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.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", { alignment: "stretch" }, h("duet-grid-item", { margin: "none", fill: true }, h("div", { class: "duet-textarea-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "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 })))), this.counter && (h("duet-visually-hidden", { class: "duet-visually-hidden", id: this.characterCountId, ref: el => {
+                this.hiddenCounterLabel = el;
+            } })))));
+    }
+    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",
+                            "id": "src/common-types.d.ts::DuetMargin"
+                        }
+                    }
+                },
+                "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"
             },
-            "FocusOptions": {
-              "location": "global",
-              "id": "global::FocusOptions"
+            "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"
+            },
+            "accessibleLiveError": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"off\" | \"polite\" | \"assertive\"",
+                    "resolved": "\"assertive\" | \"off\" | \"polite\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The aria-live attribute for the error message. When the input is validated on blur, use \"off\", as using \"polite\" or \"assertive\"\nmakes the screen reader read the error message twice. When the input is validated on submit, use \"polite\", as \"off\" would leave\nthe messages unread by screen readers. Use \"assertive\" only in those rare cases when \"polite\" would leave the error message\nunread by screen readers."
+                },
+                "attribute": "accessible-live-error",
+                "reflect": false,
+                "defaultValue": "\"polite\""
+            },
+            "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",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "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 | null",
+                    "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",
+                            "id": "src/common-types.d.ts::DuetTooltipDirection"
+                        }
+                    }
+                },
+                "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
             }
-          },
-          "return": "Promise<void>"
-        },
-        "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 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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx",
+                            "id": "src/components/duet-textarea/duet-textarea.tsx::DuetTextareaEvent"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx",
+                            "id": "src/components/duet-textarea/duet-textarea.tsx::DuetTextareaEvent"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx",
+                            "id": "src/components/duet-textarea/duet-textarea.tsx::DuetTextareaEvent"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx",
+                            "id": "src/components/duet-textarea/duet-textarea.tsx::DuetTextareaEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "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"
+            }];
+    }
 }