atomicuilibrary 0.0.1

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

@@ -0,0 +1,1193 @@
+import { h } from "@stencil/core";
+export class SkeletonLoader {
+    /** ARIA label for accessibility */
+    ariaLabel;
+    /** ARIA live region (off, polite, assertive) */
+    ariaLive = 'off';
+    /** ARIA role override (status, progressbar, etc.) */
+    ariaRole;
+    /** Progress value (0-100) for determinate skeletons */
+    progress;
+    /** Show in dark mode (auto, light, dark) */
+    dark = 'auto';
+    /** RTL shimmer direction */
+    rtl = false;
+    /** Fires when skeleton is shown */
+    skeletonShow;
+    /** Fires when skeleton is hidden */
+    skeletonHide;
+    /**
+     * Layout template to use for automatic skeleton generation.
+     * If set to something other than 'none', the `shape` prop is overridden for the template layout.
+     */
+    template = 'none';
+    /**
+     * Number of items to replicate (useful for lists, cards, etc.)
+     * Default: 1
+     */
+    count = 1;
+    /**
+     * Layout direction for replicated items ('row' or 'column')
+     */
+    direction = 'column';
+    /**
+     * If true, animations will automatically pause when the component is not in the viewport.
+     * Dramatically improves performance and battery life for long lists.
+     */
+    lazyAnimation = true;
+    /**
+     * Animation speed
+     */
+    speed = 'normal';
+    /**
+     * Color variant or custom color (hex/rgba)
+     */
+    color = 'neutral';
+    radius;
+    /**
+     * Stagger delay in ms between replicated items
+     * Makes the animation feel more organic as it flows down the page.
+     */
+    stagger = 0;
+    /**
+     * Layout gap between replicated items (e.g. '12px', '1rem')
+     */
+    gap = '16px';
+    /**
+     * Optional explicit highlight/shimmer color for the wave animation.
+     * If not provided, it is auto-derived from `color` by lightening it.
+     */
+    highlightColor;
+    /**
+     * Elevation / shadow intensity (0-4) to match the UI component it mimics
+     */
+    elevation = 0;
+    /**
+     * Shape of the skeleton
+     */
+    shape = 'rectangle';
+    /**
+     * If true, the skeleton acts as a mask over its children.
+     * Useful for wrapping text or components to skeletonize them seamlessly.
+     */
+    mask = false;
+    /**
+     * If true, keeps the children visible at low opacity and blurred behind the skeleton.
+     * Only works when `mask` is true.
+     */
+    ghost = false;
+    /**
+     * Predefined size of the skeleton (xs, sm, md, lg, xl, 2xl)
+     */
+    size = 'md';
+    /**
+     * Width of the skeleton
+     */
+    width = '100%';
+    /**
+     * Height of the skeleton
+     */
+    height = '20px';
+    /**
+     * Border radius for rounded shapes
+     */
+    borderRadius = '4px';
+    /**
+     * Whether to show animation
+     */
+    animated = true;
+    /**
+     * Animation type: 'pulse' or 'wave'
+     */
+    animationType = 'pulse';
+    /**
+     * Custom class for additional styling
+     */
+    customClass = '';
+    /**
+     * Delay in milliseconds before showing the skeleton.
+     * Prevents "flicker" for high-speed connections.
+     */
+    delay = 0;
+    /**
+     * Angle of the wave animation (e.g. '45deg', '90deg').
+     * Default: '90deg' (horizontal)
+     */
+    waveAngle = '90deg';
+    /**
+     * Duration of the wave animation cycle (e.g. '1.5s', '3s').
+     * Default: '1.5s'
+     */
+    waveSpeed = '1.5s';
+    /**
+     * Number of rows (lines) to render when shape is 'text'
+     */
+    rows = 1;
+    /**
+     * Width of the last row when multi-line text is used (e.g. '60%')
+     */
+    lastRowWidth = '80%';
+    isActuallyVisible = false;
+    isInView = true;
+    delayTimer;
+    observer;
+    componentDidLoad() {
+        if (this.lazyAnimation) {
+            this.setupObserver();
+        }
+    }
+    setupObserver() {
+        if (typeof globalThis.IntersectionObserver === 'undefined') {
+            this.isInView = true;
+            return;
+        }
+        this.observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                this.isInView = entry.isIntersecting;
+            });
+        }, { threshold: 0.1 });
+        if (this.el) {
+            this.observer.observe(this.el);
+        }
+    }
+    handleDelayChange() {
+        this.handleVisibility();
+    }
+    componentWillLoad() {
+        this.handleVisibility();
+    }
+    el;
+    handleVisibility() {
+        if (this.delay <= 0) {
+            if (!this.isActuallyVisible)
+                this.skeletonShow?.emit();
+            this.isActuallyVisible = true;
+            return;
+        }
+        if (this.delayTimer)
+            clearTimeout(this.delayTimer);
+        if (this.isActuallyVisible)
+            this.skeletonHide?.emit();
+        this.isActuallyVisible = false;
+        this.delayTimer = setTimeout(() => {
+            this.isActuallyVisible = true;
+            this.skeletonShow?.emit();
+        }, this.delay);
+    }
+    disconnectedCallback() {
+        if (this.delayTimer)
+            clearTimeout(this.delayTimer);
+        if (this.observer)
+            this.observer.disconnect();
+    }
+    getSizeDimensions() {
+        const sizeMap = {
+            '3xs': { width: '12px', height: '12px' },
+            '2xs': { width: '16px', height: '16px' },
+            'xs': { width: '20px', height: '20px' },
+            'sm': { width: '24px', height: '24px' },
+            'md': { width: '32px', height: '32px' },
+            'lg': { width: '48px', height: '48px' },
+            'xl': { width: '64px', height: '64px' },
+            '2xl': { width: '80px', height: '80px' },
+            '3xl': { width: '120px', height: '120px' },
+            '4xl': { width: '160px', height: '160px' },
+        };
+        return sizeMap[this.size] || sizeMap['md'];
+    }
+    getSkeletonStyles() {
+        // Use size dimensions as defaults if width/height are not explicitly set
+        const sizeDims = this.getSizeDimensions();
+        const baseStyles = {
+            width: this.width !== '100%' ? this.width : sizeDims.width,
+            height: this.height !== '20px' ? this.height : sizeDims.height,
+        };
+        switch (this.shape) {
+            case 'circle':
+                baseStyles.borderRadius = '50%';
+                // Ensure width and height are equal for circles
+                const circleSize = Math.min(parseInt(this.width), parseInt(this.height) || parseInt(this.width));
+                baseStyles.width = `${circleSize}px`;
+                baseStyles.height = `${circleSize}px`;
+                break;
+            case 'square':
+                // Ensure width and height are equal for squares
+                const squareSize = Math.min(parseInt(this.width), parseInt(this.height) || parseInt(this.width));
+                baseStyles.width = `${squareSize}px`;
+                baseStyles.height = `${squareSize}px`;
+                baseStyles.borderRadius = '0';
+                break;
+            case 'oval':
+                baseStyles.borderRadius = '50%';
+                // Oval allows different width and height (ellipse)
+                break;
+            case 'rounded-square':
+                // Ensure width and height are equal for rounded squares
+                const roundedSquareSize = Math.min(parseInt(this.width), parseInt(this.height) || parseInt(this.width));
+                baseStyles.width = `${roundedSquareSize}px`;
+                baseStyles.height = `${roundedSquareSize}px`;
+                baseStyles.borderRadius = this.borderRadius;
+                break;
+            case 'rounded-rectangle':
+                baseStyles.borderRadius = this.borderRadius;
+                // Rounded rectangle allows different width and height
+                break;
+            case 'rounded':
+                baseStyles.borderRadius = this.borderRadius;
+                break;
+            case 'text':
+                baseStyles.borderRadius = '4px';
+                // Text shapes use smer heights based on size
+                const textSizeMap = {
+                    '3xs': '10px',
+                    '2xs': '12px',
+                    'xs': '14px',
+                    'sm': '16px',
+                    'md': '18px',
+                    'lg': '24px',
+                    'xl': '32px',
+                    '2xl': '40px',
+                    '3xl': '48px',
+                    '4xl': '64px',
+                };
+                baseStyles.height = textSizeMap[this.size] || '18px';
+                break;
+            case 'avatar':
+                baseStyles.borderRadius = '50%';
+                const avatarSize = this.getSizeDimensions();
+                baseStyles.width = this.width !== '100%' ? this.width : avatarSize.width;
+                baseStyles.height = this.height !== '20px' ? this.height : avatarSize.height;
+                break;
+            case 'button':
+                baseStyles.borderRadius = '6px';
+                const buttonHeightMap = {
+                    'xs': '24px',
+                    'sm': '28px',
+                    'md': '32px',
+                    'lg': '36px',
+                    'xl': '40px',
+                    '2xl': '44px',
+                };
+                baseStyles.height = this.height !== '20px' ? this.height : (buttonHeightMap[this.size] || '32px');
+                break;
+            case 'pill':
+                baseStyles.borderRadius = '20px';
+                const pillHeightMap = {
+                    'xs': '20px',
+                    'sm': '24px',
+                    'md': '28px',
+                    'lg': '32px',
+                };
+                baseStyles.height = this.height !== '20px' ? this.height : (pillHeightMap[this.size] || '28px');
+                baseStyles.width = this.width !== '100%' ? this.width : '60px';
+                break;
+            case 'card':
+                baseStyles.borderRadius = '8px';
+                const cardHeightMap = {
+                    'xs': '80px',
+                    'sm': '100px',
+                    'md': '120px',
+                    'lg': '160px',
+                    'xl': '200px',
+                    '2xl': '240px',
+                };
+                baseStyles.minHeight = this.height !== '20px' ? this.height : (cardHeightMap[this.size] || '120px');
+                break;
+            case 'list-item':
+                baseStyles.borderRadius = '4px';
+                const listItemHeightMap = {
+                    'xs': '32px',
+                    'sm': '36px',
+                    'md': '40px',
+                    'lg': '48px',
+                    'xl': '56px',
+                    '2xl': '64px',
+                };
+                baseStyles.height = this.height !== '20px' ? this.height : (listItemHeightMap[this.size] || '40px');
+                break;
+            case 'image':
+                baseStyles.borderRadius = '8px';
+                const imageHeightMap = {
+                    'xs': '100px',
+                    'sm': '150px',
+                    'md': '200px',
+                    'lg': '250px',
+                    'xl': '300px',
+                    '2xl': '400px',
+                };
+                baseStyles.height = this.height !== '20px' ? this.height : (imageHeightMap[this.size] || '200px');
+                baseStyles.display = 'flex';
+                baseStyles.alignItems = 'center';
+                baseStyles.justifyContent = 'center';
+                break;
+            case 'none':
+                baseStyles.background = 'transparent';
+                baseStyles.width = 'auto';
+                baseStyles.height = 'auto';
+                break;
+            default: // rectangle
+                baseStyles.borderRadius = '0';
+                break;
+        }
+        return baseStyles;
+    }
+    /**
+     * Resolves the actual color value based on variant or custom string
+     */
+    // private getBaseColor(): string {
+    //   const colorMap: Record<string, string> = {
+    //     primary: '#3DCD58',
+    //     secondary: '#64748b',
+    //     success: '#22c55e',
+    //     danger: '#ef4444',
+    //     warning: '#f59e0b',
+    //     info: '#3bf673',
+    //     neutral: 'var(--skeleton-bg, #e2e8f0)',
+    //   };
+    //   const resolved = colorMap[this.color] || this.color;
+    //   // Handle theme-based defaults if empty or neutral
+    //   if (!this.color || this.color === 'neutral') {
+    //     return 'var(red, #e2e8f0)';
+    //   }
+    //   return resolved;
+    // }
+    // /**
+    //  * Derives a lighter shimmer color from the base color.
+    //  * Works for most hex colors; for others falls back to the theme wave variable.
+    //  */
+    // private getHighlightColor(base: string): string {
+    //   // If user explicitly provided a highlight, use it
+    //   if (this.highlightColor) return this.highlightColor;
+    //   // Handle generic theme variables
+    //   if (base.includes('--skeleton-bg')) {
+    //     return 'var(--skeleton-wave-bg, #f3f4f6)';
+    //   }
+    //   // Try to parse hex and lighten
+    //   const hex = base.trim();
+    //   if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(hex)) {
+    //     let full = hex.slice(1);
+    //     if (full.length === 3) {
+    //       full = full.split('').map(c => c + c).join('');
+    //     }
+    //     const r = Math.min(255, parseInt(full.substring(0, 2), 16) + 30);
+    //     const g = Math.min(255, parseInt(full.substring(2, 4), 16) + 30);
+    //     const b = Math.min(255, parseInt(full.substring(4, 6), 16) + 30);
+    //     return `rgb(${r}, ${g}, ${b})`;
+    //   }
+    //   // For other types of strings, fallback to the theme wave variable if available
+    //   return 'var(--skeleton-wave-bg, #f3f4f6)';
+    // }
+    render() {
+        if (!this.isActuallyVisible)
+            return null;
+        const countArr = Array.from({ length: Math.max(1, this.count) });
+        // ARIA role logic
+        const ariaRole = this.ariaRole || (typeof this.progress === 'number' ? 'progressbar' : 'status');
+        const ariaProps = {
+            role: ariaRole,
+            'aria-busy': true,
+            'aria-label': this.ariaLabel,
+            'aria-live': this.ariaLive,
+        };
+        if (ariaRole === 'progressbar' && typeof this.progress === 'number') {
+            ariaProps['aria-valuenow'] = this.progress;
+            ariaProps['aria-valuemin'] = 0;
+            ariaProps['aria-valuemax'] = 100;
+        }
+        // Dark mode/RTL
+        const darkThemes = ['dark', 'blue', 'violet', 'green', 'pink'];
+        const docTheme = document.documentElement.getAttribute('data-theme') || '';
+        const isDarkAuto = this.dark === 'auto' && ((window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ||
+            darkThemes.some(t => document.documentElement.classList.contains('theme-' + t) || document.body.classList.contains('theme-' + t)) ||
+            darkThemes.includes(docTheme) ||
+            !!this.el.closest(darkThemes.map(t => `.theme-${t}, [data-theme="${t}"]`).join(', ')));
+        const darkClass = this.dark === 'dark' || isDarkAuto ? 'skeleton-dark' : '';
+        const rtlClass = this.rtl ? 'skeleton-rtl' : '';
+        return (h("div", { class: `skeleton-replication-container skeleton-direction-${this.direction} ${darkClass} ${rtlClass}`, style: { display: 'flex', flexDirection: this.direction, gap: this.gap }, ...ariaProps }, countArr.map((_, index) => {
+            // ...existing code...
+            const staggerDelay = this.stagger > 0 ? `${index * this.stagger}ms` : '0ms';
+            const isAnimating = this.animated && (!this.lazyAnimation || this.isInView);
+            // ...existing code...
+            const namedColors = ['neutral', 'primary', 'secondary', 'success', 'danger', 'warning', 'info'];
+            const isCustomColor = !namedColors.includes(this.color);
+            const skeletonClass = {
+                'skeleton': true,
+                'skeleton-animated': isAnimating,
+                [`skeleton-${this.animationType}`]: isAnimating,
+                [`skeleton-${this.shape}`]: true,
+                [`skeleton-speed-${this.speed}`]: true,
+                [`skeleton-color-${this.color}`]: !isCustomColor && this.color !== 'neutral',
+                'skeleton-mask': this.mask,
+                'skeleton-ghost': this.ghost && this.mask,
+                'skeleton-elevated': this.elevation > 0,
+                [this.customClass]: !!this.customClass,
+            };
+            const customStyles = {
+                '--skeleton-stagger-delay': staggerDelay,
+                '--skeleton-wave-angle': this.waveAngle,
+                '--skeleton-wave-speed': this.waveSpeed,
+                '--skeleton-gap': this.gap,
+                '--skeleton-elevation': this.elevation > 0 ? `var(--ui-shadow-${this.elevation}, 0 2px 8px rgba(0,0,0,0.05))` : 'none',
+            };
+            // Custom hex/rgba colors: set as CSS vars so animations still work via gradients
+            if (isCustomColor) {
+                customStyles['--skeleton-bg'] = this.color;
+                customStyles['--skeleton-wave-bg'] = this.highlightColor || this.color;
+            }
+            if (this.radius) {
+                customStyles['--skeleton-border-radius'] = this.radius;
+            }
+            const isCircular = ['circle', 'avatar', 'oval'].includes(this.shape);
+            const styles = {
+                ...this.getSkeletonStyles(),
+                ...customStyles,
+                animationDelay: staggerDelay,
+                ...(isCircular ? {} : (this.radius || this.borderRadius !== '4px' ? { borderRadius: this.radius || this.borderRadius } : {}))
+            };
+            return (h("div", { class: skeletonClass, style: styles, key: index }, this.renderContent(), typeof this.progress === 'number' && (h("div", { class: "skeleton-progress-bar", style: { width: this.progress + '%', height: '4px', background: 'var(--skeleton-wave-bg, #fff)', borderRadius: '2px', marginTop: '4px' } }))));
+        }), h("slot", { name: "custom" })));
+    }
+    renderContent() {
+        const isText = this.shape === 'text';
+        const hasRows = isText && this.rows > 1;
+        return [
+            (this.mask || this.shape === 'none') ? h("slot", null) : null,
+            hasRows && !this.mask ? (h("div", { class: "skeleton-text-rows", style: { display: 'flex', flexDirection: 'column', gap: '8px', width: '100%' } }, Array.from({ length: this.rows }).map((_, i) => {
+                const isLast = i === this.rows - 1;
+                const rowWidth = isLast ? this.lastRowWidth : (i > 0 && i % 2 === 0 ? '92%' : '100%');
+                return (h("div", { class: "skeleton-text-row", style: {
+                        height: '1em',
+                        width: rowWidth,
+                        backgroundColor: 'inherit',
+                        borderRadius: '4px',
+                        animation: 'inherit'
+                    } }));
+            }))) : null,
+            this.shape === 'card' && !this.mask ? (h("div", { class: "skeleton-card-content" }, h("div", { class: "skeleton-card-header" }, h("div", { class: "skeleton-circle", style: { width: '32px', height: '32px', borderRadius: '50%' } }), h("div", { class: "skeleton-card-title" }, h("div", { class: "skeleton-text", style: { width: '60%', height: '16px', borderRadius: '4px' } }), h("div", { class: "skeleton-text", style: { width: '40%', height: '12px', borderRadius: '4px' } }))), h("div", { class: "skeleton-card-body" }, h("div", { class: "skeleton-text", style: { width: '100%', height: '14px', borderRadius: '4px' } }), h("div", { class: "skeleton-text", style: { width: '80%', height: '14px', borderRadius: '4px' } }), h("div", { class: "skeleton-text", style: { width: '90%', height: '14px', borderRadius: '4px' } })))) : null,
+            this.shape === 'list-item' && !this.mask ? (h("div", { class: "skeleton-list-content" }, h("div", { class: "skeleton-circle", style: { width: '32px', height: '32px', borderRadius: '50%' } }), h("div", { class: "skeleton-list-text" }, h("div", { class: "skeleton-text", style: { width: '70%', height: '14px', borderRadius: '4px' } }), h("div", { class: "skeleton-text", style: { width: '50%', height: '12px', borderRadius: '4px' } })))) : null,
+            this.shape === 'image' && !this.mask ? (h("div", { class: "skeleton-image-icon" }, h("ui-icon", { name: "image", library: "lucide", size: "25%", style: { opacity: '0.2' } }))) : null,
+            this.template === 'profile' ? (h("div", { class: "skeleton-profile-template" }, h("ui-skeleton-loader", { shape: "circle", size: this.size, color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("div", { class: "skeleton-profile-lines" }, h("ui-skeleton-loader", { shape: "text", size: this.size, width: "120px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("ui-skeleton-loader", { shape: "text", size: "xs", width: "80px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated })))) : null,
+            this.template === 'media-object' ? (h("div", { class: "skeleton-media-object-template" }, h("ui-skeleton-loader", { shape: "rounded-rectangle", width: "48px", height: "48px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("div", { class: "skeleton-media-lines", style: { flex: '1' } }, h("ui-skeleton-loader", { shape: "text", size: "md", width: "70%", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("ui-skeleton-loader", { shape: "text", size: "xs", width: "40%", color: this.color, "highlight-color": this.highlightColor, animated: this.animated, style: { marginTop: '4px' } }), h("ui-skeleton-loader", { shape: "text", size: "xs", width: "90%", color: this.color, "highlight-color": this.highlightColor, animated: this.animated, style: { marginTop: '8px' } })))) : null,
+            this.template === 'feed-item' ? (h("div", { class: "skeleton-feed-template" }, h("div", { class: "feed-header", style: { display: 'flex', gap: '12px', marginBottom: '16px' } }, h("ui-skeleton-loader", { shape: "circle", size: "md", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("div", { style: { flex: '1' } }, h("ui-skeleton-loader", { shape: "text", size: "xs", width: "100px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("ui-skeleton-loader", { shape: "text", size: "xs", width: "60px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated, style: { marginTop: '4px' } }))), h("ui-skeleton-loader", { shape: "rectangle", width: "100%", height: "200px", "border-radius": "8px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("div", { class: "feed-footer", style: { marginTop: '12px', display: 'flex', gap: '8px' } }, h("ui-skeleton-loader", { shape: "button", size: "sm", width: "60px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("ui-skeleton-loader", { shape: "button", size: "sm", width: "60px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated })))) : null,
+            this.template === 'table-row' ? (h("div", { class: "skeleton-table-row-template", style: { display: 'flex', gap: '20px', alignItems: 'center', width: '100%', padding: '12px 0' } }, h("ui-skeleton-loader", { shape: "rectangle", width: "20px", height: "20px", "border-radius": "4px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("ui-skeleton-loader", { shape: "text", width: "15%", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("ui-skeleton-loader", { shape: "text", width: "35%", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("ui-skeleton-loader", { shape: "text", width: "20%", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("ui-skeleton-loader", { shape: "pill", width: "80px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated, style: { marginLeft: 'auto' } }))) : null,
+        ];
+    }
+    static get is() { return "ui-skeleton"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["skeleton-loader.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["skeleton-loader.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA label for accessibility"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label"
+            },
+            "ariaLive": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'off' | 'polite' | 'assertive'",
+                    "resolved": "\"assertive\" | \"off\" | \"polite\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA live region (off, polite, assertive)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-live",
+                "defaultValue": "'off'"
+            },
+            "ariaRole": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA role override (status, progressbar, etc.)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-role"
+            },
+            "progress": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Progress value (0-100) for determinate skeletons"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "progress"
+            },
+            "dark": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'auto' | 'light' | 'dark'",
+                    "resolved": "\"auto\" | \"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show in dark mode (auto, light, dark)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "dark",
+                "defaultValue": "'auto'"
+            },
+            "rtl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "RTL shimmer direction"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rtl",
+                "defaultValue": "false"
+            },
+            "template": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SkeletonTemplate",
+                    "resolved": "\"card\" | \"feed-item\" | \"list-item\" | \"media-object\" | \"none\" | \"profile\" | \"table-row\"",
+                    "references": {
+                        "SkeletonTemplate": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::SkeletonTemplate",
+                            "referenceLocation": "SkeletonTemplate"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout template to use for automatic skeleton generation.\r\nIf set to something other than 'none', the `shape` prop is overridden for the template layout."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "template",
+                "defaultValue": "'none'"
+            },
+            "count": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of items to replicate (useful for lists, cards, etc.)\r\nDefault: 1"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "count",
+                "defaultValue": "1"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'row' | 'column'",
+                    "resolved": "\"column\" | \"row\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout direction for replicated items ('row' or 'column')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "direction",
+                "defaultValue": "'column'"
+            },
+            "lazyAnimation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, animations will automatically pause when the component is not in the viewport.\r\nDramatically improves performance and battery life for long lists."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "lazy-animation",
+                "defaultValue": "true"
+            },
+            "speed": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'slow' | 'normal' | 'fast'",
+                    "resolved": "\"fast\" | \"normal\" | \"slow\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animation speed"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "speed",
+                "defaultValue": "'normal'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'neutral' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color variant or custom color (hex/rgba)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'neutral'"
+            },
+            "radius": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "radius"
+            },
+            "stagger": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stagger delay in ms between replicated items\r\nMakes the animation feel more organic as it flows down the page."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stagger",
+                "defaultValue": "0"
+            },
+            "gap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout gap between replicated items (e.g. '12px', '1rem')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gap",
+                "defaultValue": "'16px'"
+            },
+            "highlightColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional explicit highlight/shimmer color for the wave animation.\r\nIf not provided, it is auto-derived from `color` by lightening it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "highlight-color"
+            },
+            "elevation": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Elevation / shadow intensity (0-4) to match the UI component it mimics"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "elevation",
+                "defaultValue": "0"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SkeletonShape",
+                    "resolved": "\"avatar\" | \"button\" | \"card\" | \"circle\" | \"image\" | \"list-item\" | \"none\" | \"oval\" | \"pill\" | \"rectangle\" | \"rounded\" | \"rounded-rectangle\" | \"rounded-square\" | \"square\" | \"text\"",
+                    "references": {
+                        "SkeletonShape": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::SkeletonShape",
+                            "referenceLocation": "SkeletonShape"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shape of the skeleton"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape",
+                "defaultValue": "'rectangle'"
+            },
+            "mask": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the skeleton acts as a mask over its children.\r\nUseful for wrapping text or components to skeletonize them seamlessly."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mask",
+                "defaultValue": "false"
+            },
+            "ghost": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, keeps the children visible at low opacity and blurred behind the skeleton.\r\nOnly works when `mask` is true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ghost",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SkeletonSize",
+                    "resolved": "\"2xl\" | \"2xs\" | \"3xl\" | \"3xs\" | \"4xl\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "SkeletonSize": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::SkeletonSize",
+                            "referenceLocation": "SkeletonSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Predefined size of the skeleton (xs, sm, md, lg, xl, 2xl)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of the skeleton"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "'100%'"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height of the skeleton"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "'20px'"
+            },
+            "borderRadius": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Border radius for rounded shapes"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "border-radius",
+                "defaultValue": "'4px'"
+            },
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show animation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animated",
+                "defaultValue": "true"
+            },
+            "animationType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'pulse' | 'wave' | 'shimmer' | 'sheen' | 'glow' | 'flicker'",
+                    "resolved": "\"flicker\" | \"glow\" | \"pulse\" | \"sheen\" | \"shimmer\" | \"wave\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animation type: 'pulse' or 'wave'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animation-type",
+                "defaultValue": "'pulse'"
+            },
+            "customClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom class for additional styling"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-class",
+                "defaultValue": "''"
+            },
+            "delay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Delay in milliseconds before showing the skeleton.\r\nPrevents \"flicker\" for high-speed connections."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "delay",
+                "defaultValue": "0"
+            },
+            "waveAngle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Angle of the wave animation (e.g. '45deg', '90deg').\r\nDefault: '90deg' (horizontal)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "wave-angle",
+                "defaultValue": "'90deg'"
+            },
+            "waveSpeed": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Duration of the wave animation cycle (e.g. '1.5s', '3s').\r\nDefault: '1.5s'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "wave-speed",
+                "defaultValue": "'1.5s'"
+            },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of rows (lines) to render when shape is 'text'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows",
+                "defaultValue": "1"
+            },
+            "lastRowWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of the last row when multi-line text is used (e.g. '60%')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "last-row-width",
+                "defaultValue": "'80%'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isActuallyVisible": {},
+            "isInView": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "skeletonShow",
+                "name": "skeletonShow",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when skeleton is shown"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "skeletonHide",
+                "name": "skeletonHide",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when skeleton is hidden"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "delay",
+                "methodName": "handleDelayChange"
+            }];
+    }
+}