npm - atomicuilibrary - Versions diffs - 0.0.1 → 0.1.3 - Mend

atomicuilibrary 0.0.1 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (675) hide show

package/dist/esm/ui-list-group_2.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-DUsoYu9r.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Dqu2zaH1.js';
-const listGroupCss = () => `.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;--header-padding:12px 16px;--header-bg-hover:rgba(0, 0, 0, 0.04);--header-bg-selected:var(--primary-color-light, #e0f2fe);--header-color-selected:var(--primary-color, #0284c7)}.group-header{padding:var(--header-padding);font-weight:600;font-size:0.875rem;color:var(--text-muted, #6b7280);text-transform:uppercase;letter-spacing:0.05em;display:flex;align-items:center;justify-content:space-between;user-select:none;border-radius:4px;margin-bottom:4px;transition:all 0.2s ease}.group-header-collapsible{cursor:pointer}.group-header-collapsible:hover{background-color:var(--header-bg-hover)}.group-header-selectable{cursor:pointer}.group-header-selectable:hover{background-color:var(--header-bg-hover)}.group-header-selected{background-color:var(--header-bg-selected);color:var(--header-color-selected)}.group-header-selected .group-icon,.group-header-selected .collapse-icon{color:var(--header-color-selected)}.group-header-dense{padding:8px 16px;font-size:0.8125rem}.header-left{display:flex;align-items:center;gap:12px;flex:1}.collapse-btn{background:none;border:none;padding:4px;cursor:pointer;color:inherit;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color 0.2s;margin-left:-8px}.collapse-btn:hover{background-color:rgba(0, 0, 0, 0.1)}.selection-checkbox{margin-right:-4px;display:flex;align-items:center;justify-content:center}.selection-checkbox .checkbox-box{width:20px;height:20px;border:2px solid var(--border-strong, #d1d5db);border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;background:var(--bg-primary, #ffffff)}.selection-checkbox .checkbox-box i{font-size:12px;color:var(--text-standard, #ffffff);transform:scale(0);transition:transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.selection-checkbox.selected .checkbox-box{background:var(--primary-color, #0ea5e9);border-color:var(--primary-color, #0ea5e9)}.selection-checkbox.selected .checkbox-box i{transform:scale(1)}.selection-checkbox:hover .checkbox-box{border-color:var(--primary-color, #0ea5e9)}.group-badge{padding:2px 8px;border-radius:12px;font-size:0.75rem;font-weight:600;margin-left:8px;line-height:1.4}.group-badge.badge-default{background:var(--bg-primary, #e5e7eb);color:var(--text-secondary, #374151)}.group-badge.badge-primary{background:var(--primary-color, #0ea5e9);color:var(--text-standard, #ffffff)}.group-badge.badge-secondary{background:var(--secondary-color, #64748b);color:var(--text-standard, #ffffff)}.group-badge.badge-success{background:var(--success-color, #22c55e);color:var(--text-standard, #ffffff)}.group-badge.badge-danger{background:var(--danger-color, var(--color-danger, #ef4444));color:var(--text-standard, #ffffff)}.group-badge.badge-warning{background:var(--warning-color, var(--color-warning, #f59e0b));color:var(--text-standard, #ffffff)}.group-badge.badge-info{background:var(--info-color, var(--color-primary, #10b981));color:var(--text-standard, #ffffff)}.header-actions{display:flex;align-items:center;gap:8px}.group-footer{padding:8px 16px;border-top:1px solid var(--border-subtle, #f3f4f6);font-size:0.875rem;color:var(--text-muted, #6b7280)}.group-footer:empty{display:none}.collapse-icon{font-size:0.75rem;transition:transform 0.2s ease;color:var(--text-muted, #9ca3af)}.group-icon{font-size:1rem;color:var(--text-muted, #6b7280)}.group-label{flex:1}.group-content{display:block;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);opacity:1;max-height:1000px;overflow:visible;transform-origin:top}.group-content-collapsed{max-height:0;opacity:0;overflow:hidden;transform:scaleY(0.95)}.group-divider{height:1px;background-color:var(--bg-primary, #e5e7eb);margin:8px 0}.list-group-skeleton{padding:16px}.list-group-skeleton .skeleton-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.list-group-skeleton .skeleton-header .skeleton-icon{width:24px;height:24px;border-radius:4px;background:var(--bg-primary, #e5e7eb);animation:pulse 1.5s infinite}.list-group-skeleton .skeleton-header .skeleton-text{height:16px;width:120px;border-radius:4px;background:var(--bg-primary, #e5e7eb);animation:pulse 1.5s infinite}.list-group-skeleton .skeleton-content{display:flex;flex-direction:column;gap:12px;padding-left:12px}.list-group-skeleton .skeleton-content .skeleton-item{height:48px;width:100%;border-radius:8px;background:var(--bg-secondary, #f3f4f6);animation:pulse 1.5s infinite}.list-group-skeleton .skeleton-content .skeleton-item:nth-child(2){animation-delay:0.1s}.list-group-skeleton .skeleton-content .skeleton-item:nth-child(3){animation-delay:0.2s}@keyframes pulse{0%{opacity:1}50%{opacity:0.5}100%{opacity:1}}`;
+const listGroupCss = () => `.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;--header-bg-hover:rgba(0, 0, 0, 0.04);--header-bg-selected:var(--primary-color-light, #e0f2fe);--header-color-selected:var(--primary-color, #0284c7)}.group-header{padding:var(--header-padding);font-weight:600;font-size:0.875rem;color:var(--text-muted, #6b7280);text-transform:uppercase;letter-spacing:0.05em;display:flex;align-items:center;justify-content:space-between;user-select:none;border-radius:4px;transition:all 0.2s ease}.group-header-collapsible{cursor:pointer}.group-header-collapsible:hover{background-color:var(--header-bg-hover)}.group-header-selectable{cursor:pointer}.group-header-selectable:hover{background-color:var(--header-bg-hover)}.group-header-selected{background-color:var(--header-bg-selected);color:var(--header-color-selected)}.group-header-selected .group-icon,.group-header-selected .collapse-icon{color:var(--header-color-selected)}.group-header-dense{padding:8px 16px;font-size:0.8125rem}.header-left{display:flex;align-items:center;gap:12px;flex:1}.collapse-btn{background:none;border:none;padding:4px;cursor:pointer;color:inherit;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color 0.2s;margin-left:-8px}.collapse-btn:hover{background-color:rgba(0, 0, 0, 0.1)}.selection-checkbox{margin-right:-4px;display:flex;align-items:center;justify-content:center}.selection-checkbox .checkbox-box{width:20px;height:20px;border:2px solid var(--border-strong, #d1d5db);border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;background:var(--bg-primary, #ffffff)}.selection-checkbox .checkbox-box i{font-size:12px;color:var(--text-standard, #ffffff);transform:scale(0);transition:transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.selection-checkbox.selected .checkbox-box{background:var(--primary-color, #0ea5e9);border-color:var(--primary-color, #0ea5e9)}.selection-checkbox.selected .checkbox-box i{transform:scale(1)}.selection-checkbox:hover .checkbox-box{border-color:var(--primary-color, #0ea5e9)}.group-badge{padding:2px 8px;border-radius:12px;font-size:0.75rem;font-weight:600;margin-left:8px;line-height:1.4}.group-badge.badge-default{background:var(--bg-primary, #e5e7eb);color:var(--text-secondary, #374151)}.group-badge.badge-primary{background:var(--primary-color, #0ea5e9);color:var(--text-standard, #ffffff)}.group-badge.badge-secondary{background:var(--secondary-color, #64748b);color:var(--text-standard, #ffffff)}.group-badge.badge-success{background:var(--success-color, #22c55e);color:var(--text-standard, #ffffff)}.group-badge.badge-danger{background:var(--danger-color, var(--color-danger, #ef4444));color:var(--text-standard, #ffffff)}.group-badge.badge-warning{background:var(--warning-color, var(--color-warning, #f59e0b));color:var(--text-standard, #ffffff)}.group-badge.badge-info{background:var(--info-color, var(--color-primary, #10b981));color:var(--text-standard, #ffffff)}.header-actions{display:flex;align-items:center;gap:8px}.group-footer{padding:8px 16px;border-top:1px solid var(--border-subtle, #f3f4f6);font-size:0.875rem;color:var(--text-muted, #6b7280)}.group-footer:empty{display:none}.collapse-icon{font-size:0.75rem;transition:transform 0.2s ease;color:var(--text-muted, #9ca3af)}.group-icon{font-size:1rem;color:var(--text-muted, #6b7280)}.group-label{flex:1}.group-content{display:block;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);opacity:1;max-height:1000px;overflow:visible;transform-origin:top}.group-content-collapsed{max-height:0;opacity:0;overflow:hidden;transform:scaleY(0.95)}.group-divider{height:1px;background-color:var(--bg-primary, #e5e7eb);margin:8px 0}.list-group-skeleton{padding:16px}.list-group-skeleton .skeleton-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.list-group-skeleton .skeleton-header .skeleton-icon{width:24px;height:24px;border-radius:4px;background:var(--bg-primary, #e5e7eb);animation:pulse 1.5s infinite}.list-group-skeleton .skeleton-header .skeleton-text{height:16px;width:120px;border-radius:4px;background:var(--bg-primary, #e5e7eb);animation:pulse 1.5s infinite}.list-group-skeleton .skeleton-content{display:flex;flex-direction:column;gap:12px;padding-left:12px}.list-group-skeleton .skeleton-content .skeleton-item{height:48px;width:100%;border-radius:8px;background:var(--bg-secondary, #f3f4f6);animation:pulse 1.5s infinite}.list-group-skeleton .skeleton-content .skeleton-item:nth-child(2){animation-delay:0.1s}.list-group-skeleton .skeleton-content .skeleton-item:nth-child(3){animation-delay:0.2s}@keyframes pulse{0%{opacity:1}50%{opacity:0.5}100%{opacity:1}}`;
 const AppListGroup = class {
     constructor(hostRef) {
@@ -31,13 +31,19 @@ const AppListGroup = class {
             this.groupToggle.emit({ expanded: this.expanded });
         }
     };
-    handleHeaderClick = (e) => {
+    didToggleFromButton = false;
+    handleHeaderClick = (_e) => {
+        if (this.didToggleFromButton) {
+            this.didToggleFromButton = false;
+            return;
+        }
         if (this.selectable) {
             this.selected = !this.selected;
         }
         this.groupClick.emit({ selected: this.selected, expanded: this.expanded });
         if (this.collapsible && !this.selectable) {
-            this.toggleExpanded(e);
+            this.expanded = !this.expanded;
+            this.groupToggle.emit({ expanded: this.expanded });
         }
     };
     renderSkeleton() {
@@ -59,15 +65,15 @@ const AppListGroup = class {
             'group-content-collapsed': !this.expanded,
         };
         const paddingLeft = this.level * 24;
-        return (h(Host, { style: { '--group-level': this.level.toString() } }, this.label && (h("div", { class: headerClasses, onClick: this.handleHeaderClick, style: { paddingLeft: `${paddingLeft + 12}px` } }, h("div", { class: "header-left" }, this.collapsible && (h("ui-button", { variant: "ghost", onClick: this.toggleExpanded, ariaLabel: this.expanded ? "Collapse group" : "Expand group", icon: this.expanded ? 'chevron-down' : 'chevron-right', iconLibrary: "fontawesome", iconOnly: true, size: "sm" })), this.selectable && (h("div", { class: {
+        return (h(Host, { style: { '--group-level': this.level.toString() } }, this.label && (h("div", { class: headerClasses, onClick: this.handleHeaderClick, style: { paddingLeft: `${paddingLeft + 12}px` } }, h("div", { class: "header-left" }, this.collapsible && (h("ui-button", { variant: "ghost", onClick: (e) => { this.didToggleFromButton = true; this.toggleExpanded(e); }, ariaLabel: this.expanded ? "Collapse group" : "Expand group", icon: this.expanded ? 'chevron-down' : 'chevron-right', iconLibrary: "fontawesome", iconOnly: true, size: "sm" })), this.selectable && (h("div", { class: {
                 'selection-checkbox': true,
                 'selected': this.selected
-            } }, h("div", { class: "checkbox-box" }, this.selected && h("ui-icon", { name: "check", library: "fontawesome" })))), this.icon && (h("ui-icon", { class: "group-icon", name: this.icon.replace(/^fa[sb]? fa-/, ''), library: "fontawesome" })), h("span", { class: "group-label" }, this.label), this.badge && (h("span", { class: `group-badge badge-${this.badgeColor}` }, this.badge))), h("div", { class: "header-actions" }, h("slot", { name: "header-actions" })))), h("div", { class: contentClasses, role: "region", "aria-expanded": this.expanded.toString() }, h("slot", null)), h("div", { class: "group-footer" }, h("slot", { name: "footer" })), this.divider && h("div", { class: "group-divider" })));
+            } }, h("div", { class: "checkbox-box" }, this.selected && h("ui-icon", { name: "check", library: "fontawesome" })))), this.icon && (h("ui-icon", { class: "group-icon", name: this.icon.replace(/^fa[sb]? fa-/, ''), library: "fontawesome" })), h("span", { class: "group-label" }, this.label), this.badge && (h("span", { class: `group-badge badge-${this.badgeColor}` }, this.badge))), h("div", { class: "header-actions" }, h("slot", { name: "header-actions" })))), h("div", { class: contentClasses, role: "region", "aria-expanded": this.expanded.toString() }, h("slot", null)), h("slot", { name: "footer" }), this.divider && h("div", { class: "group-divider" })));
     }
 };
 AppListGroup.style = listGroupCss();
-const listItemCss = () => `.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}.list-item{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:all 0.2s ease;user-select:none;outline:none;position:relative;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;width:100%;max-width:100%;box-sizing:border-box}.list-item:focus{outline:2px solid rgba(var(--color-primary-rgb, 59, 130, 246), 0.5);outline-offset:-2px}.collapse-icon{font-size:0.75rem;transition:transform 0.2s ease;color:var(--text-muted, #6b7280)}.list-item-icon{font-size:1.25rem;flex-shrink:0;transition:color 0.2s ease}.list-item-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--bg-secondary, #f1f5f9)}.list-item-avatar img{width:100%;height:100%;object-fit:cover}.list-item-image{width:48px;height:48px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--bg-secondary, #f1f5f9)}.list-item-image img{width:100%;height:100%;object-fit:cover}.list-item-sm .list-item-avatar{width:32px;height:32px}.list-item-sm .list-item-image{width:36px;height:36px}.list-item-lg .list-item-avatar{width:48px;height:48px}.list-item-lg .list-item-image{width:64px;height:64px}.skeleton-pulse{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);animation:list-skeleton-shimmer 1.5s infinite;pointer-events:none;z-index:10}.skeleton-text{height:0.8em;background:var(--bg-primary, #e2e8f0);border-radius:4px;width:80%;display:inline-block}.skeleton-text.list-item-sublabel{width:60%;margin-top:4px}.skeleton-circle{background:var(--bg-primary, #e2e8f0);border-radius:50%}.skeleton-rect{background:var(--bg-primary, #e2e8f0);border-radius:8px}@keyframes list-skeleton-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}.is-skeleton{pointer-events:none;background:transparent !important;border-color:var(--border-subtle, #f1f5f9) !important;transform:none !important}.list-item-highlight{background:var(--bg-primary, #dcfce7);color:var(--color-success, #166534);padding:0 2px;border-radius:2px;font-weight:700}.list-item-content{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0;overflow:hidden}.list-item-label-wrapper{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden}.list-item-label{font-size:1rem;color:var(--text-secondary, #374151);transition:color 0.2s ease;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-item-sublabel{font-size:0.875rem;color:var(--text-muted, #6b7280);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-item-multiline .list-item-content{padding:4px 0}.list-item-multiline .list-item-label{white-space:normal;line-height:1.5;word-wrap:break-word;word-break:break-word}.list-item-multiline .list-item-sublabel{white-space:normal;line-height:1.5;word-wrap:break-word;word-break:break-word}.list-item-action-icon{font-size:1.125rem;flex-shrink:0;padding:4px;border-radius:4px;transition:all 0.2s ease}.list-item-action-icon:hover{background:rgba(0, 0, 0, 0.05)}.list-item-action-icon:active{transform:scale(0.95)}.list-item-sm{padding:8px 12px;gap:8px}.list-item-sm .list-item-icon{font-size:1rem}.list-item-sm .list-item-label{font-size:0.875rem}.list-item-sm .list-item-action-icon{font-size:1rem}.list-item-md{padding:12px 16px;gap:12px}.list-item-lg{padding:16px 20px;gap:14px}.list-item-lg .list-item-icon{font-size:1.5rem}.list-item-lg .list-item-label{font-size:1.125rem}.list-item-lg .list-item-action-icon{font-size:1.25rem}.list-item-dense{padding:6px 12px;gap:8px}.list-item-dense .list-item-label{font-size:0.875rem}.list-item-text{background:transparent}.list-item-text:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(0, 0, 0, 0.04)}.list-item-filled{background:var(--bg-primary, #ffffff);border:1px solid var(--border-default, #e5e7eb);margin-bottom:2px;border-radius:6px}.list-item-filled:hover:not(.list-item-disabled):not(.list-item-readonly){background:var(--bg-primary, #f9fafb);border-color:var(--border-strong, #d1d5db)}.list-item-filled.list-item-primary{background:rgba(var(--color-success-rgb, 61, 205, 88), 0.05);border-color:rgba(var(--color-success-rgb, 61, 205, 88), 0.2)}.list-item-filled.list-item-primary:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(var(--color-success-rgb, 61, 205, 88), 0.1)}.list-item-filled.list-item-secondary{background:rgba(107, 114, 128, 0.05);border-color:rgba(107, 114, 128, 0.2)}.list-item-filled.list-item-secondary:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(107, 114, 128, 0.1)}.list-item-filled.list-item-success{background:rgba(22, 163, 74, 0.05);border-color:rgba(22, 163, 74, 0.2)}.list-item-filled.list-item-success:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(22, 163, 74, 0.1)}.list-item-filled.list-item-danger{background:rgba(var(--color-danger-rgb, 220, 38, 38), 0.05);border-color:rgba(var(--color-danger-rgb, 220, 38, 38), 0.2)}.list-item-filled.list-item-danger:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(var(--color-danger-rgb, 220, 38, 38), 0.1)}.list-item-filled.list-item-warning{background:rgba(var(--color-warning-rgb, 245, 158, 11), 0.05);border-color:rgba(var(--color-warning-rgb, 245, 158, 11), 0.2)}.list-item-filled.list-item-warning:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(var(--color-warning-rgb, 245, 158, 11), 0.1)}.list-item-filled.list-item-info{background:rgba(8, 145, 178, 0.05);border-color:rgba(8, 145, 178, 0.2)}.list-item-filled.list-item-info:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(8, 145, 178, 0.1)}.list-item-outlined{background:transparent;border:1px solid var(--border-default, #e5e7eb);margin-bottom:2px;border-radius:6px}.list-item-outlined:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(0, 0, 0, 0.02);border-color:var(--border-strong, #d1d5db)}.list-item-outlined.list-item-primary{border-color:rgba(var(--color-success-rgb, 61, 205, 88), 0.3)}.list-item-outlined.list-item-primary:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(var(--color-success-rgb, 61, 205, 88), 0.05);border-color:rgba(var(--color-success-rgb, 61, 205, 88), 0.5)}.list-item-outlined.list-item-secondary{border-color:rgba(107, 114, 128, 0.3)}.list-item-outlined.list-item-secondary:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(107, 114, 128, 0.05);border-color:rgba(107, 114, 128, 0.5)}.list-item-outlined.list-item-success{border-color:rgba(22, 163, 74, 0.3)}.list-item-outlined.list-item-success:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(22, 163, 74, 0.05);border-color:rgba(22, 163, 74, 0.5)}.list-item-outlined.list-item-danger{border-color:rgba(var(--color-danger-rgb, 220, 38, 38), 0.3)}.list-item-outlined.list-item-danger:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(var(--color-danger-rgb, 220, 38, 38), 0.05);border-color:rgba(var(--color-danger-rgb, 220, 38, 38), 0.5)}.list-item-outlined.list-item-warning{border-color:rgba(var(--color-warning-rgb, 245, 158, 11), 0.3)}.list-item-outlined.list-item-warning:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(var(--color-warning-rgb, 245, 158, 11), 0.05);border-color:rgba(var(--color-warning-rgb, 245, 158, 11), 0.5)}.list-item-outlined.list-item-info{border-color:rgba(8, 145, 178, 0.3)}.list-item-outlined.list-item-info:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(8, 145, 178, 0.05);border-color:rgba(8, 145, 178, 0.5)}.list-item-soft{background:rgba(0, 0, 0, 0.02);border-radius:6px;margin-bottom:2px}.list-item-soft:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(0, 0, 0, 0.05)}.list-item-soft.list-item-primary{background:rgba(var(--color-success-rgb, 61, 205, 88), 0.08)}.list-item-soft.list-item-primary:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(var(--color-success-rgb, 61, 205, 88), 0.12)}.list-item-soft.list-item-secondary{background:rgba(107, 114, 128, 0.08)}.list-item-soft.list-item-secondary:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(107, 114, 128, 0.12)}.list-item-soft.list-item-success{background:rgba(22, 163, 74, 0.08)}.list-item-soft.list-item-success:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(22, 163, 74, 0.12)}.list-item-soft.list-item-danger{background:rgba(var(--color-danger-rgb, 220, 38, 38), 0.08)}.list-item-soft.list-item-danger:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(var(--color-danger-rgb, 220, 38, 38), 0.12)}.list-item-soft.list-item-warning{background:rgba(var(--color-warning-rgb, 245, 158, 11), 0.08)}.list-item-soft.list-item-warning:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(var(--color-warning-rgb, 245, 158, 11), 0.12)}.list-item-soft.list-item-info{background:rgba(8, 145, 178, 0.08)}.list-item-soft.list-item-info:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(8, 145, 178, 0.12)}.list-item-default .list-item-icon{color:var(--text-muted, #6b7280)}.list-item-primary .list-item-icon{color:var(--color-success, #3dcd58)}.list-item-secondary .list-item-icon{color:var(--text-muted, #6b7280)}.list-item-success .list-item-icon{color:var(--color-success, #16a34a)}.list-item-danger .list-item-icon{color:var(--color-danger-hover, #dc2626)}.list-item-warning .list-item-icon{color:var(--color-warning, #f59e0b)}.list-item-info .list-item-icon{color:var(--color-info-hover, #0891b2)}.list-item-text.list-item-selected.list-item-primary{background:rgba(var(--color-success-rgb, 61, 205, 88), 0.08)}.list-item-text.list-item-selected.list-item-primary .list-item-icon,.list-item-text.list-item-selected.list-item-primary .list-item-label{color:var(--color-success, #3dcd58);font-weight:600}.list-item-text.list-item-selected.list-item-secondary{background:rgba(107, 114, 128, 0.08)}.list-item-text.list-item-selected.list-item-secondary .list-item-icon,.list-item-text.list-item-selected.list-item-secondary .list-item-label{color:var(--text-secondary, #4b5563);font-weight:600}.list-item-text.list-item-selected.list-item-success{background:rgba(22, 163, 74, 0.08)}.list-item-text.list-item-selected.list-item-success .list-item-icon,.list-item-text.list-item-selected.list-item-success .list-item-label{color:var(--color-success, #16a34a);font-weight:600}.list-item-text.list-item-selected.list-item-danger{background:rgba(var(--color-danger-rgb, 220, 38, 38), 0.08)}.list-item-text.list-item-selected.list-item-danger .list-item-icon,.list-item-text.list-item-selected.list-item-danger .list-item-label{color:var(--color-danger-hover, #dc2626);font-weight:600}.list-item-text.list-item-selected.list-item-warning{background:rgba(var(--color-warning-rgb, 245, 158, 11), 0.08)}.list-item-text.list-item-selected.list-item-warning .list-item-icon,.list-item-text.list-item-selected.list-item-warning .list-item-label{color:var(--color-warning-hover, #d97706);font-weight:600}.list-item-text.list-item-selected.list-item-info{background:rgba(8, 145, 178, 0.08)}.list-item-text.list-item-selected.list-item-info .list-item-icon,.list-item-text.list-item-selected.list-item-info .list-item-label{color:var(--color-info-hover, #0891b2);font-weight:600}.list-item-text.list-item-selected.list-item-default{background:rgba(0, 0, 0, 0.05)}.list-item-text.list-item-selected.list-item-default .list-item-label{font-weight:600}.list-item-filled.list-item-selected.list-item-primary{background:var(--bg-primary, #d1fae5);border-color:var(--color-success, #3dcd58)}.list-item-filled.list-item-selected.list-item-primary .list-item-icon,.list-item-filled.list-item-selected.list-item-primary .list-item-label{color:var(--color-success, #009B4E);font-weight:600}.list-item-filled.list-item-selected.list-item-success{background:var(--bg-primary, #dcfce7);border-color:var(--color-success, #16a34a)}.list-item-filled.list-item-selected.list-item-success .list-item-icon,.list-item-filled.list-item-selected.list-item-success .list-item-label{color:var(--color-success, #166534);font-weight:600}.list-item-filled.list-item-selected.list-item-danger{background:var(--bg-primary, #fee2e2);border-color:var(--color-danger-hover, #dc2626)}.list-item-filled.list-item-selected.list-item-danger .list-item-icon,.list-item-filled.list-item-selected.list-item-danger .list-item-label{color:var(--color-danger, #991b1b);font-weight:600}.list-item-outlined.list-item-selected.list-item-primary{border-color:var(--color-success, #3dcd58);border-width:2px}.list-item-outlined.list-item-selected.list-item-primary .list-item-icon,.list-item-outlined.list-item-selected.list-item-primary .list-item-label{color:var(--color-success, #3dcd58);font-weight:600}.list-item-outlined.list-item-selected.list-item-success{border-color:var(--color-success, #16a34a);border-width:2px}.list-item-outlined.list-item-selected.list-item-success .list-item-icon,.list-item-outlined.list-item-selected.list-item-success .list-item-label{color:var(--color-success, #16a34a);font-weight:600}.list-item-soft.list-item-selected.list-item-primary{background:rgba(var(--color-success-rgb, 61, 205, 88), 0.12)}.list-item-soft.list-item-selected.list-item-primary .list-item-icon,.list-item-soft.list-item-selected.list-item-primary .list-item-label{color:var(--color-success, #009B4E);font-weight:600}.list-item-selected{border-radius:8px}.list-item-soft.list-item-selected.list-item-success{background:rgba(22, 163, 74, 0.12);border-radius:8px}.list-item-soft.list-item-selected.list-item-success .list-item-icon,.list-item-soft.list-item-selected.list-item-success .list-item-label{color:var(--color-success, #15803d);font-weight:600}.list-item-disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.list-item-readonly{cursor:default}.list-item-divider::after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--bg-primary, #e5e7eb)}.list-item-link .list-item-label{text-decoration:none}.list-item-link:hover .list-item-label{text-decoration:underline}.list-item-interactive{cursor:pointer}.list-item:not(.list-item-interactive){cursor:default}.list-item-children{display:flex;flex-direction:column;animation:slideDown 0.2s ease}@keyframes slideDown{from{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.list-item-focused{box-shadow:0 0 0 2px rgba(var(--color-primary-rgb, 59, 130, 246), 0.3)}.list-item-hovered:not(.list-item-disabled):not(.list-item-readonly){transform:translateX(2px);border-radius:8px}.list-item-context-menu{position:relative}.list-item-context-menu .list-item-context-icon{font-size:0.875rem;color:var(--text-muted, #9ca3af);margin-left:auto;transition:transform 0.2s ease}.list-item-context-menu.list-item-context-menu-open .list-item-context-icon{transform:rotate(90deg)}.list-item-context-menu:hover .list-item-context-icon{color:var(--text-muted, #6b7280)}.context-menu{min-width:200px;background:var(--bg-primary, #ffffff);border-radius:8px;box-shadow:0 10px 25px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);padding:8px 0;animation:contextMenuFadeIn 0.15s ease-out;overflow:hidden;max-height:400px;overflow-y:auto}.context-menu ::slotted(ui-list-item){margin:0;border-radius:0}.context-menu::-webkit-scrollbar{width:6px}.context-menu::-webkit-scrollbar-track{background:transparent}.context-menu::-webkit-scrollbar-thumb{background:var(--bg-secondary, #d1d5db);border-radius:3px}.context-menu::-webkit-scrollbar-thumb:hover{background:var(--color-primary, #9ca3af)}@keyframes contextMenuFadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.context-menu-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9998;background:transparent}.list-item-checkbox{display:flex;align-items:center;cursor:pointer;margin-right:4px}.list-item-checkbox input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}.list-item-checkbox .checkbox-icon{font-size:1.25rem;color:var(--text-muted, #9ca3af);transition:all 0.2s ease}.list-item-checkbox:hover .checkbox-icon{color:var(--text-muted, #6b7280)}.list-item-checked .checkbox-icon{color:var(--color-success, #3dcd58) !important}.list-item-disabled .list-item-checkbox,.list-item-readonly .list-item-checkbox{cursor:not-allowed;opacity:0.5}.list-item-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:12px;font-size:0.75rem;font-weight:600;line-height:1;white-space:nowrap}.list-item-badge.badge-default{background:var(--bg-secondary, #f3f4f6);color:var(--text-secondary, #374151)}.list-item-badge.badge-primary{background:var(--bg-primary, #d1fae5);color:var(--color-success, #009B4E)}.list-item-badge.badge-secondary{background:var(--bg-secondary, #f3f4f6);color:var(--text-secondary, #4b5563)}.list-item-badge.badge-success{background:var(--bg-primary, #d1fae5);color:var(--color-primary, #065f46)}.list-item-badge.badge-danger{background:var(--bg-primary, #fee2e2);color:var(--color-danger, #991b1b)}.list-item-badge.badge-warning{background:var(--bg-primary, #fef3c7);color:var(--color-danger, #92400e)}.list-item-badge.badge-info{background:var(--bg-primary, #e0f2fe);color:var(--color-primary, #075985)}.list-item-counter{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--color-success, #3dcd58);color:var(--text-standard, #ffffff);font-size:0.75rem;font-weight:600;line-height:1;margin-left:auto;flex-shrink:0}.list-item-right{display:flex;align-items:center;flex-direction:column;gap:6px;margin-left:auto;flex-shrink:0;max-width:50%;overflow:hidden}.list-item-pills{display:flex;flex-wrap:wrap;gap:6px;align-items:center;max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}.list-item-pills::-webkit-scrollbar{height:4px}.list-item-pills::-webkit-scrollbar-thumb{background:var(--bg-secondary, #d1d5db);border-radius:2px}.pill{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:16px;font-size:0.75rem;font-weight:500;cursor:pointer;transition:all 0.2s ease;white-space:nowrap;flex-shrink:0}.pill i{font-size:0.75rem}.pill:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(0, 0, 0, 0.1)}.pill:active{transform:translateY(0)}.pill.pill-default{background:var(--bg-secondary, #f3f4f6);color:var(--text-secondary, #374151)}.pill.pill-default:hover{background:var(--bg-primary, #e5e7eb)}.pill.pill-primary{background:var(--bg-primary, #d1fae5);color:var(--color-success, #009B4E)}.pill.pill-primary:hover{background:var(--color-success, #a7f3d0)}.pill.pill-secondary{background:var(--bg-secondary, #f3f4f6);color:var(--text-secondary, #4b5563)}.pill.pill-secondary:hover{background:var(--bg-primary, #e5e7eb)}.pill.pill-success{background:var(--bg-primary, #d1fae5);color:var(--color-primary, #065f46)}.pill.pill-success:hover{background:var(--color-success, #a7f3d0)}.pill.pill-danger{background:var(--bg-primary, #fee2e2);color:var(--color-danger, #991b1b)}.pill.pill-danger:hover{background:var(--color-danger, #fecaca)}.pill.pill-warning{background:var(--bg-primary, #fef3c7);color:var(--color-danger, #92400e)}.pill.pill-warning:hover{background:var(--color-primary, #fde68a)}.pill.pill-info{background:var(--bg-primary, #e0f2fe);color:var(--color-primary, #075985)}.pill.pill-info:hover{background:var(--color-primary, #bae6fd)}.list-item-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}.list-item-tags::-webkit-scrollbar{height:4px}.list-item-tags::-webkit-scrollbar-thumb{background:var(--bg-secondary, #d1d5db);border-radius:2px}.tag{display:inline-flex;align-items:center;padding:2px 8px;background:var(--bg-secondary, #f3f4f6);color:var(--text-muted, #6b7280);border-radius:4px;font-size:0.75rem;font-weight:500;cursor:pointer;transition:all 0.2s ease;white-space:nowrap;flex-shrink:0}.tag:hover{background:var(--bg-primary, #e5e7eb);color:var(--text-secondary, #374151)}.tag:active{transform:scale(0.95)}.list-item-sm .list-item-checkbox .checkbox-icon{font-size:1rem}.list-item-sm .list-item-badge{font-size:0.625rem;padding:1px 6px}.list-item-sm .list-item-counter{min-width:16px;height:16px;font-size:0.625rem}.list-item-sm .pill{padding:2px 8px;font-size:0.625rem}.list-item-sm .tag{padding:1px 6px;font-size:0.625rem}.list-item-sm .list-item-sublabel{font-size:0.75rem}.list-item-lg .list-item-checkbox .checkbox-icon{font-size:1.5rem}.list-item-lg .list-item-badge{font-size:0.875rem;padding:3px 10px}.list-item-lg .list-item-counter{min-width:24px;height:24px;font-size:0.875rem}.list-item-lg .pill{padding:6px 12px;font-size:0.875rem}.list-item-lg .tag{padding:3px 10px;font-size:0.875rem}.list-item-lg .list-item-sublabel{font-size:1rem}.list-item-left-media{display:flex;align-items:center;gap:inherit;flex-shrink:0}.list-item-right-media{display:flex;align-items:center;gap:inherit;flex-shrink:0;margin-left:12px}.list-item-avatar-right .list-item-counter,.list-item-avatar-right .list-item-action-icon,.list-item-avatar-right .list-item-context-icon{margin-left:8px}.list-item-avatar-right .list-item-right-media{margin-left:auto}.list-item.list-item-selection-primary.list-item-selected{background:rgba(var(--color-success-rgb, 61, 205, 88), 0.12) !important;border-color:var(--color-success, #3dcd58) !important}.list-item.list-item-selection-primary.list-item-selected .list-item-label{color:var(--color-success, #009B4E) !important}.list-item.list-item-selection-primary.list-item-selected .list-item-icon{color:var(--color-success, #009B4E) !important}.list-item.list-item-selection-secondary.list-item-selected{background:rgba(107, 114, 128, 0.12) !important;border-color:var(--color-primary, #6b7280) !important}.list-item.list-item-selection-secondary.list-item-selected .list-item-label{color:var(--color-primary, #4b5563) !important}.list-item.list-item-selection-secondary.list-item-selected .list-item-icon{color:var(--color-primary, #4b5563) !important}.list-item.list-item-selection-success.list-item-selected{background:rgba(22, 163, 74, 0.12) !important;border-color:var(--color-success, #16a34a) !important}.list-item.list-item-selection-success.list-item-selected .list-item-label{color:var(--color-success, #15803d) !important}.list-item.list-item-selection-success.list-item-selected .list-item-icon{color:var(--color-success, #15803d) !important}.list-item.list-item-selection-danger.list-item-selected{background:rgba(var(--color-danger-rgb, 220, 38, 38), 0.12) !important;border-color:var(--color-danger-hover, #dc2626) !important}.list-item.list-item-selection-danger.list-item-selected .list-item-label{color:var(--color-danger, #991b1b) !important}.list-item.list-item-selection-danger.list-item-selected .list-item-icon{color:var(--color-danger, #991b1b) !important}.list-item.list-item-selection-warning.list-item-selected{background:rgba(var(--color-warning-rgb, 245, 158, 11), 0.12) !important;border-color:var(--color-warning, #f59e0b) !important}.list-item.list-item-selection-warning.list-item-selected .list-item-label{color:var(--color-danger, #92400e) !important}.list-item.list-item-selection-warning.list-item-selected .list-item-icon{color:var(--color-danger, #92400e) !important}.list-item.list-item-selection-info.list-item-selected{background:rgba(8, 145, 178, 0.12) !important;border-color:var(--color-info-hover, #0891b2) !important}.list-item.list-item-selection-info.list-item-selected .list-item-label{color:var(--color-primary, #075985) !important}.list-item.list-item-selection-info.list-item-selected .list-item-icon{color:var(--color-primary, #075985) !important}.list-item.list-item-hover-primary:hover:not(.list-item-selected):not(.list-item-disabled){background:rgba(var(--color-success-rgb, 61, 205, 88), 0.05) !important}.list-item.list-item-hover-secondary:hover:not(.list-item-selected):not(.list-item-disabled){background:rgba(107, 114, 128, 0.05) !important}.list-item.list-item-hover-success:hover:not(.list-item-selected):not(.list-item-disabled){background:rgba(22, 163, 74, 0.05) !important}.list-item.list-item-hover-danger:hover:not(.list-item-selected):not(.list-item-disabled){background:rgba(var(--color-danger-rgb, 220, 38, 38), 0.05) !important}.list-item.list-item-hover-warning:hover:not(.list-item-selected):not(.list-item-disabled){background:rgba(var(--color-warning-rgb, 245, 158, 11), 0.05) !important}.list-item.list-item-hover-info:hover:not(.list-item-selected):not(.list-item-disabled){background:rgba(8, 145, 178, 0.05) !important}.list-item-lock-icon{font-size:0.875rem;color:var(--text-muted, #9ca3af);margin-left:12px;flex-shrink:0}.list-item-menu-icon{font-size:1rem;color:var(--text-muted, #6b7280);margin-left:8px;padding:6px;border-radius:6px;transition:all 0.2s ease;flex-shrink:0;cursor:pointer}.list-item-menu-icon:hover{background:rgba(0, 0, 0, 0.08);color:var(--text-primary, #1f2937)}.list-item-menu-icon:active{transform:scale(0.9)}.list-item-locked{cursor:default !important}.list-item-locked .list-item-label{color:var(--text-muted, #9ca3af) !important}.list-item-locked .list-item-icon{opacity:0.5}.list-item-locked:hover{transform:none !important;background:transparent !important}.swipe-actions-container{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;pointer-events:none;z-index:-1;overflow:hidden;border-radius:inherit}.swipe-action{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--text-standard, #ffffff);transition:opacity 0.2s ease}.swipe-action ui-icon{font-size:1.5rem}.swipe-action.left{justify-content:flex-start;padding-left:24px;background-color:var(--color-success, #10b981)}.swipe-action.right{justify-content:flex-end;padding-right:24px;background-color:var(--color-danger, #ef4444)}.bg-success{background-color:var(--color-success, #10b981)}.bg-danger{background-color:var(--color-danger, #ef4444)}.bg-warning{background-color:var(--color-warning, #f59e0b)}.bg-info{background-color:var(--color-primary, #10b981)}.bg-primary{background-color:var(--color-success, #3dcd58)}.list-item[style*=transform]{transition:transform 0.1s ease-out}.list-item-grid{flex-direction:column !important;align-items:center !important;text-align:center;padding:24px 16px !important;border:1px solid var(--border-subtle, #f1f5f9);border-radius:16px !important;background:var(--bg-primary, #ffffff);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.05)}.list-item-grid:hover{transform:translateY(-4px) !important;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1);border-color:var(--color-primary, #10b981)}.list-item-grid .list-item-avatar,.list-item-grid .list-item-image{width:64px !important;height:64px !important;margin-bottom:16px}.list-item-grid .list-item-content{align-items:center;width:100%}.list-item-grid .list-item-label{font-size:1.125rem;font-weight:700}.list-item-grid .list-item-collaborators{margin-top:12px}.list-item-tree-lines{position:relative}.list-item-tree-lines::before{content:"";position:absolute;left:26px;top:-12px;bottom:50%;width:2px;background:var(--color-primary, #cbd5e1)}.list-item-tree-lines::after{content:"";position:absolute;left:26px;top:50%;width:16px;height:2px;background:var(--color-primary, #cbd5e1);border-radius:0 2px 2px 0}.list-item-collaborators{display:flex;align-items:center;margin-top:4px}.list-item.focused-item{outline:2px solid var(--color-primary, #10b981);outline-offset:-2px;background:var(--bg-primary, #eff6ff)}.list-item-avatar-container{position:relative;display:inline-flex}.list-item-status{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid var(--bg-primary, #ffffff);z-index:2}.list-item-status.pos-bottom-right{bottom:0;right:0}.list-item-status.pos-top-right{top:0;right:0}.list-item-status.status-online{background:var(--color-success, #10b981)}.list-item-status.status-busy{background:var(--color-danger, #ef4444)}.list-item-status.status-away{background:var(--color-warning, #f59e0b)}.list-item-status.status-offline{background:var(--color-primary, #94a3b8)}.list-item-status.status-online::after{content:"";position:absolute;width:100%;height:100%;background:inherit;border-radius:50%;animation:pulseStatus 2s infinite;opacity:0.6;left:0;top:0}@keyframes pulseStatus{0%{transform:scale(1);opacity:0.6}100%{transform:scale(3);opacity:0}}.list-item-progress-container{display:flex;align-items:center;gap:8px;margin-top:6px;width:100%}.list-item-progress-container .list-item-progress-bar{height:4px;background:var(--color-primary, #10b981);border-radius:2px;transition:width 0.3s ease}.list-item-progress-container .list-item-progress-text{font-size:10px;font-weight:700;color:var(--text-muted, #64748b)}.list-item-star-icon{font-size:0.875rem;color:var(--color-primary, #cbd5e1);margin-right:8px;cursor:pointer;transition:all 0.2s}.list-item-star-icon:hover{color:var(--color-primary, #94a3b8);transform:scale(1.1)}.list-item-star-icon.is-starred{color:var(--color-warning, #f59e0b) !important}.list-item-expandable-section{width:100%;background:var(--bg-primary, #f8fafc);overflow:hidden;border-top:1px solid var(--border-subtle, #f1f5f9);animation:expandDetail 0.4s cubic-bezier(0.4, 0, 0.2, 1)}.list-item-expandable-section .expandable-detail-content{padding:16px 24px 16px 56px}@keyframes expandDetail{from{max-height:0;opacity:0}to{max-height:500px;opacity:1}}.list-item-media-avatar-group{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex-shrink:0}.list-item-right-collaborators{display:flex;align-items:center;margin-left:auto;margin-right:12px}.is-wobbling{animation:wobbleNo 0.4s ease-in-out}@keyframes wobbleNo{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}.list-item-pulse{position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 0 rgba(var(--color-danger-rgb, 239, 68, 68), 0);animation:etherealPulse 2s infinite;z-index:1}@keyframes etherealPulse{0%{box-shadow:0 0 0 0 rgba(var(--color-danger-rgb, 239, 68, 68), 0.4)}70%{box-shadow:0 0 0 12px rgba(var(--color-danger-rgb, 239, 68, 68), 0)}100%{box-shadow:0 0 0 0 rgba(var(--color-danger-rgb, 239, 68, 68), 0)}}.presence-halo{position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%;border:2px solid var(--bg-primary, #ffffff);box-shadow:0 0 0 2px rgba(0, 0, 0, 0.1)}.presence-halo.presence-blue{background:var(--color-primary, #10b981)}.presence-halo.presence-purple{background:var(--color-primary, #a855f7)}.list-item-density-compact{padding-top:4px !important;padding-bottom:4px !important;min-height:40px}.list-item-density-compact .list-item-sublabel,.list-item-density-compact .list-item-tags,.list-item-density-compact .list-item-progress-container{display:none}.list-item-density-compact .list-item-avatar-container,.list-item-density-compact ui-avatar{transform:scale(0.8)}.list-item-density-cozy{padding-top:20px !important;padding-bottom:20px !important}.list-item-density-cozy .list-item-label{font-size:1.1rem;font-weight:700;color:var(--text-primary, #0f172a)}.list-item-density-cozy .list-item-avatar-container,.list-item-density-cozy ui-avatar{transform:scale(1.15)}`;
+const listItemCss = () => `.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;overflow:visible}.list-item{display:flex;align-items:center;padding:6px 8px;cursor:pointer;transition:all 0.2s ease;user-select:none;outline:none;position:relative;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;width:100%;max-width:100%;box-sizing:border-box;overflow:visible}.list-item:focus{outline:2px solid rgba(var(--color-primary-rgb, 59, 130, 246), 0.5);outline-offset:-2px}.collapse-icon{font-size:0.75rem;transition:transform 0.2s ease;color:var(--text-muted, #6b7280)}.list-item-icon{font-size:1.25rem;flex-shrink:0;transition:color 0.2s ease}.list-item-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--bg-secondary, #f1f5f9)}.list-item-avatar img{width:100%;height:100%;object-fit:cover}.list-item-image{width:48px;height:48px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--bg-secondary, #f1f5f9)}.list-item-image img{width:100%;height:100%;object-fit:cover}.skeleton-pulse{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);animation:list-skeleton-shimmer 1.5s infinite;pointer-events:none;z-index:10}.skeleton-text{height:0.8em;background:var(--bg-pressed, #e2e8f0);border-radius:4px;width:80%;display:inline-block;position:relative;overflow:hidden}.skeleton-text.list-item-sublabel{width:60%;margin-top:4px}.skeleton-circle{background:var(--bg-pressed, #e2e8f0);border-radius:50%;position:relative;overflow:hidden}.skeleton-rect{background:var(--bg-pressed, #e2e8f0);border-radius:8px;position:relative;overflow:hidden}@keyframes list-skeleton-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}.is-skeleton{pointer-events:none;background:transparent !important;border-color:var(--border-subtle, #f1f5f9) !important;transform:none !important}.list-item-highlight{background:var(--bg-primary, #dcfce7);color:var(--color-success, #166534);padding:0 2px;border-radius:2px;font-weight:700}.list-item-content{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}.list-item-subline{display:flex;align-items:center;gap:8px;min-width:0}.list-item-skeleton-content{align-items:flex-start;justify-content:center;gap:6px;width:100%}.list-item-skeleton-content .list-item-label-wrapper,.list-item-skeleton-content .list-item-subline{width:100%;min-width:0;overflow:visible}.list-item-skeleton-content .list-item-label-wrapper{align-items:flex-start}.list-item-skeleton-content .list-item-subline{margin-top:0}.list-item-skeleton-content ui-skeleton{display:block;max-width:100%;min-width:0;flex-shrink:0}.list-item-label-wrapper{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden}.list-item-label{font-size:1rem;color:var(--text-secondary, #374151);transition:color 0.2s ease;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-item-sublabel{font-size:0.875rem;color:var(--text-muted, #6b7280);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-item-multiline .list-item-content{padding:4px 0}.list-item-multiline .list-item-label{white-space:normal;line-height:1.5;word-wrap:break-word;word-break:break-word}.list-item-multiline .list-item-sublabel{white-space:normal;line-height:1.5;word-wrap:break-word;word-break:break-word}.list-item-action-icon{font-size:1.125rem;flex-shrink:0;padding:4px;border-radius:4px;transition:all 0.2s ease}.list-item-action-icon:hover{background:rgba(0, 0, 0, 0.05)}.list-item-action-icon:active{transform:scale(0.95)}.list-item-sm{padding:8px 12px;gap:8px}.list-item-sm .list-item-avatar{width:32px;height:32px}.list-item-sm .list-item-image{width:36px;height:36px}.list-item-sm .list-item-icon{font-size:1rem}.list-item-sm .list-item-label{font-size:0.875rem}.list-item-sm .list-item-action-icon{font-size:1rem}.list-item-sm .list-item-checkbox .checkbox-icon{font-size:1rem}.list-item-sm .list-item-ghost-layer{top:6px;right:6px}.list-item-sm .ghost-popover-trigger{width:18px;height:18px}.list-item-sm .ghost-popover-trigger ui-icon{font-size:0.625rem}.list-item-sm .ghost-meta{font-size:0.5625rem}.list-item-sm .list-item-badge{font-size:0.625rem;padding:1px 6px}.list-item-sm .list-item-counter{min-width:16px;height:16px;font-size:0.625rem}.list-item-sm .pill{padding:2px 8px;font-size:0.625rem}.list-item-sm .tag{padding:1px 6px;font-size:0.625rem}.list-item-sm .list-item-sublabel{font-size:0.75rem}.list-item-filled.list-item-primary{background:rgba(var(--color-primary-rgb, 59, 130, 246), 0.05);border-color:rgba(var(--color-primary-rgb, 59, 130, 246), 0.2)}.list-item-filled.list-item-primary:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(var(--color-primary-rgb, 59, 130, 246), 0.1)}.list-item-filled.list-item-secondary{background:rgba(107, 114, 128, 0.05);border-color:rgba(107, 114, 128, 0.2)}.list-item-filled.list-item-secondary:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(107, 114, 128, 0.1)}.list-item-filled.list-item-success{background:rgba(22, 163, 74, 0.05);border-color:rgba(22, 163, 74, 0.2)}.list-item-filled.list-item-success:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(22, 163, 74, 0.1)}.list-item-filled.list-item-danger{background:rgba(var(--color-danger-rgb, 220, 38, 38), 0.05);border-color:rgba(var(--color-danger-rgb, 220, 38, 38), 0.2)}.list-item-filled.list-item-danger:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(var(--color-danger-rgb, 220, 38, 38), 0.1)}.list-item-filled.list-item-warning{background:rgba(var(--color-warning-rgb, 245, 158, 11), 0.05);border-color:rgba(var(--color-warning-rgb, 245, 158, 11), 0.2)}.list-item-filled.list-item-warning:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(var(--color-warning-rgb, 245, 158, 11), 0.1)}.list-item-filled.list-item-info{background:rgba(8, 145, 178, 0.05);border-color:rgba(8, 145, 178, 0.2)}.list-item-filled.list-item-info:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(8, 145, 178, 0.1)}.list-item-outlined{background:transparent;border:1px solid var(--border-default, #e5e7eb);margin-bottom:2px;border-radius:6px}.list-item-outlined:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(0, 0, 0, 0.02);border-color:var(--border-strong, #d1d5db)}.list-item-outlined.list-item-primary{border-color:rgba(var(--color-primary-rgb, 59, 130, 246), 0.3)}.list-item-outlined.list-item-primary:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(var(--color-primary-rgb, 59, 130, 246), 0.05);border-color:rgba(var(--color-primary-rgb, 59, 130, 246), 0.5)}.list-item-outlined.list-item-secondary{border-color:rgba(107, 114, 128, 0.3)}.list-item-outlined.list-item-secondary:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(107, 114, 128, 0.05);border-color:rgba(107, 114, 128, 0.5)}.list-item-outlined.list-item-success{border-color:rgba(22, 163, 74, 0.3)}.list-item-outlined.list-item-success:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(22, 163, 74, 0.05);border-color:rgba(22, 163, 74, 0.5)}.list-item-outlined.list-item-danger{border-color:rgba(var(--color-danger-rgb, 220, 38, 38), 0.3)}.list-item-outlined.list-item-danger:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(var(--color-danger-rgb, 220, 38, 38), 0.05);border-color:rgba(var(--color-danger-rgb, 220, 38, 38), 0.5)}.list-item-outlined.list-item-warning{border-color:rgba(var(--color-warning-rgb, 245, 158, 11), 0.3)}.list-item-outlined.list-item-warning:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(var(--color-warning-rgb, 245, 158, 11), 0.05);border-color:rgba(var(--color-warning-rgb, 245, 158, 11), 0.5)}.list-item-outlined.list-item-info{border-color:rgba(8, 145, 178, 0.3)}.list-item-outlined.list-item-info:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(8, 145, 178, 0.05);border-color:rgba(8, 145, 178, 0.5)}.list-item-soft{background:rgba(0, 0, 0, 0.02);border-radius:6px;margin-bottom:2px}.list-item-soft:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(0, 0, 0, 0.05)}.list-item-soft.list-item-primary{background:rgba(var(--color-primary-rgb, 59, 130, 246), 0.08)}.list-item-soft.list-item-primary:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(var(--color-primary-rgb, 59, 130, 246), 0.12)}.list-item-soft.list-item-secondary{background:rgba(107, 114, 128, 0.08)}.list-item-soft.list-item-secondary:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(107, 114, 128, 0.12)}.list-item-soft.list-item-success{background:rgba(22, 163, 74, 0.08)}.list-item-soft.list-item-success:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(22, 163, 74, 0.12)}.list-item-soft.list-item-danger{background:rgba(var(--color-danger-rgb, 220, 38, 38), 0.08)}.list-item-soft.list-item-danger:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(var(--color-danger-rgb, 220, 38, 38), 0.12)}.list-item-soft.list-item-warning{background:rgba(var(--color-warning-rgb, 245, 158, 11), 0.08)}.list-item-soft.list-item-warning:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(var(--color-warning-rgb, 245, 158, 11), 0.12)}.list-item-soft.list-item-info{background:rgba(8, 145, 178, 0.08)}.list-item-soft.list-item-info:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(8, 145, 178, 0.12)}.list-item-default .list-item-icon{color:var(--text-muted, #6b7280)}.list-item-primary .list-item-icon{color:var(--color-primary, #3b82f6)}.list-item-secondary .list-item-icon{color:var(--text-muted, #6b7280)}.list-item-success .list-item-icon{color:var(--color-success, #16a34a)}.list-item-danger .list-item-icon{color:var(--color-danger-hover, #dc2626)}.list-item-warning .list-item-icon{color:var(--color-warning, #f59e0b)}.list-item-info .list-item-icon{color:var(--color-info-hover, #0891b2)}.list-item-text.list-item-selected.list-item-primary{background:rgba(var(--color-primary-rgb, 59, 130, 246), 0.08)}.list-item-text.list-item-selected.list-item-primary .list-item-icon,.list-item-text.list-item-selected.list-item-primary .list-item-label{color:var(--color-primary, #3b82f6);font-weight:600}.list-item-text.list-item-selected.list-item-secondary{background:rgba(107, 114, 128, 0.08)}.list-item-text.list-item-selected.list-item-secondary .list-item-icon,.list-item-text.list-item-selected.list-item-secondary .list-item-label{color:var(--text-secondary, #4b5563);font-weight:600}.list-item-text.list-item-selected.list-item-success{background:rgba(22, 163, 74, 0.08)}.list-item-text.list-item-selected.list-item-success .list-item-icon,.list-item-text.list-item-selected.list-item-success .list-item-label{color:var(--color-success, #16a34a);font-weight:600}.list-item-text.list-item-selected.list-item-danger{background:rgba(var(--color-danger-rgb, 220, 38, 38), 0.08)}.list-item-text.list-item-selected.list-item-danger .list-item-icon,.list-item-text.list-item-selected.list-item-danger .list-item-label{color:var(--color-danger-hover, #dc2626);font-weight:600}.list-item-text.list-item-selected.list-item-warning{background:rgba(var(--color-warning-rgb, 245, 158, 11), 0.08)}.list-item-text.list-item-selected.list-item-warning .list-item-icon,.list-item-text.list-item-selected.list-item-warning .list-item-label{color:var(--color-warning-hover, #d97706);font-weight:600}.list-item-text.list-item-selected.list-item-info{background:rgba(8, 145, 178, 0.08)}.list-item-text.list-item-selected.list-item-info .list-item-icon,.list-item-text.list-item-selected.list-item-info .list-item-label{color:var(--color-info-hover, #0891b2);font-weight:600}.list-item-text.list-item-selected.list-item-default{background:var(--bg-selected, rgba(107, 114, 128, 0.15))}.list-item-text.list-item-selected.list-item-default .list-item-label{font-weight:600}.list-item-filled.list-item-selected.list-item-primary{background:var(--bg-selected, var(--color-primary-subtle, rgba(59, 130, 246, 0.12)));border-color:var(--color-primary, #3b82f6)}.list-item-filled.list-item-selected.list-item-primary .list-item-icon,.list-item-filled.list-item-selected.list-item-primary .list-item-label{color:var(--color-primary, #3b82f6);font-weight:600}.list-item-filled.list-item-selected.list-item-success{background:var(--bg-primary, #dcfce7);border-color:var(--color-success, #16a34a)}.list-item-filled.list-item-selected.list-item-success .list-item-icon,.list-item-filled.list-item-selected.list-item-success .list-item-label{color:var(--color-success, #166534);font-weight:600}.list-item-filled.list-item-selected.list-item-danger{background:var(--bg-primary, #fee2e2);border-color:var(--color-danger-hover, #dc2626)}.list-item-filled.list-item-selected.list-item-danger .list-item-icon,.list-item-filled.list-item-selected.list-item-danger .list-item-label{color:var(--color-danger, #991b1b);font-weight:600}.list-item-outlined.list-item-selected.list-item-primary{border-color:var(--color-primary, #3b82f6);border-width:2px}.list-item-outlined.list-item-selected.list-item-primary .list-item-icon,.list-item-outlined.list-item-selected.list-item-primary .list-item-label{color:var(--color-primary, #3b82f6);font-weight:600}.list-item-outlined.list-item-selected.list-item-success{border-color:var(--color-success, #16a34a);border-width:2px}.list-item-outlined.list-item-selected.list-item-success .list-item-icon,.list-item-outlined.list-item-selected.list-item-success .list-item-label{color:var(--color-success, #16a34a);font-weight:600}.list-item-soft.list-item-selected.list-item-primary{background:rgba(var(--color-primary-rgb, 59, 130, 246), 0.12)}.list-item-soft.list-item-selected.list-item-primary .list-item-icon,.list-item-soft.list-item-selected.list-item-primary .list-item-label{color:var(--color-primary, #3b82f6);font-weight:600}.list-item-selected{border-radius:8px}.list-item-soft.list-item-selected.list-item-success{background:rgba(22, 163, 74, 0.12);border-radius:8px}.list-item-soft.list-item-selected.list-item-success .list-item-icon,.list-item-soft.list-item-selected.list-item-success .list-item-label{color:var(--color-success, #15803d);font-weight:600}.list-item-disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.list-item-readonly{cursor:default}.list-item-divider::after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--bg-primary, #e5e7eb)}.list-item-link .list-item-label{text-decoration:none}.list-item-link:hover .list-item-label{text-decoration:underline}.list-item-interactive{cursor:pointer}.list-item:not(.list-item-interactive){cursor:default}.list-item-children{display:flex;flex-direction:column;overflow:hidden;max-height:2000px;transition:max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;opacity:1}.list-item-children.is-collapsed{max-height:0;opacity:0;pointer-events:none}@keyframes slideDown{from{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.list-item-focused{box-shadow:0 0 0 2px rgba(var(--color-primary-rgb, 59, 130, 246), 0.3)}.list-item-hovered:not(.list-item-disabled):not(.list-item-readonly){border-radius:8px;box-shadow:0 8px 18px rgba(15, 23, 42, 0.08)}.list-item-context-menu{position:relative}.list-item-context-menu .list-item-context-icon{font-size:0.875rem;color:var(--text-muted, #9ca3af);margin-left:auto;transition:transform 0.2s ease}.list-item-context-menu.list-item-context-menu-open .list-item-context-icon{transform:rotate(90deg)}.list-item-context-menu:hover .list-item-context-icon{color:var(--text-muted, #6b7280)}.context-menu{min-width:200px;background:var(--bg-primary, #ffffff);border-radius:8px;box-shadow:0 10px 25px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);padding:8px 0;animation:contextMenuFadeIn 0.15s ease-out;overflow:hidden;max-height:400px;overflow-y:auto}.context-menu ::slotted(ui-list-item){margin:0;border-radius:0}.context-menu::-webkit-scrollbar{width:6px}.context-menu::-webkit-scrollbar-track{background:transparent}.context-menu::-webkit-scrollbar-thumb{background:var(--bg-secondary, #d1d5db);border-radius:3px}.context-menu::-webkit-scrollbar-thumb:hover{background:var(--color-primary, #9ca3af)}@keyframes contextMenuFadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.context-menu-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9998;background:transparent}.list-item-checkbox{display:flex;align-items:center;cursor:pointer;margin-right:4px}.list-item-checkbox input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}.list-item-checkbox .checkbox-icon{font-size:1.25rem;color:var(--text-muted, #9ca3af);transition:all 0.2s ease}.list-item-checkbox:hover .checkbox-icon{color:var(--text-muted, #6b7280)}.list-item-checked .checkbox-icon{color:var(--color-success, #3dcd58) !important}.list-item-disabled .list-item-checkbox,.list-item-readonly .list-item-checkbox{cursor:not-allowed;opacity:0.5}.list-item-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:12px;font-size:0.75rem;font-weight:600;line-height:1;white-space:nowrap}.list-item-badge.badge-default{background:var(--bg-secondary, #f3f4f6);color:var(--text-secondary, #374151)}.list-item-badge.badge-primary{background:var(--bg-primary, #d1fae5);color:var(--color-success, #009B4E)}.list-item-badge.badge-secondary{background:var(--bg-secondary, #f3f4f6);color:var(--text-secondary, #4b5563)}.list-item-badge.badge-success{background:var(--bg-primary, #d1fae5);color:var(--color-primary, #065f46)}.list-item-badge.badge-danger{background:var(--bg-primary, #fee2e2);color:var(--color-danger, #991b1b)}.list-item-badge.badge-warning{background:var(--bg-primary, #fef3c7);color:var(--color-danger, #92400e)}.list-item-badge.badge-info{background:var(--bg-primary, #e0f2fe);color:var(--color-primary, #075985)}.list-item-counter{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--color-success, #3dcd58);color:var(--text-standard, #ffffff);font-size:0.75rem;font-weight:600;line-height:1;margin-left:auto;flex-shrink:0}.list-item-counter.counter-primary{background:var(--color-primary, #10b981);color:var(--text-standard, #ffffff)}.list-item-counter.counter-secondary{background:var(--text-muted, #6b7280);color:var(--text-standard, #ffffff)}.list-item-counter.counter-success{background:var(--color-success, #3dcd58);color:var(--text-standard, #ffffff)}.list-item-counter.counter-danger{background:var(--color-danger, #ef4444);color:var(--text-standard, #ffffff)}.list-item-counter.counter-warning{background:var(--color-warning, #f59e0b);color:var(--text-standard, #ffffff)}.list-item-counter.counter-info{background:var(--color-info, #06b6d4);color:var(--text-standard, #ffffff)}.list-item-right{display:flex;align-items:center;flex-direction:column;gap:6px;margin-left:auto;flex-shrink:0;max-width:50%;overflow:hidden}.list-item-pills{display:flex;flex-wrap:wrap;gap:6px;align-items:center;max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}.list-item-pills::-webkit-scrollbar{height:4px}.list-item-pills::-webkit-scrollbar-thumb{background:var(--bg-secondary, #d1d5db);border-radius:2px}.pill{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:16px;font-size:0.75rem;font-weight:500;cursor:pointer;transition:all 0.2s ease;white-space:nowrap;flex-shrink:0}.pill i{font-size:0.75rem}.pill:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(0, 0, 0, 0.1)}.pill:active{transform:translateY(0)}.pill.pill-default{background:var(--bg-secondary, #f3f4f6);color:var(--text-secondary, #374151)}.pill.pill-default:hover{background:var(--bg-primary, #e5e7eb)}.pill.pill-primary{background:var(--bg-primary, #d1fae5);color:var(--color-success, #009B4E)}.pill.pill-primary:hover{background:var(--color-success, #a7f3d0)}.pill.pill-secondary{background:var(--bg-secondary, #f3f4f6);color:var(--text-secondary, #4b5563)}.pill.pill-secondary:hover{background:var(--bg-primary, #e5e7eb)}.pill.pill-success{background:var(--bg-primary, #d1fae5);color:var(--color-primary, #065f46)}.pill.pill-success:hover{background:var(--color-success, #a7f3d0)}.pill.pill-danger{background:var(--bg-primary, #fee2e2);color:var(--color-danger, #991b1b)}.pill.pill-danger:hover{background:var(--color-danger, #fecaca)}.pill.pill-warning{background:var(--bg-primary, #fef3c7);color:var(--color-danger, #92400e)}.pill.pill-warning:hover{background:var(--color-primary, #fde68a)}.pill.pill-info{background:var(--bg-primary, #e0f2fe);color:var(--color-primary, #075985)}.pill.pill-info:hover{background:var(--color-primary, #bae6fd)}.list-item-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}.list-item-tags::-webkit-scrollbar{height:4px}.list-item-tags::-webkit-scrollbar-thumb{background:var(--bg-secondary, #d1d5db);border-radius:2px}.tag{display:inline-flex;align-items:center;padding:2px 8px;background:var(--bg-secondary, #f3f4f6);color:var(--text-muted, #6b7280);border-radius:4px;font-size:0.75rem;font-weight:500;cursor:pointer;transition:all 0.2s ease;white-space:nowrap;flex-shrink:0}.tag:hover{background:var(--bg-primary, #e5e7eb);color:var(--text-secondary, #374151)}.tag:active{transform:scale(0.95)}.list-item-lg{padding:16px 20px;gap:14px}.list-item-lg .list-item-avatar{width:48px;height:48px}.list-item-lg .list-item-image{width:64px;height:64px}.list-item-lg .list-item-icon{font-size:1.5rem}.list-item-lg .list-item-label{font-size:1.125rem}.list-item-lg .list-item-action-icon{font-size:1.25rem}.list-item-lg .list-item-checkbox .checkbox-icon{font-size:1.5rem}.list-item-lg .list-item-ghost-layer{top:10px;right:10px}.list-item-lg .ghost-popover-trigger{width:24px;height:24px}.list-item-lg .ghost-popover-trigger ui-icon{font-size:0.8125rem}.list-item-lg .ghost-meta{font-size:0.6875rem}.list-item-lg .list-item-badge{font-size:0.875rem;padding:3px 10px}.list-item-lg .list-item-counter{min-width:24px;height:24px;font-size:0.875rem}.list-item-lg .pill{padding:6px 12px;font-size:0.875rem}.list-item-lg .tag{padding:3px 10px;font-size:0.875rem}.list-item-lg .list-item-sublabel{font-size:1rem}.list-item-md{padding:12px 16px;gap:12px}.list-item-dense{padding:6px 12px;gap:8px}.list-item-dense .list-item-label{font-size:0.875rem}.list-item-text{background:transparent}.list-item-text:hover:not(.list-item-disabled):not(.list-item-readonly){background:rgba(0, 0, 0, 0.04)}.list-item-filled{background:var(--bg-primary, #ffffff);border:1px solid var(--border-default, #e5e7eb);margin-bottom:2px;border-radius:6px}.list-item-filled:hover:not(.list-item-disabled):not(.list-item-readonly){background:var(--bg-primary, #f9fafb);border-color:var(--border-strong, #d1d5db)}.list-item-left-media{display:flex;align-items:center;gap:inherit;flex-shrink:0}.list-item-left-media ui-skeleton{flex-shrink:0}.list-item-right-media{display:flex;align-items:center;gap:inherit;flex-shrink:0;margin-left:12px}.list-item-right-media ui-skeleton{flex-shrink:0}.list-item-avatar-right .list-item-counter,.list-item-avatar-right .list-item-action-icon,.list-item-avatar-right .list-item-context-icon{margin-left:8px}.list-item-avatar-right .list-item-right-media{margin-left:auto}:host .list-item.list-item-selection-primary.list-item-selected{background:rgba(var(--color-success-rgb, 61, 205, 88), 0.12) !important;border-color:var(--color-success, #3dcd58) !important}:host .list-item.list-item-selection-primary.list-item-selected .list-item-label{color:var(--color-success, #009B4E) !important}:host .list-item.list-item-selection-primary.list-item-selected .list-item-icon{color:var(--color-success, #009B4E) !important}:host .list-item.list-item-selection-secondary.list-item-selected{background:rgba(107, 114, 128, 0.12) !important;border-color:var(--color-primary, #6b7280) !important}:host .list-item.list-item-selection-secondary.list-item-selected .list-item-label{color:var(--color-primary, #4b5563) !important}:host .list-item.list-item-selection-secondary.list-item-selected .list-item-icon{color:var(--color-primary, #4b5563) !important}:host .list-item.list-item-selection-success.list-item-selected{background:rgba(22, 163, 74, 0.12) !important;border-color:var(--color-success, #16a34a) !important}:host .list-item.list-item-selection-success.list-item-selected .list-item-label{color:var(--color-success, #15803d) !important}:host .list-item.list-item-selection-success.list-item-selected .list-item-icon{color:var(--color-success, #15803d) !important}:host .list-item.list-item-selection-danger.list-item-selected{background:rgba(var(--color-danger-rgb, 220, 38, 38), 0.12) !important;border-color:var(--color-danger-hover, #dc2626) !important}:host .list-item.list-item-selection-danger.list-item-selected .list-item-label{color:var(--color-danger, #991b1b) !important}:host .list-item.list-item-selection-danger.list-item-selected .list-item-icon{color:var(--color-danger, #991b1b) !important}:host .list-item.list-item-selection-warning.list-item-selected{background:rgba(var(--color-warning-rgb, 245, 158, 11), 0.12) !important;border-color:var(--color-warning, #f59e0b) !important}:host .list-item.list-item-selection-warning.list-item-selected .list-item-label{color:var(--color-danger, #92400e) !important}:host .list-item.list-item-selection-warning.list-item-selected .list-item-icon{color:var(--color-danger, #92400e) !important}:host .list-item.list-item-selection-info.list-item-selected{background:rgba(8, 145, 178, 0.12) !important;border-color:var(--color-info-hover, #0891b2) !important}:host .list-item.list-item-selection-info.list-item-selected .list-item-label{color:var(--color-primary, #075985) !important}:host .list-item.list-item-selection-info.list-item-selected .list-item-icon{color:var(--color-primary, #075985) !important}:host .list-item.list-item-hover-primary:hover:not(.list-item-selected):not(.list-item-disabled){background:rgba(var(--color-success-rgb, 61, 205, 88), 0.05) !important}:host .list-item.list-item-hover-secondary:hover:not(.list-item-selected):not(.list-item-disabled){background:rgba(107, 114, 128, 0.05) !important}:host .list-item.list-item-hover-success:hover:not(.list-item-selected):not(.list-item-disabled){background:rgba(22, 163, 74, 0.05) !important}:host .list-item.list-item-hover-danger:hover:not(.list-item-selected):not(.list-item-disabled){background:rgba(var(--color-danger-rgb, 220, 38, 38), 0.05) !important}:host .list-item.list-item-hover-warning:hover:not(.list-item-selected):not(.list-item-disabled){background:rgba(var(--color-warning-rgb, 245, 158, 11), 0.05) !important}:host .list-item.list-item-hover-info:hover:not(.list-item-selected):not(.list-item-disabled){background:rgba(8, 145, 178, 0.05) !important}:host .list-item[style*=transform]{transition:transform 0.1s ease-out}.list-item-lock-icon{font-size:0.875rem;color:var(--text-muted, #9ca3af);margin-left:12px;flex-shrink:0}.list-item-menu-icon{font-size:1rem;color:var(--text-muted, #6b7280);margin-left:8px;padding:6px;border-radius:6px;transition:all 0.2s ease;flex-shrink:0;cursor:pointer}.list-item-menu-icon:hover{background:rgba(0, 0, 0, 0.08);color:var(--text-primary, #1f2937)}.list-item-menu-icon:active{transform:scale(0.9)}.list-item-locked{cursor:default !important}.list-item-locked .list-item-label{color:var(--text-muted, #9ca3af) !important}.list-item-locked .list-item-icon{opacity:0.5}.list-item-locked:hover{transform:none !important;background:transparent !important}.swipe-actions-container{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;pointer-events:none;z-index:-1;overflow:hidden;border-radius:inherit}.swipe-action{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--text-standard, #ffffff);transition:opacity 0.2s ease}.swipe-action ui-icon{font-size:1.5rem}.swipe-action.left{justify-content:flex-start;padding-left:24px;background-color:var(--color-success, #10b981)}.swipe-action.right{justify-content:flex-end;padding-right:24px;background-color:var(--color-danger, #ef4444)}.bg-success{background-color:var(--color-success, #10b981)}.bg-danger{background-color:var(--color-danger, #ef4444)}.bg-warning{background-color:var(--color-warning, #f59e0b)}.bg-info{background-color:var(--color-primary, #10b981)}.bg-primary{background-color:var(--color-success, #3dcd58)}.list-item-grid{flex-direction:column !important;align-items:center !important;text-align:center;padding:24px 16px !important;border:1px solid var(--border-subtle, #f1f5f9);border-radius:16px !important;background:var(--bg-primary, #ffffff);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.05)}.list-item-grid:hover{transform:translateY(-4px) !important;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1);border-color:var(--color-primary, #10b981)}.list-item-grid .list-item-avatar,.list-item-grid .list-item-image{width:64px !important;height:64px !important;margin-bottom:16px}.list-item-grid .list-item-content{align-items:center;width:100%}.list-item-grid .list-item-label{font-size:1.125rem;font-weight:700}.list-item-grid .list-item-collaborators{margin-top:12px}.list-item-tree-lines{position:relative;--list-item-tree-line-color:var(--text-muted, #6b7280)}.list-item-tree-lines::before{content:"";position:absolute;left:26px;top:-12px;bottom:50%;width:2px;background:var(--list-item-tree-line-color)}.list-item-tree-lines::after{content:"";position:absolute;left:26px;top:50%;width:16px;height:2px;background:var(--list-item-tree-line-color);border-radius:0 2px 2px 0}.list-item-collaborators{display:flex;align-items:center;margin-top:4px}.list-item.focused-item{outline:2px solid var(--color-primary, #10b981);outline-offset:-2px;background:var(--bg-primary, #eff6ff)}.list-item-avatar-container{position:relative;display:inline-flex}.list-item-status{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid var(--bg-primary, #ffffff);z-index:2}.list-item-status.pos-bottom-right{bottom:0;right:0}.list-item-status.pos-top-right{top:0;right:0}.list-item-status.status-online{background:var(--color-success, #10b981)}.list-item-status.status-busy{background:var(--color-danger, #ef4444)}.list-item-status.status-away{background:var(--color-warning, #f59e0b)}.list-item-status.status-offline{background:var(--color-primary, #94a3b8)}.list-item-status.status-online::after{content:"";position:absolute;width:100%;height:100%;background:inherit;border-radius:50%;animation:pulseStatus 2s infinite;opacity:0.6;left:0;top:0}@keyframes pulseStatus{0%{transform:scale(1);opacity:0.6}100%{transform:scale(3);opacity:0}}.list-item-progress-container{display:flex;align-items:center;gap:8px;margin-top:6px;width:100%}.list-item-progress-container .list-item-progress-bar{height:4px;background:var(--color-primary, #10b981);border-radius:2px;transition:width 0.3s ease}.list-item-progress-container .list-item-progress-text{font-size:10px;font-weight:700;color:var(--text-muted, #64748b)}.list-item-star-icon{font-size:0.875rem;color:var(--color-primary, #cbd5e1);margin-right:8px;cursor:pointer;transition:all 0.2s}.list-item-star-icon:hover{color:var(--color-primary, #94a3b8);transform:scale(1.1)}.list-item-star-icon.is-starred{color:var(--color-warning, #f59e0b) !important}.list-item-expandable-section{width:100%;background:var(--bg-primary, #f8fafc);overflow:hidden;border-top:1px solid var(--border-subtle, #f1f5f9);animation:expandDetail 0.4s cubic-bezier(0.4, 0, 0.2, 1)}.list-item-expandable-section .expandable-detail-content{padding:16px 24px 16px 56px}@keyframes expandDetail{from{max-height:0;opacity:0}to{max-height:500px;opacity:1}}.list-item-media-avatar-group{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex-shrink:0}.list-item-right-collaborators{display:flex;align-items:center;margin-left:auto;margin-right:12px}.is-wobbling{animation:wobbleNo 0.4s ease-in-out}@keyframes wobbleNo{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}.list-item-pulse{position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 0 rgba(var(--color-danger-rgb, 239, 68, 68), 0);animation:etherealPulse 2s infinite;z-index:1}@keyframes etherealPulse{0%{box-shadow:0 0 0 0 rgba(var(--color-danger-rgb, 239, 68, 68), 0.4)}70%{box-shadow:0 0 0 12px rgba(var(--color-danger-rgb, 239, 68, 68), 0)}100%{box-shadow:0 0 0 0 rgba(var(--color-danger-rgb, 239, 68, 68), 0)}}.list-item-ghost-layer{position:absolute;top:8px;right:8px;z-index:6;opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity 0.18s ease, transform 0.18s ease, z-index 0s}.list-item-ghost-layer:hover,.list-item-ghost-layer:focus-within{z-index:100}.list-item-ghost-layer ui-popover{--ghost-popover-bg:var(--bg-primary, #ffffff);--ghost-popover-surface-bg:var(--bg-primary, #ffffff);--ghost-popover-header-bg:var(--bg-primary, #ffffff);--ghost-popover-body-bg:var(--bg-primary, #ffffff);--ghost-popover-border:var(--border-default, #e5e7eb);--ghost-popover-text-primary:var(--text-primary, #0f172a);--ghost-popover-text-secondary:var(--text-secondary, #475569);--ghost-popover-footer-bg:var(--bg-secondary, #f8fafc)}.ghost-popover-trigger{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:1px solid rgba(148, 163, 184, 0.3);border-radius:999px;background:rgba(15, 23, 42, 0.88);box-shadow:0 10px 24px rgba(15, 23, 42, 0.28);color:rgba(255, 255, 255, 0.98);backdrop-filter:blur(8px);cursor:pointer;opacity:1;transition:transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease}.ghost-popover-trigger:hover,.ghost-popover-trigger:focus-visible{background:rgba(15, 23, 42, 0.96);border-color:rgba(191, 219, 254, 0.56);transform:translateY(-1px);box-shadow:0 12px 28px rgba(15, 23, 42, 0.34);outline:none}.ghost-popover-trigger ui-icon{font-size:0.8125rem;pointer-events:none}.ghost-popover-content{display:flex;flex-direction:column;gap:10px;min-width:0;min-width:280px;max-width:min(320px, 100vw - 32px)}.ghost-meta{display:grid;grid-template-columns:56px minmax(0, 1fr);gap:10px;align-items:start;font-size:0.75rem;line-height:1.4}.ghost-meta-label{font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-secondary, #475569)}.ghost-meta-value{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:0.8125rem;font-weight:700;color:var(--text-primary, #0f172a);overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.ghost-popover-content .ghost-meta+.ghost-meta{padding-top:8px;border-top:1px solid var(--border-default, rgba(148, 163, 184, 0.18))}.presence-halo{position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%;border:2px solid var(--bg-primary, #ffffff);box-shadow:0 0 0 2px rgba(0, 0, 0, 0.1)}.presence-halo.presence-blue{background:var(--color-primary, #10b981)}.presence-halo.presence-purple{background:var(--color-primary, #a855f7)}.list-item-density-compact{padding-top:4px !important;padding-bottom:4px !important;min-height:40px}.list-item-density-compact .list-item-ghost-layer{top:5px;right:5px}.list-item-density-compact .ghost-popover-trigger{width:16px;height:16px}.list-item-density-compact .ghost-popover-trigger ui-icon{font-size:0.5625rem}.list-item-density-compact .list-item-sublabel,.list-item-density-compact .list-item-tags,.list-item-density-compact .list-item-progress-container{display:none}.list-item-density-compact .list-item-avatar-container,.list-item-density-compact ui-avatar{transform:scale(0.8)}.list-item-density-cozy{padding-top:20px !important;padding-bottom:20px !important}.list-item-density-cozy .list-item-label{font-size:1.1rem;font-weight:700;color:var(--text-primary, #0f172a)}.list-item-density-cozy .list-item-avatar-container,.list-item-density-cozy ui-avatar{transform:scale(1.15)}.list-item-context-menu-container{position:fixed;z-index:100000;min-width:180px;background:var(--bg-tertiary, rgba(15, 23, 42, 0.95));backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);border:1px solid var(--border-default, rgba(255, 255, 255, 0.08));border-radius:12px;box-shadow:0 10px 30px -5px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05);padding:6px;animation:contextMenuFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);overflow:hidden;box-sizing:border-box}@keyframes contextMenuFadeIn{from{opacity:0;transform:scale(0.95) translateY(-5px)}to{opacity:1;transform:scale(1) translateY(0)}}.context-menu-default{display:flex;flex-direction:column;gap:2px;width:100%}.context-menu-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;font-size:0.8125rem;font-weight:500;color:var(--text-secondary, rgba(255, 255, 255, 0.85));cursor:pointer;transition:all 0.15s ease;user-select:none}.context-menu-item ui-icon{font-size:1rem;color:var(--text-muted, rgba(255, 255, 255, 0.5));transition:color 0.15s ease}.context-menu-item span{color:inherit}.context-menu-item:hover{background:var(--bg-hover, rgba(255, 255, 255, 0.08));color:var(--text-primary, #ffffff)}.context-menu-item:hover ui-icon{color:var(--text-primary, #ffffff);transform:scale(1.05)}.context-menu-item:active{transform:scale(0.98)}.context-menu-item.danger{color:var(--color-danger, #fca5a5)}.context-menu-item.danger ui-icon{color:var(--color-danger, #ef4444)}.context-menu-item.danger:hover{background:rgba(239, 68, 68, 0.12);color:var(--color-danger, #ef4444)}.context-menu-item.danger:hover ui-icon{color:var(--color-danger, #ef4444)}.context-menu-divider{height:1px;background:var(--border-default, rgba(255, 255, 255, 0.08));margin:4px 6px}`;
 const AppListItem = class {
     constructor(hostRef) {
@@ -106,7 +112,7 @@ const AppListItem = class {
     href = '';
     target = '_self';
     contextMenu = false;
-    contextMenuTrigger = 'click';
+    contextMenuTrigger = 'rightClick';
     contextMenuPosition = 'auto';
     // New features
     showCheckbox = false;
@@ -116,6 +122,7 @@ const AppListItem = class {
     badge = '';
     badgeColor = 'default';
     counter = '';
+    counterColor = 'success';
     /** JSON string or array of tag objects */
     tags = '';
     /** Image URL for a square/landscape thumbnail */
@@ -201,6 +208,7 @@ const AppListItem = class {
     contextMenuY = 0;
     swipeOffset = 0;
     showStatusEditor = false;
+    ghostPopoverVariant = 'dark';
     listItemClick;
     listItemActionClick;
     listItemToggle;
@@ -218,19 +226,95 @@ const AppListItem = class {
     touchCurrentX = 0;
     isSwiping = false;
     longPressTimer;
+    themeObserver;
+    componentWillLoad() {
+        this.syncGhostPopoverTheme();
+    }
     componentDidLoad() {
+        this.observeThemeChanges();
         if (this.contextMenu) {
             document.addEventListener('click', this.handleOutsideClick);
         }
     }
     disconnectedCallback() {
+        this.themeObserver?.disconnect();
         if (this.contextMenu) {
             document.removeEventListener('click', this.handleOutsideClick);
         }
     }
+    observeThemeChanges() {
+        this.themeObserver?.disconnect();
+        const observer = new MutationObserver(() => this.syncGhostPopoverTheme());
+        observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme'] });
+        if (document.body) {
+            observer.observe(document.body, { attributes: true, attributeFilter: ['class', 'data-theme'] });
+        }
+        this.themeObserver = observer;
+    }
+    syncGhostPopoverTheme() {
+        const nextVariant = this.resolveGhostPopoverVariant();
+        if (this.ghostPopoverVariant !== nextVariant) {
+            this.ghostPopoverVariant = nextVariant;
+        }
+    }
+    resolveGhostPopoverVariant() {
+        const root = document.documentElement;
+        const body = document.body;
+        const themeFingerprint = [
+            root.dataset.theme || '',
+            root.className || '',
+            body?.dataset.theme || '',
+            body.className || '',
+        ].join(' ').toLowerCase();
+        if (/(light|yellow)/.test(themeFingerprint))
+            return 'light';
+        if (/(dark|blue|green|pink|violet)/.test(themeFingerprint))
+            return 'dark';
+        const bgPrimary = getComputedStyle(root).getPropertyValue('--bg-primary').trim();
+        const rgb = this.parseColorToRgb(bgPrimary);
+        if (!rgb)
+            return 'dark';
+        const luminance = (0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b) / 255;
+        return luminance > 0.6 ? 'light' : 'dark';
+    }
+    parseColorToRgb(color) {
+        if (!color)
+            return null;
+        const normalized = color.trim().toLowerCase();
+        if (normalized.startsWith('#')) {
+            const hex = normalized.slice(1);
+            if (hex.length === 3) {
+                return {
+                    r: Number.parseInt(hex[0] + hex[0], 16),
+                    g: Number.parseInt(hex[1] + hex[1], 16),
+                    b: Number.parseInt(hex[2] + hex[2], 16),
+                };
+            }
+            if (hex.length >= 6) {
+                return {
+                    r: Number.parseInt(hex.slice(0, 2), 16),
+                    g: Number.parseInt(hex.slice(2, 4), 16),
+                    b: Number.parseInt(hex.slice(4, 6), 16),
+                };
+            }
+        }
+        const rgbMatch = /rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(normalized);
+        if (rgbMatch) {
+            return {
+                r: Number.parseInt(rgbMatch[1], 10),
+                g: Number.parseInt(rgbMatch[2], 10),
+                b: Number.parseInt(rgbMatch[3], 10),
+            };
+        }
+        return null;
+    }
     handleOutsideClick = (e) => {
         if (this.contextMenuOpen && this.contextMenuRef && !this.contextMenuRef.contains(e.target)) {
-            const listItem = this.el.shadowRoot.querySelector('.list-item');
+            const shadowRoot = this.el.shadowRoot;
+            if (!shadowRoot) {
+                return;
+            }
+            const listItem = shadowRoot.querySelector('.list-item');
             if (listItem && !listItem.contains(e.target)) {
                 this.closeContextMenu();
             }
@@ -247,8 +331,6 @@ const AppListItem = class {
             return;
         }
         if (this.locked) {
-            this.wobble = true;
-            setTimeout(() => this.wobble = false, 400);
             return;
         }
         if (this.expandable && !this.contextMenu) {
@@ -326,17 +408,19 @@ const AppListItem = class {
                     break;
                 case 'auto':
                 default:
-                    // Auto: prefer right, fallback to left if not enough space
-                    const spaceRight = viewportWidth - rect.right;
-                    if (spaceRight > menuWidth) {
-                        x = rect.right;
-                        y = rect.top;
-                    }
-                    else {
-                        x = rect.left - menuWidth;
-                        y = rect.top;
+                    {
+                        // Auto: prefer right, fallback to left if not enough space
+                        const spaceRight = viewportWidth - rect.right;
+                        if (spaceRight > menuWidth) {
+                            x = rect.right;
+                            y = rect.top;
+                        }
+                        else {
+                            x = rect.left - menuWidth;
+                            y = rect.top;
+                        }
+                        break;
                     }
-                    break;
             }
         }
         // Edge detection and adjustment for all directions
@@ -411,8 +495,7 @@ const AppListItem = class {
             this.longPressTimer = setTimeout(() => {
                 if (!this.swipeOffset) {
                     this.longPress.emit({ value: this.value });
-                    if (navigator.vibrate)
-                        navigator.vibrate(50); // Haptic feedback
+                    globalThis.navigator.vibrate?.(50); // Haptic feedback
                 }
             }, this.longPressDelay);
         }
@@ -432,6 +515,28 @@ const AppListItem = class {
             return;
         this.swipeOffset = delta;
     };
+    getSwipeActionDefinitions(side) {
+        if (side === 'left') {
+            return this.leftActions.length
+                ? this.leftActions
+                : [{ icon: this.leftActionIcon, action: 'left' }];
+        }
+        return this.rightActions.length
+            ? this.rightActions
+            : [{ icon: this.rightActionIcon, action: 'right' }];
+    }
+    completeFullSwipe(side, action) {
+        this.swipeOffset = side === 'left' ? this.el.clientWidth : -this.el.clientWidth;
+        setTimeout(() => {
+            this.swipeAction.emit({ value: this.value, side, action });
+            if (this.swipeBehavior === 'dismiss') {
+                this.el.style.display = 'none';
+            }
+            else {
+                this.swipeOffset = 0;
+            }
+        }, 200);
+    }
     handleTouchEnd = () => {
         if (!this.swipeActions)
             return;
@@ -440,20 +545,10 @@ const AppListItem = class {
         const fullThreshold = this.el.clientWidth * this.fullSwipeThreshold;
         const absOffset = Math.abs(this.swipeOffset);
         if (absOffset > fullThreshold) {
-            // Full Swipe Trigger
             const side = this.swipeOffset > 0 ? 'left' : 'right';
-            const actions = side === 'left' ? (this.leftActions.length ? this.leftActions : [{ icon: this.leftActionIcon, action: 'left' }]) : (this.rightActions.length ? this.rightActions : [{ icon: this.rightActionIcon, action: 'right' }]);
+            const actions = this.getSwipeActionDefinitions(side);
             const primaryAction = actions[0]?.action || (side === 'left' ? 'check' : 'trash');
-            this.swipeOffset = this.swipeOffset > 0 ? this.el.clientWidth : -this.el.clientWidth;
-            setTimeout(() => {
-                this.swipeAction.emit({ value: this.value, side, action: primaryAction });
-                if (this.swipeBehavior === 'dismiss') {
-                    this.el.style.display = 'none'; // Physics dismissal
-                }
-                else {
-                    this.swipeOffset = 0;
-                }
-            }, 200);
+            this.completeFullSwipe(side, primaryAction);
             return;
         }
         if (absOffset > threshold) {
@@ -465,8 +560,10 @@ const AppListItem = class {
     };
     async focusItem() {
         this.isFocused = true;
-        this.el.shadowRoot.querySelector('.list-item')?.setAttribute('tabindex', '0');
-        this.el.shadowRoot.querySelector('.list-item')?.focus();
+        const shadowRoot = this.el.shadowRoot;
+        const listItem = shadowRoot?.querySelector('.list-item');
+        listItem?.setAttribute('tabindex', '0');
+        listItem?.focus();
     }
     handleKeyDown = (e) => {
         if (this.isFocused) {
@@ -479,14 +576,22 @@ const AppListItem = class {
         if (!this.highlight || !text)
             return text;
         const parts = text.split(new RegExp(`(${this.highlight})`, 'gi'));
-        return parts.map(part => part.toLowerCase() === this.highlight.toLowerCase()
-            ? h("mark", { class: "list-item-highlight" }, part)
-            : part);
+        let searchStart = 0;
+        return parts.map((part) => {
+            const lowerText = text.toLowerCase();
+            const lowerPart = part.toLowerCase();
+            const matchOffset = lowerText.indexOf(lowerPart, searchStart);
+            const resolvedOffset = matchOffset >= 0 ? matchOffset : searchStart;
+            searchStart = resolvedOffset + part.length;
+            return part.toLowerCase() === this.highlight.toLowerCase()
+                ? h("mark", { class: "list-item-highlight", key: `highlight-${resolvedOffset}-${part}` }, part)
+                : part;
+        });
     }
     renderPresenceCursors() {
         if (!this.presenceCursors || this.presenceCursors.length === 0)
             return null;
-        return (h("div", { class: "presence-cursors-layer" }, this.presenceCursors.map(cursor => (h("div", { class: `ghost-cursor cursor-${cursor.color || 'blue'}`, style: { left: `${cursor.x}px`, top: `${cursor.y}px` } }, h("ui-icon", { name: "mouse-pointer", library: "fontawesome" }), h("div", { class: "cursor-label" }, cursor.name))))));
+        return (h("div", { class: "presence-cursors-layer" }, this.presenceCursors.map((cursor, index) => (h("div", { key: `cursor-${cursor.id || cursor.name || index}`, class: `ghost-cursor cursor-${cursor.color || 'blue'}`, style: { left: `${cursor.x}px`, top: `${cursor.y}px` } }, h("ui-icon", { name: "mouse-pointer", library: "fontawesome" }), h("div", { class: "cursor-label" }, cursor.name))))));
     }
     renderSparkline() {
         if (!this.sparkline || this.sparkline.length < 2)
@@ -503,10 +608,87 @@ const AppListItem = class {
         }).join(' ');
         return (h("svg", { class: "list-sparkline", width: width, height: height }, h("polyline", { fill: "none", stroke: "#3bf673", "stroke-width": "1.5", points: points })));
     }
+    getSkeletonMediaDimensions() {
+        switch (this.size) {
+            case 'sm':
+                return {
+                    avatar: '32px',
+                    imageWidth: '36px',
+                    imageHeight: '36px',
+                    icon: '16px',
+                };
+            case 'lg':
+                return {
+                    avatar: '48px',
+                    imageWidth: '64px',
+                    imageHeight: '64px',
+                    icon: '24px',
+                };
+            default:
+                return {
+                    avatar: '40px',
+                    imageWidth: '48px',
+                    imageHeight: '48px',
+                    icon: '20px',
+                };
+        }
+    }
+    renderSkeletonMedia(kind = 'default') {
+        const dims = this.getSkeletonMediaDimensions();
+        switch (kind) {
+            case 'image':
+                return (h("ui-skeleton", { shape: "rounded-rectangle", width: dims.imageWidth, height: dims.imageHeight, style: { width: dims.imageWidth, height: dims.imageHeight, display: 'block', flexShrink: '0' }, animated: true, animationType: "wave", ariaLabel: "Loading list item media", ariaLive: "off" }));
+            case 'icon':
+                return (h("ui-skeleton", { shape: "square", width: dims.icon, height: dims.icon, borderRadius: "6px", style: { width: dims.icon, height: dims.icon, display: 'block', flexShrink: '0' }, animated: true, animationType: "wave", ariaLabel: "Loading list item icon", ariaLive: "off" }));
+            case 'avatar':
+            case 'default':
+            default:
+                return (h("ui-skeleton", { shape: "circle", width: dims.avatar, height: dims.avatar, style: { width: dims.avatar, height: dims.avatar, display: 'block', flexShrink: '0' }, animated: true, animationType: "wave", ariaLabel: "Loading list item avatar", ariaLive: "off" }));
+        }
+    }
+    getSkeletonMediaKind() {
+        if (this.userAvatar)
+            return 'avatar';
+        if (this.image)
+            return 'image';
+        if (this.icon)
+            return 'icon';
+        if (this.avatarGroup && this.avatarGroupPosition === 'media')
+            return 'avatar';
+        return 'default';
+    }
+    renderSkeletonLabel(width, ariaLabel, height = '14px') {
+        return (h("ui-skeleton", { shape: "text", width: width, height: height, style: { width, height, display: 'block', maxWidth: '100%', alignSelf: 'flex-start' }, animated: true, animationType: "wave", ariaLabel: ariaLabel, ariaLive: "off" }));
+    }
+    getSkeletonTextWidths() {
+        switch (this.size) {
+            case 'sm':
+                return {
+                    label: 'min(78%, 180px)',
+                    sublabel: 'min(58%, 132px)',
+                };
+            case 'lg':
+                return {
+                    label: 'min(82%, 320px)',
+                    sublabel: 'min(62%, 220px)',
+                };
+            default:
+                return {
+                    label: 'min(80%, 240px)',
+                    sublabel: 'min(60%, 160px)',
+                };
+        }
+    }
+    hasGhostMetadata() {
+        return Boolean(this.metadata && typeof this.metadata === 'object' && Object.keys(this.metadata).length > 0);
+    }
+    shouldRenderGhostLayer() {
+        return !this.skeleton && (this.showGhostLayer || this.hasGhostMetadata());
+    }
     renderGhostLayer() {
-        if (!this.showGhostLayer)
+        if (!this.shouldRenderGhostLayer())
             return null;
-        return (h("div", { class: "list-item-ghost-layer" }, h("div", { class: "ghost-meta" }, "IP: ", this.metadata?.ip || '127.0.0.1'), h("div", { class: "ghost-meta" }, "VER: ", this.metadata?.version || '1.0.0'), h("div", { class: "ghost-meta" }, "ID: ", this.value || 'N/A')));
+        return (h("div", { class: "list-item-ghost-layer" }, h("ui-popover", { trigger: "hover", placement: "top-end", variant: "light", popoverRole: "dialog", width: "320px", offset: 10, strategy: "fixed", boundary: "viewport", padding: 12, autoPlacement: true, flip: true, shift: true, maxHeight: "none", closeOnOutsideClick: true, closeOnBlur: false, interactive: true, showArrow: true }, h("button", { type: "button", slot: "trigger", class: "ghost-popover-trigger", "aria-label": "Show item metadata", onMouseDown: (e) => e.stopPropagation() }, h("ui-icon", { name: "info-circle", library: "fontawesome" })), h("div", { slot: "content", class: "ghost-popover-content" }, h("div", { class: "ghost-meta" }, h("span", { class: "ghost-meta-label" }, "IP"), h("span", { class: "ghost-meta-value" }, this.metadata?.ip || '127.0.0.1')), h("div", { class: "ghost-meta" }, h("span", { class: "ghost-meta-label" }, "VER"), h("span", { class: "ghost-meta-value" }, this.metadata?.version || '1.0.0')), h("div", { class: "ghost-meta" }, h("span", { class: "ghost-meta-label" }, "ID"), h("span", { class: "ghost-meta-value" }, this.value || 'N/A'))))));
     }
     parseTagsToItems() {
         if (!this.tags)
@@ -519,6 +701,107 @@ const AppListItem = class {
             return [];
         }
     }
+    getCollaborators() {
+        if (!this.avatarGroup) {
+            return [];
+        }
+        if (typeof this.avatarGroup === 'string') {
+            try {
+                return JSON.parse(this.avatarGroup || '[]');
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.avatarGroup;
+    }
+    getAriaExpanded() {
+        if (this.collapsible) {
+            return this.expanded.toString();
+        }
+        if (this.contextMenu) {
+            return this.contextMenuOpen.toString();
+        }
+        return undefined;
+    }
+    getContainerRole() {
+        return this.interactive || this.collapsible || this.contextMenu || this.expandable ? 'button' : undefined;
+    }
+    getItemAriaLabel() {
+        if (this.a11yLabel) {
+            return this.a11yLabel;
+        }
+        if (this.skeleton) {
+            return 'Loading cluster node';
+        }
+        return `${this.label}, status: ${this.status}, health: ${this.progress}%`;
+    }
+    renderPresenceHalos() {
+        if (!this.presence?.length) {
+            return null;
+        }
+        return this.presence.map((presenceItem, index) => (h("div", { key: `presence-${presenceItem.id || index}`, class: `presence-halo presence-${presenceItem.color || 'blue'}`, title: `User ${presenceItem.id} active` })));
+    }
+    renderSwipeActionButton(action, side, index) {
+        return (h("button", { key: `swipe-${side}-${action.action || action.icon || index}`, type: "button", class: `swipe-action bg-${action.color}`, onClick: () => this.swipeAction.emit({ value: this.value, side, action: action.action }) }, h("ui-icon", { name: action.icon, library: "fontawesome" })));
+    }
+    renderSwipeActions() {
+        if (!this.swipeActions || this.swipeOffset === 0) {
+            return null;
+        }
+        return (h("div", { class: "swipe-actions-container" }, this.swipeOffset > 0 && (h("div", { class: "swipe-action-wrapper left" }, this.leftActions.length > 0 ? (this.leftActions.map((action, index) => this.renderSwipeActionButton(action, 'left', index))) : (h("button", { type: "button", class: `swipe-action left bg-${this.leftActionColor}` }, h("ui-icon", { name: this.leftActionIcon, library: "fontawesome" }))))), this.swipeOffset < 0 && (h("div", { class: "swipe-action-wrapper right" }, this.rightActions.length > 0 ? (this.rightActions.map((action, index) => this.renderSwipeActionButton(action, 'right', index))) : (h("button", { type: "button", class: `swipe-action right bg-${this.rightActionColor}` }, h("ui-icon", { name: this.rightActionIcon, library: "fontawesome" })))))));
+    }
+    renderMediaContent(collaborators) {
+        if (this.skeleton) {
+            return this.renderSkeletonMedia(this.getSkeletonMediaKind());
+        }
+        if (this.userAvatar) {
+            return (h("div", { class: "list-item-avatar-container" }, h("ui-avatar", { class: { 'list-item-avatar': true }, src: this.userAvatar, size: this.size === 'lg' ? 'md' : 'sm' }), this.status && (h("span", { class: `list-item-status status-${this.status} pos-${this.statusPosition}` }))));
+        }
+        if (this.image) {
+            return (h("div", { class: { 'list-item-image': true } }, h("img", { src: this.image, alt: this.label })));
+        }
+        if (this.icon) {
+            return h("ui-icon", { class: "list-item-icon", name: this.icon, library: "fontawesome" });
+        }
+        if (this.avatarGroup && this.avatarGroupPosition === 'media') {
+            return (h("div", { class: "list-item-media-avatar-group" }, h("ui-avatar-group", { items: collaborators, size: "xs", spacing: "-12px", limit: 3 })));
+        }
+        return null;
+    }
+    renderMediaSection(position, collaborators) {
+        if (this.avatarPosition !== position) {
+            return null;
+        }
+        const sectionClass = position === 'left' ? 'list-item-left-media' : 'list-item-right-media';
+        return h("div", { class: sectionClass }, this.renderMediaContent(collaborators));
+    }
+    renderTags(parsedTags) {
+        if (!parsedTags.length || this.skeleton) {
+            return null;
+        }
+        return (h("div", { class: "list-item-tags" }, h("ui-tag-group", { spacing: "4px", readOnly: true }, parsedTags.map((tag, index) => (h("ui-tag", { key: `tag-${typeof tag === 'string' ? tag : tag.label || index}`, label: typeof tag === 'string' ? tag : tag.label, color: tag.color || 'default', variant: tag.variant || 'light', size: "xs", shape: tag.shape || 'pill', icon: tag.icon }))))));
+    }
+    renderContent(parsedTags, collaborators) {
+        const skeletonTextWidths = this.getSkeletonTextWidths();
+        return (h("div", { class: { 'list-item-content': true, 'list-item-skeleton-content': this.skeleton } }, h("div", { class: "list-item-label-wrapper" }, this.showStar && !this.skeleton && (h("ui-icon", { class: { 'list-item-star-icon': true, 'is-starred': this.starred }, name: "star", library: "fontawesome", onClick: (e) => {
+                e.stopPropagation();
+                this.starred = !this.starred;
+                this.starToggle.emit({ value: this.value, starred: this.starred });
+                globalThis.navigator.vibrate?.(20);
+            } })), this.skeleton ? (this.renderSkeletonLabel(skeletonTextWidths.label, 'Loading list item label', '16px')) : (h("span", { class: "list-item-label" }, this.renderLabel(this.label))), this.badge && !this.skeleton && (h("span", { class: `list-item-badge badge-${this.badgeColor}` }, this.badge))), (this.sublabel || this.skeleton) && (h("div", { class: { 'list-item-subline': true, 'is-skeleton-subline': this.skeleton } }, this.skeleton ? (this.renderSkeletonLabel(skeletonTextWidths.sublabel, 'Loading list item sublabel', '12px')) : (h("span", { class: "list-item-sublabel" }, this.renderLabel(this.sublabel))), !this.skeleton && this.renderSparkline())), this.progress >= 0 && !this.skeleton && (h("div", { class: "list-item-progress-container" }, h("div", { class: "list-item-progress-bar", style: { width: `${this.progress}%` } }), h("span", { class: "list-item-progress-text" }, this.progress, "%"))), this.avatarGroup && this.avatarGroupPosition === 'content' && !this.skeleton && (h("div", { class: "list-item-collaborators" }, h("ui-avatar-group", { items: collaborators, size: "xs", spacing: "-8px" }))), this.renderTags(parsedTags)));
+    }
+    renderContextMenu() {
+        if (!this.contextMenuOpen) {
+            return null;
+        }
+        return (h("div", { ref: (el) => {
+                this.contextMenuRef = el;
+            }, class: "list-item-context-menu-container", style: {
+                top: `${this.contextMenuY}px`,
+                left: `${this.contextMenuX}px`
+            } }, h("slot", { name: "context-menu" }, h("div", { class: "context-menu-default" }, h("button", { type: "button", class: "context-menu-item", onClick: () => this.closeContextMenu() }, h("ui-icon", { name: "info-circle", library: "fontawesome" }), h("span", null, "View Details")), h("button", { type: "button", class: "context-menu-item", onClick: () => this.closeContextMenu() }, h("ui-icon", { name: "edit", library: "fontawesome" }), h("span", null, "Edit Item")), h("div", { class: "context-menu-divider" }), h("button", { type: "button", class: "context-menu-item danger", onClick: () => this.closeContextMenu() }, h("ui-icon", { name: "trash", library: "fontawesome" }), h("span", null, "Delete Node"))))));
+    }
     render() {
         const containerClasses = {
             'list-item': true,
@@ -551,31 +834,41 @@ const AppListItem = class {
             'list-item-detail-expanded': this.expandedDetail,
             'is-wobbling': this.wobble,
             [`list-item-density-${this.density}`]: true,
-            [`list-item-aura-${this.status}`]: this.auraMode && this.status && !this.skeleton,
+            [`list-item-aura-${this.status}`]: Boolean(this.auraMode && this.status && !this.skeleton),
             [`list-item-selection-${this.selectionColor}`]: this.selected && this.selectionColor !== 'default',
             [`list-item-hover-${this.hoverColor}`]: this.hoverColor !== 'default',
             'list-item-avatar-right': this.avatarPosition === 'right',
         };
         const paddingLeft = this.level * 24;
         const parsedTags = this.parseTagsToItems();
-        const collaborators = typeof this.avatarGroup === 'string' ? JSON.parse(this.avatarGroup || '[]') : (this.avatarGroup || []);
-        return (h(Host, { key: '58ce4116ce6d57212618035289472a8885198909', onKeyDown: this.handleKeyDown, tabIndex: this.interactive && !this.disabled ? 0 : -1 }, h("div", { key: '2d3d1569f7cadc8e324e75285b08e51865a616d9', class: containerClasses, onClick: this.handleClick, onContextMenu: this.handleContextMenu, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseDown: () => {
+        const collaborators = this.getCollaborators();
+        const ariaExpanded = this.getAriaExpanded();
+        const containerRole = this.getContainerRole();
+        const hasGhostLayer = this.shouldRenderGhostLayer();
+        const itemStyles = {
+            paddingLeft: `${paddingLeft + (this.level > 0 ? 32 : 16)}px`,
+        };
+        if (hasGhostLayer) {
+            itemStyles.paddingRight = this.size === 'lg' ? '52px' : this.size === 'sm' ? '40px' : '46px';
+        }
+        if (this.swipeOffset !== 0) {
+            itemStyles.transform = `translateX(${this.swipeOffset}px)`;
+        }
+        return (h(Host, { key: 'b9be695a6e2ff2568aa80eb007bb75ee251c7d44', onClick: this.handleClick, onContextMenu: this.handleContextMenu, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseDown: () => {
                 this.longPressTimer = setTimeout(() => {
                     this.longPress.emit({ value: this.value });
                 }, this.longPressDelay);
-            }, onMouseUp: () => clearTimeout(this.longPressTimer), onTouchStart: this.handleTouchStart, onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd, tabindex: this.disabled ? -1 : 0, role: "listitem", "aria-label": this.a11yLabel || (this.skeleton ? 'Loading cluster node' : `${this.label}, status: ${this.status}, health: ${this.progress}%`), "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-haspopup": this.contextMenu ? 'menu' : undefined, "aria-expanded": this.contextMenuOpen ? 'true' : 'false', style: {
-                paddingLeft: `${paddingLeft + (this.level > 0 ? 32 : 16)}px`,
-                transform: `translateX(${this.swipeOffset}px)`
-            }, part: "list-item" }, this.priorityPulse && h("div", { key: '077eb5592bd7da1c326619f37da4b42a0dc428b5', class: "list-item-pulse" }), this.presence && this.presence.length > 0 && this.presence.map(p => (h("div", { class: `presence-halo presence-${p.color || 'blue'}`, title: `User ${p.id} active` }))), this.renderGhostLayer(), this.renderPresenceCursors(), this.swipeActions && this.swipeOffset !== 0 && (h("div", { key: 'f59474feb89543f37d4618ec4c422878669cee3a', class: "swipe-actions-container" }, this.swipeOffset > 0 && (h("div", { key: '64c03eb1c0c9633988441ce81c16a0ba024185a4', class: "swipe-action-wrapper left" }, this.leftActions.length > 0 ? (this.leftActions.map(action => (h("div", { class: `swipe-action bg-${action.color}`, onClick: () => this.swipeAction.emit({ value: this.value, side: 'left', action: action.action }) }, h("ui-icon", { name: action.icon, library: "fontawesome" }))))) : (h("div", { class: `swipe-action left bg-${this.leftActionColor}` }, h("ui-icon", { name: this.leftActionIcon, library: "fontawesome" }))))), this.swipeOffset < 0 && (h("div", { key: 'd6670645e03558910d978b74685c6d0d1e76c774', class: "swipe-action-wrapper right" }, this.rightActions.length > 0 ? (this.rightActions.map(action => (h("div", { class: `swipe-action bg-${action.color}`, onClick: () => this.swipeAction.emit({ value: this.value, side: 'right', action: action.action }) }, h("ui-icon", { name: action.icon, library: "fontawesome" }))))) : (h("div", { class: `swipe-action right bg-${this.rightActionColor}` }, h("ui-icon", { name: this.rightActionIcon, library: "fontawesome" }))))))), this.skeleton && h("div", { key: '4c77cacc6165a5f32b3048a3193c08c43fe1b3dd', class: "skeleton-pulse" }), this.showCheckbox && !this.skeleton && (h("div", { key: '74c9ff9a6bec5c8201a1c713e0eb49d99c44dd85', class: "list-item-checkbox" }, h("ui-checkbox", { key: 'bdf7bed4aa503546fab79d1c1ca8f170b7ea4289', checked: this.checked, disabled: this.disabled, readonly: this.readonly, onCheckboxChange: (e) => this.handleCheckboxChange(e), size: "sm" }))), this.collapsible && !this.contextMenu && !this.skeleton && (h("ui-icon", { key: '0d90b7eaec8eada7810b04ce55b94f4e647b6af0', class: "collapse-icon", name: this.expanded ? 'chevron-down' : 'chevron-right', library: "fontawesome" })), this.avatarPosition === 'left' && (h("div", { key: '32e681013eaf3b8dbf239ed093608b0186f56124', class: "list-item-left-media" }, this.userAvatar ? (h("div", { class: "list-item-avatar-container" }, h("ui-avatar", { class: { 'list-item-avatar': true, 'skeleton-circle': this.skeleton }, src: this.userAvatar, size: this.size === 'lg' ? 'md' : 'sm' }), this.status && !this.skeleton && (h("span", { class: `list-item-status status-${this.status} pos-${this.statusPosition}` })))) : this.image ? (h("div", { class: { 'list-item-image': true, 'skeleton-rect': this.skeleton } }, !this.skeleton && h("img", { src: this.image, alt: this.label }))) : this.icon ? (h("ui-icon", { class: "list-item-icon", name: this.icon, library: "fontawesome" })) : this.avatarGroup && this.avatarGroupPosition === 'media' ? (h("div", { class: "list-item-media-avatar-group" }, h("ui-avatar-group", { items: collaborators, size: "xs", spacing: "-12px", limit: 3 }))) : this.skeleton && (h("div", { class: "list-item-media-placeholder skeleton-circle" })))), h("div", { key: '0149ace554979e9a601bd717fab44c8f71a22f75', class: "list-item-content" }, h("div", { key: 'b53dac62842d57fc4cb060bc138903b59ab1e32b', class: "list-item-label-wrapper" }, this.showStar && !this.skeleton && (h("ui-icon", { key: '15d77a692e85eab6ea85bd530068d83d9221ec0b', class: { 'list-item-star-icon': true, 'is-starred': this.starred }, name: this.starred ? 'star' : 'star', library: "fontawesome", onClick: (e) => {
+            }, onMouseUp: () => clearTimeout(this.longPressTimer), onTouchStart: this.handleTouchStart, onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd, tabIndex: this.disabled ? -1 : 0, role: containerRole, "aria-label": this.getItemAriaLabel(), "aria-pressed": containerRole ? this.selected.toString() : undefined, "aria-disabled": containerRole && this.disabled ? 'true' : undefined, "aria-haspopup": containerRole && this.contextMenu ? 'menu' : undefined, "aria-expanded": containerRole ? ariaExpanded : undefined }, h("div", { key: 'b25f5293ef41d9833c045a0255b615e4866b3539', class: containerClasses, style: itemStyles, part: "list-item" }, this.priorityPulse && h("div", { key: 'd2e37a48d4b8a542d0aa4b96af95ce5d903b0ee6', class: "list-item-pulse" }), this.renderPresenceHalos(), this.renderGhostLayer(), this.renderPresenceCursors(), this.renderSwipeActions(), this.skeleton && null, this.showCheckbox && !this.skeleton && (h("div", { key: 'bb535bd28a20bffeb7623bd331e259973755a1cd', class: "list-item-checkbox" }, h("ui-checkbox", { key: '5a24929a68f0a00db315c24a8c3ed8a4187893fb', checked: this.checked, disabled: this.disabled, readonly: this.readonly, onCheckboxChange: (e) => this.handleCheckboxChange(e), size: "sm" }))), this.collapsible && !this.contextMenu && !this.skeleton && (h("ui-icon", { key: 'cee544048870b99d5da5e54043acdcba90d493e3', class: "collapse-icon", name: this.expanded ? 'chevron-down' : 'chevron-right', library: "fontawesome" })), this.renderMediaSection('left', collaborators), this.renderContent(parsedTags, collaborators), h("slot", { key: '45f68fd7931c1c3f1b0e156b8e538f76e18b857d' }), this.renderMediaSection('right', collaborators), this.avatarGroup && this.avatarGroupPosition === 'right' && !this.skeleton && (h("div", { key: '09a39760ebb4fe11d93598a9a5bec29a5e83dfae', class: "list-item-right-collaborators" }, h("ui-avatar-group", { key: '0f0dc6645c37825bd6637ff18bebc47bced1eb3a', items: collaborators, size: "xs", spacing: "-8px" }))), this.counter !== '' && !this.skeleton && (h("span", { key: '74dcd244ba0ef99c1331f6d8a636e0e57ca92516', class: {
+                'list-item-counter': true,
+                [`counter-${this.counterColor}`]: this.counterColor !== 'default'
+            }, part: "counter" }, this.counter)), this.locked && !this.skeleton && (h("ui-icon", { key: 'de12bb2a48f98507af009d76b2704771b1702f4b', class: "list-item-lock-icon", name: "lock", library: "fontawesome", onClick: (e) => {
                 e.stopPropagation();
-                this.starred = !this.starred;
-                this.starToggle.emit({ value: this.value, starred: this.starred });
-                if (navigator.vibrate)
-                    navigator.vibrate(20);
-            } })), h("span", { key: '08cc2c0d174b85bd07acee7aa98c0498d18bce4f', class: { 'list-item-label': true, 'skeleton-text': this.skeleton } }, this.skeleton ? '' : this.renderLabel(this.label)), this.badge && !this.skeleton && (h("span", { key: 'f0c536c274a653d4cb8a6ae4e9b0905a938d0073', class: `list-item-badge badge-${this.badgeColor}` }, this.badge))), (this.sublabel || this.skeleton) && (h("div", { key: 'e3f001f937904d3e291834de24a3305d32c5f22d', class: "list-item-subline" }, h("span", { key: 'cab7999b62cc0d3cca31b573043be48be72ad3b2', class: { 'list-item-sublabel': true, 'skeleton-text': this.skeleton } }, this.skeleton ? '' : this.renderLabel(this.sublabel)), this.renderSparkline())), this.progress >= 0 && !this.skeleton && (h("div", { key: '10559a4b748ef1d49bc7748c35d05217294806b0', class: "list-item-progress-container" }, h("div", { key: '36ec119650364308b1d86b0ed0361b675dd3b56a', class: "list-item-progress-bar", style: { width: `${this.progress}%` } }), h("span", { key: 'ae6209cc9da5ddc2c4dad32c000602d3d4ed7977', class: "list-item-progress-text" }, this.progress, "%"))), this.avatarGroup && this.avatarGroupPosition === 'content' && !this.skeleton && (h("div", { key: '91b42175d2203685397be51b38b0a20e978dab85', class: "list-item-collaborators" }, h("ui-avatar-group", { key: '97782481c4725e203cafb230bdf9cff36ab0b4c7', items: collaborators, size: "xs", spacing: "-8px" }))), parsedTags.length > 0 && !this.skeleton && (h("div", { key: 'ce41b5b18a85962e36532117def183ebec3a889e', class: "list-item-tags" }, h("ui-tag-group", { key: '9fefbdcf44f0f72caf6cb956a7ef663723440a51', spacing: "4px" }, parsedTags.map((tag) => (h("ui-tag", { label: typeof tag === 'string' ? tag : tag.label, color: tag.color || 'default', variant: tag.variant || 'light', size: "xs", shape: tag.shape || 'pill', icon: tag.icon }))))))), h("slot", { key: 'f5f37f87becd210aebc7d3b443805447b2f08934' }), this.avatarPosition === 'right' && (h("div", { key: '1a0024c8eb561fc77c10e6ca393556d57e5b82dc', class: "list-item-right-media" }, this.userAvatar ? (h("div", { class: "list-item-avatar-container" }, h("ui-avatar", { class: { 'list-item-avatar': true, 'skeleton-circle': this.skeleton }, src: this.userAvatar, size: this.size === 'lg' ? 'md' : 'sm' }), this.status && !this.skeleton && (h("span", { class: `list-item-status status-${this.status} pos-${this.statusPosition}` })))) : this.image ? (h("div", { class: { 'list-item-image': true, 'skeleton-rect': this.skeleton } }, !this.skeleton && h("img", { src: this.image, alt: this.label }))) : this.icon ? (h("ui-icon", { class: "list-item-icon", name: this.icon, library: "fontawesome" })) : this.avatarGroup && this.avatarGroupPosition === 'media' ? (h("div", { class: "list-item-media-avatar-group" }, h("ui-avatar-group", { items: collaborators, size: "xs", spacing: "-12px", limit: 3 }))) : null)), this.avatarGroup && this.avatarGroupPosition === 'right' && !this.skeleton && (h("div", { key: 'ca2da167a6df02533aaf3e4d15b14af4a77b188c', class: "list-item-right-collaborators" }, h("ui-avatar-group", { key: '93aca83ac5defecf49eba0144ef8eb793cf84d90', items: collaborators, size: "xs", spacing: "-8px" }))), this.counter !== '' && !this.skeleton && (h("span", { key: 'e32d27e4c9f1e9899d9ea327f2aded8f2184de2a', class: "list-item-counter" }, this.counter)), this.locked && !this.skeleton && (h("ui-icon", { key: '7d5bb73fa57391b4f06938ec16a625c86b89cf36', class: "list-item-lock-icon", name: "lock", library: "fontawesome" })), this.showMenu && !this.skeleton && (h("div", { key: '5cac8d9f75433668559299587d62b358a564cdbc', class: "list-item-menu", onClick: (e) => { e.stopPropagation(); this.toggleContextMenu(e); } }, h("ui-icon", { key: '08ca49e61037d1a7f1590c9941213434caf3f993', name: "ellipsis-v", library: "fontawesome" })))), this.contextMenuOpen && (h("div", { key: '44a01fb51995af67c9a61464caab980c8f4ad523', ref: el => this.contextMenuRef = el, class: "list-item-context-menu-container", style: {
-                top: `${this.contextMenuY}px`,
-                left: `${this.contextMenuX}px`
-            } }, h("slot", { key: 'b44a9d26b3d06e2528c8133f6080db1eee944dc2', name: "context-menu" }, h("div", { key: '455e867a0acb5fcd97df1e1c63de11ab643101ac', class: "context-menu-default" }, h("div", { key: 'ec25558af4c83b57bf36e7c430e5296de74956e9', class: "context-menu-item", onClick: () => this.closeContextMenu() }, h("ui-icon", { key: '69be015e453751f92d2572c82f83977b170386ef', name: "info-circle", library: "fontawesome" }), h("span", { key: 'cc4a0148cba635cd3b7305827339b8be101b21dc' }, "View Details")), h("div", { key: 'bf42c2745524c05869583e60580777266f5fad0d', class: "context-menu-item", onClick: () => this.closeContextMenu() }, h("ui-icon", { key: 'a40e0515fdf007eb09f0348947f38be95b36de42', name: "edit", library: "fontawesome" }), h("span", { key: '9243b179bbcb3b7f09c31ca72d73b38b166d0bb1' }, "Edit Item")), h("div", { key: '881528fbf3230427a153c535c606d1edabd911ff', class: "context-menu-divider" }), h("div", { key: '18cd2ade135fdc8cbc9805361b889897a8c9d384', class: "context-menu-item danger", onClick: () => this.closeContextMenu() }, h("ui-icon", { key: 'a16b3e59fc28d532abbda7d2228889d0e2475671', name: "trash", library: "fontawesome" }), h("span", { key: '1c7dae8d54e168682d9a1bdb6665951a95df092c' }, "Delete Node")))))), this.expandable && (h("div", { key: 'd6da1edf62a007534109bc82de4028efc4235912', class: { 'list-item-detail-panel': true, 'is-expanded': this.expandedDetail } }, h("slot", { key: '6c163928bcb53c29a47d3c56fbfe0ecbfcd5f8c3', name: "detail" })))));
+                this.wobble = true;
+                setTimeout(() => this.wobble = false, 400);
+            } })), this.showMenu && !this.skeleton && (h("button", { key: 'b654fbb2fefe5ea30475f6993b5647d0d6770a7b', type: "button", class: "list-item-menu", onClick: (e) => { e.stopPropagation(); this.toggleContextMenu(e); } }, h("ui-icon", { key: '808303a454a47c6f1053bda6f20292d30f6c1577', name: "ellipsis-v", library: "fontawesome" })))), this.collapsible && (h("div", { key: 'f8e93ec052234d8350044a9d62b86c89bd76df5b', class: {
+                'list-item-children': true,
+                'is-collapsed': !this.expanded,
+            }, "aria-hidden": (!this.expanded).toString() }, h("slot", { key: '4dd4214df4dfb716cb67c63709f9c50527822f65', name: "children" }))), this.renderContextMenu(), this.expandable && (h("div", { key: 'a9ec15208be52ce95ed34ec4e0cd59b15116ee44', class: { 'list-item-detail-panel': true, 'is-expanded': this.expandedDetail } }, h("slot", { key: 'e7c0c56505d51902b915016dcad989e2856debc4', name: "detail" })))));
     }
 };
 AppListItem.style = listItemCss();