secure-ui-components 0.1.0-beta.1

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

@@ -0,0 +1,477 @@
+/**
+ * @fileoverview Secure Textarea Component
+ *
+ * A security-first textarea component that implements progressive enhancement,
+ * tier-based validation, character counting, and audit logging.
+ *
+ * Progressive Enhancement Strategy:
+ * 1. Without JavaScript: Falls back to native HTML5 textarea with attributes
+ * 2. With JavaScript: Enhances with real-time validation, character limits, rate limiting
+ *
+ * Usage:
+ * <secure-textarea
+ *   security-tier="sensitive"
+ *   name="bio"
+ *   label="Biography"
+ *   rows="5"
+ *   required
+ * ></secure-textarea>
+ *
+ * Security Features:
+ * - XSS prevention via sanitization
+ * - Character counting and limits based on security tier
+ * - Rate limiting for sensitive/critical tiers
+ * - Autocomplete control based on tier
+ * - Comprehensive audit logging
+ * - Visual security indicators
+ *
+ * @module secure-textarea
+ * @license MIT
+ */
+import { SecureBaseComponent } from '../../core/base-component.js';
+/**
+ * Secure Textarea Web Component
+ *
+ * Provides a security-hardened textarea field with progressive enhancement.
+ * The component works as a standard form textarea without JavaScript and
+ * enhances with security features when JavaScript is available.
+ *
+ * @extends SecureBaseComponent
+ */
+export class SecureTextarea extends SecureBaseComponent {
+    /**
+     * Textarea element reference
+     * @private
+     */
+    #textareaElement = null;
+    /**
+     * Label element reference
+     * @private
+     */
+    #labelElement = null;
+    /**
+     * Error container element reference
+     * @private
+     */
+    #errorContainer = null;
+    /**
+     * Character count display element
+     * @private
+     */
+    #charCountElement = null;
+    /**
+     * Unique ID for this textarea instance
+     * @private
+     */
+    #instanceId = `secure-textarea-${Math.random().toString(36).substr(2, 9)}`;
+    /**
+     * Observed attributes for this component
+     *
+     * @static
+     */
+    static get observedAttributes() {
+        return [
+            ...super.observedAttributes,
+            'name',
+            'label',
+            'placeholder',
+            'required',
+            'minlength',
+            'maxlength',
+            'rows',
+            'cols',
+            'wrap',
+            'value'
+        ];
+    }
+    /**
+     * Constructor
+     */
+    constructor() {
+        super();
+    }
+    /**
+     * Render the textarea component
+     *
+     * Security Note: We use a native <textarea> element wrapped in our web component
+     * to ensure progressive enhancement. The native textarea works without JavaScript,
+     * and we enhance it with security features when JS is available.
+     *
+     * @protected
+     */
+    render() {
+        const fragment = document.createDocumentFragment();
+        const config = this.config;
+        // Create container
+        const container = document.createElement('div');
+        container.className = 'textarea-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);
+            // Add security tier suffix if configured
+            if (config.ui.labelSuffix) {
+                const suffix = document.createElement('span');
+                suffix.className = 'label-suffix';
+                suffix.textContent = config.ui.labelSuffix;
+                this.#labelElement.appendChild(suffix);
+            }
+            // Add security badge if configured
+            if (config.ui.showSecurityBadge) {
+                const badge = document.createElement('span');
+                badge.className = 'security-badge';
+                badge.textContent = config.name;
+                this.#labelElement.appendChild(badge);
+            }
+            container.appendChild(this.#labelElement);
+        }
+        // Create textarea wrapper for progressive enhancement
+        const textareaWrapper = document.createElement('div');
+        textareaWrapper.className = 'textarea-wrapper';
+        // Create the actual textarea element
+        this.#textareaElement = document.createElement('textarea');
+        this.#textareaElement.id = this.#instanceId;
+        this.#textareaElement.className = 'textarea-field';
+        // Apply attributes from web component to native textarea
+        this.#applyTextareaAttributes();
+        // Set up event listeners
+        this.#attachEventListeners();
+        textareaWrapper.appendChild(this.#textareaElement);
+        container.appendChild(textareaWrapper);
+        // Create character count display
+        this.#charCountElement = document.createElement('span');
+        this.#charCountElement.className = 'char-count';
+        this.#updateCharCount();
+        container.appendChild(this.#charCountElement);
+        // 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.id = `${this.#instanceId}-error`;
+        container.appendChild(this.#errorContainer);
+        // Add component styles (CSP-compliant via adoptedStyleSheets)
+        this.addComponentStyles(this.#getComponentStyles());
+        fragment.appendChild(container);
+        return fragment;
+    }
+    /**
+     * Apply attributes from the web component to the native textarea
+     *
+     * Security Note: This is where we enforce tier-specific security controls
+     * like autocomplete, caching, and validation rules.
+     *
+     * @private
+     */
+    #applyTextareaAttributes() {
+        const config = this.config;
+        // Name attribute (required for form submission)
+        const name = this.getAttribute('name');
+        if (name) {
+            this.#textareaElement.name = this.sanitizeValue(name);
+        }
+        // Accessible name fallback when no visible label is provided
+        if (!this.getAttribute('label') && name) {
+            this.#textareaElement.setAttribute('aria-label', this.sanitizeValue(name));
+        }
+        // Link textarea to its error container for screen readers
+        this.#textareaElement.setAttribute('aria-describedby', `${this.#instanceId}-error`);
+        // Placeholder
+        const placeholder = this.getAttribute('placeholder');
+        if (placeholder) {
+            this.#textareaElement.placeholder = this.sanitizeValue(placeholder);
+        }
+        // Required attribute
+        if (this.hasAttribute('required') || config.validation.required) {
+            this.#textareaElement.required = true;
+            this.#textareaElement.setAttribute('aria-required', 'true');
+        }
+        // Length constraints
+        const minLength = this.getAttribute('minlength');
+        if (minLength) {
+            this.#textareaElement.minLength = parseInt(minLength, 10);
+        }
+        const maxLength = this.getAttribute('maxlength') || config.validation.maxLength;
+        if (maxLength) {
+            this.#textareaElement.maxLength = parseInt(String(maxLength), 10);
+        }
+        // Rows and columns
+        const rows = this.getAttribute('rows') || 3;
+        this.#textareaElement.rows = parseInt(String(rows), 10);
+        const cols = this.getAttribute('cols');
+        if (cols) {
+            this.#textareaElement.cols = parseInt(cols, 10);
+        }
+        // Wrap attribute
+        const wrap = this.getAttribute('wrap') || 'soft';
+        this.#textareaElement.wrap = wrap;
+        // 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.#textareaElement.autocomplete = autocomplete;
+        }
+        else {
+            this.#textareaElement.autocomplete = 'off';
+        }
+        // Disabled state
+        if (this.hasAttribute('disabled')) {
+            this.#textareaElement.disabled = true;
+        }
+        // Readonly state
+        if (this.hasAttribute('readonly')) {
+            this.#textareaElement.readOnly = true;
+        }
+        // Initial value
+        const value = this.getAttribute('value');
+        if (value) {
+            this.#textareaElement.value = value;
+        }
+    }
+    /**
+     * Attach event listeners to the textarea
+     *
+     * @private
+     */
+    #attachEventListeners() {
+        // Focus event - audit logging
+        this.#textareaElement.addEventListener('focus', () => {
+            this.audit('textarea_focused', {
+                name: this.#textareaElement.name
+            });
+        });
+        // Input event - real-time validation and character counting
+        this.#textareaElement.addEventListener('input', (e) => {
+            this.#handleInput(e);
+        });
+        // Blur event - final validation
+        this.#textareaElement.addEventListener('blur', () => {
+            this.#validateAndShowErrors();
+            this.audit('textarea_blurred', {
+                name: this.#textareaElement.name,
+                hasValue: this.#textareaElement.value.length > 0
+            });
+        });
+        // Change event - audit logging
+        this.#textareaElement.addEventListener('change', () => {
+            this.audit('textarea_changed', {
+                name: this.#textareaElement.name,
+                valueLength: this.#textareaElement.value.length
+            });
+        });
+    }
+    /**
+     * Handle input events
+     *
+     * Security Note: This is where we implement real-time validation and character counting.
+     *
+     * @private
+     */
+    #handleInput(_event) {
+        // Update character count
+        this.#updateCharCount();
+        // Clear previous errors on input (improve UX)
+        this.#clearErrors();
+        // Dispatch custom event for parent forms
+        this.dispatchEvent(new CustomEvent('secure-textarea', {
+            detail: {
+                name: this.#textareaElement.name,
+                value: this.#textareaElement.value,
+                tier: this.securityTier
+            },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    /**
+     * Update character count display
+     *
+     * @private
+     */
+    #updateCharCount() {
+        const currentLength = this.#textareaElement.value.length;
+        const maxLength = this.#textareaElement.maxLength;
+        if (maxLength > 0) {
+            this.#charCountElement.textContent = `${currentLength} / ${maxLength}`;
+            // Warn when approaching limit
+            if (currentLength > maxLength * 0.9) {
+                this.#charCountElement.classList.add('warning');
+            }
+            else {
+                this.#charCountElement.classList.remove('warning');
+            }
+        }
+        else {
+            this.#charCountElement.textContent = `${currentLength}`;
+        }
+    }
+    /**
+     * Validate the textarea 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 validation
+        const minLength = this.getAttribute('minlength');
+        const maxLength = this.getAttribute('maxlength');
+        const validation = this.validateInput(this.#textareaElement.value, {
+            minLength: minLength ? parseInt(minLength, 10) : 0,
+            maxLength: maxLength ? parseInt(maxLength, 10) : this.config.validation.maxLength
+        });
+        if (!validation.valid) {
+            this.#showError(validation.errors.join(', '));
+        }
+    }
+    /**
+     * 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.#textareaElement.classList.add('error');
+        this.#textareaElement.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.#textareaElement.classList.remove('error');
+        this.#textareaElement.removeAttribute('aria-invalid');
+    }
+    /**
+     * Get component-specific styles
+     *
+     * @private
+     */
+    #getComponentStyles() {
+        return new URL('./secure-textarea.css', import.meta.url).href;
+    }
+    /**
+     * Handle attribute changes
+     *
+     * @protected
+     */
+    handleAttributeChange(name, _oldValue, newValue) {
+        if (!this.#textareaElement)
+            return;
+        switch (name) {
+            case 'disabled':
+                this.#textareaElement.disabled = this.hasAttribute('disabled');
+                break;
+            case 'readonly':
+                this.#textareaElement.readOnly = this.hasAttribute('readonly');
+                break;
+            case 'value':
+                if (newValue !== this.#textareaElement.value) {
+                    this.#textareaElement.value = newValue || '';
+                    this.#updateCharCount();
+                }
+                break;
+        }
+    }
+    /**
+     * Get the current value
+     *
+     * @public
+     */
+    get value() {
+        return this.#textareaElement ? this.#textareaElement.value : '';
+    }
+    /**
+     * Set the value
+     *
+     * @public
+     */
+    set value(value) {
+        if (this.#textareaElement) {
+            this.#textareaElement.value = value || '';
+            this.#updateCharCount();
+        }
+    }
+    /**
+     * Get the textarea name
+     *
+     * @public
+     */
+    get name() {
+        return this.#textareaElement ? this.#textareaElement.name : '';
+    }
+    /**
+     * Check if the textarea is valid
+     *
+     * @public
+     */
+    get valid() {
+        const minLength = this.getAttribute('minlength');
+        const maxLength = this.getAttribute('maxlength');
+        const required = this.hasAttribute('required');
+        // Check required field first
+        if (required || this.config.validation.required) {
+            if (!this.#textareaElement.value || this.#textareaElement.value.trim().length === 0) {
+                return false;
+            }
+        }
+        const validation = this.validateInput(this.#textareaElement.value, {
+            minLength: minLength ? parseInt(minLength, 10) : 0,
+            maxLength: maxLength ? parseInt(maxLength, 10) : this.config.validation.maxLength
+        });
+        return validation.valid;
+    }
+    /**
+     * Focus the textarea
+     *
+     * @public
+     */
+    focus() {
+        if (this.#textareaElement) {
+            this.#textareaElement.focus();
+        }
+    }
+    /**
+     * Blur the textarea
+     *
+     * @public
+     */
+    blur() {
+        if (this.#textareaElement) {
+            this.#textareaElement.blur();
+        }
+    }
+    /**
+     * Cleanup on disconnect
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // Clear sensitive data from memory
+        if (this.#textareaElement) {
+            this.#textareaElement.value = '';
+        }
+    }
+}
+// Define the custom element
+customElements.define('secure-textarea', SecureTextarea);
+export default SecureTextarea;
+//# sourceMappingURL=secure-textarea.js.map

package/dist/components/secure-textarea/secure-textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"secure-textarea.js","sourceRoot":"","sources":["../../../src/components/secure-textarea/secure-textarea.ts"],"names":[],"mappings":"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"}

package/dist/core/base-component.d.ts

@@ -0,0 +1,134 @@
+/**
+ * @fileoverview Base Component Class for Secure-UI
+ *
+ * This module provides the foundational class that all Secure-UI web components
+ * extend. It implements core security features, progressive enhancement,
+ * and standardized lifecycle management.
+ *
+ * Security Features:
+ * - Closed Shadow DOM (prevents external JavaScript access)
+ * - Automatic XSS sanitization
+ * - Security tier enforcement
+ * - Audit logging infrastructure
+ * - Rate limiting support
+ * - Progressive enhancement (works without JS)
+ *
+ * @module base-component
+ * @license MIT
+ */
+import type { SecurityTierValue, TierConfig, ValidationResult, ValidationOptions, RateLimitResult, AuditLogEntry } from './types.js';
+/**
+ * Base class for all Secure-UI components
+ *
+ * All components in the Secure-UI library should extend this class to inherit
+ * core security functionality and standardized behavior.
+ *
+ * Security Architecture:
+ * - Closed Shadow DOM prevents external tampering
+ * - All attributes are sanitized on read
+ * - Security tier is immutable after initial set
+ * - Default tier is CRITICAL (fail secure)
+ */
+export declare abstract class SecureBaseComponent extends HTMLElement {
+    #private;
+    /**
+     * Constructor
+     *
+     * Security Note: Creates a CLOSED shadow DOM to prevent external JavaScript
+     * from accessing or modifying the component's internal DOM.
+     */
+    constructor();
+    /**
+     * Observed attributes - must be overridden by child classes
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Called when element is added to DOM
+     */
+    connectedCallback(): void;
+    /**
+     * Initialize security tier, config, and audit logging without triggering render.
+     *
+     * Components that manage their own rendering (e.g. secure-table) can call this
+     * from their connectedCallback instead of super.connectedCallback() to get
+     * security initialization without the base render lifecycle.
+     * @protected
+     */
+    protected initializeSecurity(): void;
+    /**
+     * Called when an observed attribute changes
+     *
+     * Security Note: security-tier attribute is immutable after initialization
+     * to prevent privilege escalation.
+     */
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /**
+     * Handle attribute changes - to be overridden by child classes
+     */
+    protected handleAttributeChange(_name: string, _oldValue: string | null, _newValue: string | null): void;
+    /**
+     * Returns the URL of the shared base stylesheet.
+     * Components that manage their own rendering (e.g. secure-table) can use
+     * this to inject the base <link> themselves.
+     * @protected
+     */
+    protected getBaseStylesheetUrl(): string;
+    /**
+     * Inject a component stylesheet into the shadow root via <link>.
+     * Accepts a URL (use import.meta.url to derive it, e.g.
+     *   new URL('./my-component.css', import.meta.url).href
+     * ). Loading from 'self' satisfies strict CSP without unsafe-inline.
+     * @protected
+     */
+    protected addComponentStyles(cssUrl: string): void;
+    /**
+     * Render method to be implemented by child classes
+     */
+    protected abstract render(): DocumentFragment | HTMLElement | null;
+    /**
+     * Sanitize a string value to prevent XSS
+     */
+    protected sanitizeValue(value: string): string;
+    /**
+     * Validate input against tier-specific rules
+     */
+    protected validateInput(value: string, options?: ValidationOptions): ValidationResult;
+    /**
+     * Check rate limit for this component
+     */
+    protected checkRateLimit(): RateLimitResult;
+    /**
+     * Get the shadow root (protected access for child classes)
+     */
+    get shadowRoot(): ShadowRoot;
+    /**
+     * Get the current security tier
+     */
+    get securityTier(): SecurityTierValue;
+    /**
+     * Get the tier configuration
+     */
+    get config(): TierConfig;
+    /**
+     * Get all audit log entries
+     */
+    getAuditLog(): AuditLogEntry[];
+    /**
+     * Clear the local audit log
+     */
+    clearAuditLog(): void;
+    /**
+     * Trigger an audit event from child classes
+     */
+    protected audit(event: string, data: Record<string, unknown>): void;
+    /**
+     * Force re-render of the component
+     */
+    protected rerender(): void;
+    /**
+     * Clean up when component is removed from DOM
+     */
+    disconnectedCallback(): void;
+}
+export default SecureBaseComponent;
+//# sourceMappingURL=base-component.d.ts.map

package/dist/core/base-component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-component.d.ts","sourceRoot":"","sources":["../../src/core/base-component.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAQH,OAAO,KAAK,EACV,iBAAiB,EACjB,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EAEf,aAAa,EACd,MAAM,YAAY,CAAC;AAEpB;;;;;;;;;;;GAWG;AACH,8BAAsB,mBAAoB,SAAQ,WAAW;;IAW3D;;;;;OAKG;;IAOH;;OAEG;IACH,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAYzB;;;;;;;OAOG;IACH,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAcpC;;;;;OAKG;IACH,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAiB9F;;OAEG;IACH,SAAS,CAAC,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAsBxG;;;;;OAKG;IACH,SAAS,CAAC,oBAAoB,IAAI,MAAM;IAIxC;;;;;;OAMG;IACH,SAAS,CAAC,kBAAkB,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAOlD;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,MAAM,IAAI,gBAAgB,GAAG,WAAW,GAAG,IAAI;IAElE;;OAEG;IACH,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAU9C;;OAEG;IACH,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB,GAAG,gBAAgB;IAoCzF;;OAEG;IACH,SAAS,CAAC,cAAc,IAAI,eAAe;IAiE3C;;OAEG;IACH,IAAI,UAAU,IAAI,UAAU,CAE3B;IAED;;OAEG;IACH,IAAI,YAAY,IAAI,iBAAiB,CAEpC;IAED;;OAEG;IACH,IAAI,MAAM,IAAI,UAAU,CAEvB;IAED;;OAEG;IACH,WAAW,IAAI,aAAa,EAAE;IAI9B;;OAEG;IACH,aAAa,IAAI,IAAI;IAIrB;;OAEG;IACH,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAInE;;OAEG;IACH,SAAS,CAAC,QAAQ,IAAI,IAAI;IAI1B;;OAEG;IACH,oBAAoB,IAAI,IAAI;CAS7B;AAED,eAAe,mBAAmB,CAAC"}