atomicuilibrary 0.0.1

package/dist/collection/components/avatar/avatar.js

@@ -0,0 +1,2007 @@
+import { h, Host } from "@stencil/core";
+export class Avatar {
+    el;
+    /** Alternative text for the image */
+    alt = '';
+    /** Letter type unit distance between left and right sides */
+    gap = 4;
+    /** Custom icon for an icon avatar */
+    icon = '';
+    /** Library for the icon (e.g., 'se', 'fontawesome', etc.) */
+    iconLibrary = 'default';
+    /** The shape of avatar: 'circle', 'square', 'hexagon', 'squircle' */
+    shape = 'circle';
+    /** The size of the avatar */
+    size = 'm';
+    /** The address of the image for an image avatar */
+    src = '';
+    /** A list of sources to use for different screen resolutions */
+    srcSet = '';
+    /** Whether the picture is allowed to be dragged */
+    imgDraggable = true;
+    /** CORS settings attributes */
+    crossOrigin = '';
+    /** Background color for text/icon avatar */
+    bgColor = '#52c41a';
+    /** Text color for text/icon avatar */
+    color = '#ffffff';
+    /** Border for avatar */
+    border = '';
+    /** Tooltip text to display on hover */
+    tooltipText = '';
+    /** Responsive size based on screen width */
+    responsiveSize = undefined;
+    /** User status indicator (online, offline, away, busy, dnd) */
+    status = '';
+    /** Position of the status indicator */
+    statusPosition = 'bottom-right';
+    /** Show status indicator */
+    showStatus = false;
+    /** Badge count/text overlay */
+    badge = '';
+    /** Badge position */
+    badgePosition = 'top-right';
+    /** Badge color */
+    badgeColor = '#ff4d4f';
+    /** Enable edit/upload functionality */
+    editable = false;
+    /** Accept file types for upload */
+    acceptTypes = 'image/*';
+    /** Fallback icon when no image */
+    fallbackIcon = 'fas fa-user';
+    /** Loading state */
+    loading = false;
+    /** Enable lazy loading for images */
+    lazy = false;
+    /** Image fit mode */
+    fit = 'cover';
+    /** Show verified badge */
+    verified = false;
+    /** Enable glassmorphism effect */
+    glass = false;
+    /** Show skeleton loading shimmer */
+    skeleton = false;
+    /** Show premium reflection overlay */
+    reflection = false;
+    /** Number of segments for the story ring */
+    segments = 0;
+    /** Style variant of the avatar */
+    variant = 'default';
+    /** Enable click handler */
+    clickable = false;
+    /** Auto-generate color from text */
+    autoColor = false;
+    /** Use gradient background */
+    gradient = false;
+    /** Gradient colors (array of 2 colors or comma-separated string) */
+    gradientColors = '';
+    /** Animation type */
+    animation = 'none';
+    /** Ring color for animations */
+    ringColor = '#3bf673';
+    /** Show story ring (Instagram style) */
+    story = false;
+    /** Mark story as seen */
+    storySeen = false;
+    /** Active speaker visualizer */
+    activeSpeaker = false;
+    /** Animate status indicator */
+    statusPulse = false;
+    /** Enable 3D hover effect */
+    threeD = false;
+    /** Optional URL to link the avatar to */
+    href = '';
+    /** Content to display (letter or text) */
+    content;
+    /** Optional name to auto-calculate initials from */
+    name;
+    /** Maximum number of characters to show for initials */
+    maxInitials = 2;
+    /** Whether this avatar acts as a group container */
+    group = false;
+    /** Array of avatar props for dynamic generation (if group is true) */
+    avatars = [];
+    /** Maximum number of avatars to display before grouping (if group is true) */
+    maxVisible = 5;
+    /** Maximum config: number or object { count, style, popover } (if group is true) */
+    max = undefined;
+    /** Layout mode for groups: 'stack' or 'grid' */
+    layout = 'stack';
+    /** Spacing between avatars (in pixels) for grid mode */
+    spacing = 4;
+    /** Overlapping amount (negative value for overlap) */
+    overlap = undefined;
+    /** Border color for avatars in the group */
+    groupBorderColor = 'white';
+    /** Border width for avatars in the group */
+    groupBorderWidth = 2;
+    /** Enable popover to show all avatars when hovering over excess count */
+    enablePopover = true;
+    /** Enable animated shifting transitions on hover */
+    animated = true;
+    hasError = false;
+    scale = 1;
+    currentSize = 40;
+    showTooltip = false;
+    isHovered = false;
+    uploadedImage = '';
+    slottedAvatars = [];
+    showPopoverGroup = false;
+    isRosterOpen = false;
+    isScaling = false;
+    textRef;
+    avatarRef;
+    /** Handler when img load error */
+    avatarError;
+    /** Handler when avatar is clicked */
+    avatarClick;
+    /** Handler when file is uploaded */
+    avatarUpload;
+    /** Handler when image loads successfully */
+    avatarLoad;
+    /** Handler when mouse enters */
+    avatarMouseEnter;
+    /** Handler when mouse leaves */
+    avatarMouseLeave;
+    handleSrcChange() {
+        this.hasError = false;
+        this.uploadedImage = '';
+    }
+    handleLoadingChange(newValue) {
+        if (!newValue && this.lazy && this.src) {
+            this.loadImage();
+        }
+    }
+    componentWillLoad() {
+        if (this.group) {
+            this.updateSlottedAvatars();
+        }
+    }
+    componentDidLoad() {
+        if (this.group) {
+            this.updateSlottedAvatars();
+        }
+        requestAnimationFrame(() => this.setScale());
+        if (this.responsiveSize) {
+            this.updateResponsiveSize();
+            window.addEventListener('resize', this.updateResponsiveSize);
+        }
+    }
+    componentDidUpdate() {
+        // Only trigger scaling if we have the refs and we're not already stable
+        if (this.textRef && this.avatarRef) {
+            requestAnimationFrame(() => this.setScale());
+        }
+    }
+    updateSlottedAvatars() {
+        const slotElement = this.el.shadowRoot?.querySelector('slot');
+        const assignedElements = slotElement
+            ? slotElement.assignedElements()
+            : Array.from(this.el.children);
+        this.slottedAvatars = assignedElements.filter(el => el.tagName.toLowerCase() === 'ui-avatar');
+    }
+    disconnectedCallback() {
+        if (this.responsiveSize) {
+            window.removeEventListener('resize', this.updateResponsiveSize);
+        }
+    }
+    // componentDidUpdate() {
+    //   this.setScale();
+    // }
+    updateResponsiveSize = () => {
+        if (!this.responsiveSize)
+            return;
+        const width = window.innerWidth;
+        let newSize = this.size;
+        if (width < 576 && this.responsiveSize.xs !== undefined) {
+            newSize = this.responsiveSize.xs;
+        }
+        else if (width >= 576 && width < 768 && this.responsiveSize.sm !== undefined) {
+            newSize = this.responsiveSize.sm;
+        }
+        else if (width >= 768 && width < 992 && this.responsiveSize.md !== undefined) {
+            newSize = this.responsiveSize.md;
+        }
+        else if (width >= 992 && width < 1200 && this.responsiveSize.lg !== undefined) {
+            newSize = this.responsiveSize.lg;
+        }
+        else if (width >= 1200 && this.responsiveSize.xl !== undefined) {
+            newSize = this.responsiveSize.xl;
+        }
+        this.currentSize = newSize;
+    };
+    setScale = () => {
+        if (this.isScaling || !this.textRef || !this.avatarRef)
+            return;
+        const textWidth = this.textRef.offsetWidth;
+        const avatarWidth = this.avatarRef.offsetWidth;
+        if (textWidth === 0 || avatarWidth === 0)
+            return;
+        const scale = avatarWidth - this.gap * 2 < textWidth
+            ? (avatarWidth - this.gap * 2) / textWidth
+            : 1;
+        if (Math.abs(this.scale - scale) > 0.01) {
+            this.isScaling = true;
+            this.scale = scale;
+            // Reset scaling flag on next tick to allow future updates if dimensions change
+            setTimeout(() => { this.isScaling = false; }, 100);
+        }
+    };
+    handleImgError = (event) => {
+        if (!this.el.isConnected)
+            return;
+        this.hasError = true;
+        this.avatarError.emit(event);
+    };
+    handleImgLoad = (event) => {
+        if (!this.el.isConnected)
+            return;
+        this.avatarLoad.emit(event);
+    };
+    handleAvatarClick = (event) => {
+        if (this.clickable || this.editable) {
+            if (!this.el.isConnected)
+                return;
+            this.avatarClick.emit(event);
+            if (this.editable) {
+                const input = this.el.shadowRoot?.querySelector('input[type="file"]');
+                if (input)
+                    input.click();
+            }
+        }
+    };
+    handleFileChange = (event) => {
+        const input = event.target;
+        const file = input.files?.[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                if (!this.el.isConnected)
+                    return;
+                const dataUrl = e.target?.result;
+                this.uploadedImage = dataUrl;
+                this.hasError = false;
+                this.avatarUpload.emit({ file, dataUrl });
+            };
+            reader.readAsDataURL(file);
+        }
+    };
+    handleMouseEnterAvatar = (event) => {
+        if (!this.el.isConnected)
+            return;
+        this.isHovered = true;
+        this.avatarMouseEnter.emit(event);
+        if (this.tooltipText || this.alt) {
+            this.showTooltip = true;
+        }
+    };
+    handleMouseLeaveAvatar = (event) => {
+        if (!this.el.isConnected)
+            return;
+        this.isHovered = false;
+        this.avatarMouseLeave.emit(event);
+        this.showTooltip = false;
+    };
+    getInitials(text) {
+        if (!text)
+            return '';
+        const parts = text.trim().split(' ').filter(p => !!p);
+        if (parts.length === 0)
+            return '';
+        if (parts.length === 1) {
+            return parts[0].substring(0, this.maxInitials).toUpperCase();
+        }
+        return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase().substring(0, this.maxInitials);
+    }
+    generateColorFromText(text) {
+        let hash = 0;
+        for (let i = 0; i < text.length; i++) {
+            hash = text.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        const colors = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae', '#52c41a', '#1890ff', '#eb2f96', '#fa8c16', '#13c2c2', '#722ed1', '#fa541c', '#2f54eb'];
+        return colors[Math.abs(hash) % colors.length];
+    }
+    getGradientColors() {
+        if (this.gradientColors) {
+            try {
+                const parsed = JSON.parse(this.gradientColors);
+                if (Array.isArray(parsed) && parsed.length >= 2)
+                    return parsed;
+            }
+            catch {
+                const split = this.gradientColors.split(',').map(c => c.trim());
+                if (split.length >= 2)
+                    return split;
+            }
+        }
+        return ['#667eea', '#764ba2'];
+    }
+    loadImage() {
+        if (!this.src || !this.lazy)
+            return;
+        const img = new Image();
+        img.src = this.src;
+        img.onload = (e) => this.handleImgLoad(e);
+        img.onerror = (e) => this.handleImgError(e);
+    }
+    getSizeInPixels() {
+        const numericSize = parseFloat(this.currentSize);
+        if (!isNaN(numericSize))
+            return numericSize;
+        switch (this.currentSize) {
+            case 'xs': return 24;
+            case 's': return 32;
+            case 'sm': return 32;
+            case 'default': return 20;
+            case 'm': return 40;
+            case 'md': return 40;
+            case 'l': return 48;
+            case 'lg': return 48;
+            case 'xl': return 64;
+            default: return 40;
+        }
+    }
+    renderImage() {
+        const imageSrc = this.uploadedImage || this.src;
+        if (this.hasError || !imageSrc)
+            return null;
+        const draggableValue = typeof this.imgDraggable === 'boolean' ? this.imgDraggable : this.imgDraggable === 'true';
+        const size = this.getSizeInPixels();
+        return (h("img", { src: imageSrc, srcset: this.srcSet || undefined, alt: this.alt || this.name || "Avatar", width: size, height: size, draggable: draggableValue, crossorigin: this.crossOrigin || undefined, loading: this.lazy ? 'lazy' : undefined, onError: this.handleImgError, onLoad: this.handleImgLoad, style: { objectFit: this.fit } }));
+    }
+    renderIcon() {
+        const isFallback = !this.icon && !!this.fallbackIcon;
+        const iconClass = this.icon || this.fallbackIcon;
+        if (iconClass) {
+            const library = isFallback ? 'fontawesome' : this.iconLibrary;
+            return h("ui-icon", { name: iconClass, library: library, size: "1.2em", class: "avatar-icon" });
+        }
+        return null;
+    }
+    renderText() {
+        const textContent = this.content || this.getInitials(this.name || this.el.textContent?.trim() || '');
+        if (!textContent)
+            return null;
+        const style = this.scale !== 1 ? {
+            transform: `scale(${this.scale}) translateX(-50%)`
+        } : {
+            transform: 'translateX(-50%)'
+        };
+        return (h("span", { ref: el => this.textRef = el, class: "avatar-string", style: style }, textContent));
+    }
+    getAvatarSizeAlias() {
+        let sizeToCheck = this.size;
+        if (this.responsiveSize && this.currentSize !== this.size)
+            sizeToCheck = this.currentSize;
+        const numericSize = parseFloat(sizeToCheck);
+        if (!isNaN(numericSize))
+            return `${numericSize}px`;
+        switch (sizeToCheck) {
+            case 'lg': return 'l';
+            case 'md': return 'm';
+            case 'sm': return 's';
+            default: return sizeToCheck;
+        }
+    }
+    getTooltipText() {
+        if (this.tooltipText)
+            return this.tooltipText;
+        if (this.alt)
+            return this.alt;
+        const textContent = this.name || this.el.textContent?.trim();
+        return textContent || '';
+    }
+    renderStatusIndicator() {
+        if (!this.showStatus || !this.status)
+            return null;
+        const statusClass = {
+            'avatar-status': true,
+            [`avatar-status-${this.status}`]: true,
+            [`avatar-status-${this.statusPosition}`]: true,
+            'avatar-status-pulse': this.statusPulse,
+        };
+        return h("span", { class: statusClass });
+    }
+    renderBadge() {
+        if (!this.badge)
+            return null;
+        const badgeString = this.badge.toString();
+        const isCircle = badgeString.length === 1;
+        const badgeClass = {
+            'avatar-badge': true,
+            [`avatar-badge-${this.badgePosition}`]: true,
+            'avatar-badge-circle': isCircle,
+            'avatar-badge-pill': !isCircle,
+        };
+        return (h("span", { class: badgeClass, style: { backgroundColor: this.badgeColor } }, this.badge));
+    }
+    renderVerified() {
+        if (!this.verified)
+            return null;
+        return (h("span", { class: "avatar-verified" }, h("ui-icon", { name: "check-circle", library: "fontawesome", size: "14px" })));
+    }
+    renderLoading() {
+        if (!this.loading && !this.skeleton)
+            return null;
+        if (this.skeleton)
+            return h("div", { class: "avatar-skeleton" }, h("div", { class: "skeleton-shimmer" }));
+        return h("div", { class: "avatar-loading" }, h("ui-icon", { name: "loader-2", library: "lucide", spin: true, size: "18px" }));
+    }
+    renderEditOverlay() {
+        if (!this.editable)
+            return null;
+        return (h("div", { class: "avatar-edit-overlay" }, h("ui-icon", { name: "camera", library: "fontawesome", size: "16px" }), h("ui-input", { type: "file", accept: this.acceptTypes, onInputChange: this.handleFileChange, style: { display: 'none' } })));
+    }
+    // --- Group Rendering Methods ---
+    getMaxCount() {
+        const maxVal = this.max || this.maxVisible;
+        if (typeof maxVal === 'number')
+            return maxVal;
+        if (maxVal && typeof maxVal === 'object' && 'count' in maxVal)
+            return maxVal.count || Infinity;
+        return Infinity;
+    }
+    getMaxStyle() {
+        if (this.max && typeof this.max === 'object' && 'style' in this.max)
+            return this.max.style;
+        return {};
+    }
+    calculateOverlap() {
+        if (this.layout === 'grid')
+            return this.spacing;
+        if (this.overlap !== null)
+            return -Math.abs(this.overlap);
+        const sizeMap = { xs: 24, s: 32, sm: 32, default: 20, m: 40, md: 40, l: 40, lg: 48, xl: 64 };
+        let avatarSize = 40;
+        const numericSize = parseFloat(this.size);
+        if (!isNaN(numericSize))
+            avatarSize = numericSize;
+        else if (typeof this.size === 'string' && sizeMap[this.size])
+            avatarSize = sizeMap[this.size];
+        return -(avatarSize * 0.4);
+    }
+    getAllAvatarData() {
+        if (this.avatars && this.avatars.length > 0)
+            return this.avatars;
+        return this.slottedAvatars.map(el => ({
+            src: el.getAttribute('src'),
+            name: el.getAttribute('name'),
+            content: el.getAttribute('content') || el.textContent?.trim(),
+            tooltipText: el.getAttribute('tooltipText') || el.getAttribute('tooltip-text') || el.getAttribute('name') || el.textContent?.trim(),
+            icon: el.getAttribute('icon'),
+            bgColor: el.getAttribute('bgColor') || el.getAttribute('bg-color'),
+            badge: el.getAttribute('badge'),
+            status: el.getAttribute('status')
+        }));
+    }
+    renderExcessCount(total, max) {
+        const excess = total - max;
+        if (excess <= 0)
+            return null;
+        const maxStyle = this.getMaxStyle();
+        return (h("div", { class: "excess-avatar-container", onMouseEnter: () => this.showPopoverGroup = this.enablePopover, onMouseLeave: () => this.showPopoverGroup = false, onClick: this.toggleRoster }, h("div", { class: { 'avatar-extra': true, [`avatar-${this.getAvatarSizeAlias()}`]: true, [`shape-${this.shape}`]: true }, style: { ...maxStyle, backgroundColor: maxStyle.backgroundColor || '#f56a00' } }, "+", excess), this.showPopoverGroup && this.enablePopover && this.layout === 'stack' && this.renderPopoverGroup(max)));
+    }
+    renderPopoverGroup(max) {
+        const all = this.getAllAvatarData();
+        const hidden = all.slice(max);
+        return (h("div", { class: "avatar-popover" }, h("div", { class: "popover-content" }, hidden.map((avatar, idx) => (h("div", { class: "popover-item", key: idx }, h("ui-avatar", { size: "xs", shape: this.shape, ...avatar }), h("span", { class: "popover-text" }, avatar.name || avatar.content || 'User')))))));
+    }
+    toggleRoster = (ev) => {
+        ev.stopPropagation();
+        this.isRosterOpen = !this.isRosterOpen;
+    };
+    closeRoster = () => {
+        this.isRosterOpen = false;
+    };
+    renderRoster(all) {
+        if (!this.isRosterOpen)
+            return null;
+        return (h("div", { class: "avatar-roster-backdrop", onClick: this.closeRoster }, h("div", { class: "avatar-roster-content", onClick: e => e.stopPropagation() }, h("div", { class: "roster-header" }, h("h3", null, "Participants (", all.length, ")"), h("ui-button", { variant: "ghost", onClick: this.closeRoster, ariaLabel: "Close", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "sm" })), h("div", { class: "roster-list" }, all.map((avatar, idx) => (h("div", { key: idx, class: "roster-item" }, h("ui-avatar", { ...avatar, size: "s", shape: this.shape }), h("div", { class: "roster-info" }, h("span", { class: "roster-name" }, avatar.name || avatar.content || 'Anonymous'), avatar.status && h("span", { class: `roster-status status-${avatar.status}` }, avatar.status)))))))));
+    }
+    render() {
+        if (this.group) {
+            const all = this.getAllAvatarData();
+            const maxCount = this.getMaxCount();
+            const visible = (this.layout === 'grid') ? all : all.slice(0, maxCount);
+            const overlap = this.calculateOverlap();
+            const groupClasses = {
+                'avatar-group': true,
+                [`layout-${this.layout}`]: true,
+                'avatar-group-animated': this.animated && this.layout === 'stack',
+                'expanded': this.isHovered && this.layout === 'stack'
+            };
+            const groupStyle = {
+                '--avatar-spacing': `${overlap}px`,
+                '--avatar-border-color': this.groupBorderColor,
+                '--avatar-border-width': `${this.groupBorderWidth}px`,
+                '--avatar-size': typeof this.size === 'number' ? `${this.size}px` : this.size.toString(),
+            };
+            return (h(Host, null, h("div", { class: groupClasses, style: groupStyle, onMouseEnter: () => this.isHovered = true, onMouseLeave: () => this.isHovered = false }, h("div", { class: "avatar-list" }, visible.map((avatar, index) => (h("ui-avatar", { ...avatar, key: index, size: this.size, shape: this.shape, border: `${this.groupBorderWidth}px solid ${this.groupBorderColor}`, class: "group-avatar", style: { zIndex: (this.layout === 'stack' ? (all.length - index) : 1).toString() } }))), this.layout === 'stack' && this.renderExcessCount(all.length, maxCount)), h("div", { style: { display: 'none' } }, h("slot", { onSlotchange: () => this.updateSlottedAvatars() }))), this.renderRoster(all)));
+        }
+        const hasImage = !!((this.uploadedImage || this.src) && !this.hasError);
+        const textContent = this.content || this.name || this.el.textContent?.trim();
+        const hasText = !hasImage && !!textContent;
+        const hasIcon = !hasImage && !hasText && !!(this.icon || this.fallbackIcon);
+        const sizeValue = this.getAvatarSizeAlias();
+        const isCustomSize = !isNaN(parseFloat(this.size));
+        const avatarClass = {
+            'avatar': true,
+            [`avatar-${this.shape}`]: true,
+            [`avatar-${sizeValue}`]: !isCustomSize,
+            'avatar-image': hasImage,
+            'avatar-icon': hasIcon,
+            'avatar-text': hasText,
+            'avatar-clickable': this.clickable || this.editable || !!this.href,
+            'avatar-loading': this.loading,
+            'avatar-hovered': this.isHovered,
+            [`avatar-animation-${this.animation}`]: this.animation !== 'none',
+            'avatar-gradient': this.gradient,
+            'avatar-glass': this.glass || this.variant === 'glass',
+            'avatar-skeleton': this.skeleton,
+            'avatar-reflection': this.reflection,
+            'avatar-story': this.story,
+            'avatar-story-seen': this.storySeen,
+            'avatar-active-speaker': this.activeSpeaker,
+            'avatar-3d': this.threeD,
+        };
+        const avatarStyle = {};
+        if (isCustomSize || this.responsiveSize) {
+            const pxSize = `${this.getSizeInPixels()}px`;
+            avatarStyle.width = pxSize;
+            avatarStyle.height = pxSize;
+            avatarStyle.lineHeight = pxSize;
+            if (isCustomSize) {
+                const sizeNum = parseFloat(this.size);
+                avatarStyle.fontSize = hasIcon ? `${sizeNum * 0.6}px` : `${sizeNum * 0.45}px`;
+            }
+        }
+        if (!hasImage) {
+            if (this.gradient) {
+                const [c1, c2] = this.getGradientColors();
+                avatarStyle.background = `linear-gradient(135deg, ${c1} 0%, ${c2} 100%)`;
+            }
+            else if (this.autoColor && textContent) {
+                avatarStyle.backgroundColor = this.generateColorFromText(textContent);
+            }
+            else if (this.bgColor) {
+                avatarStyle.backgroundColor = this.bgColor;
+            }
+        }
+        if (this.color && !hasImage)
+            avatarStyle.color = this.color;
+        if (this.border)
+            avatarStyle.border = this.border;
+        if (this.animation === 'ring' || this.animation === 'glow')
+            avatarStyle['--ring-color'] = this.ringColor;
+        if (this.segments > 0)
+            avatarStyle['--story-segments'] = this.segments;
+        const tooltipText = this.getTooltipText();
+        const hasTooltip = tooltipText.length > 0;
+        const hostClasses = {
+            [`avatar-${this.shape}`]: true,
+        };
+        if (typeof this.size === 'string') {
+            hostClasses[`avatar-${sizeValue}`] = true;
+        }
+        const Tag = this.href ? 'a' : 'div';
+        const tagProps = this.href ? { href: this.href, class: 'avatar-link' } : { class: 'avatar-container' };
+        return (h(Host, { class: hostClasses }, h(Tag, { ...tagProps }, h("div", { ref: el => this.avatarRef = el, class: avatarClass, style: avatarStyle, onMouseEnter: this.handleMouseEnterAvatar, onMouseLeave: this.handleMouseLeaveAvatar, onClick: this.handleAvatarClick, title: this.clickable || this.editable || this.href ? undefined : tooltipText, role: this.clickable || this.editable || this.href ? 'button' : undefined, tabindex: this.clickable || this.editable || this.href ? 0 : undefined }, this.loading && this.renderLoading(), this.skeleton && this.renderLoading(), !this.loading && !this.skeleton && (hasImage ? this.renderImage() : (hasIcon ? this.renderIcon() : (hasText ? this.renderText() : null))), (this.glass || this.variant === 'glass') && h("div", { class: "glass-overlay" }), this.reflection && h("div", { class: "reflection-overlay" }), this.renderEditOverlay()), this.renderStatusIndicator(), this.renderBadge(), this.renderVerified(), hasTooltip && this.showTooltip && h("div", { class: "avatar-tooltip" }, tooltipText))));
+    }
+    static get is() { return "ui-avatar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["avatar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["avatar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alternative text for the image"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt",
+                "defaultValue": "''"
+            },
+            "gap": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Letter type unit distance between left and right sides"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gap",
+                "defaultValue": "4"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom icon for an icon avatar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "''"
+            },
+            "iconLibrary": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconLibrary",
+                    "resolved": "\"bootstrap\" | \"default\" | \"emoji\" | \"fontawesome\" | \"google\" | \"iconoir\" | \"icons8\" | \"ionicons\" | \"lucide\" | \"remixicon\" | \"se\"",
+                    "references": {
+                        "IconLibrary": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::IconLibrary",
+                            "referenceLocation": "IconLibrary"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Library for the icon (e.g., 'se', 'fontawesome', etc.)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-library",
+                "defaultValue": "'default'"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Shape",
+                    "resolved": "\"circle\" | \"default\" | \"pill\" | \"rounded\" | \"square\"",
+                    "references": {
+                        "Shape": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::Shape",
+                            "referenceLocation": "Shape"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The shape of avatar: 'circle', 'square', 'hexagon', 'squircle'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape",
+                "defaultValue": "'circle'"
+            },
+            "size": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComponentSize | string | number",
+                    "resolved": "number | string",
+                    "references": {
+                        "ComponentSize": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::ComponentSize",
+                            "referenceLocation": "ComponentSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the avatar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'m'"
+            },
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The address of the image for an image avatar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src",
+                "defaultValue": "''"
+            },
+            "srcSet": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A list of sources to use for different screen resolutions"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src-set",
+                "defaultValue": "''"
+            },
+            "imgDraggable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the picture is allowed to be dragged"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "img-draggable",
+                "defaultValue": "true"
+            },
+            "crossOrigin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'anonymous' | 'use-credentials' | ''",
+                    "resolved": "\"\" | \"anonymous\" | \"use-credentials\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "CORS settings attributes"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cross-origin",
+                "defaultValue": "''"
+            },
+            "bgColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Background color for text/icon avatar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bg-color",
+                "defaultValue": "'#52c41a'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text color for text/icon avatar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'#ffffff'"
+            },
+            "border": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Border for avatar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "border",
+                "defaultValue": "''"
+            },
+            "tooltipText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip text to display on hover"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tooltip-text",
+                "defaultValue": "''"
+            },
+            "responsiveSize": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ xs?: number; sm?: number; md?: number; lg?: number; xl?: number }",
+                    "resolved": "{ xs?: number; sm?: number; md?: number; lg?: number; xl?: number; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Responsive size based on screen width"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "undefined as any"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StatusIndicator",
+                    "resolved": "\"\" | \"away\" | \"busy\" | \"dnd\" | \"offline\" | \"online\"",
+                    "references": {
+                        "StatusIndicator": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::StatusIndicator",
+                            "referenceLocation": "StatusIndicator"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User status indicator (online, offline, away, busy, dnd)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status",
+                "defaultValue": "''"
+            },
+            "statusPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FourCornerPosition",
+                    "resolved": "\"bottom-left\" | \"bottom-right\" | \"top-left\" | \"top-right\"",
+                    "references": {
+                        "FourCornerPosition": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::FourCornerPosition",
+                            "referenceLocation": "FourCornerPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the status indicator"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status-position",
+                "defaultValue": "'bottom-right'"
+            },
+            "showStatus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show status indicator"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-status",
+                "defaultValue": "false"
+            },
+            "badge": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge count/text overlay"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge",
+                "defaultValue": "''"
+            },
+            "badgePosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FourCornerPosition",
+                    "resolved": "\"bottom-left\" | \"bottom-right\" | \"top-left\" | \"top-right\"",
+                    "references": {
+                        "FourCornerPosition": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::FourCornerPosition",
+                            "referenceLocation": "FourCornerPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge position"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge-position",
+                "defaultValue": "'top-right'"
+            },
+            "badgeColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge-color",
+                "defaultValue": "'#ff4d4f'"
+            },
+            "editable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable edit/upload functionality"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "editable",
+                "defaultValue": "false"
+            },
+            "acceptTypes": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accept file types for upload"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accept-types",
+                "defaultValue": "'image/*'"
+            },
+            "fallbackIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fallback icon when no image"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fallback-icon",
+                "defaultValue": "'fas fa-user'"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Loading state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "lazy": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable lazy loading for images"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "lazy",
+                "defaultValue": "false"
+            },
+            "fit": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AvatarFit",
+                    "resolved": "\"contain\" | \"cover\" | \"fill\" | \"scale-down\"",
+                    "references": {
+                        "AvatarFit": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::AvatarFit",
+                            "referenceLocation": "AvatarFit"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Image fit mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fit",
+                "defaultValue": "'cover'"
+            },
+            "verified": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show verified badge"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "verified",
+                "defaultValue": "false"
+            },
+            "glass": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable glassmorphism effect"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "glass",
+                "defaultValue": "false"
+            },
+            "skeleton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show skeleton loading shimmer"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "skeleton",
+                "defaultValue": "false"
+            },
+            "reflection": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show premium reflection overlay"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reflection",
+                "defaultValue": "false"
+            },
+            "segments": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of segments for the story ring"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "segments",
+                "defaultValue": "0"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComponentVariant | 'glass'",
+                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
+                    "references": {
+                        "ComponentVariant": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::ComponentVariant",
+                            "referenceLocation": "ComponentVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Style variant of the avatar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "clickable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable click handler"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clickable",
+                "defaultValue": "false"
+            },
+            "autoColor": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Auto-generate color from text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-color",
+                "defaultValue": "false"
+            },
+            "gradient": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use gradient background"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gradient",
+                "defaultValue": "false"
+            },
+            "gradientColors": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Gradient colors (array of 2 colors or comma-separated string)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gradient-colors",
+                "defaultValue": "''"
+            },
+            "animation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComponentAnimation | 'ring' | 'glow'",
+                    "resolved": "\"bounce\" | \"expand\" | \"fade\" | \"fade-down\" | \"fade-in\" | \"fade-in-out\" | \"fade-left\" | \"fade-out\" | \"fade-right\" | \"fade-up\" | \"flip\" | \"flip-x\" | \"flip-y\" | \"float\" | \"glow\" | \"none\" | \"pulse\" | \"ring\" | \"ripple\" | \"rotate\" | \"scale\" | \"shake\" | \"shimmer\" | \"slide\" | \"slide-down\" | \"slide-in\" | \"slide-in-out\" | \"slide-left\" | \"slide-left-right\" | \"slide-out\" | \"slide-right\" | \"slide-up\" | \"slide-up-down\" | \"spin\" | \"spring\" | \"swing\" | \"wave\" | \"wobble\" | \"zoom\" | \"zoom-in\" | \"zoom-out\"",
+                    "references": {
+                        "ComponentAnimation": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::AnimationType",
+                            "referenceLocation": "ComponentAnimation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animation type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animation",
+                "defaultValue": "'none'"
+            },
+            "ringColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Ring color for animations"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ring-color",
+                "defaultValue": "'#3bf673'"
+            },
+            "story": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show story ring (Instagram style)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "story",
+                "defaultValue": "false"
+            },
+            "storySeen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mark story as seen"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "story-seen",
+                "defaultValue": "false"
+            },
+            "activeSpeaker": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active speaker visualizer"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-speaker",
+                "defaultValue": "false"
+            },
+            "statusPulse": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animate status indicator"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status-pulse",
+                "defaultValue": "false"
+            },
+            "threeD": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable 3D hover effect"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "three-d",
+                "defaultValue": "false"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional URL to link the avatar to"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href",
+                "defaultValue": "''"
+            },
+            "content": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Content to display (letter or text)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "content"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional name to auto-calculate initials from"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "maxInitials": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of characters to show for initials"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-initials",
+                "defaultValue": "2"
+            },
+            "group": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this avatar acts as a group container"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "group",
+                "defaultValue": "false"
+            },
+            "avatars": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "AvatarProps[]",
+                    "resolved": "AvatarProps[]",
+                    "references": {
+                        "AvatarProps": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/avatar/types.ts::AvatarProps",
+                            "referenceLocation": "AvatarProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of avatar props for dynamic generation (if group is true)"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "maxVisible": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of avatars to display before grouping (if group is true)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-visible",
+                "defaultValue": "5"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | { count?: number; style?: any; popover?: any }",
+                    "resolved": "number | { count?: number; style?: any; popover?: any; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum config: number or object { count, style, popover } (if group is true)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "undefined as any"
+            },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LayoutType",
+                    "resolved": "\"default\" | \"grid\" | \"list\" | \"stack\"",
+                    "references": {
+                        "LayoutType": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::LayoutType",
+                            "referenceLocation": "LayoutType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout mode for groups: 'stack' or 'grid'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "layout",
+                "defaultValue": "'stack'"
+            },
+            "spacing": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Spacing between avatars (in pixels) for grid mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "spacing",
+                "defaultValue": "4"
+            },
+            "overlap": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Overlapping amount (negative value for overlap)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "overlap",
+                "defaultValue": "undefined as any"
+            },
+            "groupBorderColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Border color for avatars in the group"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "group-border-color",
+                "defaultValue": "'white'"
+            },
+            "groupBorderWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Border width for avatars in the group"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "group-border-width",
+                "defaultValue": "2"
+            },
+            "enablePopover": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable popover to show all avatars when hovering over excess count"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-popover",
+                "defaultValue": "true"
+            },
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable animated shifting transitions on hover"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animated",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasError": {},
+            "scale": {},
+            "currentSize": {},
+            "showTooltip": {},
+            "isHovered": {},
+            "uploadedImage": {},
+            "slottedAvatars": {},
+            "showPopoverGroup": {},
+            "isRosterOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "avatarError",
+                "name": "avatarError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Handler when img load error"
+                },
+                "complexType": {
+                    "original": "Event",
+                    "resolved": "Event",
+                    "references": {
+                        "Event": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "node_modules::Event",
+                            "referenceLocation": "Event"
+                        }
+                    }
+                }
+            }, {
+                "method": "avatarClick",
+                "name": "avatarClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Handler when avatar is clicked"
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "avatarUpload",
+                "name": "avatarUpload",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Handler when file is uploaded"
+                },
+                "complexType": {
+                    "original": "{ file: File; dataUrl: string }",
+                    "resolved": "{ file: File; dataUrl: string; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "avatarLoad",
+                "name": "avatarLoad",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Handler when image loads successfully"
+                },
+                "complexType": {
+                    "original": "Event",
+                    "resolved": "Event",
+                    "references": {
+                        "Event": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "node_modules::Event",
+                            "referenceLocation": "Event"
+                        }
+                    }
+                }
+            }, {
+                "method": "avatarMouseEnter",
+                "name": "avatarMouseEnter",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Handler when mouse enters"
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "avatarMouseLeave",
+                "name": "avatarMouseLeave",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Handler when mouse leaves"
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "src",
+                "methodName": "handleSrcChange"
+            }, {
+                "propName": "loading",
+                "methodName": "handleLoadingChange"
+            }];
+    }
+}