tyrell-components 1.0.0-RC13 → 1.0.0-RC15

package/lib/components/input.js

@@ -1,19 +1,4 @@
-/**
- * TyInput Web Component
- * PORTED FROM: clj/ty/components/input.cljs
- * Phase D: Complete with debounce feature for input and change events
- *
- * Enhanced input component with:
- * - Label, error messages, semantic styling
- * - Icon slots (start/end)
- * - Numeric formatting with shadow values
- * - Currency, percent, compact notation
- * - Format-on-blur / raw-on-focus behavior
- * - Debounce (0-5000ms) for input/change events
- * - Immediate event firing on blur (cancels pending debounce)
- *
- * NOTE: Checkbox functionality is in separate ty-checkbox component
- */
+import { DEFAULT_SIZE } from '../types/common.js';
 import { TyComponent } from '../base/ty-component.js';
 import { ensureStyles } from '../utils/styles.js';
 import { syncCustomFlavorSheet } from '../utils/flavor-sheet.js';
@@ -21,780 +6,604 @@ import { inputStyles, inputCustomFlavorCss } from '../styles/input.js';
 import { formatNumber, parseNumericValue, shouldFormat as shouldFormatType } from '../utils/number-format.js';
 import { getEffectiveLocale, observeLocaleChanges } from '../utils/locale.js';
 import { REQUIRED_ICON_SVG } from '../utils/icons.js';
