secure-ui-components 0.2.3 → 0.2.5

package/dist/components/secure-input/secure-input.js

@@ -27,870 +27,4 @@
  *
  * @module secure-input
  * @license MIT
- */
-import { SecureBaseComponent } from '../../core/base-component.js';
-import { SecurityTier } from '../../core/security-config.js';
-/**
- * Secure Input Web Component
- *
- * Provides a security-hardened input field with progressive enhancement.
- * The component works as a standard form input without JavaScript and
- * enhances with security features when JavaScript is available.
- *
- * @extends SecureBaseComponent
- */
-export class SecureInput extends SecureBaseComponent {
-    /**
-     * Input element reference
-     * @private
-     */
-    #inputElement = null;
-    /**
-     * Label element reference
-     * @private
-     */
-    #labelElement = null;
-    /**
-     * Error container element reference
-     * @private
-     */
-    #errorContainer = null;
-    /**
-     * Threat feedback container — separate from validation errors so
-     * #clearErrors() never clobbers an active threat message.
-     * @private
-     */
-    #threatContainer = null;
-    /**
-     * The actual unmasked value
-     * @private
-     */
-    #actualValue = '';
-    /**
-     * Whether the input is currently masked
-     * @private
-     */
-    #isMasked = false;
-    /**
-     * Hidden input element in light DOM for form submission
-     * @private
-     */
-    #hiddenInput = null;
-    /**
-     * Unique ID for this input instance
-     * @private
-     */
-    #instanceId = `secure-input-${Math.random().toString(36).substring(2, 11)}`;
-    /**
-     * Observed attributes for this component
-     *
-     * @static
-     */
-    static get observedAttributes() {
-        return [
-            ...super.observedAttributes,
-            'name',
-            'type',
-            'label',
-            'placeholder',
-            'required',
-            'pattern',
-            'minlength',
-            'maxlength',
-            'autocomplete',
-            'value'
-        ];
-    }
-    /**
-     * Constructor
-     */
-    constructor() {
-        super();
-    }
-    /**
-     * Render the input component
-     *
-     * Security Note: We use a native <input> element wrapped in our web component
-     * to ensure progressive enhancement. The native input works without JavaScript,
-     * and we enhance it with security features when JS is available.
-     *
-     * @protected
-     */
-    render() {
-        const fragment = document.createDocumentFragment();
-        const container = document.createElement('div');
-        container.className = 'input-container';
-        container.setAttribute('part', 'container');
-        // Create label
-        const label = this.getAttribute('label');
-        if (label) {
-            this.#labelElement = document.createElement('label');
-            this.#labelElement.htmlFor = this.#instanceId;
-            this.#labelElement.textContent = this.sanitizeValue(label);
-            this.#labelElement.setAttribute('part', 'label');
-            container.appendChild(this.#labelElement);
-        }
-        // Create input wrapper for progressive enhancement
-        const inputWrapper = document.createElement('div');
-        inputWrapper.className = 'input-wrapper';
-        inputWrapper.setAttribute('part', 'wrapper');
-        // Create the actual input element
-        this.#inputElement = document.createElement('input');
-        this.#inputElement.id = this.#instanceId;
-        this.#inputElement.className = 'input-field';
-        this.#inputElement.setAttribute('part', 'input');
-        // Apply attributes from web component to native input
-        this.#applyInputAttributes();
-        // Set up event listeners
-        this.#attachEventListeners();
-        inputWrapper.appendChild(this.#inputElement);
-        container.appendChild(inputWrapper);
-        // Create error container
-        // role="alert" already implies aria-live="assertive" — do not override with polite
-        this.#errorContainer = document.createElement('div');
-        this.#errorContainer.className = 'error-container hidden';
-        this.#errorContainer.setAttribute('role', 'alert');
-        this.#errorContainer.setAttribute('part', 'error');
-        this.#errorContainer.id = `${this.#instanceId}-error`;
-        container.appendChild(this.#errorContainer);
-        // Threat feedback container — only rendered visibly when threat-feedback attribute
-        // is present and detectInjection() fires. Kept separate from #errorContainer so
-        // #clearErrors() (called on every input event) never clobbers a threat message.
-        this.#threatContainer = document.createElement('div');
-        this.#threatContainer.className = 'threat-container hidden';
-        this.#threatContainer.setAttribute('role', 'alert');
-        this.#threatContainer.setAttribute('part', 'threat');
-        this.#threatContainer.id = `${this.#instanceId}-threat`;
-        container.appendChild(this.#threatContainer);
-        // CRITICAL: Create hidden input in light DOM for native form submission
-        // The actual input is in Shadow DOM and can't participate in form submission
-        this.#createHiddenInputForForm();
-        // CRITICAL: Neutralize native fallback inputs in light DOM.
-        // The server renders native <input> elements inside <secure-input> for no-JS
-        // progressive enhancement. Now that JS has loaded and the shadow DOM input is
-        // active, these native fallbacks must be neutralized:
-        // 1. They are hidden by shadow DOM so users can't interact with them
-        // 2. They still have 'required' attributes that trigger HTML5 constraint
-        //    validation, silently blocking form submission (browser can't show the
-        //    validation popup for a hidden element, so "nothing happens" on click)
-        // 3. They still have 'name' attributes causing duplicate empty form fields
-        this.#neutralizeFallbackInputs();
-        // Add component styles (CSP-compliant via adoptedStyleSheets)
-        this.addComponentStyles(this.#getComponentStyles());
-        fragment.appendChild(container);
-        return fragment;
-    }
-    /**
-     * Create hidden input in light DOM for native form submission
-     *
-     * CRITICAL: The actual input is in Shadow DOM and can't participate in
-     * native form submission. We create a hidden input in light DOM that syncs
-     * with the Shadow DOM input value.
-     *
-     * IMPORTANT: Only create hidden input if NOT inside a <secure-form> component.
-     * The secure-form component handles its own hidden input creation.
-     *
-     * @private
-     */
-    #createHiddenInputForForm() {
-        const name = this.getAttribute('name');
-        if (!name)
-            return;
-        // Check if this input is inside a <secure-form> component
-        // If yes, the secure-form will handle hidden input creation
-        const isInsideSecureForm = this.closest('secure-form');
-        if (isInsideSecureForm) {
-            // Don't create hidden input - secure-form will handle it
-            return;
-        }
-        // Create hidden input in light DOM
-        this.#hiddenInput = document.createElement('input');
-        this.#hiddenInput.type = 'hidden';
-        this.#hiddenInput.name = name;
-        this.#hiddenInput.value = this.#actualValue || '';
-        // Append to light DOM (this element, not shadow root)
-        this.appendChild(this.#hiddenInput);
-    }
-    /**
-     * Sync hidden input value with the actual input value
-     *
-     * @private
-     */
-    #syncHiddenInput() {
-        if (this.#hiddenInput) {
-            this.#hiddenInput.value = this.#actualValue || '';
-        }
-    }
-    /**
-     * Neutralize native fallback inputs in light DOM
-     *
-     * When the component initializes with JavaScript, the shadow DOM input takes
-     * over. The server-rendered native fallback inputs (for no-JS progressive
-     * enhancement) must be neutralized to prevent:
-     * - HTML5 constraint validation blocking form submission silently
-     * - Duplicate form field values on native form submission
-     *
-     * @private
-     */
-    #neutralizeFallbackInputs() {
-        const fallbacks = this.querySelectorAll('input, textarea, select');
-        fallbacks.forEach((el) => {
-            // Skip the hidden input we created for form submission
-            if (el === this.#hiddenInput)
-                return;
-            const input = el;
-            // Remove attributes that interfere with form submission
-            input.removeAttribute('required');
-            input.removeAttribute('name');
-            input.removeAttribute('minlength');
-            input.removeAttribute('maxlength');
-            input.removeAttribute('pattern');
-            // Mark as inert so it's completely non-interactive
-            input.setAttribute('tabindex', '-1');
-            input.setAttribute('aria-hidden', 'true');
-        });
-    }
-    /**
-     * Apply attributes from the web component to the native input
-     *
-     * Security Note: This is where we enforce tier-specific security controls
-     * like autocomplete, caching, and validation rules.
-     *
-     * @private
-     */
-    #applyInputAttributes() {
-        const config = this.config;
-        // Name attribute (required for form submission)
-        const name = this.getAttribute('name');
-        if (name) {
-            this.#inputElement.name = this.sanitizeValue(name);
-        }
-        // Accessible name fallback: when no visible label is provided, use the name
-        // attribute as aria-label so screen readers can identify the field
-        if (!this.getAttribute('label') && name) {
-            this.#inputElement.setAttribute('aria-label', this.sanitizeValue(name));
-        }
-        // Link input to its error container for screen readers
-        this.#inputElement.setAttribute('aria-describedby', `${this.#instanceId}-error`);
-        // Type attribute
-        const type = this.getAttribute('type') || 'text';
-        this.#inputElement.type = type;
-        // Placeholder
-        const placeholder = this.getAttribute('placeholder');
-        if (placeholder) {
-            this.#inputElement.placeholder = this.sanitizeValue(placeholder);
-        }
-        // Required attribute
-        if (this.hasAttribute('required') || config.validation.required) {
-            this.#inputElement.required = true;
-            this.#inputElement.setAttribute('aria-required', 'true');
-        }
-        // Pattern validation
-        const pattern = this.getAttribute('pattern');
-        if (pattern) {
-            this.#inputElement.pattern = pattern;
-        }
-        // Length constraints
-        const minLength = this.getAttribute('minlength');
-        if (minLength) {
-            this.#inputElement.minLength = parseInt(minLength, 10);
-        }
-        const maxLength = this.getAttribute('maxlength') || config.validation.maxLength;
-        if (maxLength) {
-            this.#inputElement.maxLength = parseInt(String(maxLength), 10);
-        }
-        // CRITICAL SECURITY: Autocomplete control based on tier
-        // For SENSITIVE and CRITICAL tiers, we disable autocomplete to prevent
-        // browser storage of sensitive data
-        if (config.storage.allowAutocomplete) {
-            const autocomplete = this.getAttribute('autocomplete') || 'on';
-            this.#inputElement.autocomplete = autocomplete;
-        }
-        else {
-            // Explicitly disable autocomplete for sensitive data
-            this.#inputElement.autocomplete = 'off';
-            // Also set autocomplete="new-password" for password fields to prevent
-            // password managers from auto-filling
-            if (this.#inputElement.type === 'password') {
-                this.#inputElement.autocomplete = 'new-password';
-            }
-        }
-        // Disabled state
-        if (this.hasAttribute('disabled')) {
-            this.#inputElement.disabled = true;
-        }
-        // Readonly state
-        if (this.hasAttribute('readonly')) {
-            this.#inputElement.readOnly = true;
-        }
-        // Initial value
-        const value = this.getAttribute('value');
-        if (value) {
-            this.#setValue(value);
-        }
-        // Apply masking if configured for this tier.
-        // Never mask format-validated types (email, url, tel): the browser runs
-        // checkValidity() against the displayed value, and users must see their
-        // input to verify correctness. Masking is only appropriate for opaque
-        // text fields such as account numbers or SSNs (type="text").
-        const NON_MASKABLE_TYPES = new Set(['email', 'url', 'tel']);
-        if (config.masking.enabled && this.#inputElement.type !== 'password' && !NON_MASKABLE_TYPES.has(this.#inputElement.type)) {
-            this.#isMasked = true;
-        }
-    }
-    /**
-     * Attach event listeners to the input
-     *
-     * @private
-     */
-    #attachEventListeners() {
-        // Focus event - audit logging + telemetry
-        this.#inputElement.addEventListener('focus', () => {
-            this.recordTelemetryFocus();
-            this.audit('input_focused', {
-                name: this.#inputElement.name
-            });
-        });
-        // Input event - real-time validation, change tracking + telemetry
-        this.#inputElement.addEventListener('input', (e) => {
-            this.recordTelemetryInput(e);
-            this.#handleInput(e);
-        });
-        // Blur event - final validation + telemetry
-        this.#inputElement.addEventListener('blur', () => {
-            this.recordTelemetryBlur();
-            this.#validateAndShowErrors();
-            this.audit('input_blurred', {
-                name: this.#inputElement.name,
-                hasValue: this.#actualValue.length > 0
-            });
-        });
-        // Change event - audit logging
-        this.#inputElement.addEventListener('change', () => {
-            this.audit('input_changed', {
-                name: this.#inputElement.name,
-                valueLength: this.#actualValue.length
-            });
-        });
-    }
-    /**
-     * Handle input events
-     *
-     * Security Note: This is where we implement real-time masking and validation.
-     * We never expose the actual value in the DOM for CRITICAL tier fields.
-     *
-     * @private
-     */
-    #handleInput(event) {
-        // For masked inputs (except password which browser handles), we need to track
-        // the actual unmasked value separately because the input element shows masked chars
-        if (this.#isMasked && this.#inputElement.type !== 'password') {
-            const inputEvent = event;
-            const inputType = inputEvent.inputType;
-            const data = inputEvent.data || '';
-            // Get current state before we modify
-            const currentDisplayValue = this.#inputElement.value;
-            const cursorPos = this.#inputElement.selectionStart || 0;
-            // Handle different input types by reconstructing the actual value
-            if (inputType === 'deleteContentBackward') {
-                // Backspace: remove character before cursor
-                if (cursorPos < this.#actualValue.length) {
-                    this.#actualValue = this.#actualValue.substring(0, cursorPos) +
-                        this.#actualValue.substring(cursorPos + 1);
-                }
-            }
-            else if (inputType === 'deleteContentForward') {
-                // Delete key: character at cursor already removed, cursor position is correct
-                this.#actualValue = this.#actualValue.substring(0, cursorPos) +
-                    this.#actualValue.substring(cursorPos + 1);
-            }
-            else if (inputType === 'insertText') {
-                // User typed a character - insert at cursor position
-                this.#actualValue = this.#actualValue.substring(0, cursorPos - data.length) +
-                    data +
-                    this.#actualValue.substring(cursorPos - data.length);
-            }
-            else if (inputType === 'insertFromPaste') {
-                // User pasted - the data might be the full pasted content
-                if (data) {
-                    this.#actualValue = this.#actualValue.substring(0, cursorPos - data.length) +
-                        data +
-                        this.#actualValue.substring(cursorPos - data.length);
-                }
-            }
-            else {
-                // For any other input type, use a simpler approach:
-                // The display shows masked chars, but we can infer changes by comparing lengths
-                const oldLength = this.#actualValue.length;
-                const newLength = currentDisplayValue.length;
-                if (newLength > oldLength) {
-                    // Something was added
-                    const diff = newLength - oldLength;
-                    const insertPos = cursorPos - diff;
-                    this.#actualValue = this.#actualValue.substring(0, insertPos) +
-                        currentDisplayValue.substring(insertPos, cursorPos) +
-                        this.#actualValue.substring(insertPos);
-                }
-                else if (newLength < oldLength) {
-                    // Something was removed (fallback)
-                    this.#actualValue = this.#actualValue.substring(0, cursorPos) +
-                        this.#actualValue.substring(cursorPos + (oldLength - newLength));
-                }
-            }
-            // Now apply masking to the display
-            const maskedValue = this.#maskValue(this.#actualValue);
-            this.#inputElement.value = maskedValue;
-            // Restore cursor position
-            this.#inputElement.setSelectionRange(cursorPos, cursorPos);
-        }
-        else {
-            // For non-masked inputs, just read the value normally
-            this.#actualValue = this.#inputElement.value;
-        }
-        this.detectInjection(this.#actualValue, this.#inputElement.name);
-        // Clear previous errors on input (improve UX)
-        this.#clearErrors();
-        // Sync hidden input for form submission
-        this.#syncHiddenInput();
-        // Dispatch custom event for parent forms
-        this.dispatchEvent(new CustomEvent('secure-input', {
-            detail: {
-                name: this.#inputElement.name,
-                value: this.#actualValue, // Parent can access actual value
-                masked: this.#isMasked,
-                tier: this.securityTier
-            },
-            bubbles: true,
-            composed: true
-        }));
-    }
-    /**
-     * Mask a value based on tier configuration
-     *
-     * Security Note: For CRITICAL tier, we mask everything. For SENSITIVE tier,
-     * we can optionally reveal last few characters (e.g., last 4 digits of phone).
-     *
-     * @private
-     */
-    #maskValue(value) {
-        const config = this.config;
-        const maskChar = config.masking.character;
-        if (!config.masking.partial || this.securityTier === SecurityTier.CRITICAL) {
-            // Mask everything
-            return maskChar.repeat(value.length);
-        }
-        // Partial masking: show last 4 characters
-        if (value.length <= 4) {
-            return maskChar.repeat(value.length);
-        }
-        const maskedPart = maskChar.repeat(value.length - 4);
-        const visiblePart = value.slice(-4);
-        return maskedPart + visiblePart;
-    }
-    /**
-     * Validate password strength based on security tier
-     *
-     * Tier rules:
-     * - CRITICAL: uppercase + lowercase + digit + symbol, 8+ chars
-     * - SENSITIVE: uppercase + lowercase + digit, 8+ chars
-     * - AUTHENTICATED: 6+ chars
-     * - PUBLIC: no strength requirement
-     *
-     * @private
-     * @returns null if valid or not a password, error message string if invalid
-     */
-    #validatePasswordStrength(value) {
-        if (!this.#inputElement || this.#inputElement.type !== 'password') {
-            return null;
-        }
-        // Skip strength check on empty values — required check handles that
-        if (!value || value.length === 0) {
-            return null;
-        }
-        const tier = this.securityTier;
-        if (tier === 'critical') {
-            if (value.length < 8)
-                return 'Password must be at least 8 characters';
-            if (!/[a-z]/.test(value))
-                return 'Password must include a lowercase letter';
-            if (!/[A-Z]/.test(value))
-                return 'Password must include an uppercase letter';
-            if (!/[0-9]/.test(value))
-                return 'Password must include a number';
-            if (!/[^a-zA-Z0-9]/.test(value))
-                return 'Password must include a special character';
-        }
-        else if (tier === 'sensitive') {
-            if (value.length < 8)
-                return 'Password must be at least 8 characters';
-            if (!/[a-z]/.test(value))
-                return 'Password must include a lowercase letter';
-            if (!/[A-Z]/.test(value))
-                return 'Password must include an uppercase letter';
-            if (!/[0-9]/.test(value))
-                return 'Password must include a number';
-        }
-        else if (tier === 'authenticated') {
-            if (value.length < 6)
-                return 'Password must be at least 6 characters';
-        }
-        return null;
-    }
-    /**
-     * Validate number input for overflow and safe integer range
-     *
-     * Prevents JavaScript precision loss by checking against Number.MAX_SAFE_INTEGER.
-     * Also enforces min/max attribute constraints.
-     *
-     * @private
-     * @returns null if valid or not a number, error message string if invalid
-     */
-    #validateNumberOverflow(value) {
-        if (!this.#inputElement || this.#inputElement.type !== 'number') {
-            return null;
-        }
-        // Skip on empty values — required check handles that
-        if (!value || value.length === 0) {
-            return null;
-        }
-        const num = Number(value);
-        if (!Number.isFinite(num)) {
-            return 'Value must be a valid number';
-        }
-        // Check safe integer range for integer values (no decimal point)
-        if (!value.includes('.') && !Number.isSafeInteger(num)) {
-            return 'Value exceeds safe integer range';
-        }
-        // Enforce min/max attributes
-        const minAttr = this.getAttribute('min');
-        const maxAttr = this.getAttribute('max');
-        if (minAttr !== null) {
-            const min = Number(minAttr);
-            if (Number.isFinite(min) && num < min) {
-                return `Value must be at least ${min}`;
-            }
-        }
-        if (maxAttr !== null) {
-            const max = Number(maxAttr);
-            if (Number.isFinite(max) && num > max) {
-                return `Value must be at most ${max}`;
-            }
-        }
-        return null;
-    }
-    /**
-     * Validate the input and show error messages
-     *
-     * @private
-     */
-    #validateAndShowErrors() {
-        // Check rate limit first
-        const rateLimitCheck = this.checkRateLimit();
-        if (!rateLimitCheck.allowed) {
-            this.#showError(`Too many attempts. Please wait ${Math.ceil(rateLimitCheck.retryAfter / 1000)} seconds.`);
-            return;
-        }
-        // Perform base validation
-        const patternAttr = this.getAttribute('pattern');
-        const minLength = this.getAttribute('minlength');
-        const maxLength = this.getAttribute('maxlength');
-        let compiledPattern = null;
-        if (patternAttr) {
-            try {
-                // eslint-disable-next-line security/detect-non-literal-regexp
-                compiledPattern = new RegExp(patternAttr);
-            }
-            catch {
-                // Invalid regex from attribute — treat as no pattern
-            }
-        }
-        const validation = this.validateInput(this.#actualValue, {
-            required: this.hasAttribute('required') || this.config.validation.required,
-            pattern: compiledPattern,
-            minLength: minLength ? parseInt(minLength, 10) : 0,
-            maxLength: maxLength ? parseInt(maxLength, 10) : this.config.validation.maxLength
-        });
-        if (!validation.valid) {
-            this.#showError(validation.errors.join(', '));
-            return;
-        }
-        // Type-specific validation: password strength
-        const passwordError = this.#validatePasswordStrength(this.#actualValue);
-        if (passwordError) {
-            this.#showError(passwordError);
-            return;
-        }
-        // Type-specific validation: number overflow
-        const numberError = this.#validateNumberOverflow(this.#actualValue);
-        if (numberError) {
-            this.#showError(numberError);
-            return;
-        }
-        // Native constraint validation: email, url, number format, date, etc.
-        // For masked inputs, checkValidity() would run against the displayed mask
-        // characters — temporarily swap in the actual value, capture the result,
-        // then restore the mask.
-        if (this.#inputElement && this.#actualValue) {
-            let isValid;
-            let validationMsg;
-            if (this.#isMasked) {
-                const prev = this.#inputElement.value;
-                this.#inputElement.value = this.#actualValue;
-                isValid = this.#inputElement.checkValidity();
-                validationMsg = this.#inputElement.validationMessage;
-                this.#inputElement.value = prev;
-            }
-            else {
-                isValid = this.#inputElement.checkValidity();
-                validationMsg = this.#inputElement.validationMessage;
-            }
-            if (!isValid) {
-                this.#showError(validationMsg);
-                return;
-            }
-        }
-    }
-    /**
-     * Show error message
-     *
-     * @private
-     */
-    #showError(message) {
-        this.#errorContainer.textContent = message;
-        // Force reflow so browser registers the hidden state with content,
-        // then remove hidden to trigger the CSS transition
-        void this.#errorContainer.offsetHeight;
-        this.#errorContainer.classList.remove('hidden');
-        this.#inputElement.classList.add('error');
-        this.#inputElement.setAttribute('aria-invalid', 'true');
-    }
-    /**
-     * Clear error messages
-     *
-     * @private
-     */
-    #clearErrors() {
-        // Start the hide animation first, clear text only after transition ends
-        this.#errorContainer.classList.add('hidden');
-        this.#errorContainer.addEventListener('transitionend', () => {
-            if (this.#errorContainer.classList.contains('hidden')) {
-                this.#errorContainer.textContent = '';
-            }
-        }, { once: true });
-        this.#inputElement.classList.remove('error');
-        this.#inputElement.removeAttribute('aria-invalid');
-    }
-    /**
-     * Set the input value
-     *
-     * @private
-     */
-    #setValue(value) {
-        this.#actualValue = value;
-        if (this.#isMasked && this.#inputElement.type !== 'password') {
-            this.#inputElement.value = this.#maskValue(value);
-        }
-        else {
-            this.#inputElement.value = value;
-        }
-        // Sync hidden input for form submission
-        this.#syncHiddenInput();
-    }
-    /**
-     * Get component-specific styles
-     *
-     * @private
-     */
-    #getComponentStyles() {
-        return new URL('./secure-input.css', import.meta.url).href;
-    }
-    /**
-     * Handle attribute changes
-     *
-     * @protected
-     */
-    handleAttributeChange(name, _oldValue, newValue) {
-        if (!this.#inputElement)
-            return;
-        switch (name) {
-            case 'disabled':
-                this.#inputElement.disabled = this.hasAttribute('disabled');
-                break;
-            case 'readonly':
-                this.#inputElement.readOnly = this.hasAttribute('readonly');
-                break;
-            case 'value':
-                if (newValue !== this.#actualValue) {
-                    this.#setValue(newValue || '');
-                }
-                break;
-        }
-    }
-    /**
-     * Get the current value (unmasked)
-     *
-     * Security Note: This exposes the actual value. Only call this when
-     * submitting the form or when you have proper authorization.
-     *
-     * @public
-     */
-    get value() {
-        return this.#actualValue;
-    }
-    /**
-     * Set the value
-     *
-     * @public
-     */
-    set value(value) {
-        this.#setValue(value || '');
-    }
-    /**
-     * Get the input name
-     *
-     * @public
-     */
-    get name() {
-        return this.#inputElement ? this.#inputElement.name : '';
-    }
-    /**
-     * Check if the input is valid
-     *
-     * @public
-     */
-    get valid() {
-        const patternAttr = this.getAttribute('pattern');
-        const minLength = this.getAttribute('minlength');
-        const maxLength = this.getAttribute('maxlength');
-        let compiledPattern = null;
-        if (patternAttr) {
-            try {
-                // eslint-disable-next-line security/detect-non-literal-regexp
-                compiledPattern = new RegExp(patternAttr);
-            }
-            catch {
-                // Invalid regex from attribute — treat as no pattern
-            }
-        }
-        const validation = this.validateInput(this.#actualValue, {
-            required: this.hasAttribute('required') || this.config.validation.required,
-            pattern: compiledPattern,
-            minLength: minLength ? parseInt(minLength, 10) : 0,
-            maxLength: maxLength ? parseInt(maxLength, 10) : this.config.validation.maxLength
-        });
-        if (!validation.valid) {
-            return false;
-        }
-        // Type-specific: password strength
-        if (this.#validatePasswordStrength(this.#actualValue) !== null) {
-            return false;
-        }
-        // Type-specific: number overflow
-        if (this.#validateNumberOverflow(this.#actualValue) !== null) {
-            return false;
-        }
-        // Delegate to the browser's native constraint validation for type-specific
-        // format checking (email, url, number, date, etc.). This catches invalid
-        // emails, malformed URLs, out-of-range numbers and more without duplicating
-        // browser logic. Only relevant when there is a value to validate.
-        // For masked inputs, validate the actual value not the displayed mask.
-        if (this.#inputElement && this.#actualValue) {
-            let checkValid;
-            if (this.#isMasked) {
-                const prev = this.#inputElement.value;
-                this.#inputElement.value = this.#actualValue;
-                checkValid = this.#inputElement.checkValidity();
-                this.#inputElement.value = prev;
-            }
-            else {
-                checkValid = this.#inputElement.checkValidity();
-            }
-            if (!checkValid) {
-                return false;
-            }
-        }
-        return true;
-    }
-    /**
-     * Focus the input
-     *
-     * @public
-     */
-    focus() {
-        if (this.#inputElement) {
-            this.#inputElement.focus();
-        }
-    }
-    /**
-     * Blur the input
-     *
-     * @public
-     */
-    blur() {
-        if (this.#inputElement) {
-            this.#inputElement.blur();
-        }
-    }
-    /**
-     * Show inline threat feedback inside the component's shadow DOM.
-     * Called by the base class when a threat is detected and threat-feedback is set.
-     * Uses a separate container from validation errors so #clearErrors() does not
-     * clobber an active threat message.
-     * @protected
-     */
-    showThreatFeedback(patternId, tier) {
-        if (!this.#threatContainer || !this.#inputElement)
-            return;
-        // Build content with DOM methods — CSP-safe, no innerHTML
-        this.#threatContainer.textContent = '';
-        const msg = document.createElement('span');
-        msg.className = 'threat-message';
-        msg.textContent = this.getThreatLabel(patternId);
-        const patternBadge = document.createElement('span');
-        patternBadge.className = 'threat-badge';
-        patternBadge.textContent = patternId;
-        const tierBadge = document.createElement('span');
-        tierBadge.className = `threat-tier threat-tier--${tier}`;
-        tierBadge.textContent = tier;
-        this.#threatContainer.appendChild(msg);
-        this.#threatContainer.appendChild(patternBadge);
-        this.#threatContainer.appendChild(tierBadge);
-        // Force reflow so the browser registers the hidden state before removing it,
-        // ensuring the CSS transition fires correctly.
-        void this.#threatContainer.offsetHeight;
-        this.#threatContainer.classList.remove('hidden');
-        this.#inputElement.classList.add('threat');
-        this.#inputElement.setAttribute('aria-invalid', 'true');
-    }
-    /**
-     * Clear the threat feedback container.
-     * @protected
-     */
-    clearThreatFeedback() {
-        if (!this.#threatContainer || !this.#inputElement)
-            return;
-        this.#threatContainer.classList.add('hidden');
-        this.#threatContainer.addEventListener('transitionend', () => {
-            if (this.#threatContainer.classList.contains('hidden')) {
-                this.#threatContainer.textContent = '';
-            }
-        }, { once: true });
-        this.#inputElement.classList.remove('threat');
-        this.#inputElement.removeAttribute('aria-invalid');
-    }
-    /**
-     * Cleanup on disconnect
-     */
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        // Clear sensitive data from memory
-        this.#actualValue = '';
-        if (this.#inputElement) {
-            this.#inputElement.value = '';
-        }
-    }
-}
-// Define the custom element
-customElements.define('secure-input', SecureInput);
-export default SecureInput;
-//# sourceMappingURL=secure-input.js.map
+ */import{SecureBaseComponent as d}from"../../core/base-component.js";import{SecurityTier as m}from"../../core/security-config.js";class c extends d{#t=null;#a=null;#s=null;#i=null;#e="";#n=!1;#r=null;#h=`secure-input-${Math.random().toString(36).substring(2,11)}`;static get observedAttributes(){return[...super.observedAttributes,"name","type","label","placeholder","required","pattern","minlength","maxlength","autocomplete","value"]}constructor(){super()}render(){const t=document.createDocumentFragment(),e=document.createElement("div");e.className="input-container",e.setAttribute("part","container");const i=this.getAttribute("label");i&&(this.#a=document.createElement("label"),this.#a.htmlFor=this.#h,this.#a.textContent=this.sanitizeValue(i),this.#a.setAttribute("part","label"),e.appendChild(this.#a));const s=document.createElement("div");return s.className="input-wrapper",s.setAttribute("part","wrapper"),this.#t=document.createElement("input"),this.#t.id=this.#h,this.#t.className="input-field",this.#t.setAttribute("part","input"),this.#g(),this.#f(),s.appendChild(this.#t),e.appendChild(s),this.#s=document.createElement("div"),this.#s.className="error-container hidden",this.#s.setAttribute("role","alert"),this.#s.setAttribute("part","error"),this.#s.id=`${this.#h}-error`,e.appendChild(this.#s),this.#i=document.createElement("div"),this.#i.className="threat-container hidden",this.#i.setAttribute("role","alert"),this.#i.setAttribute("part","threat"),this.#i.id=`${this.#h}-threat`,e.appendChild(this.#i),this.#p(),this.#b(),this.addComponentStyles(this.#L()),t.appendChild(e),t}#p(){const t=this.getAttribute("name");!t||this.closest("secure-form")||(this.#r=document.createElement("input"),this.#r.type="hidden",this.#r.name=t,this.#r.value=this.#e||"",this.appendChild(this.#r))}#o(){this.#r&&(this.#r.value=this.#e||"")}#b(){this.querySelectorAll("input, textarea, select").forEach(e=>{if(e===this.#r)return;const i=e;i.removeAttribute("required"),i.removeAttribute("name"),i.removeAttribute("minlength"),i.removeAttribute("maxlength"),i.removeAttribute("pattern"),i.setAttribute("tabindex","-1"),i.setAttribute("aria-hidden","true")})}#g(){const t=this.config,e=this.getAttribute("name");e&&(this.#t.name=this.sanitizeValue(e)),!this.getAttribute("label")&&e&&this.#t.setAttribute("aria-label",this.sanitizeValue(e)),this.#t.setAttribute("aria-describedby",`${this.#h}-error`);const i=this.getAttribute("type")||"text";this.#t.type=i;const s=this.getAttribute("placeholder");s&&(this.#t.placeholder=this.sanitizeValue(s)),(this.hasAttribute("required")||t.validation.required)&&(this.#t.required=!0,this.#t.setAttribute("aria-required","true"));const n=this.getAttribute("pattern");n&&(this.#t.pattern=n);const r=this.getAttribute("minlength");r&&(this.#t.minLength=parseInt(r,10));const l=this.getAttribute("maxlength")||t.validation.maxLength;if(l&&(this.#t.maxLength=parseInt(String(l),10)),t.storage.allowAutocomplete){const u=this.getAttribute("autocomplete")||"on";this.#t.autocomplete=u}else this.#t.autocomplete="off",this.#t.type==="password"&&(this.#t.autocomplete="new-password");this.hasAttribute("disabled")&&(this.#t.disabled=!0),this.hasAttribute("readonly")&&(this.#t.readOnly=!0);const a=this.getAttribute("value");a&&this.#u(a);const h=new Set(["email","url","tel"]);t.masking.enabled&&this.#t.type!=="password"&&!h.has(this.#t.type)&&(this.#n=!0)}#f(){this.#t.addEventListener("focus",()=>{this.recordTelemetryFocus(),this.audit("input_focused",{name:this.#t.name})}),this.#t.addEventListener("input",t=>{this.recordTelemetryInput(t),this.#A(t)}),this.#t.addEventListener("blur",()=>{this.recordTelemetryBlur(),this.#v(),this.audit("input_blurred",{name:this.#t.name,hasValue:this.#e.length>0})}),this.#t.addEventListener("change",()=>{this.audit("input_changed",{name:this.#t.name,valueLength:this.#e.length})})}#A(t){if(this.#n&&this.#t.type!=="password"){const e=t,i=e.inputType,s=e.data||"",n=this.#t.value,r=this.#t.selectionStart||0;if(i==="deleteContentBackward")r<this.#e.length&&(this.#e=this.#e.substring(0,r)+this.#e.substring(r+1));else if(i==="deleteContentForward")this.#e=this.#e.substring(0,r)+this.#e.substring(r+1);else if(i==="insertText")this.#e=this.#e.substring(0,r-s.length)+s+this.#e.substring(r-s.length);else if(i==="insertFromPaste")s&&(this.#e=this.#e.substring(0,r-s.length)+s+this.#e.substring(r-s.length));else{const a=this.#e.length,h=n.length;if(h>a){const u=h-a,o=r-u;this.#e=this.#e.substring(0,o)+n.substring(o,r)+this.#e.substring(o)}else h<a&&(this.#e=this.#e.substring(0,r)+this.#e.substring(r+(a-h)))}const l=this.#c(this.#e);this.#t.value=l,this.#t.setSelectionRange(r,r)}else this.#e=this.#t.value;this.detectInjection(this.#e,this.#t.name),this.#y(),this.#o(),this.dispatchEvent(new CustomEvent("secure-input",{detail:{name:this.#t.name,value:this.#e,masked:this.#n,tier:this.securityTier},bubbles:!0,composed:!0}))}#c(t){const e=this.config,i=e.masking.character;if(!e.masking.partial||this.securityTier===m.CRITICAL||t.length<=4)return i.repeat(t.length);const s=i.repeat(t.length-4),n=t.slice(-4);return s+n}#d(t){if(!this.#t||this.#t.type!=="password"||!t||t.length===0)return null;const e=this.securityTier;if(e==="critical"){if(t.length<8)return"Password must be at least 8 characters";if(!/[a-z]/.test(t))return"Password must include a lowercase letter";if(!/[A-Z]/.test(t))return"Password must include an uppercase letter";if(!/[0-9]/.test(t))return"Password must include a number";if(!/[^a-zA-Z0-9]/.test(t))return"Password must include a special character"}else if(e==="sensitive"){if(t.length<8)return"Password must be at least 8 characters";if(!/[a-z]/.test(t))return"Password must include a lowercase letter";if(!/[A-Z]/.test(t))return"Password must include an uppercase letter";if(!/[0-9]/.test(t))return"Password must include a number"}else if(e==="authenticated"&&t.length<6)return"Password must be at least 6 characters";return null}#m(t){if(!this.#t||this.#t.type!=="number"||!t||t.length===0)return null;const e=Number(t);if(!Number.isFinite(e))return"Value must be a valid number";if(!t.includes(".")&&!Number.isSafeInteger(e))return"Value exceeds safe integer range";const i=this.getAttribute("min"),s=this.getAttribute("max");if(i!==null){const n=Number(i);if(Number.isFinite(n)&&e<n)return`Value must be at least ${n}`}if(s!==null){const n=Number(s);if(Number.isFinite(n)&&e>n)return`Value must be at most ${n}`}return null}#v(){const t=this.checkRateLimit();if(!t.allowed){this.#l(`Too many attempts. Please wait ${Math.ceil(t.retryAfter/1e3)} seconds.`);return}const e=this.getAttribute("pattern"),i=this.getAttribute("minlength"),s=this.getAttribute("maxlength");let n=null;if(e)try{n=new RegExp(e)}catch{}const r=this.validateInput(this.#e,{required:this.hasAttribute("required")||this.config.validation.required,pattern:n,minLength:i?parseInt(i,10):0,maxLength:s?parseInt(s,10):this.config.validation.maxLength});if(!r.valid){this.#l(r.errors.join(", "));return}const l=this.#d(this.#e);if(l){this.#l(l);return}const a=this.#m(this.#e);if(a){this.#l(a);return}if(this.#t&&this.#e){let h,u;if(this.#n){const o=this.#t.value;this.#t.value=this.#e,h=this.#t.checkValidity(),u=this.#t.validationMessage,this.#t.value=o}else h=this.#t.checkValidity(),u=this.#t.validationMessage;if(!h){this.#l(u);return}}}#l(t){this.#s.textContent=t,this.#s.offsetHeight,this.#s.classList.remove("hidden"),this.#t.classList.add("error"),this.#t.setAttribute("aria-invalid","true")}#y(){this.#s.classList.add("hidden"),this.#s.addEventListener("transitionend",()=>{this.#s.classList.contains("hidden")&&(this.#s.textContent="")},{once:!0}),this.#t.classList.remove("error"),this.#t.removeAttribute("aria-invalid")}#u(t){this.#e=t,this.#n&&this.#t.type!=="password"?this.#t.value=this.#c(t):this.#t.value=t,this.#o()}#L(){return new URL("./secure-input.css",import.meta.url).href}handleAttributeChange(t,e,i){if(this.#t)switch(t){case"disabled":this.#t.disabled=this.hasAttribute("disabled");break;case"readonly":this.#t.readOnly=this.hasAttribute("readonly");break;case"value":i!==this.#e&&this.#u(i||"");break}}get value(){return this.#e}set value(t){this.#u(t||"")}get name(){return this.#t?this.#t.name:""}get valid(){const t=this.getAttribute("pattern"),e=this.getAttribute("minlength"),i=this.getAttribute("maxlength");let s=null;if(t)try{s=new RegExp(t)}catch{}if(!this.validateInput(this.#e,{required:this.hasAttribute("required")||this.config.validation.required,pattern:s,minLength:e?parseInt(e,10):0,maxLength:i?parseInt(i,10):this.config.validation.maxLength}).valid||this.#d(this.#e)!==null||this.#m(this.#e)!==null)return!1;if(this.#t&&this.#e){let r;if(this.#n){const l=this.#t.value;this.#t.value=this.#e,r=this.#t.checkValidity(),this.#t.value=l}else r=this.#t.checkValidity();if(!r)return!1}return!0}focus(){this.#t&&this.#t.focus()}blur(){this.#t&&this.#t.blur()}showThreatFeedback(t,e){if(!this.#i||!this.#t)return;this.#i.textContent="";const i=document.createElement("span");i.className="threat-message",i.textContent=this.getThreatLabel(t);const s=document.createElement("span");s.className="threat-badge",s.textContent=t;const n=document.createElement("span");n.className=`threat-tier threat-tier--${e}`,n.textContent=e,this.#i.appendChild(i),this.#i.appendChild(s),this.#i.appendChild(n),this.#i.offsetHeight,this.#i.classList.remove("hidden"),this.#t.classList.add("threat"),this.#t.setAttribute("aria-invalid","true")}clearThreatFeedback(){!this.#i||!this.#t||(this.#i.classList.add("hidden"),this.#i.addEventListener("transitionend",()=>{this.#i.classList.contains("hidden")&&(this.#i.textContent="")},{once:!0}),this.#t.classList.remove("threat"),this.#t.removeAttribute("aria-invalid"))}disconnectedCallback(){super.disconnectedCallback(),this.#e="",this.#t&&(this.#t.value="")}}customElements.define("secure-input",c);var f=c;export{c as SecureInput,f as default};