@uh-design-system/component-library 0.5.2 → 0.6.0

package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.js

@@ -2,7 +2,7 @@ import { Fragment, h } from "@stencil/core";
 import classNames from "classnames";
 import { getOptionalText, getRequiredText } from "../../../utils/controls/controlUtils";
 import { isValidation } from "../../../store";
-import { idGenerator, getAriaLabel } from "../../../utils/utils";
+import { idGenerator } from "../../../utils/utils";
 import { inheritAttributes } from "../../../utils/attributes/attributes";
 const INPUT_TYPE_ICONS_MAP = {
     search: 'search',
@@ -24,79 +24,86 @@ export class DsTextInput {
     hasSuffixSlot = false;
     el;
     internals;
-    clear;
-    label;
-    placeholder;
-    identifier = inputIdGenerator.next().value;
-    name;
-    disabled;
-    optional;
-    required;
-    readonly;
-    value;
-    min;
-    max;
-    maxlength;
-    pattern;
-    autocomplete;
-    optionalText;
-    errorText;
-    successText;
-    assistiveText;
-    actionButtonAriaLabel;
-    hiddenAssistiveText;
-    prefixText;
-    suffixText;
-    icon = '';
-    type = 'text';
-    ariaLabel;
-    ariaLabelledby;
-    ariaDescribedby;
+    dsChange;
+    dsInput;
+    dsClear;
+    dsLabel;
+    dsPlaceholder;
+    dsId = inputIdGenerator.next().value;
+    dsName;
+    dsDisabled;
+    dsOptional;
+    dsRequired;
+    dsReadonly;
+    dsValue;
+    dsMin;
+    dsMax;
+    dsMaxLength;
+    dsPattern;
+    dsAutocomplete;
+    dsOptionalText;
+    dsErrorText;
+    dsSuccessText;
+    dsAssistiveText;
+    dsActionButtonAriaLabel;
+    dsHiddenAssistiveText;
+    dsPrefixText;
+    dsSuffixText;
+    dsIcon = '';
+    dsType = 'text';
+    dsAriaLabel;
+    dsAriaLabelledby;
+    dsAriaDescribedby;
     hasFocus = false;
     clearButtonVisible = false;
     passwordInputVisible = false;
     inputActive = false;
     validationMessage;
     setIds = () => {
-        this.assistiveTextId = `${this.identifier}-assistive-text`;
-        this.visuallyHiddenAssistiveTextId = `${this.identifier}-visually-hidden-assistive-text`;
-        this.errorTextId = `${this.identifier}-error-text`;
-        this.successTextId = `${this.identifier}-success-text`;
+        this.assistiveTextId = `${this.dsId}-assistive-text`;
+        this.visuallyHiddenAssistiveTextId = `${this.dsId}-visually-hidden-assistive-text`;
+        this.errorTextId = `${this.dsId}-error-text`;
+        this.successTextId = `${this.dsId}-success-text`;
     };
-    getValidationMessage = () => this.errorText || this.internals?.validationMessage || this.inputElement?.validationMessage;
+    getValidationMessage = () => this.dsErrorText || this.internals?.validationMessage || this.inputElement?.validationMessage;
     async togglePasswordVisibility() {
         return (this.passwordInputVisible = !this.passwordInputVisible);
     }
-    async clearInput() {
-        this.inputElement.value = '';
+    async clearInput(e) {
+        this.dsValue = '';
         this.inputElement.focus();
         this.clearButtonVisible = false;
-        this.clear.emit({ id: this.identifier });
+        this.dsClear.emit({ event: e, value: this.dsValue });
+    }
+    valueObserver(value) {
+        this.dsChange.emit({ value });
     }
     getLabelText = () => {
-        if (this.required) {
-            return getRequiredText(this.label);
+        if (this.dsRequired) {
+            return getRequiredText(this.dsLabel);
         }
-        if (this.optional) {
-            return getOptionalText(this.label, this.optionalText);
+        if (this.dsOptional) {
+            return getOptionalText(this.dsLabel, this.dsOptionalText);
         }
-        return this.label;
+        return this.dsLabel;
     };
     componentWillLoad() {
         this.inheritedAttributes = {
-            ...inheritAttributes(this, this.el),
+            ...inheritAttributes(this, this.el, ['id']),
         };
         this.setIds();
         this.hasPrefixSlot = !!this.el.querySelector('[slot="prefix"]');
         this.hasSuffixSlot = !!this.el.querySelector('[slot="suffix"]');
-        if (isValidation('server') || this.errorText) {
+        if (isValidation('server') || this.dsErrorText) {
             this.validationMessage = this.getValidationMessage();
         }
     }
     handleInput = (e) => {
         const target = e.target;
+        this.dsValue = target.value;
         this.clearButtonVisible = !!target.value;
         this.internals?.setFormValue(target.value);
+        this.dsInput.emit({ event: e, value: this.dsValue });
         if (isValidation('client') && this.validationMessage) {
             this.validationMessage = this.getValidationMessage();
         }
@@ -109,11 +116,12 @@ export class DsTextInput {
     };
     onActionButtonClicked = (e) => {
         e.stopPropagation();
-        switch (this.type) {
+        switch (this.dsType) {
             case 'password':
                 return this.togglePasswordVisibility();
             case 'search':
-                this.clearInput();
+                this.clearInput(e);
+                return;
             default:
                 return;
         }
@@ -122,12 +130,12 @@ export class DsTextInput {
         if (this.hasPrefixSlot) {
             return h("slot", { name: "prefix" });
         }
-        if (this.prefixText) {
-            return (h("slot", { name: "prefix" }, h("span", { class: "prefix" }, this.prefixText)));
+        if (this.dsPrefixText) {
+            return (h("slot", { name: "prefix" }, h("span", { class: "prefix" }, this.dsPrefixText)));
         }
-        const prefixIcon = this.icon || INPUT_TYPE_ICONS_MAP[this.type];
+        const prefixIcon = this.dsIcon || INPUT_TYPE_ICONS_MAP[this.dsType];
         if (prefixIcon) {
-            return (h("slot", { name: "prefix" }, h("ds-icon", { class: "prefix", name: prefixIcon })));
+            return (h("slot", { name: "prefix" }, h("ds-icon", { class: "prefix", dsName: prefixIcon })));
         }
         return null;
     }
@@ -135,13 +143,13 @@ export class DsTextInput {
         if (this.hasSuffixSlot) {
             return h("slot", { name: "suffix" });
         }
-        if (this.suffixText) {
-            return (h("slot", { name: "suffix" }, h("span", { class: "suffix" }, this.suffixText)));
+        if (this.dsSuffixText) {
+            return (h("slot", { name: "suffix" }, h("span", { class: "suffix" }, this.dsSuffixText)));
         }
-        const actionButtonIcon = INPUT_TYPE_ACTION_BUTTON_ICON_MAP[this.type]?.(this) ?? '';
-        const ariaPressed = this.type === 'password' ? this.passwordInputVisible : undefined;
+        const actionButtonIcon = INPUT_TYPE_ACTION_BUTTON_ICON_MAP[this.dsType]?.(this) ?? '';
+        const ariaPressed = this.dsType === 'password' ? this.passwordInputVisible : undefined;
         if (actionButtonIcon) {
-            return (h("slot", { name: "suffix" }, h("ds-button", { ref: e => (this.suffixButtonElement = e), variant: "supplementary", colour: "black", class: "suffix", disabled: false, icon: actionButtonIcon, onClick: this.onActionButtonClicked, "aria-pressed": ariaPressed, "aria-label": this.actionButtonAriaLabel })));
+            return (h("slot", { name: "suffix" }, h("ds-button", { ref: e => (this.suffixButtonElement = e), dsVariant: "supplementary", dsColour: "black", class: "suffix", dsDisabled: false, dsIcon: actionButtonIcon, onClick: this.onActionButtonClicked, "aria-pressed": ariaPressed, "aria-label": this.dsActionButtonAriaLabel })));
         }
         return null;
     }
@@ -151,19 +159,21 @@ export class DsTextInput {
         this.inputElement.focus();
     }
     render() {
-        const inputType = this.type === 'password' && this.passwordInputVisible ? 'text' : this.type;
-        return (h(Fragment, { key: '6b5cc3e8f7fe00df47392eade88010d1f9faf7e1' }, h("div", { key: 'c5e72b94f444c3923a3d72fb08615a97a9a174c2', class: "ds-input--label-container" }, h("slot", { key: 'a27efdf7b2311fdf310ce5340adccac015c906b1', name: "label" }, h("label", { key: '3a0241a9c572eb4403c5d46eb6761b5121726bf9', htmlFor: this.identifier }, this.getLabelText())), h("slot", { key: '8ffec65634da10f44ea145d1efec86147c6dc296', name: "help-text" }, h("small", { key: 'a45d970a13bae23f2f488a969ee9184cc521680e', id: this.assistiveTextId }, this.assistiveText), h("ds-visually-hidden", { key: 'abea8540ddeed9f797cd28c63aabbc734b7bf083', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), h("div", { key: '9f162c62ee86782abb60344074544feb643c3c8b', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames('ds-input--container', {
-                disabled: this.disabled,
-                readonly: this.readonly,
-                valid: !!this.successText,
+        const inputType = this.dsType === 'password' && this.passwordInputVisible ? 'text' : this.dsType;
+        return (h(Fragment, { key: '015e667345613d819eb885bdfde2011eefc60577' }, h("div", { key: 'abc03d3418fb9c648bc4d8039a4602366b6125c8', class: "ds-input__label-container" }, h("slot", { key: '9b660821e35939092570b4f6f449caca22771dcb', name: "label" }, h("label", { key: '96efa9db67a1f51f3380f7a3c350a8da45df9e1e', htmlFor: this.dsId }, this.getLabelText())), h("slot", { key: 'a5cb893f2c69efb68b7557fe5d253b58e7930f4c', name: "assistiveText" }, h("small", { key: '341f60604eb3b795bcaf5d81306dc349d0093647', id: this.assistiveTextId }, this.dsAssistiveText), h("ds-visually-hidden", { key: '613244a6dd9bb180a82c4250514ab74392cbaee8', id: this.visuallyHiddenAssistiveTextId }, this.dsHiddenAssistiveText))), h("div", { key: 'e0fb89582c7651eb00ec0dce5f5c4d0648840237', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames('ds-input__container', {
+                disabled: this.dsDisabled,
+                readonly: this.dsReadonly,
+                valid: !!this.dsSuccessText,
                 invalid: !!this.validationMessage,
                 focus: this.hasFocus,
                 active: !!this.inputActive,
-            }) }, this.renderPrefixContent(), h("input", { key: '1c7c944a70012444caa83f7f0104f6e1992d3acb', ref: e => (this.inputElement = e), id: this.identifier, name: this.name, "aria-label": getAriaLabel(this.label, this.ariaLabel), "aria-labelledby": this.ariaLabelledby, "aria-describedby": this.ariaDescribedby ||
-                classNames(this.assistiveTextId, this.visuallyHiddenAssistiveTextId, {
-                    [this.errorTextId]: Boolean(this.validationMessage),
-                    [this.successTextId]: Boolean(this.successText),
-                }), "aria-invalid": Boolean(this.validationMessage) ? 'true' : 'false', disabled: this.disabled, required: this.required, readonly: this.readonly, value: this.value, type: inputType, min: this.min, max: this.max, maxlength: this.maxlength, pattern: this.pattern, placeholder: this.placeholder, autocomplete: this.autocomplete, onInput: this.handleInput, onFocus: () => (this.hasFocus = true), onBlur: this.handleBlur, ...this.inheritedAttributes }), this.renderSuffixContent()), h("slot", { key: 'bdc4bbc3a0abe3668bcf18f719d50974ad12e1c4', name: "input-validity" }, h("ds-input-validity", { key: 'a392691fed93056f22673e5d20c6c4c099481181', id: this.errorTextId, text: this.validationMessage, type: "error", role: "alert" }), h("ds-input-validity", { key: '7e3b45928cdefed2c65b8c50fb4245527bae758e', id: this.successTextId, text: this.successText, type: "success", role: "status" }))));
+            }) }, this.renderPrefixContent(), h("input", { key: '5ad15cf4d756aae913e08bfd71338ea3d80c11b9', ref: e => (this.inputElement = e), id: this.dsId, name: this.dsName, "aria-label": this.dsAriaLabel, "aria-labelledby": this.dsAriaLabelledby, "aria-describedby": this.dsAriaDescribedby ||
+                classNames({
+                    [this.assistiveTextId]: !!this.dsAssistiveText,
+                    [this.visuallyHiddenAssistiveTextId]: !!this.dsHiddenAssistiveText,
+                    [this.errorTextId]: !!this.validationMessage,
+                    [this.successTextId]: !!this.dsSuccessText,
+                }), "aria-invalid": this.validationMessage ? 'true' : 'false', disabled: this.dsDisabled, required: this.dsRequired, readonly: this.dsReadonly, value: this.dsValue, type: inputType, min: this.dsMin, max: this.dsMax, maxlength: this.dsMaxLength, pattern: this.dsPattern, placeholder: this.dsPlaceholder, autocomplete: this.dsAutocomplete, onInput: this.handleInput, onFocus: () => (this.hasFocus = true), onBlur: this.handleBlur, ...this.inheritedAttributes }), this.renderSuffixContent()), h("slot", { key: '4e378385106dd578542a99303cd4217e7bf21694', name: "validity" }, h("ds-input-validity", { key: '367fab0f5d7446f99a028e881fa5c8ab8d9829e5', id: this.errorTextId, dsText: this.validationMessage, dsType: "error", dsValidityRole: "alert" }), h("ds-input-validity", { key: '8c35c70e4beb5ade4a5f8f6fb2a35d94be57cd98', id: this.successTextId, dsText: this.dsSuccessText, dsType: "success", dsValidityRole: "status" }))));
     }
     static get is() { return "ds-text-input"; }
     static get encapsulation() { return "scoped"; }
@@ -180,8 +190,9 @@ export class DsTextInput {
     }
     static get properties() {
         return {
-            "label": {
+            "dsLabel": {
                 "type": "string",
+                "attribute": "ds-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -192,15 +203,15 @@ export class DsTextInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Label of the input"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             },
-            "placeholder": {
+            "dsPlaceholder": {
                 "type": "string",
+                "attribute": "ds-placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -211,15 +222,15 @@ export class DsTextInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `placeholder` of the `input` element."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false
             },
-            "identifier": {
+            "dsId": {
                 "type": "string",
+                "attribute": "ds-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -230,16 +241,16 @@ export class DsTextInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `id` of the `input` element."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "id",
                 "reflect": false,
                 "defaultValue": "inputIdGenerator.next().value as string"
             },
-            "name": {
+            "dsName": {
                 "type": "string",
+                "attribute": "ds-name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -250,15 +261,15 @@ export class DsTextInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `name` attribute of the `input` element."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
-            "disabled": {
+            "dsDisabled": {
                 "type": "boolean",
+                "attribute": "ds-disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -269,15 +280,15 @@ export class DsTextInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `disabled` attribute of the `input` element."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false
             },
-            "optional": {
+            "dsOptional": {
                 "type": "boolean",
+                "attribute": "ds-optional",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -288,15 +299,15 @@ export class DsTextInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Displays indicator that the text input is optional alongside label."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "optional",
                 "reflect": false
             },
-            "required": {
+            "dsRequired": {
                 "type": "boolean",
+                "attribute": "ds-required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -307,15 +318,15 @@ export class DsTextInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `required` attribute of the `input` element."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false
             },
-            "readonly": {
+            "dsReadonly": {
                 "type": "boolean",
+                "attribute": "ds-readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -326,15 +337,15 @@ export class DsTextInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `readonly` attribute of the `input` element."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "readonly",
                 "reflect": false
             },
-            "value": {
+            "dsValue": {
                 "type": "string",
+                "attribute": "ds-value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -345,15 +356,15 @@ export class DsTextInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `value` attribute of the `input` element."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false
             },
-            "min": {
+            "dsMin": {
                 "type": "number",
+                "attribute": "ds-min",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -364,15 +375,15 @@ export class DsTextInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `min` attribute of the `input` element."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min",
                 "reflect": false
             },
-            "max": {
+            "dsMax": {
                 "type": "number",
+                "attribute": "ds-max",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -383,15 +394,15 @@ export class DsTextInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `max` attribute of the `input` element."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max",
                 "reflect": false
             },
-            "maxlength": {
+            "dsMaxLength": {
                 "type": "number",
+                "attribute": "ds-max-length",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -402,15 +413,15 @@ export class DsTextInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `maxlength` attribute of the `input` element."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "maxlength",
                 "reflect": false
             },
-            "pattern": {
+            "dsPattern": {
                 "type": "string",
+                "attribute": "ds-pattern",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -421,15 +432,15 @@ export class DsTextInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `pattern` attribute of the `input` element."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "pattern",
                 "reflect": false
             },
-            "autocomplete": {
+            "dsAutocomplete": {
                 "type": "string",
+                "attribute": "ds-autocomplete",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -440,15 +451,15 @@ export class DsTextInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `autocomplete` attribute of the `input` element."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "autocomplete",
                 "reflect": false
             },
-            "optionalText": {
+            "dsOptionalText": {
                 "type": "string",
+                "attribute": "ds-optional-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -459,15 +470,15 @@ export class DsTextInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Text shown alongside label, if the text input is set as optional."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "optional-text",
                 "reflect": false
             },
-            "errorText": {
+            "dsErrorText": {
                 "type": "string",
+                "attribute": "ds-error-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -478,15 +489,15 @@ export class DsTextInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Error message shown below the text input.\nIf set, the text input is shown in an invalid state."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error-text",
                 "reflect": false
             },
-            "successText": {
+            "dsSuccessText": {
                 "type": "string",
+                "attribute": "ds-success-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -497,15 +508,15 @@ export class DsTextInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Success message shown below the text input.\nIf set, the text input is shown in a success state."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "success-text",
                 "reflect": false
             },
-            "assistiveText": {
+            "dsAssistiveText": {
                 "type": "string",
+                "attribute": "ds-assistive-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -516,15 +527,15 @@ export class DsTextInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Text for additional information shown below label"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "assistive-text",
                 "reflect": false
             },
-            "actionButtonAriaLabel": {
+            "dsActionButtonAriaLabel": {
                 "type": "string",
+                "attribute": "ds-action-button-aria-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -535,15 +546,15 @@ export class DsTextInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Aria-label for action button for text inputs with type `password` or `search`.\nThe action button for `search` text input is the clear button.\nThe action button for `password` text input is the toggle visibility button."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "action-button-aria-label",
                 "reflect": false
             },
-            "hiddenAssistiveText": {
+            "dsHiddenAssistiveText": {
                 "type": "string",
+                "attribute": "ds-hidden-assistive-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -554,15 +565,15 @@ export class DsTextInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Visually hidden additional information for screen readers"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hidden-assistive-text",
                 "reflect": false
             },
-            "prefixText": {
+            "dsPrefixText": {
                 "type": "string",
+                "attribute": "ds-prefix-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -573,15 +584,15 @@ export class DsTextInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Allows additional elements before or after the input field, such as units (e.g., currency, minutes, country codes)."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "prefix-text",
                 "reflect": false
             },
-            "suffixText": {
+            "dsSuffixText": {
                 "type": "string",
+                "attribute": "ds-suffix-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -592,15 +603,15 @@ export class DsTextInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Allows additional elements before or after the input field, such as units (e.g., currency, minutes, country codes)."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "suffix-text",
                 "reflect": false
             },
-            "icon": {
+            "dsIcon": {
                 "type": "string",
+                "attribute": "ds-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -611,16 +622,16 @@ export class DsTextInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Icon to display at the start of the text input."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "''"
             },
-            "type": {
+            "dsType": {
                 "type": "string",
+                "attribute": "ds-type",
                 "mutable": false,
                 "complexType": {
                     "original": "DsTextInputType",
@@ -637,16 +648,16 @@ export class DsTextInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Type of the text input, passed to the `type` attribute of the `input` element.\nA text input of type `search` has an action button to clear the input value if it is not empty.\nA text input of type `password` has an action button to toggle the visibility of the entered input."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'text'"
             },
-            "ariaLabel": {
+            "dsAriaLabel": {
                 "type": "string",
+                "attribute": "ds-aria-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -657,15 +668,15 @@ export class DsTextInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `aria-label` attribute of the `input` element."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria-label",
                 "reflect": false
             },
-            "ariaLabelledby": {
+            "dsAriaLabelledby": {
                 "type": "string",
+                "attribute": "ds-aria-labelledby",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -676,15 +687,15 @@ export class DsTextInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `aria-labelledby` attribute of the `input` element."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria-labelledby",
                 "reflect": false
             },
-            "ariaDescribedby": {
+            "dsAriaDescribedby": {
                 "type": "string",
+                "attribute": "ds-aria-describedby",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -695,11 +706,10 @@ export class DsTextInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `aria-describedby` attribute of the `input` element."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria-describedby",
                 "reflect": false
             }
         };
@@ -715,23 +725,73 @@ export class DsTextInput {
     }
     static get events() {
         return [{
-                "method": "clear",
-                "name": "clear",
+                "method": "dsChange",
+                "name": "dsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `dsChange` event is fired each time the `value` property of\nthe `ds-text-input` element is changed. This may be a side effect\nof other events such as `dsClear` or `dsInput` event, or when the\n`value` property is programmatically changed."
+                },
+                "complexType": {
+                    "original": "Omit<DsTextInputEvent, 'event'>",
+                    "resolved": "{ value: string; }",
+                    "references": {
+                        "Omit": {
+                            "location": "global",
+                            "id": "global::Omit"
+                        },
+                        "DsTextInputEvent": {
+                            "location": "local",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-text-input/ds-text-input.tsx",
+                            "id": "src/components/01-base-components/ds-text-input/ds-text-input.tsx::DsTextInputEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsInput",
+                "name": "dsInput",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The `dsInput` event is fired when the user modifies the input's value.\nThe event is fired on each keystroke."
                 },
                 "complexType": {
-                    "original": "DsTextInputClearEvent",
-                    "resolved": "DsEvent",
+                    "original": "DsTextInputEvent<InputEvent>",
+                    "resolved": "{ event: InputEvent; value: string; }",
                     "references": {
-                        "DsTextInputClearEvent": {
+                        "DsTextInputEvent": {
                             "location": "local",
                             "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-text-input/ds-text-input.tsx",
-                            "id": "src/components/01-base-components/ds-text-input/ds-text-input.tsx::DsTextInputClearEvent"
+                            "id": "src/components/01-base-components/ds-text-input/ds-text-input.tsx::DsTextInputEvent"
+                        },
+                        "InputEvent": {
+                            "location": "global",
+                            "id": "global::InputEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsClear",
+                "name": "dsClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `dsClear` event is fired when the clear button of a input of type `search`\nis pressed."
+                },
+                "complexType": {
+                    "original": "DsTextInputEvent",
+                    "resolved": "{ event: Event; value: string; }",
+                    "references": {
+                        "DsTextInputEvent": {
+                            "location": "local",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-text-input/ds-text-input.tsx",
+                            "id": "src/components/01-base-components/ds-text-input/ds-text-input.tsx::DsTextInputEvent"
                         }
                     }
                 }
@@ -758,12 +818,21 @@ export class DsTextInput {
             },
             "clearInput": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
+                    "signature": "(e: Event) => Promise<void>",
+                    "parameters": [{
+                            "name": "e",
+                            "type": "Event",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "Event": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::Event"
                         }
                     },
                     "return": "Promise<void>"
@@ -776,5 +845,11 @@ export class DsTextInput {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueObserver"
+            }];
+    }
     static get attachInternalsMemberName() { return "internals"; }
 }