-/** Password reveal toggle icons (Lucide eye / eye-off) */
 const EYE_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>`;
 const EYE_OFF_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>`;
 export class TyInput extends TyComponent {
-    constructor() {
-        super(); // TyComponent handles attachInternals() and attachShadow()
-        // ============================================================================
-        // INTERNAL STATE - Not managed by PropertyManager
-        // NOTE: _internals provided by TyComponent base class
-        // ============================================================================
-        // Shadow value - parsed numeric value for formatting
-        this._shadowValue = null;
-        // Focus state - toggles format/raw display
-        this._isFocused = false;
-        // Listener setup tracking
-        this._listenersSetup = false;
-        // True when WE auto-set flavor to 'danger' because `error` was present, so we
-        // know to restore 'neutral' when the error clears (and not clobber a flavor
-        // the consumer set themselves).
-        this._errorAutoDanger = false;
-        this._customFlavorSheet = null;
-        // Store references to handlers for cleanup
-        this._inputHandler = null;
-        this._changeHandler = null;
-        this._focusHandler = null;
-        this._blurHandler = null;
-        // Debounce timers
-        this._inputDebounceTimer = null;
-        this._changeDebounceTimer = null;
-        // Apply styles to shadow root
-        const shadow = this.shadowRoot;
-        ensureStyles(shadow, { css: inputStyles, id: 'ty-input' });
-    }
-    /**
-     * Called when component connects to DOM
-     * TyComponent already handled pre-connection property capture
-     */
-    onConnect() {
-        // Initialize shadow value from current value property
-        this.initializeShadowValue();
-        // NOTE: Event listeners are set up in render() after input element is created
-        // setupEventListeners() will be called after initial render
-        // Setup locale observer to watch for ancestor lang changes
-        this._localeObserver = observeLocaleChanges(this, () => {
-            this.render();
-        });
-        this._syncCustomFlavor();
-    }
-    /** Custom (non-built-in) flavors — see utils/flavor-sheet.ts. */
-    _syncCustomFlavor() {
-        this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.flavor, ({ base }) => inputCustomFlavorCss(base));
-    }
-    /**
-     * Called when component disconnects from DOM
-     */
-    onDisconnect() {
-        // Clean up event listeners
-        this.removeEventListeners();
-        // Cleanup locale observer
-        if (this._localeObserver) {
-            this._localeObserver();
-            this._localeObserver = undefined;
-        }
-        // Clear any pending debounce timers
-        if (this._inputDebounceTimer !== null) {
-            clearTimeout(this._inputDebounceTimer);
-            this._inputDebounceTimer = null;
-        }
-        if (this._changeDebounceTimer !== null) {
-            clearTimeout(this._changeDebounceTimer);
-            this._changeDebounceTimer = null;
-        }
-    }
-    // ============================================================================
-    // TYCOMPONENT LIFECYCLE HOOKS
-    // ============================================================================
-    /**
-     * Handle property changes - called BEFORE render
-     * This replaces the old attributeChangedCallback logic
-     */
-    onPropertiesChanged(changes) {
-        for (const { name, newValue } of changes) {
-            switch (name) {
-                case 'flavor':
-                    this._syncCustomFlavor();
-                    break;
-                case 'value':
-                    // Parse to shadow value for numeric types
-                    this._shadowValue = this.parseShadowValue(newValue || '');
-                    break;
-                case 'type':
-                    // Re-parse shadow value when type changes
-                    const currentValue = this.getProperty('value') || '';
-                    this._shadowValue = this.parseShadowValue(currentValue);
-                    break;
-                case 'error':
-                    if (newValue) {
-                        // Auto-set flavor to danger when an error appears on a neutral field
-                        if (this.getProperty('flavor') === 'neutral') {
-                            this.setProperty('flavor', 'danger');
-                            this._errorAutoDanger = true;
-                        }
-                    }
-                    else if (this._errorAutoDanger) {
-                        // Error cleared and WE were the ones who set danger → restore neutral
-                        // (live validation passing should drop the danger styling).
-                        if (this.getProperty('flavor') === 'danger') {
-                            this.setProperty('flavor', 'neutral');
-                        }
-                        this._errorAutoDanger = false;
-                    }
-                    break;
-            }
-        }
-    }
-    /**
-     * Hook: Called when form is reset
-     * Clear shadow value and focus state
-     */
-    onFormReset() {
-        // Reset shadow value to default (empty)
-        this._shadowValue = null;
-        // Reset focus state
-        this._isFocused = false;
-        // Clear any pending debounce timers
-        if (this._inputDebounceTimer !== null) {
-            clearTimeout(this._inputDebounceTimer);
-            this._inputDebounceTimer = null;
-        }
-        if (this._changeDebounceTimer !== null) {
-            clearTimeout(this._changeDebounceTimer);
-            this._changeDebounceTimer = null;
-        }
-        this.render();
-    }
-    /**
-     * Override form value to return shadow value
-     * This ensures numeric types submit their parsed values
-     */
-    getFormValue() {
-        const formValue = this._shadowValue !== null ? String(this._shadowValue) : null;
-        return formValue;
-    }
-    /**
-     * Initialize shadow value from the initial value attribute
-     */
-    initializeShadowValue() {
-        const currentValue = this.getProperty('value');
-        if (currentValue) {
-            this._shadowValue = this.parseShadowValue(currentValue);
-            // Update form value
-            this._internals.setFormValue(this._shadowValue !== null ? String(this._shadowValue) : null);
-        }
-    }
-    /**
-     * Parse a string value to the appropriate shadow value type
-     */
-    parseShadowValue(value) {
-        // Defensive check: ensure value is actually a string before calling .trim()
-        if (!value || typeof value !== 'string' || value.trim() === '')
-            return null;
-        // For numeric types, parse to number
-        if (shouldFormatType(this.type)) {
-            const parsed = parseNumericValue(value);
-            if (parsed !== null && this.precision === 0) {
-                return Math.round(parsed);
-            }
-            return parsed;
-        }
-        // For other types, keep as string
-        return value;
-    }
-    /**
-     * Check if current input should format numbers
-     */
-    shouldFormat() {
-        return shouldFormatType(this.type) &&
-            !this._isFocused &&
-            this._shadowValue !== null &&
-            typeof this._shadowValue === 'number';
-    }
-    /**
-     * Get the format configuration for current input
-     */
-    getFormatConfig() {
-        return {
-            type: this.type,
-            locale: this.locale, // Use getter which calls getEffectiveLocale correctly
-            currency: this.currency,
-            precision: this.precision
-        };
-    }
-    /**
-     * Get the display value (formatted or raw)
-     */
-    getDisplayValue() {
-        if (this.shouldFormat()) {
-            let valueToFormat = this._shadowValue;
-            // For percent: divide by 100 (user enters 15, displays as 15%)
-            // This matches ClojureScript behavior
-            if (this.type === 'percent') {
-                valueToFormat = valueToFormat / 100;
-            }
-            return formatNumber(valueToFormat, this.getFormatConfig());
-        }
-        return this._shadowValue !== null ? String(this._shadowValue) : '';
-    }
-    // ============================================================================
-    // PROPERTY ACCESSORS - Simplified with TyComponent
-    // NOTE: validateFlavor removed - now handled by property configuration
-    // ============================================================================
-    // Core properties - simple getProperty/setProperty pattern
-    get type() { return this.getProperty('type'); }
-    set type(v) { this.setProperty('type', v); }
-    // Value - special getter returns shadow value
-    get value() {
-        return this._shadowValue !== null ? String(this._shadowValue) : '';
-    }
-    set value(v) { this.setProperty('value', v); }
-    get name() { return this.getProperty('name'); }
-    set name(v) { this.setProperty('name', v); }
-    get placeholder() { return this.getProperty('placeholder'); }
-    set placeholder(v) { this.setProperty('placeholder', v); }
-    get label() { return this.getProperty('label'); }
-    set label(v) { this.setProperty('label', v); }
-    get disabled() { return this.getProperty('disabled'); }
-    set disabled(v) { this.setProperty('disabled', v); }
-    get required() { return this.getProperty('required'); }
-    set required(v) { this.setProperty('required', v); }
-    get error() { return this.getProperty('error'); }
-    set error(v) { this.setProperty('error', v); }
-    get size() { return this.getProperty('size'); }
-    set size(v) { this.setProperty('size', v); }
-    get flavor() { return this.getProperty('flavor'); }
-    set flavor(v) { this.setProperty('flavor', v); }
-    // Numeric formatting properties
-    get currency() { return this.getProperty('currency'); }
-    set currency(v) { this.setProperty('currency', v); }
-    // Locale - special getter uses getEffectiveLocale()
-    get locale() {
-        return getEffectiveLocale(this, this.getProperty('locale'));
-    }
-    set locale(v) { this.setProperty('locale', v); }
-    get precision() { return this.getProperty('precision'); }
-    set precision(v) { this.setProperty('precision', v); }
-    // Debounce property
-    get debounce() { return this.getProperty('debounce'); }
-    set debounce(v) { this.setProperty('debounce', v); }
-    // Form property
-    get form() {
-        return this._internals.form;
-    }
-    /**
-     * Build CSS class list for input wrapper
-     */
-    buildClassList() {
-        const classes = [this.size];
-        if (this.disabled)
-            classes.push('disabled');
-        if (this.required)
-            classes.push('required');
-        if (this.error)
-            classes.push('error');
-        return classes.join(' ');
-    }
-    /**
-     * Dispatch input event (helper method for debouncing)
-     */
-    dispatchInputEvent(rawValue, originalEvent) {
-        this.dispatchEvent(new CustomEvent('input', {
-            detail: {
-                value: this._shadowValue,
-                formattedValue: this.shouldFormat() ? this.getDisplayValue() : null,
-                rawValue: rawValue,
-                originalEvent: originalEvent
-            },
-            bubbles: true,
-            composed: true
-        }));
-    }
-    /**
-     * Dispatch change event (helper method for debouncing)
-     */
-    dispatchChangeEvent(rawValue, originalEvent) {
-        this.dispatchEvent(new CustomEvent('change', {
-            detail: {
-                value: this._shadowValue,
-                formattedValue: this.shouldFormat() ? this.getDisplayValue() : null,
-                rawValue: rawValue,
-                originalEvent: originalEvent
-            },
-            bubbles: true,
-            composed: true
-        }));
-    }
-    /**
-     * Remove event listeners for cleanup
-     */
-    removeEventListeners() {
-        if (!this._listenersSetup)
-            return;
-        const shadow = this.shadowRoot;
-        if (!shadow)
-            return;
-        const inputEl = shadow.querySelector('input');
-        if (!inputEl)
-            return;
-        // Remove all event listeners using stored handler references
-        if (this._inputHandler) {
-            inputEl.removeEventListener('input', this._inputHandler);
-            this._inputHandler = null;
-        }
-        if (this._changeHandler) {
-            inputEl.removeEventListener('change', this._changeHandler);
-            this._changeHandler = null;
-        }
-        if (this._focusHandler) {
-            inputEl.removeEventListener('focus', this._focusHandler);
-            this._focusHandler = null;
-        }
-        if (this._blurHandler) {
-            inputEl.removeEventListener('blur', this._blurHandler);
-            this._blurHandler = null;
-        }
-        this._listenersSetup = false;
-    }
-    /**
-   * Setup event listeners for input element
-   * IMPORTANT: Only called ONCE, not on every render (like ClojureScript)
-   */
-    setupEventListeners() {
-        if (this._listenersSetup) {
-            return; // Already setup
-        }
-        const shadow = this.shadowRoot;
-        const inputEl = shadow.querySelector('input');
-        const wrapperEl = shadow.querySelector('.input-wrapper');
-        if (!inputEl || !wrapperEl) {
-            console.warn('[TyInput.setupEventListeners] ⚠️ Input element not found!');
-            return;
-        }
-        // Create and store handler references for cleanup
-        // Input event - update shadow value and form (with debounce support)
-        this._inputHandler = (e) => {
-            // Stop native event from propagating - only our custom event should bubble
-            e.stopPropagation();
-            e.stopImmediatePropagation();
-            const target = e.target;
-            const rawValue = target.value;
-            // Parse to shadow value
-            this._shadowValue = this.parseShadowValue(rawValue);
-            // Update form value with shadow value
-            this._internals.setFormValue(this._shadowValue !== null ? String(this._shadowValue) : null);
-            this.updateValidity();
-            // Clear existing timer
-            if (this._inputDebounceTimer !== null) {
-                clearTimeout(this._inputDebounceTimer);
-            }
-            // If debounce is set, debounce the event
-            if (this.debounce > 0) {
-                this._inputDebounceTimer = window.setTimeout(() => {
-                    // Use current value, not the captured rawValue
-                    this.dispatchInputEvent(inputEl.value, e);
-                    this._inputDebounceTimer = null;
-                }, this.debounce);
-            }
-            else {
-                // Fire immediately if no debounce
-                this.dispatchInputEvent(rawValue, e);
-            }
-        };
-        // Change event (with debounce support)
-        this._changeHandler = (e) => {
-            // Stop native event from propagating - only our custom event should bubble
-            e.stopPropagation();
-            e.stopImmediatePropagation();
-            const target = e.target;
-            const rawValue = target.value;
-            // Parse to shadow value
-            this._shadowValue = this.parseShadowValue(rawValue);
-            // Update form value
-            this._internals.setFormValue(this._shadowValue !== null ? String(this._shadowValue) : null);
-            this.updateValidity();
-            // Clear existing timer
-            if (this._changeDebounceTimer !== null) {
-                clearTimeout(this._changeDebounceTimer);
-            }
-            // If debounce is set, debounce the event
-            if (this.debounce > 0) {
-                this._changeDebounceTimer = window.setTimeout(() => {
-                    // Use current value, not the captured rawValue
-                    this.dispatchChangeEvent(inputEl.value, e);
-                    this._changeDebounceTimer = null;
-                }, this.debounce);
-            }
-            else {
-                // Fire immediately if no debounce
-                this.dispatchChangeEvent(rawValue, e);
-            }
-        };
-        // Focus event - show raw value for numeric types
-        this._focusHandler = (e) => {
-            this._isFocused = true;
-            wrapperEl.classList.add('focused');
-            // For numeric types, show raw shadow value
-            if (shouldFormatType(this.type) && this._shadowValue !== null) {
-                inputEl.value = String(this._shadowValue);
-            }
-            this.dispatchEvent(new CustomEvent('focus', {
-                detail: { originalEvent: e },
-                bubbles: true,
-                composed: true
-            }));
-        };
-        // Blur event - fire pending debounced events immediately, then show formatted value
-        this._blurHandler = (e) => {
-            const target = e.target;
-            const rawValue = target.value;
-            // Fire any pending debounced input event immediately on blur
-            if (this._inputDebounceTimer !== null) {
-                clearTimeout(this._inputDebounceTimer);
-                this._inputDebounceTimer = null;
-                this.dispatchInputEvent(rawValue, e);
-            }
-            // Fire any pending debounced change event immediately on blur
-            if (this._changeDebounceTimer !== null) {
-                clearTimeout(this._changeDebounceTimer);
-                this._changeDebounceTimer = null;
-                this.dispatchChangeEvent(rawValue, e);
-            }
-            this._isFocused = false;
-            wrapperEl.classList.remove('focused');
-            // For numeric types, show formatted value
-            if (this.shouldFormat()) {
-                inputEl.value = this.getDisplayValue();
-            }
-            this.dispatchEvent(new CustomEvent('blur', {
-                detail: { originalEvent: e },
-                bubbles: true,
-                composed: true
-            }));
-        };
-        // Add event listeners
-        inputEl.addEventListener('input', this._inputHandler);
-        inputEl.addEventListener('change', this._changeHandler);
-        inputEl.addEventListener('focus', this._focusHandler);
-        inputEl.addEventListener('blur', this._blurHandler);
-        this._listenersSetup = true;
-    }
-    /**
-     * Render the input component with wrapper and slots
-     * Phase C: Uses getDisplayValue() for formatted output
-     *
-     */
-    render() {
-        const shadow = this.shadowRoot;
-        const existingInput = shadow.querySelector('input');
-        const existingWrapper = shadow.querySelector('.input-wrapper');
-        const existingLabel = shadow.querySelector('.ty-field-label');
-        const existingError = shadow.querySelector('.error-message');
-        const classes = this.buildClassList();
-        // Map input type (all numeric types use 'text' in DOM, others pass through)
-        const inputType = ['password', 'email', 'tel', 'url'].includes(this.type)
-            ? this.type
-            : 'text';
-        // Set inputmode for mobile keyboard hint
-        const inputMode = shouldFormatType(this.type) ? 'decimal'
-            : this.type === 'email' ? 'email'
-                : this.type === 'tel' ? 'tel'
-                    : this.type === 'url' ? 'url'
-                        : undefined;
-        // Get display value (formatted or raw based on focus)
-        const displayValue = this.getDisplayValue();
-        // If input exists, just update properties (like ClojureScript does)
-        if (existingInput && existingWrapper) {
-            existingInput.type = inputType;
-            existingInput.value = displayValue;
-            existingInput.placeholder = this.placeholder;
-            existingInput.name = this.name;
-            if (inputMode)
-                existingInput.inputMode = inputMode;
-            else
-                existingInput.removeAttribute('inputmode');
-            // Update wrapper classes
-            existingWrapper.className = `input-wrapper ${classes}`;
-            // Set disabled property AND manage attribute
-            existingInput.disabled = this.disabled;
-            if (this.disabled) {
-                existingInput.setAttribute('disabled', '');
-            }
-            else {
-                existingInput.removeAttribute('disabled');
-            }
-            // Set required property AND manage attribute
-            existingInput.required = this.required;
-            if (this.required) {
-                existingInput.setAttribute('required', '');
-            }
-            else {
-                existingInput.removeAttribute('required');
-            }
-            // a11y: the shadow <label> isn't programmatically linked to this input,
-            // so give the control an accessible name directly.
-            if (this.label)
-                existingInput.setAttribute('aria-label', this.label);
-            else
-                existingInput.removeAttribute('aria-label');
-            // ===== BUG FIX: Dynamic label creation =====
-            // Update or CREATE label if needed
-            if (this.label) {
-                if (existingLabel) {
-                    // Label exists, just update it
-                    existingLabel.innerHTML = `${this.label}${this.required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ''}`;
-                    existingLabel.style.display = 'flex';
-                }
-                else {
-                    // Label doesn't exist but we need one - CREATE IT!
-                    const labelEl = document.createElement('label');
-                    labelEl.className = 'ty-field-label';
-                    labelEl.innerHTML = `${this.label}${this.required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ''}`;
-                    // Insert label BEFORE the input-wrapper
-                    const container = shadow.querySelector('.input-container');
-                    if (container) {
-                        container.insertBefore(labelEl, existingWrapper);
-                    }
-                }
-            }
-            else if (existingLabel) {
-                // No label text, hide existing label
-                ;
-                existingLabel.style.display = 'none';
-            }
-            // Update error message
-            if (this.error) {
-                if (existingError) {
-                    existingError.textContent = this.error;
-                }
-                else {
-                    const errorEl = document.createElement('div');
-                    errorEl.className = 'error-message';
-                    errorEl.textContent = this.error;
-                    shadow.querySelector('.input-container')?.appendChild(errorEl);
-                }
-            }
-            else if (existingError) {
-                existingError.remove();
-            }
-        }
-        else {
-            // Create initial structure with wrapper and slots
-            const labelHtml = this.label ? `
-          <label class="ty-field-label">
-            ${this.label}
-            ${this.required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ''}
-          </label>
-        ` : '';
-            const errorHtml = this.error ? `
-          <div class="error-message">${this.error}</div>
-        ` : '';
-            shadow.innerHTML = `
-          <div class="input-container">
-            ${labelHtml}
-            <div class="input-wrapper ${classes}">
-              <slot name="start"></slot>
-              <input
-                type="${inputType}"
-                value="${displayValue}"
-                placeholder="${this.placeholder}"
-                name="${this.name}"
-                ${inputMode ? `inputmode="${inputMode}"` : ''}
-              />
-              <slot name="end"></slot>
-              ${inputType === 'password' ? `
-              <button class="password-toggle" type="button"
-                      aria-label="Show password" aria-pressed="false">
-                ${EYE_ICON_SVG}
-              </button>` : ''}
-            </div>
-            ${errorHtml}
-          </div>
-        `;
-            // Set boolean properties after creating element
-            const inputEl = shadow.querySelector('input');
-            inputEl.disabled = this.disabled;
-            inputEl.required = this.required;
-            if (this.label)
-                inputEl.setAttribute('aria-label', this.label); // a11y: name the control
-            this.setupPasswordToggle();
-            // Setup event listeners ONCE
-            this.setupEventListeners();
-        }
-        // Reflect constraint validation (required, etc.) to the owning <form>.
-        this.updateValidity();
-    }
-    /**
-     * Wire the password reveal toggle (rendered only for type="password").
-     * Toggles the NATIVE input's type between password/text — the component's
-     * `type` property stays "password" (form value and API unaffected).
-     */
-    setupPasswordToggle() {
-        const shadow = this.shadowRoot;
-        const toggle = shadow.querySelector('.password-toggle');
-        const inputEl = shadow.querySelector('input');
-        if (!toggle || !inputEl)
-            return;
-        // Keep focus in the input while clicking the toggle
-        toggle.addEventListener('mousedown', (e) => e.preventDefault());
-        toggle.addEventListener('click', () => {
-            const reveal = inputEl.type === 'password';
-            inputEl.type = reveal ? 'text' : 'password';
-            toggle.innerHTML = reveal ? EYE_OFF_ICON_SVG : EYE_ICON_SVG;
-            toggle.setAttribute('aria-label', reveal ? 'Hide password' : 'Show password');
-            toggle.setAttribute('aria-pressed', String(reveal));
-        });
-    }
-    /**
-     * Reflect constraint validation to the owning <form> via ElementInternals.
-     * Without this `required` is only cosmetic — the inner shadow <input> can't
-     * block the outer form. Empty + required => valueMissing; otherwise valid.
-     * Disabled fields are barred from constraint validation.
-     */
-    updateValidity() {
-        const inputEl = this.shadowRoot?.querySelector('input');
-        if (this.disabled) {
-            this._internals.setValidity({});
-            return;
-        }
-        const current = inputEl ? inputEl.value : String(this.getProperty('value') ?? '');
-        if (this.required && current.trim() === '') {
-            this._internals.setValidity({ valueMissing: true }, 'Please fill out this field', inputEl ?? undefined);
-        }
-        else {
-            this._internals.setValidity({});
-        }
-    }
+constructor() {
+super();
+this._shadowValue = null;
+this._isFocused = false;
+this._listenersSetup = false;
+this._errorAutoDanger = false;
+this._customFlavorSheet = null;
+this._inputHandler = null;
+this._changeHandler = null;
+this._focusHandler = null;
+this._blurHandler = null;
+this._inputDebounceTimer = null;
+this._changeDebounceTimer = null;
+const shadow = this.shadowRoot;
+ensureStyles(shadow, { css: inputStyles, id: 'ty-input' });
+}
+onConnect() {
+this.initializeShadowValue();
+this._localeObserver = observeLocaleChanges(this, () => {
+this.render();
+});
+this._syncCustomFlavor();
+}
+_syncCustomFlavor() {
+this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.flavor, ({ base }) => inputCustomFlavorCss(base));
+}
+onDisconnect() {
+this.removeEventListeners();
+if (this._localeObserver) {
+this._localeObserver();
+this._localeObserver = undefined;
+}
+if (this._inputDebounceTimer !== null) {
+clearTimeout(this._inputDebounceTimer);
+this._inputDebounceTimer = null;
+}
+if (this._changeDebounceTimer !== null) {
+clearTimeout(this._changeDebounceTimer);
+this._changeDebounceTimer = null;
+}
+}
+onPropertiesChanged(changes) {
+for (const { name, newValue } of changes) {
+switch (name) {
+case 'flavor':
+this._syncCustomFlavor();
+break;
+case 'value':
+this._shadowValue = this.parseShadowValue(newValue || '');
+break;
+case 'type':
+const currentValue = this.getProperty('value') || '';
+this._shadowValue = this.parseShadowValue(currentValue);
+break;
+case 'error':
+if (newValue) {
+if (this.getProperty('flavor') === 'neutral') {
+this.setProperty('flavor', 'danger');
+this._errorAutoDanger = true;
+}
+}
+else if (this._errorAutoDanger) {
+if (this.getProperty('flavor') === 'danger') {
+this.setProperty('flavor', 'neutral');
+}
+this._errorAutoDanger = false;
+}
+break;
+}
+}
+}
+onFormReset() {
+this._shadowValue = null;
+this.initializeShadowValue();
+this._isFocused = false;
+if (this._inputDebounceTimer !== null) {
+clearTimeout(this._inputDebounceTimer);
+this._inputDebounceTimer = null;
+}
+if (this._changeDebounceTimer !== null) {
+clearTimeout(this._changeDebounceTimer);
+this._changeDebounceTimer = null;
+}
+this.render();
+}
+getFormValue() {
+const formValue = this._shadowValue !== null ? String(this._shadowValue) : null;
+return formValue;
+}
+initializeShadowValue() {
+const currentValue = this.getProperty('value');
+if (currentValue) {
+this._shadowValue = this.parseShadowValue(currentValue);
+this._internals.setFormValue(this._shadowValue !== null ? String(this._shadowValue) : null);
+}
+}
+parseShadowValue(value) {
+if (!value || typeof value !== 'string' || value.trim() === '')
+return null;
+if (shouldFormatType(this.type)) {
+const parsed = parseNumericValue(value);
+if (parsed !== null && this.precision === 0) {
+return Math.round(parsed);
+}
+return parsed;
+}
+return value;
+}
+shouldFormat() {
+return shouldFormatType(this.type) &&
+!this._isFocused &&
+this._shadowValue !== null &&
+typeof this._shadowValue === 'number';
+}
+getFormatConfig() {
+return {
+type: this.type,
+locale: this.locale,
+currency: this.currency,
+precision: this.precision
+};
+}
+getDisplayValue() {
+if (this.shouldFormat()) {
+let valueToFormat = this._shadowValue;
+if (this.type === 'percent') {
+valueToFormat = valueToFormat / 100;
+}
+return formatNumber(valueToFormat, this.getFormatConfig());
+}
+return this._shadowValue !== null ? String(this._shadowValue) : '';
+}
+get type() { return this.getProperty('type'); }
+set type(v) { this.setProperty('type', v); }
+get value() {
+return this._shadowValue !== null ? String(this._shadowValue) : '';
+}
+set value(v) { this.setProperty('value', v); }
+get name() { return this.getProperty('name'); }
+set name(v) { this.setProperty('name', v); }
+get placeholder() { return this.getProperty('placeholder'); }
+set placeholder(v) { this.setProperty('placeholder', v); }
+get label() { return this.getProperty('label'); }
+set label(v) { this.setProperty('label', v); }
+get disabled() { return this.getProperty('disabled'); }
+set disabled(v) { this.setProperty('disabled', v); }
+get required() { return this.getProperty('required'); }
+set required(v) { this.setProperty('required', v); }
+get error() { return this.getProperty('error'); }
+set error(v) { this.setProperty('error', v); }
+get size() { return this.getProperty('size'); }
+set size(v) { this.setProperty('size', v); }
+get flavor() { return this.getProperty('flavor'); }
+set flavor(v) { this.setProperty('flavor', v); }
+get currency() { return this.getProperty('currency'); }
+set currency(v) { this.setProperty('currency', v); }
+get locale() {
+return getEffectiveLocale(this, this.getProperty('locale'));
+}
+set locale(v) { this.setProperty('locale', v); }
+get precision() { return this.getProperty('precision'); }
+set precision(v) { this.setProperty('precision', v); }
+get debounce() { return this.getProperty('debounce'); }
+set debounce(v) { this.setProperty('debounce', v); }
+get form() {
+return this._internals.form;
+}
+buildClassList() {
+const classes = [];
+if (this.disabled)
+classes.push('disabled');
+if (this.required)
+classes.push('required');
+if (this.error)
+classes.push('error');
+return classes.join(' ');
+}
+dispatchInputEvent(rawValue, originalEvent) {
+this.dispatchEvent(new CustomEvent('input', {
+detail: {
+value: this._shadowValue,
+formattedValue: this.shouldFormat() ? this.getDisplayValue() : null,
+rawValue: rawValue,
+originalEvent: originalEvent
+},
+bubbles: true,
+composed: true
+}));
+}
+dispatchChangeEvent(rawValue, originalEvent) {
+this.dispatchEvent(new CustomEvent('change', {
+detail: {
+value: this._shadowValue,
+formattedValue: this.shouldFormat() ? this.getDisplayValue() : null,
+rawValue: rawValue,
+originalEvent: originalEvent
+},
+bubbles: true,
+composed: true
+}));
+}
+removeEventListeners() {
+if (!this._listenersSetup)
+return;
+const shadow = this.shadowRoot;
+if (!shadow)
+return;
+const inputEl = shadow.querySelector('input');
+if (!inputEl)
+return;
+if (this._inputHandler) {
+inputEl.removeEventListener('input', this._inputHandler);
+this._inputHandler = null;
+}
+if (this._changeHandler) {
+inputEl.removeEventListener('change', this._changeHandler);
+this._changeHandler = null;
+}
+if (this._focusHandler) {
+inputEl.removeEventListener('focus', this._focusHandler);
+this._focusHandler = null;
+}
+if (this._blurHandler) {
+inputEl.removeEventListener('blur', this._blurHandler);
+this._blurHandler = null;
+}
+this._listenersSetup = false;
+}
+setupEventListeners() {
+if (this._listenersSetup) {
+return;
+}
+const shadow = this.shadowRoot;
+const inputEl = shadow.querySelector('input');
+const wrapperEl = shadow.querySelector('.input-wrapper');
+if (!inputEl || !wrapperEl) {
+console.warn('[TyInput.setupEventListeners] ⚠️ Input element not found!');
+return;
+}
+this._inputHandler = (e) => {
+e.stopPropagation();
+e.stopImmediatePropagation();
+const target = e.target;
+const rawValue = target.value;
+this._shadowValue = this.parseShadowValue(rawValue);
+this._internals.setFormValue(this._shadowValue !== null ? String(this._shadowValue) : null);
+this.updateValidity();
+if (this._inputDebounceTimer !== null) {
+clearTimeout(this._inputDebounceTimer);
+}
+if (this.debounce > 0) {
+this._inputDebounceTimer = window.setTimeout(() => {
+this.dispatchInputEvent(inputEl.value, e);
+this._inputDebounceTimer = null;
+}, this.debounce);
+}
+else {
+this.dispatchInputEvent(rawValue, e);
+}
+};
+this._changeHandler = (e) => {
+e.stopPropagation();
+e.stopImmediatePropagation();
+const target = e.target;
+const rawValue = target.value;
+this._shadowValue = this.parseShadowValue(rawValue);
+this._internals.setFormValue(this._shadowValue !== null ? String(this._shadowValue) : null);
+this.updateValidity();
+if (this._changeDebounceTimer !== null) {
+clearTimeout(this._changeDebounceTimer);
+}
+if (this.debounce > 0) {
+this._changeDebounceTimer = window.setTimeout(() => {
+this.dispatchChangeEvent(inputEl.value, e);
+this._changeDebounceTimer = null;
+}, this.debounce);
+}
+else {
+this.dispatchChangeEvent(rawValue, e);
+}
+};
+this._focusHandler = (e) => {
+this._isFocused = true;
+wrapperEl.classList.add('focused');
+if (shouldFormatType(this.type) && this._shadowValue !== null) {
+inputEl.value = String(this._shadowValue);
+}
+this.dispatchEvent(new CustomEvent('focus', {
+detail: { originalEvent: e },
+bubbles: true,
+composed: true
+}));
+};
+this._blurHandler = (e) => {
+const target = e.target;
+const rawValue = target.value;
+if (this._inputDebounceTimer !== null) {
+clearTimeout(this._inputDebounceTimer);
+this._inputDebounceTimer = null;
+this.dispatchInputEvent(rawValue, e);
+}
+if (this._changeDebounceTimer !== null) {
+clearTimeout(this._changeDebounceTimer);
+this._changeDebounceTimer = null;
+this.dispatchChangeEvent(rawValue, e);
+}
+this._isFocused = false;
+wrapperEl.classList.remove('focused');
+if (this.shouldFormat()) {
+inputEl.value = this.getDisplayValue();
+}
+this.dispatchEvent(new CustomEvent('blur', {
+detail: { originalEvent: e },
+bubbles: true,
+composed: true
+}));
+};
+inputEl.addEventListener('input', this._inputHandler);
+inputEl.addEventListener('change', this._changeHandler);
+inputEl.addEventListener('focus', this._focusHandler);
+inputEl.addEventListener('blur', this._blurHandler);
+this._listenersSetup = true;
+}
+render() {
+const shadow = this.shadowRoot;
+const existingInput = shadow.querySelector('input');
+const existingWrapper = shadow.querySelector('.input-wrapper');
+const existingLabel = shadow.querySelector('.ty-field-label');
+const existingError = shadow.querySelector('.error-message');
+const classes = this.buildClassList();
+const inputType = ['password', 'email', 'tel', 'url'].includes(this.type)
+? this.type
+: 'text';
+const inputMode = shouldFormatType(this.type) ? 'decimal'
+: this.type === 'email' ? 'email'
+: this.type === 'tel' ? 'tel'
+: this.type === 'url' ? 'url'
+: undefined;
+const displayValue = this.getDisplayValue();
+if (existingInput && existingWrapper) {
+existingInput.type = inputType;
+existingInput.value = displayValue;
+existingInput.placeholder = this.placeholder;
+existingInput.name = this.name;
+if (inputMode)
+existingInput.inputMode = inputMode;
+else
+existingInput.removeAttribute('inputmode');
+existingWrapper.className = `input-wrapper ${classes}`;
+existingInput.disabled = this.disabled;
+if (this.disabled) {
+existingInput.setAttribute('disabled', '');
+}
+else {
+existingInput.removeAttribute('disabled');
+}
+existingInput.required = this.required;
+if (this.required) {
+existingInput.setAttribute('required', '');
+}
+else {
+existingInput.removeAttribute('required');
+}
+if (this.label)
+existingInput.setAttribute('aria-label', this.label);
+else
+existingInput.removeAttribute('aria-label');
+if (this.label) {
+if (existingLabel) {
+existingLabel.innerHTML = `${this.label}${this.required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ''}`;
+existingLabel.style.display = 'flex';
+}
+else {
+const labelEl = document.createElement('label');
+labelEl.className = 'ty-field-label';
+labelEl.innerHTML = `${this.label}${this.required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ''}`;
+const container = shadow.querySelector('.input-container');
+if (container) {
+container.insertBefore(labelEl, existingWrapper);
+}
+}
+}
+else if (existingLabel) {
+;
+existingLabel.style.display = 'none';
+}
+if (this.error) {
+if (existingError) {
+existingError.textContent = this.error;
+}
+else {
+const errorEl = document.createElement('div');
+errorEl.className = 'error-message';
+errorEl.textContent = this.error;
+shadow.querySelector('.input-container')?.appendChild(errorEl);
+}
+}
+else if (existingError) {
+existingError.remove();
+}
+}
+else {
+const labelHtml = this.label ? `
+<label class="ty-field-label">
+${this.label}
+${this.required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ''}
+</label>
+` : '';
+const errorHtml = this.error ? `
+<div class="error-message">${this.error}</div>
+` : '';
+shadow.innerHTML = `
+<div class="input-container">
+${labelHtml}
+<div class="input-wrapper ${classes}">
+<slot name="start"></slot>
+<input
+type="${inputType}"
+value="${displayValue}"
+placeholder="${this.placeholder}"
+name="${this.name}"
+${inputMode ? `inputmode="${inputMode}"` : ''}
+/>
+<slot name="end"></slot>
+${inputType === 'password' ? `
+<button class="password-toggle" type="button"
+aria-label="Show password" aria-pressed="false">
+${EYE_ICON_SVG}
+</button>` : ''}
+</div>
+${errorHtml}
+</div>
+`;
+const inputEl = shadow.querySelector('input');
+inputEl.disabled = this.disabled;
+inputEl.required = this.required;
+if (this.label)
+inputEl.setAttribute('aria-label', this.label);
+this.setupPasswordToggle();
+this.setupEventListeners();
+}
+this.updateValidity();
+}
+setupPasswordToggle() {
+const shadow = this.shadowRoot;
+const toggle = shadow.querySelector('.password-toggle');
+const inputEl = shadow.querySelector('input');
+if (!toggle || !inputEl)
+return;
+toggle.addEventListener('mousedown', (e) => e.preventDefault());
+toggle.addEventListener('click', () => {
+const reveal = inputEl.type === 'password';
+inputEl.type = reveal ? 'text' : 'password';
+toggle.innerHTML = reveal ? EYE_OFF_ICON_SVG : EYE_ICON_SVG;
+toggle.setAttribute('aria-label', reveal ? 'Hide password' : 'Show password');
+toggle.setAttribute('aria-pressed', String(reveal));
+});
+}
+updateValidity() {
+const inputEl = this.shadowRoot?.querySelector('input');
+if (this.disabled) {
+this._internals.setValidity({});
+return;
+}
+const current = inputEl ? inputEl.value : String(this.getProperty('value') ?? '');
+if (this.required && current.trim() === '') {
+this._internals.setValidity({ valueMissing: true }, 'Please fill out this field', inputEl ?? undefined);
+}
+else {
+this._internals.setValidity({});
+}
+}
 }
 TyInput.formAssociated = true;
