tyrell-components 1.0.0-RC13 → 1.0.0-RC14

package/lib/styles/select-base.js

@@ -1,17 +1,5 @@
-/**
- * Select Field Styles — shared chrome for ty-select (both single and
- * multiple modes). Formerly split across ty-dropdown / ty-multiselect;
- * those were consolidated into ty-select and this file kept the name.
- */
 import { FLAVORS } from "../types/common.js";
 import { customScrollbarStyles } from "./custom-scrollbar.js";
-/* Flavor rules only set --select-accent (border), --select-accent-bold
-   (hover/open border), and --select-ring (open focus ring); the .select-stub
-   rules below consume them. Doubles as the per-instance override API:
-   `ty-select { --select-accent: … }`. Neutral is skipped — it IS the default
-   unstyled chrome (--ty-input-* tokens), same convention as
-   ty-input/ty-date-picker. Fallback flavor `fb` is used for custom flavors
-   so missing tokens degrade to neutral. */
 const selectFlavor = (f, fb) => {
     const c = (s) => fb
         ? s
@@ -38,15 +26,12 @@ const selectFlavor = (f, fb) => {
 }
 `;
 };
-/** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
 export const selectCustomFlavorCss = (base) => selectFlavor(base, "neutral");
 export const selectBaseStyles = `
-/* Select-field-specific styles extending dropdown base styles */
-
 :host {
   display: block;
   width: 100%;
-  font-family: var(--ty-font-sans);
+  font-family: inherit;
   --mobile-border-color: var(--ty-border, #5858587d);
 }
 
@@ -59,8 +44,6 @@ export const selectBaseStyles = `
   width: auto;
 }
 
-/* ===== DIALOG POSITIONING SUPPORT ===== */
-
 .dropdown-dialog {
   position: fixed;
   width: var(--dropdown-width, 200px);
@@ -73,9 +56,18 @@ export const selectBaseStyles = `
   padding: var(--dropdown-padding, 20px);
   /* Modal handles z-index automatically */
 
-  /* Hidden by default */
   opacity: 0;
-  transition: opacity 400ms ease;
+  /* Panel-level entrance: individual scale/translate compose with the
+     collision-shift transform below. The single-select skin flattens the
+     inner .dropdown-options animation (select.ts: "panel appears as one"),
+     so the dialog carries the motion for both skins. */
+  scale: 0.96;
+  translate: 0 -6px;
+  transform-origin: top center;
+  transition:
+    opacity var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1)),
+    scale var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1)),
+    translate var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1));
 
   transform: translate(var(--dropdown-offset-x, 0px), var(--dropdown-offset-y, 0px));
   top: -1000px;
@@ -88,7 +80,6 @@ export const selectBaseStyles = `
   flex-direction: column;
 }
 
-/* Direction-based positioning with CSS classes */
 .dropdown-dialog.position-below {
   left: var(--dropdown-x);
   top: var(--dropdown-y);
@@ -99,6 +90,8 @@ export const selectBaseStyles = `
   bottom: var(--dropdown-y);
   top: auto;
   flex-direction: column-reverse;
+  translate: 0 6px;
+  transform-origin: bottom center;
 }
 
 .dropdown-dialog.position-above .dropdown-header {
@@ -110,13 +103,18 @@ export const selectBaseStyles = `
 }
 
 .dropdown-dialog.position-below .dropdown-options {
-  /* Optional: Add upward-pointing shadow for below positioning */
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1), var(--ty-shadow-md);
 }
 
-/* Animate when .open class is added */
+.dropdown-dialog.position-above .dropdown-options {
+  transform: translateY(6px) scale(0.96);
+  transform-origin: bottom center;
+}
+
 .dropdown-dialog.open {
   opacity: 1;
+  scale: 1;
+  translate: 0 0;
 }
 
 .dropdown-dialog.open .dropdown-options {
@@ -124,12 +122,35 @@ export const selectBaseStyles = `
   transform: translateY(0) scale(1);
 }
 
+/* Transitions never start on an element that was display:none last frame —
+   showModal() + .open land in the same frame, so the enter transition was
+   silently skipped. @starting-style supplies the first-frame "from" values
+   (this is the platform mechanism for animating dialog/top-layer entry). */
+@starting-style {
+  .dropdown-dialog.open {
+    opacity: 0;
+    scale: 0.96;
+    translate: 0 -6px;
+  }
+
+  .dropdown-dialog.open.position-above {
+    translate: 0 6px;
+  }
+
+  .dropdown-dialog.open .dropdown-options {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.96);
+  }
+
+  .dropdown-dialog.open.position-above .dropdown-options {
+    transform: translateY(6px) scale(0.96);
+  }
+}
+
 .dropdown-dialog::backdrop {
   background: transparent;
 }
 
