tyrell-components 1.0.0-RC13 → 1.0.0-RC15

package/lib/components/tabs.js

@@ -1,818 +1,586 @@
-/**
- * Tabs Component
- *
- * A carousel-based tabs component with smooth animations and fixed container dimensions.
- * Features horizontal sliding transitions, smart positioning marker, and independent panel scrolling.
- *
- * Features:
- * - Carousel animation with smooth sliding transitions
- * - Fixed dimensions prevent layout shift between tabs
- * - Animated marker that follows active tab button
- * - Rich label support via slots (icons, badges, custom content)
- * - Custom marker slot for complete active tab styling control
- * - Independent panel scrolling with scroll position reset
- * - ResizeObserver for responsive percentage widths
- * - Smart rendering - only updates DOM when necessary
- * - Accessibility with ARIA roles and attributes
- * - Top/bottom placement for tab buttons
- *
- * @example
- * <!-- Basic tabs with text labels -->
- * <ty-tabs width="800px" height="600px" active="general">
- *   <ty-tab id="general" label="General Settings">
- *     <div class="p-6">General content...</div>
- *   </ty-tab>
- *   <ty-tab id="advanced" label="Advanced Settings">
- *     <div class="p-6">Advanced content...</div>
- *   </ty-tab>
- * </ty-tabs>
- *
- * @example
- * <!-- Rich labels with icons and badges -->
- * <ty-tabs width="800px" height="600px">
- *   <!-- Rich label as direct child -->
- *   <span slot="label-profile" class="flex items-center gap-2">
- *     <ty-icon name="user" size="sm"></ty-icon>
- *     Profile
- *   </span>
- *
- *   <span slot="label-notifications" class="flex items-center gap-2">
- *     <ty-icon name="bell" size="sm"></ty-icon>
- *     Notifications
- *     <span class="ty-bg-danger ty-text-danger++ px-2 py-0.5 rounded-full text-xs">5</span>
- *   </span>
- *
- *   <!-- Tab panels -->
- *   <ty-tab id="profile">...</ty-tab>
- *   <ty-tab id="notifications">...</ty-tab>
- * </ty-tabs>
- *
- * @example
- * <!-- Custom marker styling -->
- * <ty-tabs width="100%" height="400px">
- *   <!-- Gradient marker slot -->
- *   <div slot="marker" style="
- *     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- *     border-radius: 0.5rem;
- *     box-shadow: 0 2px 8px rgba(0,0,0,0.15);
- *   "></div>
- *
- *   <ty-tab id="tab1" label="Dashboard">...</ty-tab>
- *   <ty-tab id="tab2" label="Analytics">...</ty-tab>
- * </ty-tabs>
- */
 import { ensureStyles } from '../utils/styles.js';
 import { tabsStyles } from '../styles/tabs.js';
-// ============================================================================
-// WeakMaps for State Management
-// ============================================================================
 const eventHandlers = new WeakMap();
 const resizeObservers = new WeakMap();
-// ============================================================================
-// Helper Functions - Attribute Parsing
-// ============================================================================
-/**
- * Extract tabs configuration from element attributes
- */
+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'),
-    };
-}
-/**
- * Get all ty-tab child elements
- */
+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'));
 }
-/**
- * Get ID from a ty-tab element
- */
 function getTabId(tab) {
-    return tab.getAttribute('id');
+return tab.getAttribute('id');
+}
+function getSlotLabel(tabsEl, tabId) {
+return tabsEl.querySelector(`:scope > [slot='label-${tabId}']`);
 }
-/**
- * Check if ty-tabs has a direct child label slot for this tab-id.
- * Looks in ty-tabs' light DOM for slot='label-{tab-id}' elements.
- */
 function hasSlotLabel(tabsEl, tabId) {
-    return tabsEl.querySelector(`[slot='label-${tabId}']`) !== null;
+return getSlotLabel(tabsEl, tabId) !== null;
 }
