tyrell-components 1.0.0-TC52 → 1.0.0-TC54

package/lib/components/tabs.js

@@ -2,580 +2,578 @@ import { ensureStyles } from '../utils/styles.js';
 import { tabsStyles } from '../styles/tabs.js';
 const eventHandlers = new WeakMap();
 const resizeObservers = new WeakMap();
+const pendingInitialSnap = new WeakSet();
 function getTabsAttributes(el) {
-    return {
-        width: el.getAttribute('width') || '100%',
-        height: el.getAttribute('height') || '400px',
-        active: el.getAttribute('active'),
-        placement: (el.getAttribute('placement') || 'top'),
-        fixed: el.hasAttribute('fixed'),
-    };
+return {
+width: el.getAttribute('width') || '100%',
+height: el.getAttribute('height') || '400px',
+active: el.getAttribute('active'),
+placement: (el.getAttribute('placement') || 'top'),
+fixed: el.hasAttribute('fixed'),
+};
 }
 function getChildTabs(el) {
-    return Array.from(el.querySelectorAll('ty-tab'));
+return Array.from(el.querySelectorAll('ty-tab'));
 }
 function getTabId(tab) {
-    return tab.getAttribute('id');
+return tab.getAttribute('id');
 }
 function getSlotLabel(tabsEl, tabId) {
-    return tabsEl.querySelector(`:scope > [slot='label-${tabId}']`);
+return tabsEl.querySelector(`:scope > [slot='label-${tabId}']`);
 }
 function hasSlotLabel(tabsEl, tabId) {
-    return getSlotLabel(tabsEl, tabId) !== null;
+return getSlotLabel(tabsEl, tabId) !== null;
 }
 function getTabLabelType(tabsEl, tab) {
-    const tabId = getTabId(tab);
-    if (tabId && hasSlotLabel(tabsEl, tabId)) {
-        return 'slot';
-    }
-    return 'text';
+const tabId = getTabId(tab);
+if (tabId && hasSlotLabel(tabsEl, tabId)) {
+return 'slot';
+}
+return 'text';
 }
 function isTabDisabled(tab) {
-    return tab.hasAttribute('disabled');
+return tab.hasAttribute('disabled');
 }
 function hasCustomMarker(el) {
-    return el.querySelector('[slot="marker"]') !== null;
+return el.querySelector('[slot="marker"]') !== null;
 }
 function findTabIndex(tabs, tabId) {
-    const index = tabs.findIndex(tab => getTabId(tab) === tabId);
-    return index >= 0 ? index : undefined;
+const index = tabs.findIndex(tab => getTabId(tab) === tabId);
+return index >= 0 ? index : undefined;
 }
 function getActiveTabId(el, tabs) {
-    const activeAttr = el.getAttribute('active');
-    if (activeAttr && findTabIndex(tabs, activeAttr) !== undefined) {
-        return activeAttr;
-    }
-    if (tabs.length > 0) {
-        return getTabId(tabs[0]);
-    }
-    return null;
+const activeAttr = el.getAttribute('active');
+if (activeAttr && findTabIndex(tabs, activeAttr) !== undefined) {
+return activeAttr;
+}
+if (tabs.length > 0) {
+return getTabId(tabs[0]);
+}
+return null;
 }
 function setActiveTab(el, tabId) {
-    el.setAttribute('active', tabId);
+el.setAttribute('active', tabId);
 }
 function dispatchTabChangeEvent(el, activeId, activeIndex, previousId, previousIndex) {
-    const event = new CustomEvent('ty-tab-change', {
-        detail: {
-            activeId,
-            activeIndex,
-            previousId,
-            previousIndex,
-        },
-        bubbles: true,
-        cancelable: false,
-    });
-    el.dispatchEvent(event);
+const event = new CustomEvent('ty-tab-change', {
+detail: {
+activeId,
+activeIndex,
+previousId,
+previousIndex,
+},
+bubbles: true,
+cancelable: false,
+});
+el.dispatchEvent(event);
 }
 function handleTabClick(el, tabId, event) {
-    event.preventDefault();
-    event.stopPropagation();
-    setActiveTab(el, tabId);
+event.preventDefault();
+event.stopPropagation();
+setActiveTab(el, tabId);
 }
 function cleanupEventListeners(el) {
-    const handlers = eventHandlers.get(el);
-    if (!handlers)
-        return;
-    const shadowRoot = el.shadowRoot;
-    if (!shadowRoot)
-        return;
-    handlers.tabClickHandlers.forEach((handler, tabId) => {
-        const button = shadowRoot.querySelector(`[data-tab-id='${tabId}']`);
-        if (button) {
-            button.removeEventListener('pointerdown', handler);
-        }
-    });
-    handlers.tabKeyClickHandlers.forEach((handler, tabId) => {
-        const button = shadowRoot.querySelector(`[data-tab-id='${tabId}']`);
-        if (button) {
-            button.removeEventListener('click', handler);
-        }
-    });
-    handlers.tabClickHandlers.clear();
-    handlers.tabKeyClickHandlers.clear();
+const handlers = eventHandlers.get(el);
+if (!handlers)
+return;
+const shadowRoot = el.shadowRoot;
+if (!shadowRoot)
+return;
+handlers.tabClickHandlers.forEach((handler, tabId) => {
+const button = shadowRoot.querySelector(`[data-tab-id='${tabId}']`);
+if (button) {
+button.removeEventListener('pointerdown', handler);
+}
+});
+handlers.tabKeyClickHandlers.forEach((handler, tabId) => {
+const button = shadowRoot.querySelector(`[data-tab-id='${tabId}']`);
+if (button) {
+button.removeEventListener('click', handler);
+}
+});
+handlers.tabClickHandlers.clear();
+handlers.tabKeyClickHandlers.clear();
 }
 function setupEventListeners(el, shadowRoot, tabs) {
-    cleanupEventListeners(el);
-    const handlers = {
-        tabClickHandlers: new Map(),
-        tabKeyClickHandlers: new Map(),
-    };
-    tabs.forEach((tab) => {
-        const tabId = getTabId(tab);
-        if (!tabId)
-            return;
-        const button = shadowRoot.querySelector(`[data-tab-id='${tabId}']`);
-        if (button) {
-            const handler = (e) => handleTabClick(el, tabId, e);
-            const keyClickHandler = (e) => {
-                if (e.detail === 0)
-                    handleTabClick(el, tabId, e);
-            };
-            button.addEventListener('pointerdown', handler);
-            button.addEventListener('click', keyClickHandler);
-            handlers.tabClickHandlers.set(tabId, handler);
-            handlers.tabKeyClickHandlers.set(tabId, keyClickHandler);
-        }
-    });
-    eventHandlers.set(el, handlers);
+cleanupEventListeners(el);
+const handlers = {
+tabClickHandlers: new Map(),
+tabKeyClickHandlers: new Map(),
+};
+tabs.forEach((tab) => {
+const tabId = getTabId(tab);
+if (!tabId)
+return;
+const button = shadowRoot.querySelector(`[data-tab-id='${tabId}']`);
+if (button) {
+const handler = (e) => handleTabClick(el, tabId, e);
+const keyClickHandler = (e) => {
+if (e.detail === 0)
+handleTabClick(el, tabId, e);
+};
+button.addEventListener('pointerdown', handler);
+button.addEventListener('click', keyClickHandler);
+handlers.tabClickHandlers.set(tabId, handler);
+handlers.tabKeyClickHandlers.set(tabId, keyClickHandler);
+}
+});
+eventHandlers.set(el, handlers);
 }
 function updateTransform(el, activeIndex) {
-    const shadowRoot = el.shadowRoot;
-    if (!shadowRoot)
-        return;
-    const panelsWrapper = shadowRoot.querySelector('.panels-wrapper');
-    if (!panelsWrapper)
-        return;
-    const containerWidth = el.offsetWidth;
-    const offsetPx = activeIndex * containerWidth;
-    panelsWrapper.style.transform = `translateX(-${offsetPx}px)`;
+const shadowRoot = el.shadowRoot;
+if (!shadowRoot)
+return;
+const panelsWrapper = shadowRoot.querySelector('.panels-wrapper');
+if (!panelsWrapper)
+return;
+const containerWidth = el.offsetWidth;
+const offsetPx = activeIndex * containerWidth;
+panelsWrapper.style.transform = `translateX(-${offsetPx}px)`;
 }
 function updateAriaAttributes(el, shadowRoot, activeId) {
-    const tabs = getChildTabs(el);
-    tabs.forEach((tab, idx) => {
-        const tabId = getTabId(tab);
-        if (!tabId)
-            return;
-        const button = shadowRoot.querySelector(`[data-tab-id='${tabId}']`);
-        const isActive = tabId === activeId;
-        if (button) {
-            button.setAttribute('aria-selected', String(isActive));
-            button.setAttribute('tabindex', isActive ? '0' : '-1');
-            button.setAttribute('data-active', String(isActive));
-            const slottedLabel = getSlotLabel(el, tabId);
-            if (slottedLabel) {
-                slottedLabel.setAttribute('data-active', String(isActive));
-            }
-        }
-    });
+const tabs = getChildTabs(el);
+tabs.forEach((tab, idx) => {
+const tabId = getTabId(tab);
+if (!tabId)
+return;
+const button = shadowRoot.querySelector(`[data-tab-id='${tabId}']`);
+const isActive = tabId === activeId;
+if (button) {
+button.setAttribute('aria-selected', String(isActive));
+button.setAttribute('tabindex', isActive ? '0' : '-1');
+button.setAttribute('data-active', String(isActive));
+const slottedLabel = getSlotLabel(el, tabId);
+if (slottedLabel) {
+slottedLabel.setAttribute('data-active', String(isActive));
+}
+}
+});
 }
 function updatePanelInteraction(el, activeId) {
-    const tabs = getChildTabs(el);
-    tabs.forEach((tab) => {
-        const tabId = getTabId(tab);
-        if (!tabId)
-            return;
-        const isActive = tabId === activeId;
-        tab.setAttribute('data-active', String(isActive));
-        if (isActive) {
-            tab.style.pointerEvents = 'auto';
-            tab.style.opacity = '1';
-        }
-        else {
-            tab.style.pointerEvents = 'none';
-            tab.style.opacity = '0';
-        }
-    });
+const tabs = getChildTabs(el);
+tabs.forEach((tab) => {
+const tabId = getTabId(tab);
+if (!tabId)
+return;
+const isActive = tabId === activeId;
+tab.setAttribute('data-active', String(isActive));
+if (isActive) {
+tab.style.pointerEvents = 'auto';
+tab.style.opacity = '1';
+}
+else {
+tab.style.pointerEvents = 'none';
+tab.style.opacity = '0';
+}
+});
 }
 function calculateMarkerPosition(el, shadowRoot, activeId) {
-    const button = shadowRoot.querySelector(`[data-tab-id='${activeId}']`);
-    const buttonsContainer = shadowRoot.querySelector('.tab-buttons');
-    if (!button || !buttonsContainer)
-        return null;
-    const buttonRect = button.getBoundingClientRect();
-    const left = button.offsetLeft;
-    const top = button.offsetTop;
-    return {
-        left,
-        top,
-        width: buttonRect.width,
-        height: buttonRect.height,
-    };
-}
-function updateMarker(el, activeId) {
-    const shadowRoot = el.shadowRoot;
-    if (!shadowRoot)
-        return;
-    const marker = shadowRoot.querySelector('.marker-wrapper');
-    if (!marker)
-        return;
-    const position = calculateMarkerPosition(el, shadowRoot, activeId);
-    if (!position)
-        return;
-    const snap = !marker.style.left || marker.offsetWidth === 0;
-    if (snap)
-        marker.style.transition = 'none';
-    marker.style.left = `${position.left}px`;
-    marker.style.top = `${position.top}px`;
-    marker.style.width = `${position.width}px`;
-    marker.style.height = `${position.height}px`;
-    if (snap) {
-        marker.offsetWidth;
-        marker.style.transition = '';
-    }
+const button = shadowRoot.querySelector(`[data-tab-id='${activeId}']`);
+const buttonsContainer = shadowRoot.querySelector('.tab-buttons');
+if (!button || !buttonsContainer)
+return null;
+const left = button.offsetLeft;
+const top = button.offsetTop;
+const width = button.offsetWidth;
+const height = button.offsetHeight;
+return { left, top, width, height };
+}
+function updateMarker(el, activeId, forceSnap = false) {
+const shadowRoot = el.shadowRoot;
+if (!shadowRoot)
+return;
+const marker = shadowRoot.querySelector('.marker-wrapper');
+if (!marker)
+return;
+const position = calculateMarkerPosition(el, shadowRoot, activeId);
+if (!position)
+return;
+const snap = forceSnap || !marker.style.left || marker.offsetWidth === 0;
+if (snap)
+marker.style.transition = 'none';
+marker.style.left = `${position.left}px`;
+marker.style.top = `${position.top}px`;
+marker.style.width = `${position.width}px`;
+marker.style.height = `${position.height}px`;
+if (snap) {
+marker.offsetWidth;
+marker.style.transition = '';
+}
 }
 function updateActiveTabState(el, tabId, previousId) {
-    const tabs = getChildTabs(el);
-    const shadowRoot = el.shadowRoot;
-    if (!shadowRoot)
-        return;
-    const currentIndex = previousId ? findTabIndex(tabs, previousId) : undefined;
-    const newIndex = findTabIndex(tabs, tabId);
-    if (previousId === tabId || newIndex === undefined)
-        return;
-    el.style.setProperty('--active-index', String(newIndex));
-    updateTransform(el, newIndex);
-    updateAriaAttributes(el, shadowRoot, tabId);
-    updatePanelInteraction(el, tabId);
-    updateMarker(el, tabId);
-    shadowRoot.querySelectorAll('.tab-overflow-item').forEach((item) => {
-        item.setAttribute('data-active', String(item.dataset.tabId === tabId));
-    });
-    const newPanel = tabs[newIndex];
-    if (newPanel?.resetScroll) {
-        newPanel.resetScroll();
-    }
-    dispatchTabChangeEvent(el, tabId, newIndex, previousId, currentIndex ?? null);
+const tabs = getChildTabs(el);
+const shadowRoot = el.shadowRoot;
+if (!shadowRoot)
+return;
+const currentIndex = previousId ? findTabIndex(tabs, previousId) : undefined;
+const newIndex = findTabIndex(tabs, tabId);
+if (previousId === tabId || newIndex === undefined)
+return;
+el.style.setProperty('--active-index', String(newIndex));
+updateTransform(el, newIndex);
+updateAriaAttributes(el, shadowRoot, tabId);
+updatePanelInteraction(el, tabId);
+updateMarker(el, tabId, pendingInitialSnap.delete(el));
+shadowRoot.querySelectorAll('.tab-overflow-item').forEach((item) => {
+item.setAttribute('data-active', String(item.dataset.tabId === tabId));
+});
+const newPanel = tabs[newIndex];
+if (newPanel?.resetScroll) {
+newPanel.resetScroll();
+}
+dispatchTabChangeEvent(el, tabId, newIndex, previousId, currentIndex ?? null);
 }
 function setupResizeObserver(el) {
-    const oldObserver = resizeObservers.get(el);
-    if (oldObserver) {
-        oldObserver.disconnect();
-    }
-    const observer = new ResizeObserver((entries) => {
-        const entry = entries[0];
-        const { width } = getTabsAttributes(el);
-        const tabs = getChildTabs(el);
-        const activeId = getActiveTabId(el, tabs);
-        const activeIndex = activeId ? findTabIndex(tabs, activeId) : 0;
-        if (width.includes('%')) {
-            el.style.setProperty('--tabs-page-width', `${entry.contentRect.width}px`);
-        }
-        if (activeIndex !== undefined) {
-            updateTransform(el, activeIndex);
-        }
-        updateOverflow(el);
-        if (activeId) {
-            updateMarker(el, activeId);
-            scrollActiveIntoView(el, activeId, false);
-        }
-    });
-    observer.observe(el);
-    resizeObservers.set(el, observer);
+const oldObserver = resizeObservers.get(el);
+if (oldObserver) {
+oldObserver.disconnect();
+}
+const observer = new ResizeObserver((entries) => {
+const entry = entries[0];
+const { width } = getTabsAttributes(el);
+const tabs = getChildTabs(el);
+const activeId = getActiveTabId(el, tabs);
+const activeIndex = activeId ? findTabIndex(tabs, activeId) : 0;
+if (width.includes('%')) {
+el.style.setProperty('--tabs-page-width', `${entry.contentRect.width}px`);
+}
+if (activeIndex !== undefined) {
+updateTransform(el, activeIndex);
+}
+updateOverflow(el);
+if (activeId) {
+updateMarker(el, activeId);
+scrollActiveIntoView(el, activeId, false);
+}
+});
+observer.observe(el);
+resizeObservers.set(el, observer);
 }
 function cleanupResizeObserver(el) {
-    const observer = resizeObservers.get(el);
-    if (observer) {
-        observer.disconnect();
-        resizeObservers.delete(el);
-    }
+const observer = resizeObservers.get(el);
+if (observer) {
+observer.disconnect();
+resizeObservers.delete(el);
+}
 }
 function renderTabButtons(tabsEl, tabs, activeId) {
-    const buttons = tabs.map((tab) => {
-        const tabId = getTabId(tab);
-        if (!tabId)
-            return '';
-        const labelType = getTabLabelType(tabsEl, tab);
-        const textLabel = labelType === 'text' ? (tab.getAttribute('label') || 'Tab') : '';
-        const disabled = isTabDisabled(tab);
-        const active = tabId === activeId;
-        return `<button
-      class="tab-button"
-      role="tab"
-      data-tab-id="${tabId}"
-      id="tab-${tabId}"
-      aria-selected="${active}"
-      tabindex="${active ? '0' : '-1'}"
-      data-active="${active}"
-      ${disabled ? 'disabled aria-disabled="true"' : ''}
-    >
-      ${labelType === 'slot' ? `<slot name="label-${tabId}"></slot>` : `<span class="tab-label">${textLabel}</span>`}
-    </button>`;
-    }).join('');
-    return `
-    <div class="tab-buttons" role="tablist" part="buttons-container">
-      <div class="tab-strip" part="strip">
-        <div class="marker-wrapper" part="marker-wrapper">
-          ${!hasCustomMarker(tabsEl) ? '<div class="default-marker"></div>' : ''}
-          <slot name="marker"></slot>
-        </div>
-        ${buttons}
-      </div>
-    </div>
-  `;
+const buttons = tabs.map((tab) => {
+const tabId = getTabId(tab);
+if (!tabId)
+return '';
+const labelType = getTabLabelType(tabsEl, tab);
+const textLabel = labelType === 'text' ? (tab.getAttribute('label') || 'Tab') : '';
+const disabled = isTabDisabled(tab);
+const active = tabId === activeId;
+return `<button
+class="tab-button"
+role="tab"
+data-tab-id="${tabId}"
+id="tab-${tabId}"
+aria-selected="${active}"
+tabindex="${active ? '0' : '-1'}"
+data-active="${active}"
+${disabled ? 'disabled aria-disabled="true"' : ''}
+>
+${labelType === 'slot' ? `<slot name="label-${tabId}"></slot>` : `<span class="tab-label">${textLabel}</span>`}
+</button>`;
+}).join('');
+return `
+<div class="tab-buttons" role="tablist" part="buttons-container">
+<div class="tab-strip" part="strip">
+<div class="marker-wrapper" part="marker-wrapper">
+${!hasCustomMarker(tabsEl) ? '<div class="default-marker"></div>' : ''}
+<slot name="marker"></slot>
+</div>
+${buttons}
+</div>
+</div>
+`;
 }
 function renderButtonsOnly(tabsEl, tabs, activeId) {
-    return tabs.map((tab) => {
-        const tabId = getTabId(tab);
-        if (!tabId)
-            return '';
-        const labelType = getTabLabelType(tabsEl, tab);
-        const textLabel = labelType === 'text' ? (tab.getAttribute('label') || 'Tab') : '';
-        const disabled = isTabDisabled(tab);
-        const active = tabId === activeId;
-        return `<button
-      class="tab-button"
-      role="tab"
-      data-tab-id="${tabId}"
-      id="tab-${tabId}"
-      aria-selected="${active}"
-      tabindex="${active ? '0' : '-1'}"
-      data-active="${active}"
-      ${disabled ? 'disabled aria-disabled="true"' : ''}
-    >
-      ${labelType === 'slot' ? `<slot name="label-${tabId}"></slot>` : `<span class="tab-label">${textLabel}</span>`}
-    </button>`;
-    }).join('');
+return tabs.map((tab) => {
+const tabId = getTabId(tab);
+if (!tabId)
+return '';
+const labelType = getTabLabelType(tabsEl, tab);
+const textLabel = labelType === 'text' ? (tab.getAttribute('label') || 'Tab') : '';
+const disabled = isTabDisabled(tab);
+const active = tabId === activeId;
+return `<button
+class="tab-button"
+role="tab"
+data-tab-id="${tabId}"
+id="tab-${tabId}"
+aria-selected="${active}"
+tabindex="${active ? '0' : '-1'}"
+data-active="${active}"
+${disabled ? 'disabled aria-disabled="true"' : ''}
+>
+${labelType === 'slot' ? `<slot name="label-${tabId}"></slot>` : `<span class="tab-label">${textLabel}</span>`}
+</button>`;
+}).join('');
 }
 function getTabMenuLabel(tabsEl, tab) {
-    const tabId = getTabId(tab);
-    if (tabId && getTabLabelType(tabsEl, tab) === 'slot') {
-        const slotted = getSlotLabel(tabsEl, tabId);
-        return slotted?.textContent?.trim() || tabId;
-    }
-    return tab.getAttribute('label') || 'Tab';
+const tabId = getTabId(tab);
+if (tabId && getTabLabelType(tabsEl, tab) === 'slot') {
+const slotted = getSlotLabel(tabsEl, tabId);
+return slotted?.textContent?.trim() || tabId;
+}
+return tab.getAttribute('label') || 'Tab';
 }
 function removeOverflowMenu(shadowRoot) {
-    shadowRoot.querySelector('.tab-overflow-trigger')?.remove();
+shadowRoot.querySelector('.tab-overflow-trigger')?.remove();
 }
 function renderOverflowMenu(el, container, allTabs) {
-    const activeId = getActiveTabId(el, allTabs);
-    const trigger = document.createElement('button');
-    trigger.className = 'tab-overflow-trigger';
-    trigger.type = 'button';
-    trigger.setAttribute('aria-label', `${allTabs.length} tabs`);
-    trigger.textContent = '⋯';
-    const popup = document.createElement('ty-popup');
-    popup.setAttribute('placement', 'bottom');
-    const menu = document.createElement('div');
-    menu.className = 'tab-overflow-menu';
-    menu.setAttribute('role', 'menu');
-    allTabs.forEach((tab) => {
-        const tabId = getTabId(tab);
-        if (!tabId)
-            return;
-        const item = document.createElement('button');
-        item.type = 'button';
-        item.className = 'tab-overflow-item';
-        item.setAttribute('role', 'menuitem');
-        item.setAttribute('data-tab-id', tabId);
-        item.setAttribute('data-active', String(tabId === activeId));
-        item.textContent = getTabMenuLabel(el, tab);
-        if (isTabDisabled(tab)) {
-            item.disabled = true;
-        }
-        else {
-            item.addEventListener('click', () => {
-                setActiveTab(el, tabId);
-                popup.closePopup?.();
-            });
-        }
-        menu.appendChild(item);
-    });
-    popup.appendChild(menu);
-    trigger.appendChild(popup);
-    container.appendChild(trigger);
+const activeId = getActiveTabId(el, allTabs);
+const trigger = document.createElement('button');
+trigger.className = 'tab-overflow-trigger';
+trigger.type = 'button';
+trigger.setAttribute('aria-label', `${allTabs.length} tabs`);
+trigger.textContent = '⋯';
+const popup = document.createElement('ty-popup');
+popup.setAttribute('placement', 'bottom');
+const menu = document.createElement('div');
+menu.className = 'tab-overflow-menu';
+menu.setAttribute('role', 'menu');
+allTabs.forEach((tab) => {
+const tabId = getTabId(tab);
+if (!tabId)
+return;
+const item = document.createElement('button');
+item.type = 'button';
+item.className = 'tab-overflow-item';
+item.setAttribute('role', 'menuitem');
+item.setAttribute('data-tab-id', tabId);
+item.setAttribute('data-active', String(tabId === activeId));
+item.textContent = getTabMenuLabel(el, tab);
+if (isTabDisabled(tab)) {
+item.disabled = true;
+}
+else {
+item.addEventListener('click', () => {
+setActiveTab(el, tabId);
+popup.closePopup?.();
+});
+}
+menu.appendChild(item);
+});
+popup.appendChild(menu);
+trigger.appendChild(popup);
+container.appendChild(trigger);
 }
 function updateOverflow(el) {
-    const shadowRoot = el.shadowRoot;
-    if (!shadowRoot)
-        return;
-    const container = shadowRoot.querySelector('.tab-buttons');
-    const strip = shadowRoot.querySelector('.tab-strip');
-    if (!container || !strip)
-        return;
-    if (getTabsAttributes(el).fixed) {
-        removeOverflowMenu(shadowRoot);
-        strip.classList.add('unclipped');
-        strip.style.removeProperty('--fade-left');
-        strip.style.removeProperty('--fade-right');
-        return;
-    }
-    const savedScrollLeft = strip.scrollLeft;
-    removeOverflowMenu(shadowRoot);
-    if (strip.clientWidth <= 0)
-        return;
-    const buttons = strip.querySelectorAll('.tab-button');
-    const last = buttons[buttons.length - 1];
-    const contentWidth = last ? last.offsetLeft + last.offsetWidth : 0;
-    const stripWidth = strip.clientWidth;
-    const hidden = contentWidth - stripWidth;
-    strip.classList.toggle('unclipped', hidden <= 1);
-    if (hidden <= 1) {
-        strip.scrollLeft = savedScrollLeft;
-        updateEdgeFades(strip);
-        return;
-    }
-    renderOverflowMenu(el, container, getChildTabs(el));
-    const triggerCost = container.clientWidth - strip.clientWidth;
-    if (hidden <= triggerCost) {
-        removeOverflowMenu(shadowRoot);
-    }
-    strip.scrollLeft = savedScrollLeft;
-    updateEdgeFades(strip);
+const shadowRoot = el.shadowRoot;
+if (!shadowRoot)
+return;
+const container = shadowRoot.querySelector('.tab-buttons');
+const strip = shadowRoot.querySelector('.tab-strip');
+if (!container || !strip)
+return;
+if (getTabsAttributes(el).fixed) {
+removeOverflowMenu(shadowRoot);
+strip.classList.add('unclipped');
+strip.style.removeProperty('--fade-left');
+strip.style.removeProperty('--fade-right');
+return;
+}
+const savedScrollLeft = strip.scrollLeft;
+removeOverflowMenu(shadowRoot);
+if (strip.clientWidth <= 0)
+return;
+const buttons = strip.querySelectorAll('.tab-button');
+const last = buttons[buttons.length - 1];
+const contentWidth = last ? last.offsetLeft + last.offsetWidth : 0;
+const stripWidth = strip.clientWidth;
+const hidden = contentWidth - stripWidth;
+strip.classList.toggle('unclipped', hidden <= 1);
+if (hidden <= 1) {
+strip.scrollLeft = savedScrollLeft;
+updateEdgeFades(strip);
+return;
+}
+renderOverflowMenu(el, container, getChildTabs(el));
+const triggerCost = container.clientWidth - strip.clientWidth;
+if (hidden <= triggerCost) {
+removeOverflowMenu(shadowRoot);
+}
+strip.scrollLeft = savedScrollLeft;
+updateEdgeFades(strip);
 }
 function updateEdgeFades(strip) {
-    const maxScroll = strip.scrollWidth - strip.clientWidth;
-    const fade = (distance) => `${distance > 1 ? Math.min(28, distance) : 0}px`;
-    strip.style.setProperty('--fade-left', fade(strip.scrollLeft));
-    strip.style.setProperty('--fade-right', fade(maxScroll - strip.scrollLeft));
+const maxScroll = strip.scrollWidth - strip.clientWidth;
+const fade = (distance) => `${distance > 1 ? Math.min(28, distance) : 0}px`;
+strip.style.setProperty('--fade-left', fade(strip.scrollLeft));
+strip.style.setProperty('--fade-right', fade(maxScroll - strip.scrollLeft));
 }
 function scrollActiveIntoView(el, activeId, smooth) {
-    const shadowRoot = el.shadowRoot;
-    if (!shadowRoot)
-        return;
-    const strip = shadowRoot.querySelector('.tab-strip');
-    const button = shadowRoot.querySelector(`[data-tab-id='${activeId}']`);
-    if (!strip || !button || strip.clientWidth <= 0)
-        return;
-    const centered = button.offsetLeft + button.offsetWidth / 2 - strip.clientWidth / 2;
-    const target = Math.max(0, Math.min(centered, strip.scrollWidth - strip.clientWidth));
-    if (Math.round(target) !== Math.round(strip.scrollLeft)) {
-        const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-        strip.scrollTo({ left: target, behavior: smooth && !reduce ? 'smooth' : 'auto' });
-    }
+const shadowRoot = el.shadowRoot;
+if (!shadowRoot)
+return;
+const strip = shadowRoot.querySelector('.tab-strip');
+const button = shadowRoot.querySelector(`[data-tab-id='${activeId}']`);
+if (!strip || !button || strip.clientWidth <= 0)
+return;
+const centered = button.offsetLeft + button.offsetWidth / 2 - strip.clientWidth / 2;
+const target = Math.max(0, Math.min(centered, strip.scrollWidth - strip.clientWidth));
+if (Math.round(target) !== Math.round(strip.scrollLeft)) {
+const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+strip.scrollTo({ left: target, behavior: smooth && !reduce ? 'smooth' : 'auto' });
+}
 }
 function render(el) {
-    const shadowRoot = el.shadowRoot;
-    if (!shadowRoot)
-        return;
-    const { width, height, placement, fixed } = getTabsAttributes(el);
-    const tabs = getChildTabs(el);
-    const activeId = getActiveTabId(el, tabs);
-    const activeIndex = activeId ? (findTabIndex(tabs, activeId) ?? 0) : 0;
-    tabs.forEach((tab) => {
-        const tabId = getTabId(tab);
-        if (!tabId)
-            return;
-        tab.setAttribute('role', 'tabpanel');
-        tab.setAttribute('aria-labelledby', `tab-${tabId}`);
-        tab.setAttribute('tabindex', '0');
-    });
-    const existingContainer = shadowRoot.querySelector('.tabs-container');
-    const existingButtons = shadowRoot.querySelector('.tab-buttons');
-    const existingStrip = shadowRoot.querySelector('.tab-strip');
-    const existingViewport = shadowRoot.querySelector('.panels-viewport');
-    ensureStyles(shadowRoot, { css: tabsStyles, id: 'ty-tabs' });
-    el.style.setProperty('--tabs-width', width.includes('%') ? '100%' : width);
-    el.style.setProperty('--tabs-height', height);
-    el.style.setProperty('--active-index', String(activeIndex));
-    if (existingContainer && existingButtons && existingStrip && existingViewport) {
-        existingContainer.setAttribute('data-placement', placement);
-        existingContainer.toggleAttribute('data-fixed', fixed);
-        const savedScrollLeft = existingStrip.scrollLeft;
-        existingButtons.querySelector('.tab-overflow-trigger')?.remove();
-        const allButtons = existingStrip.querySelectorAll('.tab-button');
-        allButtons.forEach(button => button.remove());
-        const buttonsHtml = renderButtonsOnly(el, tabs, activeId);
-        const tempDiv = document.createElement('div');
-        tempDiv.innerHTML = buttonsHtml;
-        Array.from(tempDiv.children).forEach(button => {
-            existingStrip.appendChild(button);
-        });
-        existingStrip.scrollLeft = savedScrollLeft;
-        setupEventListeners(el, shadowRoot, tabs);
-        updateAriaAttributes(el, shadowRoot, activeId || '');
-        requestAnimationFrame(() => {
-            const buttons = shadowRoot.querySelector('.tab-buttons');
-            if (buttons) {
-                const buttonsHeight = buttons.offsetHeight;
-                el.style.setProperty('--buttons-height', `${buttonsHeight}px`);
-            }
-            updateTransform(el, activeIndex);
-            updateOverflow(el);
-            if (activeId) {
-                updateMarker(el, activeId);
-                scrollActiveIntoView(el, activeId, true);
-            }
-        });
-        if (activeId) {
-            updatePanelInteraction(el, activeId);
-        }
-    }
-    else {
-        shadowRoot.innerHTML = `
-      <div class="tabs-container" data-placement="${placement}"${fixed ? ' data-fixed' : ''}>
-        ${renderTabButtons(el, tabs, activeId)}
-        <div class="panels-viewport" part="panels-container">
-          <div class="panels-wrapper">
-            <slot></slot>
-          </div>
-        </div>
-      </div>
-    `;
-        requestAnimationFrame(() => {
-            const buttons = shadowRoot.querySelector('.tab-buttons');
-            if (buttons) {
-                const buttonsHeight = buttons.offsetHeight;
-                el.style.setProperty('--buttons-height', `${buttonsHeight}px`);
-            }
-            updateTransform(el, activeIndex);
-            updateOverflow(el);
-            if (activeId) {
-                updateMarker(el, activeId);
-                scrollActiveIntoView(el, activeId, false);
-            }
-        });
-        setupEventListeners(el, shadowRoot, tabs);
-        updateAriaAttributes(el, shadowRoot, activeId || '');
-        setupResizeObserver(el);
-        const strip = shadowRoot.querySelector('.tab-strip');
-        strip?.addEventListener('scroll', () => updateEdgeFades(strip), { passive: true });
-        if (activeId) {
-            updatePanelInteraction(el, activeId);
-        }
-        const markerSlot = shadowRoot.querySelector('slot[name="marker"]');
-        if (markerSlot) {
-            const updateDefaultMarkerVisibility = () => {
-                const defaultMarker = shadowRoot.querySelector('.default-marker');
-                if (defaultMarker) {
-                    const hasCustom = markerSlot.assignedElements().length > 0;
-                    defaultMarker.style.display = hasCustom ? 'none' : '';
-                }
-            };
-            markerSlot.addEventListener('slotchange', updateDefaultMarkerVisibility);
-            updateDefaultMarkerVisibility();
-        }
-    }
+const shadowRoot = el.shadowRoot;
+if (!shadowRoot)
+return;
+const { width, height, placement, fixed } = getTabsAttributes(el);
+const tabs = getChildTabs(el);
+const activeId = getActiveTabId(el, tabs);
+const activeIndex = activeId ? (findTabIndex(tabs, activeId) ?? 0) : 0;
+tabs.forEach((tab) => {
+const tabId = getTabId(tab);
+if (!tabId)
+return;
+tab.setAttribute('role', 'tabpanel');
+tab.setAttribute('aria-labelledby', `tab-${tabId}`);
+tab.setAttribute('tabindex', '0');
+});
+const existingContainer = shadowRoot.querySelector('.tabs-container');
+const existingButtons = shadowRoot.querySelector('.tab-buttons');
+const existingStrip = shadowRoot.querySelector('.tab-strip');
+const existingViewport = shadowRoot.querySelector('.panels-viewport');
+ensureStyles(shadowRoot, { css: tabsStyles, id: 'ty-tabs' });
+el.style.setProperty('--tabs-width', width.includes('%') ? '100%' : width);
+el.style.setProperty('--tabs-height', height);
+el.style.setProperty('--active-index', String(activeIndex));
+if (existingContainer && existingButtons && existingStrip && existingViewport) {
+existingContainer.setAttribute('data-placement', placement);
+existingContainer.toggleAttribute('data-fixed', fixed);
+const savedScrollLeft = existingStrip.scrollLeft;
+existingButtons.querySelector('.tab-overflow-trigger')?.remove();
+const allButtons = existingStrip.querySelectorAll('.tab-button');
+allButtons.forEach(button => button.remove());
+const buttonsHtml = renderButtonsOnly(el, tabs, activeId);
+const tempDiv = document.createElement('div');
+tempDiv.innerHTML = buttonsHtml;
+Array.from(tempDiv.children).forEach(button => {
+existingStrip.appendChild(button);
+});
+existingStrip.scrollLeft = savedScrollLeft;
+setupEventListeners(el, shadowRoot, tabs);
+updateAriaAttributes(el, shadowRoot, activeId || '');
+requestAnimationFrame(() => {
+const buttons = shadowRoot.querySelector('.tab-buttons');
+if (buttons) {
+const buttonsHeight = buttons.offsetHeight;
+el.style.setProperty('--buttons-height', `${buttonsHeight}px`);
+}
+updateTransform(el, activeIndex);
+updateOverflow(el);
+if (activeId) {
+updateMarker(el, activeId);
+scrollActiveIntoView(el, activeId, true);
+}
+});
+if (activeId) {
+updatePanelInteraction(el, activeId);
+}
+}
+else {
+pendingInitialSnap.add(el);
+shadowRoot.innerHTML = `
+<div class="tabs-container" data-placement="${placement}"${fixed ? ' data-fixed' : ''}>
+${renderTabButtons(el, tabs, activeId)}
+<div class="panels-viewport" part="panels-container">
+<div class="panels-wrapper">
+<slot></slot>
+</div>
+</div>
+</div>
+`;
+requestAnimationFrame(() => {
+const buttons = shadowRoot.querySelector('.tab-buttons');
+if (buttons) {
+const buttonsHeight = buttons.offsetHeight;
+el.style.setProperty('--buttons-height', `${buttonsHeight}px`);
+}
+updateTransform(el, activeIndex);
+updateOverflow(el);
+if (activeId) {
+updateMarker(el, activeId);
+scrollActiveIntoView(el, activeId, false);
+}
+});
+setupEventListeners(el, shadowRoot, tabs);
+updateAriaAttributes(el, shadowRoot, activeId || '');
+setupResizeObserver(el);
+const strip = shadowRoot.querySelector('.tab-strip');
+strip?.addEventListener('scroll', () => updateEdgeFades(strip), { passive: true });
+if (activeId) {
+updatePanelInteraction(el, activeId);
+}
+const markerSlot = shadowRoot.querySelector('slot[name="marker"]');
+if (markerSlot) {
+const updateDefaultMarkerVisibility = () => {
+const defaultMarker = shadowRoot.querySelector('.default-marker');
+if (defaultMarker) {
+const hasCustom = markerSlot.assignedElements().length > 0;
+defaultMarker.style.display = hasCustom ? 'none' : '';
+}
+};
+markerSlot.addEventListener('slotchange', updateDefaultMarkerVisibility);
+updateDefaultMarkerVisibility();
+}
+}
 }
 function cleanup(el) {
-    cleanupEventListeners(el);
-    cleanupResizeObserver(el);
+cleanupEventListeners(el);
+cleanupResizeObserver(el);
 }
 export class TyTabs extends HTMLElement {
-    static get observedAttributes() {
-        return ['width', 'height', 'active', 'placement', 'fixed'];
-    }
-    constructor() {
-        super();
-        this._childObserver = null;
-        this._childRenderQueued = false;
-        this.attachShadow({ mode: 'open' });
-    }
-    connectedCallback() {
-        render(this);
-        this._childObserver = new MutationObserver(() => {
-            if (this._childRenderQueued)
-                return;
-            this._childRenderQueued = true;
-            queueMicrotask(() => {
-                this._childRenderQueued = false;
-                if (this.isConnected)
-                    render(this);
-            });
-        });
-        this._childObserver.observe(this, { childList: true });
-    }
-    disconnectedCallback() {
-        this._childObserver?.disconnect();
-        this._childObserver = null;
-        cleanup(this);
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (name === 'active') {
-            if (!newValue)
-                return;
-            if (!this.shadowRoot?.querySelector(`[data-tab-id='${newValue}']`)) {
-                render(this);
-                return;
-            }
-            updateActiveTabState(this, newValue, oldValue);
-            scrollActiveIntoView(this, newValue, true);
-        }
-        else {
-            render(this);
-        }
-    }
+static get observedAttributes() {
+return ['width', 'height', 'active', 'placement', 'fixed'];
+}
+constructor() {
+super();
+this._childObserver = null;
+this._childRenderQueued = false;
+this.attachShadow({ mode: 'open' });
+}
+connectedCallback() {
+render(this);
+this._childObserver = new MutationObserver(() => {
+if (this._childRenderQueued)
+return;
+this._childRenderQueued = true;
+queueMicrotask(() => {
+this._childRenderQueued = false;
+if (this.isConnected)
+render(this);
+});
+});
+this._childObserver.observe(this, { childList: true });
+}
+disconnectedCallback() {
+this._childObserver?.disconnect();
+this._childObserver = null;
+cleanup(this);
+}
+attributeChangedCallback(name, oldValue, newValue) {
+if (name === 'active') {
+if (!newValue)
+return;
+if (!this.shadowRoot?.querySelector(`[data-tab-id='${newValue}']`)) {
+render(this);
+return;
+}
+updateActiveTabState(this, newValue, oldValue);
+scrollActiveIntoView(this, newValue, true);
+}
+else {
+render(this);
+}
+}
 }
 if (!customElements.get('ty-tabs')) {
-    customElements.define('ty-tabs', TyTabs);
+customElements.define('ty-tabs', TyTabs);
 }