-/* ===== DIALOG HEADER ===== */
-
 .dropdown-header {
   display: flex;
   align-items: center;
@@ -138,6 +159,7 @@ export const selectBaseStyles = `
 }
 
 .dropdown-search-input {
+  font-family: inherit;
   width: 100%;
   min-width: 0;
   box-sizing: border-box;
@@ -145,7 +167,7 @@ export const selectBaseStyles = `
   color: var(--input-color, var(--ty-input-color));
   border: 1px solid var(--input-border, var(--ty-input-border));
   border-radius: var(--ty-radius-md);
-  font-family: var(--ty-font-sans);
+  font-family: inherit;
   font-size: var(--ty-font-sm);
   line-height: var(--ty-leading-sm);
   letter-spacing: var(--ty-tracking-sm);
@@ -194,9 +216,6 @@ export const selectBaseStyles = `
   height: 100%;
 }
 
-/* ===== SELECT FIELD-SPECIFIC STYLES ===== */
-
-/* Select stub modifications */
 .select-stub {
   min-height: var(--ty-size-md);
   display: flex;
@@ -204,14 +223,13 @@ export const selectBaseStyles = `
   gap: 0.25rem;
   align-items: center;
   padding: 0 2.5rem 0 0.75rem;
-  /* Transitions - includes opacity for open state */
   transition: var(--ty-transition-all), opacity 0.2s ease;
   outline: none;
   background: var(--input-bg, var(--ty-input-bg));
   color: var(--input-color, var(--ty-input-color));
   border: 1px solid var(--select-accent, var(--input-border, var(--ty-input-border)));
   border-radius: var(--ty-radius-md);
-  font-family: var(--ty-font-sans);
+  font-family: inherit;
   font-size: var(--ty-font-sm);
   line-height: var(--ty-leading-sm);
   letter-spacing: var(--ty-tracking-sm);
@@ -221,8 +239,7 @@ export const selectBaseStyles = `
   box-sizing: border-box;
 }
 
-/* ===== SIZE MODIFIERS =====
-   buildStubClasses() always stamps exactly one size class on .select-stub.
+/* buildStubClasses() always stamps exactly one size class on .select-stub.
    min-height comes from the shared --ty-size-* tokens (same ones ty-input
    and ty-date-picker consume) so a given size is the same height on every
    field. Right padding stays 2.5rem for chevron room. Zero vertical
@@ -264,7 +281,6 @@ export const selectBaseStyles = `
   opacity: 0.6;
 }
 
-/* Hide stub when dropdown is open */
 .dropdown-wrapper:has(.dropdown-chevron.open) .select-stub {
   opacity: 0;
   pointer-events: none;
@@ -325,8 +341,6 @@ export const selectBaseStyles = `
   gap: 0.25rem;
 }
 
-/* ===== CHEVRON INDICATOR ===== */
-
 .dropdown-chevron {
   position: absolute;
   top: 50%;
@@ -349,7 +363,6 @@ export const selectBaseStyles = `
 }
 
 
-/* Tags container */
 .select-chips {
   display: flex;
   flex-wrap: wrap;
@@ -358,8 +371,11 @@ export const selectBaseStyles = `
   min-width: 0;
 }
 
+/* No flex-grow here — the placeholder only ever renders inside .select-stub,
+   and select.ts sets flex: 1 1 0% on it. A bare flex-grow: 1 (implicit
+   flex-basis:auto) is the wrap bug that fix exists to prevent; leaving it
+   here would silently reintroduce it if the specific rule ever moved. */
 .dropdown-placeholder {
-  flex-grow: 1;
   color: var(--input-placeholder, var(--ty-input-placeholder, #9ca3af));
   font-size: var(--ty-font-sm);
   line-height: var(--ty-leading-sm);
@@ -368,12 +384,10 @@ export const selectBaseStyles = `
   font-style: italic;
 }
 
-/* Placeholder styling when tags are present */
 .dropdown-placeholder.hidden {
   display: none;
 }
 
-/* Options area styling - Override for select */
 .dropdown-options {
   opacity: 0;
   /* Floating surface/border, not --input-* — this is a popup panel over
@@ -397,13 +411,12 @@ export const selectBaseStyles = `
     0 20px 25px -5px rgba(0, 0, 0, 0.1),
     0 10px 10px -5px rgba(0, 0, 0, 0.04);
 
-  /* Animation properties */
-  transform: translateY(-8px) scale(0.95);
+  transform: translateY(-6px) scale(0.96);
+  transform-origin: top center;
   transition:
-    opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),
-    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
+    opacity var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1)),
+    transform var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1));
 
