tyrell-components 1.0.0-RC13 → 1.0.0-RC15

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,308 +1,212 @@
-/**
- * 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) ===== */
 .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));
-}
-
-/* Empty state: muted placeholder 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: 1 1 auto;
-  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%;
 }
 `;
-//# 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,50 +1,39 @@
-/**
- * Step Component Styles
- */
 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}
 `;
-//# 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