-/**
- * Determine label type: 'slot' (rich content) or 'text' (simple attribute).
- * Checks ty-tabs element for slot='label-{tab-id}' direct children.
- */
 function getTabLabelType(tabsEl, tab) {
-    const tabId = getTabId(tab);
-    if (tabId && hasSlotLabel(tabsEl, tabId)) {
-        return 'slot';
-    }
-    return 'text';
-}
-/**
- * Check if tab is disabled
- */
+const tabId = getTabId(tab);
+if (tabId && hasSlotLabel(tabsEl, tabId)) {
+return 'slot';
+}
+return 'text';
+}
 function isTabDisabled(tab) {
-    return tab.hasAttribute('disabled');
+return tab.hasAttribute('disabled');
 }
-/**
- * Check if user provided custom marker content via slot
- */
 function hasCustomMarker(el) {
-    return el.querySelector('[slot="marker"]') !== null;
-}
-// ============================================================================
-// Helper Functions - Active Tab Management
-// ============================================================================
-/**
- * Find index of tab with given ID
- */
+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 currentActive(el) {
+const tabs = getChildTabs(el);
+const id = getActiveTabId(el, tabs);
+return { id, index: (id ? findTabIndex(tabs, id) : undefined) ?? 0 };
 }
-/**
- * Get the active tab ID, defaulting to first tab if not specified
- */
 function getActiveTabId(el, tabs) {
-    const activeAttr = el.getAttribute('active');
-    if (activeAttr && findTabIndex(tabs, activeAttr) !== undefined) {
-        return activeAttr;
-    }
-    // Default to first tab
-    if (tabs.length > 0) {
-        return getTabId(tabs[0]);
-    }
-    return null;
-}
-/**
- * Set the active tab by ID
- */
+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);
 }
-/**
- * Dispatch ty-tab-change event
- */
 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);