-  /* Select-specific: flex wrap for tags */
   display: flex;
   flex-wrap: wrap;
   padding: 0.5rem;
@@ -426,12 +439,10 @@ export const selectBaseStyles = `
   position: relative;
 }
 
-/* Show custom scrollbar on hover */
 .dropdown-options-wrapper:hover .ty-scrollbar-track-y.has-overflow {
   opacity: 1;
 }
 
-/* Make ty-tags in dropdown clickable with pointer cursor */
 .dropdown-options ty-tag {
   user-select: none;
   transition: transform 0.1s ease;
@@ -445,17 +456,14 @@ export const selectBaseStyles = `
   transform: scale(0.98);
 }
 
-/* Visual feedback for selected tags in options */
 .dropdown-options ty-tag[selected] {
   opacity: 0.5;
 }
 
-/* Ensure ty-tag components in the select field have proper sizing */
 .select-chips ty-tag {
   max-width: 150px;
 }
 
-/* Responsive adjustments */
 @media (max-width: 640px) {
   .select-chips ty-tag {
     max-width: 100px;
@@ -463,7 +471,6 @@ export const selectBaseStyles = `
 }
 
 
-/* Ensure proper spacing in container layouts */
 .select-container {
   display: flex;
   flex-direction: column;
@@ -473,8 +480,6 @@ export const selectBaseStyles = `
      which is exactly the 4px misalignment this used to cause. */
 }
 
-/* ===== DROPDOWN WRAPPER & LABEL ===== */
-
 .dropdown-wrapper {
   position: relative;
   display: block;
@@ -493,7 +498,6 @@ export const selectBaseStyles = `
   align-items: center;
 }
 
-/* Required indicator - using SVG icon */
 .required-icon {
   display: inline-flex;
   align-items: center;
@@ -513,10 +517,6 @@ export const selectBaseStyles = `
   pointer-events: none;
 }
 
-/* ============================================================================
-   MOBILE MODAL STYLES
-   ============================================================================ */
-
 .dropdown-mode-mobile .mobile-dialog {
   position: fixed;
   top: 0;
@@ -567,7 +567,7 @@ export const selectBaseStyles = `
   display: flex;
   flex-direction: column;
   width: calc(100% - 32px); /* Side margins */
-  max-width: 400px; /* Constrained width like dropdown */
+  max-width: 400px;
   min-height: 200px;
   max-height: 90dvh; /* leaves room below the 6dvh padding-top, shrinks with keyboard */
   opacity: 0;
@@ -671,8 +671,8 @@ export const selectBaseStyles = `
   height: 18px;
 }
 
-/* Mobile search input (matches dropdown.ts) */
 .dropdown-mode-mobile .mobile-search-input {
+  font-family: inherit;
   flex: 1;
   min-width: 0;
   box-sizing: border-box;
@@ -681,7 +681,7 @@ export const selectBaseStyles = `
   border: 2px solid;
   border-color: var(--mobile-border-color);
   border-radius: var(--ty-radius-md);
-  font-family: var(--ty-font-sans);
+  font-family: inherit;
   font-size: var(--ty-font-sm);
   line-height: var(--ty-leading-sm);
   letter-spacing: var(--ty-tracking-sm);
@@ -700,10 +700,6 @@ export const selectBaseStyles = `
   border-color: var(--ty-border);
 }
 
-/* ============================================================================
-   MOBILE BODY & SECTIONS - UPDATED STRUCTURE
-   ============================================================================ */
-
 /* Mobile body - contains both sections */
 .dropdown-mode-mobile .mobile-body {
   position: relative;
@@ -721,7 +717,7 @@ export const selectBaseStyles = `
   border-color: var(--mobile-border-color);
 }
 
-/* ===== SECTION HEADERS - Labels, not buttons ===== */
+/* Section headers are labels, not buttons */
 
 .dropdown-mode-mobile .section-header {
   display: flex;
@@ -750,7 +746,7 @@ export const selectBaseStyles = `
   margin-left: 0.25rem;
 }
 
-/* ===== SELECTED STRIP - pinned, capped height, collapses when empty ===== */
+/* Selected strip: pinned, capped height, collapses when empty */
 
 .dropdown-mode-mobile .mobile-selected-section {
   display: flex;
@@ -783,7 +779,7 @@ export const selectBaseStyles = `
   mask-image: linear-gradient(to bottom, black calc(100% - 12px), transparent);
 }
 
-/* ===== AVAILABLE LIST - takes remaining space ===== */
+/* Available list takes the remaining space */
 
 .dropdown-mode-mobile .mobile-available-section {
   display: flex;
@@ -806,8 +802,7 @@ export const selectBaseStyles = `
   align-content: flex-start;
 }
 
-/* ===== EMPTY STATES =====
-   Selected strip collapses (no text needed).
+/* Selected strip collapses (no text needed).
    Available shows the empty message only when there are zero tags total. */
 
 .dropdown-mode-mobile .empty-state {
@@ -831,13 +826,11 @@ export const selectBaseStyles = `
   display: none;
 }
 
-/* ===== TAG STYLING IN MOBILE ===== */
-
 .dropdown-mode-mobile .section-content ::slotted(ty-tag) {
   cursor: pointer;
   user-select: none;
   transition: transform 0.1s ease;
-  margin: 2px 0; /* Vertical spacing like dropdown options */
+  margin: 2px 0;
   /* Fade + scale entry — replays on each (re)insertion when a tag moves
      between selected and available slots */
   animation: ty-select-tag-enter 180ms cubic-bezier(0.16, 1, 0.3, 1);
@@ -853,7 +846,6 @@ export const selectBaseStyles = `
   transform: scale(0.96);
 }
 
-/* Dimmed appearance for hidden filtered tags */
 .dropdown-mode-mobile .section-content ::slotted(ty-tag[hidden]) {
   display: none !important;
 }
@@ -869,8 +861,7 @@ export const selectBaseStyles = `
   }
 }
 
-/* ==================== LOADING STATE ====================
-   Spinner overlay shown inside the options area while the parent
+/* Spinner overlay shown inside the options area while the parent
    (external-search mode) is fetching. Search input stays usable.
 
    Carries its own surface so it stays visible even when the host
@@ -964,10 +955,8 @@ export const selectBaseStyles = `
   }
 }
 
