tyrell-components 1.0.0-TC50 → 1.0.0-TC52

package/lib/components/select.js

@@ -895,7 +895,11 @@ export class TySelect extends TyComponent {
         const slot = shadow.querySelector('slot[name="trigger"]');
         if (!stub || !slot)
             return;
-        const sync = () => stub.classList.toggle("custom-trigger", slot.assignedElements().length > 0);
+        const sync = () => {
+            const hasTrigger = slot.assignedElements().length > 0;
+            stub.classList.toggle("custom-trigger", hasTrigger);
+            this.toggleAttribute("has-trigger", hasTrigger);
+        };
         slot.addEventListener("slotchange", sync);
         sync();
     }

package/lib/components/selected-tags.d.ts

@@ -11,7 +11,7 @@ export declare class TySelectedOptions extends HTMLElement {
     private _childObserver;
     private _pickerObserver;
     private _lastTemplate;
-    private _restoreDisplay;
+    private _pickerOpen;
     private _onPickerOpen;
     private _onPickerClose;
     connectedCallback(): void;

package/lib/components/selected-tags.js

@@ -12,13 +12,13 @@ export class TySelectedOptions extends HTMLElement {
         this._childObserver = null;
         this._pickerObserver = null;
         this._lastTemplate = null;
-        this._restoreDisplay = 'contents';
+        this._pickerOpen = false;
         this._onPickerOpen = () => {
-            this._restoreDisplay = this.style.display || 'contents';
-            this.style.display = 'none';
+            this._pickerOpen = true;
         };
         this._onPickerClose = () => {
-            this.style.display = this._restoreDisplay;
+            this._pickerOpen = false;
+            this.renderChips();
         };
     }
     static get observedAttributes() {
@@ -81,7 +81,7 @@ export class TySelectedOptions extends HTMLElement {
         this._pickerObserver?.disconnect();
         this._pickerObserver = null;
         this._picker = null;
-        this.style.display = this._restoreDisplay;
+        this._pickerOpen = false;
     }
     values() {
         return parseValues(this._picker?.value ?? '');
@@ -156,6 +156,8 @@ export class TySelectedOptions extends HTMLElement {
         return tag;
     }
     renderChips() {
+        if (this._pickerOpen)
+            return;
         const template = this.template();
         this._lastTemplate = template;
         if (!this._picker) {

package/lib/components/tabs.d.ts

@@ -11,6 +11,7 @@ export interface TabsAttributes {
     height: string;
     active: string | null;
     placement: 'top' | 'bottom';
+    fixed: boolean;
 }
 /**
  * Tab change event detail

package/lib/components/tabs.js

@@ -8,6 +8,7 @@ function getTabsAttributes(el) {
         height: el.getAttribute('height') || '400px',
         active: el.getAttribute('active'),
         placement: (el.getAttribute('placement') || 'top'),
+        fixed: el.hasAttribute('fixed'),
     };
 }
 function getChildTabs(el) {
@@ -16,8 +17,11 @@ function getChildTabs(el) {
 function getTabId(tab) {
     return tab.getAttribute('id');
 }
+function getSlotLabel(tabsEl, tabId) {
+    return tabsEl.querySelector(`:scope > [slot='label-${tabId}']`);
+}
 function hasSlotLabel(tabsEl, tabId) {
-    return tabsEl.querySelector(`[slot='label-${tabId}']`) !== null;
+    return getSlotLabel(tabsEl, tabId) !== null;
 }
 function getTabLabelType(tabsEl, tab) {
     const tabId = getTabId(tab);
@@ -137,7 +141,7 @@ function updateAriaAttributes(el, shadowRoot, activeId) {
             button.setAttribute('aria-selected', String(isActive));
             button.setAttribute('tabindex', isActive ? '0' : '-1');
             button.setAttribute('data-active', String(isActive));
-            const slottedLabel = el.querySelector(`[slot='label-${tabId}']`);
+            const slottedLabel = getSlotLabel(el, tabId);
             if (slottedLabel) {
                 slottedLabel.setAttribute('data-active', String(isActive));
             }
@@ -213,6 +217,9 @@ function updateActiveTabState(el, tabId, previousId) {
     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();
@@ -236,10 +243,11 @@ function setupResizeObserver(el) {
         if (activeIndex !== undefined) {
             updateTransform(el, activeIndex);
         }
+        updateOverflow(el);
         if (activeId) {
             updateMarker(el, activeId);
+            scrollActiveIntoView(el, activeId, false);
         }
-        updateOverflow(el);
     });
     observer.observe(el);
     resizeObservers.set(el, observer);
@@ -270,16 +278,18 @@ function renderTabButtons(tabsEl, tabs, activeId) {
       data-active="${active}"
       ${disabled ? 'disabled aria-disabled="true"' : ''}
     >
-      ${labelType === 'slot' ? `<slot name="label-${tabId}"></slot>` : textLabel}
+      ${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="marker-wrapper" part="marker-wrapper">
-        ${!hasCustomMarker(tabsEl) ? '<div class="default-marker"></div>' : ''}
-        <slot name="marker"></slot>
+      <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>
-      ${buttons}
     </div>
   `;
 }
@@ -302,15 +312,14 @@ function renderButtonsOnly(tabsEl, tabs, activeId) {
       data-active="${active}"
       ${disabled ? 'disabled aria-disabled="true"' : ''}
     >
-      ${labelType === 'slot' ? `<slot name="label-${tabId}"></slot>` : textLabel}
+      ${labelType === 'slot' ? `<slot name="label-${tabId}"></slot>` : `<span class="tab-label">${textLabel}</span>`}
     </button>`;
     }).join('');
 }
-const OVERFLOW_TRIGGER_WIDTH = 40;
 function getTabMenuLabel(tabsEl, tab) {
     const tabId = getTabId(tab);
     if (tabId && getTabLabelType(tabsEl, tab) === 'slot') {
-        const slotted = tabsEl.querySelector(`[slot='label-${tabId}']`);
+        const slotted = getSlotLabel(tabsEl, tabId);
         return slotted?.textContent?.trim() || tabId;
     }
     return tab.getAttribute('label') || 'Tab';
@@ -318,29 +327,28 @@ function getTabMenuLabel(tabsEl, tab) {
 function removeOverflowMenu(shadowRoot) {
     shadowRoot.querySelector('.tab-overflow-trigger')?.remove();
 }
-function renderOverflowMenu(el, container, hiddenButtons, allTabs) {
-    if (hiddenButtons.length === 0)
-        return;
-    const tabsById = new Map(allTabs.map((tab) => [getTabId(tab), tab]));
+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', `${hiddenButtons.length} more tabs`);
+    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');
-    hiddenButtons.forEach((btn) => {
-        const tabId = btn.dataset.tabId;
-        const tab = tabId ? tabsById.get(tabId) : undefined;
-        if (!tabId || !tab)
+    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;
@@ -362,54 +370,65 @@ function updateOverflow(el) {
     if (!shadowRoot)
         return;
     const container = shadowRoot.querySelector('.tab-buttons');
-    if (!container)
+    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);
-    const buttons = Array.from(container.querySelectorAll('.tab-button'));
-    buttons.forEach((b) => b.classList.remove('overflow-hidden'));
-    if (buttons.length === 0)
+    if (strip.clientWidth <= 0)
         return;
-    const available = container.clientWidth;
-    if (available <= 0)
+    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;
-    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;
-    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;
-        }
+    renderOverflowMenu(el, container, getChildTabs(el));
+    const triggerCost = container.clientWidth - strip.clientWidth;
+    if (hidden <= triggerCost) {
+        removeOverflowMenu(shadowRoot);
     }
-    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);
+    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' });
     }
-    buttons.forEach((b) => b.classList.toggle('overflow-hidden', hidden.has(b)));
-    renderOverflowMenu(el, container, buttons.filter((b) => hidden.has(b)), tabs);
 }
 function render(el) {
     const shadowRoot = el.shadowRoot;
     if (!shadowRoot)
         return;
-    const { width, height, placement } = getTabsAttributes(el);
+    const { width, height, placement, fixed } = getTabsAttributes(el);
     const tabs = getChildTabs(el);
     const activeId = getActiveTabId(el, tabs);
     const activeIndex = activeId ? (findTabIndex(tabs, activeId) ?? 0) : 0;
@@ -423,27 +442,26 @@ function render(el) {
     });
     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' });
-    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.');
-    }
     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) {
+    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 = existingButtons.querySelectorAll('.tab-button');
+        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 => {
-            existingButtons.appendChild(button);
+            existingStrip.appendChild(button);
         });
+        existingStrip.scrollLeft = savedScrollLeft;
         setupEventListeners(el, shadowRoot, tabs);
         updateAriaAttributes(el, shadowRoot, activeId || '');
         requestAnimationFrame(() => {
@@ -453,10 +471,11 @@ function render(el) {
                 el.style.setProperty('--buttons-height', `${buttonsHeight}px`);
             }
             updateTransform(el, activeIndex);
+            updateOverflow(el);
             if (activeId) {
                 updateMarker(el, activeId);
+                scrollActiveIntoView(el, activeId, true);
             }
-            updateOverflow(el);
         });
         if (activeId) {
             updatePanelInteraction(el, activeId);
@@ -464,7 +483,7 @@ function render(el) {
     }
     else {
         shadowRoot.innerHTML = `
-      <div class="tabs-container" data-placement="${placement}">
+      <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">
@@ -480,14 +499,17 @@ function render(el) {
                 el.style.setProperty('--buttons-height', `${buttonsHeight}px`);
             }
             updateTransform(el, activeIndex);
+            updateOverflow(el);
             if (activeId) {
                 updateMarker(el, activeId);
+                scrollActiveIntoView(el, activeId, false);
             }
-            updateOverflow(el);
         });
         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);
         }
@@ -511,7 +533,7 @@ function cleanup(el) {
 }
 export class TyTabs extends HTMLElement {
     static get observedAttributes() {
-        return ['width', 'height', 'active', 'placement'];
+        return ['width', 'height', 'active', 'placement', 'fixed'];
     }
     constructor() {
         super();
@@ -540,10 +562,14 @@ export class TyTabs extends HTMLElement {
     }
     attributeChangedCallback(name, oldValue, newValue) {
         if (name === 'active') {
-            if (newValue) {
-                updateActiveTabState(this, newValue, oldValue);
+            if (!newValue)
+                return;
+            if (!this.shadowRoot?.querySelector(`[data-tab-id='${newValue}']`)) {
+                render(this);
+                return;
             }
-            render(this);
+            updateActiveTabState(this, newValue, oldValue);
+            scrollActiveIntoView(this, newValue, true);
         }
         else {
             render(this);

package/lib/styles/select-base.js

@@ -44,6 +44,15 @@ export const selectBaseStyles = `
   width: auto;
 }
 
+/* A custom slot="trigger" is the same situation as compact: the trigger is
+   the consumer's own button, not a form field — hug it so chips/toolbar
+   items can sit right next to it. [has-trigger] is reflected by
+   setupTriggerSlot() because Blink does not parse :has() inside :host(). */
+:host([has-trigger]) {
+  display: inline-block;
+  width: auto;
+}
+
 .dropdown-dialog {
   position: fixed;
   width: var(--dropdown-width, 200px);

package/lib/styles/tab.d.ts

@@ -1,4 +1,4 @@
 /**
  * Tab Component Styles
  */
-export declare const tabStyles = "\n:host {\n  width: var(--tabs-width, 100%);\n  height: calc(var(--tabs-height, 400px) - var(--buttons-height, 48px));\n  display: block;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  transition: opacity var(--transition-duration, 400ms) var(--transition-easing, ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    transition-duration: 0ms !important;\n  }\n}\n\n.tab-wrapper {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.tab-panel {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  box-sizing: border-box;\n}\n\n.tab-panel.ty-custom-scroll {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.tab-panel.ty-custom-scroll::-webkit-scrollbar {\n  display: none;\n}\n\n.tab-wrapper:hover .ty-scrollbar-track-y.has-overflow {\n  opacity: 1;\n}\n\n\n/* Vertical track */\n.ty-scrollbar-track-y {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n  position: absolute;\n  right: 0;\n  width: 100%;\n  min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: var(--ty-local-transition, background 0.15s ease-out);\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* Horizontal track */\n.ty-scrollbar-track-x {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n  position: absolute;\n  bottom: 0;\n  height: 100%;\n  min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: var(--ty-local-transition, background 0.15s ease-out);\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* Touch devices: hide the custom scrollbar */\n@media (pointer: coarse) and (hover: none) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x {\n    display: none !important;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x,\n  .ty-scrollbar-thumb-y,\n  .ty-scrollbar-thumb-x {\n    transition-duration: 0ms !important;\n  }\n}\n\n";
+export declare const tabStyles = "\n:host {\n  width: var(--tabs-width, 100%);\n  height: calc(var(--tabs-height, 400px) - var(--buttons-height, 48px));\n  display: block;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  transition: opacity var(--ty-tabs-transition-duration, 400ms) var(--ty-tabs-transition-easing, ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    transition-duration: 0ms !important;\n  }\n}\n\n.tab-wrapper {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.tab-panel {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  box-sizing: border-box;\n}\n\n.tab-panel.ty-custom-scroll {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.tab-panel.ty-custom-scroll::-webkit-scrollbar {\n  display: none;\n}\n\n.tab-wrapper:hover .ty-scrollbar-track-y.has-overflow {\n  opacity: 1;\n}\n\n\n/* Vertical track */\n.ty-scrollbar-track-y {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n  position: absolute;\n  right: 0;\n  width: 100%;\n  min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: var(--ty-local-transition, background 0.15s ease-out);\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* Horizontal track */\n.ty-scrollbar-track-x {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n  position: absolute;\n  bottom: 0;\n  height: 100%;\n  min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: var(--ty-local-transition, background 0.15s ease-out);\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* Touch devices: hide the custom scrollbar */\n@media (pointer: coarse) and (hover: none) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x {\n    display: none !important;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x,\n  .ty-scrollbar-thumb-y,\n  .ty-scrollbar-thumb-x {\n    transition-duration: 0ms !important;\n  }\n}\n\n";

package/lib/styles/tab.js

@@ -6,7 +6,7 @@ export const tabStyles = `
   display: block;
   box-sizing: border-box;
   flex-shrink: 0;
-  transition: opacity var(--transition-duration, 400ms) var(--transition-easing, ease-in-out);
+  transition: opacity var(--ty-tabs-transition-duration, 400ms) var(--ty-tabs-transition-easing, ease-in-out);
 }
 
 @media (prefers-reduced-motion: reduce) {

package/lib/styles/tabs.d.ts

@@ -2,4 +2,4 @@
  * Tabs Component Styles — ty-tabs container: top/bottom placement, animated
  * active marker, carousel viewport. Customizable via CSS Parts (::part).
  */
-export declare const tabsStyles = "\n:host {\n  display: block;\n  width: var(--tabs-width, 100%);\n  height: var(--tabs-height, 400px);\n  box-sizing: border-box;\n}\n\n.tabs-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  box-sizing: border-box;\n}\n\n.tabs-container[data-placement=\"bottom\"] {\n  flex-direction: column-reverse;\n}\n\n/* Tab buttons container \u2014 exposed as a CSS Part for full styling control */\n.tab-buttons {\n  display: flex;\n  gap: 0;\n  flex-shrink: 0;\n  position: relative;\n  /* For absolute positioned marker */\n  \n  /* Default minimal styling - customize via ::part(buttons-container) */\n  border-bottom: 1px solid var(--ty-border);\n  background: transparent;\n}\n\n.tabs-container[data-placement=\"bottom\"] .tab-buttons {\n  border-bottom: none;\n  border-top: 1px solid var(--ty-border);\n}\n\n/* Marker wrapper \u2014 exposed as a CSS Part for custom marker styling */\n.marker-wrapper {\n  position: absolute;\n  z-index: 0;\n  /* Behind buttons */\n  pointer-events: none;\n  /* Don't block clicks */\n  transition: left var(--transition-duration, 300ms) var(--transition-easing, ease-in-out),\n    width var(--transition-duration, 300ms) var(--transition-easing, ease-in-out),\n    height var(--transition-duration, 300ms) var(--transition-easing, ease-in-out),\n    top var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);\n}\n\n.default-marker {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  height: 2px;\n  width: 100%;\n  background: var(--ty-color-primary);\n  pointer-events: none;\n}\n\n/* Hide default marker when custom marker is slotted */\n.marker-wrapper:has(::slotted([slot=\"marker\"])) .default-marker {\n  display: none;\n}\n\n::slotted([slot=\"marker\"]) {\n  display: block;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n.tab-button {\n  min-width: 120px;\n  padding: 6px 12px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font: inherit;\n  color: var(--ty-text-soft);\n  transition: var(--ty-local-transition, color 200ms, background-color 200ms);\n  white-space: nowrap;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  font-weight: var(--ty-font-bold);\n  font-size: var(--ty-font-sm);\n  position: relative;\n  /* Establish stacking context */\n  z-index: 10;\n  /* Above marker */\n}\n\n.tab-button[aria-selected=true] {\n  color: var(--ty-text-strong);\n}\n\n.tab-button[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.tab-button:focus-visible {\n  outline: 2px solid var(--ty-color-primary);\n  outline-offset: -2px;\n}\n\n.tab-button.overflow-hidden {\n  display: none;\n}\n\n/* Overflow \"more\" trigger + menu */\n.tab-overflow-trigger {\n  flex-shrink: 0;\n  width: 40px;\n  min-width: 40px;\n  padding: 6px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  color: var(--ty-text-soft);\n  font-size: 18px;\n  line-height: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 10;\n}\n\n.tab-overflow-trigger:hover {\n  color: var(--ty-text-strong);\n}\n\n.tab-overflow-trigger:focus-visible {\n  outline: 2px solid var(--ty-color-primary);\n  outline-offset: -2px;\n}\n\n.tab-overflow-menu {\n  display: flex;\n  flex-direction: column;\n  min-width: 160px;\n  max-height: 300px;\n  overflow-y: auto;\n  padding: var(--ty-spacing-2, 4px);\n  background: var(--ty-surface-floating);\n  border-radius: var(--ty-radius-md);\n  box-shadow: var(--ty-shadow-md, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1));\n}\n\n.tab-overflow-item {\n  padding: var(--ty-spacing-2, 6px) var(--ty-spacing-3, 12px);\n  border: none;\n  background: transparent;\n  text-align: left;\n  cursor: pointer;\n  border-radius: var(--ty-radius-md);\n  color: var(--ty-text);\n  font: inherit;\n  font-size: var(--ty-font-sm);\n  white-space: nowrap;\n}\n\n.tab-overflow-item:hover {\n  background: var(--ty-bg-neutral-soft);\n  color: var(--ty-text-strong);\n}\n\n.tab-overflow-item[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Panels viewport \u2014 exposed as a CSS Part */\n.panels-viewport {\n  position: relative;\n  flex: 1;\n  overflow: hidden;\n  /* Critical: hides off-screen panels */\n  min-height: 0;\n  /* Allows flex child to shrink */\n}\n\n/* Panels wrapper slides horizontally */\n.panels-wrapper {\n  display: flex;\n  height: 100%;\n  transition: transform var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .panels-wrapper {\n    transition-duration: 0ms !important;\n  }\n\n  .marker-wrapper {\n    transition-duration: 0ms !important;\n  }\n}\n\n::slotted(ty-tab) {\n  /* Carousel page width. --tabs-page-width is the measured pixel width, set by\n     the ResizeObserver for percentage-width tabs so every panel is exactly one\n     page wide. It is deliberately NOT --tabs-width: that one sizes :host, and\n     feeding a measured pixel value back into the host's own width is a\n     self-referential loop (see setupResizeObserver). */\n  width: var(--tabs-page-width, var(--tabs-width, 100%));\n  height: 100%;\n  flex-shrink: 0;\n}\n";
+export declare const tabsStyles = "\n:host {\n  display: block;\n  width: var(--tabs-width, 100%);\n  height: var(--tabs-height, 400px);\n  box-sizing: border-box;\n}\n\n.tabs-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  box-sizing: border-box;\n}\n\n.tabs-container[data-placement=\"bottom\"] {\n  flex-direction: column-reverse;\n}\n\n/* Tab buttons container \u2014 exposed as a CSS Part for full styling control */\n.tab-buttons {\n  display: flex;\n  gap: 0;\n  flex-shrink: 0;\n  position: relative;\n\n  /* Default minimal styling - customize via ::part(buttons-container) */\n  background: transparent;\n}\n\n/* Separator drawn as a pseudo-element, not a border: a border sits OUTSIDE the\n   strip's box, so the marker (absolutely positioned inside the strip) could only\n   ever stop just above it, reading as two stacked lines. As an overlaid line it\n   lands inside the marker's range, and .tab-strip's z-index lets the marker\n   cover it. */\n.tab-buttons::after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: 1px;\n  /* --ty-tabs-separator: transparent removes the line (e.g. with a pill marker) */\n  background: var(--ty-tabs-separator, var(--ty-border));\n  pointer-events: none;\n}\n\n.tabs-container[data-placement=\"bottom\"] .tab-buttons::after {\n  bottom: auto;\n  top: 0;\n}\n\n/* Scrollable strip holding the buttons + marker. Tabs never collapse \u2014 the\n   strip scrolls (scrollbar hidden; touch/wheel still work) and activation\n   glides the active tab into view. The \"\u2026\" trigger sits OUTSIDE this strip,\n   pinned at the edge. position:relative makes it the offsetParent for the\n   marker, so the marker scrolls with the buttons and can't desync. */\n.tab-strip {\n  display: flex;\n  flex: 1 1 auto;\n  min-width: 0;\n  position: relative;\n  /* Paints the marker + buttons over .tab-buttons::after (the separator line) */\n  z-index: 1;\n  overflow-x: auto;\n  scrollbar-width: none;\n  /* Edge fades \u2014 a mask, not overlays, so it works over any background.\n     --fade-left/right are set from the scroll listener: 0px at a hard edge,\n     28px when more tabs continue past that side. */\n  --fade-left: 0px;\n  --fade-right: 0px;\n  -webkit-mask-image: linear-gradient(to right,\n    transparent, black var(--fade-left),\n    black calc(100% - var(--fade-right)), transparent);\n  mask-image: linear-gradient(to right,\n    transparent, black var(--fade-left),\n    black calc(100% - var(--fade-right)), transparent);\n}\n\n.tab-strip::-webkit-scrollbar {\n  display: none;\n}\n\n/* When every tab fits there is nothing to scroll, so drop the clipping \u2014\n   both overflow and the mask cut a custom marker's box-shadow off at the\n   strip edge. Set by updateOverflow(); clipping stays the pre-measurement\n   default so overflowing tabs can't spill for a frame on first render. */\n.tab-strip.unclipped {\n  overflow: visible;\n  -webkit-mask-image: none;\n  mask-image: none;\n}\n\n/* Marker wrapper \u2014 exposed as a CSS Part for custom marker styling */\n.marker-wrapper {\n  position: absolute;\n  z-index: 0;\n  /* Behind buttons */\n  pointer-events: none;\n  /* Don't block clicks */\n  transition: left var(--ty-tabs-transition-duration, 300ms) var(--ty-tabs-transition-easing, ease-in-out),\n    width var(--ty-tabs-transition-duration, 300ms) var(--ty-tabs-transition-easing, ease-in-out),\n    height var(--ty-tabs-transition-duration, 300ms) var(--ty-tabs-transition-easing, ease-in-out),\n    top var(--ty-tabs-transition-duration, 300ms) var(--ty-tabs-transition-easing, ease-in-out);\n}\n\n.default-marker {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  height: 3px;\n  width: 100%;\n  background: var(--ty-color-primary);\n  pointer-events: none;\n}\n\n/* Bottom placement: marker rides the top edge, next to the content it marks */\n.tabs-container[data-placement=\"bottom\"] .default-marker {\n  bottom: auto;\n  top: 0;\n}\n\n::slotted([slot=\"marker\"]) {\n  display: block;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n.tab-button {\n  /* Material's floor for SCROLLABLE tabs. 120px is the fixed-tab number and it\n     manufactured overflow: five short labels claimed 600px whether they needed\n     it or not. Equal-width rhythm is what the \"fixed\" attribute is for. */\n  min-width: var(--ty-tab-min-width, 72px);\n  /* Scrollable tabs keep their natural width and let the strip scroll \u2014 that is\n     the whole contract. Without this they are flex items with the default\n     shrink of 1, so they squeeze toward the floor and their labels ellipsize\n     before the strip ever overflows. Squeezing is what \"fixed\" is for. */\n  flex-shrink: 0;\n  padding: 6px 12px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font: inherit;\n  color: var(--ty-text-soft);\n  transition: var(--ty-local-transition, color 200ms, background-color 200ms);\n  white-space: nowrap;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  font-weight: var(--ty-font-bold);\n  font-size: var(--ty-font-sm);\n  position: relative;\n  /* Establish stacking context */\n  z-index: 10;\n  /* Above marker */\n}\n\n/* Fixed tabs: the bar is divided between them instead of scrolling. Material\n   calls this \"fixed tabs\" \u2014 for a small, known set of short labels. No\n   min-width floor, no overflow, no \"\u2026\". */\n.tabs-container[data-fixed] .tab-button {\n  flex: 1 1 0;\n  min-width: 0;\n}\n\n/* Fixed tabs only. A scrollable tab is never narrower than its label, so\n   ellipsizing there would hide text the user could simply scroll to. */\n.tabs-container[data-fixed] .tab-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tab-button[aria-selected=true] {\n  color: var(--ty-text-strong);\n}\n\n.tab-button[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.tab-button:focus-visible {\n  outline: 2px solid var(--ty-color-primary);\n  outline-offset: -2px;\n}\n\n/* Overflow \"more\" trigger (pill) + menu */\n.tab-overflow-trigger {\n  flex-shrink: 0;\n  align-self: center;\n  min-width: 36px;\n  height: 24px;\n  margin: 0 8px;\n  padding: 0 10px;\n  border: 1px solid var(--ty-border);\n  border-radius: 9999px;\n  background: transparent;\n  cursor: pointer;\n  color: var(--ty-text-soft);\n  font-size: 16px;\n  line-height: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 10;\n  transition: color 200ms, border-color 200ms;\n}\n\n.tab-overflow-trigger:hover {\n  color: var(--ty-text-strong);\n  border-color: var(--ty-text-soft);\n}\n\n.tab-overflow-trigger:focus-visible {\n  outline: 2px solid var(--ty-color-primary);\n  outline-offset: -2px;\n}\n\n.tab-overflow-menu {\n  display: flex;\n  flex-direction: column;\n  min-width: 160px;\n  max-height: 300px;\n  overflow-y: auto;\n  padding: var(--ty-spacing-2, 4px);\n  background: var(--ty-surface-floating);\n  border-radius: var(--ty-radius-md);\n  box-shadow: var(--ty-shadow-md, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1));\n}\n\n.tab-overflow-item {\n  padding: var(--ty-spacing-2, 6px) var(--ty-spacing-3, 12px);\n  border: none;\n  background: transparent;\n  text-align: left;\n  cursor: pointer;\n  border-radius: var(--ty-radius-md);\n  color: var(--ty-text);\n  font: inherit;\n  font-size: var(--ty-font-sm);\n  white-space: nowrap;\n}\n\n.tab-overflow-item:hover {\n  background: var(--ty-bg-neutral-soft);\n  color: var(--ty-text-strong);\n}\n\n.tab-overflow-item[data-active=\"true\"] {\n  color: var(--ty-color-primary);\n  font-weight: var(--ty-font-bold);\n}\n\n.tab-overflow-item[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Panels viewport \u2014 exposed as a CSS Part */\n.panels-viewport {\n  position: relative;\n  flex: 1;\n  overflow: hidden;\n  /* Critical: hides off-screen panels */\n  min-height: 0;\n  /* Allows flex child to shrink */\n}\n\n/* Panels wrapper slides horizontally */\n.panels-wrapper {\n  display: flex;\n  height: 100%;\n  transition: transform var(--ty-tabs-transition-duration, 300ms) var(--ty-tabs-transition-easing, ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .panels-wrapper {\n    transition-duration: 0ms !important;\n  }\n\n  .marker-wrapper {\n    transition-duration: 0ms !important;\n  }\n}\n\n::slotted(ty-tab) {\n  /* Carousel page width. --tabs-page-width is the measured pixel width, set by\n     the ResizeObserver for percentage-width tabs so every panel is exactly one\n     page wide. It is deliberately NOT --tabs-width: that one sizes :host, and\n     feeding a measured pixel value back into the host's own width is a\n     self-referential loop (see setupResizeObserver). */\n  width: var(--tabs-page-width, var(--tabs-width, 100%));\n  height: 100%;\n  flex-shrink: 0;\n}\n";