-}
-// ============================================================================
-// Event Handlers - Tab Button Click
-// ============================================================================
-/**
- * Handle tab button click
- */
+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();
-    // Set the active attribute (which will trigger state update)
-    setActiveTab(el, tabId);
-}
-/**
- * Cleanup existing event listeners
- */
+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;
-    // Remove all tab click handlers
-    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();
-}
-/**
- * Setup event listeners for tab button clicks
- */
+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) {
-    // Clean up any existing listeners first
-    cleanupEventListeners(el);
-    // Initialize handlers storage
-    const handlers = {
-        tabClickHandlers: new Map(),
-        tabKeyClickHandlers: new Map(),
-    };
-    // Add click listener for each tab button
-    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);
-            // pointerdown: snappy mouse/touch activation (no native click delay).
-            // click, gated to event.detail === 0: native <button> keyboard
-            // activation (Enter/Space) fires 'click' with detail 0 — real mouse
-            // clicks report detail >= 1 — so this covers keyboard users without
-            // double-firing handleTabClick on an actual pointer click (which
-            // already fired via pointerdown above). Without this, keyboard-only
-            // users could Tab to a tab button but had no way to activate it.
-            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);
-        }
-    });
-    // Store handlers for cleanup
-    eventHandlers.set(el, handlers);
-}
-// ============================================================================
-// Transform & Positioning Updates
-// ============================================================================
-/**
- * Update the transform on panels-wrapper based on active index and measured width
- */
+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;
-    // Measure the actual width of the container
-    const containerWidth = el.offsetWidth;
-    const offsetPx = activeIndex * containerWidth;
-    // Apply transform directly in pixels
-    panelsWrapper.style.transform = `translateX(-${offsetPx}px)`;
-}
-/**
- * Update ARIA attributes on tab buttons without re-rendering
- */
+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');
-            // Add data-active attribute for styling slotted content
-            button.setAttribute('data-active', String(isActive));
-            // Also set data-active on the slotted label element in light DOM
-            const slottedLabel = el.querySelector(`[slot='label-${tabId}']`);
-            if (slottedLabel) {
-                slottedLabel.setAttribute('data-active', String(isActive));
-            }
-        }
-    });
-}
-/**
- * Update pointer-events, opacity, and data-active on tab panels without re-rendering
- */
+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;
-        // Set data-active attribute for framework conditional rendering
-        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';
-        }
-    });
-}
-/**
- * Calculate marker position and dimensions based on active tab button.
- * Returns position object with left, top, width, height in pixels, or null if button not found.
- */
+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();
-    // Use offset properties for position relative to container (accounts for padding)
-    const left = button.offsetLeft;
-    const top = button.offsetTop;
-    return {
-        left,
-        top,
-        width: buttonRect.width,
-        height: buttonRect.height,
-    };
-}
-/**
- * Update marker wrapper position and dimensions to match active tab button
- */
-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;
-    // Snap without animating when the marker was never positioned, or was
-    // positioned while the tabs were hidden (zero-size rects) — otherwise it
-    // visibly glides in from 0,0 on first display.
-    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; // flush styles so the snap isn't animated
-        marker.style.transition = '';
-    }
-}
-/**
- * Update only the active tab state without re-rendering DOM.
- * Called from `attributeChangedCallback` when the `active` attribute changes.
- *
- * `previousId` MUST be the value the attribute held *before* it was changed —
- * never call `getActiveTabId(el, ...)` here, because the attribute has already
- * been updated to `tabId` by the time this runs. Reading it back would always
- * yield the new value, making the change-detection guard below trip on every
- * click and silently suppress `ty-tab-change` dispatch.
- */
+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);
-    // Only update if different tab and valid
-    if (previousId === tabId || newIndex === undefined)
-        return;
-    // Update CSS variable for transform
-    el.style.setProperty('--active-index', String(newIndex));
-    // Update transform directly
-    updateTransform(el, newIndex);
-    // Update ARIA attributes on buttons
-    updateAriaAttributes(el, shadowRoot, tabId);
-    // Update pointer-events on panels
-    updatePanelInteraction(el, tabId);
-    // Update marker position to match new active tab
-    updateMarker(el, tabId);
-    // Reset scroll position of new active panel
-    const newPanel = tabs[newIndex];
-    if (newPanel?.resetScroll) {
-        newPanel.resetScroll();
-    }
-    // Dispatch change event
-    dispatchTabChangeEvent(el, tabId, newIndex, previousId, currentIndex ?? null);
-}
-// ============================================================================
-// ResizeObserver for Responsive Width
-// ============================================================================
-/**
- * Setup ResizeObserver for percentage widths and marker updates
- */
+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) {
-    // Clean up old observer
-    const oldObserver = resizeObservers.get(el);
-    if (oldObserver) {
-        oldObserver.disconnect();
-    }
-    // Observe unconditionally (not just for '%' widths) — overflow can happen
-    // at any fixed width too, and needs to react to container resizes.
-    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;
-        // Update CSS variable with measured width (percentage widths only)
-        if (width.includes('%')) {
-            el.style.setProperty('--tabs-width', `${entry.contentRect.width}px`);
-        }
-        // Update transform with new width
-        if (activeIndex !== undefined) {
-            updateTransform(el, activeIndex);
-        }
-        // Update marker position (tab button positions may have changed)
-        if (activeId) {
-            updateMarker(el, activeId);
-        }
-        updateOverflow(el);
-    });
-    observer.observe(el);
-    resizeObservers.set(el, observer);
-}
-/**
- * Cleanup ResizeObserver
- */
+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);
-    }
-}
-// ============================================================================
-// Rendering Functions
-// ============================================================================
-/**
- * Generate HTML for tab buttons using slots for rich labels.
- * Slots are looked up as direct children of tabs-el with slot='label-{tab-id}'.
- * Also renders marker wrapper with optional default underline (only if no custom marker).
- */
+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>` : textLabel}
-    </button>`;
-    }).join('');
-    return `
-    <div class="tab-buttons" role="tablist" part="buttons-container">
-      <div class="marker-wrapper" part="marker-wrapper">
-        ${!hasCustomMarker(tabsEl) ? '<div class="default-marker"></div>' : ''}
-        <slot name="marker"></slot>
-      </div>
-      ${buttons}
-    </div>
-  `;
-}
-/**
- * Generate HTML for ONLY the button elements (no marker wrapper).
- * Used during smart updates to preserve the marker wrapper.
- */
+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>` : textLabel}
-    </button>`;
-    }).join('');
-}
-// ============================================================================
-// Overflow Handling (collapse tabs that don't fit into a "more" menu)
-// ============================================================================
-const OVERFLOW_TRIGGER_WIDTH = 40;
-/** Build a display label for a hidden tab's overflow-menu entry. */
+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 = tabsEl.querySelector(`[slot='label-${tabId}']`);
-        return slotted?.textContent?.trim() || tabId;
-    }
-    return tab.getAttribute('label') || 'Tab';
-}
-/** Remove the "more" trigger + its popup, if present. */
+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();
-}
-/**
- * Build the "more" trigger button + its ty-popup menu for the given
- * (already-hidden) tab buttons, and append it to the buttons container.
- * Reuses ty-popup instead of a second floating-menu implementation.
- */
-function renderOverflowMenu(el, container, hiddenButtons, allTabs) {
-    if (hiddenButtons.length === 0)
-        return;
-    const tabsById = new Map(allTabs.map((tab) => [getTabId(tab), tab]));
-    const trigger = document.createElement('button');
-    trigger.className = 'tab-overflow-trigger';
-    trigger.type = 'button';
-    trigger.setAttribute('aria-label', `${hiddenButtons.length} more 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');
-    hiddenButtons.forEach((btn) => {
-        const tabId = btn.dataset.tabId;
-        const tab = tabId ? tabsById.get(tabId) : undefined;
-        if (!tabId || !tab)
-            return;
-        const item = document.createElement('button');
-        item.type = 'button';
-        item.className = 'tab-overflow-item';
-        item.setAttribute('role', 'menuitem');
-        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);
-}
-/**
- * Measure the tab buttons against the available width and collapse whatever
- * doesn't fit behind a "more" trigger + popup menu. The active tab is always
- * kept visible — if it would be the one to overflow, the last visible button
- * is hidden in its place instead.
- */
+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);
+}
 function updateOverflow(el) {
-    const shadowRoot = el.shadowRoot;
-    if (!shadowRoot)
-        return;
-    const container = shadowRoot.querySelector('.tab-buttons');
-    if (!container)
-        return;
-    removeOverflowMenu(shadowRoot);
-    const buttons = Array.from(container.querySelectorAll('.tab-button'));
-    buttons.forEach((b) => b.classList.remove('overflow-hidden'));
-    if (buttons.length === 0)
-        return;
-    const available = container.clientWidth;
-    let total = 0;
-    let cutoff = buttons.length;
-    for (let i = 0; i < buttons.length; i++) {
-        total += buttons[i].offsetWidth;
-        if (total > available) {
-            cutoff = i;
-            break;
-        }
-    }
-    if (cutoff >= buttons.length)
-        return; // everything fits
-    // Recompute the cutoff leaving room for the "more" trigger itself.
-    total = 0;
-    cutoff = buttons.length;
-    for (let i = 0; i < buttons.length; i++) {
-        total += buttons[i].offsetWidth;
-        if (total > available - OVERFLOW_TRIGGER_WIDTH) {
-            cutoff = i;
-            break;
-        }
-    }
-    cutoff = Math.max(cutoff, 1);
-    const tabs = getChildTabs(el);
-    const activeId = getActiveTabId(el, tabs);
-    const hidden = new Set(buttons.slice(cutoff));
-    const activeButton = activeId ? buttons.find((b) => b.dataset.tabId === activeId) : undefined;
-    if (activeButton && hidden.has(activeButton)) {
-        const lastVisible = buttons[cutoff - 1];
-        hidden.delete(activeButton);
-        hidden.add(lastVisible);
-    }
-    buttons.forEach((b) => b.classList.toggle('overflow-hidden', hidden.has(b)));
-    renderOverflowMenu(el, container, buttons.filter((b) => hidden.has(b)), tabs);
-}
-/**
- * Render the tabs container with buttons and panel viewport.
- * Smart rendering: checks if structure exists and only updates when needed.
- */
+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));
+}
+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' });
+}
+}
 function render(el) {
-    const shadowRoot = el.shadowRoot;
-    if (!shadowRoot)
-        return;
-    const { width, height, placement } = getTabsAttributes(el);
-    const tabs = getChildTabs(el);
-    const activeId = getActiveTabId(el, tabs);
-    const activeIndex = activeId ? (findTabIndex(tabs, activeId) ?? 0) : 0;
-    // Each <ty-tab> IS its tabpanel (no separate wrapper — there's just one
-    // catch-all <slot> in the carousel viewport below). role/aria-labelledby/
-    // tabindex go directly on the light-DOM host; its `id` attribute is ALSO
-    // its tabId (getTabId reads it directly), so it's never touched here.
-    // No aria-controls on the tab BUTTON pointing at this: it lives in the
-    // shadow root while the panel is in light DOM, and ARIA id-references
-    // don't resolve across a shadow-tree boundary — axe's aria-valid-attr-value
-    // correctly flags that as invalid even though getElementById can find the
-    // target. role=tab + aria-selected + aria-labelledby (this direction) is
-    // what's actually load-bearing; caught by axe once ty-tabs got coverage.
-    tabs.forEach((tab) => {
-        const tabId = getTabId(tab);
-        if (!tabId)
-            return;
-        tab.setAttribute('role', 'tabpanel');
-        tab.setAttribute('aria-labelledby', `tab-${tabId}`);
-        tab.setAttribute('tabindex', '0');
-    });
-    // Check if structure already exists
-    const existingContainer = shadowRoot.querySelector('.tabs-container');
-    const existingButtons = shadowRoot.querySelector('.tab-buttons');
-    const existingViewport = shadowRoot.querySelector('.panels-viewport');
-    // Ensure styles are loaded
-    ensureStyles(shadowRoot, { css: tabsStyles, id: 'ty-tabs' });
-    // Dev warning for too many tabs
-    if (tabs.length > 7) {
-        console.warn(`[ty-tabs] More than 7 tabs detected (${tabs.length} tabs). ` +
-            'This may cause overflow and poor UX. ' +
-            'Consider using sidebar navigation, accordion menu, or other patterns.');
-    }
-    // Set CSS variables for dimensions
-    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 && existingViewport) {
-        // === SMART UPDATE: Structure exists, only update what changed ===
-        // Update placement if changed
-        existingContainer.setAttribute('data-placement', placement);
-        // SMART UPDATE: Preserve marker wrapper, only update buttons
-        existingButtons.querySelector('.tab-overflow-trigger')?.remove();
-        const allButtons = existingButtons.querySelectorAll('.tab-button');
-        allButtons.forEach(button => button.remove());
-        // Generate and append new buttons after the marker wrapper
-        const buttonsHtml = renderButtonsOnly(el, tabs, activeId);
-        const tempDiv = document.createElement('div');
-        tempDiv.innerHTML = buttonsHtml;
-        Array.from(tempDiv.children).forEach(button => {
-            existingButtons.appendChild(button);
-        });
-        // Re-setup event listeners (buttons were recreated)
-        setupEventListeners(el, shadowRoot, tabs);
-        // Update ARIA and data-active attributes on initial render
-        updateAriaAttributes(el, shadowRoot, activeId || '');
-        // Measure button height and update marker after update
-        requestAnimationFrame(() => {
-            const buttons = shadowRoot.querySelector('.tab-buttons');
-            if (buttons) {
-                const buttonsHeight = buttons.offsetHeight;
-                el.style.setProperty('--buttons-height', `${buttonsHeight}px`);
-            }
-            // Update transform with current active index
-            updateTransform(el, activeIndex);
-            // Update marker position to match active tab
-            if (activeId) {
-                updateMarker(el, activeId);
-            }
-            updateOverflow(el);
-        });
-        // Update panel interaction states
-        if (activeId) {
-            updatePanelInteraction(el, activeId);
-        }
-    }
-    else {
-        // === FULL RENDER: First time or structure missing ===
-        shadowRoot.innerHTML = `
-      <div class="tabs-container" data-placement="${placement}">
-        ${renderTabButtons(el, tabs, activeId)}
-        <div class="panels-viewport" part="panels-container">
-          <div class="panels-wrapper">
-            <slot></slot>
-          </div>
-        </div>
-      </div>
-    `;
-        // Measure button height, update transform and marker after render
-        requestAnimationFrame(() => {
-            const buttons = shadowRoot.querySelector('.tab-buttons');
-            if (buttons) {
-                const buttonsHeight = buttons.offsetHeight;
-                el.style.setProperty('--buttons-height', `${buttonsHeight}px`);
-            }
-            // Update transform with measured width
-            updateTransform(el, activeIndex);
-            // Update marker position to match active tab
-            if (activeId) {
-                updateMarker(el, activeId);
-            }
-            updateOverflow(el);
-        });
-        // Setup event listeners
-        setupEventListeners(el, shadowRoot, tabs);
-        // Update ARIA and data-active attributes on initial render
-        updateAriaAttributes(el, shadowRoot, activeId || '');
-        // Setup ResizeObserver for responsive width
-        setupResizeObserver(el);
-        // Update tab panel states
-        if (activeId) {
-            updatePanelInteraction(el, activeId);
-        }
-        // Listen for marker slot changes to hide default marker
-        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);
-            // Check immediately in case content is already slotted
-            updateDefaultMarkerVisibility();
-        }
-    }
-}
-/**
- * Cleanup when tabs component is disconnected
- */
+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`);
+}
+const current = currentActive(el);
+updateTransform(el, current.index);
+updateOverflow(el);
+if (current.id) {
+updateMarker(el, current.id);
+scrollActiveIntoView(el, current.id, 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`);
+}
+const current = currentActive(el);
+updateTransform(el, current.index);
+updateOverflow(el);
+if (current.id) {
+updateMarker(el, current.id);
+scrollActiveIntoView(el, current.id, 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);
-}
-// ============================================================================
-// Component Definition
-// ============================================================================
-/**
- * TyTabs Web Component
- */
+cleanupEventListeners(el);
+cleanupResizeObserver(el);
+}
 export class TyTabs extends HTMLElement {
-    /** Observed attributes */
-    static get observedAttributes() {
-        return ['width', 'height', 'active', 'placement'];
-    }
-    constructor() {
-        super();
-        this.attachShadow({ mode: 'open' });
-    }
-    connectedCallback() {
-        render(this);
-    }
-    disconnectedCallback() {
-        cleanup(this);
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        // Smart rendering: only full render when structural attributes change
-        if (name === 'active') {
-            // Active tab changed - update state, then do smart render
-            if (newValue) {
-                // Pass `oldValue` explicitly so the change-detection inside
-                // `updateActiveTabState` compares against the previous value
-                // rather than re-reading the (already updated) attribute.
-                updateActiveTabState(this, newValue, oldValue);
-            }
-            // Always call render after active change to update button states
-            render(this);
-        }
-        else {
-            // Other attributes changed (width, height, placement) - full render
-            render(this);
-        }
-    }
-}
-// Register the custom element
+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);
 }
-//# sourceMappingURL=tabs.js.map