atomicuilibrary 0.0.1

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

@@ -0,0 +1,2184 @@
+import { h, Host } from "@stencil/core";
+export class AppListItem {
+    el;
+    selected = false;
+    disabled = false;
+    readonly = false;
+    label = '';
+    value = '';
+    icon = '';
+    actionIcon = '';
+    size = 'md';
+    color = 'default';
+    variant = 'text';
+    nested = false;
+    level = 0;
+    collapsible = false;
+    expanded = false;
+    divider = false;
+    dense = false;
+    interactive = true;
+    href = '';
+    target = '_self';
+    contextMenu = false;
+    contextMenuTrigger = 'click';
+    contextMenuPosition = 'auto';
+    // New features
+    showCheckbox = false;
+    checked = false;
+    sublabel = '';
+    multiline = false;
+    badge = '';
+    badgeColor = 'default';
+    counter = '';
+    /** JSON string or array of tag objects */
+    tags = '';
+    /** Image URL for a square/landscape thumbnail */
+    image = '';
+    /** User avatar URL */
+    userAvatar = '';
+    /** Whether to show as a loading skeleton */
+    skeleton = false;
+    /** Text to highlight (for search results) */
+    highlight = '';
+    /** Custom selection color (primary, success, etc.) */
+    selectionColor = 'default';
+    /** Custom hover color (primary, success, etc.) */
+    hoverColor = 'default';
+    /** Position of the avatar/image (left or right) */
+    avatarPosition = 'left';
+    /** Whether to show a 3-dot action menu icon */
+    showMenu = false;
+    rightActionColor = 'danger';
+    /** Multiple collaborators to show as an avatar group */
+    avatarGroup = '';
+    /** Position of the avatar group: 'media' (leading), 'content' (below label), 'right' (after content) */
+    avatarGroupPosition = 'content';
+    /** Whether to show hierarchical connection lines (tree view) */
+    treeLines = false;
+    /** Whether the parent is in grid mode */
+    gridMode = false;
+    /** Delay for long press event (ms) */
+    longPressDelay = 600;
+    /** Whether the item is locked */
+    locked = false;
+    /** Enable swipe actions (mobile) */
+    swipeActions = false;
+    /** Swipe behavior: 'reveal' or 'dismiss' */
+    swipeBehavior = 'reveal';
+    leftActionIcon = '';
+    leftActionColor = 'success';
+    rightActionIcon = '';
+    /** Progress percentage (0-100), -1 to disable */
+    progress = -1;
+    /** Presence status: 'online', 'offline', 'busy', 'away' */
+    status = '';
+    /** Position of the status dot */
+    statusPosition = 'bottom-right';
+    /** Whether to show the star icon */
+    showStar = false;
+    /** Multiple actions for left swipe reveal [{icon, color, action}] */
+    leftActions = [];
+    /** Multiple actions for right swipe reveal [{icon, color, action}] */
+    rightActions = [];
+    /** Threshold for full-swipe trigger (% of width) */
+    fullSwipeThreshold = 0.75;
+    /** Whether the item is starred/favorited */
+    starred = false;
+    /** Whether the item can be expanded to show more details */
+    expandable = false;
+    /** Whether the expansion detail is shown */
+    expandedDetail = false;
+    /** Whether the item is currently shaking/wobbling (visual haptic) */
+    wobble = false;
+    /** Whether to show a pulsating ambient glow for high priority */
+    priorityPulse = false;
+    /** Collaborative presence data [{id, color}] */
+    presence = [];
+    /** Layout density mode */
+    density = 'comfortable';
+    /** Mini sparkline data [10, 50, 20...] */
+    sparkline = [];
+    /** Custom metadata for Ghost Layer {ip, id, etc.} */
+    metadata = {};
+    /** Whether to show the Ghost Layer (Alt mode) */
+    showGhostLayer = false;
+    /** Whether to show a background heatmap glow matching the status */
+    auraMode = false;
+    /** Professional presence cursors [{name, color, x, y}] */
+    presenceCursors = [];
+    /** Interactive accessibility label */
+    a11yLabel = '';
+    isFocused = false;
+    isHovered = false;
+    contextMenuOpen = false;
+    contextMenuX = 0;
+    contextMenuY = 0;
+    swipeOffset = 0;
+    showStatusEditor = false;
+    listItemClick;
+    listItemActionClick;
+    listItemToggle;
+    contextMenuOpenEvent;
+    contextMenuCloseEvent;
+    checkboxChange;
+    pillClick;
+    tagClick;
+    swipeAction;
+    longPress;
+    starToggle;
+    detailToggle;
+    contextMenuRef;
+    touchStartX = 0;
+    touchCurrentX = 0;
+    isSwiping = false;
+    longPressTimer;
+    componentDidLoad() {
+        if (this.contextMenu) {
+            document.addEventListener('click', this.handleOutsideClick);
+        }
+    }
+    disconnectedCallback() {
+        if (this.contextMenu) {
+            document.removeEventListener('click', this.handleOutsideClick);
+        }
+    }
+    handleOutsideClick = (e) => {
+        if (this.contextMenuOpen && this.contextMenuRef && !this.contextMenuRef.contains(e.target)) {
+            const listItem = this.el.shadowRoot.querySelector('.list-item');
+            if (listItem && !listItem.contains(e.target)) {
+                this.closeContextMenu();
+            }
+        }
+    };
+    handleClick = (e) => {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        // Handle context menu on click
+        if (this.contextMenu && this.contextMenuTrigger === 'click') {
+            e.stopPropagation();
+            this.toggleContextMenu(e);
+            return;
+        }
+        if (this.locked) {
+            this.wobble = true;
+            setTimeout(() => this.wobble = false, 400);
+            return;
+        }
+        if (this.expandable && !this.contextMenu) {
+            this.expandedDetail = !this.expandedDetail;
+            this.detailToggle.emit({ value: this.value, expanded: this.expandedDetail });
+            return;
+        }
+        if (this.collapsible && !this.contextMenu) {
+            this.expanded = !this.expanded;
+            this.listItemToggle.emit({ value: this.value, expanded: this.expanded });
+        }
+        if (this.interactive && !this.contextMenu && !this.locked) {
+            if (!e.shiftKey && !e.ctrlKey && !e.metaKey) {
+                this.selected = !this.selected;
+            }
+            this.listItemClick.emit({
+                value: this.value,
+                selected: this.selected,
+                shiftKey: e.shiftKey,
+                ctrlKey: e.ctrlKey,
+                metaKey: e.metaKey,
+                altKey: e.altKey
+            });
+        }
+        if (this.href) {
+            e.preventDefault();
+            window.open(this.href, this.target);
+        }
+    };
+    handleContextMenu = (e) => {
+        if (this.contextMenu && this.contextMenuTrigger === 'rightClick') {
+            e.preventDefault();
+            e.stopPropagation();
+            this.toggleContextMenu(e);
+        }
+    };
+    toggleContextMenu = (e) => {
+        if (this.contextMenuOpen) {
+            this.closeContextMenu();
+        }
+        else {
+            this.openContextMenu(e);
+        }
+    };
+    openContextMenu = (e) => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        // Estimated context menu dimensions (will adjust based on actual size)
+        const menuWidth = 200;
+        const menuHeight = 300;
+        // Viewport dimensions
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        // Calculate initial position based on contextMenuPosition prop
+        let x = 0;
+        let y = 0;
+        if (this.contextMenuTrigger === 'rightClick') {
+            // Use mouse position for right-click
+            x = e.clientX;
+            y = e.clientY;
+        }
+        else {
+            // Calculate position relative to the list item
+            switch (this.contextMenuPosition) {
+                case 'right':
+                    x = rect.right;
+                    y = rect.top;
+                    break;
+                case 'left':
+                    x = rect.left - menuWidth;
+                    y = rect.top;
+                    break;
+                case 'bottom':
+                    x = rect.left;
+                    y = rect.bottom;
+                    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;
+                    }
+                    break;
+            }
+        }
+        // Edge detection and adjustment for all directions
+        // Right edge: if menu extends beyond right viewport edge, shift left
+        if (x + menuWidth > viewportWidth) {
+            x = viewportWidth - menuWidth - 10; // 10px padding from edge
+        }
+        // Left edge: if menu extends beyond left viewport edge, shift right
+        if (x < 0) {
+            x = 10; // 10px padding from edge
+        }
+        // Bottom edge: if menu extends beyond bottom viewport edge, shift up
+        if (y + menuHeight > viewportHeight) {
+            y = viewportHeight - menuHeight - 10; // 10px padding from edge
+            // If still not enough space, position above the trigger element
+            if (y < 0) {
+                y = Math.max(10, rect.top - menuHeight);
+            }
+        }
+        // Top edge: if menu extends beyond top viewport edge, shift down
+        if (y < 0) {
+            y = 10; // 10px padding from edge
+        }
+        this.contextMenuX = x;
+        this.contextMenuY = y;
+        this.contextMenuOpen = true;
+        this.contextMenuOpenEvent.emit({ value: this.value });
+    };
+    closeContextMenu = () => {
+        this.contextMenuOpen = false;
+        this.contextMenuCloseEvent.emit({ value: this.value });
+    };
+    handleCheckboxChange = (e) => {
+        e.stopPropagation();
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        this.checked = !this.checked;
+        this.checkboxChange.emit({ value: this.value, checked: this.checked });
+    };
+    handleFocus = () => {
+        this.isFocused = true;
+    };
+    handleBlur = () => {
+        this.isFocused = false;
+    };
+    handleMouseEnter = (e) => {
+        this.isHovered = true;
+        // Handle context menu on hover
+        if (this.contextMenu && this.contextMenuTrigger === 'hover') {
+            this.openContextMenu(e);
+        }
+    };
+    handleMouseLeave = () => {
+        this.isHovered = false;
+        // Close context menu on hover out (with delay)
+        if (this.contextMenu && this.contextMenuTrigger === 'hover') {
+            setTimeout(() => {
+                if (!this.isHovered) {
+                    this.closeContextMenu();
+                }
+            }, 300);
+        }
+    };
+    handleTouchStart = (e) => {
+        if (!this.swipeActions || this.disabled)
+            return;
+        this.touchStartX = e.touches[0].clientX;
+        this.isSwiping = true;
+        // Long press initiation
+        if (this.longPressDelay > 0) {
+            this.longPressTimer = setTimeout(() => {
+                if (!this.swipeOffset) {
+                    this.longPress.emit({ value: this.value });
+                    if (navigator.vibrate)
+                        navigator.vibrate(50); // Haptic feedback
+                }
+            }, this.longPressDelay);
+        }
+    };
+    handleTouchMove = (e) => {
+        if (!this.isSwiping)
+            return;
+        this.touchCurrentX = e.touches[0].clientX;
+        const delta = this.touchCurrentX - this.touchStartX;
+        // Clear long press on move
+        if (Math.abs(delta) > 10)
+            clearTimeout(this.longPressTimer);
+        // Limits
+        if (delta > 80 && !this.leftActionIcon && this.leftActions.length === 0)
+            return;
+        if (delta < -80 && !this.rightActionIcon && this.rightActions.length === 0)
+            return;
+        this.swipeOffset = delta;
+    };
+    handleTouchEnd = () => {
+        if (!this.swipeActions)
+            return;
+        clearTimeout(this.longPressTimer); // Clear long press on touch end
+        const threshold = this.el.clientWidth * 0.25;
+        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 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);
+            return;
+        }
+        if (absOffset > threshold) {
+            this.swipeOffset = this.swipeOffset > 0 ? 80 * Math.max(1, this.leftActions.length) : -80 * Math.max(1, this.rightActions.length);
+        }
+        else {
+            this.swipeOffset = 0;
+        }
+    };
+    async focusItem() {
+        this.isFocused = true;
+        this.el.shadowRoot.querySelector('.list-item')?.setAttribute('tabindex', '0');
+        this.el.shadowRoot.querySelector('.list-item')?.focus();
+    }
+    handleKeyDown = (e) => {
+        if (this.isFocused) {
+            if (e.key === 'Enter') {
+                this.listItemClick.emit({ value: this.value, selected: !this.selected });
+            }
+        }
+    };
+    renderLabel(text) {
+        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);
+    }
+    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))))));
+    }
+    renderSparkline() {
+        if (!this.sparkline || this.sparkline.length < 2)
+            return null;
+        const max = Math.max(...this.sparkline);
+        const min = Math.min(...this.sparkline);
+        const range = max - min || 1;
+        const width = 60;
+        const height = 20;
+        const points = this.sparkline.map((val, i) => {
+            const x = (i / (this.sparkline.length - 1)) * width;
+            const y = height - ((val - min) / range) * height;
+            return `${x},${y}`;
+        }).join(' ');
+        return (h("svg", { class: "list-sparkline", width: width, height: height }, h("polyline", { fill: "none", stroke: "#3bf673", "stroke-width": "1.5", points: points })));
+    }
+    renderGhostLayer() {
+        if (!this.showGhostLayer)
+            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')));
+    }
+    parseTagsToItems() {
+        if (!this.tags)
+            return [];
+        try {
+            const parsed = typeof this.tags === 'string' ? JSON.parse(this.tags) : this.tags;
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    render() {
+        const containerClasses = {
+            'list-item': true,
+            [`list-item-${this.size}`]: true,
+            [`list-item-${this.color}`]: true,
+            [`list-item-${this.variant}`]: true,
+            'list-item-selected': this.selected,
+            'list-item-disabled': this.disabled,
+            'list-item-readonly': this.readonly,
+            'list-item-focused': this.isFocused,
+            'list-item-hovered': this.isHovered,
+            'list-item-nested': this.nested,
+            'list-item-tree-lines': this.treeLines && this.level > 0,
+            'list-item-grid': this.gridMode,
+            'list-item-collapsible': this.collapsible,
+            'list-item-expanded': this.expanded,
+            'list-item-divider': this.divider,
+            'list-item-dense': this.dense,
+            'list-item-interactive': this.interactive,
+            'list-item-link': !!this.href,
+            'list-item-context-menu': this.contextMenu,
+            'list-item-context-menu-open': this.contextMenuOpen,
+            'list-item-multiline': this.multiline,
+            'list-item-with-checkbox': this.showCheckbox,
+            'list-item-checked': this.checked,
+            'is-skeleton': this.skeleton,
+            'list-item-locked': this.locked,
+            'list-item-starred': this.starred,
+            'list-item-expandable': this.expandable,
+            '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-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: () => {
+                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) => {
+                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" })))));
+    }
+    static get is() { return "ui-list-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["list-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["list-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "''"
+            },
+            "actionIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "action-icon",
+                "defaultValue": "''"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BasicSize",
+                    "resolved": "\"default\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\"",
+                    "references": {
+                        "BasicSize": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::BasicSize",
+                            "referenceLocation": "BasicSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "color": {
+                "type": "string",
+                "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\"",
+                    "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": "color",
+                "defaultValue": "'default'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'filled' | 'outlined' | 'text' | 'soft'",
+                    "resolved": "\"filled\" | \"outlined\" | \"soft\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'text'"
+            },
+            "nested": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "nested",
+                "defaultValue": "false"
+            },
+            "level": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "level",
+                "defaultValue": "0"
+            },
+            "collapsible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapsible",
+                "defaultValue": "false"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expanded",
+                "defaultValue": "false"
+            },
+            "divider": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "divider",
+                "defaultValue": "false"
+            },
+            "dense": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dense",
+                "defaultValue": "false"
+            },
+            "interactive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "interactive",
+                "defaultValue": "true"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href",
+                "defaultValue": "''"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'_blank' | '_self' | '_parent' | '_top'",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target",
+                "defaultValue": "'_self'"
+            },
+            "contextMenu": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "context-menu",
+                "defaultValue": "false"
+            },
+            "contextMenuTrigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'click' | 'hover' | 'rightClick'",
+                    "resolved": "\"click\" | \"hover\" | \"rightClick\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "context-menu-trigger",
+                "defaultValue": "'click'"
+            },
+            "contextMenuPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FourSidePosition | 'auto'",
+                    "resolved": "\"auto\" | \"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "FourSidePosition": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::FourSidePosition",
+                            "referenceLocation": "FourSidePosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "context-menu-position",
+                "defaultValue": "'auto'"
+            },
+            "showCheckbox": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-checkbox",
+                "defaultValue": "false"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "sublabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sublabel",
+                "defaultValue": "''"
+            },
+            "multiline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiline",
+                "defaultValue": "false"
+            },
+            "badge": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge",
+                "defaultValue": "''"
+            },
+            "badgeColor": {
+                "type": "string",
+                "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\"",
+                    "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": "badge-color",
+                "defaultValue": "'default'"
+            },
+            "counter": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "counter",
+                "defaultValue": "''"
+            },
+            "tags": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | any[]",
+                    "resolved": "any[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "JSON string or array of tag objects"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tags",
+                "defaultValue": "''"
+            },
+            "image": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Image URL for a square/landscape thumbnail"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image",
+                "defaultValue": "''"
+            },
+            "userAvatar": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User avatar URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "user-avatar",
+                "defaultValue": "''"
+            },
+            "skeleton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show as a loading skeleton"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "skeleton",
+                "defaultValue": "false"
+            },
+            "highlight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to highlight (for search results)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "highlight",
+                "defaultValue": "''"
+            },
+            "selectionColor": {
+                "type": "string",
+                "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\"",
+                    "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": "Custom selection color (primary, success, etc.)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selection-color",
+                "defaultValue": "'default'"
+            },
+            "hoverColor": {
+                "type": "string",
+                "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\"",
+                    "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": "Custom hover color (primary, success, etc.)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hover-color",
+                "defaultValue": "'default'"
+            },
+            "avatarPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LeftRight",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {
+                        "LeftRight": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::LeftRight",
+                            "referenceLocation": "LeftRight"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the avatar/image (left or right)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "avatar-position",
+                "defaultValue": "'left'"
+            },
+            "showMenu": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show a 3-dot action menu icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-menu",
+                "defaultValue": "false"
+            },
+            "rightActionColor": {
+                "type": "string",
+                "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\"",
+                    "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": "right-action-color",
+                "defaultValue": "'danger'"
+            },
+            "avatarGroup": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | any[]",
+                    "resolved": "any[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Multiple collaborators to show as an avatar group"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "avatar-group",
+                "defaultValue": "''"
+            },
+            "avatarGroupPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'media' | 'content' | 'right'",
+                    "resolved": "\"content\" | \"media\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the avatar group: 'media' (leading), 'content' (below label), 'right' (after content)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "avatar-group-position",
+                "defaultValue": "'content'"
+            },
+            "treeLines": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show hierarchical connection lines (tree view)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tree-lines",
+                "defaultValue": "false"
+            },
+            "gridMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the parent is in grid mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "grid-mode",
+                "defaultValue": "false"
+            },
+            "longPressDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Delay for long press event (ms)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "long-press-delay",
+                "defaultValue": "600"
+            },
+            "locked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the item is locked"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locked",
+                "defaultValue": "false"
+            },
+            "swipeActions": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable swipe actions (mobile)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "swipe-actions",
+                "defaultValue": "false"
+            },
+            "swipeBehavior": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'reveal' | 'dismiss'",
+                    "resolved": "\"dismiss\" | \"reveal\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Swipe behavior: 'reveal' or 'dismiss'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "swipe-behavior",
+                "defaultValue": "'reveal'"
+            },
+            "leftActionIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "left-action-icon",
+                "defaultValue": "''"
+            },
+            "leftActionColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "left-action-color",
+                "defaultValue": "'success'"
+            },
+            "rightActionIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "right-action-icon",
+                "defaultValue": "''"
+            },
+            "progress": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Progress percentage (0-100), -1 to disable"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "progress",
+                "defaultValue": "-1"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'online' | 'offline' | 'busy' | 'away' | ''",
+                    "resolved": "\"\" | \"away\" | \"busy\" | \"offline\" | \"online\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Presence status: 'online', 'offline', 'busy', 'away'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status",
+                "defaultValue": "''"
+            },
+            "statusPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top-right' | 'bottom-right'",
+                    "resolved": "\"bottom-right\" | \"top-right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the status dot"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status-position",
+                "defaultValue": "'bottom-right'"
+            },
+            "showStar": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the star icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-star",
+                "defaultValue": "false"
+            },
+            "leftActions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[]",
+                    "resolved": "any[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Multiple actions for left swipe reveal [{icon, color, action}]"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "rightActions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[]",
+                    "resolved": "any[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Multiple actions for right swipe reveal [{icon, color, action}]"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "fullSwipeThreshold": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Threshold for full-swipe trigger (% of width)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "full-swipe-threshold",
+                "defaultValue": "0.75"
+            },
+            "starred": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the item is starred/favorited"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "starred",
+                "defaultValue": "false"
+            },
+            "expandable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the item can be expanded to show more details"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expandable",
+                "defaultValue": "false"
+            },
+            "expandedDetail": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the expansion detail is shown"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expanded-detail",
+                "defaultValue": "false"
+            },
+            "wobble": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the item is currently shaking/wobbling (visual haptic)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "wobble",
+                "defaultValue": "false"
+            },
+            "priorityPulse": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show a pulsating ambient glow for high priority"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "priority-pulse",
+                "defaultValue": "false"
+            },
+            "presence": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[]",
+                    "resolved": "any[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Collaborative presence data [{id, color}]"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "density": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'cozy' | 'comfortable' | 'compact'",
+                    "resolved": "\"comfortable\" | \"compact\" | \"cozy\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout density mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "density",
+                "defaultValue": "'comfortable'"
+            },
+            "sparkline": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mini sparkline data [10, 50, 20...]"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "metadata": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom metadata for Ghost Layer {ip, id, etc.}"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "metadata",
+                "defaultValue": "{}"
+            },
+            "showGhostLayer": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the Ghost Layer (Alt mode)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-ghost-layer",
+                "defaultValue": "false"
+            },
+            "auraMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show a background heatmap glow matching the status"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aura-mode",
+                "defaultValue": "false"
+            },
+            "presenceCursors": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[]",
+                    "resolved": "any[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Professional presence cursors [{name, color, x, y}]"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "a11yLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Interactive accessibility label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "a-1-1y-label",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isFocused": {},
+            "isHovered": {},
+            "contextMenuOpen": {},
+            "contextMenuX": {},
+            "contextMenuY": {},
+            "swipeOffset": {},
+            "showStatusEditor": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "listItemClick",
+                "name": "listItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ value: string; selected: boolean; shiftKey?: boolean; ctrlKey?: boolean; metaKey?: boolean; altKey?: boolean; }",
+                    "resolved": "{ value: string; selected: boolean; shiftKey?: boolean; ctrlKey?: boolean; metaKey?: boolean; altKey?: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "listItemActionClick",
+                "name": "listItemActionClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ value: string; }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "listItemToggle",
+                "name": "listItemToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ value: string; expanded: boolean; }",
+                    "resolved": "{ value: string; expanded: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "contextMenuOpenEvent",
+                "name": "contextMenuOpenEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ value: string; }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "contextMenuCloseEvent",
+                "name": "contextMenuCloseEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ value: string; }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "checkboxChange",
+                "name": "checkboxChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ value: string; checked: boolean; }",
+                    "resolved": "{ value: string; checked: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "pillClick",
+                "name": "pillClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ value: string; label: string; index: number; pill: any; }",
+                    "resolved": "{ value: string; label: string; index: number; pill: any; }",
+                    "references": {}
+                }
+            }, {
+                "method": "tagClick",
+                "name": "tagClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ value: string; label: string; index: number; }",
+                    "resolved": "{ value: string; label: string; index: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "swipeAction",
+                "name": "swipeAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ value: string; side: LeftRight; action?: string; }",
+                    "resolved": "{ value: string; side: LeftRight; action?: string; }",
+                    "references": {
+                        "LeftRight": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::LeftRight",
+                            "referenceLocation": "LeftRight"
+                        }
+                    }
+                }
+            }, {
+                "method": "longPress",
+                "name": "longPress",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ value: string; }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "starToggle",
+                "name": "starToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ value: string; starred: boolean; }",
+                    "resolved": "{ value: string; starred: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "detailToggle",
+                "name": "detailToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ value: string; expanded: boolean; }",
+                    "resolved": "{ value: string; expanded: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "focusItem": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}