atomicuilibrary 0.0.1

package/dist/collection/components/accordion/accordion.js

@@ -0,0 +1,2955 @@
+import { h, Host } from "@stencil/core";
+import { sanitizeHTML } from "../../utils/security";
+export class Accordion {
+    element;
+    /**
+     * Array of accordion items
+     */
+    items = [];
+    /**
+     * Allow multiple items to be open at once
+     */
+    multiple = false;
+    /**
+     * Controlled open items (overrides internal state if provided)
+     */
+    expandedItems = null;
+    /**
+     * IDs of items that should be open by default
+     */
+    defaultOpen = [];
+    /**
+     * Animation duration in milliseconds
+     */
+    animationDuration = 300;
+    /**
+     * Animation timing function
+     */
+    animationTiming = 'ease';
+    /**
+     * Creative/Motion Variants
+     */
+    physics = 'standard';
+    /**
+     * Background color of the accordion
+     */
+    backgroundColor = 'white';
+    /**
+     * Enable haptic feedback on interaction
+     */
+    haptic = true;
+    /**
+     * Enable global animations
+     */
+    enableAnimation = true;
+    /**
+     * Show numbered indicators above the accordion
+     */
+    showNumbers = false;
+    /**
+     * Custom arrow icon for collapsed state
+     */
+    arrowIconCollapsed = 'chevron-right';
+    /**
+     * Custom arrow icon for expanded state
+     */
+    arrowIconExpanded = 'chevron-down';
+    /**
+     * Hide arrow icon completely
+     */
+    hideArrow = false;
+    /**
+     * Custom color for selected header (default: #10b981)
+     */
+    selectedHeaderColor = '#10b981';
+    /**
+     * Position of the selection indicator: 'left' | 'top' | 'none'
+     */
+    selectionPosition = 'left';
+    /**
+    * Accordion variant: 'default' | 'bordered' | 'splitted' | 'light' | 'shadow' | 'card' | 'card-list' | 'headline'
+    * Use 'card' or 'card-list' for a separated card layout with icon pills and a right-chevron.
+    * Use 'headline' for a minimalist, high-impact typography-first layout.
+    */
+    variant = 'default';
+    /**
+     * Size of the accordion: 'sm' | 'md' | 'lg'
+     */
+    size = 'md';
+    /**
+     * Position of the expand icon: 'start' | 'end'
+     */
+    iconPosition = 'end';
+    /**
+     * Enable state persistence - if provided, the string will be used as a localStorage key
+     */
+    persistState = '';
+    /**
+     * Only render accordion content when it is first opened (Performance)
+     */
+    lazyRender = false;
+    /**
+     * Visual theme: 'default' | 'glass' | 'radiant'
+     */
+    theme = 'default';
+    /**
+     * Grid columns count for accordion items (Large screens only)
+     */
+    columns = 1;
+    /**
+     * Enable 3D Parallax depth effect on hover (Premium themes only)
+     */
+    enableParallax = false;
+    /**
+     * Enable auditory haptics (premium click/collapse sounds)
+     */
+    enableHaptics = false;
+    /**
+     * Pin headers to the top during long content scrolls
+     */
+    stickyHeaders = false;
+    /**
+     * Enable floating Quick Actions toolbar on hover
+     */
+    enableQuickActions = false;
+    /**
+     * Enable a visual search "Mini-map" (Heatmap) on the right side
+     */
+    enableSearchHeatmap = false;
+    /**
+     * Automatically collapse sections after X milliseconds of inactivity (0 to disable)
+     */
+    focusTimeout = 0;
+    /**
+     * Automatically rank items based on their usage heat (requires persistState)
+     */
+    enableRanking = false;
+    /**
+     * Enable Pattern-Lock security for sensitive items
+     */
+    enableLocking = false;
+    /**
+     * Enable high-precision header sparklines for analytical data
+     */
+    enableSparklines = false;
+    /**
+     * Enable tactile swipe gestures for item actions (Mobile Context)
+     */
+    enableGestures = false;
+    /**
+     * Optional name for a synchronization group. All accordions with the same group
+     * name will synchronize their toggle states globally.
+     */
+    syncGroup = '';
+    /**
+     * Show a navigation trail (breadcrumbs) for nested items in their headers
+     */
+    showBreadcrumbs = false;
+    /**
+     * Automatically expand all items and hide interactive controls when printing
+     */
+    printExpandAll = false;
+    /**
+     * Enable real-time collaborator presence indicators in headers
+     */
+    enableCollaborators = false;
+    /**
+     * Enable AI-generated content briefing tooltips on hover
+     */
+    enableAISummaries = false;
+    /**
+     * Enable full-screen 'Reading Portal' mode for deep-focus content analysis
+     */
+    enablePortalReader = false;
+    /**
+     * Enable Workflow 'Snapshots' (save/load open states)
+     */
+    enableSnapshots = false;
+    /**
+     * Enable real-time, auto-scrolling telemetry terminals inside items
+     */
+    enableStreaming = false;
+    /**
+     * Enable Voice-Activated industrial navigation (Hands-Free)
+     */
+    enableVoiceControl = false;
+    /**
+     * Enable Advanced 3D 'Holographic' depth stacking on expansion
+     */
+    enableHolographic = false;
+    /**
+     * Enable Smart-Link 'Teleportation' between accordion sections
+     */
+    enableTeleportation = false;
+    isListening = false;
+    voiceCommand = '';
+    activePortalId = '';
+    availableSnapshots = [];
+    unlockedItems = new Set();
+    patternInput = '';
+    activeLockId = '';
+    itemHeat = new Map();
+    _collaborators = new Map();
+    collabChannel = null;
+    /**
+     * Default library to use for icons (e.g., 'se', 'fontawesome', 'lucide', 'emoji', etc.)
+     */
+    iconLibrary = 'lucide';
+    handleRemoteSync(ev) {
+        if (!this.syncGroup || ev.detail.group !== this.syncGroup || ev.detail.sourceId === this.element.id)
+            return;
+        // We treat remote sync as a direct state override:
+        const { itemId, isOpen, multiple } = ev.detail;
+        if (multiple) {
+            if (isOpen && !this.openItems.includes(itemId)) {
+                this.openItems = [...this.openItems, itemId];
+            }
+            else if (!isOpen) {
+                this.openItems = this.openItems.filter(id => id !== itemId);
+            }
+        }
+        else {
+            this.openItems = isOpen ? [itemId] : [];
+        }
+    }
+    /**
+     * Disable the entire accordion
+     */
+    disabled = false;
+    /**
+     * Enable search/filter functionality
+     */
+    enableSearch = false;
+    /**
+     * Search input placeholder
+     */
+    searchPlaceholder = 'Search...';
+    /**
+     * Show expand/collapse all buttons
+     */
+    enableExpandCollapseAll = false;
+    /**
+     * Save state to localStorage
+     */
+    enablePersistence = false;
+    /**
+     * localStorage key for persistence
+     */
+    persistenceKey = 'ui-accordion-state';
+    /**
+     * Enable drag & drop reordering
+     */
+    enableDragDrop = false;
+    /**
+     * Enable nested accordion support
+     */
+    enableNested = false;
+    /**
+     * Right-to-left mode
+     */
+    rtl = false;
+    /**
+     * Compact/dense mode
+     */
+    dense = false;
+    /**
+     * Header heading level (1-6) for accessibility
+     */
+    /**
+     * Header heading level (1-6) for accessibility
+     */
+    headerLevel = 3;
+    /**
+     * Show global skeleton loading state
+     */
+    loading = false;
+    /**
+     * Automatically scroll the item into view when it is opened if it's partially off-screen
+     */
+    autoScroll = false;
+    /**
+     * Scrolling behavior when autoScroll is enabled
+     */
+    scrollBehavior = 'smooth';
+    openItems = [];
+    onExpandedItemsChange(newValue) {
+        if (newValue !== null) {
+            this.openItems = [...newValue];
+        }
+    }
+    parsedItems = [];
+    parsedDefaultOpen = [];
+    searchQuery = '';
+    filteredItems = [];
+    draggedItemId = null;
+    dragOverItemId = null;
+    animatingItems = new Set();
+    /** IDs of items currently shaking (Veto state) */
+    isShaking = new Set();
+    accordionChange;
+    beforeOpen;
+    afterOpen;
+    beforeClose;
+    afterClose;
+    accordionSearch;
+    accordionReorder;
+    accordionAction;
+    contentElements = new Map();
+    itemRefs = new Map();
+    focusTimers = new Map();
+    onItemsChange(newValue) {
+        if (typeof newValue === 'string') {
+            try {
+                this.parsedItems = JSON.parse(newValue);
+            }
+            catch (error) {
+                console.error('Invalid JSON for accordion items:', error);
+                this.parsedItems = [];
+            }
+        }
+        else {
+            this.parsedItems = newValue || [];
+        }
+        this.contentElements.clear();
+    }
+    onDefaultOpenChange(newValue) {
+        this.parsedDefaultOpen = newValue || [];
+        this.openItems = [...this.parsedDefaultOpen];
+    }
+    onMultipleChange(newValue, oldValue) {
+        // When switching from multi to single mode, keep only the first open item
+        if (oldValue && !newValue && this.openItems.length > 1) {
+            this.openItems = [this.openItems[0]];
+        }
+    }
+    onAnimationDurationChange() {
+        // Trigger re-render
+        this.openItems = [...this.openItems];
+    }
+    onShowNumbersChange() {
+        // Trigger re-render
+        this.openItems = [...this.openItems];
+    }
+    componentWillLoad() {
+        // Initialize parsed items
+        this.onItemsChange(this.items);
+        this.onDefaultOpenChange(this.defaultOpen);
+        // Load from localStorage if persistence is enabled, otherwise use default
+        if (this.enablePersistence) {
+            const saved = this.loadFromStorage();
+            this.openItems = saved || [...this.parsedDefaultOpen];
+        }
+        else {
+            this.openItems = [...this.parsedDefaultOpen];
+        }
+        // Initialize filtered items
+        this.filteredItems = this.parsedItems;
+        if (this.enableCollaborators) {
+            this.initCollaboration();
+        }
+        if (this.enableAISummaries) {
+            this.simulateAISummaries();
+        }
+    }
+    initCollaboration() {
+        if (!('BroadcastChannel' in window))
+            return;
+        this.collabChannel = new BroadcastChannel(`ui-accordion-collab-${this.persistenceKey || 'default'}`);
+        this.collabChannel.onmessage = (ev) => {
+            const { type, itemId, user } = ev.data;
+            if (type === 'presence') {
+                const current = this._collaborators.get(itemId) || [];
+                if (!current.find(u => u.id === user.id)) {
+                    this._collaborators.set(itemId, [...current, user]);
+                    this._collaborators = new Map(this._collaborators);
+                }
+            }
+        };
+    }
+    simulateAISummaries() {
+        // In a real app, this would be an API call. 
+        // Here we simulate "thinking" and then populating the summaryList if missing.
+        this.parsedItems.forEach(item => {
+            if (!item.summaryList && item.content) {
+                // Logic to extract main points or simulate them
+                const contentText = item.content.replace(/<[^>]*>/g, '').slice(0, 200);
+                item.summaryList = [
+                    `Key Insight: ${contentText.split('.')[0] || 'Analyzing content...'}`,
+                    `Status: Verified by AI Engine`,
+                    `Confidence: 98.4%`
+                ];
+            }
+        });
+    }
+    componentDidUpdate() {
+        // Set content for all items after render
+        this.getAllItems(this.parsedItems).forEach(item => {
+            const contentElement = this.contentElements.get(item.id);
+            if (contentElement && item.content) {
+                contentElement.innerHTML = sanitizeHTML(item.content);
+            }
+        });
+        // Save to localStorage if persistence is enabled
+        if (this.enablePersistence) {
+            this.saveToStorage();
+        }
+    }
+    handleKeyDown(event) {
+        if (!this.element.contains(event.target))
+            return;
+        const target = event.target;
+        const item = target.closest('.accordion-item');
+        if (!item)
+            return;
+        const itemId = item.getAttribute('data-id');
+        if (!itemId)
+            return;
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.toggleItem(itemId);
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                this.focusNextItem(itemId);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.focusPreviousItem(itemId);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.focusFirstItem();
+                break;
+            case 'End':
+                event.preventDefault();
+                this.focusLastItem();
+                break;
+        }
+    }
+    toggleItem(itemId, event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        if (this.disabled)
+            return;
+        const allItems = this.getAllItems(this.parsedItems);
+        const item = allItems.find(i => i.id === itemId);
+        if (item?.disabled)
+            return;
+        // Check if item is currently animating
+        if (this.animatingItems.has(itemId)) {
+            return; // Prevent toggling during animation
+        }
+        const newOpenItems = [...this.openItems];
+        const isCurrentlyOpen = newOpenItems.includes(itemId);
+        const willBeOpen = !isCurrentlyOpen;
+        // Emit before event
+        const beforeEvent = {
+            itemId,
+            isOpen: willBeOpen,
+            timestamp: Date.now()
+        };
+        if (willBeOpen) {
+            if (item?.lockCode && !this.unlockedItems.has(itemId) && this.enableLocking) {
+                this.activeLockId = itemId;
+                this.patternInput = '';
+                return; // Prevent opening locked item
+            }
+            this.updateHeat(itemId);
+            this.resetFocusTimer(itemId);
+            const ev = this.beforeOpen.emit(beforeEvent);
+            if (ev.defaultPrevented)
+                return;
+        }
+        else {
+            this.clearFocusTimer(itemId);
+            const ev = this.beforeClose.emit(beforeEvent);
+            if (ev.defaultPrevented)
+                return;
+        }
+        // Mark as animating
+        this.animatingItems.add(itemId);
+        this.animatingItems = new Set(this.animatingItems);
+        // Update open items
+        if (this.multiple) {
+            if (isCurrentlyOpen) {
+                if (!this.expandedItems)
+                    this.openItems = newOpenItems.filter(id => id !== itemId);
+            }
+            else {
+                if (!this.expandedItems)
+                    this.openItems = [...newOpenItems, itemId];
+            }
+        }
+        else {
+            const path = this.getPathToItem(this.parsedItems, itemId) || [];
+            if (isCurrentlyOpen) {
+                if (!this.expandedItems)
+                    this.openItems = path.filter(id => id !== itemId);
+            }
+            else {
+                if (!this.expandedItems)
+                    this.openItems = path;
+            }
+        }
+        this.accordionChange.emit({
+            itemId,
+            isOpen: willBeOpen,
+            openItems: this.expandedItems ? (isCurrentlyOpen ? newOpenItems.filter(id => id !== itemId) : [...newOpenItems, itemId]) : [...this.openItems]
+        });
+        // Broadcast state for sync groups
+        if (this.syncGroup) {
+            window.dispatchEvent(new CustomEvent('accordionRemoteState', {
+                detail: {
+                    group: this.syncGroup,
+                    itemId,
+                    isOpen: willBeOpen,
+                    multiple: this.multiple,
+                    sourceId: this.element.id
+                }
+            }));
+        }
+        // High-resolution Audio Haptic
+        this.playHaptic(willBeOpen ? 'open' : 'close');
+        // Traditional Vibration Haptic
+        if (this.haptic && navigator.vibrate) {
+            navigator.vibrate(willBeOpen ? 10 : 8);
+        }
+        // Emit after event after animation completes
+        setTimeout(() => {
+            this.animatingItems.delete(itemId);
+            this.animatingItems = new Set(this.animatingItems);
+            const isOpen = this.openItems.includes(itemId);
+            const afterEvent = {
+                itemId,
+                isOpen,
+                timestamp: Date.now()
+            };
+            if (isOpen) {
+                this.afterOpen.emit(afterEvent);
+                if (this.autoScroll) {
+                    this.scrollToItem(itemId, this.scrollBehavior);
+                }
+            }
+            else {
+                this.afterClose.emit(afterEvent);
+            }
+        }, this.animationDuration);
+    }
+    /**
+     * Triggers a kinetic shake animation on a specific item (Veto feedback)
+     */
+    async shake(itemId) {
+        if (this.isShaking.has(itemId))
+            return;
+        this.isShaking.add(itemId);
+        this.isShaking = new Set(this.isShaking);
+        if (this.haptic && navigator.vibrate) {
+            navigator.vibrate([30, 50, 30]); // Triple pulse for error/veto
+        }
+        setTimeout(() => {
+            this.isShaking.delete(itemId);
+            this.isShaking = new Set(this.isShaking);
+        }, 600);
+    }
+    /**
+     * Triggers a success radiant pulse on a specific item
+     */
+    async success(itemId) {
+        const itemElement = this.element.shadowRoot?.querySelector(`[data-id="${itemId}"]`);
+        if (itemElement) {
+            itemElement.classList.add('accordion-item-success');
+            if (this.haptic && navigator.vibrate) {
+                navigator.vibrate([10, 30, 20]); // Double micro-click for success
+            }
+            setTimeout(() => {
+                itemElement.classList.remove('accordion-item-success');
+            }, 1000);
+        }
+    }
+    focusNextItem(currentId) {
+        const visibleItems = this.getVisibleItems(this.parsedItems);
+        const currentIndex = visibleItems.findIndex(item => item.id === currentId);
+        if (currentIndex === -1)
+            return;
+        const nextIndex = (currentIndex + 1) % visibleItems.length;
+        this.focusItem(visibleItems[nextIndex].id);
+    }
+    focusPreviousItem(currentId) {
+        const visibleItems = this.getVisibleItems(this.parsedItems);
+        const currentIndex = visibleItems.findIndex(item => item.id === currentId);
+        if (currentIndex === -1)
+            return;
+        const prevIndex = currentIndex === 0 ? visibleItems.length - 1 : currentIndex - 1;
+        this.focusItem(visibleItems[prevIndex].id);
+    }
+    focusFirstItem() {
+        const visibleItems = this.getVisibleItems(this.parsedItems);
+        if (visibleItems.length > 0) {
+            this.focusItem(visibleItems[0].id);
+        }
+    }
+    focusLastItem() {
+        const visibleItems = this.getVisibleItems(this.parsedItems);
+        if (visibleItems.length > 0) {
+            this.focusItem(visibleItems[visibleItems.length - 1].id);
+        }
+    }
+    focusItem(itemId) {
+        const itemElement = this.element.querySelector(`[data-id="${itemId}"] .accordion-header`);
+        if (itemElement) {
+            itemElement.focus();
+        }
+    }
+    async openItem(itemId) {
+        const allItems = this.getAllItems(this.parsedItems);
+        const item = allItems.find(i => i.id === itemId);
+        if (item?.disabled)
+            return;
+        let newOpenItems = [...this.openItems];
+        if (!this.multiple) {
+            newOpenItems = [];
+        }
+        if (!newOpenItems.includes(itemId)) {
+            newOpenItems.push(itemId);
+        }
+        this.openItems = newOpenItems;
+    }
+    async closeItem(itemId) {
+        this.openItems = this.openItems.filter(id => id !== itemId);
+    }
+    async toggleItemById(itemId) {
+        this.toggleItem(itemId);
+    }
+    async openAll() {
+        if (this.multiple) {
+            this.openItems = this.getAllItems(this.parsedItems).map(item => item.id);
+        }
+    }
+    async closeAll() {
+        this.openItems = [];
+    }
+    async scrollToItem(itemId, behavior = 'smooth') {
+        const el = this.itemRefs.get(itemId);
+        if (el)
+            el.scrollIntoView({ behavior, block: 'center' });
+    }
+    async searchItems(query) {
+        this.searchQuery = query;
+        this.performSearch();
+    }
+    async clearSearch() {
+        this.searchQuery = '';
+        this.filteredItems = this.parsedItems;
+    }
+    async getOpenItems() {
+        return [...this.openItems];
+    }
+    async setOpenItems(itemIds) {
+        this.openItems = [...itemIds];
+    }
+    async saveSnapshot(name) {
+        if (!this.enableSnapshots)
+            return;
+        const key = `${this.persistenceKey}-snapshot-${name}`;
+        localStorage.setItem(key, JSON.stringify(this.openItems));
+        this.availableSnapshots = [...new Set([...this.availableSnapshots, name])];
+        this.saveToStorage(); // Update snapshots list in persistence too
+    }
+    async teleportTo(itemId) {
+        if (!this.enableTeleportation)
+            return;
+        this.openItem(itemId);
+        this.scrollToItem(itemId);
+    }
+    async initVoice() {
+        if (!this.enableVoiceControl || !('webkitSpeechRecognition' in window))
+            return;
+        const recognition = new window.webkitSpeechRecognition();
+        recognition.continuous = false;
+        recognition.interimResults = false;
+        recognition.lang = 'en-US';
+        recognition.onstart = () => { this.isListening = true; };
+        recognition.onend = () => { this.isListening = false; };
+        recognition.onresult = (event) => {
+            const command = event.results[0][0].transcript.toLowerCase();
+            this.voiceCommand = command;
+            // Industrial Logic: Match command to item titles or keywords
+            const match = this.getAllItems(this.parsedItems).find(i => command.includes(i.title.toLowerCase()) ||
+                command.includes(i.id.toLowerCase()));
+            if (match)
+                this.toggleItem(match.id);
+            if (command.includes('reset') || command.includes('close all'))
+                this.closeAll();
+            if (command.includes('search for')) {
+                const q = command.split('search for')[1].trim();
+                this.searchItems(q);
+            }
+        };
+        recognition.start();
+    }
+    // Private helper methods
+    saveToStorage() {
+        try {
+            localStorage.setItem(this.persistenceKey, JSON.stringify(this.openItems));
+        }
+        catch (error) {
+            console.error('Failed to save accordion state:', error);
+        }
+    }
+    playHaptic(type) {
+        if (!this.enableHaptics)
+            return;
+        try {
+            const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+            const oscillator = audioCtx.createOscillator();
+            const gainNode = audioCtx.createGain();
+            oscillator.connect(gainNode);
+            gainNode.connect(audioCtx.destination);
+            const now = audioCtx.currentTime;
+            if (type === 'open') {
+                // High-pitched industrial click
+                oscillator.type = 'sine';
+                oscillator.frequency.setValueAtTime(880, now);
+                oscillator.frequency.exponentialRampToValueAtTime(100, now + 0.1);
+                gainNode.gain.setValueAtTime(0.3, now);
+                gainNode.gain.exponentialRampToValueAtTime(0.01, now + 0.1);
+            }
+            else {
+                // Soft, dampened collapse
+                oscillator.type = 'triangle';
+                oscillator.frequency.setValueAtTime(220, now);
+                oscillator.frequency.exponentialRampToValueAtTime(40, now + 0.15);
+                gainNode.gain.setValueAtTime(0.2, now);
+                gainNode.gain.exponentialRampToValueAtTime(0.01, now + 0.15);
+            }
+            oscillator.start(now);
+            oscillator.stop(now + 0.2);
+            // Close context to free resources
+            setTimeout(() => audioCtx.close(), 250);
+        }
+        catch (e) {
+            console.warn('Audio haptics unavailable:', e);
+        }
+    }
+    loadFromStorage() {
+        try {
+            const saved = localStorage.getItem(this.persistenceKey);
+            return saved ? JSON.parse(saved) : null;
+        }
+        catch (error) {
+            console.error('Failed to load accordion state:', error);
+            return null;
+        }
+    }
+    performSearch() {
+        if (!this.searchQuery.trim()) {
+            this.filteredItems = this.parsedItems;
+            this.accordionSearch.emit({
+                query: '',
+                matchedItems: [],
+                totalItems: this.parsedItems.length
+            });
+            return;
+        }
+        const query = this.searchQuery.toLowerCase();
+        const allItems = this.getAllItems(this.parsedItems);
+        const matchedIds = allItems
+            .filter(item => {
+            if (item.searchable === false)
+                return false;
+            const searchableText = `${item.title} ${item.subtitle || ''} ${item.content || ''}`.toLowerCase();
+            return searchableText.includes(query);
+        })
+            .map(item => item.id);
+        // Filter top-level items that match or have matching children
+        this.filteredItems = this.parsedItems.filter(item => this.itemOrChildrenMatch(item, matchedIds));
+        this.accordionSearch.emit({
+            query: this.searchQuery,
+            matchedItems: matchedIds,
+            totalItems: allItems.length
+        });
+    }
+    itemOrChildrenMatch(item, matchedIds) {
+        if (matchedIds.includes(item.id))
+            return true;
+        if (item.children) {
+            return item.children.some(child => this.itemOrChildrenMatch(child, matchedIds));
+        }
+        return false;
+    }
+    getAllItems(items) {
+        const result = [];
+        items.forEach(item => {
+            result.push(item);
+            if (item.children && this.enableNested) {
+                result.push(...this.getAllItems(item.children));
+            }
+        });
+        return result;
+    }
+    getVisibleItems(items) {
+        const result = [];
+        items.forEach(item => {
+            result.push(item);
+            const isOpen = this.openItems.includes(item.id);
+            if (item.children && this.enableNested && isOpen) {
+                result.push(...this.getVisibleItems(item.children));
+            }
+        });
+        return result;
+    }
+    getPathToItem(items, targetId) {
+        for (const item of items) {
+            if (item.id === targetId) {
+                return [item.id];
+            }
+            if (item.children) {
+                const path = this.getPathToItem(item.children, targetId);
+                if (path) {
+                    return [item.id, ...path];
+                }
+            }
+        }
+        return null;
+    }
+    handleDragStart(itemId, event) {
+        if (!this.enableDragDrop)
+            return;
+        this.draggedItemId = itemId;
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = 'move';
+            event.dataTransfer.setData('text/plain', itemId);
+        }
+    }
+    handleDragOver(itemId, event) {
+        if (!this.enableDragDrop || !this.draggedItemId)
+            return;
+        event.preventDefault();
+        this.dragOverItemId = itemId;
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'move';
+        }
+    }
+    handleDragEnd() {
+        this.draggedItemId = null;
+        this.dragOverItemId = null;
+    }
+    handleDrop(targetItemId, event) {
+        if (!this.enableDragDrop || !this.draggedItemId)
+            return;
+        event.preventDefault();
+        const draggedIndex = this.parsedItems.findIndex(item => item.id === this.draggedItemId);
+        const targetIndex = this.parsedItems.findIndex(item => item.id === targetItemId);
+        if (draggedIndex !== -1 && targetIndex !== -1 && draggedIndex !== targetIndex) {
+            const newItems = [...this.parsedItems];
+            const [draggedItem] = newItems.splice(draggedIndex, 1);
+            newItems.splice(targetIndex, 0, draggedItem);
+            this.parsedItems = newItems;
+            this.items = [...newItems];
+            this.accordionReorder.emit({
+                itemId: this.draggedItemId,
+                oldIndex: draggedIndex,
+                newIndex: targetIndex,
+                items: newItems
+            });
+        }
+        this.handleDragEnd();
+    }
+    handleActionClick(itemId, actionId, action, event) {
+        event.stopPropagation();
+        if (action.onClick) {
+            action.onClick(itemId, actionId);
+        }
+        this.accordionAction.emit({
+            itemId,
+            actionId,
+            action
+        });
+    }
+    resetFocusTimer(id) {
+        if (!this.focusTimeout || this.focusTimeout <= 0)
+            return;
+        this.clearFocusTimer(id);
+        this.focusTimers.set(id, setTimeout(() => {
+            if (this.openItems.includes(id)) {
+                this.toggleItem(id);
+            }
+        }, this.focusTimeout));
+    }
+    clearFocusTimer(id) {
+        const timer = this.focusTimers.get(id);
+        if (timer) {
+            clearTimeout(timer);
+            this.focusTimers.delete(id);
+        }
+    }
+    renderPresence(item) {
+        if (!this.enableCollaborators)
+            return null;
+        const collaborators = [...(item.collaborators || []), ...(this._collaborators.get(item.id) || [])];
+        if (collaborators.length === 0)
+            return null;
+        return (h("div", { class: "accordion-collaborators" }, collaborators.map(user => (h("div", { class: "presence-avatar", title: user.name, style: { backgroundColor: user.color || '#3bf673' } }, user.avatar ? h("img", { src: user.avatar, alt: "" }) : (user.name ? user.name.charAt(0) : '?'))))));
+    }
+    renderAIBriefing(item) {
+        if (!this.enableAISummaries || !item.summaryList)
+            return null;
+        return (h("div", { class: "accordion-ai-briefing" }, h("ul", { class: "briefing-list" }, item.summaryList.map(point => h("li", null, point)))));
+    }
+    renderPortalOverlay() {
+        if (!this.activePortalId)
+            return null;
+        const item = this.getAllItems(this.parsedItems).find(i => i.id === this.activePortalId);
+        if (!item)
+            return null;
+        const containerStyles = {
+            '--accordion-bg': this.backgroundColor || 'white',
+            backgroundColor: 'var(--accordion-bg, #ffffff)'
+        };
+        return (h("div", { class: "accordion-portal-overlay", style: containerStyles }, h("div", { class: "portal-header" }, h("div", { class: "portal-title" }, item.title), h("div", { class: "portal-header-actions" }, h("ui-button-toggle", { class: "portal-close-toggle", value: "close-portal", label: "Exit reader", icon: "x", library: this.iconLibrary, variant: "outline", shape: "pill", size: "sm", ariaLabel: "Close portal reader", onButtonToggleChange: () => this.activePortalId = '' }))), h("div", { class: "portal-content" }, h("div", { class: "portal-meta" }, item.subtitle, " | Full Focus Mode"), h("div", { class: "portal-body", innerHTML: sanitizeHTML(item.content ?? '') }))));
+    }
+    renderStreamingTerminal(item) {
+        if (!this.enableStreaming || !item.streamData)
+            return null;
+        return (h("div", { class: "accordion-streaming-terminal" }, h("div", { class: "terminal-header" }, "LIVE TELEMETRY STREAM"), h("div", { class: "terminal-body", ref: el => {
+                if (el)
+                    el.scrollTop = el.scrollHeight;
+            } }, item.streamData.map(log => (h("div", { class: "terminal-line" }, h("span", { class: "line-timestamp" }, "[", new Date().toLocaleTimeString(), "]"), h("span", { class: "line-msg" }, log)))))));
+    }
+    renderTeleportLink(item) {
+        if (!item.teleportTo)
+            return null;
+        return (h("ui-button", { variant: "ghost", size: "xs", class: "accordion-teleport-link", icon: "link-2", iconLibrary: "lucide", iconSize: "12px", label: `Goto: ${item.teleportTo}`, onClick: (e) => {
+                e.stopPropagation();
+                if (item.teleportTo)
+                    this.teleportTo(item.teleportTo);
+            } }));
+    }
+    renderQuickActions(item) {
+        if (!this.enableQuickActions)
+            return null;
+        const actions = item.actions || [];
+        return (h("div", { class: "accordion-quick-actions" }, this.enableVoiceControl && (h("ui-button", { variant: "ghost", iconOnly: true, size: "xs", class: `quick-action-btn voice-btn ${this.isListening ? 'active' : ''}`, icon: "mic", iconLibrary: "lucide", iconSize: "14px", ariaLabel: "Start Voice Command", onClick: (e) => { e.stopPropagation(); this.initVoice(); } })), this.enablePortalReader && (h("ui-button", { variant: "ghost", iconOnly: true, size: "xs", class: "quick-action-btn portal-btn", icon: "maximize", iconLibrary: "lucide", iconSize: "14px", ariaLabel: "Open Focus Portal", onClick: (e) => {
+                e.stopPropagation();
+                this.activePortalId = item.id;
+            } })), actions.map(action => (h("ui-button", { variant: action.variant || 'ghost', iconOnly: !action.label || !!action.icon, size: "xs", class: "quick-action-btn", icon: action.icon, iconLibrary: action.iconLibrary || this.iconLibrary, iconSize: "14px", label: action.icon ? undefined : action.label, ariaLabel: action.ariaLabel || action.label, disabled: action.disabled, onClick: (e) => {
+                this.handleActionClick(item.id, action.id, action, e);
+            } })))));
+    }
+    renderSearchHeatmap() {
+        if (!this.enableSearchHeatmap || !this.searchQuery)
+            return null;
+        const allItems = this.getAllItems(this.parsedItems);
+        const matchedIndices = allItems
+            .map((item, index) => ({ id: item.id, index }))
+            .filter(item => {
+            const query = this.searchQuery.toLowerCase();
+            return `${item.id}` && (allItems[item.index].title.toLowerCase().includes(query) ||
+                (allItems[item.index].subtitle || '').toLowerCase().includes(query));
+        });
+        const total = allItems.length;
+        return (h("div", { class: "accordion-search-heatmap" }, matchedIndices.map(match => (h("div", { class: "heatmap-marker", style: {
+                top: `${(match.index / total) * 100}%`
+            }, onClick: () => this._scrollToItem(match.id) })))));
+    }
+    _scrollToItem(id) {
+        this.scrollToItem(id);
+    }
+    updateHeat(id) {
+        if (!this.enableRanking)
+            return;
+        const current = this.itemHeat.get(id) || 0;
+        this.itemHeat.set(id, current + 1);
+        this.itemHeat = new Map(this.itemHeat);
+        this.saveToStorage(); // Corrected method name
+    }
+    renderSparkline(data) {
+        if (!this.enableSparklines || !data || data.length < 2)
+            return null;
+        // Defensive: if data is undefined, use empty array
+        const safeData = data ?? [];
+        if (safeData.length < 2)
+            return null;
+        const max = Math.max(...safeData);
+        const min = Math.min(...safeData);
+        const range = max - min || 1;
+        const width = 60;
+        const height = 20;
+        const points = safeData.map((val, i) => {
+            const x = (i / (safeData.length - 1)) * width;
+            const y = height - ((val - min) / range) * height;
+            return `${x},${y}`;
+        }).join(' ');
+        return (h("div", { class: "accordion-header-sparkline" }, h("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}` }, h("polyline", { fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round", points: points }))));
+    }
+    handlePatternDot(dot) {
+        this.patternInput += dot;
+        const item = this.getAllItems(this.parsedItems).find(i => i.id === this.activeLockId);
+        if (item && item.lockCode === this.patternInput) {
+            this.unlockedItems.add(this.activeLockId);
+            this.unlockedItems = new Set(this.unlockedItems);
+            const idToOpen = this.activeLockId;
+            this.activeLockId = '';
+            this.toggleItem(idToOpen);
+        }
+        else if (this.patternInput.length >= (item?.lockCode?.length || 9)) {
+            // Failed pattern - Reset
+            this.shake(this.activeLockId);
+            this.patternInput = '';
+        }
+    }
+    renderLockOverlay() {
+        if (!this.activeLockId)
+            return null;
+        const dots = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
+        return (h("div", { class: "accordion-lock-overlay" }, h("div", { class: "lock-grid" }, dots.map(dot => (h("div", { class: { 'lock-dot': true, 'active': this.patternInput.includes(dot) }, onMouseEnter: () => this.handlePatternDot(dot), onTouchStart: () => this.handlePatternDot(dot) })))), h("div", { class: "lock-hint" }, "Draw Security Pattern"), h("ui-button", { variant: "ghost", size: "sm", class: "lock-cancel", label: "Cancel", onClick: () => this.activeLockId = '' })));
+    }
+    handleParallax(e, id) {
+        if (!this.enableParallax)
+            return;
+        const item = this.itemRefs.get(id);
+        if (!item)
+            return;
+        const rect = item.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+        const moveX = (x - centerX) / (rect.width / 4);
+        const moveY = (y - centerY) / (rect.height / 4);
+        item.style.setProperty('--parallax-x', `${moveX * 10}px`);
+        item.style.setProperty('--parallax-y', `${moveY * 10}px`);
+        item.style.setProperty('--rotate-y', `${moveX * 8}deg`);
+        item.style.setProperty('--rotate-x', `${-moveY * 8}deg`);
+    }
+    resetParallax(id) {
+        const item = this.itemRefs.get(id);
+        if (!item)
+            return;
+        item.style.setProperty('--parallax-x', '0px');
+        item.style.setProperty('--parallax-y', '0px');
+        item.style.setProperty('--rotate-y', '0deg');
+        item.style.setProperty('--rotate-x', '0deg');
+    }
+    highlightSearchText(text) {
+        if (!this.searchQuery.trim())
+            return text;
+        const query = this.searchQuery.trim();
+        const regex = new RegExp(`(${query})`, 'gi');
+        return text.replace(regex, '<mark class="search-highlight">$1</mark>');
+    }
+    renderItem(item, depth = 0, parentTitles = []) {
+        const isOpen = this.openItems.includes(item.id);
+        const isDisabled = this.disabled || item.disabled || false;
+        const isDragging = this.draggedItemId === item.id;
+        const isDragOver = this.dragOverItemId === item.id;
+        const itemClasses = [
+            'accordion-item',
+            isOpen && 'accordion-item-open',
+            isDisabled && 'accordion-item-disabled',
+            isDragging && 'accordion-item-dragging',
+            isDragOver && 'accordion-item-drag-over',
+            item.loading && 'accordion-item-loading',
+            depth > 0 && 'accordion-item-nested',
+            this.isShaking.has(item.id) && 'accordion-item-shaking'
+        ].filter(Boolean).join(' ');
+        const headerClasses = [
+            'accordion-header',
+            isDisabled && 'accordion-header-disabled',
+            this.stickyHeaders && 'accordion-header-sticky',
+            this.selectionPosition !== 'none' && `accordion-selection-${this.selectionPosition}`,
+            this.enableAnimation && `accordion-physics-${this.physics}`
+        ].filter(Boolean).join(' ');
+        const contentClasses = [
+            'accordion-content',
+            isOpen && 'accordion-content-open',
+            this.enableAnimation && `accordion-physics-${this.physics}`
+        ].filter(Boolean).join(' ');
+        // Calculate effective header level (max 6)
+        const currentHeaderLevel = Math.min(this.headerLevel + depth, 6);
+        const HeaderTag = `h${currentHeaderLevel}`; // Dynamic tag
+        return (h("div", { class: itemClasses, "data-id": item.id, draggable: this.enableDragDrop && !isDisabled, onDragStart: (e) => this.handleDragStart(item.id, e), onDragOver: (e) => this.handleDragOver(item.id, e), onDragEnd: () => this.handleDragEnd(), onDrop: (e) => this.handleDrop(item.id, e), onMouseMove: (e) => this.handleParallax(e, item.id), onMouseLeave: () => this.resetParallax(item.id), style: {
+                '--nest-depth': depth.toString(),
+                ...(this.enableHolographic && this.openItems.length > 0 && !isOpen ? {
+                    transform: `perspective(1000px) rotateX(-10deg) translateZ(-50px)`,
+                    opacity: '0.6'
+                } : {})
+            }, ref: (el) => {
+                if (el)
+                    this.itemRefs.set(item.id, el);
+            } }, item.headerSlot ? (h("div", { class: "accordion-header-custom", role: "heading", "aria-level": currentHeaderLevel }, h("slot", { name: item.headerSlot }))) : (h(HeaderTag, { style: { margin: 0, padding: 0 } }, h("ui-button", { variant: "accordion", class: headerClasses, onClick: (e) => this.toggleItem(item.id, e), disabled: isDisabled, fullWidth: true, "icon-position": "none", align: "start", justify: "between", noRipple: true, "aria-expanded": isOpen ? 'true' : 'false', "aria-controls": `accordion-content-${item.id}`, ariaLabel: `${isOpen ? 'Close' : 'Open'} ${item.title}`, tabindex: isDisabled ? -1 : 0 }, h("div", { class: "accordion-header-content" }, h("div", { class: "accordion-header-left" }, this.iconPosition === 'start' && !this.hideArrow && (() => {
+            const arrowName = isOpen ? this.arrowIconExpanded : this.arrowIconCollapsed;
+            const arrowLib = this.iconLibrary;
+            return (h("ui-icon", { name: arrowName, library: arrowLib, size: "1.2em", class: "accordion-arrow arrow-start" }));
+        })(), item.image && (h("img", { src: item.image, alt: "", class: "accordion-image" })), item.icon && (h("span", { class: "accordion-icon" }, h("ui-icon", { name: item.icon, library: item.iconLibrary || this.iconLibrary, size: "1.2em" }))), h("div", { class: "accordion-header-text" }, this.showBreadcrumbs && parentTitles.length > 0 && (h("div", { class: "accordion-breadcrumbs" }, parentTitles.map((p, i) => (h("span", { class: "breadcrumb-node" }, p, " ", i < parentTitles.length - 1 ? ' > ' : ''))))), h("div", { class: "accordion-title-group" }, h("div", { class: "accordion-title", innerHTML: sanitizeHTML(this.enableSearch ? this.highlightSearchText(item.title) : item.title) }), item.subtitle && (h("div", { class: "accordion-subtitle", innerHTML: sanitizeHTML(this.enableSearch ? this.highlightSearchText(item.subtitle) : item.subtitle) })), this.renderSparkline(item.sparkline ?? []), this.renderAIBriefing(item), this.renderTeleportLink(item)), item.peek && !isOpen && !this.searchQuery && (h("span", { class: "accordion-peek-snippet", innerHTML: sanitizeHTML(item.peek) })))), h("div", { class: "accordion-header-right" }, h("div", { class: "accordion-header-indicators" }, this.renderPresence(item), this.renderQuickActions(item), item.progress !== undefined && item.progress >= 0 && (h("div", { class: "accordion-progress-ring" }, h("svg", { viewBox: "0 0 36 36" }, h("circle", { cx: "18", cy: "18", r: "16", fill: "none", class: "ring-bg", "stroke-width": "3" }), h("circle", { cx: "18", cy: "18", r: "16", fill: "none", class: "ring-fg", "stroke-width": "3", style: { strokeDasharray: `${item.progress}, 100` } })), h("span", { class: "progress-text" }, item.progress, "%"))), item.status && item.status !== 'none' && (h("div", { class: `accordion-status-badge status-${item.status}` }, item.status === 'completed' && h("ui-icon", { name: "check", library: this.iconLibrary, size: "14px" }), item.status === 'error' && h("ui-icon", { name: "alert-circle", library: this.iconLibrary, size: "14px" }), item.status === 'warning' && h("ui-icon", { name: "alert-triangle", library: this.iconLibrary, size: "14px" }), item.status === 'current' && h("div", { class: "pulse-dot" })))), item.badge !== undefined && item.badge > 0 && (h("span", { class: "accordion-badge" }, item.badge)), item.actions && item.actions.length > 0 && (h("div", { class: "accordion-actions" }, item.actions.map(action => (h("ui-button", { key: action.id, variant: action.variant || 'ghost', size: "xs", iconOnly: !!action.icon, icon: action.icon, iconLibrary: action.iconLibrary || item.iconLibrary || this.iconLibrary, iconSize: "1.1em", label: action.icon ? undefined : action.label, ariaLabel: action.ariaLabel || action.label, disabled: action.disabled, onClick: (e) => this.handleActionClick(item.id, action.id, action, e) }))))), item.loading && (h("ui-loader", { size: "xs", color: "currentColor", class: "accordion-loading-spinner" })), this.iconPosition === 'end' && !this.hideArrow && (() => {
+            //  const isCardList = this.variant === 'card-list' || this.variant === 'card';
+            const arrowName = isOpen ? this.arrowIconExpanded : this.arrowIconCollapsed;
+            const arrowLib = this.iconLibrary;
+            return (h("ui-icon", { name: arrowName, library: arrowLib, size: "1.2em", class: "accordion-arrow" }));
+        })()))))), (() => {
+            // God-tier Lazy Logic:
+            // 1. If not lazy, always render.
+            // 2. If lazy, render if: is open, is animating, OR has already been rendered once.
+            const isAnimating = this.animatingItems.has(item.id);
+            const hasRenderedOnce = item.renderOnceOnly;
+            const showContent = !this.lazyRender || isOpen || isAnimating || hasRenderedOnce || this.printExpandAll;
+            if (showContent && this.lazyRender && isOpen) {
+                item.renderOnceOnly = true; // Flag for future closes
+            }
+            if (!showContent)
+                return null;
+            return (h("div", { class: contentClasses, id: `accordion-content-${item.id}`, "aria-labelledby": `accordion-header-${item.id}`, role: "region", style: {
+                    '--animation-duration': `${this.animationDuration}ms`,
+                    '--animation-timing': this.animationTiming
+                } }, h("div", { class: "accordion-content-inner", ref: (el) => {
+                    if (el && item.content) {
+                        this.contentElements.set(item.id, el);
+                    }
+                } }, this.renderStreamingTerminal(item), item.content || h("slot", { name: `content-${item.id}` })), this.enableNested && item.children && item.children.length > 0 && (h("div", { class: "accordion-nested-items" }, item.children.map(child => this.renderItem(child, depth + 1, [...parentTitles, item.title]))))));
+        })()));
+    }
+    renderSkeleton() {
+        return Array.from({ length: 3 }).map((_, index) => (h("div", { class: "accordion-item accordion-item-skeleton", key: `skeleton-${index}` }, h("div", { class: "accordion-header" }, h("div", { class: "accordion-header-content" }, h("div", { class: "skeleton-box", style: { width: '24px', height: '24px' } }), h("div", { class: "skeleton-box", style: { width: '60%', height: '20px' } }))))));
+    }
+    renderNumberedIndicators() {
+        return (h("div", { class: "accordion-indicators", role: "tablist", "aria-label": "Accordion navigation" }, this.parsedItems.map((item, index) => {
+            const isOpen = this.openItems.includes(item.id);
+            const isDisabled = this.disabled || item.disabled || false;
+            const indicatorClasses = [
+                'accordion-indicator',
+                isOpen && 'accordion-indicator-active',
+                isDisabled && 'accordion-indicator-disabled'
+            ].filter(Boolean).join(' ');
+            return (h("ui-button", { key: item.id, variant: isOpen ? 'primary' : 'outline', size: "xs", class: indicatorClasses, label: `${index + 1}`, onClick: () => this.toggleItem(item.id), disabled: isDisabled, ariaLabel: `Open ${item.title}`, "aria-expanded": isOpen ? 'true' : 'false', "aria-controls": `accordion-content-${item.id}` }));
+        })));
+    }
+    render() {
+        const containerClasses = [
+            'accordion-container',
+            `accordion-${this.size}`,
+            `accordion-${this.variant}`,
+            `accordion-theme-${this.theme}`,
+            this.columns > 1 ? `accordion-columns-${this.columns}` : '',
+            this.iconPosition === 'start' ? 'accordion-icon-start' : '',
+            this.rtl ? 'accordion-rtl' : '',
+            this.dense ? 'accordion-dense' : '',
+            this.printExpandAll ? 'accordion-print-expand-all' : ''
+        ].filter(Boolean).join(' ');
+        const getFinalItems = (items) => {
+            let result = [...items];
+            if (this.enableRanking) {
+                result.sort((a, b) => (this.itemHeat.get(b.id) || 0) - (this.itemHeat.get(a.id) || 0));
+            }
+            return this.enableSearch && this.searchQuery ? this.filteredItems : result;
+        };
+        const itemsToRender = getFinalItems(this.parsedItems);
+        const containerStyles = {
+            '--accordion-bg': this.backgroundColor || 'white',
+            backgroundColor: 'var(--accordion-bg, #ffffff)'
+        };
+        return (h(Host, { class: {
+                'accordion-host': true,
+                'is-open': this.openItems.length > 0,
+                'is-portal-active': !!this.activePortalId
+            } }, h("div", { class: containerClasses, role: "tablist", "aria-multiselectable": this.multiple, dir: this.rtl ? 'rtl' : 'ltr', style: {
+                ...containerStyles,
+                '--selected-header-color': this.selectedHeaderColor,
+                '--selected-header-bg': this.selectedHeaderColor + '1a', // Add 10% opacity, works if hex
+                ...(this.variant === 'headline' ? (() => {
+                    const lvl = this.headerLevel || 3;
+                    const titleSizes = ['48px', '36px', '28px', '22px', '18px', '15px'];
+                    const subtitleSizes = ['24px', '20px', '17px', '14px', '13px', '12px'];
+                    const paddings = ['48px 0', '40px 0', '32px 0', '24px 0', '18px 0', '14px 0'];
+                    const gaps = ['16px', '14px', '12px', '10px', '8px', '6px'];
+                    return {
+                        '--hl-title-size': titleSizes[lvl - 1],
+                        '--hl-subtitle-size': subtitleSizes[lvl - 1],
+                        '--hl-padding': paddings[lvl - 1],
+                        '--hl-gap': gaps[lvl - 1],
+                    };
+                })() : {})
+            } }, this.enableSearch && (h("div", { class: "accordion-search" }, h("ui-input", { type: "text", class: "accordion-search-input", placeholder: this.searchPlaceholder, value: this.searchQuery, onInputChange: (e) => {
+                this.searchQuery = e.detail;
+                this.performSearch();
+            }, ariaLabel: "Search accordion items", showClear: false }), this.searchQuery && (h("ui-button", { variant: "ghost", iconOnly: true, size: "xs", class: "accordion-search-clear", icon: "x", iconLibrary: this.iconLibrary, iconSize: "14px", ariaLabel: "Clear search", onClick: () => this.clearSearch() })), h("div", { class: "sr-only", "aria-live": "polite", role: "status" }, this.searchQuery ? `Showing ${this.filteredItems.length} results for ${this.searchQuery}` : ''))), this.enableExpandCollapseAll && this.multiple && (h("div", { class: "accordion-controls" }, h("ui-button", { variant: "ghost", size: "sm", class: "accordion-control-button", icon: "chevron-down", iconLibrary: this.iconLibrary, iconSize: "14px", iconPosition: "left", label: "Expand All", onClick: () => this.openAll(), disabled: this.disabled, ariaLabel: "Expand all items" }), h("ui-button", { variant: "ghost", size: "sm", class: "accordion-control-button", icon: "chevron-up", iconLibrary: this.iconLibrary, iconSize: "14px", iconPosition: "left", label: "Collapse All", onClick: () => this.closeAll(), disabled: this.disabled, ariaLabel: "Collapse all items" }))), this.showNumbers && !this.loading && this.renderNumberedIndicators(), this.renderSearchHeatmap(), this.renderLockOverlay(), this.renderPortalOverlay(), this.loading ? (this.renderSkeleton()) : (itemsToRender.length > 0 ? (itemsToRender.map(item => this.renderItem(item, 0, []))) : (h("div", { class: "accordion-no-results" }, this.loading ? (h("ui-loader", { size: "xs", color: "currentColor" })) : (this.enableSearch && this.searchQuery ? (h("p", null, "No items match your search \"", this.searchQuery, "\"")) : (h("p", null, "No items to display")))))))));
+    }
+    static get is() { return "ui-accordion"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["accordion.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["accordion.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "AccordionItem[]",
+                    "resolved": "AccordionItem[]",
+                    "references": {
+                        "AccordionItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/accordion/types.ts::AccordionItem",
+                            "referenceLocation": "AccordionItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of accordion items"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow multiple items to be open at once"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "expandedItems": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[] | null",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controlled open items (overrides internal state if provided)"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "defaultOpen": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "IDs of items that should be open by default"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "animationDuration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animation duration in milliseconds"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animation-duration",
+                "defaultValue": "300"
+            },
+            "animationTiming": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AccordionAnimation",
+                    "resolved": "\"ease\" | \"ease-in\" | \"ease-in-out\" | \"ease-out\" | \"linear\" | \"none\"",
+                    "references": {
+                        "AccordionAnimation": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/accordion/types.ts::AccordionAnimation",
+                            "referenceLocation": "AccordionAnimation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animation timing function"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animation-timing",
+                "defaultValue": "'ease'"
+            },
+            "physics": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'standard' | 'bouncy' | 'liquid'",
+                    "resolved": "\"bouncy\" | \"liquid\" | \"standard\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Creative/Motion Variants"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "physics",
+                "defaultValue": "'standard'"
+            },
+            "backgroundColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Background color of the accordion"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "background-color",
+                "defaultValue": "'white'"
+            },
+            "haptic": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable haptic feedback on interaction"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "haptic",
+                "defaultValue": "true"
+            },
+            "enableAnimation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable global animations"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-animation",
+                "defaultValue": "true"
+            },
+            "showNumbers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show numbered indicators above the accordion"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-numbers",
+                "defaultValue": "false"
+            },
+            "arrowIconCollapsed": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom arrow icon for collapsed state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "arrow-icon-collapsed",
+                "defaultValue": "'chevron-right'"
+            },
+            "arrowIconExpanded": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom arrow icon for expanded state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "arrow-icon-expanded",
+                "defaultValue": "'chevron-down'"
+            },
+            "hideArrow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide arrow icon completely"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-arrow",
+                "defaultValue": "false"
+            },
+            "selectedHeaderColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom color for selected header (default: #10b981)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-header-color",
+                "defaultValue": "'#10b981'"
+            },
+            "selectionPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'top' | 'none'",
+                    "resolved": "\"left\" | \"none\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the selection indicator: 'left' | 'top' | 'none'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selection-position",
+                "defaultValue": "'left'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'bordered' | 'splitted' | 'light' | 'shadow' | 'card' | 'card-list' | 'headline'",
+                    "resolved": "\"bordered\" | \"card\" | \"card-list\" | \"default\" | \"headline\" | \"light\" | \"shadow\" | \"splitted\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accordion variant: 'default' | 'bordered' | 'splitted' | 'light' | 'shadow' | 'card' | 'card-list' | 'headline'\r\nUse 'card' or 'card-list' for a separated card layout with icon pills and a right-chevron.\r\nUse 'headline' for a minimalist, high-impact typography-first layout."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AccordionSize",
+                    "resolved": "\"default\" | \"large\" | \"lg\" | \"main\" | \"md\" | \"medium\" | \"popover\" | \"section\" | \"sm\" | \"small\" | \"subsection\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\" | \"xxxl\" | \"xxxs\"",
+                    "references": {
+                        "AccordionSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/accordion/types.ts::AccordionSize",
+                            "referenceLocation": "AccordionSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the accordion: 'sm' | 'md' | 'lg'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end'",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the expand icon: 'start' | 'end'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-position",
+                "defaultValue": "'end'"
+            },
+            "persistState": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable state persistence - if provided, the string will be used as a localStorage key"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "persist-state",
+                "defaultValue": "''"
+            },
+            "lazyRender": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Only render accordion content when it is first opened (Performance)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "lazy-render",
+                "defaultValue": "false"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'glass' | 'radiant'",
+                    "resolved": "\"default\" | \"glass\" | \"radiant\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual theme: 'default' | 'glass' | 'radiant'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "'default'"
+            },
+            "columns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Grid columns count for accordion items (Large screens only)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "1"
+            },
+            "enableParallax": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable 3D Parallax depth effect on hover (Premium themes only)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-parallax",
+                "defaultValue": "false"
+            },
+            "enableHaptics": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable auditory haptics (premium click/collapse sounds)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-haptics",
+                "defaultValue": "false"
+            },
+            "stickyHeaders": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pin headers to the top during long content scrolls"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sticky-headers",
+                "defaultValue": "false"
+            },
+            "enableQuickActions": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable floating Quick Actions toolbar on hover"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-quick-actions",
+                "defaultValue": "false"
+            },
+            "enableSearchHeatmap": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable a visual search \"Mini-map\" (Heatmap) on the right side"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-search-heatmap",
+                "defaultValue": "false"
+            },
+            "focusTimeout": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Automatically collapse sections after X milliseconds of inactivity (0 to disable)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "focus-timeout",
+                "defaultValue": "0"
+            },
+            "enableRanking": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Automatically rank items based on their usage heat (requires persistState)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-ranking",
+                "defaultValue": "false"
+            },
+            "enableLocking": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable Pattern-Lock security for sensitive items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-locking",
+                "defaultValue": "false"
+            },
+            "enableSparklines": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable high-precision header sparklines for analytical data"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-sparklines",
+                "defaultValue": "false"
+            },
+            "enableGestures": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable tactile swipe gestures for item actions (Mobile Context)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-gestures",
+                "defaultValue": "false"
+            },
+            "syncGroup": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional name for a synchronization group. All accordions with the same group \r\nname will synchronize their toggle states globally."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sync-group",
+                "defaultValue": "''"
+            },
+            "showBreadcrumbs": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a navigation trail (breadcrumbs) for nested items in their headers"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-breadcrumbs",
+                "defaultValue": "false"
+            },
+            "printExpandAll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Automatically expand all items and hide interactive controls when printing"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "print-expand-all",
+                "defaultValue": "false"
+            },
+            "enableCollaborators": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable real-time collaborator presence indicators in headers"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-collaborators",
+                "defaultValue": "false"
+            },
+            "enableAISummaries": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable AI-generated content briefing tooltips on hover"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-a-i-summaries",
+                "defaultValue": "false"
+            },
+            "enablePortalReader": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable full-screen 'Reading Portal' mode for deep-focus content analysis"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-portal-reader",
+                "defaultValue": "false"
+            },
+            "enableSnapshots": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable Workflow 'Snapshots' (save/load open states)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-snapshots",
+                "defaultValue": "false"
+            },
+            "enableStreaming": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable real-time, auto-scrolling telemetry terminals inside items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-streaming",
+                "defaultValue": "false"
+            },
+            "enableVoiceControl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable Voice-Activated industrial navigation (Hands-Free)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-voice-control",
+                "defaultValue": "false"
+            },
+            "enableHolographic": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable Advanced 3D 'Holographic' depth stacking on expansion"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-holographic",
+                "defaultValue": "false"
+            },
+            "enableTeleportation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable Smart-Link 'Teleportation' between accordion sections"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-teleportation",
+                "defaultValue": "false"
+            },
+            "iconLibrary": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconLibrary",
+                    "resolved": "\"bootstrap\" | \"default\" | \"emoji\" | \"fontawesome\" | \"google\" | \"iconoir\" | \"icons8\" | \"ionicons\" | \"lucide\" | \"remixicon\" | \"se\"",
+                    "references": {
+                        "IconLibrary": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::IconLibrary",
+                            "referenceLocation": "IconLibrary"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default library to use for icons (e.g., 'se', 'fontawesome', 'lucide', 'emoji', etc.)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-library",
+                "defaultValue": "'lucide'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable the entire accordion"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "enableSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable search/filter functionality"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-search",
+                "defaultValue": "false"
+            },
+            "searchPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Search input placeholder"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-placeholder",
+                "defaultValue": "'Search...'"
+            },
+            "enableExpandCollapseAll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show expand/collapse all buttons"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-expand-collapse-all",
+                "defaultValue": "false"
+            },
+            "enablePersistence": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Save state to localStorage"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-persistence",
+                "defaultValue": "false"
+            },
+            "persistenceKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "localStorage key for persistence"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "persistence-key",
+                "defaultValue": "'ui-accordion-state'"
+            },
+            "enableDragDrop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable drag & drop reordering"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-drag-drop",
+                "defaultValue": "false"
+            },
+            "enableNested": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable nested accordion support"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-nested",
+                "defaultValue": "false"
+            },
+            "rtl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Right-to-left mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rtl",
+                "defaultValue": "false"
+            },
+            "dense": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Compact/dense mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dense",
+                "defaultValue": "false"
+            },
+            "headerLevel": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "1 | 2 | 3 | 4 | 5 | 6",
+                    "resolved": "1 | 2 | 3 | 4 | 5 | 6",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Header heading level (1-6) for accessibility"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header-level",
+                "defaultValue": "3"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show global skeleton loading state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "autoScroll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Automatically scroll the item into view when it is opened if it's partially off-screen"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-scroll",
+                "defaultValue": "false"
+            },
+            "scrollBehavior": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ScrollBehaviorType",
+                    "resolved": "\"auto\" | \"smooth\"",
+                    "references": {
+                        "ScrollBehaviorType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/accordion/types.ts::ScrollBehavior",
+                            "referenceLocation": "ScrollBehaviorType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Scrolling behavior when autoScroll is enabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scroll-behavior",
+                "defaultValue": "'smooth'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isListening": {},
+            "voiceCommand": {},
+            "activePortalId": {},
+            "availableSnapshots": {},
+            "unlockedItems": {},
+            "patternInput": {},
+            "activeLockId": {},
+            "itemHeat": {},
+            "_collaborators": {},
+            "openItems": {},
+            "parsedItems": {},
+            "parsedDefaultOpen": {},
+            "searchQuery": {},
+            "filteredItems": {},
+            "draggedItemId": {},
+            "dragOverItemId": {},
+            "animatingItems": {},
+            "isShaking": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "accordionChange",
+                "name": "accordionChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "AccordionChangeEvent",
+                    "resolved": "AccordionChangeEvent",
+                    "references": {
+                        "AccordionChangeEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/accordion/types.ts::AccordionChangeEvent",
+                            "referenceLocation": "AccordionChangeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "beforeOpen",
+                "name": "beforeOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "AccordionAnimationEvent",
+                    "resolved": "AccordionAnimationEvent",
+                    "references": {
+                        "AccordionAnimationEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/accordion/types.ts::AccordionAnimationEvent",
+                            "referenceLocation": "AccordionAnimationEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "afterOpen",
+                "name": "afterOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "AccordionAnimationEvent",
+                    "resolved": "AccordionAnimationEvent",
+                    "references": {
+                        "AccordionAnimationEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/accordion/types.ts::AccordionAnimationEvent",
+                            "referenceLocation": "AccordionAnimationEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "beforeClose",
+                "name": "beforeClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "AccordionAnimationEvent",
+                    "resolved": "AccordionAnimationEvent",
+                    "references": {
+                        "AccordionAnimationEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/accordion/types.ts::AccordionAnimationEvent",
+                            "referenceLocation": "AccordionAnimationEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "afterClose",
+                "name": "afterClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "AccordionAnimationEvent",
+                    "resolved": "AccordionAnimationEvent",
+                    "references": {
+                        "AccordionAnimationEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/accordion/types.ts::AccordionAnimationEvent",
+                            "referenceLocation": "AccordionAnimationEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "accordionSearch",
+                "name": "accordionSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "AccordionSearchEvent",
+                    "resolved": "AccordionSearchEvent",
+                    "references": {
+                        "AccordionSearchEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/accordion/types.ts::AccordionSearchEvent",
+                            "referenceLocation": "AccordionSearchEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "accordionReorder",
+                "name": "accordionReorder",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "AccordionReorderEvent",
+                    "resolved": "AccordionReorderEvent",
+                    "references": {
+                        "AccordionReorderEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/accordion/types.ts::AccordionReorderEvent",
+                            "referenceLocation": "AccordionReorderEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "accordionAction",
+                "name": "accordionAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "AccordionActionEvent",
+                    "resolved": "AccordionActionEvent",
+                    "references": {
+                        "AccordionActionEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/accordion/types.ts::AccordionActionEvent",
+                            "referenceLocation": "AccordionActionEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "shake": {
+                "complexType": {
+                    "signature": "(itemId: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "itemId",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Triggers a kinetic shake animation on a specific item (Veto feedback)",
+                    "tags": []
+                }
+            },
+            "success": {
+                "complexType": {
+                    "signature": "(itemId: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "itemId",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Triggers a success radiant pulse on a specific item",
+                    "tags": []
+                }
+            },
+            "openItem": {
+                "complexType": {
+                    "signature": "(itemId: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "itemId",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "closeItem": {
+                "complexType": {
+                    "signature": "(itemId: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "itemId",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "toggleItemById": {
+                "complexType": {
+                    "signature": "(itemId: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "itemId",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "openAll": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "closeAll": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "scrollToItem": {
+                "complexType": {
+                    "signature": "(itemId: string, behavior?: ScrollBehaviorType) => Promise<void>",
+                    "parameters": [{
+                            "name": "itemId",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "behavior",
+                            "type": "\"auto\" | \"smooth\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ScrollBehaviorType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/accordion/types.ts::ScrollBehavior",
+                            "referenceLocation": "ScrollBehaviorType"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "searchItems": {
+                "complexType": {
+                    "signature": "(query: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "query",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "clearSearch": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getOpenItems": {
+                "complexType": {
+                    "signature": "() => Promise<string[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string[]>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "setOpenItems": {
+                "complexType": {
+                    "signature": "(itemIds: string[]) => Promise<void>",
+                    "parameters": [{
+                            "name": "itemIds",
+                            "type": "string[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "saveSnapshot": {
+                "complexType": {
+                    "signature": "(name: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "name",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "teleportTo": {
+                "complexType": {
+                    "signature": "(itemId: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "itemId",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "initVoice": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "expandedItems",
+                "methodName": "onExpandedItemsChange"
+            }, {
+                "propName": "items",
+                "methodName": "onItemsChange"
+            }, {
+                "propName": "defaultOpen",
+                "methodName": "onDefaultOpenChange"
+            }, {
+                "propName": "multiple",
+                "methodName": "onMultipleChange"
+            }, {
+                "propName": "animationDuration",
+                "methodName": "onAnimationDurationChange"
+            }, {
+                "propName": "showNumbers",
+                "methodName": "onShowNumbersChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "accordionRemoteState",
+                "method": "handleRemoteSync",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}