-/* Custom scrollbar styles */
 ${customScrollbarStyles}
 
-/* ===== FLAVOR VARIANTS (set --select-accent*, consumed above) ===== */
+/* Flavor variants set --select-accent*, consumed above */
 ${FLAVORS.filter((f) => f !== "neutral").map((f) => selectFlavor(f)).join("")}
 `;
-//# sourceMappingURL=select-base.js.map

package/lib/styles/select.d.ts

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

package/lib/styles/select.js

@@ -1,15 +1,5 @@
-/**
- * Select Component Styles
- * Layered over the shared select-field styles (popup, mobile modal, search).
- *
- * Skins:
- * - default FIELD: the base .select-stub already carries the form-field
- *   look (width 100%, --ty-input-* tokens) — only text treatment added here
- * - .compact: content-hugging trigger for toolbars, count badge
- * - .custom-trigger (slot="trigger"): all chrome stripped
- */
 export const selectStyles = `
-/* ===== COMPACT skin: hugs content (field skin = base styles) ===== */
+/* Compact skin hugs its content (field skin = base styles) */
 .select-stub.compact {
   display: inline-flex;
   flex-wrap: nowrap;
@@ -105,7 +95,6 @@ export const selectStyles = `
   color: var(--input-color, var(--ty-input-color));
 }
 
-/* Empty state: muted placeholder color */
 .select-stub .dropdown-placeholder.placeholder-shown {
   color: var(--input-placeholder, var(--ty-input-placeholder));
 }
@@ -121,7 +110,11 @@ export const selectStyles = `
 }
 .select-stub.has-clone slot[name="selected"] {
   display: block;
-  flex: 1 1 auto;
+  /* 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;
 }
@@ -152,7 +145,7 @@ export const selectStyles = `
   pointer-events: auto;
 }
 
-/* ===== One-panel popup: search header fused with the options list ===== */
+/* 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 {
@@ -305,4 +298,3 @@ export const selectStyles = `
   width: 100%;
 }
 `;
-//# sourceMappingURL=select.js.map

package/lib/styles/step.d.ts

@@ -1,5 +1,4 @@
 /**
  * Step Component Styles
  */
-export declare const stepStyles = "\n:host {\n  width: var(--ty-wizard-width, 100%);\n  height: calc(var(--ty-wizard-height, 700px) - var(--ty-wizard-indicators-height, 120px));\n  display: block;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  transition: opacity var(--ty-wizard-transition-duration, 400ms) var(--ty-wizard-transition-easing, ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    transition-duration: 0ms !important;\n  }\n}\n\n.step-wrapper {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.step-panel {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  box-sizing: border-box;\n}\n\n.step-panel.ty-custom-scroll {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.step-panel.ty-custom-scroll::-webkit-scrollbar {\n  display: none;\n}\n\n.step-wrapper:hover .ty-scrollbar-track-y.has-overflow {\n  opacity: 1;\n}\n\n\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track     */\n/* ===================================== */\n\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/* ===================================== */\n/* Custom Scrollbar - Horizontal Track   */\n/* ===================================== */\n\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/* ===================================== */\n/* Touch devices - hide custom scrollbar */\n/* ===================================== */\n\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/* Respect reduced motion */\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";
-//# sourceMappingURL=step.d.ts.map
+export declare const stepStyles = "\n:host {\n  width: var(--ty-wizard-width, 100%);\n  height: calc(var(--ty-wizard-height, 700px) - var(--ty-wizard-indicators-height, 120px));\n  display: block;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  transition: opacity var(--ty-wizard-transition-duration, 400ms) var(--ty-wizard-transition-easing, ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    transition-duration: 0ms !important;\n  }\n}\n\n.step-wrapper {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.step-panel {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  box-sizing: border-box;\n}\n\n.step-panel.ty-custom-scroll {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.step-panel.ty-custom-scroll::-webkit-scrollbar {\n  display: none;\n}\n\n.step-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/step.js

@@ -1,6 +1,3 @@
-/**
- * Step Component Styles
- */
 import { customScrollbarStyles } from './custom-scrollbar.js';
 export const stepStyles = `
 :host {
@@ -47,4 +44,3 @@ export const stepStyles = `
 
 ${customScrollbarStyles}
 `;
-//# sourceMappingURL=step.js.map

package/lib/styles/switch.d.ts

@@ -8,4 +8,3 @@
 /** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
 export declare const switchCustomFlavorCss: (base: string) => string;
 export declare const switchStyles: string;
-//# sourceMappingURL=switch.d.ts.map

package/lib/styles/switch.js

@@ -1,17 +1,5 @@
-/**
- * Switch Component Styles
- * Track + thumb visual, ARIA role="switch".
- *
- * Reuses input-container/error-message rules from input styles for label
- * and error layout consistency.
- */
 import { FLAVORS } from "../types/common.js";
 import { inputStyles } from "./input.js";
-/* Flavor rules only set --switch-track; the single checked-state rule below
-   consumes it. The var doubles as the per-instance override API:
-   `ty-switch { --switch-track: … }` (outer-document host rules beat :host).
-   Optional fallback flavor `fb` is used for custom flavors so missing
-   tokens degrade to neutral instead of an unstyled track. */
 const switchFlavor = (f, fb) => {
     const tok = (s) => fb
         ? `var(--ty-color-${f}${s}, var(--ty-color-${fb}${s}))`
@@ -22,7 +10,6 @@ const switchFlavor = (f, fb) => {
 :host([flavor="${f}-"]) { --switch-track: ${tok("-soft")}; }
 `;
 };
