@telesign/boreal-web-components 0.1.0-alpha.2 → 0.1.0-alpha.3

package/dist/collection/components/forms/bds-text-field/bds-text-field.js

@@ -0,0 +1,1098 @@
+import { Host, Mixin, h, } from "@stencil/core";
+import { formAssociatedMixin } from "../../../mixins/index";
+import { ARIA_LABELS, ICONS, runValidators, setFormValue, validatePropValue, createId } from "../../../utils/index";
+import { TEXT_FIELD_TYPES, TEXT_FIELD_VARIANTS, TEXT_FIELD_VALIDATION_TIMING, } from "./types";
+/**
+ * Text field component for user input with validation and form integration.
+ *
+ * @summary Single-line text input with label, validation, password toggle, and clear action.
+ *
+ * @slot prefix - Inline content rendered before the input (e.g. icon or status indicator). Intended for single-line elements only; multi-line content will be clipped.
+ *
+ * @attr {string} name - The name submitted with the form.
+ * @attr {string} value - The current value of the input.
+ * @attr {boolean} disabled - Disables the input.
+ * @attr {boolean} required - Marks the input as required.
+ * @attr {boolean} error - Applies the error visual state.
+ * @attr {"text"|"password"} type - Input type.
+ * @attr {"outline"|"plain"} variant - Visual style of the container.
+ * @attr {boolean} readonly - Makes the input read-only. The value is still submitted with the form.
+ *
+ * @property {string} label - Label text rendered above the input.
+ * @property {string} sublabel - Sublabel rendered inside the input container, before the text area.
+ * @property {string} placeholder - Native placeholder forwarded to the inner `<input>`.
+ * @property {string} helperText - Assistive text shown below the input when there is no error.
+ * @property {string} errorMessage - Error message shown below the input when `error` is `true`. Replaces `helperText`.
+ * @property {string} info - Tooltip content attached to the label.
+ * @property {string} icon - Icon font class rendered beside the sublabel inside the container (e.g. `bds-icon-settings`).
+ * @property {boolean} clearable - Shows a clear button when the input has a value.
+ * @property {boolean} clearOnHover - Shows a clear button that is hidden at rest and revealed on hover.
+ * @property {boolean} readOnly - Makes the input readonly. The value is still submitted with the form.
+ * @property {string} autocomplete - Native `autocomplete` attribute forwarded to the inner `<input>`.
+ * @property {string} pattern - Native `pattern` attribute forwarded to the inner `<input>`.
+ * @property {number} minLength - Minimum character count. `0` means no minimum.
+ * @property {number} maxLength - Maximum character count. `0` means no maximum.
+ * @property {boolean} counter - Enables the character counter in the footer. Requires `charCount`.
+ * @property {number} charCount - Maximum character count shown in the footer counter (e.g. `120` → `"45/120"`). Requires `counter`.
+ * @property {IFormValidator[]} customValidators - Additional validators merged with the built-in ones.
+ * @property {"blur"|"input"|"submit"|"change"} validationTiming - When built-in validation runs.
+ * @property {string} pattern - Regex the value must match to pass `patternMismatch` validation. Also forwarded as the native `pattern` attribute to the inner `<input>`. Empty string disables pattern validation.
+ * @property {string} customWidth - Sets a custom width via the `--bds-text-field-width` CSS custom property.
+ *
+ * @fires valueChange - Emitted on every value change; used for framework 2-way binding.
+ * @fires bdsInput - Emitted on every keystroke with `{ value, event }`.
+ * @fires bdsChange - Emitted when focus leaves after the value changed, with `{ value, event }`.
+ * @fires bdsFocus - Emitted when the input gains focus, with `{ event }`.
+ * @fires bdsBlur - Emitted when the input loses focus, with `{ event }`.
+ * @fires bdsClear - Emitted when the user activates the clear button.
+ * @fires bdsValidationChange - Emitted after each validation run with `{ valid, validity, value, touched, dirty }`.
+ *
+ * @cssprop --bds-text-field-width - Sets a custom width for the component.
+ */
+export class BdsTextField extends Mixin(formAssociatedMixin) {
+    constructor() {
+        /** The name submitted with the form. */
+        this.name = '';
+        /** Disables the input. Also toggled by `formDisabledCallback` via the mixin. */
+        this.disabled = false;
+        /** Marks the input as required for form validation. */
+        this.required = false;
+        /** Mirrors `disabled` and the FACE `formDisabledCallback` result. Drives all disabled UI. */
+        this.isDisabled = false;
+        /** The current value of the input. */
+        this.value = '';
+        /** When `true`, applies the error visual state. */
+        this.error = false;
+        /** Message shown below the input when `error` is `true`. Replaces `helperText`. */
+        this.errorMessage = '';
+        /** Additional validators merged with the built-in ones. */
+        this.customValidators = [];
+        /** Controls when built-in validation runs: `'blur'` | `'input'` | `'submit'` | `'change'`. */
+        this.validationTiming = TEXT_FIELD_VALIDATION_TIMING.BLUR;
+        /** The input type. Use `'password'` to enable the visibility toggle. */
+        this.type = TEXT_FIELD_TYPES.TEXT;
+        /** Visual style of the input container. `'outline'` shows a border; `'plain'` hides it at rest. */
+        this.variant = TEXT_FIELD_VARIANTS.OUTLINE;
+        /** Native `placeholder` attribute forwarded to the inner `<input>`. */
+        this.placeholder = '';
+        /** Makes the input read-only. The value is still submitted with the form. */
+        this.readOnly = false;
+        /** Native `autocomplete` attribute forwarded to the inner `<input>`. */
+        this.autocomplete = 'off';
+        /** Regex the value must match to pass `patternMismatch` validation. Also forwarded as the native `pattern` attribute to the inner `<input>`. Empty string disables pattern validation. */
+        this.pattern = '';
+        /** Minimum character count. `0` means no minimum. */
+        this.minLength = 0;
+        /** Maximum character count. `0` means no maximum. */
+        this.maxLength = 0;
+        /** Label text rendered above the input. */
+        this.label = '';
+        /** Sublabel rendered inside the input container, before the text area. */
+        this.sublabel = '';
+        /** Icon font class rendered beside the sublabel inside the container (e.g. `bds-icon-settings`). */
+        this.icon = '';
+        /** Helper text shown below the input when there is no error. */
+        this.helperText = '';
+        /** Tooltip content attached to the label. Rendered via `bds-typography` `tooltipText` prop. */
+        this.info = '';
+        /** Shows a clear button when the input has a value. */
+        this.clearable = false;
+        /** Shows a clear button that is hidden at rest and revealed when the user hovers over the field. */
+        this.clearOnHover = false;
+        /** Maximum character count shown in the footer counter (e.g. `120` → `"45/120"`). Requires `counter`. */
+        this.charCount = 0;
+        /** Enables the character counter in the footer. Requires `charCount` to be set. */
+        this.counter = false;
+        /** Sets a custom width via the `--bds-text-field-width` CSS custom property. */
+        this.customWidth = '';
+        /** Tracks focus state to drive the `bds-text-field--focused` CSS modifier. */
+        this.focused = false;
+        /** Controls whether the password input renders as plain text. */
+        this.showPassword = false;
+        /** `true` after the user has blurred the input at least once. */
+        this.touched = false;
+        /** `true` once the value has been modified by the user. */
+        this.dirty = false;
+        /** Live character count of the current value. */
+        this.currentCharCount = 0;
+        /** `true` when the last triggered validation run returned invalid. Drives the error visual state. */
+        this.validationError = false;
+        /** Error message from the last failed validator. Shown in the footer when `validationError` is `true`. */
+        this.validationMessage = '';
+        this._valueAtFocus = '';
+        this._id = createId('bds-text-field');
+        this.invalidHandler = (e) => {
+            e.preventDefault();
+            this.validationError = true;
+            this.validationMessage = this.internals.validationMessage;
+            this.bdsValidationChange.emit({
+                valid: false,
+                validity: this.internals.validity,
+                value: this.value,
+                touched: this.touched,
+                dirty: this.dirty,
+            });
+        };
+        super();
+    }
+    /**
+     * Returns `true` if the element's value passes all constraints; `false` otherwise.
+     * Also fires an `invalid` event if constraints are violated.
+     */
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    /**
+     * Returns `true` if the element's value passes all constraints; `false` otherwise.
+     * Shows the browser's native validation UI when constraints are violated.
+     */
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    onDisabledChange(next) {
+        this.isDisabled = next;
+    }
+    checkPropValues() {
+        validatePropValue(Object.values(TEXT_FIELD_TYPES), TEXT_FIELD_TYPES.TEXT, this.el, 'type');
+        validatePropValue(Object.values(TEXT_FIELD_VARIANTS), TEXT_FIELD_VARIANTS.OUTLINE, this.el, 'variant');
+        validatePropValue(Object.values(TEXT_FIELD_VALIDATION_TIMING), TEXT_FIELD_VALIDATION_TIMING.BLUR, this.el, 'validationTiming');
+    }
+    componentWillLoad() {
+        this.checkPropValues();
+        this.isDisabled = this.disabled;
+        this.currentCharCount = this.value.length;
+    }
+    componentDidLoad() {
+        this.el.addEventListener('invalid', this.invalidHandler);
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener('invalid', this.invalidHandler);
+    }
+    onCustomValidatorsChange() {
+        this.updateValidity();
+    }
+    onValueChange(next) {
+        setFormValue(this.internals, next);
+        this.currentCharCount = next.length;
+        this.updateValidity();
+        this.valueChange.emit(next);
+    }
+    formAssociatedCallback() {
+        setFormValue(this.internals, this.value);
+        this.updateValidity();
+    }
+    formResetCallback() {
+        this.value = '';
+        this.touched = false;
+        this.dirty = false;
+        this.currentCharCount = 0;
+        this.validationError = false;
+        this.validationMessage = '';
+        setFormValue(this.internals, null);
+        this.updateValidity();
+    }
+    formStateRestoreCallback(state, _mode) {
+        this.value = typeof state === 'string' ? state : '';
+        setFormValue(this.internals, this.value);
+        this.updateValidity();
+    }
+    updateValidity(emitEvent = false) {
+        const valid = runValidators(this.internals, [...this.validators, ...this.customValidators], this.el);
+        if (emitEvent) {
+            this.validationError = !valid;
+            this.validationMessage = valid ? '' : this.internals.validationMessage;
+            this.bdsValidationChange.emit({
+                valid,
+                validity: this.internals.validity,
+                value: this.value,
+                touched: this.touched,
+                dirty: this.dirty,
+            });
+        }
+    }
+    handleInput(e) {
+        this.value = e.target.value;
+        this.dirty = true;
+        this.bdsInput.emit({ value: this.value, event: e });
+        if (this.validationTiming === TEXT_FIELD_VALIDATION_TIMING.INPUT) {
+            this.updateValidity(true);
+        }
+    }
+    handleChange(e) {
+        this.bdsChange.emit({ value: this.value, event: e });
+        if (this.validationTiming === TEXT_FIELD_VALIDATION_TIMING.CHANGE) {
+            this.updateValidity(true);
+        }
+    }
+    handleFocus(e) {
+        this.focused = true;
+        this._valueAtFocus = this.value;
+        this.bdsFocus.emit({ event: e });
+    }
+    handleBlur(e) {
+        this.focused = false;
+        this.touched = true;
+        this.bdsBlur.emit({ event: e });
+        if (this.validationTiming === TEXT_FIELD_VALIDATION_TIMING.BLUR) {
+            this.updateValidity(true);
+        }
+        else if (this.validationTiming === TEXT_FIELD_VALIDATION_TIMING.CHANGE && this.value !== this._valueAtFocus) {
+            this.updateValidity(true);
+        }
+    }
+    handleShowPassword() {
+        this.showPassword = !this.showPassword;
+    }
+    handleClear() {
+        this.value = '';
+        this.dirty = true;
+        this.validationError = false;
+        this.validationMessage = '';
+        this.bdsClear.emit();
+        this.el.querySelector('input')?.focus();
+    }
+    handleMouseDown(e) {
+        if (this.readOnly) {
+            e.preventDefault();
+        }
+    }
+    get validators() {
+        return [
+            {
+                key: 'valueMissing',
+                isValid: () => !this.required || this.value !== '',
+                message: 'This field is required. Please fill it out.',
+            },
+            {
+                key: 'tooShort',
+                isValid: () => this.minLength === 0 || this.value.length >= this.minLength,
+                message: `Please enter at least ${this.minLength} characters.`,
+            },
+            {
+                key: 'patternMismatch',
+                isValid: () => {
+                    if (this.pattern === '' || this.value === '')
+                        return true;
+                    try {
+                        return new RegExp(this.pattern).test(this.value);
+                    }
+                    catch {
+                        return true;
+                    }
+                },
+                message: 'Please match the requested format.',
+            },
+        ];
+    }
+    get effectiveMaxLength() {
+        if (this.maxLength !== 0)
+            return this.maxLength;
+        if (this.counter && this.charCount > 0)
+            return this.charCount;
+        return undefined;
+    }
+    get classMap() {
+        return {
+            'bds-text-field': true,
+            'bds-text-field--error': this.error || this.validationError,
+            'bds-text-field--disabled': this.isDisabled,
+            'bds-text-field--focused': this.focused,
+            'bds-text-field--readonly': this.readOnly,
+            'bds-text-field--plain': this.variant === TEXT_FIELD_VARIANTS.PLAIN,
+            'bds-text-field--clear-on-hover': this.clearOnHover,
+        };
+    }
+    get hostStyle() {
+        return this.customWidth !== '' ? { '--bds-text-field-width': this.customWidth } : undefined;
+    }
+    get iconClear() {
+        return this.clearable || this.clearOnHover ? ICONS.Close : '';
+    }
+    get showPasswordIcon() {
+        return this.showPassword ? ICONS.SightOn : ICONS.SightOff;
+    }
+    render() {
+        const labelId = `${this._id}-label`;
+        const helperId = `${this._id}-helper`;
+        const showClear = (this.clearable || this.clearOnHover) && this.value !== '' && !this.isDisabled && !this.readOnly;
+        const effectiveError = this.error || this.validationError;
+        const helperContent = this.error && this.errorMessage !== ''
+            ? this.errorMessage
+            : this.validationError && this.validationMessage !== ''
+                ? this.validationMessage
+                : this.helperText;
+        const showFooter = helperContent !== '' || (this.counter && this.charCount > 0);
+        const typographyState = this.isDisabled ? 'disabled' : effectiveError ? 'error' : 'default';
+        return (h(Host, { key: '8fcf734b92dfa2ad75a32bef27efea78bd61dd63', class: this.classMap, style: this.hostStyle, tabIndex: -1, onFocus: () => !this.readOnly && this.el.querySelector('input')?.focus() }, this.label !== '' && (h("bds-typography", { key: 'd50b6407278dd93b52fbbdbbc5e999a1185d4649', id: labelId, variant: "label", htmlFor: this._id, isRequired: this.required, tooltipText: this.info !== '' ? this.info : undefined, state: typographyState }, this.label)), h("div", { key: '89dc5c7830197786e7dc67b87f64a0b63c8a8c84', class: "bds-text-field__container" }, (this.icon !== '' || this.sublabel !== '') && (h("span", { key: 'a4139e0ce3b3d37bb33d55b5811e439974ed9d53', class: "bds-text-field__sublabel" }, this.icon !== '' && h("em", { key: '5fc8f5a49b348fe07c63242243274946e21aa782', class: this.icon }), this.sublabel)), h("slot", { key: 'a8f62dba555a26aba3b1105402f0afca1378c83a', name: "prefix" }), h("input", { key: 'ba2161c8d56c42847c7006d1742a2b60613f4628', id: this._id, class: "bds-text-field__control", "aria-labelledby": this.label !== '' ? labelId : undefined, "aria-describedby": showFooter && helperContent !== '' ? helperId : undefined, "aria-invalid": this.error || this.validationError ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, type: this.type === TEXT_FIELD_TYPES.PASSWORD && this.showPassword ? TEXT_FIELD_TYPES.TEXT : this.type, value: this.value, disabled: this.isDisabled, readOnly: this.readOnly, tabIndex: this.readOnly ? -1 : undefined, placeholder: this.placeholder, autocomplete: this.autocomplete, pattern: this.pattern !== '' ? this.pattern : undefined, minLength: this.minLength !== 0 ? this.minLength : undefined, maxLength: this.effectiveMaxLength, onMouseDown: (e) => this.handleMouseDown(e), onInput: (e) => this.handleInput(e), onChange: (e) => this.handleChange(e), onFocus: (e) => this.handleFocus(e), onBlur: (e) => this.handleBlur(e) }), (showClear || this.type === TEXT_FIELD_TYPES.PASSWORD) && (h("div", { key: 'c9ae74b2be87e2759d60ad69c9c91b95bc199163', class: "bds-text-field__actions" }, showClear && (h("button", { key: 'd94534386505f9c54aabe892aec58d81b6a0ea94', class: "bds-text-field__action bds-text-field__action--clear", type: "button", "aria-label": ARIA_LABELS.Clear, onClick: () => this.handleClear() }, h("em", { key: '7899ffad5be71b731ae8ead1d5601e3fc6b5f6a5', class: this.iconClear }))), this.type === TEXT_FIELD_TYPES.PASSWORD && (h("button", { key: '612aff7de193d9f61b955e686484c13baca3ff57', class: "bds-text-field__action bds-text-field__action--password", type: "button", "aria-label": this.showPassword ? ARIA_LABELS.HidePassword : ARIA_LABELS.ShowPassword, onClick: () => this.handleShowPassword() }, h("em", { key: 'e886085b840a351a7455a1adb685996835e47118', class: this.showPasswordIcon })))))), showFooter && (h("div", { key: '9b47bbaff802d0c4125e45c87f1e7366418dfdcc', class: "bds-text-field__footer" }, helperContent !== '' && (h("bds-typography", { key: '64265da85a16152af33b3f94c05e4d8562dc26df', id: helperId, variant: "helper", state: typographyState }, helperContent)), this.counter && this.charCount > 0 && (h("span", { key: '2a264545ba46b8d6908adabe729a1256334535ef', class: "bds-text-field__char-count" }, this.currentCharCount, "/", this.charCount))))));
+    }
+    static get is() { return "bds-text-field"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-text-field.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-text-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name submitted with the form."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the input. Also toggled by `formDisabledCallback` via the mixin."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the input as required for form validation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The current value of the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When `true`, applies the error visual state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Message shown below the input when `error` is `true`. Replaces `helperText`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message",
+                "defaultValue": "''"
+            },
+            "customValidators": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IFormValidator[]",
+                    "resolved": "IFormValidator[]",
+                    "references": {
+                        "IFormValidator": {
+                            "location": "import",
+                            "path": "@/types",
+                            "id": "src/types/index.ts::IFormValidator",
+                            "referenceLocation": "IFormValidator"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Additional validators merged with the built-in ones."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "validationTiming": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TextFieldValidationTiming",
+                    "resolved": "\"blur\" | \"change\" | \"input\" | \"submit\"",
+                    "references": {
+                        "TextFieldValidationTiming": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/forms/bds-text-field/types/index.ts::TextFieldValidationTiming",
+                            "referenceLocation": "TextFieldValidationTiming"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls when built-in validation runs: `'blur'` | `'input'` | `'submit'` | `'change'`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "validation-timing",
+                "defaultValue": "TEXT_FIELD_VALIDATION_TIMING.BLUR"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TextFieldType",
+                    "resolved": "\"password\" | \"text\"",
+                    "references": {
+                        "TextFieldType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/forms/bds-text-field/types/index.ts::TextFieldType",
+                            "referenceLocation": "TextFieldType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input type. Use `'password'` to enable the visibility toggle."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "TEXT_FIELD_TYPES.TEXT"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TextFieldVariant",
+                    "resolved": "\"outline\" | \"plain\"",
+                    "references": {
+                        "TextFieldVariant": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/forms/bds-text-field/types/index.ts::TextFieldVariant",
+                            "referenceLocation": "TextFieldVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual style of the input container. `'outline'` shows a border; `'plain'` hides it at rest."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "TEXT_FIELD_VARIANTS.OUTLINE"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Native `placeholder` attribute forwarded to the inner `<input>`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "''"
+            },
+            "readOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the input read-only. The value is still submitted with the form."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Native `autocomplete` attribute forwarded to the inner `<input>`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete",
+                "defaultValue": "'off'"
+            },
+            "pattern": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Regex the value must match to pass `patternMismatch` validation. Also forwarded as the native `pattern` attribute to the inner `<input>`. Empty string disables pattern validation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pattern",
+                "defaultValue": "''"
+            },
+            "minLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum character count. `0` means no minimum."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-length",
+                "defaultValue": "0"
+            },
+            "maxLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum character count. `0` means no maximum."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-length",
+                "defaultValue": "0"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text rendered above the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "sublabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sublabel rendered inside the input container, before the text area."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sublabel",
+                "defaultValue": "''"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon font class rendered beside the sublabel inside the container (e.g. `bds-icon-settings`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "''"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text shown below the input when there is no error."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text",
+                "defaultValue": "''"
+            },
+            "info": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip content attached to the label. Rendered via `bds-typography` `tooltipText` prop."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "info",
+                "defaultValue": "''"
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows a clear button when the input has a value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clearable",
+                "defaultValue": "false"
+            },
+            "clearOnHover": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows a clear button that is hidden at rest and revealed when the user hovers over the field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clear-on-hover",
+                "defaultValue": "false"
+            },
+            "charCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum character count shown in the footer counter (e.g. `120` \u2192 `\"45/120\"`). Requires `counter`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "char-count",
+                "defaultValue": "0"
+            },
+            "counter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables the character counter in the footer. Requires `charCount` to be set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "counter",
+                "defaultValue": "false"
+            },
+            "customWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets a custom width via the `--bds-text-field-width` CSS custom property."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-width",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isDisabled": {},
+            "focused": {},
+            "showPassword": {},
+            "touched": {},
+            "dirty": {},
+            "currentCharCount": {},
+            "validationError": {},
+            "validationMessage": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted whenever the value changes. Used by framework wrappers for 2-way binding."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "bdsInput",
+                "name": "bdsInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on every keystroke with the current value and the originating event."
+                },
+                "complexType": {
+                    "original": "{ value: string; event: InputEvent }",
+                    "resolved": "{ value: string; event: InputEvent; }",
+                    "references": {
+                        "InputEvent": {
+                            "location": "global",
+                            "id": "global::InputEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "bdsChange",
+                "name": "bdsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input loses focus after the value has changed."
+                },
+                "complexType": {
+                    "original": "{ value: string; event: Event }",
+                    "resolved": "{ value: string; event: Event; }",
+                    "references": {
+                        "Event": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "../../node_modules/.pnpm/@stencil+core@4.42.1/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Event",
+                            "referenceLocation": "Event"
+                        }
+                    }
+                }
+            }, {
+                "method": "bdsFocus",
+                "name": "bdsFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input gains focus."
+                },
+                "complexType": {
+                    "original": "{ event: FocusEvent }",
+                    "resolved": "{ event: FocusEvent; }",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "bdsBlur",
+                "name": "bdsBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input loses focus."
+                },
+                "complexType": {
+                    "original": "{ event: FocusEvent }",
+                    "resolved": "{ event: FocusEvent; }",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "bdsClear",
+                "name": "bdsClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user activates the clear button."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bdsValidationChange",
+                "name": "bdsValidationChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted after each validation run with the full validity snapshot."
+                },
+                "complexType": {
+                    "original": "{\n    valid: boolean;\n    validity: ValidityState;\n    value: string;\n    touched: boolean;\n    dirty: boolean;\n  }",
+                    "resolved": "{ valid: boolean; validity: ValidityState; value: string; touched: boolean; dirty: boolean; }",
+                    "references": {
+                        "ValidityState": {
+                            "location": "global",
+                            "id": "global::ValidityState"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Returns `true` if the element's value passes all constraints; `false` otherwise.\nAlso fires an `invalid` event if constraints are violated.",
+                    "tags": []
+                }
+            },
+            "reportValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Returns `true` if the element's value passes all constraints; `false` otherwise.\nShows the browser's native validation UI when constraints are violated.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "onDisabledChange"
+            }, {
+                "propName": "type",
+                "methodName": "checkPropValues"
+            }, {
+                "propName": "variant",
+                "methodName": "checkPropValues"
+            }, {
+                "propName": "validationTiming",
+                "methodName": "checkPropValues"
+            }, {
+                "propName": "customValidators",
+                "methodName": "onCustomValidatorsChange"
+            }, {
+                "propName": "value",
+                "methodName": "onValueChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}