tyrell-components 1.0.0-RC14 → 1.0.0-RC15

package/lib/styles/select.js

@@ -1,300 +1,212 @@
 export const selectStyles = `
-/* Compact skin hugs its content (field skin = base styles) */
 .select-stub.compact {
-  display: inline-flex;
-  flex-wrap: nowrap;
-  width: auto;
-  gap: 0.5rem;
-  /* extra right padding = room for the absolutely-positioned chevron */
-  padding: 0.5rem 2.25rem 0.5rem 0.875rem;
-}
-
-/* Consumer-provided trigger (slot="trigger"): no chrome at all */
+display: inline-flex;
+flex-wrap: nowrap;
+width: auto;
+gap: 0.5rem;
+padding: 0.5rem 2.25rem 0.5rem 0.875rem;
+}
 .select-stub.custom-trigger {
-  display: inline-block;
-  width: auto;
-  border: none;
-  background: none;
-  padding: 0;
-  min-height: 0;
-  border-radius: 0;
+display: inline-block;
+width: auto;
+border: none;
+background: none;
+padding: 0;
+min-height: 0;
+border-radius: 0;
 }
 .select-stub.custom-trigger:hover {
-  border: none;
+border: none;
 }
-
 .select-count {
-  flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.25rem;
-  height: 1.25rem;
-  padding: 0 0.375rem;
-  border-radius: 9999px;
-  /* --ty-text-primary never existed as a token — this silently fell back
-     to inherited/unset color. Now follows the select's own flavor. */
-  background: color-mix(in oklab, var(--select-accent, var(--ty-color-primary)) 15%, transparent);
-  color: var(--select-accent-bold, var(--ty-color-primary-strong));
-  font-size: var(--ty-font-xs);
-  font-weight: var(--ty-font-semibold);
-  font-style: normal;
+flex-shrink: 0;
+display: inline-flex;
+align-items: center;
+justify-content: center;
+min-width: 1.25rem;
+height: 1.25rem;
+padding: 0 0.375rem;
+border-radius: 9999px;
+background: color-mix(in oklab, var(--select-accent, var(--ty-color-primary)) 15%, transparent);
+color: var(--select-accent-bold, var(--ty-color-primary-strong));
+font-size: var(--ty-font-xs);
+font-weight: var(--ty-font-semibold);
+font-style: normal;
 }
 .select-count[hidden] {
-  display: none;
+display: none;
 }
-
-/* Clear (x) button — normal flex child of .select-stub, not absolutely
-   positioned like .dropdown-chevron: it just takes its own space in the
-   row, no padding-right gutter math needed. Lives in the trigger slot's
-   fallback content, so it's automatically absent under slot="trigger". */
 .select-clear {
-  flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1rem;
-  height: 1rem;
-  padding: 0;
-  border: none;
-  background: none;
-  color: var(--input-placeholder, var(--ty-input-placeholder));
-  cursor: pointer;
-  border-radius: var(--ty-radius-sm);
-  transition: var(--ty-local-transition, all 0.15s ease);
+flex-shrink: 0;
+display: inline-flex;
+align-items: center;
+justify-content: center;
+width: 1rem;
+height: 1rem;
+padding: 0;
+border: none;
+background: none;
+color: var(--input-placeholder, var(--ty-input-placeholder));
+cursor: pointer;
+border-radius: var(--ty-radius-sm);
+transition: var(--ty-local-transition, all 0.15s ease);
 }
 .select-clear[hidden] {
-  display: none;
+display: none;
 }
 .select-clear:hover {
-  /* Destructive utility action — neutral at rest, warns danger-red on
-     hover regardless of the field's own flavor. */
-  color: var(--ty-color-danger);
-  background-color: var(--ty-bg-danger-soft);
+color: var(--ty-color-danger);
+background-color: var(--ty-bg-danger-soft);
 }
 .select-clear svg {
-  width: 100%;
-  height: 100%;
-}
-
-/* Selection text (field skin): single line, ellipsis, input colors.
-   flex-basis 0, not auto — .select-stub is flex-wrap:wrap, and auto's
-   hypothetical size is the FULL untruncated text width (wrap-line
-   assignment happens before shrinking), which pushed fixed-size siblings
-   (.select-clear) onto a second line even though the text visibly had
-   room after truncating. 0 makes this item contribute ~nothing to the
-   line-fit check up front; grow/shrink + overflow:hidden still truncate
-   it identically. */
+width: 100%;
+height: 100%;
+}
 .select-stub .dropdown-placeholder {
-  font-style: normal;
-  flex: 1 1 0%;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--input-color, var(--ty-input-color));
-}
-
+font-style: normal;
+flex: 1 1 0%;
+min-width: 0;
+overflow: hidden;
+text-overflow: ellipsis;
+white-space: nowrap;
+color: var(--input-color, var(--ty-input-color));
+}
 .select-stub .dropdown-placeholder.placeholder-shown {
-  color: var(--input-placeholder, var(--ty-input-placeholder));
+color: var(--input-placeholder, var(--ty-input-placeholder));
 }
 .select-stub .dropdown-placeholder[hidden] {
-  display: none;
+display: none;
 }
-
-/* Single-select display clone (slot="selected"): the selected ty-option
-   projected into the stub — its own :host([cloned]) styling strips the
-   list-row chrome; here it just takes the text's flex slot. */
 .select-stub slot[name="selected"] {
-  display: none;
+display: none;
 }
 .select-stub.has-clone slot[name="selected"] {
-  display: block;
-  /* flex-basis 0, not auto — same reasoning as .dropdown-placeholder above:
-     .select-stub is flex-wrap:wrap, and auto's hypothetical size is the
-     clone's full untruncated text width, which pushes .select-clear onto
-     a second line. */
-  flex: 1 1 0%;
-  min-width: 0;
-  overflow: hidden;
+display: block;
+flex: 1 1 0%;
+min-width: 0;
+overflow: hidden;
 }
 .select-stub.compact.has-clone slot[name="selected"] {
-  flex: 0 1 auto;
+flex: 0 1 auto;
 }
-
-/* start/end slot content (icons etc.) — spacing comes from the stub's flex
-   gap; muted like ty-input adornments. end sits before the chevron. */
 .select-stub ::slotted([slot="start"]),
 .select-stub ::slotted([slot="end"]) {
-  flex-shrink: 0;
-  color: var(--ty-text-soft);
-}
-
-/* Compact skin: the text IS the trigger label — no grow, regular text color.
-   flex-basis: auto (not the field skin's 0%) — content-hugging needs its
-   natural content width as the starting point; 0% would collapse it since
-   grow is also 0 here (nothing left to expand it back out). */
+flex-shrink: 0;
+color: var(--ty-text-soft);
+}
 .select-stub.compact .dropdown-placeholder {
-  flex: 0 1 auto;
-  color: var(--ty-text);
+flex: 0 1 auto;
+color: var(--ty-text);
 }
-
-/* Trigger stays visible while the popup is open (the popup hides it) */
 .dropdown-wrapper:has(.dropdown-chevron.open) .select-stub {
-  opacity: 1;
-  pointer-events: auto;
+opacity: 1;
+pointer-events: auto;
 }
-
-/* One-panel popup: search header fused with the options list */
-
-/* Single unified shadow around the whole panel (header + list as one silhouette) */
 .dropdown-dialog.open {
-  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.14)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));
-}
-
-/* Card-style header: the search input keeps its own bordered-field look
-   (base styles) and sits inset in the panel, TagPicker-style — no divider,
-   whitespace separates it from the list. The header's OWN surface/border is
-   part of the floating panel's chrome, not a form field — --ty-surface-
-   floating/--ty-floating-border, matching .dropdown-options below it (same
-   reasoning as the base-panel fix: --ty-input-* is deliberately faint for
-   resting form fields and read as a missing/mismatched edge here). */
+filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.14)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));
+}
 .dropdown-header {
-  background: var(--ty-surface-floating);
-  border: 1px solid var(--ty-floating-border);
-  border-bottom: none;
-  border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;
-  padding: var(--ty-spacing-2) var(--ty-spacing-2) var(--ty-spacing-1);
+background: var(--ty-surface-floating);
+border: 1px solid var(--ty-floating-border);
+border-bottom: none;
+border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;
+padding: var(--ty-spacing-2) var(--ty-spacing-2) var(--ty-spacing-1);
 }
 .dropdown-dialog.position-below .dropdown-header {
-  margin-bottom: 0;
+margin-bottom: 0;
 }
 .dropdown-dialog.position-above .dropdown-header {
-  margin-top: 0;
-  border-top: none;
-  border-bottom: 1px solid var(--ty-floating-border);
-  border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);
-  padding: var(--ty-spacing-1) var(--ty-spacing-2) var(--ty-spacing-2);
-}
-
-/* Magnifier adornment inside the search field (header padding + field inset) */
+margin-top: 0;
+border-top: none;
+border-bottom: 1px solid var(--ty-floating-border);
+border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);
+padding: var(--ty-spacing-1) var(--ty-spacing-2) var(--ty-spacing-2);
+}
 .dropdown-search-icon {
-  position: absolute;
-  top: 50%;
-  left: calc(var(--ty-spacing-2) + var(--ty-spacing-3));
-  transform: translateY(-50%);
-  width: 1rem;
-  height: 1rem;
-  color: var(--input-placeholder, var(--ty-input-placeholder));
-  pointer-events: none;
+position: absolute;
+top: 50%;
+left: calc(var(--ty-spacing-2) + var(--ty-spacing-3));
+transform: translateY(-50%);
+width: 1rem;
+height: 1rem;
+color: var(--input-placeholder, var(--ty-input-placeholder));
+pointer-events: none;
 }
 .dropdown-search-icon svg {
-  width: 100%;
-  height: 100%;
-}
-
-/* Mobile header: flex row, icon flows inline before the input. Same 32x32
-   footprint as .mobile-close-button (18px glyph centered in the box, not a
-   bare 18px glyph flush at the edge) so the row has two matching bookends —
-   a bare icon on one side and a 32px circle on the other read as lopsided
-   even with equal flex gap on both sides. Matching them also centers the
-   search input's flex:1 fill symmetrically between the two. Fixed white +
-   18px glyph, same reasoning as .mobile-header-label — this sits on the
-   dark ::backdrop blur in both themes, not a theme surface. */
+width: 100%;
+height: 100%;
+}
 .dropdown-mode-mobile .mobile-header-content .dropdown-search-icon {
-  position: static;
-  transform: none;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  color: #ffffff;
+position: static;
+transform: none;
+flex-shrink: 0;
+display: flex;
+align-items: center;
+justify-content: center;
+width: 32px;
+height: 32px;
+color: #ffffff;
 }
 .dropdown-mode-mobile .mobile-header-content .dropdown-search-icon svg {
-  width: 18px;
-  height: 18px;
+width: 18px;
+height: 18px;
 }
-
-/* Search input: bordered field from base styles; just size + icon room */
 .dropdown-search-input {
-  min-height: 2.25rem;
-  padding-right: var(--ty-spacing-2);
-  /* room for the magnifier adornment */
-  padding-left: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));
+min-height: 2.25rem;
+padding-right: var(--ty-spacing-2);
+padding-left: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));
 }
-/* Trigger already has a chevron - no second one inside the search row */
 .dropdown-search-chevron {
-  display: none;
+display: none;
 }
-
-/* With the search row hidden nothing inside is focusable, so the <dialog>
-   itself receives focus on open — suppress its UA focus ring */
 .dropdown-dialog:focus,
 .dropdown-dialog:focus-visible {
-  outline: none;
+outline: none;
 }
-
-/* Search row hidden ('auto' below threshold / searchable="false"):
-   the options panel owns the whole silhouette */
 .dropdown-header[hidden] {
-  display: none;
+display: none;
 }
 .dropdown-header[hidden] ~ .dropdown-options-wrapper .dropdown-options {
-  border-top: 1px solid var(--ty-floating-border);
-  border-radius: var(--ty-radius-lg);
+border-top: 1px solid var(--ty-floating-border);
+border-radius: var(--ty-radius-lg);
 }
 .mobile-search-input[hidden],
 .mobile-header-content .dropdown-search-icon[hidden] {
-  display: none;
+display: none;
 }
-
-/* Options: vertical list rows fused under the search header.
-   No own shadow/animation - the panel appears as one via dialog opacity. */
 .dropdown-options {
-  flex-direction: column;
-  flex-wrap: nowrap;
-  align-items: stretch;
-  gap: 0;
-  /* Card-style list: rounded rows sit inset from the panel edges */
-  padding: var(--ty-spacing-1);
-  border-top: none;
-  border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);
-  box-shadow: none;
-  transform: none;
-  transition: none;
-  /* ~9-10 visible rows before scrolling (custom scrollbar, native hidden) */
-  max-height: 24rem;
+flex-direction: column;
+flex-wrap: nowrap;
+align-items: stretch;
+gap: 0;
+padding: var(--ty-spacing-1);
+border-top: none;
+border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);
+box-shadow: none;
+transform: none;
+transition: none;
+max-height: 24rem;
 }
 .dropdown-dialog.position-below .dropdown-options {
-  box-shadow: none;
+box-shadow: none;
 }
 .dropdown-dialog.position-above .dropdown-options {
-  border-top: 1px solid var(--ty-floating-border);
-  border-bottom: none;
-  border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;
-}
-
-/* Loading panel continues the fused silhouette exactly like .dropdown-options —
-   the base layer styles it as a floating card (radius + shadow), which left a
-   see-through gap under the search header while loading. */
+border-top: 1px solid var(--ty-floating-border);
+border-bottom: none;
+border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;
+}
 .dropdown-loading {
-  border-top: none;
-  border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);
-  box-shadow: none;
+border-top: none;
+border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);
+box-shadow: none;
 }
 .dropdown-dialog.position-above .dropdown-loading {
-  border-top: 1px solid var(--ty-floating-border);
-  border-bottom: none;
-  border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;
-}
-
-/* Selection tick lives inside ty-option (lucide check on [selected]) */
-
-/* Mobile modal: same vertical list */
+border-top: 1px solid var(--ty-floating-border);
+border-bottom: none;
+border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;
+}
 .dropdown-mode-mobile .section-content ::slotted(ty-option) {
-  display: block;
-  width: 100%;
+display: block;
+width: 100%;
 }
 `;