-/** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
 export const switchCustomFlavorCss = (base) => switchFlavor(base, "neutral");
 export const switchStyles = `
 ${inputStyles}
@@ -34,7 +21,7 @@ ${inputStyles}
   vertical-align: middle;
 }
 
-/* ===== SWITCH CONTAINER (just the visual) ===== */
+/* The switch container is just the visual */
 .switch-container {
   display: inline-block;
   cursor: pointer;
@@ -53,7 +40,6 @@ ${inputStyles}
   box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);
 }
 
-/* ===== TRACK ===== */
 .switch-track {
   position: relative;
   flex-shrink: 0;
@@ -65,7 +51,6 @@ ${inputStyles}
   box-sizing: border-box;
 }
 
-/* ===== THUMB ===== */
 .switch-thumb {
   position: absolute;
   top: 2px;
@@ -78,7 +63,6 @@ ${inputStyles}
   transition: var(--ty-local-transition, transform 0.18s ease-in-out, background-color 0.18s ease-in-out);
 }
 
-/* ===== CHECKED STATE ===== */
 /* 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 {
@@ -89,7 +73,6 @@ ${inputStyles}
   transform: translateX(16px);
 }
 
-/* ===== SIZE VARIANTS ===== */
 .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); }
@@ -108,8 +91,7 @@ ${inputStyles}
 .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) ===== */
+/* Flavor variants set --switch-track, consumed above */
 ${FLAVORS.map((f) => switchFlavor(f)).join("")}
 
 `;
-//# sourceMappingURL=switch.js.map