-// ============================================================================
-// PROPERTY CONFIGURATION - Declarative property lifecycle
-// ============================================================================
 TyInput.properties = {
-    // Core properties
-    type: {
-        type: 'string',
-        visual: true,
-        default: 'text',
-        validate: (v) => {
-            const validTypes = [
-                'text', 'email', 'password', 'number', 'tel', 'url',
-                'currency', 'percent', 'compact'
-            ];
-            return validTypes.includes(v);
-        },
-        coerce: (v) => {
-            const validTypes = [
-                'text', 'email', 'password', 'number', 'tel', 'url',
-                'currency', 'percent', 'compact'
-            ];
-            if (!validTypes.includes(v)) {
-                console.warn(`[ty-input] Invalid type '${v}'. Using 'text'.`);
-                return 'text';
-            }
-            return v;
-        }
-    },
-    value: {
-        type: 'string',
-        visual: true,
-        formValue: true,
-        emitChange: true,
-        default: ''
-    },
-    name: {
-        type: 'string',
-        default: ''
-    },
-    placeholder: {
-        type: 'string',
-        visual: true,
-        default: ''
-    },
-    label: {
-        type: 'string',
-        visual: true,
-        default: ''
-    },
-    disabled: {
-        type: 'boolean',
-        visual: true,
-        default: false
-    },
-    required: {
-        type: 'boolean',
-        visual: true,
-        default: false
-    },
-    error: {
-        type: 'string',
-        visual: true,
-        default: ''
-    },
-    size: {
-        type: 'string',
-        visual: true,
-        default: 'md',
-        // Fields come in exactly three sizes; legacy xs/xl map to sm/lg.
-        validate: (v) => ['sm', 'md', 'lg'].includes(v),
-        coerce: (v) => {
-            if (v === 'xs')
-                return 'sm';
-            if (v === 'xl')
-                return 'lg';
-            if (!['sm', 'md', 'lg'].includes(v)) {
-                console.warn(`[ty-input] Invalid size '${v}'. Using 'md'.`);
-                return 'md';
-            }
-            return v;
-        }
-    },
-    // Any string is accepted: built-ins get static CSS, other identifiers
-    // become custom flavors (see _syncCustomFlavor), garbage degrades to
-    // the default look.
-    flavor: {
-        type: 'string',
-        visual: true,
-        default: 'neutral'
-    },
-    // Numeric formatting properties
-    currency: {
-        type: 'string',
-        visual: true,
-        default: 'USD'
-    },
-    locale: {
-        type: 'string',
-        visual: true,
-        default: 'en-US'
-    },
-    precision: {
-        type: 'number',
-        visual: true,
-        default: undefined,
-        validate: (v) => {
-            if (v === undefined || v === null)
-                return true;
-            return typeof v === 'number' && v >= 0 && v <= 10;
-        },
-        coerce: (v) => {
-            if (v === undefined || v === null)
-                return undefined;
-            const num = Number(v);
-            if (isNaN(num))
-                return undefined;
-            return Math.max(0, Math.min(10, Math.floor(num)));
-        }
-    },
-    // Debounce property
-    debounce: {
-        type: 'number',
-        default: 0,
-        validate: (v) => {
-            const num = Number(v);
-            return !isNaN(num) && num >= 0 && num <= 5000;
-        },
-        coerce: (v) => {
-            const num = Number(v);
-            if (isNaN(num))
-                return 0;
-            return Math.max(0, Math.min(5000, Math.floor(num)));
-        }
-    }
+type: {
+type: 'string',
+visual: true,
+default: 'text',
+validate: (v) => {
+const validTypes = [
+'text', 'email', 'password', 'number', 'tel', 'url',
+'currency', 'percent', 'compact'
+];
+return validTypes.includes(v);
+},
+coerce: (v) => {
+const validTypes = [
+'text', 'email', 'password', 'number', 'tel', 'url',
+'currency', 'percent', 'compact'
+];
+if (!validTypes.includes(v)) {
+console.warn(`[ty-input] Invalid type '${v}'. Using 'text'.`);
+return 'text';
+}
+return v;
+}
+},
+value: {
+type: 'string',
+visual: true,
+formValue: true,
+emitChange: true,
+default: ''
+},
+name: {
+type: 'string',
+default: ''
+},
+placeholder: {
+type: 'string',
+visual: true,
+default: ''
+},
+label: {
+type: 'string',
+visual: true,
+default: ''
+},
+disabled: {
+type: 'boolean',
+visual: true,
+default: false
+},
+required: {
+type: 'boolean',
+visual: true,
+default: false
+},
+error: {
+type: 'string',
+visual: true,
+default: ''
+},
+size: {
+type: 'string',
+visual: true,
+default: DEFAULT_SIZE,
+validate: (v) => ["xs", "sm", "md", "lg", "xl"].includes(v),
+coerce: (v) => {
+if (!["xs", "sm", "md", "lg", "xl"].includes(v)) {
+console.warn(`[ty-input] Invalid size '${v}'. Using '${DEFAULT_SIZE}'.`);
+return DEFAULT_SIZE;
+}
+return v;
+}
+},
+flavor: {
+type: 'string',
+visual: true,
+default: 'neutral'
+},
+currency: {
+type: 'string',
+visual: true,
+default: 'USD'
+},
+locale: {
+type: 'string',
+visual: true,
+default: 'en-US'
+},
+precision: {
+type: 'number',
+visual: true,
+default: undefined,
+validate: (v) => {
+if (v === undefined || v === null)
+return true;
+return typeof v === 'number' && v >= 0 && v <= 10;
+},
+coerce: (v) => {
+if (v === undefined || v === null)
+return undefined;
+const num = Number(v);
+if (isNaN(num))
+return undefined;
+return Math.max(0, Math.min(10, Math.floor(num)));
+}
+},
+debounce: {
+type: 'number',
+default: 0,
+validate: (v) => {
+const num = Number(v);
+return !isNaN(num) && num >= 0 && num <= 5000;
+},
+coerce: (v) => {
+const num = Number(v);
+if (isNaN(num))
+return 0;
+return Math.max(0, Math.min(5000, Math.floor(num)));
+}
+}
 };
-// Register the custom element
 if (!customElements.get('ty-input')) {
-    customElements.define('ty-input', TyInput);
+customElements.define('ty-input', TyInput);
 }
-//# sourceMappingURL=input.js.map