atomicuilibrary 0.0.1

package/dist/collection/components/tabs/tabs.js

@@ -0,0 +1,1474 @@
+import { getTransformedAncestorOffset, calculateUniversalPlacement } from "../../utils/dom";
+import { h } from "@stencil/core";
+import { sanitizeHTML } from "../../utils/security";
+export class Tabs {
+    element;
+    /**
+     * Array of tab items
+     */
+    items = [];
+    /**
+     * ID of the tab that should be active by default
+     */
+    defaultActive = '';
+    /**
+     * Animation duration in milliseconds
+     */
+    animationDuration = 300;
+    /**
+     * Orientation of tabs: 'horizontal' or 'vertical'
+     */
+    orientation = 'horizontal';
+    /**
+     * Position of the indicator for line variant: TopBottom
+     */
+    indicatorPosition = 'bottom';
+    /**
+     * Show close all button
+     */
+    showCloseAll = false;
+    /**
+     * Show tab list dropdown button
+     */
+    showTabList = false;
+    /**
+     * Maximum width for tab titles (in pixels)
+     */
+    maxTabWidth = 300;
+    /**
+     * Maximum visible length for tab titles (characters). If exceeded, title is ellipsized via CSS and full text is available in tooltip.
+     */
+    maxTitleLength = 24;
+    /**
+     * Enable text wrapping in tabs
+     */
+    wrapText = false;
+    /**
+     * Position of tabs header: 'left', 'center', 'right', 'full-width'
+     */
+    position = 'left';
+    /**
+     * Scroll mode: 'auto' (auto-scroll to active), 'manual' (user controls), 'none' (no scroll)
+     */
+    scrollMode = 'manual';
+    /**
+     * Animation on tab selection
+     */
+    selectionAnimation = 'slide';
+    /**
+     * Icon position: 'start', 'end', 'top', 'bottom'
+     */
+    iconPosition = 'left';
+    /**
+     * Show only icons (hide titles)
+     */
+    iconOnly = false;
+    /**
+     * Scroll button placement: 'split' (ends), 'start' (both left/top), 'end' (both right/bottom)
+     */
+    scrollButtonPlacement = 'split';
+    /**
+     * Tab variant style
+     */
+    variant = 'line';
+    /**
+     * Custom active/indicator color (sets --tab-active-color). Accepts any CSS color value.
+     */
+    activeColor = '';
+    /**
+     * Selection indicator shape — applies to variants that use a sliding bar (line, minimal).
+     * - line    — default 4px bar
+     * - capsule — pill-rounded fat bar
+     * - dot     — centred dot
+     * - glow    — soft blur glow bar
+     * - bold    — extra-thick bar
+     * - none    — no indicator
+     */
+    indicatorStyle = 'line';
+    /**
+     * Optional gradient for the indicator bar.
+     * Accepts any CSS gradient string, e.g. "linear-gradient(90deg,#ec4899,#8b5cf6)".
+     * When set, overrides activeColor on the indicator (activeColor still affects text & active bg).
+     * Leave empty to use the solid activeColor.
+     */
+    indicatorGradient = '';
+    /**
+     * Tab size: xs | sm | md | lg | xl
+     */
+    size = 'md';
+    /**
+     * Default library for icons
+     */
+    iconLibrary = 'default';
+    /**
+     * When true, non-active tab panels are not mounted until first activated (content-based tabs only)
+     */
+    lazy = false;
+    /**
+     * Enable drag-and-drop to reorder tabs
+     */
+    isDraggable = false;
+    activeTab = '';
+    parsedItems = [];
+    activeMenuTab = null; // Track open menu
+    showScrollButtons = false;
+    isTabListOpen = false;
+    tabListPosition = null;
+    tabListSearch = '';
+    activeMenuPosition = null;
+    editingTab = null;
+    draggingTabId = null;
+    tabListTrigger;
+    activeMenuTrigger;
+    _mountedTabs = new Set();
+    tabChange;
+    tabClose;
+    closeAll;
+    tabEdit;
+    tabDelete;
+    tabOpenPanel;
+    tabsReordered;
+    tabUpdate;
+    tabsHeaderRef;
+    indicatorRef;
+    resizeObserver;
+    parseItems(newValue) {
+        if (typeof newValue === 'string') {
+            try {
+                this.parsedItems = JSON.parse(newValue);
+            }
+            catch (error) {
+                console.error('Invalid JSON for tab items:', error);
+                this.parsedItems = [];
+            }
+        }
+        else {
+            this.parsedItems = [...newValue];
+        }
+        // Set default active tab if not set
+        if (!this.activeTab && this.parsedItems.length > 0) {
+            this.activeTab = this.defaultActive || this.parsedItems[0].id;
+        }
+        setTimeout(() => this.updateIndicator(), 0);
+    }
+    onDefaultActiveChange(newValue) {
+        if (newValue && this.parsedItems.some(item => item.id === newValue)) {
+            this.activeTab = newValue;
+            this.updateIndicator();
+        }
+    }
+    onActiveTabChange() {
+        this.updateIndicator();
+    }
+    componentWillLoad() {
+        this.parseItems(this.items);
+        this.activeTab = this.defaultActive || (this.parsedItems.length > 0 ? this.parsedItems[0].id : '');
+    }
+    componentDidLoad() {
+        this.checkScrollButtons();
+        if (this.scrollMode === 'auto') {
+            this.scrollToActiveTab();
+        }
+        // Delayed check for vertical tabs where layout may not be ready
+        setTimeout(() => {
+            this.checkScrollButtons();
+        }, 100);
+        this.resizeObserver = new ResizeObserver(() => {
+            this.checkScrollButtons();
+        });
+        if (this.element) {
+            this.resizeObserver.observe(this.element);
+        }
+        if (this.tabsHeaderRef) {
+            this.resizeObserver.observe(this.tabsHeaderRef);
+        }
+        // Initial indicator placement
+        requestAnimationFrame(() => this.updateIndicator());
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    componentDidUpdate() {
+        if (this.scrollMode === 'auto') {
+            this.scrollToActiveTab();
+        }
+        this.checkScrollButtons();
+        this.updateIndicator();
+    }
+    handleKeyDown(event) {
+        if (!this.element.contains(event.target))
+            return;
+        const target = event.target;
+        const tab = target.closest('.tab-header');
+        if (!tab)
+            return;
+        const tabId = tab.getAttribute('data-id');
+        if (!tabId)
+            return;
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.selectTab(tabId);
+                break;
+            case 'ArrowRight':
+                if (this.orientation === 'horizontal') {
+                    event.preventDefault();
+                    this.focusNextTab(tabId);
+                }
+                break;
+            case 'ArrowLeft':
+                if (this.orientation === 'horizontal') {
+                    event.preventDefault();
+                    this.focusPreviousTab(tabId);
+                }
+                break;
+            case 'ArrowDown':
+                if (this.orientation === 'vertical') {
+                    event.preventDefault();
+                    this.focusNextTab(tabId);
+                }
+                break;
+            case 'ArrowUp':
+                if (this.orientation === 'vertical') {
+                    event.preventDefault();
+                    this.focusPreviousTab(tabId);
+                }
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.focusFirstTab();
+                break;
+            case 'End':
+                event.preventDefault();
+                this.focusLastTab();
+                break;
+        }
+    }
+    handleScroll() {
+        if (this.isTabListOpen || this.activeMenuTab) {
+            this.recalculateDropdownPositions();
+        }
+    }
+    recalculateDropdownPositions() {
+        requestAnimationFrame(() => {
+            if (this.isTabListOpen && this.tabListTrigger) {
+                const placement = calculateUniversalPlacement(this.tabListTrigger, {
+                    menuWidth: 300,
+                    menuHeight: 400,
+                    gap: 6,
+                    placement: 'auto',
+                    align: 'end',
+                    padding: 10,
+                    useTransformedAncestorOffset: false,
+                });
+                this.tabListPosition = {
+                    x: placement.left,
+                    y: placement.top ?? 0,
+                    width: Math.min(340, Math.max(240, this.tabListTrigger.getBoundingClientRect().width * 2)),
+                    maxHeight: Math.min(420, placement.availableHeight),
+                };
+            }
+            if (this.activeMenuTab && this.activeMenuTrigger) {
+                const placement = calculateUniversalPlacement(this.activeMenuTrigger, {
+                    menuWidth: 180,
+                    menuHeight: 200,
+                    gap: 4,
+                    placement: 'bottom',
+                    align: 'end',
+                });
+                this.activeMenuPosition = {
+                    x: placement.left,
+                    y: placement.top ?? 0,
+                };
+            }
+        });
+    }
+    handleWindowClick(event) {
+        // Close menu if clicking outside
+        const target = event.target;
+        if (this.activeMenuTab) {
+            if (!target.closest('.tab-actions')) {
+                this.activeMenuTab = null;
+            }
+        }
+        if (this.isTabListOpen) {
+            if (!target.closest('.tab-list-wrapper')) {
+                this.isTabListOpen = false;
+                this.tabListSearch = '';
+            }
+        }
+    }
+    toggleMenu(tabId, event) {
+        event.stopPropagation();
+        if (this.activeMenuTab === tabId) {
+            this.activeMenuTab = null;
+            this.activeMenuPosition = null;
+            this.activeMenuTrigger = undefined;
+        }
+        else {
+            this.activeMenuTrigger = event.currentTarget;
+            const rect = this.activeMenuTrigger.getBoundingClientRect();
+            const offset = getTransformedAncestorOffset(this.element);
+            this.activeMenuTab = tabId;
+            this.activeMenuPosition = {
+                x: rect.right - offset.x,
+                y: rect.bottom - offset.y + 4,
+            };
+        }
+    }
+    toggleTabList(event) {
+        event.stopPropagation();
+        this.tabListSearch = '';
+        this.isTabListOpen = !this.isTabListOpen;
+        if (this.isTabListOpen) {
+            this.tabListTrigger = event.currentTarget;
+            // Use calculateUniversalPlacement with fixed positioning (no ancestor offset)
+            // so left/top are pure viewport coords matching position:fixed.
+            const placement = calculateUniversalPlacement(this.tabListTrigger, {
+                menuWidth: 300,
+                menuHeight: 400,
+                gap: 6,
+                placement: 'auto',
+                align: 'end',
+                padding: 10,
+                useTransformedAncestorOffset: false,
+            });
+            this.tabListPosition = {
+                x: placement.left,
+                y: placement.top ?? 0,
+                width: Math.min(340, Math.max(240, this.tabListTrigger.getBoundingClientRect().width * 2)),
+                maxHeight: Math.min(420, placement.availableHeight),
+            };
+        }
+        else {
+            this.tabListPosition = null;
+            this.tabListTrigger = undefined;
+        }
+    }
+    selectTab(tabId) {
+        const item = this.parsedItems.find(i => i.id === tabId);
+        if (item?.disabled)
+            return;
+        const previousTab = this.activeTab;
+        this.activeTab = tabId;
+        this.tabChange.emit({
+            tabId: previousTab,
+            activeTab: tabId,
+        });
+        // Close tab list if open
+        this.isTabListOpen = false;
+        // Smooth scroll to selected tab
+        requestAnimationFrame(() => {
+            const tabElement = this.element.querySelector(`[data-id="${tabId}"]`);
+            if (tabElement) {
+                tabElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+            }
+        });
+    }
+    handleCloseTab(tabId, event) {
+        event.stopPropagation();
+        const tabIndex = this.parsedItems.findIndex(item => item.id === tabId);
+        if (tabIndex === -1)
+            return;
+        if (this.activeTab === tabId && this.parsedItems.length > 1) {
+            const newActiveIndex = tabIndex < this.parsedItems.length - 1 ? tabIndex : tabIndex - 1;
+            this.activeTab = this.parsedItems[newActiveIndex].id;
+        }
+        this.parsedItems = this.parsedItems.filter(item => item.id !== tabId);
+        this.tabClose.emit(tabId);
+    }
+    focusNextTab(currentId) {
+        const currentIndex = this.parsedItems.findIndex(item => item.id === currentId);
+        const nextIndex = (currentIndex + 1) % this.parsedItems.length;
+        this.focusTab(this.parsedItems[nextIndex].id);
+    }
+    focusPreviousTab(currentId) {
+        const currentIndex = this.parsedItems.findIndex(item => item.id === currentId);
+        const prevIndex = currentIndex === 0 ? this.parsedItems.length - 1 : currentIndex - 1;
+        this.focusTab(this.parsedItems[prevIndex].id);
+    }
+    focusFirstTab() {
+        if (this.parsedItems.length > 0) {
+            this.focusTab(this.parsedItems[0].id);
+        }
+    }
+    focusLastTab() {
+        if (this.parsedItems.length > 0) {
+            this.focusTab(this.parsedItems[this.parsedItems.length - 1].id);
+        }
+    }
+    focusTab(tabId) {
+        const tabElement = this.element.querySelector(`[data-id="${tabId}"]`);
+        if (tabElement) {
+            tabElement.focus();
+        }
+    }
+    handleDragStart = (e, tabId) => {
+        if (!this.isDraggable)
+            return;
+        this.draggingTabId = tabId;
+        if (e.dataTransfer) {
+            e.dataTransfer.effectAllowed = 'move';
+            e.dataTransfer.setData('text/plain', tabId);
+        }
+    };
+    handleDragOver = (e) => {
+        if (!this.isDraggable)
+            return;
+        e.preventDefault();
+        if (e.dataTransfer) {
+            e.dataTransfer.dropEffect = 'move';
+        }
+    };
+    handleDrop = (e, targetId) => {
+        if (!this.isDraggable || !this.draggingTabId || this.draggingTabId === targetId)
+            return;
+        e.preventDefault();
+        const items = [...this.parsedItems];
+        const fromIndex = items.findIndex(i => i.id === this.draggingTabId);
+        const toIndex = items.findIndex(i => i.id === targetId);
+        if (fromIndex !== -1 && toIndex !== -1) {
+            const [movedItem] = items.splice(fromIndex, 1);
+            items.splice(toIndex, 0, movedItem);
+            this.parsedItems = items;
+            this.tabsReordered.emit(this.parsedItems);
+        }
+        this.draggingTabId = null;
+    };
+    startEditing(tabId) {
+        this.editingTab = tabId;
+        setTimeout(() => {
+            const input = this.element.querySelector('.tab-edit-input');
+            if (input) {
+                input.focus();
+                input.select();
+            }
+        }, 50);
+    }
+    commitEdit(tabId, newTitle) {
+        if (newTitle.trim()) {
+            this.parsedItems = this.parsedItems.map(item => item.id === tabId ? { ...item, title: newTitle } : item);
+            this.tabUpdate.emit({ id: tabId, title: newTitle });
+        }
+        this.editingTab = null;
+    }
+    scrollToActiveTab() {
+        if (!this.tabsHeaderRef || this.scrollMode === 'none')
+            return;
+        const activeTabElement = this.element.querySelector('.tab-header-active');
+        if (activeTabElement && this.orientation === 'horizontal') {
+            const containerRect = this.tabsHeaderRef.getBoundingClientRect();
+            const tabRect = activeTabElement.getBoundingClientRect();
+            const scrollLeft = this.tabsHeaderRef.scrollLeft;
+            if (tabRect.left < containerRect.left) {
+                this.tabsHeaderRef.scrollLeft = scrollLeft - (containerRect.left - tabRect.left) - 20;
+            }
+            else if (tabRect.right > containerRect.right) {
+                this.tabsHeaderRef.scrollLeft = scrollLeft + (tabRect.right - containerRect.right) + 20;
+            }
+        }
+    }
+    checkScrollButtons() {
+        if (!this.tabsHeaderRef || this.scrollMode === 'none') {
+            this.showScrollButtons = false;
+            return;
+        }
+        if (this.orientation === 'horizontal') {
+            this.showScrollButtons = this.tabsHeaderRef.scrollWidth > this.tabsHeaderRef.clientWidth + 2;
+        }
+        else {
+            // For vertical, check if content exceeds visible area OR if we have many tabs
+            const hasScrollableContent = this.tabsHeaderRef.scrollHeight > this.tabsHeaderRef.clientHeight + 2;
+            const hasManyTabs = this.parsedItems.length > 8;
+            this.showScrollButtons = hasScrollableContent || hasManyTabs;
+        }
+    }
+    scrollTabs(direction) {
+        if (!this.tabsHeaderRef)
+            return;
+        const scrollAmount = 200;
+        if (direction === 'left') {
+            this.tabsHeaderRef.scrollLeft -= scrollAmount;
+        }
+        else if (direction === 'right') {
+            this.tabsHeaderRef.scrollLeft += scrollAmount;
+        }
+        else if (direction === 'top') {
+            this.tabsHeaderRef.scrollTop -= scrollAmount;
+        }
+        else if (direction === 'bottom') {
+            this.tabsHeaderRef.scrollTop += scrollAmount;
+        }
+        this.updateIndicator();
+    }
+    updateIndicator() {
+        if (!this.indicatorRef || !this.tabsHeaderRef)
+            return;
+        // scoped:true — no shadow DOM, use element.querySelector
+        const activeTabElement = this.element.querySelector('.tab-header-active');
+        if (!activeTabElement) {
+            this.indicatorRef.style.opacity = '0';
+            return;
+        }
+        // Use getBoundingClientRect relative to the header container so scroll offsets
+        // and any CSS transforms on ancestor elements are handled correctly.
+        const headerRect = this.tabsHeaderRef.getBoundingClientRect();
+        const tabRect = activeTabElement.getBoundingClientRect();
+        if (this.orientation === 'horizontal') {
+            const relativeLeft = tabRect.left - headerRect.left + this.tabsHeaderRef.scrollLeft;
+            this.indicatorRef.style.transform = `translateX(${relativeLeft}px)`;
+            this.indicatorRef.style.width = `${tabRect.width}px`;
+            this.indicatorRef.style.height = '';
+        }
+        else {
+            const relativeTop = tabRect.top - headerRect.top + this.tabsHeaderRef.scrollTop;
+            this.indicatorRef.style.transform = `translateY(${relativeTop}px)`;
+            this.indicatorRef.style.height = `${tabRect.height}px`;
+            this.indicatorRef.style.width = '';
+        }
+        this.indicatorRef.style.opacity = '1';
+    }
+    async selectTabById(tabId) {
+        this.selectTab(tabId);
+    }
+    async getActiveTab() {
+        return this.activeTab;
+    }
+    async destroyComponent() {
+        this.closeAll.emit();
+        this.parsedItems = [];
+        this.activeTab = '';
+        this.element.remove();
+    }
+    handleCloseAll(event) {
+        event.stopPropagation();
+        this.destroyComponent();
+    }
+    renderTab(item) {
+        const isActive = this.activeTab === item.id;
+        const isDisabled = item.disabled || false;
+        const isMenuOpen = this.activeMenuTab === item.id;
+        const tabClasses = [
+            'tab-header',
+            isActive && 'tab-header-active',
+            isDisabled && 'tab-header-disabled',
+            this.iconOnly && 'tab-header-icon-only',
+            `icon-position-${this.iconPosition}`,
+            this.wrapText && 'tab-header-wrap',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const tabStyle = {
+            maxWidth: this.position !== 'full-width' ? `${this.maxTabWidth}px` : 'none',
+            ...(item.color && isActive ? { '--tab-active-color': item.color, '--tab-active-border': item.color } : {}),
+        };
+        const needsTooltip = !this.iconOnly && item.title && item.title.length > this.maxTitleLength;
+        return (h("div", { key: item.id, id: `tab-header-${item.id}`, class: tabClasses, part: isActive ? 'tab tab-active' : 'tab', "data-id": item.id, onClick: () => this.selectTab(item.id), "aria-selected": isActive ? 'true' : 'false', "aria-controls": `tab-content-${item.id}`, "aria-label": `Select ${item.title} tab`, "aria-disabled": isDisabled ? 'true' : 'false', tabindex: isDisabled ? -1 : 0, role: "tab", style: tabStyle, title: needsTooltip || this.iconOnly ? item.title : undefined, draggable: this.isDraggable, onDragStart: e => this.handleDragStart(e, item.id), onDragOver: this.handleDragOver, onDrop: e => this.handleDrop(e, item.id), onKeyDown: e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.selectTab(item.id);
+                }
+                else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+                    e.preventDefault();
+                    this.focusNextTab(item.id);
+                }
+                else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+                    e.preventDefault();
+                    this.focusPreviousTab(item.id);
+                }
+                else if (e.key === 'Home') {
+                    e.preventDefault();
+                    this.focusFirstTab();
+                }
+                else if (e.key === 'End') {
+                    e.preventDefault();
+                    this.focusLastTab();
+                }
+            }, onDblClick: () => this.startEditing(item.id) }, h("div", { class: "tab-header-content" }, item.icon && (h("span", { class: "tab-icon" }, h("ui-icon", { name: item.icon, library: item.iconLibrary || this.iconLibrary, size: "1.2em" }))), !this.iconOnly && (this.editingTab === item.id ? (h("ui-input", { class: "tab-edit-input", value: item.title, onInputBlur: (e) => this.commitEdit(item.id, e.detail.target.value), onInputKeydown: (e) => {
+                if (e.detail.key === 'Enter')
+                    this.commitEdit(item.id, e.detail.target.value);
+                if (e.detail.key === 'Escape')
+                    this.editingTab = null;
+                e.detail.stopPropagation();
+            }, size: "sm", fullWidth: true })) : (h("span", { class: "tab-title" }, item.title))), item.badge !== undefined && item.badge !== null && h("span", { class: `tab-badge ${item.badgeVariant ? 'badge-' + item.badgeVariant : ''}` }, item.badge), item.actions && (h("div", { class: `tab-actions ${isMenuOpen ? 'active' : ''}` }, h("ui-button", { variant: "ghost", size: "sm", iconOnly: true, icon: "more-horizontal", iconLibrary: this.iconLibrary, iconSize: "1.1em", ariaLabel: `Actions for ${item.title}`, ariaHasPopup: "true", ariaExpanded: isMenuOpen, onClick: (e) => this.toggleMenu(item.id, e), class: "tab-menu" }), isMenuOpen && (h("div", { class: "tab-menu-popover", role: "menu", style: {
+                position: 'fixed',
+                top: `${this.activeMenuPosition?.y}px`,
+                left: `${this.activeMenuPosition?.x}px`,
+                right: 'auto',
+                zIndex: '12000',
+            } }, h("ui-button", { variant: "ghost", size: "sm", fullWidth: true, icon: "edit-2", iconLibrary: this.iconLibrary, label: "Edit", class: "tab-menu-item", onClick: (e) => {
+                e.stopPropagation();
+                this.tabEdit.emit(item.id);
+                this.activeMenuTab = null;
+            }, style: { justifyContent: 'flex-start' } }), h("ui-button", { variant: "ghost", size: "sm", fullWidth: true, icon: "file-text", iconLibrary: this.iconLibrary, label: "Detail", class: "tab-menu-item", onClick: (e) => {
+                e.stopPropagation();
+                this.tabOpenPanel.emit(item.id);
+                this.activeMenuTab = null;
+            }, style: { justifyContent: 'flex-start' } }), h("div", { class: "menu-divider" }), h("ui-button", { variant: "ghost", size: "sm", fullWidth: true, icon: "trash-2", iconLibrary: this.iconLibrary, label: "Delete", class: "tab-menu-item danger", onClick: (e) => {
+                e.stopPropagation();
+                this.tabDelete.emit(item.id);
+                this.activeMenuTab = null;
+            }, style: { justifyContent: 'flex-start' } }))))), item.closable && (h("ui-button", { variant: "ghost", size: "sm", iconOnly: true, icon: "x", iconLibrary: this.iconLibrary, iconSize: "0.9em", onClick: (event) => this.handleCloseTab(item.id, event), ariaLabel: `Close ${item.title} tab`, class: "tab-close" })))));
+    }
+    renderContent(item) {
+        const isActive = this.activeTab === item.id;
+        // Lazy mode: skip rendering non-active, content-based panels until they've been activated
+        if (this.lazy && !isActive && !item.useSlot && !this._mountedTabs.has(item.id)) {
+            return null;
+        }
+        // Track which tabs have been rendered at least once
+        if (isActive)
+            this._mountedTabs.add(item.id);
+        const contentClasses = ['tab-content', isActive && 'tab-content-active', `animation-${this.selectionAnimation}`].filter(Boolean).join(' ');
+        return (h("div", { key: item.id, class: contentClasses, id: `tab-content-${item.id}`, "aria-labelledby": `tab-header-${item.id}`, role: "tabpanel", "aria-hidden": !isActive, style: {
+                '--animation-duration': `${this.animationDuration}ms`,
+            } }, item.useSlot ? (h("div", { class: "tab-content-inner" }, h("slot", { name: item.slot || item.id }))) : (h("div", { class: "tab-content-inner", innerHTML: sanitizeHTML(item.content ?? '') }))));
+    }
+    render() {
+        const containerClasses = [
+            'tabs-container',
+            `tabs-${this.orientation}`,
+            `tabs-position-${this.position}`,
+            `tabs-variant-${this.variant}`,
+            `tabs-size-${this.size}`,
+            this.scrollMode !== 'none' && 'tabs-scrollable',
+            `buttons-${this.scrollButtonPlacement}`,
+            `indicator-${this.indicatorPosition}`,
+            `indicator-style-${this.indicatorStyle}`,
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const containerStyle = {};
+        if (this.activeColor)
+            containerStyle['--tab-active-color'] = this.activeColor;
+        if (this.indicatorGradient)
+            containerStyle['--tab-indicator-bg'] = this.indicatorGradient;
+        else if (this.activeColor)
+            containerStyle['--tab-indicator-bg'] = this.activeColor;
+        const headerWrapperClasses = ['tabs-header-wrapper', this.showScrollButtons && this.scrollMode !== 'none' && 'show-scroll-buttons'].filter(Boolean).join(' ');
+        const showLeftUp = this.showScrollButtons && this.scrollMode !== 'none';
+        const showRightDown = this.showScrollButtons && this.scrollMode !== 'none';
+        const isVertical = this.orientation === 'vertical';
+        const renderButton = (dir, label) => (h("ui-button", { key: '3c6fc7c093589854f1d872f28c2b4b3d384a569b', variant: "ghost", size: "sm", iconOnly: true, class: `scroll-button scroll-${dir}`, onClick: () => this.scrollTabs(dir), ariaLabel: label, icon: dir === 'left' ? 'chevron-left' : dir === 'right' ? 'chevron-right' : dir === 'top' ? 'chevron-up' : 'chevron-down', iconLibrary: this.iconLibrary, iconSize: "1.2em" }));
+        return (h("div", { key: '9414cddcf48432318ef220cb9a78afc9fb9cbbc7', class: containerClasses, style: Object.keys(containerStyle).length ? containerStyle : undefined }, h("div", { key: 'd2e8880304c4003bdd30b90f2058898d7300222a', class: headerWrapperClasses }, showLeftUp &&
+            (this.scrollButtonPlacement === 'start' || this.scrollButtonPlacement === 'split') &&
+            (isVertical ? renderButton('top', 'Scroll up') : renderButton('left', 'Scroll left')), showRightDown && this.scrollButtonPlacement === 'start' && (isVertical ? renderButton('bottom', 'Scroll down') : renderButton('right', 'Scroll right')), h("div", { key: '96488ce3447e393501fa7932b37241a804ef279a', class: "tabs-header", part: "tabs-header", ref: el => (this.tabsHeaderRef = el), role: "tablist", "aria-orientation": this.orientation }, this.parsedItems.map(item => this.renderTab(item)), h("div", { key: '1bd98d7bcadff9975741640c301f109124c1881a', class: "tab-selection-indicator", part: "indicator", ref: el => (this.indicatorRef = el) })), showLeftUp && this.scrollButtonPlacement === 'end' && (isVertical ? renderButton('top', 'Scroll up') : renderButton('left', 'Scroll left')), showRightDown &&
+            (this.scrollButtonPlacement === 'end' || this.scrollButtonPlacement === 'split') &&
+            (isVertical ? renderButton('bottom', 'Scroll down') : renderButton('right', 'Scroll right')), h("div", { key: '21bfeb334606ab5dd1ae16295062dce602ac9eb6', class: "tabs-controls-group", style: { display: 'flex', alignItems: 'center', marginLeft: 'auto', paddingLeft: '8px' } }, (this.showTabList || this.showCloseAll) && (h("div", { key: 'f020d74400afecbfe455adf44ab017ca272cbefe', class: "tab-list-wrapper" }, h("ui-button", { key: '128b8b541c450be82d6815a165e1b8f8cb66cf52', variant: "ghost", size: "sm", iconOnly: true, icon: "list", iconLibrary: this.iconLibrary, iconSize: "1em", onClick: (e) => this.toggleTabList(e), ariaLabel: "List all tabs", ariaHasPopup: "true", ariaExpanded: this.isTabListOpen, title: "List All Tabs", class: "tab-list-button" }), this.isTabListOpen && (h("div", { key: 'b55c7b805f2a1da631a5a77bda9807217f3a96fb', class: "tab-list-dropdown", style: {
+                position: 'fixed',
+                top: `${this.tabListPosition?.y}px`,
+                left: `${this.tabListPosition?.x}px`,
+                width: `${this.tabListPosition?.width}px`,
+                maxHeight: `${this.tabListPosition?.maxHeight ?? 420}px`,
+                zIndex: '12000',
+            } }, h("div", { key: '5032f2519eab9a4332e0686e2ce9ea37aa58f2ad', class: "tab-list-header" }, h("span", { key: '907eaf22e72a92147a2937a7530f37c5941d24e8', class: "tab-list-header-title" }, "Open Tabs"), h("span", { key: '3508efb55c24109536772a648a7364f7ada8289b', class: "tab-list-header-count" }, this.parsedItems.length)), h("div", { key: 'eea1f858f13dd780d5ed518079a915df070cb655', class: "tab-list-search", onClick: (e) => e.stopPropagation() }, h("ui-input", { key: '4bbb2eaa3f2c937fe05991720cc34f70f6241776', class: "tab-list-search-input", placeholder: "Search tabs...", value: this.tabListSearch, prefixIcon: "search", iconLibrary: this.iconLibrary, showClear: true, size: "sm", fullWidth: true, onInputChange: (e) => { this.tabListSearch = e.detail; }, onInputClear: () => { this.tabListSearch = ''; }, "aria-label": "Search tabs", autoFocus: true })), this.parsedItems.filter(item => !this.tabListSearch.trim() ||
+            item.title?.toLowerCase().includes(this.tabListSearch.toLowerCase())).map(item => {
+            const isActive = this.activeTab === item.id;
+            return (h("div", { class: `tab-list-item ${isActive ? 'active' : ''}`, onClick: () => this.selectTab(item.id), role: "option", "aria-selected": isActive.toString(), title: item.title }, item.icon && (h("span", { class: "tab-list-icon" }, h("ui-icon", { name: item.icon, library: item.iconLibrary || this.iconLibrary, size: "16px", color: "currentColor" }))), h("span", { class: "tab-list-title" }, item.title), item.badge && h("span", { class: "tab-list-badge" }, item.badge), isActive && (h("span", { class: "tab-list-active-check" }, h("ui-icon", { name: "check", library: "lucide", size: "14px", color: "currentColor" })))));
+        }))))), this.showCloseAll && (h("ui-button", { key: '7e98f8695e6d8ab32c8b0c66e7f95b0878fc789e', variant: "ghost", size: "sm", iconOnly: true, icon: "x", iconLibrary: this.iconLibrary, iconSize: "1em", onClick: (event) => this.handleCloseAll(event), ariaLabel: "Close all tabs", title: "Close All", class: "tab-close-all" })))), h("div", { key: '81b7020058c9594a86bd4cd75d908bd42397c2c4', class: "tabs-content" }, this.parsedItems.map(item => this.renderContent(item)))));
+    }
+    static get is() { return "ui-tabs"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tabs.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tabs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TabItem[] | string",
+                    "resolved": "TabItem[] | string",
+                    "references": {
+                        "TabItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tabs/types.ts::TabItem",
+                            "referenceLocation": "TabItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of tab items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items",
+                "defaultValue": "[]"
+            },
+            "defaultActive": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of the tab that should be active by default"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-active",
+                "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"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Orientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "Orientation": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::Orientation",
+                            "referenceLocation": "Orientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Orientation of tabs: 'horizontal' or 'vertical'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "indicatorPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TopBottom",
+                    "resolved": "\"bottom\" | \"top\"",
+                    "references": {
+                        "TopBottom": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::TopBottom",
+                            "referenceLocation": "TopBottom"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the indicator for line variant: TopBottom"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indicator-position",
+                "defaultValue": "'bottom'"
+            },
+            "showCloseAll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show close all button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-close-all",
+                "defaultValue": "false"
+            },
+            "showTabList": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show tab list dropdown button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-tab-list",
+                "defaultValue": "false"
+            },
+            "maxTabWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum width for tab titles (in pixels)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-tab-width",
+                "defaultValue": "300"
+            },
+            "maxTitleLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum visible length for tab titles (characters). If exceeded, title is ellipsized via CSS and full text is available in tooltip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-title-length",
+                "defaultValue": "24"
+            },
+            "wrapText": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable text wrapping in tabs"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "wrap-text",
+                "defaultValue": "false"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LeftRight | 'center' | 'full-width'",
+                    "resolved": "\"center\" | \"full-width\" | \"left\" | \"right\"",
+                    "references": {
+                        "LeftRight": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::LeftRight",
+                            "referenceLocation": "LeftRight"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of tabs header: 'left', 'center', 'right', 'full-width'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'left'"
+            },
+            "scrollMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'auto' | 'manual' | 'none'",
+                    "resolved": "\"auto\" | \"manual\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Scroll mode: 'auto' (auto-scroll to active), 'manual' (user controls), 'none' (no scroll)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scroll-mode",
+                "defaultValue": "'manual'"
+            },
+            "selectionAnimation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'slide' | 'fade' | 'scale' | 'none'",
+                    "resolved": "\"fade\" | \"none\" | \"scale\" | \"slide\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animation on tab selection"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selection-animation",
+                "defaultValue": "'slide'"
+            },
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LeftRight| TopBottom",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "LeftRight": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::LeftRight",
+                            "referenceLocation": "LeftRight"
+                        },
+                        "TopBottom": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::TopBottom",
+                            "referenceLocation": "TopBottom"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon position: 'start', 'end', 'top', 'bottom'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-position",
+                "defaultValue": "'left'"
+            },
+            "iconOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show only icons (hide titles)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-only",
+                "defaultValue": "false"
+            },
+            "scrollButtonPlacement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'split' | 'start' | 'end'",
+                    "resolved": "\"end\" | \"split\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Scroll button placement: 'split' (ends), 'start' (both left/top), 'end' (both right/bottom)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scroll-button-placement",
+                "defaultValue": "'split'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'line' | 'card' | 'pill' | 'subtle' | 'glass' | 'folder' | 'enclosed' | 'slanted' | 'minimal' | 'elastic' | 'sidebar'",
+                    "resolved": "\"card\" | \"elastic\" | \"enclosed\" | \"folder\" | \"glass\" | \"line\" | \"minimal\" | \"pill\" | \"sidebar\" | \"slanted\" | \"subtle\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tab variant style"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'line'"
+            },
+            "activeColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom active/indicator color (sets --tab-active-color). Accepts any CSS color value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-color",
+                "defaultValue": "''"
+            },
+            "indicatorStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'line' | 'capsule' | 'dot' | 'glow' | 'bold' | 'none'",
+                    "resolved": "\"bold\" | \"capsule\" | \"dot\" | \"glow\" | \"line\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selection indicator shape \u2014 applies to variants that use a sliding bar (line, minimal).\r\n- line    \u2014 default 4px bar\r\n- capsule \u2014 pill-rounded fat bar\r\n- dot     \u2014 centred dot\r\n- glow    \u2014 soft blur glow bar\r\n- bold    \u2014 extra-thick bar\r\n- none    \u2014 no indicator"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indicator-style",
+                "defaultValue": "'line'"
+            },
+            "indicatorGradient": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional gradient for the indicator bar.\r\nAccepts any CSS gradient string, e.g. \"linear-gradient(90deg,#ec4899,#8b5cf6)\".\r\nWhen set, overrides activeColor on the indicator (activeColor still affects text & active bg).\r\nLeave empty to use the solid activeColor."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indicator-gradient",
+                "defaultValue": "''"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComponentSize",
+                    "resolved": "\"default\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\" | \"xxxl\" | \"xxxs\"",
+                    "references": {
+                        "ComponentSize": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::ComponentSize",
+                            "referenceLocation": "ComponentSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tab size: xs | sm | md | lg | xl"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "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 for icons"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-library",
+                "defaultValue": "'default'"
+            },
+            "lazy": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, non-active tab panels are not mounted until first activated (content-based tabs only)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "lazy",
+                "defaultValue": "false"
+            },
+            "isDraggable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable drag-and-drop to reorder tabs"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-draggable",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeTab": {},
+            "parsedItems": {},
+            "activeMenuTab": {},
+            "showScrollButtons": {},
+            "isTabListOpen": {},
+            "tabListPosition": {},
+            "tabListSearch": {},
+            "activeMenuPosition": {},
+            "editingTab": {},
+            "draggingTabId": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tabChange",
+                "name": "tabChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "TabChangeEvent",
+                    "resolved": "TabChangeEvent",
+                    "references": {
+                        "TabChangeEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tabs/types.ts::TabChangeEvent",
+                            "referenceLocation": "TabChangeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "tabClose",
+                "name": "tabClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "closeAll",
+                "name": "closeAll",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tabEdit",
+                "name": "tabEdit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "tabDelete",
+                "name": "tabDelete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "tabOpenPanel",
+                "name": "tabOpenPanel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "tabsReordered",
+                "name": "tabsReordered",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "TabItem[]",
+                    "resolved": "TabItem[]",
+                    "references": {
+                        "TabItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/tabs/types.ts::TabItem",
+                            "referenceLocation": "TabItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "tabUpdate",
+                "name": "tabUpdate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ id: string, title: string }",
+                    "resolved": "{ id: string; title: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "selectTabById": {
+                "complexType": {
+                    "signature": "(tabId: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "tabId",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getActiveTab": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "destroyComponent": {
+                "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": "items",
+                "methodName": "parseItems"
+            }, {
+                "propName": "defaultActive",
+                "methodName": "onDefaultActiveChange"
+            }, {
+                "propName": "activeTab",
+                "methodName": "onActiveTabChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "scroll",
+                "method": "handleScroll",
+                "target": "window",
+                "capture": true,
+                "passive": true
+            }, {
+                "name": "resize",
+                "method": "handleScroll",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "click",
+                "method": "handleWindowClick",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}