tyrell-components 1.0.0-RC13 → 1.0.0-RC14

package/lib/components/tabs.js

@@ -1,79 +1,7 @@
-/**
- * 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
- */
 function getTabsAttributes(el) {
     return {
         width: el.getAttribute('width') || '100%',
@@ -82,29 +10,15 @@ function getTabsAttributes(el) {
         placement: (el.getAttribute('placement') || 'top'),
     };
 }
-/**
- * Get all ty-tab child elements
- */
 function getChildTabs(el) {
     return Array.from(el.querySelectorAll('ty-tab'));
 }
-/**
- * Get ID from a ty-tab element
- */
 function getTabId(tab) {
     return tab.getAttribute('id');
 }
-/**
- * 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;
 }
-/**
- * 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)) {
@@ -112,51 +26,29 @@ function getTabLabelType(tabsEl, tab) {
     }
     return 'text';
 }
-/**
- * Check if tab is disabled
- */
 function isTabDisabled(tab) {
     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
- */
 function findTabIndex(tabs, tabId) {
     const index = tabs.findIndex(tab => getTabId(tab) === tabId);
     return index >= 0 ? index : undefined;
 }
-/**
- * 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
- */
 function setActiveTab(el, 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: {
@@ -170,21 +62,11 @@ function dispatchTabChangeEvent(el, activeId, activeIndex, previousId, previousI
     });
     el.dispatchEvent(event);
 }
-// ============================================================================
-// Event Handlers - Tab Button Click
-// ============================================================================
-/**
- * Handle tab button click
- */
 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
- */
 function cleanupEventListeners(el) {
     const handlers = eventHandlers.get(el);
     if (!handlers)
@@ -192,7 +74,6 @@ function cleanupEventListeners(el) {
     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) {
@@ -208,18 +89,12 @@ function cleanupEventListeners(el) {
     handlers.tabClickHandlers.clear();
     handlers.tabKeyClickHandlers.clear();
 }
-/**
- * Setup event listeners for tab button clicks
- */
 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)
@@ -227,13 +102,6 @@ function setupEventListeners(el, shadowRoot, tabs) {
         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);
@@ -244,15 +112,8 @@ function setupEventListeners(el, shadowRoot, tabs) {
             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
- */
 function updateTransform(el, activeIndex) {
     const shadowRoot = el.shadowRoot;
     if (!shadowRoot)
@@ -260,15 +121,10 @@ function updateTransform(el, activeIndex) {
     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
- */
 function updateAriaAttributes(el, shadowRoot, activeId) {
     const tabs = getChildTabs(el);
     tabs.forEach((tab, idx) => {
@@ -280,9 +136,7 @@ function updateAriaAttributes(el, shadowRoot, 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));
@@ -290,9 +144,6 @@ function updateAriaAttributes(el, shadowRoot, activeId) {
         }
     });
 }
-/**
- * Update pointer-events, opacity, and data-active on tab panels without re-rendering
- */
 function updatePanelInteraction(el, activeId) {
     const tabs = getChildTabs(el);
     tabs.forEach((tab) => {
@@ -300,7 +151,6 @@ function updatePanelInteraction(el, activeId) {
         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';
@@ -312,17 +162,12 @@ function updatePanelInteraction(el, activeId) {
         }
     });
 }
-/**
- * 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.
- */
 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 {
@@ -332,9 +177,6 @@ function calculateMarkerPosition(el, shadowRoot, activeId) {
         height: buttonRect.height,
     };
 }
-/**
- * Update marker wrapper position and dimensions to match active tab button
- */
 function updateMarker(el, activeId) {
     const shadowRoot = el.shadowRoot;
     if (!shadowRoot)
@@ -345,9 +187,6 @@ function updateMarker(el, activeId) {
     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';
@@ -356,20 +195,10 @@ function updateMarker(el, activeId) {
     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.offsetWidth;
         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.
- */
 function updateActiveTabState(el, tabId, previousId) {
     const tabs = getChildTabs(el);
     const shadowRoot = el.shadowRoot;
@@ -377,56 +206,36 @@ function updateActiveTabState(el, tabId, previousId) {
         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
- */
 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`);
+            el.style.setProperty('--tabs-page-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);
         }
@@ -435,9 +244,6 @@ function setupResizeObserver(el) {
     observer.observe(el);
     resizeObservers.set(el, observer);
 }
-/**
- * Cleanup ResizeObserver
- */
 function cleanupResizeObserver(el) {
     const observer = resizeObservers.get(el);
     if (observer) {
@@ -445,14 +251,6 @@ function cleanupResizeObserver(el) {
         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).
- */
 function renderTabButtons(tabsEl, tabs, activeId) {
     const buttons = tabs.map((tab) => {
         const tabId = getTabId(tab);
@@ -485,10 +283,6 @@ function renderTabButtons(tabsEl, tabs, activeId) {
     </div>
   `;
 }
-/**
- * Generate HTML for ONLY the button elements (no marker wrapper).
- * Used during smart updates to preserve the marker wrapper.
- */
 function renderButtonsOnly(tabsEl, tabs, activeId) {
     return tabs.map((tab) => {
         const tabId = getTabId(tab);
@@ -512,11 +306,7 @@ function renderButtonsOnly(tabsEl, tabs, activeId) {
     </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. */
 function getTabMenuLabel(tabsEl, tab) {
     const tabId = getTabId(tab);
     if (tabId && getTabLabelType(tabsEl, tab) === 'slot') {
@@ -525,15 +315,9 @@ function getTabMenuLabel(tabsEl, tab) {
     }
     return tab.getAttribute('label') || 'Tab';
 }
-/** Remove the "more" trigger + its popup, if present. */
 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;
@@ -573,12 +357,6 @@ function renderOverflowMenu(el, container, hiddenButtons, allTabs) {
     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.
- */
 function updateOverflow(el) {
     const shadowRoot = el.shadowRoot;
     if (!shadowRoot)
@@ -592,6 +370,8 @@ function updateOverflow(el) {
     if (buttons.length === 0)
         return;
     const available = container.clientWidth;
+    if (available <= 0)
+        return;
     let total = 0;
     let cutoff = buttons.length;
     for (let i = 0; i < buttons.length; i++) {
@@ -602,8 +382,7 @@ function updateOverflow(el) {
         }
     }
     if (cutoff >= buttons.length)
-        return; // everything fits
-    // Recompute the cutoff leaving room for the "more" trigger itself.
+        return;
     total = 0;
     cutoff = buttons.length;
     for (let i = 0; i < buttons.length; i++) {
@@ -626,10 +405,6 @@ function updateOverflow(el) {
     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.
- */
 function render(el) {
     const shadowRoot = el.shadowRoot;
     if (!shadowRoot)
@@ -638,16 +413,6 @@ function render(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)
@@ -656,63 +421,48 @@ function render(el) {
         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)}
@@ -723,32 +473,24 @@ function render(el) {
         </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 = () => {
@@ -759,60 +501,55 @@ function render(el) {
                 }
             };
             markerSlot.addEventListener('slotchange', updateDefaultMarkerVisibility);
-            // Check immediately in case content is already slotted
             updateDefaultMarkerVisibility();
         }
     }
 }
-/**
- * Cleanup when tabs component is disconnected
- */
 function cleanup(el) {
     cleanupEventListeners(el);
     cleanupResizeObserver(el);
 }
-// ============================================================================
-// Component Definition
-// ============================================================================
-/**
- * TyTabs Web Component
- */
 export class TyTabs extends HTMLElement {
-    /** Observed attributes */
     static get observedAttributes() {
         return ['width', 'height', 'active', 'placement'];
     }
     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) {
-        // 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
 if (!customElements.get('ty-tabs')) {
     customElements.define('ty-tabs', TyTabs);
 }
-//# sourceMappingURL=tabs.js.map