package/lib/styles/step.js

@@ -1,46 +1,39 @@
 import { customScrollbarStyles } from './custom-scrollbar.js';
 export const stepStyles = `
 :host {
-  width: var(--ty-wizard-width, 100%);
-  height: calc(var(--ty-wizard-height, 700px) - var(--ty-wizard-indicators-height, 120px));
-  display: block;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  transition: opacity var(--ty-wizard-transition-duration, 400ms) var(--ty-wizard-transition-easing, ease-in-out);
-}
-
+width: var(--ty-wizard-width, 100%);
+height: calc(var(--ty-wizard-height, 700px) - var(--ty-wizard-indicators-height, 120px));
+display: block;
+box-sizing: border-box;
+flex-shrink: 0;
+transition: opacity var(--ty-wizard-transition-duration, 400ms) var(--ty-wizard-transition-easing, ease-in-out);
+}
 @media (prefers-reduced-motion: reduce) {
-  :host {
-    transition-duration: 0ms !important;
-  }
+:host {
+transition-duration: 0ms !important;
+}
 }
-
 .step-wrapper {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  overflow: hidden;
+width: 100%;
+height: 100%;
+position: relative;
+overflow: hidden;
 }
-
 .step-panel {
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  box-sizing: border-box;
+width: 100%;
+height: 100%;
+overflow: auto;
+box-sizing: border-box;
 }
-
 .step-panel.ty-custom-scroll {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+scrollbar-width: none;
+-ms-overflow-style: none;
 }
-
 .step-panel.ty-custom-scroll::-webkit-scrollbar {
-  display: none;
+display: none;
 }
-
 .step-wrapper:hover .ty-scrollbar-track-y.has-overflow {
-  opacity: 1;
+opacity: 1;
 }
-
 ${customScrollbarStyles}
 `;

