secure-ui-components 0.2.2 → 0.2.4

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

@@ -30,800 +30,4 @@
  *
  * @module secure-form
  * @license MIT
- */
-var _a;
-import { SecurityTier } from '../../core/security-config.js';
-/**
- * Secure Form Web Component
- *
- * Provides a security-hardened form with CSRF protection and validation.
- * The component works as a standard HTML form without JavaScript and
- * enhances with security features when JavaScript is available.
- *
- * IMPORTANT: This component does NOT use Shadow DOM. It creates a native
- * <form> element in light DOM to ensure proper form submission and
- * accessibility. It extends HTMLElement directly, not SecureBaseComponent.
- *
- * @extends HTMLElement
- */
-export class SecureForm extends HTMLElement {
-    /** @private Whether component styles have been added to the document */
-    static __stylesAdded = false;
-    /**
-     * Form element reference
-     * @private
-     */
-    #formElement = null;
-    /**
-     * CSRF token hidden input reference
-     * @private
-     */
-    #csrfInput = null;
-    /**
-     * Form status message element
-     * @private
-     */
-    #statusElement = null;
-    /**
-     * Whether form is currently submitting
-     * @private
-     */
-    #isSubmitting = false;
-    /**
-     * Timestamp when the form was connected to the DOM.
-     * Used to compute session duration for telemetry.
-     * @private
-     */
-    #sessionStart = Date.now();
-    /**
-     * Unique ID for this form instance
-     * @private
-     */
-    #instanceId = `secure-form-${Math.random().toString(36).substring(2, 11)}`;
-    /**
-     * Security tier for this form
-     * @private
-     */
-    #securityTier = SecurityTier.PUBLIC;
-    /**
-     * Observed attributes for this component
-     *
-     * @static
-     */
-    static get observedAttributes() {
-        return [
-            'security-tier',
-            'action',
-            'method',
-            'enctype',
-            'csrf-token',
-            'csrf-header-name',
-            'csrf-field-name',
-            'novalidate'
-        ];
-    }
-    /**
-     * Constructor
-     */
-    constructor() {
-        super();
-        // No Shadow DOM - we work exclusively in light DOM for form compatibility
-    }
-    /**
-     * Called when element is connected to DOM
-     *
-     * Progressive Enhancement Strategy:
-     * - Create a native <form> in light DOM (not Shadow DOM)
-     * - Move all children into the form
-     * - Add CSRF token as hidden field
-     * - Attach event listeners for validation and optional enhancement
-     */
-    connectedCallback() {
-        // Only initialize once
-        if (this.#formElement) {
-            return;
-        }
-        this.#sessionStart = Date.now();
-        // Read security tier from attribute before anything else.
-        // attributeChangedCallback fires before connectedCallback but early-returns
-        // when #formElement is null, so the tier needs to be read here.
-        const tierAttr = this.getAttribute('security-tier');
-        if (tierAttr) {
-            this.#securityTier = tierAttr;
-        }
-        // Progressive enhancement: check for server-rendered <form> in light DOM
-        const existingForm = this.querySelector('form');
-        if (existingForm) {
-            // Adopt the existing form element
-            this.#formElement = existingForm;
-            this.#formElement.id = this.#instanceId;
-            if (!this.#formElement.classList.contains('secure-form')) {
-                this.#formElement.classList.add('secure-form');
-            }
-            // Apply/override form attributes from the custom element
-            this.#applyFormAttributes();
-            // Check if CSRF field already exists in the server-rendered form
-            const csrfFieldName = this.getAttribute('csrf-field-name') || 'csrf_token';
-            const existingCsrf = existingForm.querySelector(`input[name="${csrfFieldName}"]`);
-            if (existingCsrf) {
-                this.#csrfInput = existingCsrf;
-                // Update token value from attribute if it differs
-                const csrfToken = this.getAttribute('csrf-token');
-                if (csrfToken && existingCsrf.value !== csrfToken) {
-                    existingCsrf.value = csrfToken;
-                }
-            }
-            else {
-                this.#createCsrfField();
-            }
-        }
-        else {
-            // No server-rendered form: create one (original behavior)
-            this.#formElement = document.createElement('form');
-            this.#formElement.id = this.#instanceId;
-            this.#formElement.className = 'secure-form';
-            // Apply form attributes
-            this.#applyFormAttributes();
-            // Create CSRF token field
-            this.#createCsrfField();
-            // Move all existing children (inputs, buttons) into the form
-            while (this.firstChild) {
-                this.#formElement.appendChild(this.firstChild);
-            }
-            // Append the form to this element
-            this.appendChild(this.#formElement);
-        }
-        // Create status message area
-        this.#statusElement = document.createElement('div');
-        this.#statusElement.className = 'form-status form-status-hidden';
-        this.#statusElement.setAttribute('role', 'status');
-        this.#statusElement.setAttribute('aria-live', 'polite');
-        this.#formElement.insertBefore(this.#statusElement, this.#formElement.firstChild);
-        // Add inline styles (since we're not using Shadow DOM)
-        this.#addInlineStyles();
-        // Set up event listeners
-        this.#attachEventListeners();
-        this.audit('form_initialized', {
-            formId: this.#instanceId,
-            action: this.#formElement.action,
-            method: this.#formElement.method
-        });
-    }
-    /**
-     * Add component styles (CSP-compliant via adoptedStyleSheets on document)
-     *
-     * Uses constructable stylesheets instead of injecting <style> elements,
-     * which would be blocked by strict Content Security Policy.
-     *
-     * @private
-     */
-    #addInlineStyles() {
-        // Only inject once globally — <link> in document head, loads from 'self' (CSP-safe)
-        if (!_a.__stylesAdded) {
-            const link = document.createElement('link');
-            link.rel = 'stylesheet';
-            link.href = new URL('./secure-form.css', import.meta.url).href;
-            document.head.appendChild(link);
-            _a.__stylesAdded = true;
-        }
-    }
-    /**
-     * Apply attributes to the form element
-     *
-     * @private
-     */
-    #applyFormAttributes() {
-        const action = this.getAttribute('action');
-        if (action) {
-            this.#formElement.action = action;
-        }
-        const method = this.getAttribute('method') || 'POST';
-        this.#formElement.method = method.toUpperCase();
-        const enctype = this.getAttribute('enctype') || 'application/x-www-form-urlencoded';
-        this.#formElement.enctype = enctype;
-        // Disable browser validation - we handle it ourselves
-        const novalidate = this.hasAttribute('novalidate');
-        if (novalidate) {
-            this.#formElement.noValidate = true;
-        }
-        // Disable autocomplete for SENSITIVE and CRITICAL tiers
-        if (this.#securityTier === SecurityTier.SENSITIVE || this.#securityTier === SecurityTier.CRITICAL) {
-            this.#formElement.autocomplete = 'off';
-        }
-    }
-    /**
-     * Create CSRF token hidden field
-     *
-     * Security Note: CSRF tokens prevent Cross-Site Request Forgery attacks.
-     * The token should be unique per session and validated server-side.
-     *
-     * @private
-     */
-    #createCsrfField() {
-        const csrfToken = this.getAttribute('csrf-token');
-        if (csrfToken) {
-            this.#csrfInput = document.createElement('input');
-            this.#csrfInput.type = 'hidden';
-            // Use 'csrf_token' for backend compatibility (common convention)
-            // Backends can configure via csrf-field-name attribute if needed
-            const fieldName = this.getAttribute('csrf-field-name') || 'csrf_token';
-            this.#csrfInput.name = fieldName;
-            this.#csrfInput.value = csrfToken;
-            this.#formElement.appendChild(this.#csrfInput);
-            this.audit('csrf_token_injected', {
-                formId: this.#instanceId,
-                fieldName: fieldName
-            });
-        }
-        else if (this.securityTier === SecurityTier.SENSITIVE ||
-            this.securityTier === SecurityTier.CRITICAL) {
-            console.warn('CSRF token not provided for SENSITIVE/CRITICAL tier form');
-        }
-    }
-    /**
-     * Attach event listeners
-     *
-     * @private
-     */
-    #attachEventListeners() {
-        // Submit event - validate and enhance submission
-        this.#formElement.addEventListener('submit', (e) => {
-            void this.#handleSubmit(e);
-        });
-        // Listen for secure field events
-        this.addEventListener('secure-input', (e) => {
-            this.#handleFieldChange(e);
-        });
-        this.addEventListener('secure-textarea', (e) => {
-            this.#handleFieldChange(e);
-        });
-        this.addEventListener('secure-select', (e) => {
-            this.#handleFieldChange(e);
-        });
-    }
-    /**
-     * Handle field change events
-     *
-     * @private
-     */
-    #handleFieldChange(_event) {
-        // Clear form-level errors when user makes changes
-        this.#clearStatus();
-    }
-    /**
-     * Handle form submission
-     *
-     * Progressive Enhancement Strategy:
-     * - If 'enhance' attribute is NOT set: Allow native form submission (backend agnostic)
-     * - If 'enhance' attribute IS set: Intercept and use Fetch API with JSON
-     *
-     * Security Note: This is where we perform comprehensive validation,
-     * rate limiting, and secure data collection before submission.
-     *
-     * @private
-     */
-    async #handleSubmit(event) {
-        // Check if we should enhance the form submission with JavaScript
-        const shouldEnhance = this.hasAttribute('enhance');
-        // Prevent double submission
-        if (this.#isSubmitting) {
-            event.preventDefault();
-            return;
-        }
-        // Detect absent CSRF token on sensitive/critical tiers at submission time
-        if ((this.#securityTier === SecurityTier.SENSITIVE || this.#securityTier === SecurityTier.CRITICAL) &&
-            !this.#csrfInput?.value) {
-            this.dispatchEvent(new CustomEvent('secure-threat-detected', {
-                detail: {
-                    fieldName: this.#instanceId,
-                    threatType: 'csrf-token-absent',
-                    patternId: 'csrf-token-absent',
-                    tier: this.#securityTier,
-                    timestamp: Date.now(),
-                },
-                bubbles: true,
-                composed: true,
-            }));
-        }
-        // Check rate limit
-        const rateLimitCheck = this.checkRateLimit();
-        if (!rateLimitCheck.allowed) {
-            event.preventDefault();
-            this.#showStatus(`Too many submission attempts. Please wait ${Math.ceil(rateLimitCheck.retryAfter / 1000)} seconds.`, 'error');
-            this.audit('form_rate_limited', {
-                formId: this.#instanceId,
-                retryAfter: rateLimitCheck.retryAfter
-            });
-            return;
-        }
-        // Discover and validate all secure fields
-        const validation = this.#validateAllFields();
-        if (!validation.valid) {
-            event.preventDefault();
-            this.#showStatus(validation.errors.join(', '), 'error');
-            this.audit('form_validation_failed', {
-                formId: this.#instanceId,
-                errors: validation.errors
-            });
-            return;
-        }
-        // If not enhancing, allow native form submission
-        if (!shouldEnhance) {
-            // CRITICAL: Sync secure-input values to hidden fields for native submission
-            // Secure-input components have their actual <input> in Shadow DOM,
-            // so we need to create hidden inputs for native form submission
-            this.#syncSecureInputsToForm();
-            // Let the browser handle the submission normally
-            this.audit('form_submitted_native', {
-                formId: this.#instanceId,
-                action: this.#formElement.action,
-                method: this.#formElement.method
-            });
-            return; // Allow default behavior
-        }
-        // Enhanced submission with JavaScript (Fetch API)
-        event.preventDefault();
-        // Mark as submitting
-        this.#isSubmitting = true;
-        this.#showStatus('Submitting...', 'info');
-        this.#disableForm();
-        // Collect form data securely
-        const formData = this.#collectFormData();
-        // Collect behavioral telemetry from all secure fields
-        const telemetry = this.#collectTelemetry();
-        // Audit log submission (include risk score for server-side correlation)
-        this.audit('form_submitted_enhanced', {
-            formId: this.#instanceId,
-            action: this.#formElement.action,
-            method: this.#formElement.method,
-            fieldCount: Object.keys(formData).length,
-            riskScore: telemetry.riskScore,
-            riskSignals: telemetry.riskSignals
-        });
-        // Dispatch pre-submit event for custom handling
-        const preSubmitEvent = new CustomEvent('secure-form-submit', {
-            detail: {
-                formData,
-                formElement: this.#formElement,
-                telemetry,
-                preventDefault: () => {
-                    this.#isSubmitting = false;
-                    this.#enableForm();
-                }
-            },
-            bubbles: true,
-            composed: true,
-            cancelable: true
-        });
-        const shouldContinue = this.dispatchEvent(preSubmitEvent);
-        if (!shouldContinue) {
-            // Custom handler prevented default submission
-            this.#isSubmitting = false;
-            this.#enableForm();
-            return;
-        }
-        // Perform secure submission via Fetch
-        try {
-            await this.#submitForm(formData, telemetry);
-        }
-        catch (error) {
-            this.#showStatus('Submission failed. Please try again.', 'error');
-            this.audit('form_submission_error', {
-                formId: this.#instanceId,
-                error: error.message
-            });
-        }
-        finally {
-            this.#isSubmitting = false;
-            this.#enableForm();
-        }
-    }
-    /**
-     * Sync secure-input component values to hidden form inputs
-     *
-     * CRITICAL for native form submission: Secure-input components have their
-     * actual <input> elements in Shadow DOM, which can't participate in native
-     * form submission. We create/update hidden inputs in the form for each
-     * secure-input to enable backend-agnostic form submission.
-     *
-     * @private
-     */
-    #syncSecureInputsToForm() {
-        const secureInputs = this.#formElement.querySelectorAll('secure-input, secure-textarea, secure-select, secure-datetime, secure-file-upload');
-        secureInputs.forEach((input) => {
-            const name = input.getAttribute('name');
-            if (!name)
-                return;
-            // CRITICAL: Disable the native fallback inputs inside the secure component
-            // so they don't participate in native form submission (they are empty because
-            // the user typed into the shadow DOM input). Without this, the server receives
-            // the empty native input value first, ignoring the synced hidden input.
-            const nativeFallbacks = input.querySelectorAll(`input[name="${name}"], textarea[name="${name}"], select[name="${name}"]`);
-            nativeFallbacks.forEach((fallback) => {
-                fallback.removeAttribute('name');
-            });
-            // Check if hidden input already exists
-            let hiddenInput = this.#formElement.querySelector(`input[type="hidden"][data-secure-input="${name}"]`);
-            if (!hiddenInput) {
-                // Create hidden input for this secure-input
-                hiddenInput = document.createElement('input');
-                hiddenInput.type = 'hidden';
-                hiddenInput.setAttribute('data-secure-input', name);
-                hiddenInput.name = name;
-                this.#formElement.appendChild(hiddenInput);
-            }
-            // Sync the value
-            hiddenInput.value = input.value || '';
-        });
-    }
-    /**
-     * Validate all secure fields in the form
-     *
-     * @private
-     */
-    #validateAllFields() {
-        const errors = [];
-        // Find all secure input components within the form
-        const inputs = this.#formElement.querySelectorAll('secure-input, secure-textarea, secure-select, secure-datetime, secure-file-upload');
-        inputs.forEach((input) => {
-            if (typeof input.valid === 'boolean' && !input.valid) {
-                const label = input.getAttribute('label') || input.getAttribute('name') || 'Field';
-                errors.push(`${label} is invalid`);
-            }
-        });
-        return {
-            valid: errors.length === 0,
-            errors
-        };
-    }
-    /**
-     * Collect form data from secure fields
-     *
-     * Security Note: We collect data from secure components which have already
-     * sanitized their values. We also include the CSRF token.
-     *
-     * @private
-     */
-    #collectFormData() {
-        const formData = Object.create(null);
-        // Collect from secure components within the form
-        const secureInputs = this.#formElement.querySelectorAll('secure-input, secure-textarea, secure-select, secure-datetime, secure-file-upload');
-        secureInputs.forEach((input) => {
-            const typedInput = input;
-            if (typedInput.name) {
-                formData[typedInput.name] = typedInput.value;
-            }
-        });
-        // Collect from standard form inputs (for non-secure fields)
-        const standardInputs = this.#formElement.querySelectorAll('input:not([type="hidden"]), textarea:not(.textarea-field), select:not(.select-field)');
-        standardInputs.forEach((input) => {
-            const typedInput = input;
-            if (typedInput.name) {
-                formData[typedInput.name] = this.sanitizeValue(typedInput.value);
-            }
-        });
-        // Include CSRF token
-        if (this.#csrfInput) {
-            formData[this.#csrfInput.name] = this.#csrfInput.value;
-        }
-        return formData;
-    }
-    /**
-     * Submit form data securely
-     *
-     * Security Note: We use fetch API with secure headers and proper CSRF handling.
-     * In production, ensure the server validates the CSRF token.
-     *
-     * @private
-     */
-    async #submitForm(formData, telemetry) {
-        const action = this.#formElement.action;
-        const method = this.#formElement.method;
-        // Prepare headers
-        const headers = {
-            'Content-Type': 'application/json'
-        };
-        // Add CSRF token to header if specified
-        const csrfHeaderName = this.getAttribute('csrf-header-name');
-        if (csrfHeaderName && this.#csrfInput) {
-            headers[csrfHeaderName] = this.#csrfInput.value;
-        }
-        // Bundle telemetry alongside form data in a single request.
-        // The server receives both the user's input and behavioral context in one
-        // atomic payload, enabling server-side risk evaluation without a second round-trip.
-        // Using a prefixed key (_telemetry) avoids collisions with form field names.
-        const payload = { ...formData, _telemetry: telemetry };
-        // Perform fetch
-        const response = await fetch(action, {
-            method: method,
-            headers: headers,
-            body: JSON.stringify(payload),
-            credentials: 'same-origin', // Include cookies for CSRF validation
-            mode: 'cors',
-            cache: 'no-cache',
-            redirect: 'follow'
-        });
-        if (!response.ok) {
-            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-        }
-        // Success
-        this.#showStatus('Form submitted successfully!', 'success');
-        // Dispatch success event
-        this.dispatchEvent(new CustomEvent('secure-form-success', {
-            detail: {
-                formData,
-                response,
-                telemetry
-            },
-            bubbles: true,
-            composed: true
-        }));
-        return response;
-    }
-    /**
-     * Disable form during submission
-     *
-     * @private
-     */
-    #disableForm() {
-        // Disable all form controls
-        const controls = this.#formElement.querySelectorAll('input, textarea, select, button');
-        controls.forEach((control) => {
-            control.disabled = true;
-        });
-        // Also disable secure components
-        const secureFields = this.querySelectorAll('secure-input, secure-textarea, secure-select, secure-datetime, secure-file-upload');
-        secureFields.forEach((field) => {
-            field.setAttribute('disabled', '');
-        });
-    }
-    /**
-     * Enable form after submission
-     *
-     * @private
-     */
-    #enableForm() {
-        // Enable all form controls
-        const controls = this.#formElement.querySelectorAll('input, textarea, select, button');
-        controls.forEach((control) => {
-            control.disabled = false;
-        });
-        // Also enable secure components
-        const secureFields = this.querySelectorAll('secure-input, secure-textarea, secure-select, secure-datetime, secure-file-upload');
-        secureFields.forEach((field) => {
-            field.removeAttribute('disabled');
-        });
-    }
-    /**
-     * Show status message
-     *
-     * @private
-     */
-    #showStatus(message, type = 'info') {
-        this.#statusElement.textContent = message;
-        this.#statusElement.className = `form-status form-status-${type}`;
-    }
-    /**
-     * Clear status message
-     *
-     * @private
-     */
-    #clearStatus() {
-        this.#statusElement.textContent = '';
-        this.#statusElement.className = 'form-status form-status-hidden';
-    }
-    // ── Telemetry ──────────────────────────────────────────────────────────────
-    /**
-     * Collect behavioral telemetry from all secure child fields and compute
-     * a session-level risk score.
-     *
-     * @private
-     */
-    #collectTelemetry() {
-        const selector = 'secure-input, secure-textarea, secure-select, secure-datetime, secure-card';
-        const secureFields = this.querySelectorAll(selector);
-        const fields = [];
-        secureFields.forEach((field) => {
-            const typedField = field;
-            if (typeof typedField.getFieldTelemetry !== 'function')
-                return;
-            const fieldName = field.getAttribute('name') ?? field.tagName.toLowerCase();
-            const snapshot = {
-                ...typedField.getFieldTelemetry(),
-                fieldName,
-                fieldType: field.tagName.toLowerCase(),
-            };
-            fields.push(snapshot);
-        });
-        const sessionDuration = Date.now() - this.#sessionStart;
-        const { riskScore, riskSignals } = this.#computeRiskScore(fields, sessionDuration);
-        return {
-            sessionDuration,
-            fieldCount: fields.length,
-            fields,
-            riskScore,
-            riskSignals,
-            submittedAt: new Date().toISOString(),
-        };
-    }
-    /**
-     * Compute a composite risk score 0–100 and list of contributing signals.
-     *
-     * Signal weights (additive, capped at 100):
-     * - Session completed in under 3 s:             +30  (inhuman speed)
-     * - Session completed in under 8 s:             +10  (very fast)
-     * - All fields pasted (no keystrokes anywhere): +25  (credential stuffing / scripted fill)
-     * - Any field has typing velocity > 15 ks/s:    +15  (bot-like keyboard simulation)
-     * - Any field never focused (focusCount = 0):   +15  (field was filled without user interaction)
-     * - Multiple fields probed without entry:        +10  (focusCount > 1 but blurWithoutChange > 1)
-     * - High correction count on any field (> 5):   +5   (deliberate obfuscation / hesitation)
-     * - Autofill on all non-empty fields:           -10  (genuine browser autofill is low-risk)
-     *
-     * @private
-     */
-    #computeRiskScore(fields, sessionDuration) {
-        const signals = [];
-        let score = 0;
-        // Session speed
-        if (sessionDuration < 3000) {
-            score += 30;
-            signals.push('session_too_fast');
-        }
-        else if (sessionDuration < 8000) {
-            score += 10;
-            signals.push('session_fast');
-        }
-        if (fields.length === 0) {
-            return { riskScore: Math.min(score, 100), riskSignals: signals };
-        }
-        // All fields pasted with zero keystrokes — scripted fill
-        const allPasted = fields.every(f => f.pasteDetected && f.velocity === 0);
-        if (allPasted) {
-            score += 25;
-            signals.push('all_fields_pasted');
-        }
-        // Any field with superhuman typing speed
-        const hasHighVelocity = fields.some(f => f.velocity > 15);
-        if (hasHighVelocity) {
-            score += 15;
-            signals.push('high_velocity_typing');
-        }
-        // Any field never touched (focusCount === 0) — programmatic fill
-        const hasUnfocusedField = fields.some(f => f.focusCount === 0);
-        if (hasUnfocusedField) {
-            score += 15;
-            signals.push('field_filled_without_focus');
-        }
-        // Form probing: multiple focus/blur cycles with no value entry
-        const hasProbing = fields.some(f => f.focusCount > 1 && f.blurWithoutChange > 1);
-        if (hasProbing) {
-            score += 10;
-            signals.push('form_probing');
-        }
-        // Excessive corrections on any field
-        const hasHighCorrections = fields.some(f => f.corrections > 5);
-        if (hasHighCorrections) {
-            score += 5;
-            signals.push('high_correction_count');
-        }
-        // Genuine autofill on all non-empty fields is a trust signal — reduce score
-        const autofillFields = fields.filter(f => f.autofillDetected);
-        if (autofillFields.length > 0 && autofillFields.length === fields.length) {
-            score -= 10;
-            signals.push('autofill_detected');
-        }
-        return { riskScore: Math.max(0, Math.min(score, 100)), riskSignals: signals };
-    }
-    /**
-     * Get form data
-     *
-     * @public
-     */
-    getData() {
-        return this.#collectFormData();
-    }
-    /**
-     * Reset the form
-     *
-     * @public
-     */
-    reset() {
-        if (this.#formElement) {
-            this.#formElement.reset();
-            this.#clearStatus();
-            this.audit('form_reset', {
-                formId: this.#instanceId
-            });
-        }
-    }
-    /**
-     * Programmatically submit the form
-     *
-     * @public
-     */
-    submit() {
-        if (this.#formElement) {
-            // Trigger submit event which will run our validation
-            this.#formElement.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
-        }
-    }
-    /**
-     * Check if form is valid
-     *
-     * @public
-     */
-    get valid() {
-        const validation = this.#validateAllFields();
-        return validation.valid;
-    }
-    /**
-     * Cleanup on disconnect
-     */
-    disconnectedCallback() {
-        // Clear any sensitive form data
-        if (this.#formElement) {
-            this.#formElement.reset();
-        }
-    }
-    /**
-     * Handle attribute changes
-     */
-    attributeChangedCallback(name, _oldValue, newValue) {
-        if (!this.#formElement)
-            return;
-        switch (name) {
-            case 'security-tier':
-                this.#securityTier = (newValue || SecurityTier.PUBLIC);
-                break;
-            case 'action':
-                this.#formElement.action = newValue;
-                break;
-            case 'method':
-                this.#formElement.method = newValue;
-                break;
-            case 'csrf-token':
-                if (this.#csrfInput) {
-                    this.#csrfInput.value = newValue;
-                }
-                break;
-        }
-    }
-    /**
-     * Get security tier
-     */
-    get securityTier() {
-        return this.#securityTier;
-    }
-    /**
-     * Sanitize a value to prevent XSS
-     *
-     * Uses the same div.textContent round-trip as SecureBaseComponent to correctly
-     * handle all injection vectors (attribute injection, entity encoding, etc).
-     */
-    sanitizeValue(value) {
-        if (typeof value !== 'string')
-            return '';
-        const div = document.createElement('div');
-        div.textContent = value;
-        return div.innerHTML;
-    }
-    /**
-     * Audit log helper
-     */
-    audit(action, data) {
-        if (console.debug) {
-            console.debug(`[secure-form] ${action}`, data);
-        }
-    }
-    /**
-     * Check rate limit (stub - implement proper rate limiting in production)
-     */
-    checkRateLimit() {
-        return { allowed: true, retryAfter: 0 };
-    }
-}
-_a = SecureForm;
-// Define the custom element
-customElements.define('secure-form', SecureForm);
-export default SecureForm;
-//# sourceMappingURL=secure-form.js.map
+ */var d;import{SecurityTier as u}from"../../core/security-config.js";class m extends HTMLElement{static __stylesAdded=!1;#t=null;#e=null;#i=null;#n=!1;#u=Date.now();#s=`secure-form-${Math.random().toString(36).substring(2,11)}`;#r=u.PUBLIC;static get observedAttributes(){return["security-tier","action","method","enctype","csrf-token","csrf-header-name","csrf-field-name","novalidate"]}constructor(){super()}connectedCallback(){if(this.#t)return;this.#u=Date.now();const t=this.getAttribute("security-tier");t&&(this.#r=t);const s=this.querySelector("form");if(s){this.#t=s,this.#t.id=this.#s,this.#t.classList.contains("secure-form")||this.#t.classList.add("secure-form"),this.#l();const e=this.getAttribute("csrf-field-name")||"csrf_token",i=s.querySelector(`input[name="${e}"]`);if(i){this.#e=i;const r=this.getAttribute("csrf-token");r&&i.value!==r&&(i.value=r)}else this.#h()}else{for(this.#t=document.createElement("form"),this.#t.id=this.#s,this.#t.className="secure-form",this.#l(),this.#h();this.firstChild;)this.#t.appendChild(this.firstChild);this.appendChild(this.#t)}this.#i=document.createElement("div"),this.#i.className="form-status form-status-hidden",this.#i.setAttribute("role","status"),this.#i.setAttribute("aria-live","polite"),this.#t.insertBefore(this.#i,this.#t.firstChild),this.#p(),this.#b(),this.audit("form_initialized",{formId:this.#s,action:this.#t.action,method:this.#t.method})}#p(){if(!d.__stylesAdded){const t=document.createElement("link");t.rel="stylesheet",t.href=new URL("./secure-form.css",import.meta.url).href,document.head.appendChild(t),d.__stylesAdded=!0}}#l(){const t=this.getAttribute("action");t&&(this.#t.action=t);const s=this.getAttribute("method")||"POST";this.#t.method=s.toUpperCase();const e=this.getAttribute("enctype")||"application/x-www-form-urlencoded";this.#t.enctype=e,this.hasAttribute("novalidate")&&(this.#t.noValidate=!0),(this.#r===u.SENSITIVE||this.#r===u.CRITICAL)&&(this.#t.autocomplete="off")}#h(){const t=this.getAttribute("csrf-token");if(t){this.#e=document.createElement("input"),this.#e.type="hidden";const s=this.getAttribute("csrf-field-name")||"csrf_token";this.#e.name=s,this.#e.value=t,this.#t.appendChild(this.#e),this.audit("csrf_token_injected",{formId:this.#s,fieldName:s})}else(this.securityTier===u.SENSITIVE||this.securityTier===u.CRITICAL)&&console.warn("CSRF token not provided for SENSITIVE/CRITICAL tier form")}#b(){this.#t.addEventListener("submit",t=>{this.#y(t)}),this.addEventListener("secure-input",t=>{this.#o(t)}),this.addEventListener("secure-textarea",t=>{this.#o(t)}),this.addEventListener("secure-select",t=>{this.#o(t)})}#o(t){this.#f()}async#y(t){const s=this.hasAttribute("enhance");if(this.#n){t.preventDefault();return}(this.#r===u.SENSITIVE||this.#r===u.CRITICAL)&&!this.#e?.value&&this.dispatchEvent(new CustomEvent("secure-threat-detected",{detail:{fieldName:this.#s,threatType:"csrf-token-absent",patternId:"csrf-token-absent",tier:this.#r,timestamp:Date.now()},bubbles:!0,composed:!0}));const e=this.checkRateLimit();if(!e.allowed){t.preventDefault(),this.#a(`Too many submission attempts. Please wait ${Math.ceil(e.retryAfter/1e3)} seconds.`,"error"),this.audit("form_rate_limited",{formId:this.#s,retryAfter:e.retryAfter});return}const i=this.#d();if(!i.valid){t.preventDefault(),this.#a(i.errors.join(", "),"error"),this.audit("form_validation_failed",{formId:this.#s,errors:i.errors});return}if(!s){this.#g(),this.audit("form_submitted_native",{formId:this.#s,action:this.#t.action,method:this.#t.method});return}t.preventDefault(),this.#n=!0,this.#a("Submitting...","info"),this.#S();const r=this.#m(),a=this.#A();this.audit("form_submitted_enhanced",{formId:this.#s,action:this.#t.action,method:this.#t.method,fieldCount:Object.keys(r).length,riskScore:a.riskScore,riskSignals:a.riskSignals});const c=new CustomEvent("secure-form-submit",{detail:{formData:r,formElement:this.#t,telemetry:a,preventDefault:()=>{this.#n=!1,this.#c()}},bubbles:!0,composed:!0,cancelable:!0});if(!this.dispatchEvent(c)){this.#n=!1,this.#c();return}try{await this.#v(r,a)}catch(l){this.#a("Submission failed. Please try again.","error"),this.audit("form_submission_error",{formId:this.#s,error:l.message})}finally{this.#n=!1,this.#c()}}#g(){this.#t.querySelectorAll("secure-input, secure-textarea, secure-select, secure-datetime, secure-file-upload").forEach(s=>{const e=s.getAttribute("name");if(!e)return;s.querySelectorAll(`input[name="${e}"], textarea[name="${e}"], select[name="${e}"]`).forEach(a=>{a.removeAttribute("name")});let r=this.#t.querySelector(`input[type="hidden"][data-secure-input="${e}"]`);r||(r=document.createElement("input"),r.type="hidden",r.setAttribute("data-secure-input",e),r.name=e,this.#t.appendChild(r)),r.value=s.value||""})}#d(){const t=[];return this.#t.querySelectorAll("secure-input, secure-textarea, secure-select, secure-datetime, secure-file-upload").forEach(e=>{if(typeof e.valid=="boolean"&&!e.valid){const i=e.getAttribute("label")||e.getAttribute("name")||"Field";t.push(`${i} is invalid`)}}),{valid:t.length===0,errors:t}}#m(){const t=Object.create(null);return this.#t.querySelectorAll("secure-input, secure-textarea, secure-select, secure-datetime, secure-file-upload").forEach(i=>{const r=i;r.name&&(t[r.name]=r.value)}),this.#t.querySelectorAll('input:not([type="hidden"]), textarea:not(.textarea-field), select:not(.select-field)').forEach(i=>{const r=i;r.name&&(t[r.name]=this.sanitizeValue(r.value))}),this.#e&&(t[this.#e.name]=this.#e.value),t}async#v(t,s){const e=this.#t.action,i=this.#t.method,r={"Content-Type":"application/json"},a=this.getAttribute("csrf-header-name");a&&this.#e&&(r[a]=this.#e.value);const c={...t,_telemetry:s},o=await fetch(e,{method:i,headers:r,body:JSON.stringify(c),credentials:"same-origin",mode:"cors",cache:"no-cache",redirect:"follow"});if(!o.ok)throw new Error(`HTTP ${o.status}: ${o.statusText}`);return this.#a("Form submitted successfully!","success"),this.dispatchEvent(new CustomEvent("secure-form-success",{detail:{formData:t,response:o,telemetry:s},bubbles:!0,composed:!0})),o}#S(){this.#t.querySelectorAll("input, textarea, select, button").forEach(e=>{e.disabled=!0}),this.querySelectorAll("secure-input, secure-textarea, secure-select, secure-datetime, secure-file-upload").forEach(e=>{e.setAttribute("disabled","")})}#c(){this.#t.querySelectorAll("input, textarea, select, button").forEach(e=>{e.disabled=!1}),this.querySelectorAll("secure-input, secure-textarea, secure-select, secure-datetime, secure-file-upload").forEach(e=>{e.removeAttribute("disabled")})}#a(t,s="info"){this.#i.textContent=t,this.#i.className=`form-status form-status-${s}`}#f(){this.#i.textContent="",this.#i.className="form-status form-status-hidden"}#A(){const s=this.querySelectorAll("secure-input, secure-textarea, secure-select, secure-datetime, secure-card"),e=[];s.forEach(c=>{const o=c;if(typeof o.getFieldTelemetry!="function")return;const l=c.getAttribute("name")??c.tagName.toLowerCase(),h={...o.getFieldTelemetry(),fieldName:l,fieldType:c.tagName.toLowerCase()};e.push(h)});const i=Date.now()-this.#u,{riskScore:r,riskSignals:a}=this.#C(e,i);return{sessionDuration:i,fieldCount:e.length,fields:e,riskScore:r,riskSignals:a,submittedAt:new Date().toISOString()}}#C(t,s){const e=[];let i=0;if(s<3e3?(i+=30,e.push("session_too_fast")):s<8e3&&(i+=10,e.push("session_fast")),t.length===0)return{riskScore:Math.min(i,100),riskSignals:e};t.every(n=>n.pasteDetected&&n.velocity===0)&&(i+=25,e.push("all_fields_pasted")),t.some(n=>n.velocity>15)&&(i+=15,e.push("high_velocity_typing")),t.some(n=>n.focusCount===0)&&(i+=15,e.push("field_filled_without_focus")),t.some(n=>n.focusCount>1&&n.blurWithoutChange>1)&&(i+=10,e.push("form_probing")),t.some(n=>n.corrections>5)&&(i+=5,e.push("high_correction_count"));const h=t.filter(n=>n.autofillDetected);return h.length>0&&h.length===t.length&&(i-=10,e.push("autofill_detected")),{riskScore:Math.max(0,Math.min(i,100)),riskSignals:e}}getData(){return this.#m()}reset(){this.#t&&(this.#t.reset(),this.#f(),this.audit("form_reset",{formId:this.#s}))}submit(){this.#t&&this.#t.dispatchEvent(new Event("submit",{bubbles:!0,cancelable:!0}))}get valid(){return this.#d().valid}disconnectedCallback(){this.#t&&this.#t.reset()}attributeChangedCallback(t,s,e){if(this.#t)switch(t){case"security-tier":this.#r=e||u.PUBLIC;break;case"action":this.#t.action=e;break;case"method":this.#t.method=e;break;case"csrf-token":this.#e&&(this.#e.value=e);break}}get securityTier(){return this.#r}sanitizeValue(t){if(typeof t!="string")return"";const s=document.createElement("div");return s.textContent=t,s.innerHTML}audit(t,s){console.debug&&console.debug(`[secure-form] ${t}`,s)}checkRateLimit(){return{allowed:!0,retryAfter:0}}}d=m,customElements.define("secure-form",m);var b=m;export{m as SecureForm,b as default};