atomicuilibrary 0.0.1 → 0.1.0

package/dist/collection/components/timeline-item/timeline-item.js

@@ -13,7 +13,7 @@ export class TimelineItem {
      */
     itemDate;
     render() {
-        return (h("div", { key: '54a294a4b0f3ba13841d3c8de125694e81f2141c', class: "timeline-item-container" }, h("div", { key: '0ccb68f5384a8ac2bba5cebb5d75b96fb1dccc16', class: "timeline-item-content" }, h("h2", { key: '75c5b1f55e06a1345105dd12b924e41a3bada993' }, this.itemTitle), h("p", { key: '7ae3c4cf655c6831943b8d53db977e3348907471' }, this.itemDescription), h("span", { key: '23175d4215f96f76a580dece414fe379446a23da' }, this.itemDate))));
+        return (h("div", { key: '0004428a7a312050db13c20a0b01ccfa1bbefec8', class: "timeline-item-container" }, h("div", { key: '706c054af22b45409c3eec9c3cae7bf13b016c88', class: "timeline-item-content" }, h("h2", { key: '176eb8c8b42d7658f001acaa2a94d01abcbc2060' }, this.itemTitle), h("p", { key: 'a0b6b862951518676293156a8dba54fbb2608d65' }, this.itemDescription), h("span", { key: 'e753aaeffb2c672b2c6b243f96e270e7a6b10c6e' }, this.itemDate))));
     }
     static get is() { return "timeline-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toolbar/toolbar.js

@@ -591,7 +591,7 @@ export class Toolbar {
         if (this.maxSize) {
             stickyStyle[this.orientation === 'horizontal' ? 'maxWidth' : 'maxHeight'] = this.maxSize;
         }
-        return (h(Host, { key: '6b33477b806940fbb98394621c375a70853128a9', class: hostClasses, style: stickyStyle, role: "toolbar", "aria-label": this.toolbarAriaLabel, "aria-disabled": this.disabled ? 'true' : null }, this.isMobile && (h("ui-button", { key: '12131b32e8813702f466625f77a38c3978bb4147', class: "toolbar-mobile-toggle", "aria-expanded": String(!this.isCollapsed), "aria-label": this.isCollapsed ? 'Expand toolbar' : 'Collapse toolbar', onButtonClick: () => { this.isCollapsed = !this.isCollapsed; }, variant: "ghost", icon: this.isCollapsed ? 'menu' : 'x', "icon-library": this.iconLibrary, iconOnly: true })), (!this.isMobile || !this.isCollapsed) && (h("div", { key: '3e203ab7c3349576bae4f42b906ec702b97b18af', class: "toolbar-body", style: bodyStyle, ref: el => this.toolbarBodyRef = el }, h("slot", { key: '5c2f402b9d318651a0007b3ed80064f711f6e3a5', name: "before" }), hasSchema ? (h("div", { class: "toolbar-zones" }, this.renderZone(this.parsedSchema.left ?? [], 'left'), this.zoneDividers && (this.parsedSchema.left?.length > 0) && (this.parsedSchema.center?.length > 0) && this.renderSeparator(), this.renderZone(this.parsedSchema.center ?? [], 'center'), this.zoneDividers && (this.parsedSchema.center?.length > 0) && (this.parsedSchema.right?.length > 0) && this.renderSeparator(), this.renderZone(this.parsedSchema.right ?? [], 'right'))) : (this.parsedItems.map(item => this.renderItem(item))), h("slot", { key: 'd8e7b2fec2cad8fe068792c0a4cb0e7b7d0b002e', name: "left" }), h("slot", { key: '4445e8c225d7249ddd65fe1164dc78a924d63530', name: "center" }), h("slot", { key: 'd590115edf7ff9d04cb0e36b5cac629b85901b09', name: "right" }), h("slot", { key: 'cf6631fd34e189258bea03f5b653ee4d766f3d78' }), this.overflowStrategy === 'dropdown' && this.renderOverflowMenu(), h("slot", { key: 'f97fe02b2756a3cbb7b82965d57e767597834ee7', name: "after" })))));
+        return (h(Host, { key: 'd436d5f609b139d2811c68c158301a15c5ff3523', class: hostClasses, style: stickyStyle, role: "toolbar", "aria-label": this.toolbarAriaLabel, "aria-disabled": this.disabled ? 'true' : null }, this.isMobile && (h("ui-button", { key: 'ef9bf93650048b4c83d82cc90a59932abdb65a75', class: "toolbar-mobile-toggle", "aria-expanded": String(!this.isCollapsed), "aria-label": this.isCollapsed ? 'Expand toolbar' : 'Collapse toolbar', onButtonClick: () => { this.isCollapsed = !this.isCollapsed; }, variant: "ghost", icon: this.isCollapsed ? 'menu' : 'x', "icon-library": this.iconLibrary, iconOnly: true })), (!this.isMobile || !this.isCollapsed) && (h("div", { key: '14f8f470194941da1eb3ebf5a612cbed4fd9870b', class: "toolbar-body", style: bodyStyle, ref: el => this.toolbarBodyRef = el }, h("slot", { key: 'e717108882c11dfd3878a12a89d5b57146b3c527', name: "before" }), hasSchema ? (h("div", { class: "toolbar-zones" }, this.renderZone(this.parsedSchema.left ?? [], 'left'), this.zoneDividers && (this.parsedSchema.left?.length > 0) && (this.parsedSchema.center?.length > 0) && this.renderSeparator(), this.renderZone(this.parsedSchema.center ?? [], 'center'), this.zoneDividers && (this.parsedSchema.center?.length > 0) && (this.parsedSchema.right?.length > 0) && this.renderSeparator(), this.renderZone(this.parsedSchema.right ?? [], 'right'))) : (this.parsedItems.map(item => this.renderItem(item))), h("slot", { key: '2306eefd8213f540eb4b6034d1e975bcbcbd244e', name: "left" }), h("slot", { key: '21fc5a66550c40f54e14ff69027bf66dde88eb75', name: "center" }), h("slot", { key: '54c87776c5cacc375c2be3a2f15cfac0733c5d2f', name: "right" }), h("slot", { key: '2503cce255fae015cbbe170392f7eda94c881e12' }), this.overflowStrategy === 'dropdown' && this.renderOverflowMenu(), h("slot", { key: '6fab60c7236967cc9cd0619fa917f8812375e1d6', name: "after" })))));
     }
     static get is() { return "ui-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -662,7 +662,7 @@ export class Tooltip {
             [`tooltip-shape-${this.shape}`]: true,
             ...(this.customClass ? { [this.customClass]: true } : {}),
         };
-        const tooltipContent = (h("div", { key: 'd08971e832d6bb9f6975de4162afaee0025d6d98', class: tooltipClasses, style: {
+        const tooltipContent = (h("div", { key: '5e5c75b174869faf89475e47c40e2f733ca639cb', class: tooltipClasses, style: {
                 '--tooltip-max-width': `${this.maxWidth}px`,
                 '--tooltip-z-index': this.zIndex.toString(),
                 '--tooltip-transition-duration': `${this.transitionDuration}ms`,
@@ -670,8 +670,8 @@ export class Tooltip {
                 '--tooltip-arrow-size': `${this.arrowSize}px`,
                 ...(this.customColor ? { '--tooltip-bg-color': this.customColor } : {}),
                 ...(this.textColor ? { '--tooltip-text-color': this.textColor } : {}),
-            }, ref: el => this.tooltipElement = el, onMouseEnter: this.handleTooltipMouseEnter, onMouseLeave: this.handleTooltipMouseLeave, role: "tooltip", "aria-live": "polite" }, this.closable && (h("ui-button", { key: '8744809203573938ea08f72665c75e63a9c37e79', variant: "ghost", class: "tooltip-close", onClick: this.handleClose, ariaLabel: "Close tooltip", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "sm" })), this.showHeader && (h("div", { key: 'f5675e917f299a2b2d9279ef6b4d06c21696e32a', class: "tooltip-header" }, h("div", { key: 'f2317e5f214ca6bcf92ad314840013e2f298c203', ref: el => this.headerSlotTarget = el }))), h("div", { key: 'e4e5a79aeddaa5e00d60f3b12e96c169f147dae8', class: "tooltip-content" }, this.loading ? (h("div", { class: "tooltip-loading-spinner" }, h("ui-icon", { name: "loader", library: "lucide", spin: true }), h("span", null, "Loading..."))) : (this.html ? (h("div", { innerHTML: sanitizeHTML(this.content) })) : (h("span", null, this.content))), h("div", { key: '87c26e2908df6ee6652d22e219dddc6c6f8ad36e', class: "tooltip-slot-content", ref: el => this.defaultSlotTarget = el })), this.showFooter && (h("div", { key: '9fe03747ba4fe5f3fcccede2c49540a9a7c9d696', class: "tooltip-footer" }, h("div", { key: 'f55cc3ddbfbcaf0e45e03dcb1971b696cd566150', ref: el => this.footerSlotTarget = el }))), this.arrow && h("div", { key: '30d603a7d56a57fca73c3cb9a6420cdabde31ead', class: "tooltip-arrow" })));
-        return (h(Host, { key: '51577771914e7712be4e008b3cfa79683b06e3c2' }, h("div", { key: 'a5240a2c60d7dc9e2207d9c95fc8b860ab67efa1', class: "tooltip-wrapper" }, h("slot", { key: 'ce3a6106b2e281774e0281a5f72aeaa9fd84a37a', name: "target" })), this.isVisible && tooltipContent, h("div", { key: '91c1f89da5c9e24779a874d61862d02fa332749b', class: "tooltip-slot-source", style: { display: 'none' }, "aria-hidden": "true" }, h("div", { key: '2ed6c8792820b8306ba30083dc62528cf935092b', ref: el => this.defaultSlotSource = el }, h("slot", { key: 'd7b2237ccecaa53b6f3bf2afb87763abcec4fb20' })), h("div", { key: '9844aa3ec9a673f9ff2fc3fe20f350d3c3163f30', ref: el => this.headerSlotSource = el }, h("slot", { key: '538fdd565105d73df273bcdcc4e4d147b333deed', name: "header" })), h("div", { key: '2f6a44286d07483e4698b140fb22fa0c2c5d1b3b', ref: el => this.footerSlotSource = el }, h("slot", { key: '07c51076ab6df9792bdb737976f8b052908c5cfb', name: "footer" })))));
+            }, ref: el => this.tooltipElement = el, onMouseEnter: this.handleTooltipMouseEnter, onMouseLeave: this.handleTooltipMouseLeave, role: "tooltip", "aria-live": "polite" }, this.closable && (h("ui-button", { key: 'c782e3113216319ed2ac22f3c35b446b9ce7edf8', variant: "ghost", class: "tooltip-close", onClick: this.handleClose, ariaLabel: "Close tooltip", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "sm" })), this.showHeader && (h("div", { key: 'e05c1bda9cb7cb892195c71efb19ffbd4169790c', class: "tooltip-header" }, h("div", { key: 'a6cf727d9c266a6e6b7448726116ba804a38104f', ref: el => this.headerSlotTarget = el }))), h("div", { key: 'cc4d88f048bc46cfdd2eebbfdd47c8ffa6b93ed3', class: "tooltip-content" }, this.loading ? (h("div", { class: "tooltip-loading-spinner" }, h("ui-icon", { name: "loader", library: "lucide", spin: true }), h("span", null, "Loading..."))) : (this.html ? (h("div", { innerHTML: sanitizeHTML(this.content) })) : (h("span", null, this.content))), h("div", { key: '8dd2fcb7e5262cbe06c70be5c10093d44e930335', class: "tooltip-slot-content", ref: el => this.defaultSlotTarget = el })), this.showFooter && (h("div", { key: '26ce70cb64df924dcae94ef69b58392a9d36c209', class: "tooltip-footer" }, h("div", { key: '34e503228a04d14459a0d8d06298ffb2a4024a5f', ref: el => this.footerSlotTarget = el }))), this.arrow && h("div", { key: '69001577b02dbca5c611876ccf6f23deed2729c1', class: "tooltip-arrow" })));
+        return (h(Host, { key: '307752cb0fd187a5e6e730d210695ab306cc56c0' }, h("div", { key: '54368e7a646845a67938888ba9f9d5f43adb60f5', class: "tooltip-wrapper" }, h("slot", { key: '4137b0ece48c46cec089ea3c25a3d2dd8627a4d2', name: "target" })), this.isVisible && tooltipContent, h("div", { key: '9953d7fe69e1696350bd17f3a884350e840ead76', class: "tooltip-slot-source", style: { display: 'none' }, "aria-hidden": "true" }, h("div", { key: 'e725fb6982d649ec5a9c650a21f5d2f03aa474e2', ref: el => this.defaultSlotSource = el }, h("slot", { key: '11f51228e8a76bd5e2ea7c26a02bc0d5ae046010' })), h("div", { key: 'e01d0037a906144fef1ed7908f784b8564340e5e', ref: el => this.headerSlotSource = el }, h("slot", { key: 'f878b0f6724fb0005bec621cc846f76f26528569', name: "header" })), h("div", { key: 'ff99e07c1ebcd501954c4eca287f62dfc024786f', ref: el => this.footerSlotSource = el }, h("slot", { key: '0a86e94fcb161cdc792acc33be982f0952d28823', name: "footer" })))));
     }
     static get is() { return "ui-tooltip"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/top-bar/top-bar.js

@@ -270,7 +270,7 @@ export class TopBar {
                     "references": {
                         "TopBarAction": {
                             "location": "local",
-                            "path": "P:/Repository/stenciljs/atomicUILibrary/src/components/top-bar/top-bar.tsx",
+                            "path": "C:/Praveen/Personal-repo/kmn/atomicUILibrary/library/src/components/top-bar/top-bar.tsx",
                             "id": "src/components/top-bar/top-bar.tsx::TopBarAction"
                         }
                     }
@@ -296,7 +296,7 @@ export class TopBar {
                     "references": {
                         "UserMenuItem": {
                             "location": "local",
-                            "path": "P:/Repository/stenciljs/atomicUILibrary/src/components/top-bar/top-bar.tsx",
+                            "path": "C:/Praveen/Personal-repo/kmn/atomicUILibrary/library/src/components/top-bar/top-bar.tsx",
                             "id": "src/components/top-bar/top-bar.tsx::UserMenuItem"
                         }
                     }

package/dist/collection/components/ui-navigation-bar/navigation-bar/navigation-bar.css

@@ -40,7 +40,7 @@
   /* Layout */
   display: flex;
   flex-direction: column;
-  height: 100%;
+  height: 100vh;
   width: var(--nav-width);
   background: var(--nav-bg);
   color: var(--nav-color);
@@ -311,6 +311,7 @@
   overflow: hidden;
   white-space: nowrap;
   position: relative;
+  border-bottom: 1px solid var(--nav-border-color);
 }
 
 .nav-mobile-close {
@@ -326,9 +327,12 @@
 .nav-blocks-container {
   display: flex;
   flex-direction: column;
-  height: 100%;
-  overflow: visible;
-  /* Allow popovers to escape */
+  flex: 1;
+  min-height: 100vh;
+  height: 100vh;
+  overflow: hidden; /* Prevent container expansion */
+  /* Allow popovers to escape via relative children if needed, 
+     but here we need to contain the flex items. */
 }
 
 .nav-block-categories {
@@ -349,6 +353,7 @@
 
 .nav-block-top {
   flex: 1;
+  min-height: 0; /* Important for flex child scrolling */
   overflow-y: auto;
   overflow-x: visible;
   /* Changed from hidden */
@@ -364,6 +369,7 @@
   flex-shrink: 0;
   border-top: 1px solid var(--nav-border-color);
   padding: 8px 0;
+  background-color: rgba(255, 255, 255, 0.05); /* More distinct in dark mode */
   display: flex;
   flex-direction: column;
   overflow: visible;
@@ -372,6 +378,10 @@
   /* Prevent expansion when popover opens */
 }
 
+:host([data-theme=light]) .nav-block-bottom {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
 .nav-header {
   border-bottom: 1px solid var(--nav-border-color);
 }
@@ -396,6 +406,7 @@
   border-top: 1px solid var(--nav-border-color);
   display: flex;
   flex-direction: column;
+  background-color: rgba(255, 255, 255, 0.08); /* Even more distinct for profile */
   /* Ensure BG covers if overly scrolled */
   overflow: visible;
   min-height: fit-content;
@@ -403,6 +414,10 @@
   /* Prevent expansion when popover opens */
 }
 
+:host([data-theme=light]) .nav-block-profile {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
 /* Scrollbar shared styles */
 .nav-block-categories::-webkit-scrollbar,
 .nav-block-top::-webkit-scrollbar {

package/dist/collection/components/ui-navigation-bar/navigation-bar/navigation-bar.js

@@ -41,7 +41,7 @@ export class NavigationBar {
     /** Position of the active item indicator bar: 'start' (left) or 'end' (right) */
     indicatorPosition = 'start';
     /** Maximum number of items to show before overflowing to "More" menu */
-    maxItems = 4;
+    maxItems = 100;
     /** Company Logo URL */
     companyLogo;
     /** Company Name */
@@ -433,7 +433,7 @@ export class NavigationBar {
         const vars = {
             '--nav-width': typeof this.isExpanded === 'boolean' ? (this.isExpanded ? this.expandedWidth : this.isMobile ? '0px' : this.collapsedWidth) : this.collapsedWidth,
         };
-        return (h(Host, { key: '5d7d3ba7a371bb0b2c7067c9ef6ffadf1cc5cf2c', style: vars, class: hostClass, theme: null, "data-theme": this.effectiveTheme }, h("div", { key: '822e6bca215424cf97ee14360e5474f279898d08', class: "nav-glider", style: {
+        return (h(Host, { key: '8c2709e6da4c4d5dc9c119d80ae046ced0681677', style: vars, class: hostClass, theme: null, "data-theme": this.effectiveTheme }, h("div", { key: 'eeb7ad1eae7c89b8d8a81bb62b89b89b7d76f2de', class: "nav-glider", style: {
                 top: this.orientation === 'horizontal' ? 'auto' : `${typeof this.gliderTop === 'number' ? this.gliderTop : 0}px`,
                 height: this.orientation === 'horizontal' ? '3px' : `${typeof this.gliderHeight === 'number' ? this.gliderHeight : 0}px`,
                 left: this.orientation === 'horizontal' ? `${typeof this.gliderLeft === 'number' ? this.gliderLeft : 0}px` : this.position === 'left' ? '6px' : 'auto',
@@ -441,21 +441,21 @@ export class NavigationBar {
                 width: this.orientation === 'horizontal' ? `${typeof this.gliderWidth === 'number' ? this.gliderWidth : 0}px` : '4px',
                 bottom: this.orientation === 'horizontal' ? '0' : 'auto',
                 opacity: `${typeof this.gliderOpacity === 'number' ? this.gliderOpacity : 0}`,
-            } }), this.renderToggle(), this.isMobile && this.isExpanded && h("div", { key: 'e561f5ba73dcded187227d24c05271ffe8cd35be', class: "nav-backdrop", onClick: () => this.close() }), h("div", { key: '00336a31f7c62f1e4225811a8526316869eacb67', class: "nav-blocks-container" }, h("div", { key: '08bb7aa63e515127943aa1858b6246e924752237', class: "nav-header" }, h("slot", { key: '5052017567308f9e24e13c273fa6e6f81bdabb54', name: "header" }, (this.companyLogo || this.companyName) && (h("div", { key: '3a374287ff56db7e8e48786a9fd82d046eb27a24', class: "nav-company-block", style: { display: 'flex', alignItems: 'center', gap: '12px', padding: '0 24px', height: '64px' } }, this.companyLogo && h("img", { key: 'c51ab5c8072dce6e11738da2df7a2c2d77534989', src: this.companyLogo, alt: this.companyName || 'Logo', style: { height: '32px', width: 'auto' } }), this.isExpanded && this.companyName && (h("span", { key: 'c37a8d0bc5ea530ac6e4c90d45aed571e401ad65', class: "nav-company-name", style: { fontWeight: '600', fontSize: '16px' } }, this.companyName))))), h("slot", { key: 'b552595e83958add3197c9bd83eda6454d975dad', name: "logo" }), this.isMobile && (h("div", { key: 'dfc692bd4d940e34bdd3c1ee0f7bab24e390623a', class: "nav-mobile-close", onClick: () => this.close() }, h("svg", { key: '38bc9e4c9799d01510b8c0a354d4c4be370775c8', viewBox: "0 0 24 24", width: "24", height: "24", stroke: "currentColor", fill: "none" }, h("path", { key: '9e5ce385a716770a940247a2e97d5a002928f536', d: "M18 6L6 18M6 6l12 12" }))))), this.showSearch && this.isExpanded && (h("div", { key: '6210ee48a40ec6ac0a1b37c6064be9539041d89a', class: "nav-search-bar" }, h("div", { key: '91be6b4b089065dec8601ad39d6f5ee6314c2743', style: {
+            } }), this.renderToggle(), this.isMobile && this.isExpanded && h("div", { key: '1c4f23fe57c282e4ad5a1c28d1223de8086fda72', class: "nav-backdrop", onClick: () => this.close() }), h("div", { key: '65075734486486764a894c6fb7b83d7333ec73c7', class: "nav-blocks-container" }, h("div", { key: 'd4dee15c771e8ae62f649aeb28b56c10e7cbb853', class: "nav-header" }, h("slot", { key: 'ca14ebc9b45a559df2aed758838a3ed76bb1c3ae', name: "header" }, (this.companyLogo || this.companyName) && (h("div", { key: '7d0a0735620d690057d9a1b62a9c749fdb3f2c84', class: "nav-company-block", style: { display: 'flex', alignItems: 'center', gap: '12px', padding: '0 24px', height: '64px' } }, this.companyLogo && h("img", { key: 'f09f09d20a33e176cd566dd53bc0241bd354411a', src: this.companyLogo, alt: this.companyName || 'Logo', style: { height: '32px', width: 'auto' } }), this.isExpanded && this.companyName && (h("span", { key: 'e4b520a45523db14ea2336b87e114aa1b71ec17d', class: "nav-company-name", style: { fontWeight: '600', fontSize: '16px' } }, this.companyName))))), h("slot", { key: '336712f1b384d40c36799ec38ef4e5855221d00e', name: "logo" }), this.isMobile && (h("div", { key: 'af115858dac6594075002677847f4ba5ee56c8d4', class: "nav-mobile-close", onClick: () => this.close() }, h("svg", { key: 'f8d652e0e156f6e45460ccad45c81dcca26aa7ee', viewBox: "0 0 24 24", width: "24", height: "24", stroke: "currentColor", fill: "none" }, h("path", { key: 'e8fe61ea68a03aedeea2c782674c3ff355391559', d: "M18 6L6 18M6 6l12 12" }))))), this.showSearch && this.isExpanded && (h("div", { key: 'b3817d97c27963a5510f11e144bfc9c86224a3d4', class: "nav-search-bar" }, h("div", { key: '40459a1c370c1358513a5e0010490c40b2a7c8be', style: {
                 position: 'relative',
                 display: 'flex',
                 alignItems: 'center',
                 background: 'var(--nav-item-hover-bg, #f1f5f9)',
                 borderRadius: '6px',
                 padding: '4px 8px',
-            } }, h("svg", { key: 'eb7de33bd4feea4137a01b38a3c461536d471d0e', viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "2", style: { opacity: '0.5', marginRight: '8px' } }, h("circle", { key: 'e38c3bf011c65f5f6adf7283cfa4362afba456d6', cx: "11", cy: "11", r: "8" }), h("line", { key: '62dbce91bf5b3cce61f4fe711b9d70b9ddb2192f', x1: "21", y1: "21", x2: "16.65", y2: "16.65" })), h("input", { key: '2e3c9743f142fe4fec5e5d232edbfa7a453a5520', type: "text", placeholder: "Search...", value: this.keyword, onInput: e => (this.keyword = e.target.value), style: {
+            } }, h("svg", { key: 'fcde2dfec1ff2ba213d37f07fefaf6cb9f300932', viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "2", style: { opacity: '0.5', marginRight: '8px' } }, h("circle", { key: '26527fb8563cce41862c12c99c0e6dbb1459723b', cx: "11", cy: "11", r: "8" }), h("line", { key: '0bf144609d27eed0c1bb54de7ed1f3020445f2b1', x1: "21", y1: "21", x2: "16.65", y2: "16.65" })), h("input", { key: '43ef6d0df604e1e1edb88303ba4fe4c6bd97ccdb', type: "text", placeholder: "Search...", value: this.keyword, onInput: e => (this.keyword = e.target.value), style: {
                 background: 'transparent',
                 border: 'none',
                 outline: 'none',
                 width: '100%',
                 fontSize: '14px',
                 color: 'inherit',
-            } })))), blocks.categories.length > 0 && (h("div", { key: 'bbfc7918309d8a05aa89f1cf29564f4a7e0f5657', class: "nav-block-categories", role: "tree" }, this.renderNavList(blocks.categories, 'cat'))), h("div", { key: '856526bb6ebc4fb642f895e9d3977068562df9db', class: "nav-block-top", role: "tree" }, this.renderNavList(blocks.primary, 'top'), h("slot", { key: 'f7f37b72d9b37144f7a982028d04dc2a182dd792', name: "menu-item" }), " ", blocks.primary.length === 0 && blocks.categories.length === 0 && blocks.secondary.length === 0 && h("slot", { key: '53ca544ecb67734f153b7c327c85100f33c74092', name: "empty-state" }, "No Items")), blocks.secondary.length > 0 && (h("div", { key: '2d23b401f03faaa7c27aae850e84a5de3751b667', class: "nav-block-secondary", role: "tree" }, this.renderNavList(blocks.secondary, 'sec'))), blocks.bottom.length > 0 && (h("div", { key: 'e7f4d57d73f042d7c300f6a960469a8cef50afdd', class: "nav-block-bottom", role: "tree" }, blocks.bottom.map(item => this.renderItem(item)), h("slot", { key: '4ae38e3116a10f7ab3a244fb0ae3cfc3ad91e7d6', name: "footer" }))), blocks.bottomSecondary.length > 0 && (h("div", { key: 'e79b2b33ccf1e47902376599065562024a45eaff', class: "nav-block-profile", role: "tree" }, blocks.bottomSecondary.map(item => this.renderItem(item)))))));
+            } })))), blocks.categories.length > 0 && (h("div", { key: '66b63ea16b9080d05cd540b503ead73792bb682e', class: "nav-block-categories", role: "tree" }, this.renderNavList(blocks.categories, 'cat'))), h("div", { key: '85217416656d87209bd63e35f359a54d3e374a40', class: "nav-block-top", role: "tree" }, this.renderNavList(blocks.primary, 'top'), h("slot", { key: 'aeb468782004f5f2f9f49335ee3a22cba28ccf11', name: "menu-item" }), " ", blocks.primary.length === 0 && blocks.categories.length === 0 && blocks.secondary.length === 0 && h("slot", { key: 'de7e8d6226e9e76bc112e10a5d8b17e526e30fd6', name: "empty-state" }, "No Items")), blocks.secondary.length > 0 && (h("div", { key: '189a5325fef7afc1082bf89551468dad58561308', class: "nav-block-secondary", role: "tree" }, this.renderNavList(blocks.secondary, 'sec'))), blocks.bottom.length > 0 && (h("div", { key: '3c5fa508db8925545a430a9b1cf3c4ea87371e15', class: "nav-block-bottom", role: "tree" }, blocks.bottom.map(item => this.renderItem(item)), h("slot", { key: '4f749f79cabfb4c3c3b3d902b60ab9d104c40284', name: "footer" }))), blocks.bottomSecondary.length > 0 && (h("div", { key: 'c74afe6c446481924cc7393522ebc97803bbc713', class: "nav-block-profile", role: "tree" }, blocks.bottomSecondary.map(item => this.renderItem(item)))))));
     }
     isBottomItem(id) {
         const blocks = this.getBlocks();
@@ -943,7 +943,7 @@ export class NavigationBar {
                 "setter": false,
                 "reflect": false,
                 "attribute": "max-items",
-                "defaultValue": "4"
+                "defaultValue": "100"
             },
             "companyLogo": {
                 "type": "string",

package/dist/collection/components/ui-navigation-bar/navigation-item.js

@@ -69,7 +69,7 @@ export class NavigationItemComponent {
         const isDirectlyActive = this.active || this.item.id === this.activeId;
         const isParentOfActive = this.hasActiveChild();
         const isPopoverMode = this.forcePopover || this.item.id === 'user-profile';
-        return (h("li", { key: 'b344aa6c6a2034b11c7bfb861ef51d24fb1ddc21', class: {
+        return (h("li", { key: '9345250f187b57fec472da66335620d747dfc207', class: {
                 'nav-item': true,
                 'active': isDirectlyActive,
                 'active-parent': isParentOfActive,
@@ -82,10 +82,10 @@ export class NavigationItemComponent {
                 'is-user-profile': this.item.id === 'user-profile',
                 'placement-top': this.popoverPlacement === 'top',
                 'placement-bottom': this.popoverPlacement === 'bottom'
-            }, tabindex: this.item.disabled ? -1 : 0, "aria-disabled": this.item.disabled ? 'true' : 'false', "aria-expanded": (this.open && !isPopoverMode) ? 'true' : 'false', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'f511c50817c20785b2ea46afe2df07a7f5508818', class: "item-content", onClick: this.handleClick, onKeyDown: e => {
+            }, tabindex: this.item.disabled ? -1 : 0, "aria-disabled": this.item.disabled ? 'true' : 'false', "aria-expanded": (this.open && !isPopoverMode) ? 'true' : 'false', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'fed1eb168a5e1340b971dd12ecabcc3a6bb0d831', class: "item-content", onClick: this.handleClick, onKeyDown: e => {
                 if (e.key === 'Enter')
                     this.handleClick();
-            } }, this.item.icon && (h("span", { key: '20bf50d7db7d55522e8bc9c1433bbeaf71639fa5', class: "nav-icon" }, h("ui-icon", { key: 'b1316aec36a00d9bd44b3a89072fa6a39b282490', name: this.item.icon, library: this.item.iconLibrary || this.iconLibrary, size: "1.25rem" }))), (!this.collapsed || this.forcePopover) && h("span", { key: 'c2d027a25fa696b59231c99283761b03f637f603', class: "nav-label" }, this.item.label), this.item.badge && (!this.collapsed || this.forcePopover) && h("span", { key: '0e89b2789f06b330f445588316008d6d0d2418f6', class: "nav-badge" }, this.item.badge), hasChildren && !isPopoverMode && (h("span", { key: '4d124c918ab7092a639d1026ec1ca964511da10c', class: "nav-arrow" }, h("ui-icon", { key: '9cc46d50a9a8b76d439def8e56774fc5b9855dfd', name: "chevron-right", library: "lucide", size: "12px" }))), hasChildren && isPopoverMode && (h("span", { key: 'e47643bc3dcf1a1b5b872d1114730f3c03e5bf80', class: "nav-arrow cascading" }, h("ui-icon", { key: '7de0a36cdbc167332010d3191199d6c16d4f66a0', name: "chevron-right", library: "lucide", size: "12px" })))), !hasChildren && this.collapsed && this.isHovering && (h("div", { key: 'b187ecbdadc6d7fb3d1be290ae2f62c5fb9b0458', class: "nav-tooltip" }, this.item.label))));
+            } }, this.item.icon && (h("span", { key: 'd84f8938d5cd2aed187bcf9e1391d02028f11563', class: "nav-icon" }, h("ui-icon", { key: '425c866305be4793ba69e1220227da3676b3fcb0', name: this.item.icon, library: this.item.iconLibrary || this.iconLibrary, size: "1.25rem" }))), (!this.collapsed || this.forcePopover) && h("span", { key: '2bdd778f72907794ca3d2b71aae3b95f44d01a41', class: "nav-label" }, this.item.label), this.item.badge && (!this.collapsed || this.forcePopover) && h("span", { key: '1941e1c4aeeef16d23835d3ebd88effc538fff95', class: "nav-badge" }, this.item.badge), hasChildren && !isPopoverMode && (h("span", { key: 'fa5be41879778fd799630738887a3cc04ebaa522', class: "nav-arrow" }, h("ui-icon", { key: 'ac63423d3f91457328483262c851e3bd94e62c63', name: "chevron-right", library: "lucide", size: "12px" }))), hasChildren && isPopoverMode && (h("span", { key: '9edca162c739fe418329716440525e9c3384273e', class: "nav-arrow cascading" }, h("ui-icon", { key: '1c3d47c485761f9f159512b2dfb549d2f1509b44', name: "chevron-right", library: "lucide", size: "12px" })))), !hasChildren && this.collapsed && this.isHovering && (h("div", { key: '0ad95cb5783779519408eb16c09faac91e79aaf6', class: "nav-tooltip" }, this.item.label))));
     }
     static get is() { return "ui-navigation-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components.js

@@ -22,6 +22,7 @@ export { Dropdown } from './components/dropdown/dropdown';
 export { Button } from './components/button/button';
 export { HorizontalNav } from './components/horizontal-nav/horizontal-nav';
 export { Knob } from './components/knob/knob';
+export { Loader } from './components/loader/loader';
 export { MeterGroup } from './components/meter-group/meter-group';
 export { MyComponent } from './components/my-component/my-component';
 export { WorkspaceManager } from './components/workspace-manager/workspace-manager';

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";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 l(){"undefined"!=typeof customElements&&["ui-avatar-group","ui-avatar","ui-badge","ui-button","ui-icon","ui-input"].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()}}))}export{c as A,l 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,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}

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";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;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 h(){"undefined"!=typeof customElements&&["ui-avatar","ui-avatar","ui-badge","ui-button","ui-icon","ui-input"].forEach((a=>{switch(a){case"ui-avatar":customElements.get(s(a))||customElements.define(s(a),p);break;case"ui-avatar":customElements.get(s(a))||h();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()}}))}export{p as A,h 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,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}