package/lib/styles/switch.js

@@ -1,10 +1,10 @@
 import { FLAVORS } from "../types/common.js";
 import { inputStyles } from "./input.js";
 const switchFlavor = (f, fb) => {
-    const tok = (s) => fb
-        ? `var(--ty-color-${f}${s}, var(--ty-color-${fb}${s}))`
-        : `var(--ty-color-${f}${s})`;
-    return `
+const tok = (s) => fb
+? `var(--ty-color-${f}${s}, var(--ty-color-${fb}${s}))`
+: `var(--ty-color-${f}${s})`;
+return `
 :host([flavor="${f}"])  { --switch-track: ${tok("")}; }
 :host([flavor="${f}+"]) { --switch-track: ${tok("-strong")}; }
 :host([flavor="${f}-"]) { --switch-track: ${tok("-soft")}; }
@@ -13,85 +13,64 @@ const switchFlavor = (f, fb) => {
 export const switchCustomFlavorCss = (base) => switchFlavor(base, "neutral");
 export const switchStyles = `
 ${inputStyles}
-
-/* Override input's :host so the switch sizes to its visual */
 :host {
-  display: inline-flex;
-  width: auto;
-  vertical-align: middle;
+display: inline-flex;
+width: auto;
+vertical-align: middle;
 }
-
-/* The switch container is just the visual */
 .switch-container {
-  display: inline-block;
-  cursor: pointer;
-  user-select: none;
-  outline: none;
-  vertical-align: middle;
+display: inline-block;
+cursor: pointer;
+user-select: none;
+outline: none;
+vertical-align: middle;
 }
-
 .switch-container.disabled {
-  cursor: not-allowed;
-  opacity: 0.55;
+cursor: not-allowed;
+opacity: 0.55;
 }
-
 .switch-container:focus-visible .switch-track,
 .switch-container.focused .switch-track {
-  box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);
+box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);
 }
-
 .switch-track {
-  position: relative;
-  flex-shrink: 0;
-  width: 36px;
-  height: 20px;
-  border-radius: 999px;
-  background: var(--ty-color-neutral-soft, var(--ty-input-border));
-  transition: var(--ty-local-transition, background-color 0.18s ease-in-out);
-  box-sizing: border-box;
+position: relative;
+flex-shrink: 0;
+width: 36px;
+height: 20px;
+border-radius: 999px;
+background: var(--ty-color-neutral-soft, var(--ty-input-border));
+transition: var(--ty-local-transition, background-color 0.18s ease-in-out);
+box-sizing: border-box;
 }
-
 .switch-thumb {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: white;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-  transition: var(--ty-local-transition, transform 0.18s ease-in-out, background-color 0.18s ease-in-out);
+position: absolute;
+top: 2px;
+left: 2px;
+width: 16px;
+height: 16px;
+border-radius: 50%;
+background: white;
+box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+transition: var(--ty-local-transition, transform 0.18s ease-in-out, background-color 0.18s ease-in-out);
 }
-
-/* Default (no flavor attribute) is primary — defaults don't reflect to the
-   host attribute, so the base rule's fallback carries the default look. */
 .switch-container[aria-checked="true"] .switch-track {
-  background: var(--switch-track, var(--ty-color-primary));
+background: var(--switch-track, var(--ty-color-primary));
 }
-
 .switch-container[aria-checked="true"] .switch-thumb {
-  transform: translateX(16px);
+transform: translateX(16px);
 }
-
 .switch-container.xs .switch-track { width: 26px; height: 14px; }
 .switch-container.xs .switch-thumb { width: 10px; height: 10px; }
 .switch-container.xs[aria-checked="true"] .switch-thumb { transform: translateX(12px); }
-
 .switch-container.sm .switch-track { width: 30px; height: 16px; }
 .switch-container.sm .switch-thumb { width: 12px; height: 12px; }
 .switch-container.sm[aria-checked="true"] .switch-thumb { transform: translateX(14px); }
-
-/* md is default — already set above */
-
 .switch-container.lg .switch-track { width: 44px; height: 24px; }
 .switch-container.lg .switch-thumb { width: 20px; height: 20px; }
 .switch-container.lg[aria-checked="true"] .switch-thumb { transform: translateX(20px); }
-
 .switch-container.xl .switch-track { width: 52px; height: 28px; }
 .switch-container.xl .switch-thumb { width: 24px; height: 24px; }
 .switch-container.xl[aria-checked="true"] .switch-thumb { transform: translateX(24px); }
-
-/* Flavor variants set --switch-track, consumed above */
 ${FLAVORS.map((f) => switchFlavor(f)).join("")}
-
 `;

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";