atomicuilibrary 0.1.0 → 0.1.3

package/dist/esm/ui-avatar-group_5.entry.js

@@ -0,0 +1,1688 @@
+import { r as registerInstance, a as getElement, h, H as Host, c as createEvent } from './index-Dqu2zaH1.js';
+import { s as sanitizeHTML } from './security-Dyu3Nplq.js';
+import { F as FocusTrap } from './focus-trap-BSQ8klD4.js';
+import { b as autoUpdate, c as calculateUniversalPlacement } from './dom-DFBTWhGw.js';
+
+const avatarGroupCss = () => `.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)}}`;
+
+const AvatarGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** Array of avatar props for dynamic generation */
+    avatars = [];
+    /** Maximum number of avatars to display before grouping */
+    maxVisible = 5;
+    /** Maximum config: number or object { count, style, popover } */
+    max = null;
+    /** Size of avatars in the group */
+    size = 'm';
+    /** Shape to apply to all avatars in the group */
+    shape = 'circle';
+    /** Layout mode: 'stack' or 'grid' */
+    layout = 'stack';
+    /** Spacing between avatars (in pixels) for grid mode */
+    spacing = 4;
+    /** Overlapping amount (negative value for overlap) */
+    overlap = null;
+    /** Border color for avatars in the group */
+    borderColor = 'white';
+    /** Border width for avatars in the group */
+    borderWidth = 2;
+    /** Enable popover to show all avatars when hovering over excess count */
+    enablePopover = true;
+    /** Enable animated shifting transitions on hover */
+    animated = true;
+    slottedAvatars = [];
+    showPopover = false;
+    isRosterOpen = false;
+    isHovered = false;
+    handleSlotChange() {
+        this.updateSlottedAvatars();
+    }
+    componentWillLoad() {
+        this.updateSlottedAvatars();
+    }
+    componentDidLoad() { }
+    updateSlottedAvatars() {
+        const slotElement = this.el.shadowRoot?.querySelector('slot');
+        const assignedElements = slotElement
+            ? slotElement.assignedElements()
+            : Array.from(this.el.children);
+        this.slottedAvatars = assignedElements.filter(el => el.tagName.toLowerCase() === 'ui-avatar');
+    }
+    getMaxCount() {
+        const maxVal = this.max || this.maxVisible;
+        if (typeof maxVal === 'number')
+            return maxVal;
+        if (maxVal && typeof maxVal === 'object' && 'count' in maxVal)
+            return maxVal.count || Infinity;
+        return Infinity;
+    }
+    getMaxStyle() {
+        if (this.max && typeof this.max === 'object' && 'style' in this.max)
+            return this.max.style;
+        return {};
+    }
+    calculateOverlap() {
+        if (this.layout === 'grid')
+            return this.spacing;
+        if (this.overlap !== null)
+            return -Math.abs(this.overlap);
+        const sizeMap = { xs: 24, s: 32, sm: 32, default: 20, m: 40, lg: 40, l: 48, xl: 64 };
+        let avatarSize = 40;
+        const numericSize = parseFloat(this.size);
+        if (!isNaN(numericSize))
+            avatarSize = numericSize;
+        else if (typeof this.size === 'string' && sizeMap[this.size])
+            avatarSize = sizeMap[this.size];
+        return -(avatarSize * 0.4);
+    }
+    handleMouseEnterGroup = () => { this.isHovered = true; };
+    handleMouseLeaveGroup = () => { this.isHovered = false; this.showPopover = false; };
+    toggleRoster = (ev) => { ev.stopPropagation(); this.isRosterOpen = !this.isRosterOpen; };
+    closeRoster = () => { this.isRosterOpen = false; };
+    renderExcessCount(total, max) {
+        const excess = total - max;
+        if (excess <= 0)
+            return null;
+        const maxStyle = this.getMaxStyle();
+        return (h("div", { class: "excess-avatar-container", onMouseEnter: () => this.showPopover = this.enablePopover, onMouseLeave: () => this.showPopover = false, onClick: this.toggleRoster }, h("div", { class: { 'avatar-extra': true, [`avatar-${this.getSizeAlias()}`]: true, [`shape-${this.shape}`]: true }, style: { ...maxStyle, backgroundColor: maxStyle.backgroundColor || '#f56a00' } }, "+", excess), this.showPopover && this.enablePopover && this.layout === 'stack' && this.renderPopover(max)));
+    }
+    renderPopover(max) {
+        const all = this.getAllAvatarData();
+        const hidden = all.slice(max);
+        return (h("div", { class: "avatar-popover" }, h("div", { class: "popover-content" }, hidden.map((avatar, idx) => (h("div", { class: "popover-item", key: idx }, h("ui-avatar", { size: "xs", shape: this.shape, src: avatar.src, icon: avatar.icon, name: avatar.name, content: avatar.content, bgColor: avatar.bgColor }), h("span", { class: "popover-text" }, avatar.name || avatar.content || 'User')))))));
+    }
+    getAllAvatarData() {
+        if (this.avatars && this.avatars.length > 0)
+            return this.avatars;
+        return this.slottedAvatars.map(el => ({
+            src: el.getAttribute('src'),
+            name: el.getAttribute('name'),
+            content: el.getAttribute('content') || el.textContent?.trim(),
+            tooltipText: el.getAttribute('tooltipText') || el.getAttribute('tooltip-text') || el.getAttribute('name') || el.textContent?.trim(),
+            icon: el.getAttribute('icon'),
+            bgColor: el.getAttribute('bgColor') || el.getAttribute('bg-color'),
+            badge: el.getAttribute('badge'),
+            status: el.getAttribute('status')
+        }));
+    }
+    getSizeAlias() {
+        const sizeMap = { sm: 's', md: 'm', lg: 'l' };
+        return sizeMap[this.size] || this.size;
+    }
+    render() {
+        const all = this.getAllAvatarData();
+        const maxCount = this.getMaxCount();
+        const visible = (this.layout === 'grid') ? all : all.slice(0, maxCount);
+        const overlap = this.calculateOverlap();
+        const groupClasses = {
+            'avatar-group': true,
+            [`layout-${this.layout}`]: true,
+            'avatar-group-animated': this.animated && this.layout === 'stack',
+            'expanded': this.isHovered && this.layout === 'stack'
+        };
+        const groupStyle = {
+            '--avatar-spacing': `${overlap}px`,
+            '--avatar-border-color': this.borderColor,
+            '--avatar-border-width': `${this.borderWidth}px`,
+            '--avatar-size': typeof this.size === 'number' ? `${this.size}px` : this.size.toString(),
+        };
+        return (h(Host, { key: 'd1c53574be9549de6cce9cf8aae33ac8019dd556' }, h("div", { key: '0f64bd06b7f8bd077e98286b9df7cd24e1924a50', class: groupClasses, style: groupStyle, onMouseEnter: this.handleMouseEnterGroup, onMouseLeave: this.handleMouseLeaveGroup }, h("div", { key: '937475ddb42adc924320a2f15f61a76f3ec3c916', class: "avatar-list" }, visible.map((avatar, index) => (h("ui-avatar", { ...avatar, key: index, size: this.size, shape: this.shape, border: `${this.borderWidth}px solid ${this.borderColor}`, class: "group-avatar", style: { zIndex: (this.layout === 'stack' ? (all.length - index) : 1).toString() } }))), this.layout === 'stack' && this.renderExcessCount(all.length, maxCount)), h("div", { key: '52779f80360501b288b88cd896f2dd117b18c0e1', style: { display: 'none' } }, h("slot", { key: 'bd6996c4789091de98a2f01349990412278e51ee' }))), this.isRosterOpen && (h("div", { key: 'fb404a5fd2e4723bb54465a8e6b94d220052721d', class: "avatar-roster-backdrop", onClick: this.closeRoster }, h("div", { key: '81df0d927175829c2fe80e3c39bf81350011620e', class: "avatar-roster-content", onClick: e => e.stopPropagation() }, h("div", { key: '89cea0f5aed19f87eaab53bdab36b0ccf429dc54', class: "roster-header" }, h("h3", { key: '3d113ccb91edb0b47e7bccc311af3f52f09ed5f2' }, "Participants (", all.length, ")"), h("ui-button", { key: 'ad42880fadf89334d69ff0fca445adf7fb1b4494', variant: "ghost", onClick: this.closeRoster, ariaLabel: "Close roster", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "sm" })), h("div", { key: 'd683e744b8a132d600d8681254c39b0569b1564c', class: "roster-list" }, all.map((avatar, idx) => (h("div", { key: idx, class: "roster-item" }, h("ui-avatar", { ...avatar, size: "s", shape: this.shape }), h("div", { class: "roster-info" }, h("span", { class: "roster-name" }, avatar.name || avatar.content || 'Anonymous'), avatar.status && h("span", { class: `roster-status status-${avatar.status}` }, avatar.status)))))))))));
+    }
+};
+AvatarGroup.style = avatarGroupCss();
+
+const popoverCss = () => `@charset "UTF-8";.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}.popover-wrapper{position:relative;display:inline-block}.popover-trigger{display:inline-block;cursor:pointer}.popover-backdrop{position:fixed;inset-block-start:0;inset-inline-start:0;width:100vw;height:100vh;background:rgba(0, 0, 0, 0.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:19999;cursor:default;animation:backdropIn 0.18s ease}@keyframes backdropIn{from{opacity:0}to{opacity:1}}.popover{position:fixed;z-index:21000;background:var(--popover-bg, var(--bg-primary, #ffffff));border:1px solid var(--popover-border, var(--border-default, #e5e7eb));border-radius:var(--popover-radius, 10px);box-shadow:0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);opacity:0;transition:opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);pointer-events:none;max-width:calc(100vw - 32px);word-wrap:break-word;overflow-wrap:break-word;overflow:visible;isolation:isolate;margin:0;bottom:auto;right:auto}.popover-visible{opacity:1;pointer-events:auto}.popover-inner{overflow:hidden;border-radius:inherit;max-height:inherit;background:var(--popover-surface-bg, var(--popover-bg, var(--bg-primary, #ffffff)))}.popover-header{display:flex;align-items:center;justify-content:space-between;margin:0;padding-block:12px;padding-inline:16px;border-block-end:1px solid var(--popover-border, var(--border-default, #e5e7eb));background:var(--popover-header-bg, var(--popover-surface-bg, var(--popover-bg, var(--bg-primary, #ffffff))))}.popover-title{font-weight:700;font-size:14px;color:var(--popover-text-primary, var(--text-primary, #1f2937));margin:0;letter-spacing:-0.01em}.popover-close{background:transparent;border:none;color:var(--popover-text-secondary, var(--text-muted, #9ca3af));cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background 0.15s, color 0.15s;margin-inline-start:8px}.popover-close:hover{background:var(--popover-border, var(--border-default, #e5e7eb));color:var(--popover-text-primary, var(--text-primary, #1f2937))}.popover-body{padding-block:12px;padding-inline:16px;font-size:14px;color:var(--popover-text-secondary, var(--text-muted, #6b7280));line-height:1.6;overflow-y:auto;background:var(--popover-body-bg, var(--popover-surface-bg, var(--popover-bg, var(--bg-primary, #ffffff))));scrollbar-width:thin;scrollbar-color:rgba(0, 0, 0, 0.15) transparent}.popover-body::-webkit-scrollbar{width:4px}.popover-body::-webkit-scrollbar-track{background:transparent}.popover-body::-webkit-scrollbar-thumb{background:rgba(0, 0, 0, 0.15);border-radius:2px}::slotted([slot=footer]){display:block;padding-block:10px;padding-inline:16px;border-block-start:1px solid var(--popover-border, var(--border-default, #e5e7eb));background:var(--popover-footer-bg, rgba(0, 0, 0, 0.02))}.popover-dark{--popover-bg:var(--ghost-popover-bg, #0f172a);--popover-border:var(--ghost-popover-border, rgba(148, 163, 184, 0.28));--popover-text-primary:var(--ghost-popover-text-primary, #f8fafc);--popover-text-secondary:var(--ghost-popover-text-secondary, #cbd5e1);--popover-footer-bg:var(--ghost-popover-footer-bg, rgba(255,255,255,0.04));--popover-surface-bg:var(--ghost-popover-surface-bg, var(--ghost-popover-bg, #0f172a));--popover-header-bg:var(--ghost-popover-header-bg, var(--ghost-popover-surface-bg, var(--ghost-popover-bg, #0f172a)));--popover-body-bg:var(--ghost-popover-body-bg, var(--ghost-popover-surface-bg, var(--ghost-popover-bg, #0f172a)));color-scheme:dark;background:var(--popover-bg);box-shadow:0 18px 40px rgba(2, 6, 23, 0.42), 0 10px 18px rgba(15, 23, 42, 0.26);isolation:isolate}.popover-dark .popover-inner,.popover-dark .popover-header,.popover-dark .popover-body{background:var(--popover-surface-bg, var(--popover-bg));opacity:1;backdrop-filter:none;-webkit-backdrop-filter:none}.popover-dark .popover-arrow{--popover-bg:#0f172a;--popover-border:rgba(148, 163, 184, 0.28)}.popover-light{--popover-surface-bg:var(--ghost-popover-surface-bg, var(--popover-bg, var(--bg-primary, #ffffff)));--popover-header-bg:var(--ghost-popover-header-bg, var(--popover-surface-bg));--popover-body-bg:var(--ghost-popover-body-bg, var(--popover-surface-bg))}.popover-success{--popover-bg:var(--bg-primary, #f0fdf4);--popover-border:var(--color-success, #bbf7d0);--popover-text-primary:var(--color-success, #14532d);--popover-text-secondary:var(--color-success, #166534);--popover-footer-bg:rgba(var(--color-success-rgb, 16, 185, 129), 0.06)}.popover-success .popover-header{border-block-end-color:var(--color-success, #bbf7d0)}.popover-success .popover-title::before{content:"✓  ";color:var(--color-success, #16a34a)}.popover-warning{--popover-bg:var(--bg-primary, #fffbeb);--popover-border:var(--color-primary, #fde68a);--popover-text-primary:var(--color-danger, #78350f);--popover-text-secondary:var(--color-danger, #92400e);--popover-footer-bg:rgba(var(--color-warning-rgb, 245, 158, 11), 0.06)}.popover-warning .popover-header{border-block-end-color:var(--color-primary, #fde68a)}.popover-warning .popover-title::before{content:"⚠  ";color:var(--color-warning-hover, #d97706)}.popover-error{--popover-bg:var(--bg-primary, #fef2f2);--popover-border:var(--color-danger, #fecaca);--popover-text-primary:var(--color-danger, #7f1d1d);--popover-text-secondary:var(--color-danger, #991b1b);--popover-footer-bg:rgba(var(--color-danger-rgb, 239, 68, 68), 0.06)}.popover-error .popover-header{border-block-end-color:var(--color-danger, #fecaca)}.popover-error .popover-title::before{content:"✕  ";color:var(--color-danger-hover, #dc2626)}.popover-info{--popover-bg:var(--bg-primary, #eff6ff);--popover-border:var(--color-primary, #bfdbfe);--popover-text-primary:var(--color-primary, #1e3a8a);--popover-text-secondary:var(--color-primary, #1e40af);--popover-footer-bg:rgba(var(--color-primary-rgb, 59, 130, 246), 0.06)}.popover-info .popover-header{border-block-end-color:var(--color-primary, #bfdbfe)}.popover-info .popover-title::before{content:"ℹ  ";color:var(--color-primary-hover, #2563eb)}.popover-arrow{position:absolute;width:var(--ui-popover-arrow-size, 10px);height:var(--ui-popover-arrow-size, 10px);background:var(--popover-bg, var(--bg-primary, #ffffff));border:1px solid var(--popover-border, var(--border-default, #e5e7eb));transform:rotate(45deg);pointer-events:none;box-sizing:border-box;z-index:1;}.popover-top .popover-arrow,.popover-top-start .popover-arrow,.popover-top-end .popover-arrow{border-top:none;border-left:none;}.popover-bottom .popover-arrow,.popover-bottom-start .popover-arrow,.popover-bottom-end .popover-arrow{border-right:none;border-bottom:none;}.popover-left .popover-arrow,.popover-left-start .popover-arrow,.popover-left-end .popover-arrow{border-left:none;border-bottom:none;}.popover-right .popover-arrow,.popover-right-start .popover-arrow,.popover-right-end .popover-arrow{border-top:none;border-right:none;}.popover-anim-scale{transform:scale(0.92);transform-origin:center top}.popover-anim-scale.popover-bottom,.popover-anim-scale.popover-bottom-start,.popover-anim-scale.popover-bottom-end{transform-origin:center bottom}.popover-anim-scale.popover-left,.popover-anim-scale.popover-left-start,.popover-anim-scale.popover-left-end{transform-origin:right center}.popover-anim-scale.popover-right,.popover-anim-scale.popover-right-start,.popover-anim-scale.popover-right-end{transform-origin:left center}.popover-anim-scale.popover-visible{transform:scale(1)}.popover-anim-slide.popover-top,.popover-anim-slide.popover-top-start,.popover-anim-slide.popover-top-end{transform:translateY(8px)}.popover-anim-slide.popover-bottom,.popover-anim-slide.popover-bottom-start,.popover-anim-slide.popover-bottom-end{transform:translateY(-8px)}.popover-anim-slide.popover-left,.popover-anim-slide.popover-left-start,.popover-anim-slide.popover-left-end{transform:translateX(8px)}.popover-anim-slide.popover-right,.popover-anim-slide.popover-right-start,.popover-anim-slide.popover-right-end{transform:translateX(-8px)}.popover-anim-slide.popover-visible{transform:translate(0, 0)}.popover-skeleton .popover-body{display:flex;flex-direction:column;gap:10px;padding:16px}.popover-skeleton .popover-body::before,.popover-skeleton .popover-body::after{content:"";display:block;height:12px;border-radius:6px;background:linear-gradient(90deg, var(--bg-primary, #e5e7eb) 25%, var(--bg-secondary, #f3f4f6) 50%, var(--bg-primary, #e5e7eb) 75%);background-size:200% 100%;animation:skeletonShimmer 1.4s infinite}.popover-skeleton .popover-body::after{width:65%}@keyframes skeletonShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}@media (prefers-reduced-motion: reduce){.popover{transition:none;transform:none !important;opacity:1 !important;display:none}.popover-visible{display:block}}`;
+
+const Popover = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.uiBeforeOpen = createEvent(this, "uiBeforeOpen");
+        this.uiOpen = createEvent(this, "uiOpen");
+        this.uiBeforeClose = createEvent(this, "uiBeforeClose");
+        this.uiClose = createEvent(this, "uiClose");
+        this.uiToggle = createEvent(this, "uiToggle");
+    }
+    get element() { return getElement(this); }
+    /** Popover heading text */
+    heading = '';
+    /**
+     * The target element to anchor the popover to.
+     * Can be a CSS selector (string) or a direct HTMLElement reference.
+     * If not provided, it will use the element in the 'trigger' slot or its first child.
+     */
+    target;
+    /** Popover content (HTML string). Use this for simple text or if you can't use the 'content' slot. */
+    content = '';
+    /** Controlled open state. */
+    open = false;
+    /** Disabled state. If true, popover will not show. */
+    disabled = false;
+    /**
+     * Trigger type: 'click' | 'hover' | 'focus' | 'manual'
+     * 'manual' = only show/hide via method calls
+     */
+    trigger = 'click';
+    /** Placement of popover */
+    placement = 'top';
+    /** Show arrow */
+    showArrow = true;
+    /** Popover width */
+    width = '280px';
+    /** Animation type */
+    animation = 'scale';
+    /** Show close button */
+    showCloseButton = false;
+    /** Show backdrop */
+    backdrop = false;
+    /**
+     * Visual variant.
+     * 'light' | 'dark' | 'success' | 'warning' | 'error' | 'info'
+     */
+    variant = 'light';
+    /**
+     * ARIA role for the popover panel.
+     * Use 'tooltip' for non-interactive hover hints, 'menu' for menus, 'dialog' for rich content.
+     */
+    popoverRole = 'dialog';
+    /**
+     * Delay in ms before showing on hover (0 = immediate)
+     */
+    showDelay = 0;
+    /**
+     * Delay in ms before hiding on hover
+     */
+    hideDelay = 200;
+    /**
+     * Close popover when window is scrolled
+     */
+    closeOnScroll = false;
+    /**
+     * Allow Escape key to close the popover (default: true)
+     */
+    closeOnEsc = true;
+    /**
+     * Maximum height of the popover body. If content exceeds this, it scrolls.
+     */
+    maxHeight = 'none';
+    /**
+     * When hover trigger is used, allow cursor to move into the popover without closing it.
+     * Set to false for pure tooltip behaviour.
+     */
+    interactive = true;
+    /** Loading state */
+    loading = false;
+    /** Skeleton state */
+    skeleton = false;
+    /** Distance between popover and trigger (in pixels) */
+    offset = 12;
+    /** Size of the arrow in pixels */
+    arrowSize = 10;
+    /** Close popover when clicking outside */
+    closeOnOutsideClick = true;
+    /** Close popover when focus leaves it */
+    closeOnBlur = true;
+    /** Match the width of the trigger element */
+    matchTriggerWidth = false;
+    /** Enable auto-flipping when hitting screen boundaries */
+    flip = true;
+    /** Enable auto-shifting (clamping) to stay inside viewport */
+    shift = true;
+    /** Boundary element for collision detection */
+    boundary = 'viewport';
+    /** Padding from boundary edges */
+    padding = 24;
+    /** Fallback placements for flipping (e.g. "top, bottom") */
+    fallbackPlacements;
+    /** Automatically choose the best placement based on available space */
+    autoPlacement = false;
+    /** Positioning strategy */
+    strategy = 'fixed';
+    /** Optional z-index for the popover panel */
+    zIndex = 21000;
+    /** Emitted before popover shows. Call event.preventDefault() to cancel. */
+    uiBeforeOpen;
+    /** Emitted when popover shows */
+    uiOpen;
+    /** Emitted before popover hides. Call event.preventDefault() to cancel. */
+    uiBeforeClose;
+    /** Emitted when popover hides */
+    uiClose;
+    /** Emitted when toggled */
+    uiToggle;
+    currentPlacement = 'top';
+    popoverStyles = {};
+    arrowStyles = {};
+    targetElement;
+    popoverContent;
+    arrowElement;
+    hideTimeout;
+    showTimeout;
+    focusTrap;
+    cleanupAutoUpdate;
+    resizeObserver;
+    latestSizeData = { width: '', maxWidth: '', maxHeight: '' };
+    updateRetries = 0;
+    /** Guard flag: true for the brief window after a trigger click, prevents outside-click from firing on the same event */
+    _justOpened = false;
+    componentWillLoad() {
+        this.currentPlacement = this.placement;
+    }
+    componentDidLoad() {
+        this.setupTrigger();
+        this.popoverContent = this.element.shadowRoot?.querySelector('.popover');
+        this.arrowElement = this.element.shadowRoot?.querySelector('.popover-arrow');
+        if (this.popoverContent) {
+            this.resizeObserver = new ResizeObserver(() => {
+                if (this.open)
+                    this.updatePosition();
+            });
+            this.resizeObserver.observe(this.popoverContent);
+        }
+        window.addEventListener('keydown', this.handleGlobalKeyDown);
+    }
+    componentDidUpdate() {
+        if (this.open && !this.cleanupAutoUpdate) {
+            this.startAutoUpdate();
+        }
+    }
+    disconnectedCallback() {
+        this.cleanup();
+        if (this.cleanupAutoUpdate) {
+            this.cleanupAutoUpdate();
+        }
+        window.removeEventListener('keydown', this.handleGlobalKeyDown);
+        if (this.focusTrap) {
+            this.focusTrap.deactivate();
+        }
+    }
+    visibilityChanged(newValue) {
+        if (newValue) {
+            if (this.disabled) {
+                this.open = false;
+                return;
+            }
+            this.handleOpen();
+        }
+        else {
+            this.handleClose();
+        }
+    }
+    handleTriggerConfigChange() {
+        this.cleanup();
+        this.setupTrigger();
+    }
+    handleOpen() {
+        if (!this.targetElement) {
+            this.setupTrigger();
+        }
+        this.popoverStyles = {
+            position: this.strategy,
+            left: '0px',
+            top: '0px',
+            visibility: 'hidden',
+            opacity: '0'
+        };
+        this.popoverContent = this.element.shadowRoot?.querySelector('.popover');
+        this.arrowElement = this.element.shadowRoot?.querySelector('.popover-arrow');
+        if (this.popoverContent && !this.resizeObserver) {
+            this.resizeObserver = new ResizeObserver(() => {
+                if (this.open)
+                    this.updatePosition();
+            });
+            this.resizeObserver.observe(this.popoverContent);
+        }
+        requestAnimationFrame(() => {
+            this.cleanup();
+            this.targetElement = undefined;
+            this.setupTrigger();
+            this.startAutoUpdate();
+            this.updateAriaAttributes(true);
+            // Add outside click listener only when open.
+            // Use a flag + slightly longer timeout to ensure the click that *opened*
+            // the popover cannot immediately trigger an outside-click close.
+            if (this.closeOnOutsideClick) {
+                this._justOpened = true;
+                setTimeout(() => {
+                    this._justOpened = false;
+                    document.addEventListener('click', this.handleOutsideClick);
+                }, 50);
+            }
+            if (this.backdrop || this.showCloseButton || this.trigger === 'click') {
+                requestAnimationFrame(() => {
+                    this.initFocusTrap();
+                    if (this.focusTrap)
+                        this.focusTrap.activate();
+                });
+            }
+            this.uiOpen.emit();
+        });
+    }
+    handleClose() {
+        if (this.cleanupAutoUpdate) {
+            this.cleanupAutoUpdate();
+            this.cleanupAutoUpdate = undefined;
+        }
+        this.popoverStyles = {
+            position: this.strategy,
+            left: '0px',
+            top: '0px',
+            visibility: 'hidden',
+            opacity: '0'
+        };
+        document.removeEventListener('click', this.handleOutsideClick);
+        if (this.focusTrap) {
+            this.focusTrap.deactivate();
+        }
+        this.updateAriaAttributes(false);
+        this.uiClose.emit();
+    }
+    updateAriaAttributes(expanded) {
+        if (this.targetElement) {
+            this.targetElement.setAttribute('aria-expanded', expanded.toString());
+            this.targetElement.setAttribute('aria-haspopup', this.popoverRole === 'menu' ? 'menu' : 'true');
+        }
+    }
+    initFocusTrap() {
+        if (!this.popoverContent)
+            return;
+        if (!this.focusTrap) {
+            this.focusTrap = new FocusTrap(this.popoverContent, {
+                initialFocus: this.popoverContent,
+                returnFocus: this.targetElement,
+                escapeDeactivates: true,
+                clickOutsideDeactivates: !this.backdrop
+            });
+        }
+    }
+    getLayoutAnchor() {
+        let anchor = this.targetElement;
+        while (anchor) {
+            const style = window.getComputedStyle(anchor);
+            if (style && style.display === 'contents') {
+                const shadowChild = Array.from(anchor.shadowRoot?.children || []).find((c) => c.tagName !== 'STYLE' && c.tagName !== 'SCRIPT' && c.tagName !== 'SLOT');
+                if (shadowChild) {
+                    anchor = shadowChild;
+                    continue;
+                }
+            }
+            break;
+        }
+        return anchor || this.targetElement || this.element;
+    }
+    setupTrigger() {
+        // 1. Check for external target via selector or reference
+        if (this.target) {
+            if (typeof this.target === 'string') {
+                this.targetElement = document.querySelector(this.target);
+            }
+            else {
+                this.targetElement = this.target;
+            }
+        }
+        // 2. Fallback to slots if no external target
+        if (!this.targetElement) {
+            const triggerSlot = this.element.shadowRoot?.querySelector('slot[name="trigger"]');
+            const defaultSlot = this.element.shadowRoot?.querySelector('slot:not([name])');
+            const getAssignedElement = (slot) => {
+                const elements = slot?.assignedElements();
+                return elements?.length > 0 ? elements[0] : null;
+            };
+            this.targetElement = getAssignedElement(triggerSlot) || getAssignedElement(defaultSlot);
+        }
+        // 3. Last fallback: the component itself
+        if (!this.targetElement) {
+            this.targetElement = this.element;
+        }
+        if (this.targetElement && this.trigger !== 'manual') {
+            // Accessibility augmentation for non-buttons
+            if (!['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(this.targetElement.tagName)) {
+                if (!this.targetElement.hasAttribute('role'))
+                    this.targetElement.setAttribute('role', 'button');
+                if (!this.targetElement.hasAttribute('tabindex'))
+                    this.targetElement.setAttribute('tabindex', '0');
+            }
+            if (this.trigger === 'click') {
+                this.targetElement.addEventListener('click', this.handleTriggerClick);
+                this.targetElement.addEventListener('keydown', this.handleTargetKeyDown);
+            }
+            else if (this.trigger === 'hover') {
+                this.targetElement.addEventListener('mouseenter', this.handleMouseEnter);
+                this.targetElement.addEventListener('mouseleave', this.handleMouseLeave);
+                this.targetElement.addEventListener('focusin', this.handleFocusIn);
+                this.targetElement.addEventListener('focusout', this.handleFocusOut);
+            }
+            else if (this.trigger === 'focus') {
+                this.targetElement.addEventListener('focusin', this.handleFocusIn);
+                this.targetElement.addEventListener('focusout', this.handleFocusOut);
+            }
+            this.updateAriaAttributes(this.open);
+        }
+    }
+    handleTargetKeyDown = (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            this.toggle();
+        }
+    };
+    cleanup() {
+        if (!this.targetElement)
+            return;
+        this.targetElement.removeEventListener('click', this.handleTriggerClick);
+        this.targetElement.removeEventListener('keydown', this.handleTargetKeyDown);
+        this.targetElement.removeEventListener('mouseenter', this.handleMouseEnter);
+        this.targetElement.removeEventListener('mouseleave', this.handleMouseLeave);
+        this.targetElement.removeEventListener('focusin', this.handleFocusIn);
+        this.targetElement.removeEventListener('focusout', this.handleFocusOut);
+        document.removeEventListener('click', this.handleOutsideClick);
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = undefined;
+        }
+    }
+    handleTriggerClick = (e) => {
+        e.stopPropagation();
+        if (this.trigger === 'click') {
+            this.toggle();
+        }
+    };
+    handleFocusIn = () => {
+        this.show();
+    };
+    handleFocusOut = () => {
+        this.hide();
+    };
+    handleOutsideClick = (event) => {
+        if (this._justOpened && event.isTrusted)
+            return;
+        // Use composedPath() to correctly detect clicks inside Shadow DOM subtrees
+        // (e.g. a ui-button inside a slot="trigger" wrapper, or inside the popover panel)
+        const path = event.composedPath ? event.composedPath() : [];
+        // Check if click was inside the host element (includes trigger slot children)
+        if (path.includes(this.element))
+            return;
+        // Check if click was inside the floating panel
+        if (this.popoverContent && path.includes(this.popoverContent))
+            return;
+        // Legacy fallback for browsers without composedPath
+        if (this.targetElement?.contains(event.target))
+            return;
+        if (this.popoverContent?.contains(event.target))
+            return;
+        if (this.open)
+            this.hide();
+    };
+    handleMouseEnter = () => {
+        if (this.disabled)
+            return;
+        clearTimeout(this.hideTimeout);
+        if (this.showDelay > 0) {
+            this.showTimeout = setTimeout(() => this.show(), this.showDelay);
+        }
+        else {
+            this.show();
+        }
+    };
+    handleMouseLeave = () => {
+        clearTimeout(this.showTimeout);
+        this.hideTimeout = setTimeout(() => this.hide(), this.hideDelay);
+    };
+    handlePopoverMouseEnter = () => {
+        if (this.trigger === 'hover' && this.interactive) {
+            clearTimeout(this.hideTimeout);
+            clearTimeout(this.showTimeout);
+        }
+    };
+    handlePopoverMouseLeave = () => {
+        if (this.trigger === 'hover' && this.interactive) {
+            this.handleMouseLeave();
+        }
+    };
+    handleGlobalKeyDown = (e) => {
+        if (this.open && this.closeOnEsc && e.key === 'Escape') {
+            e.stopPropagation();
+            this.hide();
+        }
+    };
+    startAutoUpdate() {
+        if (this.cleanupAutoUpdate)
+            this.cleanupAutoUpdate();
+        // The panel is conditionally rendered ({this.open && ...}).
+        this.popoverContent = this.element.shadowRoot?.querySelector('.popover');
+        if (this.showArrow) {
+            this.arrowElement = this.element.shadowRoot?.querySelector('.popover-arrow');
+        }
+        if (!this.targetElement || !this.popoverContent)
+            return;
+        // Dynamically retrieve the layout anchor to avoid race conditions with display:contents styles
+        const anchorEl = this.getLayoutAnchor();
+        this.cleanupAutoUpdate = autoUpdate(anchorEl, this.popoverContent, () => this.updatePosition(), { animationFrame: true });
+    }
+    async updatePosition() {
+        // Always re-query the panel and arrow in case they were null during initial mount
+        if (!this.popoverContent) {
+            this.popoverContent = this.element.shadowRoot?.querySelector('.popover');
+        }
+        if (this.showArrow && !this.arrowElement) {
+            this.arrowElement = this.element.shadowRoot?.querySelector('.popover-arrow');
+        }
+        if (!this.open || !this.popoverContent || !this.targetElement) {
+            this.updateRetries = 0;
+            return;
+        }
+        // Double-check dimensions - if 0, we might need a retry (like Tooltip component does)
+        if (this.popoverContent.offsetWidth === 0 && this.updateRetries < 5) {
+            this.updateRetries++;
+            requestAnimationFrame(() => this.updatePosition());
+            return;
+        }
+        this.updateRetries = 0;
+        // Dynamically retrieve the layout anchor to avoid race conditions with display:contents styles
+        const anchorEl = this.getLayoutAnchor();
+        const { left, top, placement, availableHeight, availableWidth, arrowX, arrowY } = calculateUniversalPlacement(anchorEl, {
+            menuWidth: this.popoverContent.offsetWidth,
+            menuHeight: this.popoverContent.offsetHeight,
+            gap: this.offset,
+            placement: this.autoPlacement ? 'auto' : this.placement.split('-')[0],
+            align: this.placement.includes('start') ? 'start' : (this.placement.includes('end') ? 'end' : 'center'),
+            padding: this.padding,
+            flip: this.flip,
+            shift: this.shift
+        });
+        this.currentPlacement = placement;
+        // Constrain size based on available space
+        this.latestSizeData = {
+            width: this.width,
+            maxWidth: `${Math.min(window.innerWidth - (this.padding * 2), availableWidth)}px`,
+            maxHeight: this.maxHeight !== 'none' ? this.maxHeight : `${availableHeight}px`,
+        };
+        const sizeData = this.latestSizeData;
+        this.popoverStyles = {
+            position: this.strategy,
+            left: `${left}px`,
+            top: `${top}px`,
+            width: this.matchTriggerWidth ? `${anchorEl.offsetWidth}px` : (sizeData.width || this.width),
+            minWidth: '160px',
+            maxWidth: sizeData.maxWidth,
+            maxHeight: sizeData.maxHeight,
+            visibility: 'visible',
+            opacity: '1'
+        };
+        if (this.showArrow && this.arrowElement) {
+            const side = placement;
+            const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[side];
+            const halfSize = Math.round(this.arrowSize / 2);
+            this.arrowStyles = {
+                top: '',
+                right: '',
+                bottom: '',
+                left: '',
+                ...(side === 'top' || side === 'bottom' ?
+                    { left: `${arrowX}px`, transform: 'translateX(-50%) rotate(45deg)' } :
+                    { top: `${arrowY}px`, transform: 'translateY(-50%) rotate(45deg)' }),
+                [staticSide]: `-${halfSize}px`,
+            };
+        }
+    }
+    async reposition() {
+        return this.updatePosition();
+    }
+    async computePlacement() {
+        return this.currentPlacement;
+    }
+    async show() {
+        if (this.disabled)
+            return;
+        if (this.uiBeforeOpen) {
+            const event = this.uiBeforeOpen.emit();
+            if (event && event.defaultPrevented)
+                return;
+        }
+        this.open = true;
+    }
+    async hide() {
+        if (this.uiBeforeClose) {
+            const event = this.uiBeforeClose.emit();
+            if (event && event.defaultPrevented)
+                return;
+        }
+        this.open = false;
+    }
+    async toggle() {
+        if (this.disabled)
+            return;
+        if (this.open) {
+            await this.hide();
+        }
+        else {
+            await this.show();
+        }
+        if (this.uiToggle)
+            this.uiToggle.emit({ open: this.open });
+    }
+    getPopoverStyle() {
+        return {
+            '--ui-popover-arrow-size': `${this.arrowSize}px`,
+            zIndex: this.zIndex ? `${this.zIndex}` : undefined,
+        };
+    }
+    render() {
+        const popoverClasses = {
+            'popover': true,
+            'popover-visible': this.open,
+            'popover-loading': this.loading,
+            'popover-skeleton': this.skeleton,
+            [`popover-${this.currentPlacement}`]: true,
+            [`popover-${this.variant}`]: true,
+            [`popover-anim-${this.animation}`]: true,
+        };
+        const finalPopoverStyle = {
+            ...this.getPopoverStyle(),
+            ...this.popoverStyles
+        };
+        return (h("div", { key: '8c9a3985b10f389cb2fa730830e3872957358435', class: "popover-wrapper" }, h("div", { key: '6b0c31365ecd79e280001c112cd33978d92393aa', class: "popover-trigger" }, h("slot", { key: '0fb48c0444ccd3ce6e7b1a68d12e6fd4b546c654', name: "trigger" }), h("slot", { key: 'e8f8f885ebf70a16b6554b9471ab234bf426d478' })), this.backdrop && this.open && (h("div", { key: '3412a54d36ddceed9ca90bf587db0d7c4c53240a', class: "popover-backdrop", onClick: () => this.hide() })), this.open && (h("div", { key: '8cbc42fedae9130dc5d453366b95ff2b9865a9a2', class: popoverClasses, style: finalPopoverStyle, onMouseEnter: () => this.handlePopoverMouseEnter(), onMouseLeave: () => this.handlePopoverMouseLeave(), role: this.popoverRole, "aria-modal": this.backdrop ? 'true' : 'false', "aria-label": this.heading || undefined }, this.showArrow && h("div", { key: '39c3c7db5436a07e8f39e594e8517e08392f8f50', class: "popover-arrow", style: this.arrowStyles }), h("div", { key: 'caaedac530b821964d6301309b984aefcae798db', class: "popover-inner" }, (this.heading || this.showCloseButton) && (h("div", { key: 'cb939a32a38e56e72c14dcebfada947c19f22ea9', class: "popover-header" }, this.heading && h("div", { key: '55080c2e755a2f4bc9cd45110b2262f57471fde7', class: "popover-title" }, this.heading), this.showCloseButton && (h("ui-button", { key: 'bd92a337a7029d19fa3b4b1e3aa211f12ca38f71', variant: "ghost", size: "xxs", iconOnly: true, class: "popover-close", onClick: () => this.hide(), ariaLabel: "Close", icon: "x", iconLibrary: "lucide", iconSize: "14px" })))), h("div", { key: 'dedbb7ecd61056c89d5c006a442ff83d6de76390', class: "popover-body", style: { maxHeight: this.maxHeight, overflowY: this.maxHeight !== 'none' ? 'auto' : undefined } }, h("slot", { key: 'b838ffbe1fdd208cbe2ca2c8f2e85f290ebfb946', name: "content" }), this.content && h("div", { key: 'e179798f83b9be0ddd68f5d80c1c8df7ff893075', innerHTML: sanitizeHTML(this.content) })), h("slot", { key: '8f235de9f318e3ed6aa386522052bfb6a7c45da3', name: "footer" }))))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "visibilityChanged": 0
+            }],
+        "target": [{
+                "handleTriggerConfigChange": 0
+            }],
+        "trigger": [{
+                "handleTriggerConfigChange": 0
+            }]
+    }; }
+};
+Popover.style = popoverCss();
+
+const skeletonLoaderCss = () => `@charset "UTF-8";.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{--skeleton-bg:#9ca6b3;--skeleton-wave-bg:#ffffff;--skeleton-bg:var(--skeleton-loader-bg, color-mix(in srgb, var(--bg-tertiary, #e2e8f0) 58%, #475569 42%));--skeleton-wave-bg:var(--skeleton-loader-wave-bg, #ffffff);--skeleton-border-radius:var(--skeleton-loader-border-radius, 4px);--skeleton-progress-bar-bg:var(--skeleton-loader-progress-bar-bg, var(--bg-primary, #ffffff));--skeleton-focus-ring:var(--skeleton-loader-focus-ring, var(--color-primary, #10b981));--skeleton-focus-shadow:var(--skeleton-loader-focus-shadow, #dbeafe)}:host-context([data-theme=dark]),:host-context([data-theme=blue]),:host-context([data-theme=violet]),:host-context([data-theme=green]),:host-context([data-theme=pink]),:host-context(.theme-dark),:host-context(.theme-blue),:host-context(.theme-violet),:host-context(.theme-green),:host-context(.theme-pink),:host(.theme-dark),:host([dark=dark]),:host-context(.skeleton-dark),.skeleton-dark{--skeleton-bg:#111827;--skeleton-wave-bg:#374151;--skeleton-bg:var(--skeleton-loader-bg, color-mix(in srgb, var(--bg-secondary, #1e293b) 80%, #000000 20%));--skeleton-wave-bg:var(--skeleton-loader-wave-bg, color-mix(in srgb, var(--bg-tertiary, #334155) 75%, #ffffff 25%))}.skeleton-color-primary{--skeleton-bg:color-mix(in srgb, var(--color-primary, #10b981) 25%, transparent);--skeleton-wave-bg:color-mix(in srgb, var(--color-primary, #10b981) 50%, transparent)}.skeleton-color-secondary{--skeleton-bg:color-mix(in srgb, var(--color-secondary, #64748b) 25%, transparent);--skeleton-wave-bg:color-mix(in srgb, var(--color-secondary, #64748b) 50%, transparent)}.skeleton-color-success{--skeleton-bg:color-mix(in srgb, var(--color-success, #22c55e) 25%, transparent);--skeleton-wave-bg:color-mix(in srgb, var(--color-success, #22c55e) 50%, transparent)}.skeleton-color-danger{--skeleton-bg:color-mix(in srgb, var(--color-danger, #ef4444) 25%, transparent);--skeleton-wave-bg:color-mix(in srgb, var(--color-danger, #ef4444) 50%, transparent)}.skeleton-color-warning{--skeleton-bg:color-mix(in srgb, var(--color-warning, #f59e0b) 25%, transparent);--skeleton-wave-bg:color-mix(in srgb, var(--color-warning, #f59e0b) 50%, transparent)}.skeleton-color-info{--skeleton-bg:color-mix(in srgb, var(--color-info, #38bdf8) 25%, transparent);--skeleton-wave-bg:color-mix(in srgb, var(--color-info, #38bdf8) 50%, transparent)}.skeleton-replication-container ::slotted([slot=custom]:focus-visible){outline:2px solid var(--color-primary, #10b981);outline-offset:2px;border-radius:4px;box-shadow:0 0 0 2px var(--border-subtle, #dbeafe);transition:outline 0.2s, box-shadow 0.2s}.skeleton-rtl .skeleton{direction:rtl;--skeleton-wave-angle:-90deg;animation-direction:reverse}.skeleton-progress-bar{transition:width 0.3s cubic-bezier(0.4, 0, 0.2, 1);background:var(--skeleton-wave-bg, var(--bg-primary, #ffffff));height:4px;border-radius:2px;margin-top:4px}.skeleton-replication-container slot[name=custom]{display:block;margin-top:8px}:host{display:block}.skeleton{background:var(--skeleton-bg, #f0f0f0);position:relative;overflow:hidden}.skeleton-animated.skeleton-pulse{animation:skeleton-pulse var(--skeleton-wave-speed, 1.5s) cubic-bezier(0.4, 0, 0.2, 1) infinite}.skeleton-animated.skeleton-wave{background:linear-gradient(var(--skeleton-wave-angle, 110deg), var(--skeleton-bg) 25%, var(--skeleton-wave-bg) 50%, var(--skeleton-bg) 75%);background-size:200% 100%;animation:skeleton-wave var(--skeleton-wave-speed, 1.4s) linear infinite}.skeleton-animated.skeleton-shimmer{background:linear-gradient(110deg, var(--skeleton-bg) 25%, var(--skeleton-wave-bg) 50%, var(--skeleton-bg) 75%);background-size:200% 100%;animation:skeleton-shimmer var(--skeleton-wave-speed, 1.3s) linear infinite}.skeleton-animated.skeleton-sheen::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;transform:translateX(-100%);background:linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);animation:skeleton-sheen var(--skeleton-wave-speed, 1.4s) cubic-bezier(0.25, 1, 0.5, 1) infinite}.skeleton-dark .skeleton-animated.skeleton-sheen::after{background:linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100%)}.skeleton-animated.skeleton-glow{animation:skeleton-glow var(--skeleton-wave-speed, 1.8s) ease-in-out infinite}.skeleton-animated.skeleton-flicker{animation:skeleton-flicker 0.25s ease-in-out infinite}.skeleton-animated.skeleton-neon-sweep{position:relative;background:var(--skeleton-bg, #e2e8f0)}.skeleton-animated.skeleton-neon-sweep::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg, transparent 0%, rgba(var(--color-primary-rgb, 16, 185, 129), 0) 20%, rgba(var(--color-primary-rgb, 16, 185, 129), 0.9) 50%, rgba(var(--color-primary-rgb, 16, 185, 129), 0) 80%, transparent 100%);transform:translateX(-150%) skewX(-20deg);animation:skeleton-neon-sweep var(--skeleton-wave-speed, 1.5s) cubic-bezier(0.25, 1, 0.5, 1) infinite;box-shadow:0 0 20px rgba(var(--color-primary-rgb, 16, 185, 129), 0.45)}.skeleton-animated.skeleton-liquify{background:linear-gradient(135deg, var(--skeleton-bg) 0%, var(--skeleton-bg) 35%, color-mix(in srgb, var(--skeleton-wave-bg) 75%, var(--skeleton-bg)) 47%, var(--skeleton-wave-bg) 50%, color-mix(in srgb, var(--skeleton-wave-bg) 75%, var(--skeleton-bg)) 53%, var(--skeleton-bg) 65%, var(--skeleton-bg) 100%);background-size:250% 100%;animation:skeleton-liquify var(--skeleton-wave-speed, 2s) cubic-bezier(0.33, 1, 0.68, 1) infinite}.skeleton-animated.skeleton-aurora{background:linear-gradient(45deg, var(--skeleton-bg) 0%, color-mix(in srgb, #3b82f6 28%, var(--skeleton-bg)) 30%, color-mix(in srgb, #a855f7 28%, var(--skeleton-bg)) 50%, color-mix(in srgb, #10b981 25%, var(--skeleton-bg)) 70%, var(--skeleton-bg) 100%);background-size:300% 300%;animation:skeleton-aurora 4s ease infinite}.skeleton-dark .skeleton-animated.skeleton-aurora{background:linear-gradient(45deg, var(--skeleton-bg) 0%, color-mix(in srgb, #3b82f6 24%, var(--skeleton-bg)) 30%, color-mix(in srgb, #c084fc 24%, var(--skeleton-bg)) 50%, color-mix(in srgb, #34d399 20%, var(--skeleton-bg)) 70%, var(--skeleton-bg) 100%);background-size:300% 300%;animation:skeleton-aurora 4s ease infinite}.skeleton-circle{border-radius:50%}.skeleton-rounded{border-radius:var(--skeleton-border-radius, 4px)}.skeleton-text{border-radius:4px}.skeleton-avatar{border-radius:50%}.skeleton-button{border-radius:6px}.skeleton-card{border-radius:8px;padding:16px}.skeleton-list-item{border-radius:4px;padding:12px;display:flex;align-items:center;gap:12px}.skeleton-card-content{display:flex;flex-direction:column;gap:12px}.skeleton-card-header{display:flex;align-items:center;gap:12px}.skeleton-card-title{flex:1;display:flex;flex-direction:column;gap:6px}.skeleton-card-body{display:flex;flex-direction:column;gap:8px}.skeleton-list-content{display:flex;align-items:center;gap:12px;width:100%}.skeleton-list-text{flex:1;display:flex;flex-direction:column;gap:6px}.skeleton-card .skeleton-circle,.skeleton-card .skeleton-text,.skeleton-list-item .skeleton-circle,.skeleton-list-item .skeleton-text{background:var(--skeleton-bg, #f0f0f0);animation:inherit}.skeleton-image-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.skeleton-profile-template{display:flex;align-items:center;gap:16px}.skeleton-profile-template .skeleton-profile-lines{display:flex;flex-direction:column;gap:8px}.skeleton-media-object-template{display:flex;align-items:flex-start;gap:12px}.skeleton-media-object-template .skeleton-media-lines{display:flex;flex-direction:column;gap:6px}.skeleton-feed-template{width:100%;padding:16px;border:1px solid var(--ui-color-border, var(--border-default, #e5e7eb));border-radius:12px;background:var(--ui-color-surface, var(--bg-primary, #ffffff))}.skeleton-mask{width:fit-content;height:fit-content;min-width:20px;min-height:20px;display:inline-block}.skeleton-mask>*{visibility:hidden}.skeleton-mask.skeleton-ghost>*{visibility:visible !important;opacity:0.15 !important;filter:blur(2px) grayscale(1)}.skeleton-replication-container{width:100%;display:flex;gap:var(--skeleton-gap, 16px)}.skeleton-replication-container.skeleton-direction-row{flex-wrap:wrap;flex-direction:row !important}.skeleton-replication-container.skeleton-direction-column{flex-direction:column !important}.skeleton-elevated{box-shadow:var(--skeleton-elevation, none)}@keyframes skeleton-pulse{0%,100%{background-color:var(--skeleton-bg);opacity:1}50%{background-color:var(--skeleton-wave-bg);opacity:0.4}}@keyframes skeleton-wave{0%{background-position:-200% 0}100%{background-position:200% 0}}@keyframes skeleton-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}@keyframes skeleton-sheen{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}@keyframes skeleton-glow{0%,100%{box-shadow:0 0 8px rgba(var(--color-primary-rgb, 16, 185, 129), 0.15), inset 0 0 4px rgba(var(--color-primary-rgb, 16, 185, 129), 0.05);filter:brightness(0.95);opacity:0.8}50%{box-shadow:0 0 24px rgba(var(--color-primary-rgb, 16, 185, 129), 0.65), inset 0 0 12px rgba(var(--color-primary-rgb, 16, 185, 129), 0.3);filter:brightness(1.2);opacity:1}}@keyframes skeleton-flicker{0%,100%{opacity:0.35;filter:brightness(0.85)}20%{opacity:0.85;filter:brightness(1)}40%{opacity:0.45;filter:brightness(0.9)}60%{opacity:0.95;filter:brightness(1.15)}80%{opacity:0.55;filter:brightness(0.95)}}@keyframes skeleton-neon-sweep{0%{transform:translateX(-150%) skewX(-20deg)}70%,100%{transform:translateX(150%) skewX(-20deg)}}@keyframes skeleton-liquify{0%{background-position:250% 0}50%{background-position:-50% 0}100%{background-position:250% 0}}@keyframes skeleton-aurora{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}:host{--skeleton-border-radius:4px}.skeleton-speed-slow.skeleton-pulse{animation-duration:3s}.skeleton-speed-slow.skeleton-wave{animation-duration:3s}.skeleton-speed-slow.skeleton-shimmer{animation-duration:3.5s}.skeleton-speed-slow.skeleton-sheen::after{animation-duration:3.5s}.skeleton-speed-slow.skeleton-glow{animation-duration:3s}.skeleton-speed-slow.skeleton-neon-sweep::after{animation-duration:3.2s}.skeleton-speed-slow.skeleton-liquify{animation-duration:4s}.skeleton-speed-normal.skeleton-pulse{animation-duration:1.5s}.skeleton-speed-normal.skeleton-wave{animation-duration:1.5s}.skeleton-speed-normal.skeleton-shimmer{animation-duration:1.8s}.skeleton-speed-normal.skeleton-sheen::after{animation-duration:1.8s}.skeleton-speed-normal.skeleton-glow{animation-duration:1.5s}.skeleton-speed-normal.skeleton-neon-sweep::after{animation-duration:1.8s}.skeleton-speed-normal.skeleton-liquify{animation-duration:2.2s}.skeleton-speed-fast.skeleton-pulse{animation-duration:0.8s}.skeleton-speed-fast.skeleton-wave{animation-duration:0.8s}.skeleton-speed-fast.skeleton-shimmer{animation-duration:1s}.skeleton-speed-fast.skeleton-sheen::after{animation-duration:1s}.skeleton-speed-fast.skeleton-glow{animation-duration:0.8s}.skeleton-speed-fast.skeleton-neon-sweep::after{animation-duration:1.1s}.skeleton-speed-fast.skeleton-liquify{animation-duration:1.2s}`;
+
+const SkeletonLoader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.skeletonShow = createEvent(this, "skeletonShow");
+        this.skeletonHide = createEvent(this, "skeletonHide");
+    }
+    /** ARIA label for accessibility */
+    ariaLabel;
+    /** ARIA live region (off, polite, assertive) */
+    ariaLive = 'off';
+    /** ARIA role override (status, progressbar, etc.) */
+    ariaRole;
+    /** Progress value (0-100) for determinate skeletons */
+    progress;
+    /** Show in dark mode (auto, light, dark) */
+    dark = 'auto';
+    /** RTL shimmer direction */
+    rtl = false;
+    /** Fires when skeleton is shown */
+    skeletonShow;
+    /** Fires when skeleton is hidden */
+    skeletonHide;
+    /**
+     * Layout template to use for automatic skeleton generation.
+     * If set to something other than 'none', the `shape` prop is overridden for the template layout.
+     */
+    template = 'none';
+    /**
+     * Number of items to replicate (useful for lists, cards, etc.)
+     * Default: 1
+     */
+    count = 1;
+    /**
+     * Layout direction for replicated items ('row' or 'column')
+     */
+    direction = 'column';
+    /**
+     * If true, animations will automatically pause when the component is not in the viewport.
+     * Dramatically improves performance and battery life for long lists.
+     */
+    lazyAnimation = true;
+    /**
+     * Animation speed
+     */
+    speed = 'normal';
+    /**
+     * Color variant or custom color (hex/rgba)
+     */
+    color = 'neutral';
+    radius;
+    /**
+     * Stagger delay in ms between replicated items
+     * Makes the animation feel more organic as it flows down the page.
+     */
+    stagger = 0;
+    /**
+     * Layout gap between replicated items (e.g. '12px', '1rem')
+     */
+    gap = '16px';
+    /**
+     * Optional explicit highlight/shimmer color for the wave animation.
+     * If not provided, it is auto-derived from `color` by lightening it.
+     */
+    highlightColor;
+    /**
+     * Elevation / shadow intensity (0-4) to match the UI component it mimics
+     */
+    elevation = 0;
+    /**
+     * Shape of the skeleton
+     */
+    shape = 'rectangle';
+    /**
+     * If true, the skeleton acts as a mask over its children.
+     * Useful for wrapping text or components to skeletonize them seamlessly.
+     */
+    mask = false;
+    /**
+     * If true, keeps the children visible at low opacity and blurred behind the skeleton.
+     * Only works when `mask` is true.
+     */
+    ghost = false;
+    /**
+     * Predefined size of the skeleton (xs, sm, md, lg, xl, 2xl)
+     */
+    size = 'md';
+    /**
+     * Width of the skeleton
+     */
+    width = '100%';
+    /**
+     * Height of the skeleton
+     */
+    height = '20px';
+    /**
+     * Border radius for rounded shapes
+     */
+    borderRadius = '4px';
+    /**
+     * Whether to show animation
+     */
+    animated = true;
+    /**
+     * Animation type: 'pulse' or 'wave'
+     */
+    animationType = 'neon-sweep';
+    /**
+     * Custom class for additional styling
+     */
+    customClass = '';
+    /**
+     * Delay in milliseconds before showing the skeleton.
+     * Prevents "flicker" for high-speed connections.
+     */
+    delay = 0;
+    /**
+     * Angle of the wave animation (e.g. '45deg', '90deg').
+     * Default: '90deg' (horizontal)
+     */
+    waveAngle = '90deg';
+    /**
+     * Duration of the wave animation cycle (e.g. '1.5s', '3s').
+     * Default: '1.5s'
+     */
+    waveSpeed = '1.5s';
+    /**
+     * Number of rows (lines) to render when shape is 'text'
+     */
+    rows = 1;
+    /**
+     * Width of the last row when multi-line text is used (e.g. '60%')
+     */
+    lastRowWidth = '80%';
+    isActuallyVisible = false;
+    isInView = true;
+    delayTimer;
+    observer;
+    componentDidLoad() {
+        if (this.lazyAnimation) {
+            this.setupObserver();
+        }
+    }
+    setupObserver() {
+        if (typeof globalThis.IntersectionObserver === 'undefined') {
+            this.isInView = true;
+            return;
+        }
+        this.observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                this.isInView = entry.isIntersecting;
+            });
+        }, { threshold: 0.1 });
+        if (this.el) {
+            this.observer.observe(this.el);
+        }
+    }
+    handleDelayChange() {
+        this.handleVisibility();
+    }
+    componentWillLoad() {
+        this.handleVisibility();
+    }
+    get el() { return getElement(this); }
+    handleVisibility() {
+        if (this.delay <= 0) {
+            if (!this.isActuallyVisible)
+                this.skeletonShow?.emit();
+            this.isActuallyVisible = true;
+            return;
+        }
+        if (this.delayTimer)
+            clearTimeout(this.delayTimer);
+        if (this.isActuallyVisible)
+            this.skeletonHide?.emit();
+        this.isActuallyVisible = false;
+        this.delayTimer = setTimeout(() => {
+            this.isActuallyVisible = true;
+            this.skeletonShow?.emit();
+        }, this.delay);
+    }
+    disconnectedCallback() {
+        if (this.delayTimer)
+            clearTimeout(this.delayTimer);
+        if (this.observer)
+            this.observer.disconnect();
+    }
+    getSizeDimensions() {
+        const sizeMap = {
+            '3xs': { width: '12px', height: '12px' },
+            '2xs': { width: '16px', height: '16px' },
+            'xs': { width: '20px', height: '20px' },
+            'sm': { width: '24px', height: '24px' },
+            'md': { width: '32px', height: '32px' },
+            'lg': { width: '48px', height: '48px' },
+            'xl': { width: '64px', height: '64px' },
+            '2xl': { width: '80px', height: '80px' },
+            '3xl': { width: '120px', height: '120px' },
+            '4xl': { width: '160px', height: '160px' },
+        };
+        return sizeMap[this.size] || sizeMap['md'];
+    }
+    getSkeletonStyles() {
+        // Use size dimensions as defaults if width/height are not explicitly set
+        const sizeDims = this.getSizeDimensions();
+        const hasExplicitWidth = this.width !== '100%';
+        const hasExplicitHeight = this.height !== '20px';
+        const baseStyles = {
+            width: hasExplicitWidth ? this.width : sizeDims.width,
+            height: hasExplicitHeight ? this.height : sizeDims.height,
+        };
+        switch (this.shape) {
+            case 'circle':
+                baseStyles.borderRadius = '50%';
+                // Ensure width and height are equal for circles
+                const circleSize = Math.min(parseInt(this.width), parseInt(this.height) || parseInt(this.width));
+                baseStyles.width = `${circleSize}px`;
+                baseStyles.height = `${circleSize}px`;
+                break;
+            case 'square':
+                // Ensure width and height are equal for squares
+                const squareSize = Math.min(parseInt(this.width), parseInt(this.height) || parseInt(this.width));
+                baseStyles.width = `${squareSize}px`;
+                baseStyles.height = `${squareSize}px`;
+                baseStyles.borderRadius = '0';
+                break;
+            case 'oval':
+                baseStyles.borderRadius = '50%';
+                // Oval allows different width and height (ellipse)
+                break;
+            case 'rounded-square':
+                // Ensure width and height are equal for rounded squares
+                const roundedSquareSize = Math.min(parseInt(this.width), parseInt(this.height) || parseInt(this.width));
+                baseStyles.width = `${roundedSquareSize}px`;
+                baseStyles.height = `${roundedSquareSize}px`;
+                baseStyles.borderRadius = this.borderRadius;
+                break;
+            case 'rounded-rectangle':
+                baseStyles.borderRadius = this.borderRadius;
+                // Rounded rectangle allows different width and height
+                break;
+            case 'rounded':
+                baseStyles.borderRadius = this.borderRadius;
+                break;
+            case 'text':
+                baseStyles.borderRadius = '4px';
+                // Text shapes use smer heights based on size
+                const textSizeMap = {
+                    '3xs': '10px',
+                    '2xs': '12px',
+                    'xs': '14px',
+                    'sm': '16px',
+                    'md': '18px',
+                    'lg': '24px',
+                    'xl': '32px',
+                    '2xl': '40px',
+                    '3xl': '48px',
+                    '4xl': '64px',
+                };
+                if (!hasExplicitHeight) {
+                    baseStyles.height = textSizeMap[this.size] || '18px';
+                }
+                break;
+            case 'avatar':
+                baseStyles.borderRadius = '50%';
+                const avatarSize = this.getSizeDimensions();
+                baseStyles.width = this.width !== '100%' ? this.width : avatarSize.width;
+                baseStyles.height = this.height !== '20px' ? this.height : avatarSize.height;
+                break;
+            case 'button':
+                baseStyles.borderRadius = '6px';
+                const buttonHeightMap = {
+                    'xs': '24px',
+                    'sm': '28px',
+                    'md': '32px',
+                    'lg': '36px',
+                    'xl': '40px',
+                    '2xl': '44px',
+                };
+                baseStyles.height = this.height !== '20px' ? this.height : (buttonHeightMap[this.size] || '32px');
+                break;
+            case 'pill':
+                baseStyles.borderRadius = '20px';
+                const pillHeightMap = {
+                    'xs': '20px',
+                    'sm': '24px',
+                    'md': '28px',
+                    'lg': '32px',
+                };
+                baseStyles.height = this.height !== '20px' ? this.height : (pillHeightMap[this.size] || '28px');
+                baseStyles.width = this.width !== '100%' ? this.width : '60px';
+                break;
+            case 'card':
+                baseStyles.borderRadius = '8px';
+                const cardHeightMap = {
+                    'xs': '80px',
+                    'sm': '100px',
+                    'md': '120px',
+                    'lg': '160px',
+                    'xl': '200px',
+                    '2xl': '240px',
+                };
+                baseStyles.minHeight = this.height !== '20px' ? this.height : (cardHeightMap[this.size] || '120px');
+                break;
+            case 'list-item':
+                baseStyles.borderRadius = '4px';
+                const listItemHeightMap = {
+                    'xs': '32px',
+                    'sm': '36px',
+                    'md': '40px',
+                    'lg': '48px',
+                    'xl': '56px',
+                    '2xl': '64px',
+                };
+                baseStyles.height = this.height !== '20px' ? this.height : (listItemHeightMap[this.size] || '40px');
+                break;
+            case 'image':
+                baseStyles.borderRadius = '8px';
+                const imageHeightMap = {
+                    'xs': '100px',
+                    'sm': '150px',
+                    'md': '200px',
+                    'lg': '250px',
+                    'xl': '300px',
+                    '2xl': '400px',
+                };
+                baseStyles.height = this.height !== '20px' ? this.height : (imageHeightMap[this.size] || '200px');
+                baseStyles.display = 'flex';
+                baseStyles.alignItems = 'center';
+                baseStyles.justifyContent = 'center';
+                break;
+            case 'none':
+                baseStyles.background = 'transparent';
+                baseStyles.width = 'auto';
+                baseStyles.height = 'auto';
+                break;
+            default: // rectangle
+                baseStyles.borderRadius = '0';
+                break;
+        }
+        return baseStyles;
+    }
+    /**
+     * Resolves the actual color value based on variant or custom string
+     */
+    // private getBaseColor(): string {
+    //   const colorMap: Record<string, string> = {
+    //     primary: '#3DCD58',
+    //     secondary: '#64748b',
+    //     success: '#22c55e',
+    //     danger: '#ef4444',
+    //     warning: '#f59e0b',
+    //     info: '#3bf673',
+    //     neutral: 'var(--skeleton-bg, #e2e8f0)',
+    //   };
+    //   const resolved = colorMap[this.color] || this.color;
+    //   // Handle theme-based defaults if empty or neutral
+    //   if (!this.color || this.color === 'neutral') {
+    //     return 'var(red, #e2e8f0)';
+    //   }
+    //   return resolved;
+    // }
+    // /**
+    //  * Derives a lighter shimmer color from the base color.
+    //  * Works for most hex colors; for others falls back to the theme wave variable.
+    //  */
+    // private getHighlightColor(base: string): string {
+    //   // If user explicitly provided a highlight, use it
+    //   if (this.highlightColor) return this.highlightColor;
+    //   // Handle generic theme variables
+    //   if (base.includes('--skeleton-bg')) {
+    //     return 'var(--skeleton-wave-bg, #f3f4f6)';
+    //   }
+    //   // Try to parse hex and lighten
+    //   const hex = base.trim();
+    //   if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(hex)) {
+    //     let full = hex.slice(1);
+    //     if (full.length === 3) {
+    //       full = full.split('').map(c => c + c).join('');
+    //     }
+    //     const r = Math.min(255, parseInt(full.substring(0, 2), 16) + 30);
+    //     const g = Math.min(255, parseInt(full.substring(2, 4), 16) + 30);
+    //     const b = Math.min(255, parseInt(full.substring(4, 6), 16) + 30);
+    //     return `rgb(${r}, ${g}, ${b})`;
+    //   }
+    //   // For other types of strings, fallback to the theme wave variable if available
+    //   return 'var(--skeleton-wave-bg, #f3f4f6)';
+    // }
+    render() {
+        if (!this.isActuallyVisible)
+            return null;
+        const countArr = Array.from({ length: Math.max(1, this.count) });
+        // ARIA role logic
+        const ariaRole = this.ariaRole || (typeof this.progress === 'number' ? 'progressbar' : 'status');
+        const ariaProps = {
+            role: ariaRole,
+            'aria-busy': true,
+            'aria-label': this.ariaLabel,
+            'aria-live': this.ariaLive,
+        };
+        if (ariaRole === 'progressbar' && typeof this.progress === 'number') {
+            ariaProps['aria-valuenow'] = this.progress;
+            ariaProps['aria-valuemin'] = 0;
+            ariaProps['aria-valuemax'] = 100;
+        }
+        // Dark mode/RTL
+        const darkThemes = ['dark', 'blue', 'violet', 'green', 'pink'];
+        const docTheme = document.documentElement.getAttribute('data-theme') || '';
+        const isDarkAuto = this.dark === 'auto' && ((window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ||
+            darkThemes.some(t => document.documentElement.classList.contains('theme-' + t) || document.body.classList.contains('theme-' + t)) ||
+            darkThemes.includes(docTheme) ||
+            !!this.el.closest(darkThemes.map(t => `.theme-${t}, [data-theme="${t}"]`).join(', ')));
+        const darkClass = this.dark === 'dark' || isDarkAuto ? 'skeleton-dark' : '';
+        const rtlClass = this.rtl ? 'skeleton-rtl' : '';
+        return (h("div", { class: `skeleton-replication-container skeleton-direction-${this.direction} ${darkClass} ${rtlClass}`, style: { display: 'flex', flexDirection: this.direction, gap: this.gap }, ...ariaProps }, countArr.map((_, index) => {
+            // ...existing code...
+            const staggerDelay = this.stagger > 0 ? `${index * this.stagger}ms` : '0ms';
+            const isAnimating = this.animated && (!this.lazyAnimation || this.isInView);
+            // ...existing code...
+            const namedColors = ['neutral', 'primary', 'secondary', 'success', 'danger', 'warning', 'info'];
+            const isCustomColor = !namedColors.includes(this.color);
+            const skeletonClass = {
+                'skeleton': true,
+                'skeleton-animated': isAnimating,
+                [`skeleton-${this.animationType}`]: isAnimating,
+                [`skeleton-${this.shape}`]: true,
+                [`skeleton-speed-${this.speed}`]: true,
+                [`skeleton-color-${this.color}`]: !isCustomColor && this.color !== 'neutral',
+                'skeleton-mask': this.mask,
+                'skeleton-ghost': this.ghost && this.mask,
+                'skeleton-elevated': this.elevation > 0,
+                [this.customClass]: !!this.customClass,
+            };
+            const customStyles = {
+                '--skeleton-stagger-delay': staggerDelay,
+                '--skeleton-wave-angle': this.waveAngle,
+                '--skeleton-wave-speed': this.waveSpeed,
+                '--skeleton-gap': this.gap,
+                '--skeleton-elevation': this.elevation > 0 ? `var(--ui-shadow-${this.elevation}, 0 2px 8px rgba(0,0,0,0.05))` : 'none',
+            };
+            // Custom hex/rgba colors: set as CSS vars so animations still work via gradients
+            if (isCustomColor) {
+                customStyles['--skeleton-bg'] = this.color;
+                customStyles['--skeleton-wave-bg'] = this.highlightColor || this.color;
+            }
+            if (this.radius) {
+                customStyles['--skeleton-border-radius'] = this.radius;
+            }
+            const isCircular = ['circle', 'avatar', 'oval'].includes(this.shape);
+            const styles = {
+                ...this.getSkeletonStyles(),
+                ...customStyles,
+                animationDelay: staggerDelay,
+                ...(isCircular ? {} : (this.radius || this.borderRadius !== '4px' ? { borderRadius: this.radius || this.borderRadius } : {}))
+            };
+            return (h("div", { class: skeletonClass, style: styles, key: index }, this.renderContent(), typeof this.progress === 'number' && (h("div", { class: "skeleton-progress-bar", style: { width: this.progress + '%', height: '4px', background: 'var(--skeleton-wave-bg, #fff)', borderRadius: '2px', marginTop: '4px' } }))));
+        }), h("slot", { name: "custom" })));
+    }
+    renderContent() {
+        const isText = this.shape === 'text';
+        const hasRows = isText && this.rows > 1;
+        return [
+            (this.mask || this.shape === 'none') ? h("slot", null) : null,
+            hasRows && !this.mask ? (h("div", { class: "skeleton-text-rows", style: { display: 'flex', flexDirection: 'column', gap: '8px', width: '100%' } }, Array.from({ length: this.rows }).map((_, i) => {
+                const isLast = i === this.rows - 1;
+                const rowWidth = isLast ? this.lastRowWidth : (i > 0 && i % 2 === 0 ? '92%' : '100%');
+                return (h("div", { class: "skeleton-text-row", style: {
+                        height: '1em',
+                        width: rowWidth,
+                        backgroundColor: 'inherit',
+                        borderRadius: '4px',
+                        animation: 'inherit'
+                    } }));
+            }))) : null,
+            this.shape === 'card' && !this.mask ? (h("div", { class: "skeleton-card-content" }, h("div", { class: "skeleton-card-header" }, h("div", { class: "skeleton-circle", style: { width: '32px', height: '32px', borderRadius: '50%' } }), h("div", { class: "skeleton-card-title" }, h("div", { class: "skeleton-text", style: { width: '60%', height: '16px', borderRadius: '4px' } }), h("div", { class: "skeleton-text", style: { width: '40%', height: '12px', borderRadius: '4px' } }))), h("div", { class: "skeleton-card-body" }, h("div", { class: "skeleton-text", style: { width: '100%', height: '14px', borderRadius: '4px' } }), h("div", { class: "skeleton-text", style: { width: '80%', height: '14px', borderRadius: '4px' } }), h("div", { class: "skeleton-text", style: { width: '90%', height: '14px', borderRadius: '4px' } })))) : null,
+            this.shape === 'list-item' && !this.mask ? (h("div", { class: "skeleton-list-content" }, h("div", { class: "skeleton-circle", style: { width: '32px', height: '32px', borderRadius: '50%' } }), h("div", { class: "skeleton-list-text" }, h("div", { class: "skeleton-text", style: { width: '70%', height: '14px', borderRadius: '4px' } }), h("div", { class: "skeleton-text", style: { width: '50%', height: '12px', borderRadius: '4px' } })))) : null,
+            this.shape === 'image' && !this.mask ? (h("div", { class: "skeleton-image-icon" }, h("ui-icon", { name: "image", library: "lucide", size: "25%", style: { opacity: '0.2' } }))) : null,
+            this.template === 'profile' ? (h("div", { class: "skeleton-profile-template" }, h("ui-skeleton-loader", { shape: "circle", size: this.size, color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("div", { class: "skeleton-profile-lines" }, h("ui-skeleton-loader", { shape: "text", size: this.size, width: "120px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("ui-skeleton-loader", { shape: "text", size: "xs", width: "80px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated })))) : null,
+            this.template === 'media-object' ? (h("div", { class: "skeleton-media-object-template" }, h("ui-skeleton-loader", { shape: "rounded-rectangle", width: "48px", height: "48px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("div", { class: "skeleton-media-lines", style: { flex: '1' } }, h("ui-skeleton-loader", { shape: "text", size: "md", width: "70%", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("ui-skeleton-loader", { shape: "text", size: "xs", width: "40%", color: this.color, "highlight-color": this.highlightColor, animated: this.animated, style: { marginTop: '4px' } }), h("ui-skeleton-loader", { shape: "text", size: "xs", width: "90%", color: this.color, "highlight-color": this.highlightColor, animated: this.animated, style: { marginTop: '8px' } })))) : null,
+            this.template === 'feed-item' ? (h("div", { class: "skeleton-feed-template" }, h("div", { class: "feed-header", style: { display: 'flex', gap: '12px', marginBottom: '16px' } }, h("ui-skeleton-loader", { shape: "circle", size: "md", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("div", { style: { flex: '1' } }, h("ui-skeleton-loader", { shape: "text", size: "xs", width: "100px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("ui-skeleton-loader", { shape: "text", size: "xs", width: "60px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated, style: { marginTop: '4px' } }))), h("ui-skeleton-loader", { shape: "rectangle", width: "100%", height: "200px", "border-radius": "8px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("div", { class: "feed-footer", style: { marginTop: '12px', display: 'flex', gap: '8px' } }, h("ui-skeleton-loader", { shape: "button", size: "sm", width: "60px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("ui-skeleton-loader", { shape: "button", size: "sm", width: "60px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated })))) : null,
+            this.template === 'table-row' ? (h("div", { class: "skeleton-table-row-template", style: { display: 'flex', gap: '20px', alignItems: 'center', width: '100%', padding: '12px 0' } }, h("ui-skeleton-loader", { shape: "rectangle", width: "20px", height: "20px", "border-radius": "4px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("ui-skeleton-loader", { shape: "text", width: "15%", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("ui-skeleton-loader", { shape: "text", width: "35%", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("ui-skeleton-loader", { shape: "text", width: "20%", color: this.color, "highlight-color": this.highlightColor, animated: this.animated }), h("ui-skeleton-loader", { shape: "pill", width: "80px", color: this.color, "highlight-color": this.highlightColor, animated: this.animated, style: { marginLeft: 'auto' } }))) : null,
+        ];
+    }
+    static get watchers() { return {
+        "delay": [{
+                "handleDelayChange": 0
+            }]
+    }; }
+};
+SkeletonLoader.style = skeletonLoaderCss();
+
+const stackCss = () => `.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-block}:host(.stack-horizontal) .stack-container{flex-direction:row}:host(.stack-vertical) .stack-container{flex-direction:column}.stack-container{display:flex;gap:var(--stack-spacing, 8px)}:host(.stack-wrap-wrap) .stack-container{flex-wrap:wrap}:host(.stack-wrap-wrap-reverse) .stack-container{flex-wrap:wrap-reverse}:host(.stack-show-dividers) .stack-container{gap:0}:host(.stack-show-dividers) ::slotted(*:not(:last-child)){position:relative;margin-right:var(--stack-spacing, 8px);display:flex;align-items:center}:host(.stack-show-dividers) ::slotted(*:not(:last-child))::after{content:"";position:absolute;right:calc(var(--stack-spacing, 8px) / -2);background:var(--bg-primary, #e5e7eb)}:host(.stack-horizontal.stack-show-dividers) ::slotted(*:not(:last-child))::after{width:1px;height:60%;top:20%}:host(.stack-vertical.stack-show-dividers) ::slotted(*:not(:last-child))::after{height:1px;width:60%;left:20%;bottom:calc(var(--stack-spacing, 8px) / -2)}:host(.divider-dashed) ::slotted(*:not(:last-child))::after{border-right:1px dashed var(--border-default, #e5e7eb);background:none}:host(.divider-dotted) ::slotted(*:not(:last-child))::after{border-right:1px dotted var(--border-default, #e5e7eb);background:none}:host(.stack-overlap) .stack-container{padding-right:20px}:host(.stack-overlap) ::slotted(*){margin-right:var(--stack-overlap, -12px) !important;transition:transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), z-index 0s, filter 0.3s ease;position:relative;z-index:1;border:2px solid var(--bg-primary, #ffffff);box-sizing:border-box;filter:drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));cursor:pointer}:host(.stack-overlap) ::slotted(*:hover){transform:translateY(-8px) scale(1.1) rotate(1deg);z-index:100 !important;filter:drop-shadow(0 12px 24px rgba(0, 0, 0, 0.2))}:host(.stack-overlap) ::slotted(*:last-child){margin-right:0 !important}.stack-roster-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.3);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn 0.2s ease-out}.stack-roster-content{background:var(--bg-primary, #ffffff);width:90%;max-width:400px;max-height:80vh;border-radius:16px;box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25);display:flex;flex-direction:column;overflow:hidden;animation:slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}.roster-header{padding:16px 20px;border-bottom:1px solid var(--border-subtle, #f1f5f9);display:flex;justify-content:space-between;align-items:center}.roster-header h4{margin:0;font-size:16px;font-weight:600;color:var(--text-primary, #1e293b)}.close-btn{background:var(--bg-secondary, #f1f5f9);border:none;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted, #64748b);font-size:18px;transition:all 0.2s}.close-btn:hover{background:var(--bg-primary, #e2e8f0);color:var(--text-primary, #0f172a)}.roster-list{padding:12px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.roster-item{padding:10px;border-radius:10px;background:var(--bg-primary, #f8fafc);border:1px solid var(--border-subtle, #f1f5f9);display:flex;align-items:center;transition:background 0.2s}.roster-item:hover{background:var(--bg-secondary, #f1f5f9)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.stack-overflow-indicator{display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;border-radius:50%;background:var(--bg-secondary, #f3f4f6);border:2px solid var(--bg-primary, #ffffff);color:var(--text-secondary, #4b5563);font-size:12px;font-weight:600;z-index:10;cursor:pointer;transition:transform 0.2s}.stack-overflow-indicator:hover{transform:scale(1.1);background:var(--bg-primary, #e5e7eb)}@media (prefers-color-scheme: dark){.stack-roster-content{background:var(--bg-primary, #1e293b)}.roster-header h4{color:var(--text-standard, #ffffff)}.roster-item{background:var(--color-primary, #334155);border-color:var(--color-primary, #475569)}.roster-item:hover{background:var(--color-primary, #475569)}.stack-overflow-indicator{background:var(--color-primary, #374151);border-color:var(--border-strong, #1f2937);color:var(--text-standard, #f3f4f6)}.stack-overflow-indicator:hover{background:var(--color-primary, #4b5563)}}`;
+
+const Stack = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** Stacking direction */
+    direction = 'horizontal';
+    /** Flex wrap behavior */
+    wrap = 'nowrap';
+    /** Spacing between items (negative for overlap) */
+    spacing = '8px';
+    /** Align items */
+    align = 'center';
+    /** Justify content */
+    justify = 'start';
+    /** Maximum items to show before '+N' */
+    max = 0;
+    /** Whether to overlap items */
+    overlap = false;
+    /** Whether to show dividers between items */
+    showDividers = false;
+    /** Type of divider to show */
+    dividerType = 'solid';
+    childrenCount = 0;
+    isRosterOpen = false;
+    mutationObserver;
+    componentWillLoad() {
+        this.updateChildrenCount();
+    }
+    componentDidLoad() {
+        this.mutationObserver = new MutationObserver(() => {
+            this.updateChildrenCount();
+        });
+        this.mutationObserver.observe(this.el, { childList: true });
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+    }
+    toggleRoster = () => {
+        this.isRosterOpen = !this.isRosterOpen;
+    };
+    closeRoster = () => {
+        this.isRosterOpen = false;
+    };
+    updateChildrenVisibility(actualMax) {
+        Array.from(this.el.children).forEach((child, index) => {
+            if (index < actualMax) {
+                child.style.display = '';
+            }
+            else {
+                child.style.display = 'none';
+            }
+        });
+    }
+    updateChildrenCount() {
+        this.childrenCount = this.el.children.length;
+    }
+    renderRoster(allChildren, total) {
+        return (h("div", { class: "stack-roster-backdrop", onClick: this.closeRoster }, h("div", { class: "stack-roster-content", onClick: e => e.stopPropagation() }, h("div", { class: "roster-header" }, h("div", { class: "roster-titles" }, h("h4", { class: "roster-main-title" }, "Hidden Items"), h("span", { class: "roster-sub-title" }, total, " items total")), h("ui-button", { variant: "ghost", onClick: this.closeRoster, ariaLabel: "Close roster", icon: "times", iconLibrary: "fontawesome", iconOnly: true, size: "sm" })), h("div", { class: "roster-list" }, allChildren.map((child, idx) => (h("div", { key: idx, class: "roster-item" }, h("div", { class: "roster-item-preview", innerHTML: sanitizeHTML(child.outerHTML) }), h("span", { class: "roster-item-label" }, "Item ", idx + 1))))))));
+    }
+    render() {
+        const isOverlapping = this.overlap || (this.spacing.startsWith('-'));
+        const actualMax = this.max > 0 ? this.max : this.childrenCount;
+        const overflowCount = this.childrenCount - actualMax;
+        const allChildren = Array.from(this.el.children);
+        // Update visibility after render to avoid layout thrashing
+        requestAnimationFrame(() => this.updateChildrenVisibility(actualMax));
+        return (h(Host, { key: 'b4bd86fd867061218a62b94f247a30f1c4710919', class: {
+                'ui-stack': true,
+                [`stack-${this.direction}`]: true,
+                [`stack-wrap-${this.wrap}`]: true,
+                'stack-overlap': isOverlapping,
+                'stack-show-dividers': this.showDividers && !isOverlapping,
+                [`divider-${this.dividerType}`]: this.showDividers
+            }, style: {
+                '--stack-spacing': isOverlapping ? '0' : this.spacing,
+                '--stack-overlap': isOverlapping ? (this.spacing.startsWith('-') ? this.spacing : '-12px') : '0',
+                'align-items': this.align,
+                'justify-content': this.justify,
+                'flex-wrap': this.wrap
+            } }, h("div", { key: '3364fa9b69d8aa4c9c92add70a6bfc969d14ab96', class: "stack-container" }, h("slot", { key: '14b6de27b7e2c72ed9c677fff51ea721dc6eb2d1' }), overflowCount > 0 && (h("div", { key: 'bab9856ee9b5caa06b7765619efad7cf2b175e2e', class: "stack-overflow-indicator", onClick: (e) => { e.stopPropagation(); this.toggleRoster(); }, onKeyDown: (e) => {
+                if (e.key === 'Enter')
+                    this.toggleRoster();
+            }, tabindex: "0", role: "button", title: `View ${overflowCount} more items` }, "+", overflowCount))), this.isRosterOpen && this.renderRoster(allChildren, this.childrenCount)));
+    }
+};
+Stack.style = stackCss();
+
+const tagGroupCss = () => `.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:block}.tag-group-container{display:flex;flex-direction:column;gap:12px;padding:8px 12px;border:1.5px solid var(--border-subtle, #e2e8f0);border-radius:10px;background:var(--bg-primary, #f8fafc);transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1)}.tag-group-container:focus-within{background:var(--bg-primary, #ffffff);border-color:var(--color-primary, #10b981);box-shadow:0 0 0 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1)}.tag-group-container.is-readonly{background:transparent;border-color:transparent;padding:0;pointer-events:none}.tag-group-inline-input{flex:1;min-width:60px;border:none;background:transparent;font-size:13px;padding:4px 0;outline:none;color:var(--text-primary, #1e293b)}.tag-group-inline-input::placeholder{color:var(--color-primary, #94a3b8)}ui-stack[overlap] ui-tag,ui-stack[overlap=true] ui-tag{--ui-tag-border:2px solid var(--bg-primary, #ffffff) !important;transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}ui-stack[overlap] ui-tag:hover,ui-stack[overlap=true] ui-tag:hover{transform:translateY(-4px) scale(1.1);z-index:100 !important}ui-tag[highlighted=true]{--ui-tag-bg:var(--color-primary, #10b981) !important;--ui-tag-color:var(--text-standard, #ffffff) !important;--ui-tag-border:1px solid var(--color-primary-hover, #2563eb) !important;transform:scale(1.05);box-shadow:0 4px 6px -1px rgba(var(--color-primary-rgb, 59, 130, 246), 0.2)}.tag-group-overflow-toggle{margin-top:4px;align-self:flex-start;background:var(--bg-secondary, #f1f5f9);border:1px solid var(--border-subtle, #e2e8f0);color:var(--text-muted, #64748b);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;cursor:pointer;padding:4px 12px;border-radius:999px;transition:all 0.2s ease}.tag-group-overflow-toggle:hover{background:var(--bg-primary, #ffffff);color:var(--color-primary, #10b981);border-color:var(--color-primary, #10b981);transform:translateY(-1px)}.tag-group-overflow-toggle:active{transform:translateY(0)}.tag-group-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:8px;color:var(--color-primary, #94a3b8);background:transparent}.tag-group-empty ui-icon{opacity:0.4}.tag-group-empty span{font-size:13px;font-weight:500}.tag-group-empty.no-results{padding:12px;border-radius:8px;background:rgba(241, 245, 249, 0.5);color:var(--text-muted, #64748b);border:1px dashed var(--border-subtle, #e2e8f0)}`;
+
+const TagGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tagAdd = createEvent(this, "tagAdd");
+        this.tagGroupChange = createEvent(this, "tagGroupChange");
+    }
+    get el() { return getElement(this); }
+    /**
+     * Maximum number of tags to display before hiding and showing (+N)
+     */
+    max = 0;
+    /**
+     * Spacing between tags
+     */
+    spacing = '8px';
+    /**
+     * Whether to overlap tags (avatar style)
+     */
+    overlap = false;
+    /**
+     * Selected values (for checkable tags)
+     */
+    value = [];
+    /**
+     * Selection mode: 'none', 'single', or 'multiple'
+     */
+    selectionMode = 'none';
+    /**
+     * Bulk size for all tags in group
+     */
+    size;
+    /**
+     * Bulk variant for all tags in group
+     */
+    variant;
+    /**
+     * Bulk color for all tags in group
+     */
+    color;
+    /**
+     * Whether all tags in group should be rounded
+     */
+    rounded = false;
+    /**
+     * Whether all tags in group should be removable
+     */
+    removable = false;
+    /**
+     * Whether users can add new tags (Premium)
+     */
+    creatable = false;
+    /**
+     * Whether tags are filterable via search (Premium)
+     */
+    searchable = false;
+    /**
+     * Whether overflow tags can be toggled to show (Premium)
+     */
+    collapsible = false;
+    /**
+     * Case sensitivity for search and duplicates
+     */
+    caseSensitive = false;
+    /**
+     * Delimiters to trigger tag creation
+     */
+    delimiters = [',', ' '];
+    /**
+     * Whether all tags in group should show as skeletons
+     */
+    skeleton = false;
+    /**
+     * Bulk shape for all tags in group
+     */
+    shape;
+    /**
+     * Bulk animation for all tags in group
+     */
+    animation;
+    /**
+     * Whether the entire group is read-only (disables all selection/removal)
+     */
+    readOnly = false;
+    /**
+     * Placeholder text when group is empty (creatable mode)
+     */
+    placeholder = 'Add tag...';
+    /**
+     * Event emitted when a new tag is added
+     */
+    tagAdd;
+    searchQuery = '';
+    isExpanded = false;
+    isLastTagHighlighted = false;
+    tagGroupChange;
+    handleKeyDown(ev) {
+        if (this.readOnly)
+            return;
+        const tags = Array.from(this.el.querySelectorAll('ui-tag'));
+        const activeElement = this.el.shadowRoot?.activeElement || document.activeElement;
+        // Find if any tag is focused or contains focus
+        const focusedTagIndex = tags.findIndex(t => t === activeElement || t.contains(activeElement));
+        const isInputFocused = activeElement === this.el.shadowRoot?.querySelector('.tag-group-inline-input');
+        if (ev.key === 'ArrowLeft') {
+            if (isInputFocused && ev.target.selectionStart === 0) {
+                // Focus last tag
+                if (tags.length > 0) {
+                    tags[tags.length - 1].focus();
+                    ev.preventDefault();
+                }
+            }
+            else if (focusedTagIndex > 0) {
+                tags[focusedTagIndex - 1].focus();
+                ev.preventDefault();
+            }
+        }
+        else if (ev.key === 'ArrowRight') {
+            if (focusedTagIndex !== -1) {
+                if (focusedTagIndex === tags.length - 1) {
+                    this.el.shadowRoot?.querySelector('.tag-group-inline-input')?.focus();
+                }
+                else {
+                    tags[focusedTagIndex + 1].focus();
+                }
+                ev.preventDefault();
+            }
+        }
+        else if ((ev.key === 'Backspace' || ev.key === 'Delete') && focusedTagIndex !== -1) {
+            const tagToRemove = tags[focusedTagIndex];
+            const nextToFocus = focusedTagIndex < tags.length - 1 ? tags[focusedTagIndex + 1] : this.el.shadowRoot?.querySelector('.tag-group-inline-input');
+            if (this.removable) {
+                const tagValue = tagToRemove.value || tagToRemove.label;
+                this.removeTagByValue(tagValue);
+                if (nextToFocus)
+                    nextToFocus.focus();
+                ev.preventDefault();
+            }
+        }
+    }
+    handleGroupChange() {
+        this.updateChildren();
+    }
+    handleTagRemove(ev) {
+        if (this.readOnly)
+            return;
+        // Find the tag that was removed
+        const tag = ev.target;
+        if (!tag)
+            return;
+        const tagValue = tag.value || tag.label;
+        // If it was selected, remove it from the value array
+        if (Array.isArray(this.value)) {
+            const index = this.value.indexOf(tagValue);
+            if (index > -1) {
+                const newValue = [...this.value];
+                newValue.splice(index, 1);
+                this.value = newValue;
+                this.tagGroupChange.emit(this.value);
+            }
+        }
+        else if (this.value === tagValue) {
+            this.value = '';
+            this.tagGroupChange.emit(this.value);
+        }
+        // Explicitly remove from DOM if it's a child of this component
+        if (tag.parentNode === this.el) {
+            this.el.removeChild(tag);
+        }
+        // Delay updating children slightly to allow for removal animation
+        setTimeout(() => this.updateChildren(), 50);
+    }
+    handleTagCheck(ev) {
+        if (this.readOnly || this.selectionMode === 'none')
+            return;
+        const tag = ev.target;
+        const tagValue = tag.value || tag.label;
+        if (this.selectionMode === 'single') {
+            this.value = ev.detail ? tagValue : '';
+            this.syncSelection();
+        }
+        else {
+            const current = Array.isArray(this.value) ? [...this.value] : (this.value ? [this.value] : []);
+            if (ev.detail) {
+                if (!current.includes(tagValue))
+                    current.push(tagValue);
+            }
+            else {
+                const index = current.indexOf(tagValue);
+                if (index > -1)
+                    current.splice(index, 1);
+            }
+            this.value = current;
+            this.syncSelection();
+        }
+        this.tagGroupChange.emit(this.value);
+    }
+    componentDidLoad() {
+        this.updateChildren();
+        // Listen for slot changes
+        const slot = this.el.shadowRoot?.querySelector('slot');
+        if (slot) {
+            slot.addEventListener('slotchange', () => this.updateChildren());
+        }
+    }
+    updateChildren() {
+        const tags = Array.from(this.el.querySelectorAll('ui-tag'));
+        const query = this.searchQuery.toLowerCase();
+        tags.forEach((tag, index) => {
+            // Apply bulk styles
+            if (this.size)
+                tag.size = this.size;
+            if (this.variant)
+                tag.variant = this.variant;
+            if (this.color)
+                tag.color = this.color;
+            // Default to circle if overlapping and no shape set
+            if (this.overlap && !this.shape && !tag.shape) {
+                tag.shape = 'circle';
+            }
+            else if (this.shape) {
+                tag.shape = this.shape;
+            }
+            else if (this.rounded) {
+                tag.shape = 'pill';
+            }
+            if (this.skeleton)
+                tag.skeleton = this.skeleton;
+            if (this.animation)
+                tag.animation = this.animation;
+            tag.removable = this.readOnly ? false : this.removable;
+            tag.disabled = this.readOnly;
+            if (this.selectionMode !== 'none')
+                tag.checkable = true;
+            // Handle filtering
+            const label = tag.label || '';
+            const matches = label.toLowerCase().includes(query);
+            // Handle max/collapsible
+            const isOverMax = this.max > 0 && index >= this.max;
+            const isHighlighted = this.isLastTagHighlighted && index === (tags.length - 1);
+            if (isHighlighted) {
+                tag.setAttribute('highlighted', 'true');
+            }
+            else {
+                tag.removeAttribute('highlighted');
+            }
+            const shouldBeVisible = matches && (!isOverMax || this.isExpanded);
+            tag.style.display = shouldBeVisible ? '' : 'none';
+        });
+        this.syncSelection();
+    }
+    syncSelection() {
+        const tags = Array.from(this.el.querySelectorAll('ui-tag'));
+        const currentSelected = Array.isArray(this.value) ? this.value : [this.value];
+        tags.forEach((tag) => {
+            const tagValue = tag.value || tag.label;
+            tag.checked = currentSelected.includes(tagValue);
+        });
+    }
+    handleSearch = (ev) => {
+        this.searchQuery = ev.detail;
+        this.updateChildren();
+    };
+    addTags(input) {
+        if (!input)
+            return;
+        this.isLastTagHighlighted = false;
+        // Escape delimiters for regex
+        const escapedDelimiters = this.delimiters.map(d => d.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|');
+        const regex = new RegExp(escapedDelimiters || ',', 'g');
+        const labels = input.split(regex).map(s => s.trim()).filter(s => !!s);
+        labels.forEach(label => {
+            // Check for duplicates (pulse logic)
+            const allTags = Array.from(this.el.querySelectorAll('ui-tag'));
+            const existing = allTags.find((t) => this.caseSensitive
+                ? t.label === label
+                : t.label.toLowerCase() === label.toLowerCase());
+            if (existing) {
+                existing.pulse = true;
+                setTimeout(() => existing.pulse = false, 2000);
+            }
+            else {
+                const newTag = document.createElement('ui-tag');
+                newTag.setAttribute('label', label);
+                this.el.appendChild(newTag);
+                this.tagAdd.emit(label);
+            }
+        });
+        this.updateChildren();
+    }
+    removeLastTag() {
+        const tags = Array.from(this.el.querySelectorAll('ui-tag'));
+        if (tags.length > 0) {
+            const last = tags[tags.length - 1];
+            // Emit removal sync
+            const tagValue = last.value || last.label;
+            // Sync internal selection if needed
+            if (Array.isArray(this.value)) {
+                const idx = this.value.indexOf(tagValue);
+                if (idx > -1) {
+                    const newValue = [...this.value];
+                    newValue.splice(idx, 1);
+                    this.value = newValue;
+                    this.tagGroupChange.emit(this.value);
+                }
+            }
+            this.el.removeChild(last);
+            this.updateChildren();
+        }
+    }
+    removeTagByValue(tagValue) {
+        if (Array.isArray(this.value)) {
+            const index = this.value.indexOf(tagValue);
+            if (index > -1) {
+                const newValue = [...this.value];
+                newValue.splice(index, 1);
+                this.value = newValue;
+                this.tagGroupChange.emit(this.value);
+            }
+        }
+        else if (this.value === tagValue) {
+            this.value = '';
+            this.tagGroupChange.emit(this.value);
+        }
+        const tags = Array.from(this.el.querySelectorAll('ui-tag'));
+        const tag = tags.find(t => (t.value || t.label) === tagValue);
+        if (tag) {
+            this.el.removeChild(tag);
+        }
+        this.updateChildren();
+    }
+    handleAddTag = (ev) => {
+        const input = ev.detail.target;
+        const val = input.value;
+        const key = ev.detail.key;
+        if (key === 'Enter' || (this.delimiters.includes(key) && val.trim())) {
+            if (this.delimiters.includes(key)) {
+                ev.detail.preventDefault();
+            }
+            this.addTags(val);
+            input.value = '';
+            return;
+        }
+        if (key === 'Backspace' && !val) {
+            if (this.isLastTagHighlighted) {
+                this.removeLastTag();
+                this.isLastTagHighlighted = false;
+            }
+            else {
+                this.isLastTagHighlighted = true;
+                this.updateChildren();
+            }
+        }
+        else if (val || key !== 'Backspace') {
+            this.isLastTagHighlighted = false;
+            this.updateChildren();
+        }
+        if (key === 'Escape') {
+            this.isLastTagHighlighted = false;
+            this.updateChildren();
+        }
+    };
+    // private handlePaste = (ev: ClipboardEvent) => {
+    //     ev.preventDefault();
+    //     const text = ev.clipboardData.getData('text');
+    //     this.addTags(text);
+    //     (ev.target as HTMLInputElement).value = '';
+    // }
+    toggleExpand = () => {
+        this.isExpanded = !this.isExpanded;
+    };
+    render() {
+        const allTags = Array.from(this.el.querySelectorAll('ui-tag'));
+        const visibleTags = allTags.filter((t) => t.style.display !== 'none');
+        const canShowExpand = this.max > 0 && allTags.length > this.max;
+        const isEmpty = allTags.length === 0;
+        const noResults = allTags.length > 0 && visibleTags.length === 0;
+        const showInlineInput = (this.searchable || this.creatable) && !this.readOnly;
+        return (h(Host, { key: '6c10d465949f447fa8e70506522ccf0c5bbbb16d' }, h("div", { key: 'f119d30704ba77309e2556f41f179ffa7e3c05f2', class: {
+                'tag-group-container': true,
+                'is-readonly': this.readOnly,
+                'is-empty': isEmpty
+            } }, h("ui-stack", { key: 'afe10b0b6142a688eed69d1a6817c6efcac002cb', spacing: this.spacing, overlap: this.overlap, max: this.isExpanded ? 0 : this.max, wrap: "wrap" }, h("slot", { key: 'a3f61d253532ea24995c8c594b227fe389d1bce0' }), showInlineInput && (h("ui-input", { key: 'd2513ef2ea36f1c74db509f27ffcc51cf2b5b625', type: "text", class: "tag-group-inline-input", placeholder: isEmpty ? this.placeholder : '', value: this.searchQuery, onInputChange: this.handleSearch, onInputKeydown: this.handleAddTag, size: "sm", variant: "borderless", hideBorder: true, fullWidth: true }))), noResults && (h("div", { key: 'bb89ba2759c045e62522ca64fb4ba480717ffc2b', class: "tag-group-empty no-results" }, h("span", { key: '7ff0d17ae03cbb6415092177c6866143b82b6fda' }, "No tags match \"", this.searchQuery, "\""))) || (isEmpty && this.readOnly && (h("div", { key: 'f05bf41a4c408107c88e19c866d28a74563bd134', class: "tag-group-empty" }, h("ui-icon", { key: 'd688dc6f2c9093749469cbab269cd137e62d5889', name: "tag", library: "lucide", size: "1.4em" }), h("span", { key: '9a364908f459d9b8586310e8a6f0388e722637ed' }, "No items assigned")))), this.collapsible && canShowExpand && (h("ui-button", { key: 'ba66f535b3c914bd54ccfbb3f376229e3a061524', variant: "ghost", size: "sm", class: "tag-group-overflow-toggle", onClick: this.toggleExpand, label: this.isExpanded ? 'Show less' : `View all ${allTags.length} items` })))));
+    }
+    static get watchers() { return {
+        "isExpanded": [{
+                "handleGroupChange": 0
+            }],
+        "skeleton": [{
+                "handleGroupChange": 0
+            }],
+        "shape": [{
+                "handleGroupChange": 0
+            }],
+        "color": [{
+                "handleGroupChange": 0
+            }]
+    }; }
+};
+TagGroup.style = tagGroupCss();
+
+export { AvatarGroup as ui_avatar_group, Popover as ui_popover, SkeletonLoader as ui_skeleton, Stack as ui_stack, TagGroup as ui_tag_group };