atomicuilibrary 0.0.1

package/dist/collection/components/input/input.js

@@ -0,0 +1,3690 @@
+import { h, Host } from "@stencil/core";
+import { hexToRgb } from "../../utils/utils";
+const STANDARD_COLORS = ['primary', 'secondary', 'success', 'warning', 'danger', 'error', 'info', 'default'];
+export class Input {
+    element;
+    badge;
+    color = 'primary';
+    prefixColor;
+    suffixColor;
+    gradientDecorators = false;
+    rippleEffect = true;
+    // Master Tier Power Features
+    linearLoading = false;
+    hintTooltip = '';
+    successPulse = false;
+    alwaysFloated = false;
+    shakeOnError = false;
+    maxRows = 5;
+    autocompleteSuggestions = [];
+    // Apex Tier Mastery Features
+    voiceInput = false;
+    shortcutHint = '';
+    textTransform = 'none';
+    relativeTime = false;
+    highlightMatches = true;
+    dropZone = false;
+    // Zenith Tier Final Specifications
+    ghostText = '';
+    revealOnHold = false;
+    noSpaces = false;
+    alphaOnly = false;
+    numericOnly = false;
+    showPasswordStrength = false;
+    showProgressCircle = false;
+    dirtyTracking = false;
+    defaultValue = '';
+    otpLength = 6;
+    voiceEnabled = false;
+    statusIndicator = 'none';
+    validationTrigger = 'onInput';
+    gradientBorder = false;
+    backdropSheen = false;
+    isPasswordHeld = false;
+    currentGhost = '';
+    isDirty = false;
+    isRecording = false;
+    isDragging = false;
+    rippleX = 0;
+    rippleY = 0;
+    showRipple = false;
+    showClearButton = false;
+    customClass;
+    analyticsEvent;
+    inputElement;
+    colorPickerElement;
+    filePickerElement;
+    debounceTimer;
+    internals;
+    type = 'text';
+    variant = 'outlined';
+    size = 'md';
+    width;
+    value = '';
+    placeholder = '';
+    label = '';
+    helperText = '';
+    errorText = '';
+    successText = '';
+    warningText = '';
+    infoText = '';
+    validationState = 'none';
+    disabled = false;
+    readonly = false;
+    required = false;
+    multiline = false;
+    rows = 3;
+    autoResize = false;
+    minRows;
+    cols;
+    maxLength;
+    minLength;
+    showCounter = false;
+    showClear = false;
+    showPasswordToggle = true;
+    prefixIcon = '';
+    suffixIcon = '';
+    prefixText = '';
+    suffixText = '';
+    floatingLabel = false;
+    autocomplete = 'off';
+    min;
+    max;
+    step;
+    pattern;
+    name;
+    inputId;
+    debounce = 0;
+    loading = false;
+    fullWidth = false;
+    autofocus = false;
+    customTabIndex;
+    showCopy = false;
+    density = 'standard';
+    showDividers = false;
+    mask = 'none';
+    currency = 'USD';
+    accept; // for file input
+    multiple = false; // for file input
+    minLengthIndicator;
+    maxLengthIndicator;
+    tooltip;
+    suggestions = [];
+    inputmode;
+    clearIcon = 'x-circle';
+    showSteppers = false;
+    showTypeIcon = true;
+    formatter;
+    parser;
+    autoSelect = false;
+    autoTrim = false;
+    rtl = false;
+    passwordStrengthCalculator;
+    resize = 'vertical';
+    enterkeyhint;
+    passwordIcon = 'eye';
+    passwordVisibleIcon = 'eye-off';
+    skeleton = false;
+    prefixClickable = false;
+    suffixClickable = false;
+    allowedChars = '';
+    blockInvalidPaste = false;
+    customMask = '';
+    selectOnClick = false;
+    clearOnEscape = true;
+    autoCapitalize = 'none';
+    async setFocus() {
+        if (this.inputElement) {
+            this.inputElement.focus();
+        }
+    }
+    async openFilePicker() {
+        if (this.filePickerElement) {
+            this.filePickerElement.click();
+        }
+    }
+    async openColorPicker() {
+        if (this.colorPickerElement) {
+            this.colorPickerElement.click();
+        }
+    }
+    isFocused = false;
+    isPasswordVisible = false;
+    currentLength = 0;
+    showSuggestions = false;
+    selectedSuggestionIndex = -1;
+    rangeValue = 50;
+    shake = false;
+    passwordStrength = 0; // 0-4
+    capsLockOn = false;
+    selectedFileNames = '';
+    internalErrorText = '';
+    validate(value) {
+        if (!value && !this.required) {
+            this.validationState = 'none';
+            this.internalErrorText = '';
+            return;
+        }
+        if (this.type === 'email' && value) {
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            if (!emailRegex.test(value)) {
+                this.validationState = 'error';
+                this.internalErrorText = 'Please enter a valid email address';
+                return;
+            }
+        }
+        if (this.type === 'color' && value) {
+            const colorRegex = /^#([A-Fa-f0-9]{3}){1,2}$/;
+            if (!colorRegex.test(value)) {
+                this.validationState = 'error';
+                this.internalErrorText = 'Please enter a valid Hex color (e.g. #ff0000)';
+                return;
+            }
+        }
+        if (this.type === 'url' && value) {
+            const urlRegex = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/i;
+            if (!urlRegex.test(value)) {
+                this.validationState = 'error';
+                this.internalErrorText = 'Please enter a valid URL';
+                return;
+            }
+        }
+        if (this.pattern && value) {
+            const customRegex = new RegExp(this.pattern);
+            if (!customRegex.test(value)) {
+                this.validationState = 'error';
+                this.internalErrorText = 'Please match the requested format';
+                return;
+            }
+        }
+        if (this.type === 'number' && value) {
+            const numValue = parseFloat(value);
+            if (this.min !== undefined && numValue < parseFloat(this.min)) {
+                this.validationState = 'error';
+                this.internalErrorText = `Value must be greater than or equal to ${this.min}`;
+                return;
+            }
+            if (this.max !== undefined && numValue > parseFloat(this.max)) {
+                this.validationState = 'error';
+                this.internalErrorText = `Value must be less than or equal to ${this.max}`;
+                return;
+            }
+        }
+        if (value) {
+            if (this.minLengthIndicator && value.length < this.minLengthIndicator) {
+                this.validationState = 'error';
+                this.internalErrorText = `Please lengthen this text to ${this.minLengthIndicator} characters or more`;
+                return;
+            }
+            if (this.maxLengthIndicator && value.length > this.maxLengthIndicator) {
+                this.validationState = 'error';
+                this.internalErrorText = `Please shorten this text to ${this.maxLengthIndicator} characters or less`;
+                return;
+            }
+        }
+        if (this.validationState === 'error' && this.internalErrorText) {
+            if (this.internals) {
+                this.internals.setValidity({ customError: true }, this.internalErrorText, this.inputElement);
+            }
+        }
+        else {
+            if (this.internals) {
+                this.internals.setValidity({});
+            }
+            this.validationState = 'none';
+            this.internalErrorText = '';
+        }
+    }
+    updateFormValue() {
+        if (this.internals) {
+            this.internals.setFormValue(this.value);
+        }
+    }
+    inputChange;
+    inputFocus;
+    inputBlur;
+    inputClear;
+    inputKeydown;
+    inputKeyup;
+    inputCopy;
+    fileSelected;
+    suggestionSelected;
+    prefixClick;
+    suffixClick;
+    search;
+    inputInput;
+    focusInternal;
+    pasteInternal;
+    wheelInternal;
+    valueChanged(newValue) {
+        this.currentLength = newValue?.length || 0;
+        if (this.autoTrim && newValue) {
+            this.value = newValue.trim();
+        }
+        if (this.dirtyTracking) {
+            this.isDirty = newValue !== this.defaultValue;
+        }
+        if (this.autoResize && this.multiline && this.inputElement) {
+            this.resizeTextarea();
+        }
+        if (this.type === 'password' && newValue) {
+            this.passwordStrength = this.calculatePasswordStrength(newValue);
+        }
+        if (this.type === 'range') {
+            this.rangeValue = parseFloat(newValue) || 0;
+        }
+        this.updateClearButtonVisibility();
+        this.updateFormValue();
+    }
+    handleValidationStateChange(newValue) {
+        if (this.shakeOnError && newValue === 'error') {
+            this.shake = true;
+            setTimeout(() => (this.shake = false), 600);
+        }
+    }
+    handleShakeChange(newValue) {
+        if (newValue) {
+            setTimeout(() => (this.shake = false), 600);
+        }
+    }
+    componentWillLoad() {
+        if (typeof this.attachInternals === 'function') {
+            this.internals = this.attachInternals();
+        }
+        this.currentLength = this.value?.length || 0;
+        if (this.type === 'range' && this.value) {
+            this.rangeValue = parseFloat(this.value) || 0;
+        }
+        this.updateFormValue();
+    }
+    resizeObserver;
+    componentDidLoad() {
+        if (this.autoResize && this.multiline && this.inputElement) {
+            this.resizeTextarea();
+            // Setup ResizeObserver to handle content changes or visibility toggles
+            this.resizeObserver = new ResizeObserver(() => {
+                this.resizeTextarea();
+            });
+            this.resizeObserver.observe(this.inputElement);
+        }
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+        }
+    }
+    updateClearButtonVisibility() {
+        this.showClearButton = this.showClear && !!this.value;
+    }
+    getRangePercentage() {
+        const min = parseFloat(this.min) || 0;
+        const max = parseFloat(this.max) || 100;
+        return ((this.rangeValue - min) / (max - min)) * 100;
+    }
+    resizeTextarea() {
+        if (this.inputElement && this.multiline) {
+            const textarea = this.inputElement;
+            textarea.style.height = 'auto';
+            const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20;
+            const maxRowsHeight = this.maxRows ? this.maxRows * lineHeight : 0;
+            let newHeight = textarea.scrollHeight;
+            if (this.maxRows && newHeight > maxRowsHeight && maxRowsHeight > 0) {
+                textarea.style.height = `${maxRowsHeight}px`;
+                textarea.style.overflowY = 'auto';
+            }
+            else {
+                textarea.style.height = `${newHeight}px`;
+                textarea.style.overflowY = 'hidden';
+            }
+        }
+    }
+    getMaskPlaceholder() {
+        if (this.customMask)
+            return this.customMask.replace(/#/g, 'X').replace(/A/g, 'X');
+        const placeholders = {
+            'phone': '(XXX) XXX-XXXX',
+            'credit-card': 'XXXX XXXX XXXX XXXX',
+            'date': 'MM/DD/YYYY',
+            'currency': '$0.00',
+            'ssn': 'XXX-XX-XXXX',
+            'zip': 'XXXXX',
+            'none': ''
+        };
+        return placeholders[this.mask] || '';
+    }
+    applyMask(value) {
+        if (!value)
+            return value;
+        if (this.customMask) {
+            const cleanValue = value.replace(/[^A-Za-z0-9]/g, '');
+            let result = '';
+            let valueIdx = 0;
+            for (let i = 0; i < this.customMask.length && valueIdx < cleanValue.length; i++) {
+                const maskChar = this.customMask[i];
+                if (maskChar === '#' || maskChar === 'A') {
+                    result += cleanValue[valueIdx++];
+                }
+                else {
+                    result += maskChar;
+                }
+            }
+            return result;
+        }
+        if (this.mask === 'none' && this.type !== 'currency')
+            return value;
+        const maskToUse = this.type === 'currency' ? 'currency' : this.mask;
+        const digits = value.replace(/\D/g, '');
+        switch (maskToUse) {
+            case 'phone': {
+                if (!digits)
+                    return '';
+                if (digits.length <= 3)
+                    return `(${digits}`;
+                if (digits.length <= 6)
+                    return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
+                return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6, 10)}`;
+            }
+            case 'credit-card': {
+                return digits.match(/.{1,4}/g)?.join(' ').slice(0, 19) || digits;
+            }
+            case 'date': {
+                if (digits.length <= 2)
+                    return digits;
+                if (digits.length <= 4)
+                    return `${digits.slice(0, 2)}/${digits.slice(2)}`;
+                return `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4, 8)}`;
+            }
+            case 'currency': {
+                if (!digits)
+                    return '';
+                const amount = (parseInt(digits) / 100).toFixed(2);
+                return new Intl.NumberFormat('en-US', {
+                    style: 'currency',
+                    currency: this.currency,
+                }).format(parseFloat(amount));
+            }
+            case 'ssn': {
+                if (digits.length <= 3)
+                    return digits;
+                if (digits.length <= 5)
+                    return `${digits.slice(0, 3)}-${digits.slice(3)}`;
+                return `${digits.slice(0, 3)}-${digits.slice(3, 5)}-${digits.slice(5, 9)}`;
+            }
+            case 'zip': {
+                return digits.slice(0, 5);
+            }
+            default:
+                return value;
+        }
+    }
+    calculatePasswordStrength(password) {
+        if (this.passwordStrengthCalculator) {
+            return this.passwordStrengthCalculator(password);
+        }
+        let strength = 0;
+        if (password.length >= 1) {
+            if (password.length >= 8)
+                strength++;
+            if (/[A-Z]/.test(password))
+                strength++;
+            if (/[0-9]/.test(password))
+                strength++;
+            if (/[^A-Za-z0-9]/.test(password))
+                strength++;
+        }
+        return strength;
+    }
+    applyTextTransform(val) {
+        if (!val || this.textTransform === 'none')
+            return val;
+        switch (this.textTransform) {
+            case 'uppercase': return val.toUpperCase();
+            case 'lowercase': return val.toLowerCase();
+            case 'capitalize': return val.charAt(0).toUpperCase() + val.slice(1).toLowerCase();
+            case 'pascal': return val.split(/\s+/).map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()).join('');
+            case 'words': return val.split(' ').map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()).join(' ');
+            case 'sentences': return val.split('. ').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join('. ');
+            default: return val;
+        }
+    }
+    recognition = null;
+    voiceStatusTimer = null;
+    setVoiceStatus(listening) {
+        this.isRecording = listening;
+        // Update the status indicator
+        if (listening) {
+            this.statusIndicator = 'listening';
+        }
+        else {
+            // Briefly show 'Not listening' then clear
+            this.statusIndicator = 'none';
+            // Use a custom state via the label; we repurpose the indicator briefly
+            clearTimeout(this.voiceStatusTimer);
+            // Temporarily inject a custom value to show 'Not listening'
+            this._voiceOffLabel = true;
+            this.voiceStatusTimer = setTimeout(() => {
+                this._voiceOffLabel = false;
+                // Force a re-render by toggling a throwaway state
+                this.isRecording = false;
+            }, 1500);
+        }
+    }
+    startVoiceRecognition = () => {
+        // ── Stop if currently recording ─────────────────────────────────────────
+        if (this.isRecording) {
+            if (this.recognition) {
+                this.recognition.stop(); // onend will call setVoiceStatus(false)
+            }
+            else {
+                this.setVoiceStatus(false);
+            }
+            return;
+        }
+        // ── Start ────────────────────────────────────────────────────────────────
+        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+        if (SpeechRecognition) {
+            this.recognition = new SpeechRecognition();
+            this.recognition.continuous = false;
+            this.recognition.interimResults = false;
+            this.recognition.onstart = () => this.setVoiceStatus(true);
+            this.recognition.onend = () => { this.setVoiceStatus(false); this.recognition = null; };
+            this.recognition.onerror = () => { this.setVoiceStatus(false); this.recognition = null; };
+            this.recognition.onresult = (event) => {
+                const transcript = event.results[0][0].transcript;
+                this.value = this.applyTextTransform(transcript);
+                this.inputInput.emit(this.value);
+                this.inputChange.emit(this.value);
+            };
+            // Optimistically set recording state immediately (onstart fires asynchronously)
+            this.setVoiceStatus(true);
+            this.recognition.start();
+        }
+        else {
+            // No API — still toggle for visual demo/testing
+            this.setVoiceStatus(true);
+        }
+    };
+    handleMouseDown = (e) => {
+        if (!this.rippleEffect)
+            return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        this.rippleX = e.clientX - rect.left;
+        this.rippleY = e.clientY - rect.top;
+        this.showRipple = true;
+        setTimeout(() => (this.showRipple = false), 600);
+    };
+    handleDragOver = (e) => {
+        if (!this.dropZone || this.type !== 'file')
+            return;
+        e.preventDefault();
+        this.isDragging = true;
+    };
+    handleDragLeave = () => {
+        this.isDragging = false;
+    };
+    handleDrop = (e) => {
+        if (!this.dropZone || this.type !== 'file')
+            return;
+        e.preventDefault();
+        this.isDragging = false;
+        const files = e.dataTransfer?.files;
+        if (files && files.length > 0) {
+            if (this.filePickerElement) {
+                this.filePickerElement.files = files;
+                // Trigger the file selected flow
+                const event = new window.Event('input', { bubbles: true });
+                this.filePickerElement.dispatchEvent(event);
+            }
+            this.selectedFileNames = Array.from(files).map(f => f.name).join(', ');
+            this.fileSelected.emit(files);
+        }
+    };
+    highlightTextMatches(text) {
+        if (!text || !this.value || !this.highlightMatches)
+            return text;
+        const query = this.value.toLowerCase();
+        const textLower = text.toLowerCase();
+        const index = textLower.indexOf(query);
+        if (index === -1)
+            return text;
+        return (h("span", null, text.slice(0, index), h("b", { class: "match-highlight" }, text.slice(index, index + query.length)), text.slice(index + query.length)));
+    }
+    getRelativeTimeString(dateStr) {
+        try {
+            const date = new Date(dateStr);
+            if (isNaN(date.getTime()))
+                return '';
+            const now = new Date();
+            const diffInDays = Math.round((date.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
+            const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
+            return rtf.format(diffInDays, 'day');
+        }
+        catch {
+            return '';
+        }
+    }
+    applyZenithFiltering(val) {
+        let result = val;
+        if (this.noSpaces)
+            result = result.replace(/\s/g, '');
+        if (this.alphaOnly)
+            result = result.replace(/[^a-zA-Z]/g, '');
+        if (this.numericOnly)
+            result = result.replace(/[^0-9.]/g, '');
+        return result;
+    }
+    handleInput = (event) => {
+        const target = event.target;
+        let newValue = target.value;
+        newValue = this.applyZenithFiltering(newValue);
+        newValue = this.applyTextTransform(newValue);
+        target.value = newValue;
+        if (this.ghostText) {
+            if (newValue && this.ghostText.toLowerCase().startsWith(newValue.toLowerCase())) {
+                this.currentGhost = this.ghostText.slice(newValue.length);
+            }
+            else {
+                this.currentGhost = '';
+            }
+        }
+        if (this.allowedChars) {
+            const regex = new RegExp(this.allowedChars, 'g');
+            const matches = newValue.match(regex);
+            newValue = matches ? matches.join('') : '';
+            if (target.value !== newValue)
+                target.value = newValue;
+        }
+        if (this.type === 'number') {
+            newValue = newValue.replace(/(?!^-)[^0-9.]/g, '');
+            const parts = newValue.split('.');
+            if (parts.length > 2)
+                newValue = parts[0] + '.' + parts.slice(1).join('');
+            target.value = newValue;
+        }
+        if (this.parser)
+            newValue = this.parser(newValue);
+        if ((this.mask !== 'none' || this.type === 'currency') && this.type !== 'password') {
+            newValue = this.applyMask(newValue);
+            target.value = newValue;
+        }
+        if (this.type === 'range')
+            this.rangeValue = parseFloat(newValue);
+        if (this.type === 'file' && target instanceof HTMLInputElement && target.files) {
+            const files = Array.from(target.files);
+            this.selectedFileNames = files.map(f => f.name).join(', ');
+            this.fileSelected.emit(target.files);
+            return;
+        }
+        this.value = newValue;
+        this.currentLength = newValue.length;
+        if (this.validationTrigger === 'onInput') {
+            this.validate(newValue);
+        }
+        if (this.autoResize && this.multiline)
+            this.resizeTextarea();
+        if ((this.suggestions.length > 0 || this.autocompleteSuggestions.length > 0) && newValue) {
+            this.showSuggestions = true;
+            this.selectedSuggestionIndex = -1;
+        }
+        if (this.debounce > 0) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = setTimeout(() => {
+                this.inputChange.emit(this.value);
+                if (this.analyticsEvent)
+                    this.analyticsEvent.emit({ value: this.value });
+            }, this.debounce);
+        }
+        else {
+            this.inputChange.emit(this.value);
+            if (this.analyticsEvent)
+                this.analyticsEvent.emit({ value: this.value });
+        }
+    };
+    handleFocus = (event) => {
+        this.isFocused = true;
+        this.inputFocus.emit(event);
+        if ((this.autoSelect || this.selectOnClick) && this.inputElement) {
+            this.inputElement.select();
+        }
+    };
+    handleBlur = (event) => {
+        this.isFocused = false;
+        if (this.validationTrigger === 'onInput' || this.validationTrigger === 'onBlur') {
+            this.validate(this.value);
+        }
+        this.inputBlur.emit(event);
+        if (this.autoTrim && this.value) {
+            this.value = this.value.trim();
+            this.inputChange.emit(this.value);
+        }
+    };
+    handleRangeManualInput = (e) => {
+        const target = e.target;
+        const val = target.value;
+        const min = parseFloat(this.min) || 0;
+        const max = parseFloat(this.max) || 100;
+        let numericVal = parseFloat(val);
+        if (isNaN(numericVal))
+            return;
+        if (numericVal < min)
+            numericVal = min;
+        if (numericVal > max)
+            numericVal = max;
+        this.rangeValue = numericVal;
+        this.value = numericVal.toString();
+        this.inputChange.emit(this.value);
+    };
+    stepValue = (direction) => {
+        if (this.disabled || this.readonly || this.type !== 'number')
+            return;
+        const step = parseFloat(this.step) || 1;
+        const current = parseFloat(this.value) || 0;
+        const precision = (this.step?.toString().split('.')[1] || '').length;
+        let newValue = direction === 'up' ? current + step : current - step;
+        newValue = parseFloat(newValue.toFixed(precision));
+        if (this.min !== undefined)
+            newValue = Math.max(parseFloat(this.min), newValue);
+        if (this.max !== undefined)
+            newValue = Math.min(parseFloat(this.max), newValue);
+        this.value = newValue.toString();
+        this.inputChange.emit(this.value);
+    };
+    renderSteppers() {
+        if (this.type !== 'number' || !this.showSteppers || this.variant === 'plain' || this.variant === 'borderless')
+            return null;
+        return (h("div", { class: "stepper-controls" }, h("ui-button", { variant: "ghost", size: "xxs", iconOnly: true, onClick: () => this.stepValue('up'), disabled: this.disabled || this.readonly, tabIndex: -1, icon: "chevron-up", iconLibrary: "lucide", ariaLabel: "Increase value" }), h("ui-button", { variant: "ghost", size: "xxs", iconOnly: true, onClick: () => this.stepValue('down'), disabled: this.disabled || this.readonly, tabIndex: -1, icon: "chevron-down", iconLibrary: "lucide", ariaLabel: "Decrease value" })));
+    }
+    handleClear = () => {
+        this.value = '';
+        this.currentLength = 0;
+        this.inputChange.emit(this.value);
+        this.inputClear.emit();
+        if (this.inputElement)
+            this.inputElement.focus();
+    };
+    handleKeydown = (event) => {
+        if (this.type === 'password' && typeof event.getModifierState === 'function') {
+            this.capsLockOn = event.getModifierState("CapsLock");
+        }
+        if (this.showSuggestions && this.suggestions.length > 0) {
+            const filtered = this.getFilteredSuggestions();
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                this.selectedSuggestionIndex = Math.min(this.selectedSuggestionIndex + 1, filtered.length - 1);
+            }
+            else if (event.key === 'ArrowUp') {
+                event.preventDefault();
+                this.selectedSuggestionIndex = Math.max(this.selectedSuggestionIndex - 1, 0);
+            }
+            else if (event.key === 'Enter' && this.selectedSuggestionIndex >= 0) {
+                event.preventDefault();
+                this.selectSuggestion(filtered[this.selectedSuggestionIndex]);
+            }
+            else if (event.key === 'Escape') {
+                this.showSuggestions = false;
+                this.selectedSuggestionIndex = -1;
+            }
+        }
+        else if (event.key === 'Escape' && this.clearOnEscape) {
+            this.handleClear();
+        }
+        if (event.key === 'Enter' && this.type === 'search') {
+            this.search.emit(this.value);
+        }
+        this.inputKeydown.emit(event);
+    };
+    handleKeyup = (event) => {
+        if (this.type === 'password' && typeof event.getModifierState === 'function') {
+            this.capsLockOn = event.getModifierState("CapsLock");
+        }
+        this.inputKeyup.emit(event);
+    };
+    handleCopy = async () => {
+        if (this.value) {
+            try {
+                await navigator.clipboard.writeText(this.value);
+                this.inputCopy.emit(this.value);
+            }
+            catch (err) {
+                console.error('Failed to copy:', err);
+            }
+        }
+    };
+    selectSuggestion(suggestion) {
+        this.value = suggestion;
+        this.showSuggestions = false;
+        this.selectedSuggestionIndex = -1;
+        this.suggestionSelected.emit(suggestion);
+        this.inputChange.emit(suggestion);
+    }
+    getFilteredSuggestions() {
+        if (!this.suggestions || !Array.isArray(this.suggestions))
+            return [];
+        if (!this.value)
+            return this.suggestions;
+        const query = this.value.toLowerCase();
+        return this.suggestions.filter(s => s && typeof s === 'string' && s.toLowerCase().includes(query));
+    }
+    getCurrencyIcon() {
+        if (!this.currency)
+            return undefined;
+        const map = {
+            'USD': 'dollar-sign',
+            'EUR': 'euro',
+            'GBP': 'pound-sterling',
+            'JPY': 'japanese-yen',
+            'INR': 'indian-rupee',
+            'RUB': 'russian-ruble',
+            'ILS': 'shekel-sign'
+        };
+        return map[this.currency.toUpperCase()];
+    }
+    renderCurrencyText() {
+        try {
+            if (this.getCurrencyIcon())
+                return null;
+            const parts = new Intl.NumberFormat('en', { style: 'currency', currency: this.currency || 'USD' }).formatToParts(0);
+            const symbol = parts.find(p => p.type === 'currency')?.value || '$';
+            return h("span", { class: "prefix-text currency-text" }, symbol);
+        }
+        catch {
+            return h("span", { class: "prefix-text currency-text" }, this.currency || '$');
+        }
+    }
+    getValidationMessage() {
+        if (this.validationState === 'error')
+            return this.errorText || this.internalErrorText;
+        if (this.validationState === 'success')
+            return this.successText;
+        if (this.validationState === 'warning')
+            return this.warningText;
+        if (this.validationState === 'info')
+            return this.infoText;
+        return this.helperText;
+    }
+    renderPrefixIcon() {
+        let iconName = this.prefixIcon;
+        // Explicitly handle 'none' or 'false' — do NOT return for empty string:
+        // the type-icon block below may still assign an icon
+        if (iconName === 'none' || iconName === 'false')
+            return null;
+        if (!iconName && this.showTypeIcon && !this.prefixText) {
+            const typeIcons = {
+                'search': 'search',
+                'email': 'mail',
+                'tel': 'phone',
+                'url': 'link',
+                'number': 'hash',
+                'date': 'calendar',
+                'currency': this.getCurrencyIcon()
+            };
+            iconName = typeIcons[this.type] ?? '';
+        }
+        if (!iconName && this.type === 'currency')
+            return this.renderCurrencyText();
+        if (!iconName && this.mask === 'credit-card')
+            iconName = 'credit-card';
+        if (!iconName && this.type === 'color')
+            iconName = 'palette';
+        // For plain/borderless number inputs, we don't want the default hash icon
+        if (this.type === 'number' && (this.variant === 'plain' || this.variant === 'borderless') && !this.prefixIcon) {
+            return null;
+        }
+        const hasSlotContent = !!this.element.querySelector('[slot="prefix-icon"]');
+        if (!iconName && !hasSlotContent)
+            return null;
+        return (h("div", { class: {
+                'prefix-icon': true,
+                'prefix-icon--clickable': this.prefixClickable,
+                [`block-color-${this.prefixColor}`]: !!this.prefixColor
+            }, onClick: () => this.prefixClickable && this.prefixClick.emit(), role: this.prefixClickable ? 'button' : undefined, tabIndex: this.prefixClickable ? 0 : undefined, "aria-label": this.prefixClickable ? 'Prefix action' : undefined }, h("slot", { name: "prefix-icon" }, iconName && h("ui-icon", { library: "lucide", name: iconName, color: "currentColor" }))));
+    }
+    renderSuffixContent() {
+        const elements = [];
+        if (this.showClearButton) {
+            elements.push(h("ui-button", { variant: "ghost", size: "xxs", iconOnly: true, class: "clear-button", onClick: this.handleClear, ariaLabel: "Clear input", tabIndex: -1, icon: this.clearIcon, iconLibrary: "lucide" }));
+        }
+        if (this.type === 'password' && this.showPasswordToggle) {
+            const handleHoldStart = () => {
+                if (this.revealOnHold)
+                    this.isPasswordHeld = true;
+            };
+            const handleHoldEnd = () => {
+                if (this.revealOnHold)
+                    this.isPasswordHeld = false;
+            };
+            elements.push(h("ui-button", { variant: "ghost", size: "xxs", iconOnly: true, class: "password-toggle", onClick: () => !this.revealOnHold && (this.isPasswordVisible = !this.isPasswordVisible), onMouseDown: handleHoldStart, onMouseUp: handleHoldEnd, onMouseLeave: handleHoldEnd, onTouchStart: handleHoldStart, onTouchEnd: handleHoldEnd, ariaLabel: this.isPasswordVisible ? 'Hide password' : 'Show password', tabIndex: -1, icon: this.isPasswordVisible || this.isPasswordHeld ? this.passwordVisibleIcon : this.passwordIcon, iconLibrary: "lucide" }));
+        }
+        if (this.capsLockOn) {
+            elements.push(h("div", { class: "caps-lock-warning", title: "Caps Lock is ON" }, h("ui-icon", { library: "lucide", name: "arrow-big-up" })));
+        }
+        if (this.loading) {
+            elements.push(h("ui-icon", { library: "lucide", name: "loader-2", class: "loading-spinner", spin: true }));
+        }
+        if (this.showCopy) {
+            elements.push(h("ui-button", { variant: "ghost", size: "xxs", iconOnly: true, class: "copy-button", onClick: this.handleCopy, ariaLabel: "Copy to clipboard", icon: "copy", iconLibrary: "lucide" }));
+        }
+        if (this.showProgressCircle && this.maxLength) {
+            const percentage = Math.min((this.currentLength / this.maxLength) * 100, 100);
+            const radius = 9;
+            const circumference = 2 * Math.PI * radius;
+            const offset = circumference - (percentage / 100) * circumference;
+            elements.push(h("div", { class: "progress-circle-container", title: `${this.currentLength}/${this.maxLength}` }, h("svg", { class: "progress-circle-svg", viewBox: "0 0 24 24" }, h("circle", { class: "ring-track", cx: "12", cy: "12", r: radius }), h("circle", { class: "ring-fill", cx: "12", cy: "12", r: radius, style: { strokeDasharray: `${circumference}`, strokeDashoffset: `${offset}` } }))));
+        }
+        if (this.voiceEnabled || this.voiceInput) {
+            elements.push(h("ui-button", { variant: this.isRecording ? 'danger' : 'ghost', size: "xxs", iconOnly: true, class: { 'voice-button': true, 'is-recording': this.isRecording }, onClick: this.startVoiceRecognition, ariaLabel: this.isRecording ? 'Stop listening' : 'Start voice input', title: this.isRecording ? 'Listening… click to stop' : 'Click to speak', icon: this.isRecording ? 'mic-off' : 'mic', iconLibrary: "lucide" }));
+        }
+        if (this.shortcutHint) {
+            elements.push(h("div", { class: "shortcut-hint" }, this.shortcutHint));
+        }
+        const hasSuffixSlot = !!this.element.querySelector('[slot="suffix-icon"]');
+        if (this.suffixIcon || hasSuffixSlot) {
+            elements.push(h("div", { class: {
+                    'suffix-icon': true,
+                    'suffix-icon--clickable': this.suffixClickable,
+                    [`block-color-${this.suffixColor}`]: !!this.suffixColor
+                }, onClick: () => this.suffixClickable && this.suffixClick.emit(), role: this.suffixClickable ? 'button' : undefined, tabIndex: this.suffixClickable ? 0 : undefined, "aria-label": this.suffixClickable ? 'Suffix action' : undefined }, h("slot", { name: "suffix-icon" }, this.suffixIcon && h("ui-icon", { library: "lucide", name: this.suffixIcon, color: "currentColor" }))));
+        }
+        return elements.length > 0 ? elements : null;
+    }
+    renderLengthIndicator() {
+        if (!this.minLengthIndicator && !this.maxLengthIndicator)
+            return null;
+        const current = this.currentLength;
+        const min = this.minLengthIndicator || this.minLength || 0;
+        const max = this.maxLengthIndicator || this.maxLength || 0;
+        let status = 'normal';
+        if (min && current < min)
+            status = 'warning';
+        if (max && current > max)
+            status = 'error';
+        if (min && current >= min && max && current <= max)
+            status = 'success';
+        return (h("span", { class: `length-indicator ${status}` }, min && current < min && `${min - current} more characters needed`, max && `${current}/${max}`));
+    }
+    renderAutocomplete() {
+        const filtered = this.getFilteredSuggestions();
+        const items = this.autocompleteSuggestions.length > 0
+            ? this.autocompleteSuggestions
+            : filtered.map(s => ({ text: s, subtitle: undefined, icon: undefined }));
+        if (!this.showSuggestions || items.length === 0)
+            return null;
+        return (h("div", { class: "autocomplete-dropdown", exportparts: "dropdown" }, items.map((item, index) => {
+            if (!item)
+                return null;
+            return (h("div", { class: { 'autocomplete-item': true, 'active': index === this.selectedSuggestionIndex }, onClick: () => this.selectSuggestion(item.text) }, item.icon && h("ui-icon", { library: "lucide", name: item.icon, class: "suggestion-icon" }), h("div", { class: "suggestion-text-block" }, h("span", { class: "suggestion-main-text" }, this.highlightTextMatches(item.text)), item.subtitle && h("span", { class: "suggestion-subtitle" }, item.subtitle))));
+        })));
+    }
+    render() {
+        const isColor = this.type === 'color';
+        const isFile = this.type === 'file';
+        const isOtp = this.type === 'otp' || this.type === 'pin';
+        const inputType = (this.isPasswordVisible || this.isPasswordHeld) || isColor || isFile ? 'text' : this.type;
+        const validationMessage = this.getValidationMessage();
+        const isCustomColor = this.color && !STANDARD_COLORS.includes(this.color);
+        const hostStyles = {
+            ...(isCustomColor ? { '--ui-custom-color': this.color, '--ui-custom-color-rgb': hexToRgb(this.color) } : {}),
+            '--ui-input-width': this.width
+        };
+        const hasRealPrefix = !!((this.prefixIcon && this.prefixIcon !== 'none' && this.prefixIcon !== 'false') || this.prefixText || (this.showTypeIcon && ['search', 'email', 'tel', 'url', 'number', 'date', 'currency'].includes(this.type) && !this.prefixIcon && !this.prefixText && this.variant !== 'plain' && this.variant !== 'borderless') || isColor || this.type === 'currency');
+        const hasRealSuffix = !!((this.suffixIcon && this.suffixIcon !== 'none' && this.suffixIcon !== 'false') || this.suffixText || this.showClear || this.type === 'search' || (this.type === 'password' && this.showPasswordToggle) || this.loading || this.showCopy || this.voiceInput || this.shortcutHint);
+        const inputClasses = {
+            'input-wrapper': true,
+            'focused': this.isFocused,
+            'disabled': this.disabled,
+            'readonly': this.readonly,
+            'has-value': !!this.value,
+            'has-prefix': hasRealPrefix,
+            'has-suffix': hasRealSuffix,
+            'multiline': this.multiline,
+            'full-width': this.fullWidth,
+            'shake-animation': this.shake,
+            'gradient-decorators': this.gradientDecorators,
+            'is-always-floated': this.alwaysFloated,
+            'is-success-pulse': this.successPulse && this.validationState === 'success',
+            'is-skeleton': this.skeleton,
+            [`variant-${this.variant}`]: true,
+            [`size-${this.size}`]: true,
+            [`density-${this.density}`]: true,
+            'is-otp': isOtp,
+            'has-gradient-border': this.gradientBorder,
+            'has-backdrop-sheen': this.backdropSheen,
+        };
+        const commonProps = {
+            ref: (el) => (this.inputElement = el),
+            class: 'input-field',
+            placeholder: (this.floatingLabel && !this.isFocused && !this.value) ? '' : (this.placeholder || this.getMaskPlaceholder()),
+            disabled: this.disabled,
+            readonly: this.readonly,
+            required: this.required,
+            autocomplete: this.autocomplete,
+            maxlength: isOtp ? this.otpLength : this.maxLength,
+            name: this.name,
+            id: this.inputId,
+            autofocus: this.autofocus,
+            onInput: this.handleInput,
+            onFocus: this.handleFocus,
+            onBlur: this.handleBlur,
+            onKeyDown: this.handleKeydown,
+            onKeyUp: this.handleKeyup,
+        };
+        return (h(Host, { key: 'e4063f1d2456a41e57309506da2b79f1bbf518bd', class: {
+                [`variant-${this.variant}`]: true,
+                [`size-${this.size}`]: true,
+                'full-width': this.fullWidth,
+                [`has-${this.validationState}`]: this.validationState !== 'none',
+                [`input-color-${isCustomColor ? 'custom' : this.color}`]: true,
+                'shake-animation': this.shake,
+                'focused': this.isFocused,
+            }, style: hostStyles }, h("div", { key: '7fd5939b576307e8285e5f53c91a7fc969617fa0', class: { ...inputClasses, 'input-ripple': this.rippleEffect } }, this.label && !this.floatingLabel && !isOtp && h("label", { key: '0fa810d3e66f3d224340d93006df75b63f528912', class: "input-label" }, this.label, this.required && '*'), h("div", { key: 'e2c21f6e14645a1fce1e6de5b1500ba41e04b115', class: "input-container", onMouseDown: this.handleMouseDown, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("div", { key: '73c7397d9d57c3effd34b6dab5bac043da68a78f', class: "clipping-layer" }, this.showRipple && h("div", { key: 'dc23482a5f56c51605911625605285451225ca81', class: "liquid-ripple", style: { left: `${this.rippleX}px`, top: `${this.rippleY}px` } }), this.linearLoading && h("div", { key: 'a10a205c11a4dc9468d709148ab713f5a927699b', class: "linear-loading-bar" }), this.backdropSheen && h("div", { key: '1d09a9fd9aa04999bc56186fec1be51f963f0e3d', class: "backdrop-sheen-effect" })), this.renderAutocomplete(), (this.badge || (this.dirtyTracking && this.isDirty)) && (h("span", { key: '8b6b915bbf616387f937e25b73c15cd4f42694c3', class: `input-badge ${!this.badge ? 'dot-mode' : ''}` }, this.badge || '')), this.renderPrefixIcon(), this.floatingLabel && !isOtp && h("label", { key: '36418949fb5a3613f3c56517db0b2ba52e74d1d0', class: "floating-label" }, this.label, this.required && '*'), this.multiline ? (h("textarea", { ...commonProps, style: { resize: this.autoResize ? 'none' : this.resize }, value: this.value })) : isOtp ? (h("div", { class: "otp-container" }, Array.from({ length: this.otpLength }).map((_, i) => (h("div", { class: { 'otp-box': true, 'filled': this.value.length > i, 'active': this.value.length === i && this.isFocused } }, this.value[i] || ''))), h("input", { ...commonProps, style: { opacity: '0', position: 'absolute', inset: '0', caretColor: 'transparent' } }))) : this.type === 'range' ? (h("div", { class: "range-input-wrapper", style: { '--range-progress': `${this.getRangePercentage()}%` } }, h("input", { ...commonProps, type: "range", value: this.rangeValue, min: this.min || 0, max: this.max || 100, step: this.step || 1 }), h("div", { class: "range-manual-adornment" }, h("input", { type: "number", class: "range-manual-input", value: this.rangeValue, min: this.min || 0, max: this.max || 100, step: this.step || 1, onInput: this.handleRangeManualInput })))) : (h("div", { class: "input-field-stack" }, h("input", { ...commonProps, type: inputType, value: isFile ? this.selectedFileNames : this.value }), this.currentGhost && h("span", { class: "ghost-text-overlay", onClick: () => (this.value = this.ghostText) }, this.currentGhost))), isColor && (h("input", { key: '71f29e41543ada3bb27402ec955ce17172866c35', type: "color", style: { opacity: '0', position: 'absolute', inset: '0', pointerEvents: 'none' }, value: this.value || '#000000', onInput: (e) => { this.value = e.target.value; this.inputChange.emit(this.value); }, ref: (el) => (this.colorPickerElement = el) })), isFile && (h("input", { key: 'f11732d7b0a60588b2d3fc74525cecb63c494a0d', type: "file", style: { opacity: '0', position: 'absolute', inset: '0', cursor: 'pointer', zIndex: '1' }, accept: this.accept, multiple: this.multiple, onInput: this.handleInput, ref: (el) => (this.filePickerElement = el) })), this.suffixText && h("span", { key: '5daa65c5274948ca30e12f9d305b5ed36aca27b9', class: { 'suffix-text': true, [`block-color-${this.suffixColor}`]: !!this.suffixColor } }, this.suffixText), (this.statusIndicator !== 'none' || this.isRecording || this._voiceOffLabel) && (h("div", { key: 'f0a15ca443598eccff24608f24e03f6b6c524409', class: `status-indicator status-${this.isRecording ? 'listening' : this._voiceOffLabel ? 'offline' : this.statusIndicator}` }, !this.voiceEnabled && !this.voiceInput && (this.statusIndicator === 'listening' || this.isRecording) && (h("ui-icon", { key: '3debcf72af06dab5cd5ab03f9e81793cde4c0a95', library: "lucide", name: "mic", class: "mic-pulse" })), this.statusIndicator !== 'listening' && !this.isRecording && !this._voiceOffLabel && (h("span", { key: '440b5c5cad18a6b7cd0de8c04dd0f49ae35db124', class: "status-dot" })), h("span", { key: 'bffc20acbaf070199bef467cefa3c25adc328221', class: "status-label" }, this.isRecording
+            ? 'Listening'
+            : this._voiceOffLabel
+                ? 'Not listening'
+                : this.statusIndicator !== 'none'
+                    ? this.statusIndicator.charAt(0).toUpperCase() + this.statusIndicator.slice(1)
+                    : null), this.statusIndicator === 'typing' && h("span", { key: '19262bd829f945fd203266ea67c248a94a775f71', class: "typing-animation" }, h("span", { key: '769cbdde9e871c0fefa37466f5189bd4b95f04c9' }), h("span", { key: 'ada0306edd6f3f942e0d0258b820f3d425278654' }), h("span", { key: '687a023614358579750b5f493ad2bb8511ef2910' })))), this.renderSuffixContent(), this.renderSteppers(), this.hintTooltip && h("div", { key: '86d50262507a075bd68ea71fabcf4914d6a118e3', class: "hint-tooltip-icon", title: this.hintTooltip }, h("ui-icon", { key: 'e5590e7a20808a41bdfc3719e00b9e5ad2fc4a1d', library: "lucide", name: "help-circle" }))), (validationMessage || this.showCounter || this.minLengthIndicator || this.maxLengthIndicator || (this.type === 'password' && this.value && this.showPasswordStrength)) && (h("div", { key: '9479bdd436afd44ee5b05dfc99bd6ce84379f058', class: "input-footer" }, this.type === 'password' && this.value && this.showPasswordStrength && (h("div", { key: '0ea62a19ed66dc33e98a3aba4a63c62589fb560e', class: "password-strength-meter" }, h("div", { key: '3564a2205d7ade940909e12ef18b3ec71c06b583', class: `strength-bar strength-${this.passwordStrength}` }))), validationMessage && (h("span", { key: '4015b4eb68d7045a4447df795debefa080acd854', class: `helper-text ${this.validationState !== 'none' ? this.validationState + '-text' : ''}` }, this.validationState === 'error' && h("ui-icon", { key: 'bb9a04f2f7b577d9d797e574263fc96800e7184a', library: "lucide", name: "alert-circle", class: "validation-icon" }), this.validationState === 'warning' && h("ui-icon", { key: '2e756012a47e39f76472cd21497c692cb2cb66fa', library: "lucide", name: "alert-triangle", class: "validation-icon" }), this.validationState === 'success' && h("ui-icon", { key: '66d61660c177e1f4fece47bf7433c37045a13506', library: "lucide", name: "check-circle-2", class: "validation-icon" }), this.validationState === 'info' && h("ui-icon", { key: '6e41af71dd9abacd6f58e386297d023294dff819', library: "lucide", name: "info", class: "validation-icon" }), validationMessage)), this.relativeTime && this.type === 'date' && this.value && (h("span", { key: 'ac8f3dae2f0aa149cf6394e7683599a6a3e4505e', class: "relative-time-overlay" }, this.getRelativeTimeString(this.value))), this.showCounter && this.maxLength && h("span", { key: '5226cbf5034a58151a46c687180616246c9039d9', class: "character-counter" }, this.currentLength, "/", this.maxLength), this.renderLengthIndicator())))));
+    }
+    static get is() { return "ui-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "badge": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StatusColor",
+                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "references": {
+                        "StatusColor": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/input/types.ts::StatusColor",
+                            "referenceLocation": "StatusColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'primary'"
+            },
+            "prefixColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StatusColor",
+                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "references": {
+                        "StatusColor": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/input/types.ts::StatusColor",
+                            "referenceLocation": "StatusColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "prefix-color"
+            },
+            "suffixColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StatusColor",
+                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "references": {
+                        "StatusColor": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/input/types.ts::StatusColor",
+                            "referenceLocation": "StatusColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "suffix-color"
+            },
+            "gradientDecorators": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gradient-decorators",
+                "defaultValue": "false"
+            },
+            "rippleEffect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ripple-effect",
+                "defaultValue": "true"
+            },
+            "linearLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "linear-loading",
+                "defaultValue": "false"
+            },
+            "hintTooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hint-tooltip",
+                "defaultValue": "''"
+            },
+            "successPulse": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "success-pulse",
+                "defaultValue": "false"
+            },
+            "alwaysFloated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "always-floated",
+                "defaultValue": "false"
+            },
+            "shakeOnError": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shake-on-error",
+                "defaultValue": "false"
+            },
+            "maxRows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-rows",
+                "defaultValue": "5"
+            },
+            "autocompleteSuggestions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<{ text: string; subtitle?: string; icon?: string; value?: any }>",
+                    "resolved": "{ text: string; subtitle?: string; icon?: string; value?: any; }[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "voiceInput": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "voice-input",
+                "defaultValue": "false"
+            },
+            "shortcutHint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shortcut-hint",
+                "defaultValue": "''"
+            },
+            "textTransform": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'uppercase' | 'lowercase' | 'capitalize' | 'pascal' | 'words' | 'sentences'",
+                    "resolved": "\"capitalize\" | \"lowercase\" | \"none\" | \"pascal\" | \"sentences\" | \"uppercase\" | \"words\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-transform",
+                "defaultValue": "'none'"
+            },
+            "relativeTime": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "relative-time",
+                "defaultValue": "false"
+            },
+            "highlightMatches": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "highlight-matches",
+                "defaultValue": "true"
+            },
+            "dropZone": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "drop-zone",
+                "defaultValue": "false"
+            },
+            "ghostText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ghost-text",
+                "defaultValue": "''"
+            },
+            "revealOnHold": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reveal-on-hold",
+                "defaultValue": "false"
+            },
+            "noSpaces": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "no-spaces",
+                "defaultValue": "false"
+            },
+            "alphaOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alpha-only",
+                "defaultValue": "false"
+            },
+            "numericOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "numeric-only",
+                "defaultValue": "false"
+            },
+            "showPasswordStrength": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-password-strength",
+                "defaultValue": "false"
+            },
+            "showProgressCircle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-progress-circle",
+                "defaultValue": "false"
+            },
+            "dirtyTracking": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dirty-tracking",
+                "defaultValue": "false"
+            },
+            "defaultValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-value",
+                "defaultValue": "''"
+            },
+            "otpLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "otp-length",
+                "defaultValue": "6"
+            },
+            "voiceEnabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "voice-enabled",
+                "defaultValue": "false"
+            },
+            "statusIndicator": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'online' | 'offline' | 'typing' | 'away' | 'listening'",
+                    "resolved": "\"away\" | \"listening\" | \"none\" | \"offline\" | \"online\" | \"typing\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status-indicator",
+                "defaultValue": "'none'"
+            },
+            "validationTrigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'onInput' | 'onBlur' | 'manual'",
+                    "resolved": "\"manual\" | \"onBlur\" | \"onInput\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "validation-trigger",
+                "defaultValue": "'onInput'"
+            },
+            "gradientBorder": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gradient-border",
+                "defaultValue": "false"
+            },
+            "backdropSheen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "backdrop-sheen",
+                "defaultValue": "false"
+            },
+            "customClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-class"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputType",
+                    "resolved": "\"color\" | \"currency\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"month\" | \"number\" | \"otp\" | \"password\" | \"pin\" | \"range\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"voice\" | \"week\"",
+                    "references": {
+                        "InputType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/input/types.ts::InputType",
+                            "referenceLocation": "InputType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'text'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputVariant",
+                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
+                    "references": {
+                        "InputVariant": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/input/types.ts::InputVariant",
+                            "referenceLocation": "InputVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'outlined'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputSize",
+                    "resolved": "\"default\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\" | \"xxxl\" | \"xxxs\"",
+                    "references": {
+                        "InputSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/input/types.ts::InputSize",
+                            "referenceLocation": "InputSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text",
+                "defaultValue": "''"
+            },
+            "errorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-text",
+                "defaultValue": "''"
+            },
+            "successText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "success-text",
+                "defaultValue": "''"
+            },
+            "warningText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "warning-text",
+                "defaultValue": "''"
+            },
+            "infoText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "info-text",
+                "defaultValue": "''"
+            },
+            "validationState": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "ValidationState",
+                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"dirty\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"typing\" | \"warning\"",
+                    "references": {
+                        "ValidationState": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/input/types.ts::ValidationState",
+                            "referenceLocation": "ValidationState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "validation-state",
+                "defaultValue": "'none'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "multiline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiline",
+                "defaultValue": "false"
+            },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows",
+                "defaultValue": "3"
+            },
+            "autoResize": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-resize",
+                "defaultValue": "false"
+            },
+            "minRows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-rows"
+            },
+            "cols": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cols"
+            },
+            "maxLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-length"
+            },
+            "minLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-length"
+            },
+            "showCounter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-counter",
+                "defaultValue": "false"
+            },
+            "showClear": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-clear",
+                "defaultValue": "false"
+            },
+            "showPasswordToggle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-password-toggle",
+                "defaultValue": "true"
+            },
+            "prefixIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "prefix-icon",
+                "defaultValue": "''"
+            },
+            "suffixIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "suffix-icon",
+                "defaultValue": "''"
+            },
+            "prefixText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "prefix-text",
+                "defaultValue": "''"
+            },
+            "suffixText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "suffix-text",
+                "defaultValue": "''"
+            },
+            "floatingLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "floating-label",
+                "defaultValue": "false"
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete",
+                "defaultValue": "'off'"
+            },
+            "min": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min"
+            },
+            "max": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
+            },
+            "step": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step"
+            },
+            "pattern": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pattern"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-id"
+            },
+            "debounce": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "debounce",
+                "defaultValue": "0"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "autofocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autofocus",
+                "defaultValue": "false"
+            },
+            "customTabIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-tab-index"
+            },
+            "showCopy": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-copy",
+                "defaultValue": "false"
+            },
+            "density": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'standard' | 'cozy' | 'compact'",
+                    "resolved": "\"compact\" | \"cozy\" | \"standard\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "density",
+                "defaultValue": "'standard'"
+            },
+            "showDividers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-dividers",
+                "defaultValue": "false"
+            },
+            "mask": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputMask",
+                    "resolved": "\"credit-card\" | \"currency\" | \"date\" | \"none\" | \"phone\" | \"ssn\" | \"zip\"",
+                    "references": {
+                        "InputMask": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/input/types.ts::InputMask",
+                            "referenceLocation": "InputMask"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mask",
+                "defaultValue": "'none'"
+            },
+            "currency": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "currency",
+                "defaultValue": "'USD'"
+            },
+            "accept": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accept"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "minLengthIndicator": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-length-indicator"
+            },
+            "maxLengthIndicator": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-length-indicator"
+            },
+            "tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tooltip"
+            },
+            "suggestions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "inputmode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'",
+                    "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "inputmode"
+            },
+            "clearIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clear-icon",
+                "defaultValue": "'x-circle'"
+            },
+            "showSteppers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-steppers",
+                "defaultValue": "false"
+            },
+            "showTypeIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-type-icon",
+                "defaultValue": "true"
+            },
+            "formatter": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(value: string) => string",
+                    "resolved": "(value: string) => string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "parser": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(value: string) => string",
+                    "resolved": "(value: string) => string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "autoSelect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-select",
+                "defaultValue": "false"
+            },
+            "autoTrim": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-trim",
+                "defaultValue": "false"
+            },
+            "rtl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rtl",
+                "defaultValue": "false"
+            },
+            "passwordStrengthCalculator": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(password: string) => number",
+                    "resolved": "(password: string) => number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "resize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | Orientation | 'both'",
+                    "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"",
+                    "references": {
+                        "Orientation": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::Orientation",
+                            "referenceLocation": "Orientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "resize",
+                "defaultValue": "'vertical'"
+            },
+            "enterkeyhint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'",
+                    "resolved": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enterkeyhint"
+            },
+            "passwordIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "password-icon",
+                "defaultValue": "'eye'"
+            },
+            "passwordVisibleIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "password-visible-icon",
+                "defaultValue": "'eye-off'"
+            },
+            "skeleton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "skeleton",
+                "defaultValue": "false"
+            },
+            "prefixClickable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "prefix-clickable",
+                "defaultValue": "false"
+            },
+            "suffixClickable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "suffix-clickable",
+                "defaultValue": "false"
+            },
+            "allowedChars": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allowed-chars",
+                "defaultValue": "''"
+            },
+            "blockInvalidPaste": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "block-invalid-paste",
+                "defaultValue": "false"
+            },
+            "customMask": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-mask",
+                "defaultValue": "''"
+            },
+            "selectOnClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "select-on-click",
+                "defaultValue": "false"
+            },
+            "clearOnEscape": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clear-on-escape",
+                "defaultValue": "true"
+            },
+            "autoCapitalize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'sentences' | 'words' | 'characters'",
+                    "resolved": "\"characters\" | \"none\" | \"sentences\" | \"words\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-capitalize",
+                "defaultValue": "'none'"
+            },
+            "shake": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shake",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isPasswordHeld": {},
+            "currentGhost": {},
+            "isDirty": {},
+            "isRecording": {},
+            "isDragging": {},
+            "rippleX": {},
+            "rippleY": {},
+            "showRipple": {},
+            "showClearButton": {},
+            "isFocused": {},
+            "isPasswordVisible": {},
+            "currentLength": {},
+            "showSuggestions": {},
+            "selectedSuggestionIndex": {},
+            "rangeValue": {},
+            "passwordStrength": {},
+            "capsLockOn": {},
+            "selectedFileNames": {},
+            "internalErrorText": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "analyticsEvent",
+                "name": "analyticsEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "inputChange",
+                "name": "inputChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "inputFocus",
+                "name": "inputFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "inputBlur",
+                "name": "inputBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "inputClear",
+                "name": "inputClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "inputKeydown",
+                "name": "inputKeydown",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "KeyboardEvent",
+                    "resolved": "KeyboardEvent",
+                    "references": {
+                        "KeyboardEvent": {
+                            "location": "global",
+                            "id": "global::KeyboardEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "inputKeyup",
+                "name": "inputKeyup",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "KeyboardEvent",
+                    "resolved": "KeyboardEvent",
+                    "references": {
+                        "KeyboardEvent": {
+                            "location": "global",
+                            "id": "global::KeyboardEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "inputCopy",
+                "name": "inputCopy",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "fileSelected",
+                "name": "fileSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "FileList",
+                    "resolved": "FileList",
+                    "references": {
+                        "FileList": {
+                            "location": "global",
+                            "id": "global::FileList"
+                        }
+                    }
+                }
+            }, {
+                "method": "suggestionSelected",
+                "name": "suggestionSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "prefixClick",
+                "name": "prefixClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "suffixClick",
+                "name": "suffixClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "search",
+                "name": "search",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "inputInput",
+                "name": "inputInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "focusInternal",
+                "name": "focusInternal",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "pasteInternal",
+                "name": "pasteInternal",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ClipboardEvent",
+                    "resolved": "ClipboardEvent",
+                    "references": {
+                        "ClipboardEvent": {
+                            "location": "global",
+                            "id": "global::ClipboardEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "wheelInternal",
+                "name": "wheelInternal",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "WheelEvent",
+                    "resolved": "WheelEvent",
+                    "references": {
+                        "WheelEvent": {
+                            "location": "global",
+                            "id": "global::WheelEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "openFilePicker": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "openColorPicker": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }, {
+                "propName": "validationState",
+                "methodName": "handleValidationStateChange"
+            }, {
+                "propName": "shake",
+                "methodName": "handleShakeChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}