atomicuilibrary 0.1.0 → 0.1.3

package/dist/collection/utils/dom.js

@@ -2,60 +2,143 @@
  * Finds the nearest ancestor that creates a new containing block for position:fixed elements.
  * This function is fully Shadow DOM and Flat Tree aware, accounting for slots and shadow boundaries.
  */
+function getFlatTreeParent(node) {
+    return node?.assignedSlot || node?.parentElement || node?.getRootNode()?.host || null;
+}
+function isStandardElement(node) {
+    return Boolean(node) && node.nodeType === 1;
+}
+function styleCreatesContainingBlock(style) {
+    const transform = style.transform || '';
+    const filter = style.filter || '';
+    const backdropFilter = style.backdropFilter || '';
+    const perspective = style.perspective || '';
+    const mask = style.mask || '';
+    const clipPath = style.clipPath || '';
+    const contain = style.contain || '';
+    const willChange = style.willChange || '';
+    const hasTransform = [transform, style.translate || '', style.rotate || '', style.scale || ''].some((value) => value && value !== 'none');
+    const hasWillChange = ['transform', 'perspective', 'filter', 'backdrop-filter', 'translate', 'rotate', 'scale', 'mask', 'clip-path', 'contain']
+        .some((token) => willChange.includes(token));
+    const hasContain = ['layout', 'paint', 'strict', 'content'].some((token) => contain.includes(token));
+    return hasTransform
+        || Boolean(filter && filter !== 'none')
+        || Boolean(backdropFilter && backdropFilter !== 'none')
+        || Boolean(perspective && perspective !== 'none')
+        || Boolean(mask && mask !== 'none')
+        || Boolean(clipPath && clipPath !== 'none')
+        || hasWillChange
+        || hasContain;
+}
 export function getTransformedAncestor(element) {
     let el = element;
     while (el && el !== document.documentElement) {
-        // If it's not a standard element (e.g. ShadowRoot), jump to its host
-        if (el.nodeType !== 1) {
+        if (!isStandardElement(el)) {
             el = el.host || el.parentNode;
             continue;
         }
-        const style = window.getComputedStyle(el);
+        const style = globalThis.getComputedStyle(el);
         if (!style) {
-            // Move up the tree (Flat Tree aware)
-            el = el.assignedSlot || el.parentElement || el.getRootNode().host;
+            el = getFlatTreeParent(el);
             continue;
         }
-        const s = style;
-        const transform = s.transform || s.webkitTransform || s.mozTransform || s.msTransform || s.oTransform;
-        const translate = s.translate || '';
-        const rotate = s.rotate || '';
-        const scale = s.scale || '';
-        const filter = s.filter || s.webkitFilter || s.mozFilter || s.msFilter || s.oFilter;
-        const backdropFilter = s.backdropFilter || s.webkitBackdropFilter || s.mozBackdropFilter || s.msBackdropFilter || s.oBackdropFilter;
-        const perspective = s.perspective || s.webkitPerspective || s.mozPerspective || s.msPerspective || s.oPerspective;
-        const mask = s.mask || s.webkitMask || '';
-        const clipPath = s.clipPath || s.webkitClipPath || '';
-        const willChange = s.willChange || '';
-        const hasTransform = (transform && transform !== 'none') || (translate && translate !== 'none') || (rotate && rotate !== 'none') || (scale && scale !== 'none');
-        const hasFilter = filter && filter !== 'none';
-        const hasBackdropFilter = backdropFilter && backdropFilter !== 'none';
-        const hasPerspective = perspective && perspective !== 'none';
-        const hasMask = mask && mask !== 'none';
-        const hasClipPath = clipPath && clipPath !== 'none';
-        const hasWillChange = willChange &&
-            (willChange.includes('transform') ||
-                willChange.includes('perspective') ||
-                willChange.includes('filter') ||
-                willChange.includes('backdrop-filter') ||
-                willChange.includes('translate') ||
-                willChange.includes('rotate') ||
-                willChange.includes('scale') ||
-                willChange.includes('mask') ||
-                willChange.includes('clip-path') ||
-                willChange.includes('contain'));
-        // contain: layout, paint, strict, or content also creates a containing block
-        const contain = style.contain;
-        const hasContain = contain && (contain.includes('layout') || contain.includes('paint') || contain.includes('strict') || contain.includes('content'));
-        if (hasTransform || hasFilter || hasBackdropFilter || hasPerspective || hasMask || hasClipPath || hasWillChange || hasContain) {
+        if (styleCreatesContainingBlock(style)) {
             return el;
         }
-        // Move up (Flat Tree aware)
-        // Priority: 1. Assigned Slot (for projected content) 2. Parent Element 3. Shadow Host
-        el = el.assignedSlot || el.parentElement || el.getRootNode().host;
+        el = getFlatTreeParent(el);
     }
     return null;
 }
+function getOppositePlacement(requestedPlacement, space, menuWidth, menuHeight) {
+    if (requestedPlacement === 'bottom' && space.below < menuHeight && space.above > space.below)
+        return 'top';
+    if (requestedPlacement === 'top' && space.above < menuHeight && space.below > space.above)
+        return 'bottom';
+    if (requestedPlacement === 'right' && space.right < menuWidth && space.left > space.right)
+        return 'left';
+    if (requestedPlacement === 'left' && space.left < menuWidth && space.right > space.left)
+        return 'right';
+    return requestedPlacement;
+}
+function resolvePlacement(requestedPlacement, space, menuWidth, menuHeight) {
+    const finalPlacement = getOppositePlacement(requestedPlacement, space, menuWidth, menuHeight);
+    const verticalPlacement = finalPlacement === 'top' || finalPlacement === 'bottom';
+    const verticalSpace = Math.max(space.above, space.below);
+    const horizontalSpace = Math.max(space.left, space.right);
+    if (verticalPlacement && verticalSpace < menuHeight && (space.right >= menuWidth || space.left >= menuWidth)) {
+        return space.right > space.left ? 'right' : 'left';
+    }
+    if (!verticalPlacement && horizontalSpace < menuWidth && (space.above >= menuHeight || space.below >= menuHeight)) {
+        return space.above > space.below ? 'top' : 'bottom';
+    }
+    return finalPlacement;
+}
+function getBasePlacementCoordinates(placement, triggerRect, size, screen, gap, padding) {
+    switch (placement) {
+        case 'top':
+            return {
+                left: 0,
+                top: triggerRect.top - size.height - gap,
+                availableWidth: screen.width - (padding * 2),
+                availableHeight: triggerRect.top - gap - padding,
+            };
+        case 'bottom':
+            return {
+                left: 0,
+                top: triggerRect.bottom + gap,
+                availableWidth: screen.width - (padding * 2),
+                availableHeight: screen.height - triggerRect.bottom - gap - padding,
+            };
+        case 'left':
+            return {
+                left: triggerRect.left - size.width - gap,
+                top: 0,
+                availableWidth: triggerRect.left - gap - padding,
+                availableHeight: screen.height - (padding * 2),
+            };
+        case 'right':
+        default:
+            return {
+                left: triggerRect.right + gap,
+                top: 0,
+                availableWidth: screen.width - triggerRect.right - gap - padding,
+                availableHeight: screen.height - (padding * 2),
+            };
+    }
+}
+function applyCrossAxisAlignment(placement, align, triggerRect, size, coords, screen, padding) {
+    if (placement === 'top' || placement === 'bottom') {
+        let alignedLeft = triggerRect.left + (triggerRect.width / 2) - (size.width / 2);
+        if (align === 'start')
+            alignedLeft = triggerRect.left;
+        if (align === 'end')
+            alignedLeft = triggerRect.right - size.width;
+        coords.left = alignedLeft;
+        coords.availableWidth = screen.width - (padding * 2);
+        return coords;
+    }
+    let alignedTop = triggerRect.top + (triggerRect.height / 2) - (size.height / 2);
+    if (align === 'start')
+        alignedTop = triggerRect.top;
+    if (align === 'end')
+        alignedTop = triggerRect.bottom - size.height;
+    coords.top = alignedTop;
+    coords.availableHeight = screen.height - (padding * 2);
+    return coords;
+}
+function getArrowCoordinates(placement, triggerRect, top, left, ancestorOffset, actualMenuWidth, actualMenuHeight) {
+    const arrowPadding = 12;
+    if (placement === 'top' || placement === 'bottom') {
+        const triggerCenter = triggerRect.left + (triggerRect.width / 2);
+        const menuAbsoluteLeft = left + ancestorOffset.x;
+        const arrowX = Math.max(arrowPadding, Math.min(triggerCenter - menuAbsoluteLeft, actualMenuWidth - arrowPadding));
+        return { arrowX, arrowY: 0 };
+    }
+    const triggerCenter = triggerRect.top + (triggerRect.height / 2);
+    const menuAbsoluteTop = top + ancestorOffset.y;
+    const arrowY = Math.max(arrowPadding, Math.min(triggerCenter - menuAbsoluteTop, actualMenuHeight - arrowPadding));
+    return { arrowX: 0, arrowY };
+}
 /**
  * Returns the viewport-relative offset of the nearest transformed ancestor.
  */
@@ -93,16 +176,16 @@ export function autoUpdate(reference, floating, update, options = {}) {
     else {
         update(); // Initial update
     }
-    window.addEventListener('scroll', update, { capture: true, passive: true });
-    window.addEventListener('resize', update, { passive: true });
+    globalThis.addEventListener('scroll', update, { capture: true, passive: true });
+    globalThis.addEventListener('resize', update, { passive: true });
     const resizeObserver = new ResizeObserver(() => update());
     resizeObserver.observe(reference);
     resizeObserver.observe(floating);
     const cleanup = () => {
         if (frameId !== null)
             cancelAnimationFrame(frameId);
-        window.removeEventListener('scroll', update, { capture: true });
-        window.removeEventListener('resize', update);
+        globalThis.removeEventListener('scroll', update, { capture: true });
+        globalThis.removeEventListener('resize', update);
         resizeObserver.disconnect();
     };
     return cleanup;
@@ -112,129 +195,46 @@ export function autoUpdate(reference, floating, update, options = {}) {
  * Supports all 4 sides, alignment, and boundary detection.
  */
 export function calculateUniversalPlacement(trigger, options) {
-    const { menuWidth, menuHeight, gap = 4, placement = 'auto', align = 'center', padding = 8, useTransformedAncestorOffset = true } = options;
+    const { menuWidth, menuHeight, actualMenuWidth = menuWidth, actualMenuHeight = menuHeight, gap = 4, placement = 'auto', align = 'center', padding = 8, useTransformedAncestorOffset = true, flip = true, shift = true } = options;
     if (!trigger) {
         return { left: 0, top: 0, width: 0, availableWidth: 0, availableHeight: 0, placement: 'bottom', isClamped: false };
     }
     const triggerRect = trigger.getBoundingClientRect();
-    const screenW = window.innerWidth;
-    const screenH = window.innerHeight;
+    const screen = { width: globalThis.innerWidth, height: globalThis.innerHeight };
     const ancestorOffset = useTransformedAncestorOffset
         ? getTransformedAncestorOffset(trigger)
         : { x: 0, y: 0, el: null };
-    // 1. Determine Vertical/Horizontal Placement
     const requestedPlacement = placement === 'auto' ? 'bottom' : placement;
     let finalPlacement = requestedPlacement;
-    if (placement === 'auto') {
-        const spaceBelow = screenH - triggerRect.bottom - gap - padding;
-        const spaceAbove = triggerRect.top - gap - padding;
-        const spaceRight = screenW - triggerRect.right - gap - padding;
-        const spaceLeft = triggerRect.left - gap - padding;
-        // Preference: If requestedPlacement is blocked, try opposite, then try other axis if both blocked
-        if (requestedPlacement === 'bottom' && spaceBelow < menuHeight && spaceAbove > spaceBelow) {
-            finalPlacement = 'top';
-        }
-        else if (requestedPlacement === 'top' && spaceAbove < menuHeight && spaceBelow > spaceAbove) {
-            finalPlacement = 'bottom';
-        }
-        else if (requestedPlacement === 'right' && spaceRight < menuWidth && spaceLeft > spaceRight) {
-            finalPlacement = 'left';
-        }
-        else if (requestedPlacement === 'left' && spaceLeft < menuWidth && spaceRight > spaceLeft) {
-            finalPlacement = 'right';
-        }
-        // Secondary: If still not enough space on the main axis, pick the one with most space
-        if (finalPlacement === 'top' || finalPlacement === 'bottom') {
-            if (Math.max(spaceAbove, spaceBelow) < menuHeight) {
-                if (spaceRight >= menuWidth || spaceLeft >= menuWidth) {
-                    finalPlacement = spaceRight > spaceLeft ? 'right' : 'left';
-                }
-            }
-        }
-        else {
-            if (Math.max(spaceLeft, spaceRight) < menuWidth) {
-                if (spaceAbove >= menuHeight || spaceBelow >= menuHeight) {
-                    finalPlacement = spaceAbove > spaceBelow ? 'top' : 'bottom';
-                }
-            }
-        }
-    }
-    // 2. Calculate initial coordinates and available dimensions
-    let left = 0;
-    let top = 0;
-    let availableWidth = screenW - (padding * 2);
-    let availableHeight = screenH - (padding * 2);
-    switch (finalPlacement) {
-        case 'top':
-            top = triggerRect.top - menuHeight - gap;
-            availableHeight = triggerRect.top - gap - padding;
-            break;
-        case 'bottom':
-            top = triggerRect.bottom + gap;
-            availableHeight = screenH - triggerRect.bottom - gap - padding;
-            break;
-        case 'left':
-            left = triggerRect.left - menuWidth - gap;
-            availableWidth = triggerRect.left - gap - padding;
-            break;
-        case 'right':
-            left = triggerRect.right + gap;
-            availableWidth = screenW - triggerRect.right - gap - padding;
-            break;
-    }
-    // Handle alignment for the cross-axis
-    if (finalPlacement === 'top' || finalPlacement === 'bottom') {
-        // Horizontal alignment
-        if (align === 'start')
-            left = triggerRect.left;
-        else if (align === 'end')
-            left = triggerRect.right - menuWidth;
-        else
-            left = triggerRect.left + (triggerRect.width / 2) - (menuWidth / 2);
-        availableWidth = screenW - (padding * 2);
-    }
-    else {
-        // Vertical alignment
-        if (align === 'start')
-            top = triggerRect.top;
-        else if (align === 'end')
-            top = triggerRect.bottom - menuHeight;
-        else
-            top = triggerRect.top + (triggerRect.height / 2) - (menuHeight / 2);
-        availableHeight = screenH - (padding * 2);
+    if (placement === 'auto' || flip) {
+        finalPlacement = resolvePlacement(requestedPlacement, {
+            below: screen.height - triggerRect.bottom - gap - padding,
+            above: triggerRect.top - gap - padding,
+            right: screen.width - triggerRect.right - gap - padding,
+            left: triggerRect.left - gap - padding,
+        }, menuWidth, menuHeight);
     }
-    // Apply ancestor offset
+    const baseCoords = getBasePlacementCoordinates(finalPlacement, triggerRect, { width: actualMenuWidth, height: actualMenuHeight }, screen, gap, padding);
+    const alignedCoords = applyCrossAxisAlignment(finalPlacement, align, triggerRect, { width: actualMenuWidth, height: actualMenuHeight }, baseCoords, screen, padding);
+    let { left, top, availableWidth, availableHeight } = alignedCoords;
     left -= ancestorOffset.x;
     top -= ancestorOffset.y;
-    // 3. Clamping to viewport (account for transform ancestors)
-    const containerWidth = ancestorOffset.el ? ancestorOffset.el.getBoundingClientRect().width : screenW;
-    const containerHeight = ancestorOffset.el ? ancestorOffset.el.getBoundingClientRect().height : screenH;
     const originalLeft = left;
     const originalTop = top;
-    // Cross-axis clamping
-    if (finalPlacement === 'top' || finalPlacement === 'bottom') {
-        left = Math.max(padding, Math.min(left, containerWidth - menuWidth - padding));
-    }
-    else {
-        top = Math.max(padding, Math.min(top, containerHeight - menuHeight - padding));
+    const minLeft = padding - ancestorOffset.x;
+    const maxLeft = screen.width - actualMenuWidth - padding - ancestorOffset.x;
+    const minTop = padding - ancestorOffset.y;
+    const maxTop = screen.height - actualMenuHeight - padding - ancestorOffset.y;
+    if (shift) {
+        if (finalPlacement === 'top' || finalPlacement === 'bottom') {
+            left = Math.max(minLeft, Math.min(left, maxLeft));
+        }
+        else {
+            top = Math.max(minTop, Math.min(top, maxTop));
+        }
     }
     const isClamped = left !== originalLeft || top !== originalTop;
-    // 4. Calculate arrow position (local to the floating element)
-    let arrowX = 0;
-    let arrowY = 0;
-    const arrowPadding = 12; // Minimum distance from corners
-    if (finalPlacement === 'top' || finalPlacement === 'bottom') {
-        const triggerCenter = triggerRect.left + (triggerRect.width / 2);
-        const menuAbsoluteLeft = left + ancestorOffset.x;
-        arrowX = triggerCenter - menuAbsoluteLeft;
-        arrowX = Math.max(arrowPadding, Math.min(arrowX, menuWidth - arrowPadding));
-    }
-    else {
-        const triggerCenter = triggerRect.top + (triggerRect.height / 2);
-        const menuAbsoluteTop = top + ancestorOffset.y;
-        arrowY = triggerCenter - menuAbsoluteTop;
-        arrowY = Math.max(arrowPadding, Math.min(arrowY, menuHeight - arrowPadding));
-    }
+    const { arrowX, arrowY } = getArrowCoordinates(finalPlacement, triggerRect, top, left, ancestorOffset, actualMenuWidth, actualMenuHeight);
     return {
         left,
         top,

package/dist/components/avatar-group.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as a,h as r,Host as e,transformTag as o}from"@stencil/core/internal/client";import{d as s}from"./avatar.js";import{d as i,a as n}from"./badge.js";import{d as p}from"./icon.js";import{d}from"./input.js";import{d as l}from"./loader.js";const c=t(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}get el(){return this}avatars=[];maxVisible=5;max=null;size="m";shape="circle";layout="stack";spacing=4;overlap=null;borderColor="white";borderWidth=2;enablePopover=!0;animated=!0;slottedAvatars=[];showPopover=!1;isRosterOpen=!1;isHovered=!1;handleSlotChange(){this.updateSlottedAvatars()}componentWillLoad(){this.updateSlottedAvatars()}componentDidLoad(){}updateSlottedAvatars(){const t=this.el.shadowRoot?.querySelector("slot"),a=t?t.assignedElements():Array.from(this.el.children);this.slottedAvatars=a.filter((t=>"ui-avatar"===t.tagName.toLowerCase()))}getMaxCount(){const t=this.max||this.maxVisible;return"number"==typeof t?t:t&&"object"==typeof t&&"count"in t&&t.count||1/0}getMaxStyle(){return this.max&&"object"==typeof this.max&&"style"in this.max?this.max.style:{}}calculateOverlap(){if("grid"===this.layout)return this.spacing;if(null!==this.overlap)return-Math.abs(this.overlap);const t={xs:24,s:32,sm:32,default:20,m:40,lg:40,l:48,xl:64};let a=40;const r=parseFloat(this.size);return isNaN(r)?"string"==typeof this.size&&t[this.size]&&(a=t[this.size]):a=r,-.4*a}handleMouseEnterGroup=()=>{this.isHovered=!0};handleMouseLeaveGroup=()=>{this.isHovered=!1,this.showPopover=!1};toggleRoster=t=>{t.stopPropagation(),this.isRosterOpen=!this.isRosterOpen};closeRoster=()=>{this.isRosterOpen=!1};renderExcessCount(t,a){const e=t-a;if(e<=0)return null;const o=this.getMaxStyle();return r("div",{class:"excess-avatar-container",onMouseEnter:()=>this.showPopover=this.enablePopover,onMouseLeave:()=>this.showPopover=!1,onClick:this.toggleRoster},r("div",{class:{"avatar-extra":!0,[`avatar-${this.getSizeAlias()}`]:!0,[`shape-${this.shape}`]:!0},style:{...o,backgroundColor:o.backgroundColor||"#f56a00"}},"+",e),this.showPopover&&this.enablePopover&&"stack"===this.layout&&this.renderPopover(a))}renderPopover(t){const a=this.getAllAvatarData().slice(t);return r("div",{class:"avatar-popover"},r("div",{class:"popover-content"},a.map(((t,a)=>r("div",{class:"popover-item",key:a},r("ui-avatar",{size:"xs",shape:this.shape,src:t.src,icon:t.icon,name:t.name,content:t.content,bgColor:t.bgColor}),r("span",{class:"popover-text"},t.name||t.content||"User"))))))}getAllAvatarData(){return this.avatars&&this.avatars.length>0?this.avatars:this.slottedAvatars.map((t=>({src:t.getAttribute("src"),name:t.getAttribute("name"),content:t.getAttribute("content")||t.textContent?.trim(),tooltipText:t.getAttribute("tooltipText")||t.getAttribute("tooltip-text")||t.getAttribute("name")||t.textContent?.trim(),icon:t.getAttribute("icon"),bgColor:t.getAttribute("bgColor")||t.getAttribute("bg-color"),badge:t.getAttribute("badge"),status:t.getAttribute("status")})))}getSizeAlias(){return{sm:"s",md:"m",lg:"l"}[this.size]||this.size}render(){const t=this.getAllAvatarData(),a=this.getMaxCount(),o="grid"===this.layout?t:t.slice(0,a),s=this.calculateOverlap(),i={"avatar-group":!0,[`layout-${this.layout}`]:!0,"avatar-group-animated":this.animated&&"stack"===this.layout,expanded:this.isHovered&&"stack"===this.layout},n={"--avatar-spacing":`${s}px`,"--avatar-border-color":this.borderColor,"--avatar-border-width":`${this.borderWidth}px`,"--avatar-size":"number"==typeof this.size?`${this.size}px`:this.size.toString()};return r(e,{key:"d1c53574be9549de6cce9cf8aae33ac8019dd556"},r("div",{key:"0f64bd06b7f8bd077e98286b9df7cd24e1924a50",class:i,style:n,onMouseEnter:this.handleMouseEnterGroup,onMouseLeave:this.handleMouseLeaveGroup},r("div",{key:"937475ddb42adc924320a2f15f61a76f3ec3c916",class:"avatar-list"},o.map(((a,e)=>r("ui-avatar",{...a,key:e,size:this.size,shape:this.shape,border:`${this.borderWidth}px solid ${this.borderColor}`,class:"group-avatar",style:{zIndex:("stack"===this.layout?t.length-e:1).toString()}}))),"stack"===this.layout&&this.renderExcessCount(t.length,a)),r("div",{key:"52779f80360501b288b88cd896f2dd117b18c0e1",style:{display:"none"}},r("slot",{key:"bd6996c4789091de98a2f01349990412278e51ee"}))),this.isRosterOpen&&r("div",{key:"fb404a5fd2e4723bb54465a8e6b94d220052721d",class:"avatar-roster-backdrop",onClick:this.closeRoster},r("div",{key:"81df0d927175829c2fe80e3c39bf81350011620e",class:"avatar-roster-content",onClick:t=>t.stopPropagation()},r("div",{key:"89cea0f5aed19f87eaab53bdab36b0ccf429dc54",class:"roster-header"},r("h3",{key:"3d113ccb91edb0b47e7bccc311af3f52f09ed5f2"},"Participants (",t.length,")"),r("ui-button",{key:"ad42880fadf89334d69ff0fca445adf7fb1b4494",variant:"ghost",onClick:this.closeRoster,ariaLabel:"Close roster",icon:"x",iconLibrary:"lucide",iconOnly:!0,size:"sm"})),r("div",{key:"d683e744b8a132d600d8681254c39b0569b1564c",class:"roster-list"},t.map(((t,a)=>r("div",{key:a,class:"roster-item"},r("ui-avatar",{...t,size:"s",shape:this.shape}),r("div",{class:"roster-info"},r("span",{class:"roster-name"},t.name||t.content||"Anonymous"),t.status&&r("span",{class:`roster-status status-${t.status}`},t.status)))))))))}static get style(){return'.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.avatar-group{display:inline-flex;position:relative;align-items:center}.avatar-group.layout-stack .group-avatar{margin-right:var(--avatar-spacing, -16px);transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1);transform-origin:center bottom}.avatar-group.layout-stack .group-avatar:hover{z-index:100 !important;transform:scale(1.25) translateY(-10px);margin-right:8px !important;box-shadow:0 10px 25px rgba(0, 0, 0, 0.2);border-color:var(--border-subtle, #fff) !important}.avatar-group.layout-stack .group-avatar:hover~.group-avatar,.avatar-group.layout-stack .group-avatar:hover~.excess-avatar-container{transform:translateX(24px)}.avatar-group.layout-stack.avatar-group-animated:hover{padding-right:40px}.avatar-group.layout-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(calc(var(--avatar-size) + 8px), 1fr));gap:8px;width:100%}.avatar-list{display:flex;flex-wrap:wrap;align-items:center}.layout-stack .avatar-list{flex-wrap:nowrap}.avatar-extra{display:inline-flex;align-items:center;justify-content:center;background-color:var(--color-danger, #f56a00);color:var(--text-standard, #ffffff);font-weight:600;border:var(--avatar-border-width, 2px) solid var(--avatar-border-color, #fff);cursor:pointer;z-index:1;transition:transform 0.2s;box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);font-size:0.8em}.avatar-extra:hover{transform:scale(1.1) translateY(-4px);z-index:100;box-shadow:0 8px 20px rgba(0, 0, 0, 0.15)}.avatar-extra.shape-circle{border-radius:50%}.avatar-extra.shape-square{border-radius:8px}.avatar-popover{position:absolute;top:100%;right:0;background:var(--bg-primary, #ffffff);border-radius:8px;box-shadow:0 8px 24px rgba(0, 0, 0, 0.2);padding:12px;z-index:1000;min-width:180px;margin-top:8px;animation:popoverFadeIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}.avatar-popover::after{content:"";position:absolute;top:-12px;right:12px;border:6px solid transparent;border-bottom-color:var(--bg-primary, #ffffff)}.avatar-popover .popover-content{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow-y:auto}.avatar-popover .popover-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:6px;transition:background 0.2s;cursor:pointer}.avatar-popover .popover-item:hover{background:var(--bg-secondary, #f3f4f6)}.avatar-popover .popover-item ui-avatar{transition:none !important;transform:none !important;box-shadow:none !important}.avatar-popover .popover-text{font-size:14px;color:var(--text-secondary, #374151);font-weight:500}@keyframes popoverFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.avatar-roster-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0, 0, 0, 0.5);display:flex;align-items:center;justify-content:center;z-index:2000;backdrop-filter:blur(4px)}.avatar-roster-content{background:var(--bg-primary, #ffffff);width:90%;max-width:500px;max-height:80vh;border-radius:16px;box-shadow:0 20px 50px rgba(0, 0, 0, 0.3);display:flex;flex-direction:column;overflow:hidden;animation:modalIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)}.roster-header{padding:20px;border-bottom:1px solid var(--border-subtle, #eee);display:flex;align-items:center;justify-content:space-between}.roster-header h3{margin:0;color:var(--text-primary, #1f2937)}.roster-header .close-btn{background:none;border:none;font-size:28px;cursor:pointer;color:var(--text-muted, #9ca3af)}.roster-header .close-btn:hover{color:var(--text-primary, #1f2937)}.roster-list{padding:12px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.roster-item{display:flex;align-items:center;gap:16px;padding:12px;border-radius:12px;transition:background 0.2s}.roster-item:hover{background:var(--bg-primary, #f9fafb)}.roster-info{display:flex;flex-direction:column}.roster-name{font-weight:600;color:var(--text-primary, #111827)}.roster-status{font-size:11px;text-transform:capitalize;border-radius:4px;padding:1px 6px;width:fit-content}.status-online{color:var(--color-success-hover, #059669);background:var(--bg-primary, #ecfdf5)}@keyframes modalIn{from{opacity:0;transform:scale(0.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}'}},[769,"ui-avatar-group",{avatars:[16],maxVisible:[2,"max-visible"],max:[2],size:[8],shape:[1],layout:[1],spacing:[2],overlap:[2],borderColor:[1,"border-color"],borderWidth:[2,"border-width"],enablePopover:[4,"enable-popover"],animated:[4],slottedAvatars:[32],showPopover:[32],isRosterOpen:[32],isHovered:[32]},[[0,"slotchange","handleSlotChange"]]]);function h(){"undefined"!=typeof customElements&&["ui-avatar-group","ui-avatar","ui-badge","ui-button","ui-icon","ui-input","ui-loader"].forEach((t=>{switch(t){case"ui-avatar-group":customElements.get(o(t))||customElements.define(o(t),c);break;case"ui-avatar":customElements.get(o(t))||s();break;case"ui-badge":customElements.get(o(t))||n();break;case"ui-button":customElements.get(o(t))||i();break;case"ui-icon":customElements.get(o(t))||p();break;case"ui-input":customElements.get(o(t))||d();break;case"ui-loader":customElements.get(o(t))||l()}}))}export{c as A,h as d}
+import{proxyCustomElement as t,HTMLElement as a,h as r,Host as e,transformTag as o}from"@stencil/core/internal/client";import{d as s}from"./avatar.js";import{d as i}from"./badge.js";import{d as n}from"./button.js";import{d as p}from"./icon.js";import{d}from"./input.js";import{d as l}from"./loader.js";const c=t(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}get el(){return this}avatars=[];maxVisible=5;max=null;size="m";shape="circle";layout="stack";spacing=4;overlap=null;borderColor="white";borderWidth=2;enablePopover=!0;animated=!0;slottedAvatars=[];showPopover=!1;isRosterOpen=!1;isHovered=!1;handleSlotChange(){this.updateSlottedAvatars()}componentWillLoad(){this.updateSlottedAvatars()}componentDidLoad(){}updateSlottedAvatars(){const t=this.el.shadowRoot?.querySelector("slot"),a=t?t.assignedElements():Array.from(this.el.children);this.slottedAvatars=a.filter((t=>"ui-avatar"===t.tagName.toLowerCase()))}getMaxCount(){const t=this.max||this.maxVisible;return"number"==typeof t?t:t&&"object"==typeof t&&"count"in t&&t.count||1/0}getMaxStyle(){return this.max&&"object"==typeof this.max&&"style"in this.max?this.max.style:{}}calculateOverlap(){if("grid"===this.layout)return this.spacing;if(null!==this.overlap)return-Math.abs(this.overlap);const t={xs:24,s:32,sm:32,default:20,m:40,lg:40,l:48,xl:64};let a=40;const r=parseFloat(this.size);return isNaN(r)?"string"==typeof this.size&&t[this.size]&&(a=t[this.size]):a=r,-.4*a}handleMouseEnterGroup=()=>{this.isHovered=!0};handleMouseLeaveGroup=()=>{this.isHovered=!1,this.showPopover=!1};toggleRoster=t=>{t.stopPropagation(),this.isRosterOpen=!this.isRosterOpen};closeRoster=()=>{this.isRosterOpen=!1};renderExcessCount(t,a){const e=t-a;if(e<=0)return null;const o=this.getMaxStyle();return r("div",{class:"excess-avatar-container",onMouseEnter:()=>this.showPopover=this.enablePopover,onMouseLeave:()=>this.showPopover=!1,onClick:this.toggleRoster},r("div",{class:{"avatar-extra":!0,[`avatar-${this.getSizeAlias()}`]:!0,[`shape-${this.shape}`]:!0},style:{...o,backgroundColor:o.backgroundColor||"#f56a00"}},"+",e),this.showPopover&&this.enablePopover&&"stack"===this.layout&&this.renderPopover(a))}renderPopover(t){const a=this.getAllAvatarData().slice(t);return r("div",{class:"avatar-popover"},r("div",{class:"popover-content"},a.map(((t,a)=>r("div",{class:"popover-item",key:a},r("ui-avatar",{size:"xs",shape:this.shape,src:t.src,icon:t.icon,name:t.name,content:t.content,bgColor:t.bgColor}),r("span",{class:"popover-text"},t.name||t.content||"User"))))))}getAllAvatarData(){return this.avatars&&this.avatars.length>0?this.avatars:this.slottedAvatars.map((t=>({src:t.getAttribute("src"),name:t.getAttribute("name"),content:t.getAttribute("content")||t.textContent?.trim(),tooltipText:t.getAttribute("tooltipText")||t.getAttribute("tooltip-text")||t.getAttribute("name")||t.textContent?.trim(),icon:t.getAttribute("icon"),bgColor:t.getAttribute("bgColor")||t.getAttribute("bg-color"),badge:t.getAttribute("badge"),status:t.getAttribute("status")})))}getSizeAlias(){return{sm:"s",md:"m",lg:"l"}[this.size]||this.size}render(){const t=this.getAllAvatarData(),a=this.getMaxCount(),o="grid"===this.layout?t:t.slice(0,a),s=this.calculateOverlap(),i={"avatar-group":!0,[`layout-${this.layout}`]:!0,"avatar-group-animated":this.animated&&"stack"===this.layout,expanded:this.isHovered&&"stack"===this.layout},n={"--avatar-spacing":`${s}px`,"--avatar-border-color":this.borderColor,"--avatar-border-width":`${this.borderWidth}px`,"--avatar-size":"number"==typeof this.size?`${this.size}px`:this.size.toString()};return r(e,{key:"d1c53574be9549de6cce9cf8aae33ac8019dd556"},r("div",{key:"0f64bd06b7f8bd077e98286b9df7cd24e1924a50",class:i,style:n,onMouseEnter:this.handleMouseEnterGroup,onMouseLeave:this.handleMouseLeaveGroup},r("div",{key:"937475ddb42adc924320a2f15f61a76f3ec3c916",class:"avatar-list"},o.map(((a,e)=>r("ui-avatar",{...a,key:e,size:this.size,shape:this.shape,border:`${this.borderWidth}px solid ${this.borderColor}`,class:"group-avatar",style:{zIndex:("stack"===this.layout?t.length-e:1).toString()}}))),"stack"===this.layout&&this.renderExcessCount(t.length,a)),r("div",{key:"52779f80360501b288b88cd896f2dd117b18c0e1",style:{display:"none"}},r("slot",{key:"bd6996c4789091de98a2f01349990412278e51ee"}))),this.isRosterOpen&&r("div",{key:"fb404a5fd2e4723bb54465a8e6b94d220052721d",class:"avatar-roster-backdrop",onClick:this.closeRoster},r("div",{key:"81df0d927175829c2fe80e3c39bf81350011620e",class:"avatar-roster-content",onClick:t=>t.stopPropagation()},r("div",{key:"89cea0f5aed19f87eaab53bdab36b0ccf429dc54",class:"roster-header"},r("h3",{key:"3d113ccb91edb0b47e7bccc311af3f52f09ed5f2"},"Participants (",t.length,")"),r("ui-button",{key:"ad42880fadf89334d69ff0fca445adf7fb1b4494",variant:"ghost",onClick:this.closeRoster,ariaLabel:"Close roster",icon:"x",iconLibrary:"lucide",iconOnly:!0,size:"sm"})),r("div",{key:"d683e744b8a132d600d8681254c39b0569b1564c",class:"roster-list"},t.map(((t,a)=>r("div",{key:a,class:"roster-item"},r("ui-avatar",{...t,size:"s",shape:this.shape}),r("div",{class:"roster-info"},r("span",{class:"roster-name"},t.name||t.content||"Anonymous"),t.status&&r("span",{class:`roster-status status-${t.status}`},t.status)))))))))}static get style(){return'.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.avatar-group{display:inline-flex;position:relative;align-items:center}.avatar-group.layout-stack .group-avatar{margin-right:var(--avatar-spacing, -16px);transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1);transform-origin:center bottom}.avatar-group.layout-stack .group-avatar:hover{z-index:100 !important;transform:scale(1.25) translateY(-10px);margin-right:8px !important;box-shadow:0 10px 25px rgba(0, 0, 0, 0.2);border-color:var(--border-subtle, #fff) !important}.avatar-group.layout-stack .group-avatar:hover~.group-avatar,.avatar-group.layout-stack .group-avatar:hover~.excess-avatar-container{transform:translateX(24px)}.avatar-group.layout-stack.avatar-group-animated:hover{padding-right:40px}.avatar-group.layout-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(calc(var(--avatar-size) + 8px), 1fr));gap:8px;width:100%}.avatar-list{display:flex;flex-wrap:wrap;align-items:center}.layout-stack .avatar-list{flex-wrap:nowrap}.avatar-extra{display:inline-flex;align-items:center;justify-content:center;background-color:var(--color-danger, #f56a00);color:var(--text-standard, #ffffff);font-weight:600;border:var(--avatar-border-width, 2px) solid var(--avatar-border-color, #fff);cursor:pointer;z-index:1;transition:transform 0.2s;box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);font-size:0.8em}.avatar-extra:hover{transform:scale(1.1) translateY(-4px);z-index:100;box-shadow:0 8px 20px rgba(0, 0, 0, 0.15)}.avatar-extra.shape-circle{border-radius:50%}.avatar-extra.shape-square{border-radius:8px}.avatar-popover{position:absolute;top:100%;right:0;background:var(--bg-primary, #ffffff);border-radius:8px;box-shadow:0 8px 24px rgba(0, 0, 0, 0.2);padding:12px;z-index:1000;min-width:180px;margin-top:8px;animation:popoverFadeIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}.avatar-popover::after{content:"";position:absolute;top:-12px;right:12px;border:6px solid transparent;border-bottom-color:var(--bg-primary, #ffffff)}.avatar-popover .popover-content{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow-y:auto}.avatar-popover .popover-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:6px;transition:background 0.2s;cursor:pointer}.avatar-popover .popover-item:hover{background:var(--bg-secondary, #f3f4f6)}.avatar-popover .popover-item ui-avatar{transition:none !important;transform:none !important;box-shadow:none !important}.avatar-popover .popover-text{font-size:14px;color:var(--text-secondary, #374151);font-weight:500}@keyframes popoverFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.avatar-roster-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0, 0, 0, 0.5);display:flex;align-items:center;justify-content:center;z-index:2000;backdrop-filter:blur(4px)}.avatar-roster-content{background:var(--bg-primary, #ffffff);width:90%;max-width:500px;max-height:80vh;border-radius:16px;box-shadow:0 20px 50px rgba(0, 0, 0, 0.3);display:flex;flex-direction:column;overflow:hidden;animation:modalIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)}.roster-header{padding:20px;border-bottom:1px solid var(--border-subtle, #eee);display:flex;align-items:center;justify-content:space-between}.roster-header h3{margin:0;color:var(--text-primary, #1f2937)}.roster-header .close-btn{background:none;border:none;font-size:28px;cursor:pointer;color:var(--text-muted, #9ca3af)}.roster-header .close-btn:hover{color:var(--text-primary, #1f2937)}.roster-list{padding:12px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.roster-item{display:flex;align-items:center;gap:16px;padding:12px;border-radius:12px;transition:background 0.2s}.roster-item:hover{background:var(--bg-primary, #f9fafb)}.roster-info{display:flex;flex-direction:column}.roster-name{font-weight:600;color:var(--text-primary, #111827)}.roster-status{font-size:11px;text-transform:capitalize;border-radius:4px;padding:1px 6px;width:fit-content}.status-online{color:var(--color-success-hover, #059669);background:var(--bg-primary, #ecfdf5)}@keyframes modalIn{from{opacity:0;transform:scale(0.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}'}},[769,"ui-avatar-group",{avatars:[16],maxVisible:[2,"max-visible"],max:[2],size:[8],shape:[1],layout:[1],spacing:[2],overlap:[2],borderColor:[1,"border-color"],borderWidth:[2,"border-width"],enablePopover:[4,"enable-popover"],animated:[4],slottedAvatars:[32],showPopover:[32],isRosterOpen:[32],isHovered:[32]},[[0,"slotchange","handleSlotChange"]]]);function h(){"undefined"!=typeof customElements&&["ui-avatar-group","ui-avatar","ui-badge","ui-button","ui-icon","ui-input","ui-loader"].forEach((t=>{switch(t){case"ui-avatar-group":customElements.get(o(t))||customElements.define(o(t),c);break;case"ui-avatar":customElements.get(o(t))||s();break;case"ui-badge":customElements.get(o(t))||i();break;case"ui-button":customElements.get(o(t))||n();break;case"ui-icon":customElements.get(o(t))||p();break;case"ui-input":customElements.get(o(t))||d();break;case"ui-loader":customElements.get(o(t))||l()}}))}export{c as A,h as d}

package/dist/components/avatar.js

@@ -1 +1 @@
-import{proxyCustomElement as a,HTMLElement as t,createEvent as r,h as e,Host as i,transformTag as s}from"@stencil/core/internal/client";import{d as o,a as n}from"./badge.js";import{d as l}from"./icon.js";import{d}from"./input.js";import{d as p}from"./loader.js";const h=a(class extends t{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.avatarError=r(this,"avatarError",7),this.avatarClick=r(this,"avatarClick",7),this.avatarUpload=r(this,"avatarUpload",7),this.avatarLoad=r(this,"avatarLoad",7),this.avatarMouseEnter=r(this,"avatarMouseEnter",7),this.avatarMouseLeave=r(this,"avatarMouseLeave",7)}get el(){return this}alt="";gap=4;icon="";iconLibrary="default";shape="circle";size="m";src="";srcSet="";imgDraggable=!0;crossOrigin="";bgColor="#52c41a";color="#ffffff";border="";tooltipText="";responsiveSize=void 0;status="";statusPosition="bottom-right";showStatus=!1;badge="";badgePosition="top-right";badgeColor="#ff4d4f";editable=!1;acceptTypes="image/*";fallbackIcon="fas fa-user";loading=!1;lazy=!1;fit="cover";verified=!1;glass=!1;skeleton=!1;reflection=!1;segments=0;variant="default";clickable=!1;autoColor=!1;gradient=!1;gradientColors="";animation="none";ringColor="#3bf673";story=!1;storySeen=!1;activeSpeaker=!1;statusPulse=!1;threeD=!1;href="";content;name;maxInitials=2;group=!1;avatars=[];maxVisible=5;max=void 0;layout="stack";spacing=4;overlap=void 0;groupBorderColor="white";groupBorderWidth=2;enablePopover=!0;animated=!0;hasError=!1;scale=1;currentSize=40;showTooltip=!1;isHovered=!1;uploadedImage="";slottedAvatars=[];showPopoverGroup=!1;isRosterOpen=!1;isScaling=!1;textRef;avatarRef;avatarError;avatarClick;avatarUpload;avatarLoad;avatarMouseEnter;avatarMouseLeave;handleSrcChange(){this.hasError=!1,this.uploadedImage=""}handleLoadingChange(a){!a&&this.lazy&&this.src&&this.loadImage()}componentWillLoad(){this.group&&this.updateSlottedAvatars()}componentDidLoad(){this.group&&this.updateSlottedAvatars(),requestAnimationFrame((()=>this.setScale())),this.responsiveSize&&(this.updateResponsiveSize(),window.addEventListener("resize",this.updateResponsiveSize))}componentDidUpdate(){this.textRef&&this.avatarRef&&requestAnimationFrame((()=>this.setScale()))}updateSlottedAvatars(){const a=this.el.shadowRoot?.querySelector("slot"),t=a?a.assignedElements():Array.from(this.el.children);this.slottedAvatars=t.filter((a=>"ui-avatar"===a.tagName.toLowerCase()))}disconnectedCallback(){this.responsiveSize&&window.removeEventListener("resize",this.updateResponsiveSize)}updateResponsiveSize=()=>{if(!this.responsiveSize)return;const a=window.innerWidth;let t=this.size;a<576&&void 0!==this.responsiveSize.xs?t=this.responsiveSize.xs:a>=576&&a<768&&void 0!==this.responsiveSize.sm?t=this.responsiveSize.sm:a>=768&&a<992&&void 0!==this.responsiveSize.md?t=this.responsiveSize.md:a>=992&&a<1200&&void 0!==this.responsiveSize.lg?t=this.responsiveSize.lg:a>=1200&&void 0!==this.responsiveSize.xl&&(t=this.responsiveSize.xl),this.currentSize=t};setScale=()=>{if(this.isScaling||!this.textRef||!this.avatarRef)return;const a=this.textRef.offsetWidth,t=this.avatarRef.offsetWidth;if(0===a||0===t)return;const r=t-2*this.gap<a?(t-2*this.gap)/a:1;Math.abs(this.scale-r)>.01&&(this.isScaling=!0,this.scale=r,setTimeout((()=>{this.isScaling=!1}),100))};handleImgError=a=>{this.el.isConnected&&(this.hasError=!0,this.avatarError.emit(a))};handleImgLoad=a=>{this.el.isConnected&&this.avatarLoad.emit(a)};handleAvatarClick=a=>{if(this.clickable||this.editable){if(!this.el.isConnected)return;if(this.avatarClick.emit(a),this.editable){const a=this.el.shadowRoot?.querySelector('input[type="file"]');a&&a.click()}}};handleFileChange=a=>{const t=a.target,r=t.files?.[0];if(r){const a=new FileReader;a.onload=a=>{if(!this.el.isConnected)return;const t=a.target?.result;this.uploadedImage=t,this.hasError=!1,this.avatarUpload.emit({file:r,dataUrl:t})},a.readAsDataURL(r)}};handleMouseEnterAvatar=a=>{this.el.isConnected&&(this.isHovered=!0,this.avatarMouseEnter.emit(a),(this.tooltipText||this.alt)&&(this.showTooltip=!0))};handleMouseLeaveAvatar=a=>{this.el.isConnected&&(this.isHovered=!1,this.avatarMouseLeave.emit(a),this.showTooltip=!1)};getInitials(a){if(!a)return"";const t=a.trim().split(" ").filter((a=>!!a));return 0===t.length?"":1===t.length?t[0].substring(0,this.maxInitials).toUpperCase():(t[0].charAt(0)+t[t.length-1].charAt(0)).toUpperCase().substring(0,this.maxInitials)}generateColorFromText(a){let t=0;for(let r=0;r<a.length;r++)t=a.charCodeAt(r)+((t<<5)-t);const r=["#f56a00","#7265e6","#ffbf00","#00a2ae","#52c41a","#1890ff","#eb2f96","#fa8c16","#13c2c2","#722ed1","#fa541c","#2f54eb"];return r[Math.abs(t)%r.length]}getGradientColors(){if(this.gradientColors)try{const a=JSON.parse(this.gradientColors);if(Array.isArray(a)&&a.length>=2)return a}catch{const a=this.gradientColors.split(",").map((a=>a.trim()));if(a.length>=2)return a}return["#667eea","#764ba2"]}loadImage(){if(!this.src||!this.lazy)return;const a=new Image;a.src=this.src,a.onload=a=>this.handleImgLoad(a),a.onerror=a=>this.handleImgError(a)}getSizeInPixels(){const a=parseFloat(this.currentSize);if(!isNaN(a))return a;switch(this.currentSize){case"xs":return 24;case"s":case"sm":return 32;case"default":return 20;case"m":case"md":default:return 40;case"l":case"lg":return 48;case"xl":return 64}}renderImage(){const a=this.uploadedImage||this.src;if(this.hasError||!a)return null;const t="boolean"==typeof this.imgDraggable?this.imgDraggable:"true"===this.imgDraggable,r=this.getSizeInPixels();return e("img",{src:a,srcset:this.srcSet||void 0,alt:this.alt||this.name||"Avatar",width:r,height:r,draggable:t,crossorigin:this.crossOrigin||void 0,loading:this.lazy?"lazy":void 0,onError:this.handleImgError,onLoad:this.handleImgLoad,style:{objectFit:this.fit}})}renderIcon(){const a=this.icon||this.fallbackIcon;return a?e("ui-icon",{name:a,library:!this.icon&&this.fallbackIcon?"fontawesome":this.iconLibrary,size:"1.2em",class:"avatar-icon"}):null}renderText(){const a=this.content||this.getInitials(this.name||this.el.textContent?.trim()||"");return a?e("span",{ref:a=>this.textRef=a,class:"avatar-string",style:1!==this.scale?{transform:`scale(${this.scale}) translateX(-50%)`}:{transform:"translateX(-50%)"}},a):null}getAvatarSizeAlias(){let a=this.size;this.responsiveSize&&this.currentSize!==this.size&&(a=this.currentSize);const t=parseFloat(a);if(!isNaN(t))return`${t}px`;switch(a){case"lg":return"l";case"md":return"m";case"sm":return"s";default:return a}}getTooltipText(){return this.tooltipText?this.tooltipText:this.alt?this.alt:this.name||this.el.textContent?.trim()||""}renderStatusIndicator(){return this.showStatus&&this.status?e("span",{class:{"avatar-status":!0,[`avatar-status-${this.status}`]:!0,[`avatar-status-${this.statusPosition}`]:!0,"avatar-status-pulse":this.statusPulse}}):null}renderBadge(){if(!this.badge)return null;const a=1===this.badge.toString().length;return e("span",{class:{"avatar-badge":!0,[`avatar-badge-${this.badgePosition}`]:!0,"avatar-badge-circle":a,"avatar-badge-pill":!a},style:{backgroundColor:this.badgeColor}},this.badge)}renderVerified(){return this.verified?e("span",{class:"avatar-verified"},e("ui-icon",{name:"check-circle",library:"fontawesome",size:"14px"})):null}renderLoading(){return this.loading||this.skeleton?this.skeleton?e("div",{class:"avatar-skeleton"},e("div",{class:"skeleton-shimmer"})):e("div",{class:"avatar-loading"},e("ui-icon",{name:"loader-2",library:"lucide",spin:!0,size:"18px"})):null}renderEditOverlay(){return this.editable?e("div",{class:"avatar-edit-overlay"},e("ui-icon",{name:"camera",library:"fontawesome",size:"16px"}),e("ui-input",{type:"file",accept:this.acceptTypes,onInputChange:this.handleFileChange,style:{display:"none"}})):null}getMaxCount(){const a=this.max||this.maxVisible;return"number"==typeof a?a:a&&"object"==typeof a&&"count"in a&&a.count||1/0}getMaxStyle(){return this.max&&"object"==typeof this.max&&"style"in this.max?this.max.style:{}}calculateOverlap(){if("grid"===this.layout)return this.spacing;if(null!==this.overlap)return-Math.abs(this.overlap);const a={xs:24,s:32,sm:32,default:20,m:40,md:40,l:40,lg:48,xl:64};let t=40;const r=parseFloat(this.size);return isNaN(r)?"string"==typeof this.size&&a[this.size]&&(t=a[this.size]):t=r,-.4*t}getAllAvatarData(){return this.avatars&&this.avatars.length>0?this.avatars:this.slottedAvatars.map((a=>({src:a.getAttribute("src"),name:a.getAttribute("name"),content:a.getAttribute("content")||a.textContent?.trim(),tooltipText:a.getAttribute("tooltipText")||a.getAttribute("tooltip-text")||a.getAttribute("name")||a.textContent?.trim(),icon:a.getAttribute("icon"),bgColor:a.getAttribute("bgColor")||a.getAttribute("bg-color"),badge:a.getAttribute("badge"),status:a.getAttribute("status")})))}renderExcessCount(a,t){const r=a-t;if(r<=0)return null;const i=this.getMaxStyle();return e("div",{class:"excess-avatar-container",onMouseEnter:()=>this.showPopoverGroup=this.enablePopover,onMouseLeave:()=>this.showPopoverGroup=!1,onClick:this.toggleRoster},e("div",{class:{"avatar-extra":!0,[`avatar-${this.getAvatarSizeAlias()}`]:!0,[`shape-${this.shape}`]:!0},style:{...i,backgroundColor:i.backgroundColor||"#f56a00"}},"+",r),this.showPopoverGroup&&this.enablePopover&&"stack"===this.layout&&this.renderPopoverGroup(t))}renderPopoverGroup(a){const t=this.getAllAvatarData().slice(a);return e("div",{class:"avatar-popover"},e("div",{class:"popover-content"},t.map(((a,t)=>e("div",{class:"popover-item",key:t},e("ui-avatar",{size:"xs",shape:this.shape,...a}),e("span",{class:"popover-text"},a.name||a.content||"User"))))))}toggleRoster=a=>{a.stopPropagation(),this.isRosterOpen=!this.isRosterOpen};closeRoster=()=>{this.isRosterOpen=!1};renderRoster(a){return this.isRosterOpen?e("div",{class:"avatar-roster-backdrop",onClick:this.closeRoster},e("div",{class:"avatar-roster-content",onClick:a=>a.stopPropagation()},e("div",{class:"roster-header"},e("h3",null,"Participants (",a.length,")"),e("ui-button",{variant:"ghost",onClick:this.closeRoster,ariaLabel:"Close",icon:"x",iconLibrary:"lucide",iconOnly:!0,size:"sm"})),e("div",{class:"roster-list"},a.map(((a,t)=>e("div",{key:t,class:"roster-item"},e("ui-avatar",{...a,size:"s",shape:this.shape}),e("div",{class:"roster-info"},e("span",{class:"roster-name"},a.name||a.content||"Anonymous"),a.status&&e("span",{class:`roster-status status-${a.status}`},a.status)))))))):null}render(){if(this.group){const a=this.getAllAvatarData(),t=this.getMaxCount(),r="grid"===this.layout?a:a.slice(0,t),s=this.calculateOverlap(),o={"avatar-group":!0,[`layout-${this.layout}`]:!0,"avatar-group-animated":this.animated&&"stack"===this.layout,expanded:this.isHovered&&"stack"===this.layout},n={"--avatar-spacing":`${s}px`,"--avatar-border-color":this.groupBorderColor,"--avatar-border-width":`${this.groupBorderWidth}px`,"--avatar-size":"number"==typeof this.size?`${this.size}px`:this.size.toString()};return e(i,null,e("div",{class:o,style:n,onMouseEnter:()=>this.isHovered=!0,onMouseLeave:()=>this.isHovered=!1},e("div",{class:"avatar-list"},r.map(((t,r)=>e("ui-avatar",{...t,key:r,size:this.size,shape:this.shape,border:`${this.groupBorderWidth}px solid ${this.groupBorderColor}`,class:"group-avatar",style:{zIndex:("stack"===this.layout?a.length-r:1).toString()}}))),"stack"===this.layout&&this.renderExcessCount(a.length,t)),e("div",{style:{display:"none"}},e("slot",{onSlotchange:()=>this.updateSlottedAvatars()}))),this.renderRoster(a))}const a=!(!this.uploadedImage&&!this.src||this.hasError),t=this.content||this.name||this.el.textContent?.trim(),r=!a&&!!t,s=!(a||r||!this.icon&&!this.fallbackIcon),o=this.getAvatarSizeAlias(),n=!isNaN(parseFloat(this.size)),l={avatar:!0,[`avatar-${this.shape}`]:!0,[`avatar-${o}`]:!n,"avatar-image":a,"avatar-icon":s,"avatar-text":r,"avatar-clickable":this.clickable||this.editable||!!this.href,"avatar-loading":this.loading,"avatar-hovered":this.isHovered,[`avatar-animation-${this.animation}`]:"none"!==this.animation,"avatar-gradient":this.gradient,"avatar-glass":this.glass||"glass"===this.variant,"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},d={};if(n||this.responsiveSize){const a=`${this.getSizeInPixels()}px`;if(d.width=a,d.height=a,d.lineHeight=a,n){const a=parseFloat(this.size);d.fontSize=s?.6*a+"px":.45*a+"px"}}if(!a)if(this.gradient){const[a,t]=this.getGradientColors();d.background=`linear-gradient(135deg, ${a} 0%, ${t} 100%)`}else this.autoColor&&t?d.backgroundColor=this.generateColorFromText(t):this.bgColor&&(d.backgroundColor=this.bgColor);this.color&&!a&&(d.color=this.color),this.border&&(d.border=this.border),"ring"!==this.animation&&"glow"!==this.animation||(d["--ring-color"]=this.ringColor),this.segments>0&&(d["--story-segments"]=this.segments);const p=this.getTooltipText(),h=p.length>0,c={[`avatar-${this.shape}`]:!0};return"string"==typeof this.size&&(c[`avatar-${o}`]=!0),e(i,{class:c},e(this.href?"a":"div",{...this.href?{href:this.href,class:"avatar-link"}:{class:"avatar-container"}},e("div",{ref:a=>this.avatarRef=a,class:l,style:d,onMouseEnter:this.handleMouseEnterAvatar,onMouseLeave:this.handleMouseLeaveAvatar,onClick:this.handleAvatarClick,title:this.clickable||this.editable||this.href?void 0:p,role:this.clickable||this.editable||this.href?"button":void 0,tabindex:this.clickable||this.editable||this.href?0:void 0},this.loading&&this.renderLoading(),this.skeleton&&this.renderLoading(),!this.loading&&!this.skeleton&&(a?this.renderImage():s?this.renderIcon():r?this.renderText():null),(this.glass||"glass"===this.variant)&&e("div",{class:"glass-overlay"}),this.reflection&&e("div",{class:"reflection-overlay"}),this.renderEditOverlay()),this.renderStatusIndicator(),this.renderBadge(),this.renderVerified(),h&&this.showTooltip&&e("div",{class:"avatar-tooltip"},p)))}static get watchers(){return{src:[{handleSrcChange:0}],loading:[{handleLoadingChange:0}]}}static get style(){return'.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:inline-flex;vertical-align:middle}:host *{box-sizing:border-box}:host{transition:all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}.avatar-container,.avatar-link{position:relative;display:inline-block;text-decoration:none}.avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background-color:var(--bg-secondary, #ccc);color:var(--text-standard, #ffffff);font-weight:600;overflow:visible;white-space:nowrap;text-align:center;vertical-align:middle;user-select:none;box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);transition:all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}.avatar.avatar-hovered{transform:translateY(-4px) scale(1.05);box-shadow:0 10px 20px rgba(0, 0, 0, 0.15)}.avatar.avatar-hovered.avatar-3d{transform:perspective(500px) rotateX(10deg) rotateY(10deg) translateY(-4px)}.avatar-circle{border-radius:50%}.avatar-square{border-radius:8px}.avatar-hexagon{clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);border-radius:0}.avatar-squircle{border-radius:35%}.avatar-circle img,.avatar-circle .avatar-string,.avatar-circle .avatar-icon,.avatar-hexagon img,.avatar-hexagon .avatar-string,.avatar-hexagon .avatar-icon,.avatar-squircle img,.avatar-squircle .avatar-string,.avatar-squircle .avatar-icon{border-radius:inherit;overflow:hidden}.avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;transition:opacity 0.3s ease}.avatar-xs{width:24px;height:24px;line-height:24px;font-size:10px}.avatar-sm,.avatar-s{width:32px;height:32px;line-height:32px;font-size:12px}.avatar-default,.avatar-m{width:40px;height:40px;line-height:40px;font-size:16px}.avatar-lg,.avatar-l{width:48px;height:48px;line-height:48px;font-size:20px}.avatar-xl{width:64px;height:64px;line-height:64px;font-size:28px}.avatar-string{position:absolute;left:50%;transform:translateX(-50%);display:inline-block;white-space:nowrap}.avatar-icon{font-size:1.2em;display:flex;align-items:center;justify-content:center}.avatar-status{position:absolute;width:10px;height:10px;border-radius:50%;border:2px solid var(--border-subtle, #fff);z-index:5;box-shadow:0 1px 3px rgba(0, 0, 0, 0.1)}.avatar-status.avatar-status-top-right{top:0;right:0}.avatar-status.avatar-status-top-left{top:0;left:0}.avatar-status.avatar-status-bottom-right{bottom:0;right:0}.avatar-status.avatar-status-bottom-left{bottom:0;left:0}.avatar-status.avatar-status-online{background-color:var(--color-success, #22c55e)}.avatar-status.avatar-status-offline{background-color:transparent;border-color:var(--color-primary, #94a3b8)}.avatar-status.avatar-status-offline::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--bg-primary, #ffffff);z-index:-1}.avatar-status.avatar-status-away{background-color:var(--color-warning, #f59e0b);clip-path:polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 50%);border:none}.avatar-status.avatar-status-busy,.avatar-status.avatar-status-dnd{background-color:var(--color-danger, #ef4444)}.avatar-status.avatar-status-busy::before,.avatar-status.avatar-status-dnd::before{content:"";position:absolute;top:50%;left:50%;width:6px;height:1.5px;background:var(--bg-primary, #ffffff);transform:translate(-50%, -50%)}.avatar-badge{position:absolute;min-width:18px;height:18px;line-height:18px;text-align:center;font-size:10px;font-weight:bold;color:var(--text-standard, #ffffff);border:2px solid var(--border-subtle, #fff);z-index:6;box-shadow:0 2px 4px rgba(0, 0, 0, 0.2)}.avatar-badge.avatar-badge-circle{border-radius:50%}.avatar-badge.avatar-badge-pill{padding:0 5px;border-radius:10px}.avatar-badge.avatar-badge-top-right{top:-4px;right:-4px}.avatar-badge.avatar-badge-top-left{top:-4px;left:-4px}.avatar-badge.avatar-badge-bottom-right{bottom:-4px;right:-4px}.avatar-badge.avatar-badge-bottom-left{bottom:-4px;left:-4px}.avatar-tooltip{position:absolute;bottom:110%;left:50%;transform:translateX(-50%);background:rgba(0, 0, 0, 0.85);color:var(--text-standard, #ffffff);padding:4px 8px;border-radius:4px;font-size:11px;white-space:nowrap;z-index:100;pointer-events:none;box-shadow:0 4px 10px rgba(0, 0, 0, 0.2)}.avatar-tooltip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:rgba(0, 0, 0, 0.85)}.avatar-skeleton{background:var(--bg-primary, #eee);position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit}.avatar-skeleton .skeleton-shimmer{width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);animation:shimmer 1.5s infinite}.avatar-loading{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255, 255, 255, 0.8);display:flex;align-items:center;justify-content:center;z-index:4;border-radius:inherit}.avatar-edit-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, 0.5);opacity:0;transition:0.2s;display:flex;align-items:center;justify-content:center;z-index:3;border-radius:inherit;color:var(--text-standard, #ffffff)}.avatar:hover .avatar-edit-overlay{opacity:1}.avatar-glass{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:rgba(255, 255, 255, 0.1) !important;border:1px solid rgba(255, 255, 255, 0.2) !important}.avatar-reflection .reflection-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%);pointer-events:none}.avatar-verified{position:absolute;bottom:0;right:0;width:16px;height:16px;background:var(--color-primary, #1890ff);color:var(--text-standard, #ffffff);border-radius:50%;border:2px solid var(--border-subtle, #fff);display:flex;align-items:center;justify-content:center;font-size:10px;z-index:7}.avatar-story{padding:3px}.avatar-story::after{content:"";position:absolute;top:-3px;left:-3px;right:-3px;bottom:-3px;border-radius:inherit;border:2px solid transparent;background:linear-gradient(45deg, var(--color-danger, #f09433), var(--color-danger, #e6683c), var(--color-danger, #dc2743), var(--color-danger, #cc2366), var(--color-danger, #bc1888)) border-box;-webkit-mask:linear-gradient(var(--bg-primary, #fff) 0 0) padding-box, linear-gradient(var(--bg-primary, #fff) 0 0);mask:linear-gradient(var(--bg-primary, #fff) 0 0) padding-box, linear-gradient(var(--bg-primary, #fff) 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude;z-index:1}.avatar-story.avatar-story-seen::after{background:var(--bg-secondary, #ccc) border-box}.avatar-story[style*="--story-segments"]::after{background:conic-gradient(from 0deg, var(--color-danger, #f09433) 0deg, var(--color-danger, #f09433) calc(360deg / var(--story-segments) - 2deg), transparent calc(360deg / var(--story-segments) - 2deg), transparent calc(360deg / var(--story-segments)));background-repeat:repeat;-webkit-mask:linear-gradient(var(--bg-primary, #fff) 0 0) padding-box, linear-gradient(var(--bg-primary, #fff) 0 0);mask:linear-gradient(var(--bg-primary, #fff) 0 0) padding-box, linear-gradient(var(--bg-primary, #fff) 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude}@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}@keyframes avatarRing{0%{transform:scale(1);opacity:1}100%{transform:scale(1.3);opacity:0}}.avatar-animation-pulse{animation:pulse 2s infinite}.avatar-animation-ring::after{content:"";position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;border:2px solid var(--ring-color, var(--color-primary, #10b981));border-radius:inherit;animation:avatarRing 1.5s infinite}.avatar-animation-glow{box-shadow:0 0 15px var(--ring-color, var(--color-primary, #10b981));animation:avatarGlow 2s ease-in-out infinite alternate}@keyframes avatarGlow{from{box-shadow:0 0 8px var(--ring-color, var(--color-primary, #10b981))}to{box-shadow:0 0 20px var(--ring-color, var(--color-primary, #10b981))}}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}.avatar-clickable:hover{transform:translateY(-2px);box-shadow:0 6px 15px rgba(0, 0, 0, 0.15)}.avatar-group{display:inline-flex;position:relative;align-items:center}.avatar-group.layout-stack .group-avatar{margin-right:var(--avatar-spacing, -16px);transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1);transform-origin:center bottom}.avatar-group.layout-stack .group-avatar:hover{z-index:100 !important;transform:scale(1.25) translateY(-10px);margin-right:8px !important;box-shadow:0 10px 25px rgba(0, 0, 0, 0.2);border-color:var(--border-subtle, #fff) !important}.avatar-group.layout-stack .group-avatar:hover~.group-avatar,.avatar-group.layout-stack .group-avatar:hover~.excess-avatar-container{transform:translateX(24px)}.avatar-group.layout-stack.avatar-group-animated:hover{padding-right:40px}.avatar-group.layout-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(calc(var(--avatar-size) + 8px), 1fr));gap:8px;width:100%}.avatar-list{display:flex;flex-wrap:wrap;align-items:center}.layout-stack .avatar-list{flex-wrap:nowrap}.avatar-extra{display:inline-flex;align-items:center;justify-content:center;background-color:var(--color-danger, #f56a00);color:var(--text-standard, #ffffff);font-weight:600;border:var(--avatar-border-width, 2px) solid var(--avatar-border-color, #fff);cursor:pointer;z-index:1;transition:all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);font-size:0.8em}.avatar-extra:hover{transform:scale(1.1) translateY(-4px);z-index:100;box-shadow:0 8px 20px rgba(0, 0, 0, 0.15)}.avatar-extra.shape-circle{border-radius:50%}.avatar-extra.shape-square{border-radius:8px}.avatar-extra.shape-hexagon{clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);border-radius:0}.avatar-extra.shape-squircle{border-radius:35%}.excess-avatar-container{position:relative;display:inline-block}.avatar-popover{position:absolute;top:100%;right:0;background:var(--bg-primary, #ffffff);border-radius:8px;box-shadow:0 8px 24px rgba(0, 0, 0, 0.2);padding:12px;z-index:1000;min-width:180px;margin-top:8px;animation:popoverFadeIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}.avatar-popover::after{content:"";position:absolute;top:-12px;right:12px;border:6px solid transparent;border-bottom-color:var(--bg-primary, #ffffff)}.avatar-popover .popover-content{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow-y:auto}.avatar-popover .popover-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:6px;transition:background 0.2s;cursor:pointer}.avatar-popover .popover-item:hover{background:var(--bg-secondary, #f3f4f6)}.avatar-popover .popover-item ui-avatar{transition:none !important;transform:none !important;box-shadow:none !important}.avatar-popover .popover-text{font-size:14px;color:var(--text-secondary, #374151);font-weight:500}.avatar-roster-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0, 0, 0, 0.5);display:flex;align-items:center;justify-content:center;z-index:2000;backdrop-filter:blur(4px)}.avatar-roster-content{background:var(--bg-primary, #ffffff);width:90%;max-width:500px;max-height:80vh;border-radius:16px;box-shadow:0 20px 50px rgba(0, 0, 0, 0.3);display:flex;flex-direction:column;overflow:hidden;animation:modalIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)}.roster-header{padding:20px;border-bottom:1px solid var(--border-subtle, #eee);display:flex;align-items:center;justify-content:space-between}.roster-header h3{margin:0;color:var(--text-primary, #1f2937)}.roster-header .close-btn{background:none;border:none;font-size:28px;cursor:pointer;color:var(--color-primary, #9ca3af)}.roster-header .close-btn:hover{color:var(--bg-primary, #1f2937)}.roster-list{padding:12px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.roster-item{display:flex;align-items:center;gap:16px;padding:12px;border-radius:12px;transition:background 0.2s}.roster-item:hover{background:var(--bg-primary, #f9fafb)}.roster-info{display:flex;flex-direction:column}.roster-name{font-weight:600;color:var(--text-primary, #111827)}.roster-status{font-size:11px;text-transform:capitalize;border-radius:4px;padding:1px 6px;width:fit-content}.status-online{color:var(--color-success-hover, #059669);background:var(--bg-primary, #ecfdf5)}@keyframes popoverFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes modalIn{from{opacity:0;transform:scale(0.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}'}},[769,"ui-avatar",{alt:[1],gap:[2],icon:[1],iconLibrary:[1,"icon-library"],shape:[1],size:[8],src:[1],srcSet:[1,"src-set"],imgDraggable:[4,"img-draggable"],crossOrigin:[1,"cross-origin"],bgColor:[1,"bg-color"],color:[1],border:[1],tooltipText:[1,"tooltip-text"],responsiveSize:[16],status:[1],statusPosition:[1,"status-position"],showStatus:[4,"show-status"],badge:[8],badgePosition:[1,"badge-position"],badgeColor:[1,"badge-color"],editable:[4],acceptTypes:[1,"accept-types"],fallbackIcon:[1,"fallback-icon"],loading:[4],lazy:[4],fit:[1],verified:[4],glass:[4],skeleton:[4],reflection:[4],segments:[2],variant:[1],clickable:[4],autoColor:[4,"auto-color"],gradient:[4],gradientColors:[1,"gradient-colors"],animation:[1],ringColor:[1,"ring-color"],story:[4],storySeen:[4,"story-seen"],activeSpeaker:[4,"active-speaker"],statusPulse:[4,"status-pulse"],threeD:[4,"three-d"],href:[1],content:[1],name:[1],maxInitials:[2,"max-initials"],group:[4],avatars:[16],maxVisible:[2,"max-visible"],max:[2],layout:[1],spacing:[2],overlap:[2],groupBorderColor:[1,"group-border-color"],groupBorderWidth:[2,"group-border-width"],enablePopover:[4,"enable-popover"],animated:[4],hasError:[32],scale:[32],currentSize:[32],showTooltip:[32],isHovered:[32],uploadedImage:[32],slottedAvatars:[32],showPopoverGroup:[32],isRosterOpen:[32]},void 0,{src:[{handleSrcChange:0}],loading:[{handleLoadingChange:0}]}]);function c(){"undefined"!=typeof customElements&&["ui-avatar","ui-avatar","ui-badge","ui-button","ui-icon","ui-input","ui-loader"].forEach((a=>{switch(a){case"ui-avatar":customElements.get(s(a))||customElements.define(s(a),h);break;case"ui-avatar":customElements.get(s(a))||c();break;case"ui-badge":customElements.get(s(a))||n();break;case"ui-button":customElements.get(s(a))||o();break;case"ui-icon":customElements.get(s(a))||l();break;case"ui-input":customElements.get(s(a))||d();break;case"ui-loader":customElements.get(s(a))||p()}}))}export{h as A,c as d}
+import{proxyCustomElement as a,HTMLElement as t,createEvent as r,h as e,Host as i,transformTag as s}from"@stencil/core/internal/client";import{d as o}from"./badge.js";import{d as n}from"./button.js";import{d as l}from"./icon.js";import{d}from"./input.js";import{d as h}from"./loader.js";const p=a(class extends t{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.avatarError=r(this,"avatarError",7),this.avatarClick=r(this,"avatarClick",7),this.avatarUpload=r(this,"avatarUpload",7),this.avatarLoad=r(this,"avatarLoad",7),this.avatarMouseEnter=r(this,"avatarMouseEnter",7),this.avatarMouseLeave=r(this,"avatarMouseLeave",7)}get el(){return this}alt="";gap=4;icon="";iconLibrary="default";shape="circle";size="m";src="";srcSet="";imgDraggable=!0;crossOrigin="";bgColor="#52c41a";color="#ffffff";border="";tooltipText="";responsiveSize=void 0;status="";statusPosition="bottom-right";showStatus=!1;indicatorSize;badge="";badgePosition="top-right";badgeColor="#ff4d4f";editable=!1;acceptTypes="image/*";fallbackIcon="fas fa-user";loading=!1;lazy=!1;fit="cover";verified=!1;glass=!1;skeleton=!1;reflection=!1;segments=0;variant="default";clickable=!1;autoColor=!1;gradient=!1;gradientColors="";animation="none";ringColor="#3bf673";story=!1;storySeen=!1;activeSpeaker=!1;statusPulse=!1;threeD=!1;href="";content;name;maxInitials=2;group=!1;avatars=[];maxVisible=5;max=void 0;layout="stack";spacing=4;overlap=void 0;groupBorderColor="white";groupBorderWidth=2;enablePopover=!0;animated=!0;hasError=!1;scale=1;currentSize=40;showTooltip=!1;isHovered=!1;uploadedImage="";slottedAvatars=[];showPopoverGroup=!1;isRosterOpen=!1;isScaling=!1;textRef;avatarRef;avatarError;avatarClick;avatarUpload;avatarLoad;avatarMouseEnter;avatarMouseLeave;handleSrcChange(){this.hasError=!1,this.uploadedImage=""}handleLoadingChange(a){!a&&this.lazy&&this.src&&this.loadImage()}componentWillLoad(){this.group&&this.updateSlottedAvatars()}componentDidLoad(){this.group&&this.updateSlottedAvatars(),requestAnimationFrame((()=>this.setScale())),this.responsiveSize&&(this.updateResponsiveSize(),window.addEventListener("resize",this.updateResponsiveSize))}componentDidUpdate(){this.textRef&&this.avatarRef&&requestAnimationFrame((()=>this.setScale()))}updateSlottedAvatars(){const a=this.el.shadowRoot?.querySelector("slot"),t=a?a.assignedElements():Array.from(this.el.children);this.slottedAvatars=t.filter((a=>"ui-avatar"===a.tagName.toLowerCase()))}disconnectedCallback(){this.responsiveSize&&window.removeEventListener("resize",this.updateResponsiveSize)}updateResponsiveSize=()=>{if(!this.responsiveSize)return;const a=window.innerWidth;let t=this.size;a<576&&void 0!==this.responsiveSize.xs?t=this.responsiveSize.xs:a>=576&&a<768&&void 0!==this.responsiveSize.sm?t=this.responsiveSize.sm:a>=768&&a<992&&void 0!==this.responsiveSize.md?t=this.responsiveSize.md:a>=992&&a<1200&&void 0!==this.responsiveSize.lg?t=this.responsiveSize.lg:a>=1200&&void 0!==this.responsiveSize.xl&&(t=this.responsiveSize.xl),this.currentSize=t};setScale=()=>{if(this.isScaling||!this.textRef||!this.avatarRef)return;const a=this.textRef.offsetWidth,t=this.avatarRef.offsetWidth;if(0===a||0===t)return;const r=t-2*this.gap<a?(t-2*this.gap)/a:1;Math.abs(this.scale-r)>.01&&(this.isScaling=!0,this.scale=r,setTimeout((()=>{this.isScaling=!1}),100))};handleImgError=a=>{this.el.isConnected&&(this.hasError=!0,this.avatarError.emit(a))};handleImgLoad=a=>{this.el.isConnected&&this.avatarLoad.emit(a)};handleAvatarClick=a=>{if(this.clickable||this.editable){if(!this.el.isConnected)return;if(this.avatarClick.emit(a),this.editable){const a=this.el.shadowRoot?.querySelector('input[type="file"]');a&&a.click()}}};handleFileChange=a=>{const t=a.target,r=t.files?.[0];if(r){const a=new FileReader;a.onload=a=>{if(!this.el.isConnected)return;const t=a.target?.result;this.uploadedImage=t,this.hasError=!1,this.avatarUpload.emit({file:r,dataUrl:t})},a.readAsDataURL(r)}};handleMouseEnterAvatar=a=>{this.el.isConnected&&(this.isHovered=!0,this.avatarMouseEnter.emit(a),(this.tooltipText||this.alt)&&(this.showTooltip=!0))};handleMouseLeaveAvatar=a=>{this.el.isConnected&&(this.isHovered=!1,this.avatarMouseLeave.emit(a),this.showTooltip=!1)};getInitials(a){if(!a)return"";const t=a.trim().split(" ").filter((a=>!!a));return 0===t.length?"":1===t.length?t[0].substring(0,this.maxInitials).toUpperCase():(t[0].charAt(0)+t[t.length-1].charAt(0)).toUpperCase().substring(0,this.maxInitials)}generateColorFromText(a){let t=0;for(let r=0;r<a.length;r++)t=a.charCodeAt(r)+((t<<5)-t);const r=["#f56a00","#7265e6","#ffbf00","#00a2ae","#52c41a","#1890ff","#eb2f96","#fa8c16","#13c2c2","#722ed1","#fa541c","#2f54eb"];return r[Math.abs(t)%r.length]}getGradientColors(){if(this.gradientColors)try{const a=JSON.parse(this.gradientColors);if(Array.isArray(a)&&a.length>=2)return a}catch{const a=this.gradientColors.split(",").map((a=>a.trim()));if(a.length>=2)return a}return["#667eea","#764ba2"]}loadImage(){if(!this.src||!this.lazy)return;const a=new Image;a.src=this.src,a.onload=a=>this.handleImgLoad(a),a.onerror=a=>this.handleImgError(a)}getSizeInPixels(){const a=parseFloat(this.currentSize);if(!isNaN(a))return a;switch(this.currentSize){case"xs":return 24;case"s":case"sm":return 32;case"default":return 20;case"m":case"md":default:return 40;case"l":case"lg":return 48;case"xl":return 64}}renderImage(){const a=this.uploadedImage||this.src;if(this.hasError||!a)return null;const t="boolean"==typeof this.imgDraggable?this.imgDraggable:"true"===this.imgDraggable,r=this.getSizeInPixels();return e("img",{src:a,srcset:this.srcSet||void 0,alt:this.alt||this.name||"Avatar",width:r,height:r,draggable:t,crossorigin:this.crossOrigin||void 0,loading:this.lazy?"lazy":void 0,onError:this.handleImgError,onLoad:this.handleImgLoad,style:{objectFit:this.fit}})}renderIcon(){const a=this.icon||this.fallbackIcon;return a?e("ui-icon",{name:a,library:!this.icon&&this.fallbackIcon?"fontawesome":this.iconLibrary,size:"1.2em",class:"avatar-icon"}):null}renderText(){const a=this.content||this.getInitials(this.name||this.el.textContent?.trim()||"");return a?e("span",{ref:a=>this.textRef=a,class:"avatar-string",style:1!==this.scale?{transform:`scale(${this.scale}) translateX(-50%)`}:{transform:"translateX(-50%)"}},a):null}getAvatarSizeAlias(){let a=this.size;this.responsiveSize&&this.currentSize!==this.size&&(a=this.currentSize);const t=parseFloat(a);if(!isNaN(t))return`${t}px`;switch(a){case"lg":return"l";case"md":return"m";case"sm":return"s";default:return a}}getTooltipText(){return this.tooltipText?this.tooltipText:this.alt?this.alt:this.name||this.el.textContent?.trim()||""}getIndicatorSizeStyles(){if(null==this.indicatorSize||""===this.indicatorSize)return;const a="string"==typeof this.indicatorSize?this.indicatorSize.trim():this.indicatorSize;let t;return t="number"==typeof a||/^\d+(?:\.\d+)?$/.test(a)?`${a}px`:a,{"--avatar-status-size":t,"--avatar-status-border-width":`max(1px, calc(${t} * 0.2))`,"--avatar-status-offline-inset":`max(1px, calc(${t} * 0.2))`,"--avatar-status-busy-width":`calc(${t} * 0.6)`,"--avatar-status-busy-height":`max(1px, calc(${t} * 0.15))`}}renderStatusIndicator(){return this.showStatus&&this.status?e("span",{class:{"avatar-status":!0,[`avatar-status-${this.status}`]:!0,[`avatar-status-${this.statusPosition}`]:!0,"avatar-status-pulse":this.statusPulse},style:this.getIndicatorSizeStyles()}):null}renderBadge(){if(!this.badge)return null;const a=1===this.badge.toString().length;return e("span",{class:{"avatar-badge":!0,[`avatar-badge-${this.badgePosition}`]:!0,"avatar-badge-circle":a,"avatar-badge-pill":!a},style:{backgroundColor:this.badgeColor}},this.badge)}renderVerified(){return this.verified?e("span",{class:"avatar-verified"},e("ui-icon",{name:"check-circle",library:"fontawesome",size:"14px"})):null}renderLoading(){return this.loading||this.skeleton?this.skeleton?e("div",{class:"avatar-skeleton"},e("div",{class:"skeleton-shimmer"})):e("div",{class:"avatar-loading"},e("ui-icon",{name:"loader-2",library:"lucide",spin:!0,size:"18px"})):null}renderEditOverlay(){return this.editable?e("div",{class:"avatar-edit-overlay"},e("ui-icon",{name:"camera",library:"fontawesome",size:"16px"}),e("ui-input",{type:"file",accept:this.acceptTypes,onInputChange:this.handleFileChange,style:{display:"none"}})):null}getMaxCount(){const a=this.max||this.maxVisible;return"number"==typeof a?a:a&&"object"==typeof a&&"count"in a&&a.count||1/0}getMaxStyle(){return this.max&&"object"==typeof this.max&&"style"in this.max?this.max.style:{}}calculateOverlap(){if("grid"===this.layout)return this.spacing;if(null!==this.overlap)return-Math.abs(this.overlap);const a={xs:24,s:32,sm:32,default:20,m:40,md:40,l:40,lg:48,xl:64};let t=40;const r=parseFloat(this.size);return isNaN(r)?"string"==typeof this.size&&a[this.size]&&(t=a[this.size]):t=r,-.4*t}getAllAvatarData(){return this.avatars&&this.avatars.length>0?this.avatars:this.slottedAvatars.map((a=>{const t={content:a.textContent?.trim()||void 0,tooltipText:a.getAttribute("name")||a.textContent?.trim()||void 0};return Array.from(a.attributes).forEach((a=>{const r=a.name.replace(/-([a-z])/g,(a=>a[1].toUpperCase()));let e=a.value;"true"!==e&&""!==e||(e=!0),"false"===e&&(e=!1),t[r]=e})),t}))}renderExcessCount(a,t){const r=a-t;if(r<=0)return null;const i=this.getMaxStyle();return e("div",{class:"excess-avatar-container",onMouseEnter:()=>this.showPopoverGroup=this.enablePopover,onMouseLeave:()=>this.showPopoverGroup=!1,onClick:this.toggleRoster},e("div",{class:{"avatar-extra":!0,[`avatar-${this.getAvatarSizeAlias()}`]:!0,[`shape-${this.shape}`]:!0},style:{...i,backgroundColor:i.backgroundColor||"#f56a00"}},"+",r),this.showPopoverGroup&&this.enablePopover&&"stack"===this.layout&&this.renderPopoverGroup(t))}renderPopoverGroup(a){const t=this.getAllAvatarData().slice(a);return e("div",{class:"avatar-popover"},e("div",{class:"popover-content"},t.map(((a,t)=>e("div",{class:"popover-item",key:t},e("ui-avatar",{size:"xs",shape:this.shape,...a}),e("span",{class:"popover-text"},a.name||a.content||"User"))))))}toggleRoster=a=>{a.stopPropagation(),this.isRosterOpen=!this.isRosterOpen};closeRoster=()=>{this.isRosterOpen=!1};renderRoster(a){return this.isRosterOpen?e("div",{class:"avatar-roster-backdrop",onClick:this.closeRoster},e("div",{class:"avatar-roster-content",onClick:a=>a.stopPropagation()},e("div",{class:"roster-header"},e("h3",null,"Participants (",a.length,")"),e("ui-button",{variant:"ghost",onClick:this.closeRoster,ariaLabel:"Close",icon:"x",iconLibrary:"lucide",iconOnly:!0,size:"sm"})),e("div",{class:"roster-list"},a.map(((a,t)=>e("div",{key:t,class:"roster-item"},e("ui-avatar",{...a,size:"s",shape:this.shape}),e("div",{class:"roster-info"},e("span",{class:"roster-name"},a.name||a.content||"Anonymous"),a.status&&e("span",{class:`roster-status status-${a.status}`},a.status)))))))):null}render(){if(this.group){const a=this.getAllAvatarData(),t=this.getMaxCount(),r="grid"===this.layout?a:a.slice(0,t),s=this.calculateOverlap(),o={"avatar-group":!0,[`layout-${this.layout}`]:!0,"avatar-group-animated":this.animated&&"stack"===this.layout,expanded:this.isHovered&&"stack"===this.layout},n={"--avatar-spacing":`${s}px`,"--avatar-border-color":this.groupBorderColor,"--avatar-border-width":`${this.groupBorderWidth}px`,"--avatar-size":"number"==typeof this.size?`${this.size}px`:this.size.toString()};return e(i,null,e("div",{class:o,style:n,onMouseEnter:()=>this.isHovered=!0,onMouseLeave:()=>this.isHovered=!1},e("div",{class:"avatar-list"},r.map(((t,r)=>e("ui-avatar",{...t,key:r,size:this.size,shape:this.shape,border:`${this.groupBorderWidth}px solid ${this.groupBorderColor}`,class:"group-avatar",style:{zIndex:("stack"===this.layout?a.length-r:1).toString()}}))),"stack"===this.layout&&this.renderExcessCount(a.length,t)),e("div",{style:{display:"none"}},e("slot",{onSlotchange:()=>this.updateSlottedAvatars()}))),this.renderRoster(a))}const a=!(!this.uploadedImage&&!this.src||this.hasError),t=this.content||this.name||this.el.textContent?.trim(),r=!a&&!!t,s=!(a||r||!this.icon&&!this.fallbackIcon),o=this.getAvatarSizeAlias(),n=!isNaN(parseFloat(this.size)),l={avatar:!0,[`avatar-${this.shape}`]:!0,[`avatar-${o}`]:!n,"avatar-image":a,"avatar-icon":s,"avatar-text":r,"avatar-clickable":this.clickable||this.editable||!!this.href,"avatar-loading":this.loading,"avatar-hovered":this.isHovered,[`avatar-animation-${this.animation}`]:"none"!==this.animation,"avatar-gradient":this.gradient,"avatar-glass":this.glass||"glass"===this.variant,"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},d={};if(n||this.responsiveSize){const a=`${this.getSizeInPixels()}px`;if(d.width=a,d.height=a,d.lineHeight=a,n){const a=parseFloat(this.size);d.fontSize=s?.6*a+"px":.45*a+"px"}}if(!a)if(this.gradient){const[a,t]=this.getGradientColors();d.background=`linear-gradient(135deg, ${a} 0%, ${t} 100%)`}else this.autoColor&&t?d.backgroundColor=this.generateColorFromText(t):this.bgColor&&(d.backgroundColor=this.bgColor);this.color&&!a&&(d.color=this.color),this.border&&(d.border=this.border),"ring"!==this.animation&&"glow"!==this.animation||(d["--ring-color"]=this.ringColor),this.segments>0&&(d["--story-segments"]=this.segments);const h=this.getTooltipText(),p=h.length>0,c={[`avatar-${this.shape}`]:!0};return"string"==typeof this.size&&(c[`avatar-${o}`]=!0),e(i,{class:c},e(this.href?"a":"div",{...this.href?{href:this.href,class:"avatar-link"}:{class:"avatar-container"}},e("div",{ref:a=>this.avatarRef=a,class:l,style:d,onMouseEnter:this.handleMouseEnterAvatar,onMouseLeave:this.handleMouseLeaveAvatar,onClick:this.handleAvatarClick,title:this.clickable||this.editable||this.href?void 0:h,role:this.clickable||this.editable||this.href?"button":void 0,tabindex:this.clickable||this.editable||this.href?0:void 0},this.loading&&this.renderLoading(),this.skeleton&&this.renderLoading(),!this.loading&&!this.skeleton&&(a?this.renderImage():s?this.renderIcon():r?this.renderText():null),(this.glass||"glass"===this.variant)&&e("div",{class:"glass-overlay"}),this.reflection&&e("div",{class:"reflection-overlay"}),this.renderEditOverlay()),this.renderStatusIndicator(),this.renderBadge(),this.renderVerified(),p&&this.showTooltip&&e("div",{class:"avatar-tooltip"},h)))}static get watchers(){return{src:[{handleSrcChange:0}],loading:[{handleLoadingChange:0}]}}static get style(){return'.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:inline-flex;vertical-align:middle}:host *{box-sizing:border-box}:host{transition:all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}.avatar-container,.avatar-link{position:relative;display:inline-block;text-decoration:none}.avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background-color:var(--bg-secondary, #ccc);color:var(--text-standard, #ffffff);font-weight:600;overflow:visible;white-space:nowrap;text-align:center;vertical-align:middle;user-select:none;box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);transition:all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}.avatar.avatar-hovered{transform:translateY(-4px) scale(1.05);box-shadow:0 10px 20px rgba(0, 0, 0, 0.15)}.avatar.avatar-hovered.avatar-3d{transform:perspective(500px) rotateX(10deg) rotateY(10deg) translateY(-4px)}.avatar-circle{border-radius:50%}.avatar-square{border-radius:8px}.avatar-hexagon{clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);border-radius:0}.avatar-squircle{border-radius:35%}.avatar-circle img,.avatar-circle .avatar-string,.avatar-circle .avatar-icon,.avatar-hexagon img,.avatar-hexagon .avatar-string,.avatar-hexagon .avatar-icon,.avatar-squircle img,.avatar-squircle .avatar-string,.avatar-squircle .avatar-icon{border-radius:inherit;overflow:hidden}.avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;transition:opacity 0.3s ease}.avatar-xs{width:24px;height:24px;line-height:24px;font-size:10px}.avatar-sm,.avatar-s{width:32px;height:32px;line-height:32px;font-size:12px}.avatar-default,.avatar-m{width:40px;height:40px;line-height:40px;font-size:16px}.avatar-lg,.avatar-l{width:48px;height:48px;line-height:48px;font-size:20px}.avatar-xl{width:64px;height:64px;line-height:64px;font-size:28px}.avatar-string{position:absolute;left:50%;transform:translateX(-50%);display:inline-block;white-space:nowrap}.avatar-icon{font-size:1.2em;display:flex;align-items:center;justify-content:center}.avatar-status{position:absolute;width:var(--avatar-status-size, 10px);height:var(--avatar-status-size, 10px);border-radius:50%;border:var(--avatar-status-border-width, 2px) solid var(--border-subtle, #fff);z-index:5;box-shadow:0 1px 3px rgba(0, 0, 0, 0.1)}.avatar-status.avatar-status-top-right{top:0;right:0}.avatar-status.avatar-status-top-left{top:0;left:0}.avatar-status.avatar-status-bottom-right{bottom:0;right:0}.avatar-status.avatar-status-bottom-left{bottom:0;left:0}.avatar-status.avatar-status-online{background-color:var(--color-success, #22c55e)}.avatar-status.avatar-status-offline{background-color:transparent;border-color:var(--color-primary, #94a3b8)}.avatar-status.avatar-status-offline::after{content:"";position:absolute;inset:var(--avatar-status-offline-inset, 2px);border-radius:50%;background:var(--bg-primary, #ffffff);z-index:-1}.avatar-status.avatar-status-away{background-color:var(--color-warning, #f59e0b);clip-path:polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 50%);border:none}.avatar-status.avatar-status-busy,.avatar-status.avatar-status-dnd{background-color:var(--color-danger, #ef4444)}.avatar-status.avatar-status-busy::before,.avatar-status.avatar-status-dnd::before{content:"";position:absolute;top:50%;left:50%;width:var(--avatar-status-busy-width, 6px);height:var(--avatar-status-busy-height, 1.5px);background:var(--bg-primary, #ffffff);transform:translate(-50%, -50%)}.avatar-badge{position:absolute;min-width:18px;height:18px;line-height:18px;text-align:center;font-size:10px;font-weight:bold;color:var(--text-standard, #ffffff);border:2px solid var(--border-subtle, #fff);z-index:6;box-shadow:0 2px 4px rgba(0, 0, 0, 0.2)}.avatar-badge.avatar-badge-circle{border-radius:50%}.avatar-badge.avatar-badge-pill{padding:0 5px;border-radius:10px}.avatar-badge.avatar-badge-top-right{top:-4px;right:-4px}.avatar-badge.avatar-badge-top-left{top:-4px;left:-4px}.avatar-badge.avatar-badge-bottom-right{bottom:-4px;right:-4px}.avatar-badge.avatar-badge-bottom-left{bottom:-4px;left:-4px}.avatar-tooltip{position:absolute;bottom:110%;left:50%;transform:translateX(-50%);background:rgba(0, 0, 0, 0.85);color:var(--text-standard, #ffffff);padding:4px 8px;border-radius:4px;font-size:11px;white-space:nowrap;z-index:100;pointer-events:none;box-shadow:0 4px 10px rgba(0, 0, 0, 0.2)}.avatar-tooltip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:rgba(0, 0, 0, 0.85)}.avatar-skeleton{background:var(--bg-primary, #eee);position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit}.avatar-skeleton .skeleton-shimmer{width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);animation:shimmer 1.5s infinite}.avatar-loading{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255, 255, 255, 0.8);display:flex;align-items:center;justify-content:center;z-index:4;border-radius:inherit}.avatar-edit-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, 0.5);opacity:0;transition:0.2s;display:flex;align-items:center;justify-content:center;z-index:3;border-radius:inherit;color:var(--text-standard, #ffffff)}.avatar:hover .avatar-edit-overlay{opacity:1}.avatar-glass{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:rgba(255, 255, 255, 0.1) !important;border:1px solid rgba(255, 255, 255, 0.2) !important}.avatar-reflection .reflection-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%);pointer-events:none}.avatar-verified{position:absolute;bottom:0;right:0;width:16px;height:16px;background:var(--color-primary, #1890ff);color:var(--text-standard, #ffffff);border-radius:50%;border:2px solid var(--border-subtle, #fff);display:flex;align-items:center;justify-content:center;font-size:10px;z-index:7}.avatar-story{padding:3px}.avatar-story::after{content:"";position:absolute;top:-3px;left:-3px;right:-3px;bottom:-3px;border-radius:inherit;border:2px solid transparent;background:linear-gradient(45deg, var(--color-danger, #f09433), var(--color-danger, #e6683c), var(--color-danger, #dc2743), var(--color-danger, #cc2366), var(--color-danger, #bc1888)) border-box;-webkit-mask:linear-gradient(var(--bg-primary, #fff) 0 0) padding-box, linear-gradient(var(--bg-primary, #fff) 0 0);mask:linear-gradient(var(--bg-primary, #fff) 0 0) padding-box, linear-gradient(var(--bg-primary, #fff) 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude;z-index:1}.avatar-story.avatar-story-seen::after{background:var(--bg-secondary, #ccc) border-box}.avatar-story[style*="--story-segments"]::after{background:conic-gradient(from 0deg, var(--color-danger, #f09433) 0deg, var(--color-danger, #f09433) calc(360deg / var(--story-segments) - 2deg), transparent calc(360deg / var(--story-segments) - 2deg), transparent calc(360deg / var(--story-segments)));background-repeat:repeat;-webkit-mask:linear-gradient(var(--bg-primary, #fff) 0 0) padding-box, linear-gradient(var(--bg-primary, #fff) 0 0);mask:linear-gradient(var(--bg-primary, #fff) 0 0) padding-box, linear-gradient(var(--bg-primary, #fff) 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude}@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}@keyframes avatarRing{0%{transform:scale(1);opacity:1}100%{transform:scale(1.3);opacity:0}}.avatar-animation-pulse{animation:pulse 2s infinite}.avatar-animation-ring::after{content:"";position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;border:2px solid var(--ring-color, var(--color-primary, #10b981));border-radius:inherit;animation:avatarRing 1.5s infinite}.avatar-animation-glow{box-shadow:0 0 15px var(--ring-color, var(--color-primary, #10b981));animation:avatarGlow 2s ease-in-out infinite alternate}@keyframes avatarGlow{from{box-shadow:0 0 8px var(--ring-color, var(--color-primary, #10b981))}to{box-shadow:0 0 20px var(--ring-color, var(--color-primary, #10b981))}}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}.avatar-clickable:hover{transform:translateY(-2px);box-shadow:0 6px 15px rgba(0, 0, 0, 0.15)}.avatar-group{display:inline-flex;position:relative;align-items:center}.avatar-group.layout-stack .group-avatar{margin-right:var(--avatar-spacing, -16px);transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1);transform-origin:center bottom}.avatar-group.layout-stack .group-avatar:hover{z-index:100 !important;transform:scale(1.25) translateY(-10px);margin-right:8px !important;box-shadow:0 10px 25px rgba(0, 0, 0, 0.2);border-color:var(--border-subtle, #fff) !important}.avatar-group.layout-stack .group-avatar:hover~.group-avatar,.avatar-group.layout-stack .group-avatar:hover~.excess-avatar-container{transform:translateX(24px)}.avatar-group.layout-stack.avatar-group-animated:hover{padding-right:40px}.avatar-group.layout-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(calc(var(--avatar-size) + 8px), 1fr));gap:8px;width:100%}.avatar-list{display:flex;flex-wrap:wrap;align-items:center}.layout-stack .avatar-list{flex-wrap:nowrap}.avatar-extra{display:inline-flex;align-items:center;justify-content:center;background-color:var(--color-danger, #f56a00);color:var(--text-standard, #ffffff);font-weight:600;border:var(--avatar-border-width, 2px) solid var(--avatar-border-color, #fff);cursor:pointer;z-index:1;transition:all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);font-size:0.8em}.avatar-extra:hover{transform:scale(1.1) translateY(-4px);z-index:100;box-shadow:0 8px 20px rgba(0, 0, 0, 0.15)}.avatar-extra.shape-circle{border-radius:50%}.avatar-extra.shape-square{border-radius:8px}.avatar-extra.shape-hexagon{clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);border-radius:0}.avatar-extra.shape-squircle{border-radius:35%}.excess-avatar-container{position:relative;display:inline-block}.avatar-popover{position:absolute;top:100%;right:0;background:var(--bg-primary, #ffffff);border-radius:8px;box-shadow:0 8px 24px rgba(0, 0, 0, 0.2);padding:12px;z-index:1000;min-width:180px;margin-top:8px;animation:popoverFadeIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}.avatar-popover::after{content:"";position:absolute;top:-12px;right:12px;border:6px solid transparent;border-bottom-color:var(--bg-primary, #ffffff)}.avatar-popover .popover-content{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow-y:auto}.avatar-popover .popover-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:6px;transition:background 0.2s;cursor:pointer}.avatar-popover .popover-item:hover{background:var(--bg-secondary, #f3f4f6)}.avatar-popover .popover-item ui-avatar{transition:none !important;transform:none !important;box-shadow:none !important}.avatar-popover .popover-text{font-size:14px;color:var(--text-secondary, #374151);font-weight:500}.avatar-roster-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0, 0, 0, 0.5);display:flex;align-items:center;justify-content:center;z-index:2000;backdrop-filter:blur(4px)}.avatar-roster-content{background:var(--bg-primary, #ffffff);width:90%;max-width:500px;max-height:80vh;border-radius:16px;box-shadow:0 20px 50px rgba(0, 0, 0, 0.3);display:flex;flex-direction:column;overflow:hidden;animation:modalIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)}.roster-header{padding:20px;border-bottom:1px solid var(--border-subtle, #eee);display:flex;align-items:center;justify-content:space-between}.roster-header h3{margin:0;color:var(--text-primary, #1f2937)}.roster-header .close-btn{background:none;border:none;font-size:28px;cursor:pointer;color:var(--color-primary, #9ca3af)}.roster-header .close-btn:hover{color:var(--bg-primary, #1f2937)}.roster-list{padding:12px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.roster-item{display:flex;align-items:center;gap:16px;padding:12px;border-radius:12px;transition:background 0.2s}.roster-item:hover{background:var(--bg-primary, #f9fafb)}.roster-info{display:flex;flex-direction:column}.roster-name{font-weight:600;color:var(--text-primary, #111827)}.roster-status{font-size:11px;text-transform:capitalize;border-radius:4px;padding:1px 6px;width:fit-content}.status-online{color:var(--color-success-hover, #059669);background:var(--bg-primary, #ecfdf5)}@keyframes popoverFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes modalIn{from{opacity:0;transform:scale(0.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}'}},[769,"ui-avatar",{alt:[1],gap:[2],icon:[1],iconLibrary:[1,"icon-library"],shape:[1],size:[8],src:[1],srcSet:[1,"src-set"],imgDraggable:[4,"img-draggable"],crossOrigin:[1,"cross-origin"],bgColor:[1,"bg-color"],color:[1],border:[1],tooltipText:[1,"tooltip-text"],responsiveSize:[16],status:[1],statusPosition:[1,"status-position"],showStatus:[4,"show-status"],indicatorSize:[8,"indicator-size"],badge:[8],badgePosition:[1,"badge-position"],badgeColor:[1,"badge-color"],editable:[4],acceptTypes:[1,"accept-types"],fallbackIcon:[1,"fallback-icon"],loading:[4],lazy:[4],fit:[1],verified:[4],glass:[4],skeleton:[4],reflection:[4],segments:[2],variant:[1],clickable:[4],autoColor:[4,"auto-color"],gradient:[4],gradientColors:[1,"gradient-colors"],animation:[1],ringColor:[1,"ring-color"],story:[4],storySeen:[4,"story-seen"],activeSpeaker:[4,"active-speaker"],statusPulse:[4,"status-pulse"],threeD:[4,"three-d"],href:[1],content:[1],name:[1],maxInitials:[2,"max-initials"],group:[4],avatars:[16],maxVisible:[2,"max-visible"],max:[2],layout:[1],spacing:[2],overlap:[2],groupBorderColor:[1,"group-border-color"],groupBorderWidth:[2,"group-border-width"],enablePopover:[4,"enable-popover"],animated:[4],hasError:[32],scale:[32],currentSize:[32],showTooltip:[32],isHovered:[32],uploadedImage:[32],slottedAvatars:[32],showPopoverGroup:[32],isRosterOpen:[32]},void 0,{src:[{handleSrcChange:0}],loading:[{handleLoadingChange:0}]}]);function c(){"undefined"!=typeof customElements&&["ui-avatar","ui-avatar","ui-badge","ui-button","ui-icon","ui-input","ui-loader"].forEach((a=>{switch(a){case"ui-avatar":customElements.get(s(a))||customElements.define(s(a),p);break;case"ui-avatar":customElements.get(s(a))||c();break;case"ui-badge":customElements.get(s(a))||o();break;case"ui-button":customElements.get(s(a))||n();break;case"ui-icon":customElements.get(s(a))||l();break;case"ui-input":customElements.get(s(a))||d();break;case"ui-loader":customElements.get(s(a))||h()}}))}export{p as A,c as d}