atomicuilibrary 0.0.1 → 0.1.0

package/dist/collection/components/loader/loader.js

@@ -0,0 +1,1120 @@
+import { h } from "@stencil/core";
+export class Loader {
+    element;
+    /**
+     * Accessibility ARIA label
+     */
+    ariaLabel = 'Loading...';
+    /**
+     * ARIA live region mode
+     */
+    ariaLive = 'polite';
+    /**
+     * Apply background blur (glassmorphic backdrop)
+     */
+    backdropBlur = false;
+    /**
+     * Alias for blur attribute used in demo configuration
+     */
+    enableBlur = false;
+    /**
+     * Semantic color variant ('primary', 'secondary', etc.) or custom hex/gradient string
+     */
+    color = 'primary';
+    /**
+     * Displays the loader as a full viewport overlay
+     */
+    fullscreen = false;
+    /**
+     * Text label to display alongside the loader animation
+     */
+    label;
+    /**
+     * Sub-label description text
+     */
+    description;
+    /**
+     * Position of the label relative to the loading animation
+     */
+    labelPosition = 'bottom';
+    /**
+     * Displays the loader as an absolute overlay over its relative parent container
+     */
+    overlay = false;
+    /**
+     * Opacity value of the overlay backdrop (0 to 1)
+     */
+    overlayOpacity = 0.5;
+    /**
+     * Custom background color/gradient for overlay mode
+     */
+    overlayBackground;
+    /**
+     * Size of the loader preset ('3xs'...'jumbo') or custom CSS value ('120px', '4rem')
+     */
+    size = 'md';
+    /**
+     * Speed of animation cycle
+     */
+    speed = 'normal';
+    /**
+     * Stroke width thickness for circular loaders (spinner, ring)
+     */
+    thickness = 3;
+    /**
+     * The animation style variant type (34 total variants)
+     */
+    type = 'spinner';
+    /**
+     * Whether the loader is visible
+     */
+    visible = true;
+    /**
+     * Loader style theme variant
+     */
+    variant = 'standard';
+    /**
+     * Determinate state progress value (0 to 100)
+     */
+    value;
+    /**
+     * Enables simulated predictive non-linear crawling progress up to 95%
+     */
+    predictive = false;
+    /**
+     * Array of status messages to rotate through automatically
+     */
+    messages;
+    /**
+     * Rotation interval time in milliseconds
+     */
+    messageInterval = 2500;
+    /**
+     * Image URL when using type="image"
+     */
+    image;
+    /**
+     * Letters pool for Matrix matrix-rain animation
+     */
+    rainText;
+    /**
+     * Number of columns in Matrix digital rain
+     */
+    rainColumns = 5;
+    /**
+     * Traps keyboard focus inside the loader overlay (useful for fullscreen modals)
+     */
+    trapFocus = false;
+    /**
+     * Current loading status state
+     */
+    status = 'loading';
+    activeLabel;
+    currentProgress = 0;
+    // Events
+    uiShow;
+    uiHide;
+    messageTimer;
+    predictiveTimer;
+    activeMessageIndex = 0;
+    parsedMessages = [];
+    // Focus trap state
+    originalFocusedElement = null;
+    focusableElements = [];
+    // Matrix rain canvas references
+    canvasElement;
+    canvasAnimationId;
+    canvasColumnsDrops = [];
+    handleVisibilityChange(newValue) {
+        if (newValue) {
+            this.uiShow.emit();
+            this.startTimers();
+            if (this.trapFocus) {
+                this.setupFocusTrap();
+            }
+        }
+        else {
+            this.uiHide.emit();
+            this.stopTimers();
+            this.releaseFocusTrap();
+        }
+    }
+    parseMessagesProp() {
+        if (!this.messages) {
+            this.parsedMessages = [];
+            return;
+        }
+        if (typeof this.messages === 'string') {
+            try {
+                this.parsedMessages = JSON.parse(this.messages);
+            }
+            catch {
+                // Fallback split by comma or treat as single item array
+                this.parsedMessages = this.messages.includes(',')
+                    ? this.messages.split(',').map(m => m.trim())
+                    : [this.messages];
+            }
+        }
+        else if (Array.isArray(this.messages)) {
+            this.parsedMessages = this.messages;
+        }
+        this.activeMessageIndex = 0;
+        this.updateActiveLabel();
+    }
+    handleStatusChange(newStatus) {
+        if (newStatus === 'success' && this.predictive) {
+            // Rapidly complete progress to 100%
+            clearInterval(this.predictiveTimer);
+            this.predictiveTimer = setInterval(() => {
+                if (this.currentProgress < 100) {
+                    this.currentProgress = Math.min(100, this.currentProgress + 5);
+                }
+                else {
+                    clearInterval(this.predictiveTimer);
+                }
+            }, 30);
+        }
+    }
+    componentWillLoad() {
+        this.parseMessagesProp();
+        this.activeLabel = this.label;
+        if (this.value !== undefined) {
+            this.currentProgress = this.value;
+        }
+    }
+    componentDidLoad() {
+        if (this.visible) {
+            this.uiShow.emit();
+            this.startTimers();
+            if (this.trapFocus) {
+                this.setupFocusTrap();
+            }
+            if (this.type === 'raining-letters') {
+                this.initMatrixRain();
+            }
+        }
+    }
+    componentDidUpdate() {
+        if (this.type === 'raining-letters' && !this.canvasAnimationId) {
+            this.initMatrixRain();
+        }
+        else if (this.type !== 'raining-letters' && this.canvasAnimationId) {
+            this.stopMatrixRain();
+        }
+    }
+    disconnectedCallback() {
+        this.stopTimers();
+        this.releaseFocusTrap();
+        this.stopMatrixRain();
+    }
+    startTimers() {
+        this.stopTimers();
+        // 1. Rotating Messages
+        if (this.parsedMessages.length > 0) {
+            this.updateActiveLabel();
+            this.messageTimer = setInterval(() => {
+                this.activeMessageIndex = (this.activeMessageIndex + 1) % this.parsedMessages.length;
+                this.updateActiveLabel();
+            }, this.messageInterval);
+        }
+        // 2. Predictive Crawling Progress
+        if (this.predictive && this.status === 'loading') {
+            this.currentProgress = 0;
+            this.predictiveTimer = setInterval(() => {
+                if (this.currentProgress < 95) {
+                    // Logarithmic crawl: slower as progress approaches 95%
+                    const remaining = 95 - this.currentProgress;
+                    const increment = Math.max(0.1, remaining * 0.05 * Math.random());
+                    this.currentProgress = parseFloat((this.currentProgress + increment).toFixed(1));
+                }
+            }, 350);
+        }
+    }
+    stopTimers() {
+        if (this.messageTimer) {
+            clearInterval(this.messageTimer);
+            this.messageTimer = undefined;
+        }
+        if (this.predictiveTimer) {
+            clearInterval(this.predictiveTimer);
+            this.predictiveTimer = undefined;
+        }
+    }
+    updateActiveLabel() {
+        if (this.parsedMessages.length > 0 && this.activeMessageIndex < this.parsedMessages.length) {
+            this.activeLabel = this.parsedMessages[this.activeMessageIndex];
+        }
+        else {
+            this.activeLabel = this.label;
+        }
+    }
+    // Focus trapping support
+    setupFocusTrap() {
+        this.originalFocusedElement = document.activeElement;
+        setTimeout(() => {
+            this.focusableElements = this.getFocusableElements();
+            if (this.focusableElements.length > 0) {
+                this.focusableElements[0].focus();
+            }
+        }, 50);
+        document.addEventListener('keydown', this.handleKeyDown);
+    }
+    releaseFocusTrap() {
+        document.removeEventListener('keydown', this.handleKeyDown);
+        if (this.originalFocusedElement) {
+            this.originalFocusedElement.focus();
+            this.originalFocusedElement = null;
+        }
+    }
+    getFocusableElements() {
+        if (!this.element.shadowRoot)
+            return [];
+        // Select elements inside shadow root that might be focusable
+        const selectors = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';
+        const elements = Array.from(this.element.shadowRoot.querySelectorAll(selectors));
+        return elements;
+    }
+    handleKeyDown = (e) => {
+        if (!this.visible || !this.trapFocus)
+            return;
+        if (e.key === 'Tab') {
+            this.focusableElements = this.getFocusableElements();
+            if (this.focusableElements.length === 0) {
+                e.preventDefault();
+                return;
+            }
+            const first = this.focusableElements[0];
+            const last = this.focusableElements[this.focusableElements.length - 1];
+            const active = this.element.shadowRoot?.activeElement;
+            if (e.shiftKey) {
+                if (active === first || active === document.body) {
+                    last.focus();
+                    e.preventDefault();
+                }
+            }
+            else {
+                if (active === last) {
+                    first.focus();
+                    e.preventDefault();
+                }
+            }
+        }
+    };
+    // Matrix Rain Canvas Animation
+    initMatrixRain() {
+        if (!this.canvasElement)
+            return;
+        this.stopMatrixRain();
+        const canvas = this.canvasElement;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        // Set dimensions
+        const width = 160;
+        const height = 120;
+        canvas.width = width;
+        canvas.height = height;
+        const charPool = this.rainText || 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+        const columnsCount = Math.max(3, this.rainColumns);
+        const fontSize = Math.floor(width / columnsCount);
+        // Initialize drops y-coordinates
+        this.canvasColumnsDrops = [];
+        for (let i = 0; i < columnsCount; i++) {
+            this.canvasColumnsDrops.push(Math.random() * -10);
+        }
+        const draw = () => {
+            // Fade out background to create trailing stream effect
+            ctx.fillStyle = 'rgba(255, 255, 255, 0.15)';
+            ctx.fillRect(0, 0, width, height);
+            // Set character text color
+            let drawColor = '#10b981'; // default matrix emerald
+            if (this.color && !['primary', 'secondary', 'success', 'danger', 'warning', 'info'].includes(this.color)) {
+                drawColor = this.color;
+            }
+            else if (this.color === 'primary') {
+                drawColor = '#3b82f6'; // default primary blue
+            }
+            else if (this.color === 'danger') {
+                drawColor = '#ef4444';
+            }
+            else if (this.color === 'success') {
+                drawColor = '#10b981';
+            }
+            else if (this.color === 'warning') {
+                drawColor = '#f59e0b';
+            }
+            else if (this.color === 'info') {
+                drawColor = '#06b6d4';
+            }
+            ctx.fillStyle = drawColor;
+            ctx.font = `${fontSize}px monospace`;
+            for (let i = 0; i < this.canvasColumnsDrops.length; i++) {
+                const char = charPool[Math.floor(Math.random() * charPool.length)];
+                const x = i * fontSize + fontSize / 4;
+                const y = this.canvasColumnsDrops[i] * fontSize;
+                ctx.fillText(char, x, y);
+                // Reset drop position if it passes bottom of canvas or randomly resets
+                if (y > height && Math.random() > 0.96) {
+                    this.canvasColumnsDrops[i] = 0;
+                }
+                else {
+                    this.canvasColumnsDrops[i] += 0.45; // scroll speed
+                }
+            }
+            this.canvasAnimationId = requestAnimationFrame(draw);
+        };
+        draw();
+    }
+    stopMatrixRain() {
+        if (this.canvasAnimationId) {
+            cancelAnimationFrame(this.canvasAnimationId);
+            this.canvasAnimationId = undefined;
+        }
+    }
+    // Dynamic Styles Generator
+    getStyles() {
+        const customStyles = {};
+        // 1. Color Customization
+        if (this.color) {
+            const isCustomColor = this.color.startsWith('#') || this.color.startsWith('rgb') || this.color.includes('gradient');
+            if (isCustomColor) {
+                customStyles['--loader-color'] = this.color;
+            }
+        }
+        // 2. Custom Size
+        if (this.size) {
+            const isCustomSize = !['3xs', '2xs', 'xs', 'small', 'md', 'large', 'xl', '2xl', '3xl', 'jumbo'].includes(this.size);
+            if (isCustomSize) {
+                customStyles['--loader-size'] = this.size;
+            }
+        }
+        // 3. Overlay backdrop opacity and custom background
+        if (this.overlay || this.fullscreen) {
+            customStyles['--overlay-opacity'] = `${this.overlayOpacity}`;
+            if (this.overlayBackground) {
+                customStyles['--overlay-background'] = this.overlayBackground;
+            }
+        }
+        // 4. Custom Speed and Stroke Thickness
+        if (this.speed) {
+            const speedMap = { slow: '2s', normal: '1s', fast: '0.5s' };
+            customStyles['--loader-speed'] = speedMap[this.speed] || '1s';
+        }
+        if (this.thickness) {
+            customStyles['--loader-thickness'] = `${this.thickness}px`;
+        }
+        return customStyles;
+    }
+    render() {
+        if (!this.visible)
+            return null;
+        const isOverlayMode = this.overlay || this.fullscreen;
+        const isCustomSizePreset = ['3xs', '2xs', 'xs', 'small', 'md', 'large', 'xl', '2xl', '3xl', 'jumbo'].includes(this.size);
+        const isSemanticColor = ['primary', 'secondary', 'success', 'danger', 'warning', 'info'].includes(this.color);
+        const useBlur = this.backdropBlur || this.enableBlur;
+        const wrapperClasses = {
+            'loader-wrapper': true,
+            'loader-overlay': isOverlayMode,
+            'loader-fullscreen': this.fullscreen,
+            'loader-blur': useBlur,
+            [`loader-variant-${this.variant}`]: true,
+        };
+        const containerClasses = {
+            'loader-container': true,
+            [`loader-size-${this.size}`]: isCustomSizePreset,
+            [`loader-color-${this.color}`]: isSemanticColor,
+            [`loader-label-${this.labelPosition}`]: true,
+            'loader-status-success': this.status === 'success',
+            'loader-status-error': this.status === 'error',
+        };
+        return (h("div", { class: wrapperClasses, style: this.getStyles(), role: isOverlayMode ? 'dialog' : 'status', "aria-modal": isOverlayMode ? 'true' : undefined, "aria-label": this.ariaLabel, "aria-live": this.ariaLive }, isOverlayMode && this.trapFocus && (h("div", { tabIndex: 0, class: "focus-trap-sentinel" })), h("div", { class: containerClasses }, h("div", { class: "loader-visual" }, this.status === 'success' ? (this.renderStatusIcon('success')) : this.status === 'error' ? (this.renderStatusIcon('error')) : (this.renderAnimation())), (this.activeLabel || this.description || this.predictive) && (h("div", { class: "loader-text-block" }, this.activeLabel && h("span", { class: "loader-label-text" }, this.activeLabel), this.description && h("span", { class: "loader-desc-text" }, this.description), this.predictive && (h("div", { class: "loader-predictive-bar" }, h("div", { class: "loader-predictive-fill", style: { width: `${this.currentProgress}%` } }), h("span", { class: "loader-predictive-percentage" }, Math.round(this.currentProgress), "%")))))), isOverlayMode && this.trapFocus && (h("div", { tabIndex: 0, class: "focus-trap-sentinel" }))));
+    }
+    // Draw checkmarks / cross marks for success / error states
+    renderStatusIcon(status) {
+        if (status === 'success') {
+            return (h("div", { class: "status-icon-wrapper success" }, h("svg", { viewBox: "0 0 52 52", class: "status-svg" }, h("circle", { cx: "26", cy: "26", r: "25", fill: "none", class: "status-circle-bg" }), h("path", { fill: "none", d: "M14.1 27.2l7.1 7.2 16.7-16.8", class: "status-check-path" }))));
+        }
+        else {
+            return (h("div", { class: "status-icon-wrapper error" }, h("svg", { viewBox: "0 0 52 52", class: "status-svg" }, h("circle", { cx: "26", cy: "26", r: "25", fill: "none", class: "status-circle-bg" }), h("path", { fill: "none", d: "M16 16l20 20M36 16L16 36", class: "status-cross-path" }))));
+        }
+    }
+    // Core Router rendering 34 distinct High-Fidelity animations
+    renderAnimation() {
+        switch (this.type) {
+            case 'dots':
+                return (h("div", { class: "anim-dots" }, h("div", null), h("div", null), h("div", null)));
+            case 'bar':
+                return (h("div", { class: "anim-bar" }, this.value !== undefined ? (
+                // Determinate bar
+                h("div", { class: "bar-determinate", style: { width: `${this.value}%` } })) : (
+                // Indeterminate crawling pulse
+                h("div", { class: "bar-indeterminate" }))));
+            case 'pulse':
+                return h("div", { class: "anim-pulse" });
+            case 'ring':
+                return h("div", { class: "anim-ring" });
+            case 'bounce':
+                return (h("div", { class: "anim-bounce" }, h("div", null), h("div", null)));
+            case 'grid':
+                return (h("div", { class: "anim-grid" }, h("div", null), h("div", null), h("div", null), h("div", null), h("div", null), h("div", null), h("div", null), h("div", null), h("div", null)));
+            case 'wave':
+                return (h("div", { class: "anim-wave" }, h("div", null), h("div", null), h("div", null), h("div", null), h("div", null)));
+            case 'dual-ring':
+                return h("div", { class: "anim-dual-ring" });
+            case 'heartbeat':
+                return (h("div", { class: "anim-heartbeat" }, h("svg", { viewBox: "0 0 32 32", class: "heart-svg" }, h("path", { d: "M16 28.5S2 18.2 2 10.5a6.5 6.5 0 0 1 11-4.8 6.5 6.5 0 0 1 11 4.8c0 7.7-14 18-14 18z" }))));
+            case 'clock':
+                return (h("div", { class: "anim-clock" }, h("div", { class: "clock-hour" }), h("div", { class: "clock-minute" })));
+            case 'raining-letters':
+                return (h("div", { class: "anim-raining-letters" }, h("canvas", { ref: el => this.canvasElement = el })));
+            case 'ripple':
+                return (h("div", { class: "anim-ripple" }, h("div", null), h("div", null), h("div", null)));
+            case 'infinite':
+                return (h("div", { class: "anim-infinite" }, h("svg", { viewBox: "0 0 100 50" }, h("path", { d: "M30 15c-8.3 0-15 6.7-15 15s6.7 15 15 15 15-6.7 15-15-6.7-15-15-15zm40 0c-8.3 0-15 6.7-15 15s6.7 15 15 15 15-6.7 15-15-6.7-15-15-15z", class: "infinity-bg" }), h("path", { d: "M30 15c-8.3 0-15 6.7-15 15s6.7 15 15 15 15-6.7 15-15-6.7-15-15-15zm40 0c-8.3 0-15 6.7-15 15s6.7 15 15 15 15-6.7 15-15-6.7-15-15-15z", class: "infinity-loop" }))));
+            case 'wifi':
+                return (h("div", { class: "anim-wifi" }, h("div", { class: "wifi-dot" }), h("div", { class: "wifi-arc-1" }), h("div", { class: "wifi-arc-2" }), h("div", { class: "wifi-arc-3" })));
+            case 'rainbow':
+                return h("div", { class: "anim-rainbow" });
+            case 'square-shuffle':
+                return (h("div", { class: "anim-square-shuffle" }, h("div", null), h("div", null), h("div", null), h("div", null)));
+            case 'dna-helix':
+                return (h("div", { class: "anim-dna-helix" }, Array.from({ length: 12 }).map((_, i) => (h("div", { class: "dna-strand", style: { '--i': `${i}` } }, h("div", { class: "dna-dot dot-top" }), h("div", { class: "dna-bar" }), h("div", { class: "dna-dot dot-bottom" }))))));
+            case 'atom-sphere':
+                return (h("div", { class: "anim-atom-sphere" }, h("div", { class: "atom-nucleus" }), h("div", { class: "atom-orbit orbit-1" }, h("div", { class: "atom-electron" })), h("div", { class: "atom-orbit orbit-2" }, h("div", { class: "atom-electron" })), h("div", { class: "atom-orbit orbit-3" }, h("div", { class: "atom-electron" }))));
+            case 'staircase':
+                return (h("div", { class: "anim-staircase" }, h("div", { class: "stair-climber" }), h("div", { class: "stairs" }, h("div", null), h("div", null), h("div", null), h("div", null))));
+            case 'radar':
+                return (h("div", { class: "anim-radar" }, h("div", { class: "radar-scanner" }), h("div", { class: "radar-ring" }), h("div", { class: "radar-ring-mid" }), h("div", { class: "radar-dot" })));
+            case 'liquid-drop':
+                return (h("div", { class: "anim-liquid-drop" }, h("div", { class: "drop-nozzle" }), h("div", { class: "drop-droplet" }), h("div", { class: "drop-surface" })));
+            case 'neon-path':
+                return (h("div", { class: "anim-neon-path" }, h("div", null)));
+            case 'neuro-pulse':
+                return (h("div", { class: "anim-neuro-pulse" }, h("svg", { viewBox: "0 0 100 100", class: "neuro-svg" }, h("path", { d: "M50 50 L20 20 M50 50 L80 20 M50 50 L50 80 M50 50 L20 70 M50 50 L80 70", class: "neuro-branch" }), h("circle", { cx: "50", cy: "50", r: "8", class: "neuro-center" }), h("circle", { cx: "20", cy: "20", r: "4", class: "neuro-terminal" }), h("circle", { cx: "80", cy: "20", r: "4", class: "neuro-terminal" }), h("circle", { cx: "50", cy: "80", r: "4", class: "neuro-terminal" }), h("circle", { cx: "20", cy: "70", r: "4", class: "neuro-terminal" }), h("circle", { cx: "80", cy: "70", r: "4", class: "neuro-terminal" }), h("circle", { cx: "50", cy: "50", class: "neuro-active-pulse pulse-1" }), h("circle", { cx: "50", cy: "50", class: "neuro-active-pulse pulse-2" }))));
+            case 'vortex-ring':
+                return (h("div", { class: "anim-vortex-ring" }, h("div", null), h("div", null), h("div", null)));
+            case 'cube-fold':
+                return (h("div", { class: "anim-cube-fold" }, h("div", { class: "fold-cube cube-1" }), h("div", { class: "fold-cube cube-2" }), h("div", { class: "fold-cube cube-4" }), h("div", { class: "fold-cube cube-3" })));
+            case 'breathing':
+                return h("div", { class: "anim-breathing" });
+            case 'glitch-text':
+                return (h("div", { class: "anim-glitch-text", "data-text": "LOADING" }, "LOADING"));
+            case 'plc-module':
+                return (h("div", { class: "anim-plc-module" }, h("div", { class: "plc-header" }, "CPU"), h("div", { class: "plc-leds" }, h("div", { class: "plc-row" }, h("span", { class: "led-label" }, "RUN"), h("span", { class: "plc-led led-green blinking" })), h("div", { class: "plc-row" }, h("span", { class: "led-label" }, "ERR"), h("span", { class: "plc-led led-red off" })), h("div", { class: "plc-row" }, h("span", { class: "led-label" }, "COM"), h("span", { class: "plc-led led-amber flicker" })), h("div", { class: "plc-row" }, h("span", { class: "led-label" }, "I/O"), h("span", { class: "plc-led led-green flicker-delayed" })))));
+            case 'm580-signal':
+                return (h("div", { class: "anim-m580-signal" }, h("div", null), h("div", null), h("div", null), h("div", null), h("div", null)));
+            case 'circuit-board':
+                return (h("div", { class: "anim-circuit-board" }, h("svg", { viewBox: "0 0 100 100" }, h("path", { d: "M10 50 L40 50 L50 40 L90 40 M40 50 L50 60 L80 60", class: "circuit-path", fill: "none" }), h("circle", { cx: "10", cy: "50", r: "3", class: "circuit-node" }), h("circle", { cx: "90", cy: "40", r: "3", class: "circuit-node" }), h("circle", { cx: "80", cy: "60", r: "3", class: "circuit-node" }), h("circle", { cx: "0", cy: "0", r: "2.5", class: "circuit-pulse pulse-a" }, h("animateMotion", { dur: "2s", repeatCount: "indefinite", path: "M10 50 L40 50 L50 40 L90 40" })), h("circle", { cx: "0", cy: "0", r: "2.5", class: "circuit-pulse pulse-b" }, h("animateMotion", { dur: "2s", repeatCount: "indefinite", path: "M40 50 L50 60 L80 60", begin: "0.5s" })))));
+            case 'callout-rotate':
+                return (h("div", { class: "anim-callout-rotate" }, h("div", { class: "callout-ring" }), h("div", { class: "callout-arrow" })));
+            case 'infinite-roller':
+                return (h("div", { class: "anim-infinite-roller" }, h("div", null), h("div", null), h("div", null)));
+            case 'image':
+                return (h("div", { class: "anim-image" }, h("img", { src: this.image, alt: "loading-graphic" })));
+            case 'spinner':
+            default:
+                return h("div", { class: "anim-spinner" });
+        }
+    }
+    static get is() { return "ui-loader"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["loader.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["loader.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessibility ARIA label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "'Loading...'"
+            },
+            "ariaLive": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'polite' | 'assertive' | 'off'",
+                    "resolved": "\"assertive\" | \"off\" | \"polite\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA live region mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-live",
+                "defaultValue": "'polite'"
+            },
+            "backdropBlur": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Apply background blur (glassmorphic backdrop)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "blur",
+                "defaultValue": "false"
+            },
+            "enableBlur": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alias for blur attribute used in demo configuration"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-blur",
+                "defaultValue": "false"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Semantic color variant ('primary', 'secondary', etc.) or custom hex/gradient string"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'primary'"
+            },
+            "fullscreen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays the loader as a full viewport overlay"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fullscreen",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text label to display alongside the loader animation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sub-label description text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "labelPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'bottom' | 'top' | 'left' | 'right'",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the label relative to the loading animation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-position",
+                "defaultValue": "'bottom'"
+            },
+            "overlay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays the loader as an absolute overlay over its relative parent container"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "overlay",
+                "defaultValue": "false"
+            },
+            "overlayOpacity": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Opacity value of the overlay backdrop (0 to 1)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "overlay-opacity",
+                "defaultValue": "0.5"
+            },
+            "overlayBackground": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom background color/gradient for overlay mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "overlay-background"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the loader preset ('3xs'...'jumbo') or custom CSS value ('120px', '4rem')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "speed": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'slow' | 'normal' | 'fast'",
+                    "resolved": "\"fast\" | \"normal\" | \"slow\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Speed of animation cycle"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "speed",
+                "defaultValue": "'normal'"
+            },
+            "thickness": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stroke width thickness for circular loaders (spinner, ring)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "thickness",
+                "defaultValue": "3"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The animation style variant type (34 total variants)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'spinner'"
+            },
+            "visible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the loader is visible"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "visible",
+                "defaultValue": "true"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'standard' | 'glass' | 'neon' | 'minimal' | 'linear-strip'",
+                    "resolved": "\"glass\" | \"linear-strip\" | \"minimal\" | \"neon\" | \"standard\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Loader style theme variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'standard'"
+            },
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Determinate state progress value (0 to 100)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "predictive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables simulated predictive non-linear crawling progress up to 95%"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "predictive",
+                "defaultValue": "false"
+            },
+            "messages": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[] | string",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of status messages to rotate through automatically"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "messages"
+            },
+            "messageInterval": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Rotation interval time in milliseconds"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message-interval",
+                "defaultValue": "2500"
+            },
+            "image": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Image URL when using type=\"image\""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image"
+            },
+            "rainText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Letters pool for Matrix matrix-rain animation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rain-text"
+            },
+            "rainColumns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of columns in Matrix digital rain"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rain-columns",
+                "defaultValue": "5"
+            },
+            "trapFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Traps keyboard focus inside the loader overlay (useful for fullscreen modals)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trap-focus",
+                "defaultValue": "false"
+            },
+            "status": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'loading' | 'success' | 'error'",
+                    "resolved": "\"error\" | \"loading\" | \"success\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current loading status state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "status",
+                "defaultValue": "'loading'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeLabel": {},
+            "currentProgress": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uiShow",
+                "name": "uiShow",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "uiHide",
+                "name": "uiHide",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "visible",
+                "methodName": "handleVisibilityChange"
+            }, {
+                "propName": "messages",
+                "methodName": "parseMessagesProp"
+            }, {
+                "propName": "status",
+                "methodName": "handleStatusChange"
+            }];
+    }
+}