atomicuilibrary 0.0.1 → 0.1.3

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

@@ -21,7 +21,7 @@ export class AppListItem {
     href = '';
     target = '_self';
     contextMenu = false;
-    contextMenuTrigger = 'click';
+    contextMenuTrigger = 'rightClick';
     contextMenuPosition = 'auto';
     // New features
     showCheckbox = false;
@@ -31,6 +31,7 @@ export class AppListItem {
     badge = '';
     badgeColor = 'default';
     counter = '';
+    counterColor = 'success';
     /** JSON string or array of tag objects */
     tags = '';
     /** Image URL for a square/landscape thumbnail */
@@ -116,6 +117,7 @@ export class AppListItem {
     contextMenuY = 0;
     swipeOffset = 0;
     showStatusEditor = false;
+    ghostPopoverVariant = 'dark';
     listItemClick;
     listItemActionClick;
     listItemToggle;
@@ -133,19 +135,95 @@ export class AppListItem {
     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();
             }
@@ -162,8 +240,6 @@ export class AppListItem {
             return;
         }
         if (this.locked) {
-            this.wobble = true;
-            setTimeout(() => this.wobble = false, 400);
             return;
         }
         if (this.expandable && !this.contextMenu) {
@@ -241,17 +317,19 @@ export class AppListItem {
                     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
@@ -326,8 +404,7 @@ export class AppListItem {
             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);
         }
@@ -347,6 +424,28 @@ export class AppListItem {
             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;
@@ -355,20 +454,10 @@ export class AppListItem {
         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) {
@@ -380,8 +469,10 @@ export class AppListItem {
     };
     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) {
@@ -394,14 +485,22 @@ export class AppListItem {
         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)
@@ -418,10 +517,87 @@ export class AppListItem {
         }).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)
@@ -434,6 +610,107 @@ export class AppListItem {
             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,
@@ -466,31 +743,41 @@ export class AppListItem {
             '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" })))));
     }
     static get is() { return "ui-list-item"; }
     static get encapsulation() { return "shadow"; }
@@ -678,7 +965,7 @@ export class AppListItem {
                 "mutable": false,
                 "complexType": {
                     "original": "StatusColor",
-                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "resolved": "\"black\" | \"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\" | \"white\"",
                     "references": {
                         "StatusColor": {
                             "location": "import",
@@ -938,7 +1225,7 @@ export class AppListItem {
                 "setter": false,
                 "reflect": false,
                 "attribute": "context-menu-trigger",
-                "defaultValue": "'click'"
+                "defaultValue": "'rightClick'"
             },
             "contextMenuPosition": {
                 "type": "string",
@@ -1072,7 +1359,7 @@ export class AppListItem {
                 "mutable": false,
                 "complexType": {
                     "original": "StatusColor",
-                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "resolved": "\"black\" | \"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\" | \"white\"",
                     "references": {
                         "StatusColor": {
                             "location": "import",
@@ -1114,6 +1401,33 @@ export class AppListItem {
                 "attribute": "counter",
                 "defaultValue": "''"
             },
+            "counterColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StatusColor",
+                    "resolved": "\"black\" | \"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\" | \"white\"",
+                    "references": {
+                        "StatusColor": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::StatusColor",
+                            "referenceLocation": "StatusColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "counter-color",
+                "defaultValue": "'success'"
+            },
             "tags": {
                 "type": "string",
                 "mutable": false,
@@ -1219,7 +1533,7 @@ export class AppListItem {
                 "mutable": false,
                 "complexType": {
                     "original": "StatusColor",
-                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "resolved": "\"black\" | \"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\" | \"white\"",
                     "references": {
                         "StatusColor": {
                             "location": "import",
@@ -1246,7 +1560,7 @@ export class AppListItem {
                 "mutable": false,
                 "complexType": {
                     "original": "StatusColor",
-                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "resolved": "\"black\" | \"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\" | \"white\"",
                     "references": {
                         "StatusColor": {
                             "location": "import",
@@ -1320,7 +1634,7 @@ export class AppListItem {
                 "mutable": false,
                 "complexType": {
                     "original": "StatusColor",
-                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "resolved": "\"black\" | \"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\" | \"white\"",
                     "references": {
                         "StatusColor": {
                             "location": "import",
@@ -1962,7 +2276,8 @@ export class AppListItem {
             "contextMenuX": {},
             "contextMenuY": {},
             "swipeOffset": {},
-            "showStatusEditor": {}
+            "showStatusEditor": {},
+            "ghostPopoverVariant": {}
         };
     }
     static get events() {