tyrell-components 1.0.0-TC40 → 1.0.0-TC42

package/lib/styles/button.d.ts

@@ -1,17 +1,47 @@
 /**
  * Button Component Styles
  *
- * Three appearance variants × six semantic flavors × three tones (+/base/-).
+ * Three appearance variants × five semantic flavors × three tones (+/base/-).
  * Each variant uses ONE token system:
+ *
  *   - solid    → flat per-segment tokens --ty-solid-{flavor}{,-hover,-active,
  *               -strong,-soft,-fg}. Derived in tyrell-theme.css via OKLCH on
  *               3 axes (color / hover-active / theme chroma-hue); literal in
- *               tyrell.css. The component does no color math.
- *   - outlined → --ty-color-{flavor}-{strong|base|soft}  (text === border)
- *   - ghost    → --ty-color-{flavor}-{strong|base|soft}  (text), --ty-bg-{flavor}-soft (hover)
+ *               tyrell.css. The component does no color math for the fill.
+ *               Depth chrome (border + drop shadow) IS computed here, from
+ *               the fill, via relative color — see "Depth chrome" below.
+ *   - outlined → --ty-color-{flavor}-{strong|base|soft} (text === border at
+ *               rest); hover/active/focus always resolve to -strong,
+ *               whatever the resting tone was — see "Hover escalation".
+ *   - ghost    → same as outlined, text only (no border), --ty-bg-{flavor}-soft
+ *               background on hover.
+ *
+ * Neutral is the exception in both outlined and ghost: its `+` tone reads
+ * --ty-solid-neutral-strong (the ink dial solid buttons use — the only
+ * value that actually inverts light↔dark for full contrast) instead of the
+ * generic --ty-color-neutral-strong text-emphasis token. Base/soft neutral
+ * stay on the generic token like every other flavor.
+ *
+ * Depth chrome (solid only): a 1px border + soft drop shadow, both derived
+ * from the fill via oklch(from …), scaled by --ty-button-depth (0–1). The
+ * border reads the TONE'S RESTING fill (not the current/hover one) so it
+ * stays stationary while the fill rises toward it on interaction. Offset
+ * direction/magnitude is --ty-button-border-l (mode-flipped: no border at
+ * all for colored solids in dark, a lit edge in light) with its own
+ * stronger dial for neutral, --ty-button-border-l-neutral (ink has no hue
+ * to separate it from the canvas). Escape hatches --ty-solid-border-color
+ * / --ty-solid-border-width outrank the derivation entirely.
+ *
+ * Hover escalation (outlined/ghost): :hover/:active/:focus-visible always
+ * resolve to the -strong tier regardless of starting tone — soft and base
+ * both rise to the same peak on interaction. Composes with `muted` rather
+ * than fighting it (see the escalation rules themselves for the exact
+ * split) — a pressed muted button lands on the same color as a pressed
+ * plain one of the same flavor.
  *
  * Per-instance overrides via host CSS variables:
- *   --ty-button-bg, --ty-button-bg-hover, --ty-button-color, --ty-button-border
+ *   --ty-button-bg, --ty-button-bg-hover, --ty-button-color, --ty-button-border,
+ *   --ty-solid-border-color, --ty-solid-border-width
  */
 /** Rules for one custom (non-built-in) flavor across all three appearances. */
 export declare const buttonCustomFlavorCss: (base: string) => string;

package/lib/styles/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/styles/button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AA4EH,+EAA+E;AAC/E,eAAO,MAAM,qBAAqB,GAAI,MAAM,MAAM,WAC6C,CAAA;AAE/F,eAAO,MAAM,YAAY,QAkUsB,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/styles/button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AA6IH,+EAA+E;AAC/E,eAAO,MAAM,qBAAqB,GAAI,MAAM,MAAM,WAC6C,CAAA;AAE/F,eAAO,MAAM,YAAY,QA0WsB,CAAC"}

package/lib/styles/button.js

@@ -1,17 +1,47 @@
 /**
  * Button Component Styles
  *
- * Three appearance variants × six semantic flavors × three tones (+/base/-).
+ * Three appearance variants × five semantic flavors × three tones (+/base/-).
  * Each variant uses ONE token system:
+ *
  *   - solid    → flat per-segment tokens --ty-solid-{flavor}{,-hover,-active,
  *               -strong,-soft,-fg}. Derived in tyrell-theme.css via OKLCH on
  *               3 axes (color / hover-active / theme chroma-hue); literal in
- *               tyrell.css. The component does no color math.
- *   - outlined → --ty-color-{flavor}-{strong|base|soft}  (text === border)
- *   - ghost    → --ty-color-{flavor}-{strong|base|soft}  (text), --ty-bg-{flavor}-soft (hover)
+ *               tyrell.css. The component does no color math for the fill.
+ *               Depth chrome (border + drop shadow) IS computed here, from
+ *               the fill, via relative color — see "Depth chrome" below.
+ *   - outlined → --ty-color-{flavor}-{strong|base|soft} (text === border at
+ *               rest); hover/active/focus always resolve to -strong,
+ *               whatever the resting tone was — see "Hover escalation".
+ *   - ghost    → same as outlined, text only (no border), --ty-bg-{flavor}-soft
+ *               background on hover.
+ *
+ * Neutral is the exception in both outlined and ghost: its `+` tone reads
+ * --ty-solid-neutral-strong (the ink dial solid buttons use — the only
+ * value that actually inverts light↔dark for full contrast) instead of the
+ * generic --ty-color-neutral-strong text-emphasis token. Base/soft neutral
+ * stay on the generic token like every other flavor.
+ *
+ * Depth chrome (solid only): a 1px border + soft drop shadow, both derived
+ * from the fill via oklch(from …), scaled by --ty-button-depth (0–1). The
+ * border reads the TONE'S RESTING fill (not the current/hover one) so it
+ * stays stationary while the fill rises toward it on interaction. Offset
+ * direction/magnitude is --ty-button-border-l (mode-flipped: no border at
+ * all for colored solids in dark, a lit edge in light) with its own
+ * stronger dial for neutral, --ty-button-border-l-neutral (ink has no hue
+ * to separate it from the canvas). Escape hatches --ty-solid-border-color
+ * / --ty-solid-border-width outrank the derivation entirely.
+ *
+ * Hover escalation (outlined/ghost): :hover/:active/:focus-visible always
+ * resolve to the -strong tier regardless of starting tone — soft and base
+ * both rise to the same peak on interaction. Composes with `muted` rather
+ * than fighting it (see the escalation rules themselves for the exact
+ * split) — a pressed muted button lands on the same color as a pressed
+ * plain one of the same flavor.
  *
  * Per-instance overrides via host CSS variables:
- *   --ty-button-bg, --ty-button-bg-hover, --ty-button-color, --ty-button-border
+ *   --ty-button-bg, --ty-button-bg-hover, --ty-button-color, --ty-button-border,
+ *   --ty-solid-border-color, --ty-solid-border-width
  */
 import { FLAVORS } from '../types/common.js';
 /* One block per flavor, per appearance. Selectors and tokens are formulaic —
@@ -33,49 +63,111 @@ const tokenRef = (prefix, f, suffix, fb) => fb
    0.08 L nudges keep AA for any rest-passing fill, and re-deriving would
    flicker black↔white whenever a nudge crosses the fg threshold. */
 const nudged = (fillExpr, offsetDial) => `oklch(from ${fillExpr} calc(l + var(--ty-${offsetDial})) c h)`;
+/* Fill-relative nudge: moves TOWARD mid-lightness by the dial's magnitude,
+   whatever the fill. Needed for neutral+ — full-contrast ink sits at an L
+   extreme in both modes (near-black light / near-white dark), where the
+   MODE-directional dials clip into the L ceiling/floor and vanish. */
+const nudgedMid = (fillExpr, offsetDial) => `oklch(from ${fillExpr} calc(l + sign(0.5 - l) * abs(var(--ty-${offsetDial}))) c h)`;
+/* Solid rules assign --_solid-bg (the CURRENT fill — swapped by hover/
+   active) and --_solid-rest (the tone's RESTING fill — set only by rest/
+   tone rules, never by state rules). The base button.solid rule holds the
+   single set of formulas that consume them: background follows --_solid-bg;
+   the depth border derives from --_solid-rest so it stays STATIONARY while
+   the fill steps up on hover — the fill rises toward the lit edge instead
+   of dragging the edge along with it. */
 const solidFlavor = (f, fb) => {
     const solid = (suffix) => tokenRef('--ty-solid', f, suffix, fb);
+    // Neutral reads its own, stronger border offset (no hue separates ink
+    // from the canvas — see --ty-button-border-l-neutral in tyrell.css).
+    // Colored flavors must RESET to the plain dial: the bare button.solid
+    // rule (which matches every solid button) sets the neutral chain.
+    const borderL = f === 'neutral'
+        ? ' --_border-l: var(--ty-button-border-l-neutral, var(--ty-button-border-l, -0.15));'
+        : ' --_border-l: var(--ty-button-border-l, -0.15);';
+    // Neutral+ is full-contrast ink at an L extreme — its hover/active must
+    // move toward mid (fill-relative), not in the mode's direction.
+    const plusNudge = f === 'neutral' ? nudgedMid : nudged;
     return `
-button.solid.${f} { --_ring: ${tokenRef('--ty-color', f, '', fb)}; background: var(--ty-button-bg, var(--_muted-solid-bg, ${solid('')})); color: var(--ty-button-color, var(--_muted-solid-fg, ${solid('-fg')})); }
-button.solid.${f}.tone-plus  { background: var(--ty-button-bg, var(--_muted-solid-bg, ${solid('-strong')})); color: var(--ty-button-color, var(--_muted-solid-fg, ${solid('-strong-fg')})); }
-button.solid.${f}.tone-minus { background: var(--ty-button-bg, var(--_muted-solid-bg, ${solid('-soft')})); color: var(--ty-button-color, var(--_muted-solid-fg, ${solid('-soft-fg')})); }
-button.solid.${f}:hover:not(:disabled)  { background: var(--ty-button-bg-hover, ${solid('-hover')}); }
-button.solid.${f}:active:not(:disabled) { background: ${solid('-active')}; }
-button.solid.${f}.tone-plus:hover:not(:disabled)   { background: var(--ty-button-bg-hover, ${nudged(solid('-strong'), 'solid-hover-l')}); }
-button.solid.${f}.tone-plus:active:not(:disabled)  { background: ${nudged(solid('-strong'), 'solid-active-l')}; }
-button.solid.${f}.tone-minus:hover:not(:disabled)  { background: var(--ty-button-bg-hover, ${nudged(solid('-soft'), 'solid-hover-l')}); }
-button.solid.${f}.tone-minus:active:not(:disabled) { background: ${nudged(solid('-soft'), 'solid-active-l')}; }
+button.solid.${f} { --_ring: ${tokenRef('--ty-color', f, '', fb)}; --_solid-bg: var(--ty-button-bg, var(--_muted-solid-bg, ${solid('')})); --_solid-rest: var(--ty-button-bg, var(--_muted-solid-bg, ${solid('')}));${borderL} color: var(--ty-button-color, var(--_muted-solid-fg, ${solid('-fg')})); }
+button.solid.${f}.tone-plus  { --_solid-bg: var(--ty-button-bg, var(--_muted-solid-bg, ${solid('-strong')})); --_solid-rest: var(--ty-button-bg, var(--_muted-solid-bg, ${solid('-strong')})); color: var(--ty-button-color, var(--_muted-solid-fg, ${solid('-strong-fg')})); }
+button.solid.${f}.tone-minus { --_solid-bg: var(--ty-button-bg, var(--_muted-solid-bg, ${solid('-soft')})); --_solid-rest: var(--ty-button-bg, var(--_muted-solid-bg, ${solid('-soft')})); color: var(--ty-button-color, var(--_muted-solid-fg, ${solid('-soft-fg')})); }
+button.solid.${f}:hover:not(:disabled)  { --_solid-bg: var(--ty-button-bg-hover, ${solid('-hover')}); }
+button.solid.${f}:active:not(:disabled) { --_solid-bg: ${solid('-active')}; }
+button.solid.${f}.tone-plus:hover:not(:disabled)   { --_solid-bg: var(--ty-button-bg-hover, ${plusNudge(solid('-strong'), 'solid-hover-l')}); }
+button.solid.${f}.tone-plus:active:not(:disabled)  { --_solid-bg: ${plusNudge(solid('-strong'), 'solid-active-l')}; }
+button.solid.${f}.tone-minus:hover:not(:disabled)  { --_solid-bg: var(--ty-button-bg-hover, ${nudged(solid('-soft'), 'solid-hover-l')}); }
+button.solid.${f}.tone-minus:active:not(:disabled) { --_solid-bg: ${nudged(solid('-soft'), 'solid-active-l')}; }
 `;
 };
 const outlinedFlavor = (f, fb) => {
     const color = (suffix) => tokenRef('--ty-color', f, suffix, fb);
+    // Neutral+ only: bare text/border need page contrast, which the
+    // per-flavor ladder is FOR (it deliberately inverts per mode) — pointing
+    // base/soft at the solid ink ramp was a real bug (dark-mode contrast
+    // against the canvas measured 1.01/1.20 — invisible; WCAG minimum is
+    // 4.5). Strong stays on ink: at 0.93 dark / 0.15 light it's still 16.5:1,
+    // and matches solid's "+" for the loud-CTA identity that was the ask.
+    const textInk = (suffix) => (f === 'neutral' && suffix === '-strong' ? `var(--ty-solid-neutral${suffix})` : color(suffix));
     return `
 button.outlined.${f} {
-  color:        var(--ty-button-color,  var(--_muted-outlined-line, ${color('')}));
-  border-color: var(--ty-button-border, var(--_muted-outlined-line, ${color('')}));
+  color:        var(--ty-button-color,  var(--_muted-outlined-line, ${textInk('')}));
+  border-color: var(--ty-button-border, var(--_muted-outlined-line, ${textInk('')}));
 }
 button.outlined.${f}.tone-plus {
-  color:        var(--ty-button-color,  var(--_muted-outlined-line, ${color('-strong')}));
-  border-color: var(--ty-button-border, var(--_muted-outlined-line, ${color('-strong')}));
+  color:        var(--ty-button-color,  var(--_muted-outlined-line, ${textInk('-strong')}));
+  border-color: var(--ty-button-border, var(--_muted-outlined-line, ${textInk('-strong')}));
 }
 button.outlined.${f}.tone-minus {
-  color:        var(--ty-button-color,  var(--_muted-outlined-line, ${color('-soft')}));
-  border-color: var(--ty-button-border, var(--_muted-outlined-line, ${color('-soft')}));
+  color:        var(--ty-button-color,  var(--_muted-outlined-line, ${textInk('-soft')}));
+  border-color: var(--ty-button-border, var(--_muted-outlined-line, ${textInk('-soft')}));
 }
 button.outlined.${f}:hover:not(:disabled) {
   background: var(--ty-button-bg-hover, ${tokenRef('--ty-bg', f, '-soft', fb)});
 }
+/* Rest is whatever tone you picked; hover/active/focus always escalates to
+   the SAME peak — most-emphasized ("+") color, regardless of starting
+   tone. tone-plus is already there at rest, so this is a no-op for it.
+   :hover only, :not(.muted) — muted's hover-reveal is a DIFFERENT contract
+   (reveal the plain button's RESTING color, tested directly against it);
+   this rule would outrank that fallback and show strong instead.
+   :active/:focus-visible apply to muted too (no exclusion) — muted's own
+   reveal-on-press mechanism has much lower specificity than this rule, so
+   it simply wins outright, landing muted and plain on the same escalated
+   color when both are pressed — which is what muted's OWN test expects. */
+button.outlined.${f}:not(.muted):hover:not(:disabled),
+button.outlined.${f}:active:not(:disabled),
+button.outlined.${f}:focus-visible {
+  color:        var(--ty-button-color, ${textInk('-strong')});
+  border-color: var(--ty-button-border, ${textInk('-strong')});
+}
 `;
 };
 const ghostFlavor = (f, fb) => {
     const color = (suffix) => tokenRef('--ty-color', f, suffix, fb);
+    // Neutral+ only: bare text needs page contrast, which is what the
+    // per-flavor text ladder is FOR (it deliberately inverts per mode) — the
+    // solid ink ramp doesn't need to invert for readability, a fill reads as
+    // a shape regardless of its own lightness. Pointing base/soft neutral
+    // text at ink was a real bug: dark-mode contrast against the canvas
+    // measured 1.01/1.20 (WCAG minimum is 4.5), i.e. invisible. Strong stays
+    // on ink — at 0.93 dark / 0.15 light it's still far above threshold
+    // (16.5:1), and matches solid's "+" for the loud-CTA identity that was
+    // the actual ask.
+    const ink = (suffix) => (f === 'neutral' && suffix === '-strong' ? `var(--ty-solid-neutral${suffix})` : color(suffix));
     return `
-button.ghost.${f}            { color: var(--ty-button-color, var(--_muted-ghost-fg, ${color('')})); }
-button.ghost.${f}.tone-plus  { color: var(--ty-button-color, var(--_muted-ghost-fg, ${color('-strong')})); }
-button.ghost.${f}.tone-minus { color: var(--ty-button-color, var(--_muted-ghost-fg, ${color('-soft')})); }
+button.ghost.${f}            { color: var(--ty-button-color, var(--_muted-ghost-fg, ${ink('')})); }
+button.ghost.${f}.tone-plus  { color: var(--ty-button-color, var(--_muted-ghost-fg, ${ink('-strong')})); }
+button.ghost.${f}.tone-minus { color: var(--ty-button-color, var(--_muted-ghost-fg, ${ink('-soft')})); }
 button.ghost.${f}:hover:not(:disabled) {
   background: var(--ty-button-bg-hover, ${tokenRef('--ty-bg', f, '-soft', fb)});
 }
+/* See outlinedFlavor above — same escalation-to-peak, same :hover-only
+   :not(.muted) split, text only. */
+button.ghost.${f}:not(.muted):hover:not(:disabled),
+button.ghost.${f}:active:not(:disabled),
+button.ghost.${f}:focus-visible {
+  color: var(--ty-button-color, ${ink('-strong')});
+}
 `;
 };
 /** Rules for one custom (non-built-in) flavor across all three appearances. */
@@ -100,11 +192,14 @@ button {
   font-size: var(--ty-font-xs);
   line-height: var(--ty-leading-xs);
   letter-spacing: var(--ty-tracking-xs);
-  font-weight: var(--ty-font-semibold);
+  /* Mode-flipped weight dial (tyrell.css): medium in light, normal in dark —
+     light-on-dark text blooms, a fixed semibold read heavy there. Override
+     with --ty-weight-action at any scope. */
+  font-weight: var(--ty-weight-action, var(--ty-font-medium));
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
-  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+  transition: var(--ty-local-transition, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease);
   background: transparent;
   color: var(--ty-color-neutral);
   border: 1px solid transparent;
@@ -275,6 +370,13 @@ button.action.xl ::slotted(ty-icon) { height: 1.25rem; width: 1.25rem; }
    Hover reveal is gated to real pointers (touch has no hover); :active /
    :focus-visible cover the tap case so touch still gets the color on press. */
 
+/* --_muted-solid-* reads the SOLID neutral ink tokens — a fill's L doesn't
+   need page contrast. --_muted-outlined-line / --_muted-ghost-fg are bare
+   text/border and DO — they stay on the regular text ladder (it already
+   inverts correctly per mode), except tone-plus, which is legible AND
+   loud on the ink dial (16.5:1 dark, matches solid's "+" identity). Base/
+   soft on ink measured 1.01/1.20 dark contrast against the canvas —
+   invisible; WCAG minimum is 4.5. */
 button.muted {
   --_muted-solid-bg: var(--ty-solid-neutral);
   --_muted-solid-fg: var(--ty-solid-neutral-fg);
@@ -283,11 +385,16 @@ button.muted {
 }
 button.muted.tone-plus {
   --_muted-solid-bg: var(--ty-solid-neutral-strong);
-  --_muted-outlined-line: var(--ty-color-neutral-strong);
-  --_muted-ghost-fg: var(--ty-color-neutral-strong);
+  /* fg must track the tone's fill: neutral+ is inverted ink in dark mode
+     (white fill), so inheriting base neutral's white fg would be
+     white-on-white. */
+  --_muted-solid-fg: var(--ty-solid-neutral-strong-fg);
+  --_muted-outlined-line: var(--ty-solid-neutral-strong);
+  --_muted-ghost-fg: var(--ty-solid-neutral-strong);
 }
 button.muted.tone-minus {
   --_muted-solid-bg: var(--ty-solid-neutral-soft);
+  --_muted-solid-fg: var(--ty-solid-neutral-soft-fg);
   --_muted-outlined-line: var(--ty-color-neutral-soft);
   --_muted-ghost-fg: var(--ty-color-neutral-soft);
 }
@@ -343,26 +450,51 @@ button.pill.xl:has(ty-icon:only-child) { min-width: 2.5rem; min-height: 2.5rem;
    ============================================================ */
 
 button.solid {
-  border: none;
   --_ring: var(--ty-color-neutral);
-  background: var(--ty-button-bg, var(--ty-solid-neutral));
-  color:      var(--ty-button-color, var(--ty-solid-neutral-fg));
-}
-button.solid.tone-plus  { background: var(--ty-button-bg, var(--ty-solid-neutral-strong)); color: var(--ty-button-color, var(--ty-solid-neutral-strong-fg)); }
-button.solid.tone-minus { background: var(--ty-button-bg, var(--ty-solid-neutral-soft)); color: var(--ty-button-color, var(--ty-solid-neutral-soft-fg)); }
-button.solid:hover:not(:disabled)  { background: var(--ty-button-bg-hover, var(--ty-solid-neutral-hover)); }
-button.solid:active:not(:disabled) { background: var(--ty-solid-neutral-active); }
+  --_solid-bg: var(--ty-button-bg, var(--ty-solid-neutral));
+  --_solid-rest: var(--ty-button-bg, var(--ty-solid-neutral));
+  /* Bare .solid is the flavorless default = neutral ink, so it takes the
+     neutral border offset; colored flavor rules reset this to the plain
+     dial. */
+  --_border-l: var(--ty-button-border-l-neutral, var(--ty-button-border-l, -0.15));
+  background: var(--_solid-bg);
+  color: var(--ty-button-color, var(--ty-solid-neutral-fg));
+  /* Depth chrome — border + drop shadow, both scaled by --ty-button-depth.
+     (A top-edge sheen — inset 0 1px 0 <lightened fill> — used to live here
+     too; dropped, it read as a dizzying bright line rather than a subtle
+     highlight.) depth 0 = border matches fill exactly and the shadow goes
+     transparent — pixel-flat, but the 1px border stays in the layout so
+     toggling depth never shifts geometry (and solid now shares the same
+     box as outlined/ghost, which always had a 1px border).
+     --ty-button-border-l flips sign with the mode (tyrell.css): dark mode
+     runs a LIGHTER-than-fill hairline (fills read washed-out against dark
+     surfaces without a lit edge), light mode a slightly darker one.
+     Direct escape hatches outrank the derivation: --ty-solid-border-color
+     pins the border to ANY color (the L-offset dials stop mattering), and
+     --ty-solid-border-width changes thickness (widths ≠ 1px do shift
+     geometry — that's inherent).
+     Browsers without relative color drop these declarations: border falls
+     back to the base button's 1px transparent, shadows to none. */
+  border: var(--ty-solid-border-width, 1px) solid
+    var(--ty-solid-border-color,
+        oklch(from var(--_solid-rest, var(--_solid-bg)) calc(l + var(--_border-l, -0.15) * var(--ty-button-depth, 0.35)) c h));
+  box-shadow: 0 1px 2px oklch(0 0 0 / calc(0.4 * var(--ty-button-depth, 0.35)));
+}
+button.solid.tone-plus  { --_solid-bg: var(--ty-button-bg, var(--ty-solid-neutral-strong)); --_solid-rest: var(--ty-button-bg, var(--ty-solid-neutral-strong)); color: var(--ty-button-color, var(--ty-solid-neutral-strong-fg)); }
+button.solid.tone-minus { --_solid-bg: var(--ty-button-bg, var(--ty-solid-neutral-soft)); --_solid-rest: var(--ty-button-bg, var(--ty-solid-neutral-soft)); color: var(--ty-button-color, var(--ty-solid-neutral-soft-fg)); }
+button.solid:hover:not(:disabled)  { --_solid-bg: var(--ty-button-bg-hover, var(--ty-solid-neutral-hover)); }
+button.solid:active:not(:disabled) { --_solid-bg: var(--ty-solid-neutral-active); }
 button.solid.tone-plus:hover:not(:disabled) {
-  background: var(--ty-button-bg-hover, oklch(from var(--ty-solid-neutral-strong) calc(l + var(--ty-solid-hover-l)) c h));
+  --_solid-bg: var(--ty-button-bg-hover, oklch(from var(--ty-solid-neutral-strong) calc(l + sign(0.5 - l) * abs(var(--ty-solid-hover-l))) c h));
 }
 button.solid.tone-plus:active:not(:disabled) {
-  background: oklch(from var(--ty-solid-neutral-strong) calc(l + var(--ty-solid-active-l)) c h);
+  --_solid-bg: oklch(from var(--ty-solid-neutral-strong) calc(l + sign(0.5 - l) * abs(var(--ty-solid-active-l))) c h);
 }
 button.solid.tone-minus:hover:not(:disabled) {
-  background: var(--ty-button-bg-hover, oklch(from var(--ty-solid-neutral-soft) calc(l + var(--ty-solid-hover-l)) c h));
+  --_solid-bg: var(--ty-button-bg-hover, oklch(from var(--ty-solid-neutral-soft) calc(l + var(--ty-solid-hover-l)) c h));
 }
 button.solid.tone-minus:active:not(:disabled) {
-  background: oklch(from var(--ty-solid-neutral-soft) calc(l + var(--ty-solid-active-l)) c h);
+  --_solid-bg: oklch(from var(--ty-solid-neutral-soft) calc(l + var(--ty-solid-active-l)) c h);
 }
 
 ${FLAVORS.map((f) => solidFlavor(f)).join('')}

package/lib/styles/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/styles/button.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/styles/button.ts"],"names":[],"mappings":"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"}

package/lib/styles/calendar-month.js

@@ -140,7 +140,7 @@ export const calendarMonthStyles = `
   background-color: var(--ty-calendar-day-bg, transparent);
   color: var(--ty-calendar-day-color, var(--ty-calendar-muted, var(--ty-text)));
   cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease;
+  transition: var(--ty-local-transition, background-color 0.15s ease, color 0.15s ease);
 
   /* Typography */
   font-weight: 400;

package/lib/styles/calendar-navigation.d.ts

@@ -2,5 +2,5 @@
  * Calendar Navigation Styles
  * Clean, modern design with proper visual hierarchy and size variants
  */
-export declare const calendarNavigationStyles = "\n/* ============================================================================\n   Size Variants (CSS Custom Properties)\n   ============================================================================ */\n\n/* Theming tokens applied as var(--ty-calendar-nav-*, <default>) at point of\n   use (NOT on :host) so consumers can override them from outside \u2014 this\n   component is nested inside ty-calendar's shadow, so a :host default would\n   block inherited overrides. --ty-calendar-accent still cascades in. */\n\n:host([data-size=\"md\"]) {\n  --nav-btn-size: 2rem;\n  --nav-btn-icon-size: 1.25rem;\n  --nav-font-size: 1rem;\n  --nav-padding: 0.5rem 0.75rem;\n  --nav-default-width: 280px;\n}\n\n:host([data-size=\"sm\"]) {\n  --nav-btn-size: 1.5rem;\n  --nav-btn-icon-size: 1rem;\n  --nav-font-size: 0.875rem;\n  --nav-padding: 0.375rem 0.5rem;\n  --nav-default-width: 240px;\n}\n\n:host([data-size=\"lg\"]) {\n  --nav-btn-size: 2.5rem;\n  --nav-btn-icon-size: 1.5rem;\n  --nav-font-size: 1.125rem;\n  --nav-padding: 0.625rem 1rem;\n  --nav-default-width: 360px;\n}\n\n/* ============================================================================\n   Main Navigation Header\n   ============================================================================ */\n\n.calendar-navigation-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--nav-padding);\n  font-family: system-ui, sans-serif;\n  user-select: none;\n  width: var(--nav-width, var(--nav-default-width));\n  box-sizing: border-box;\n}\n\n/* ============================================================================\n   Navigation Groups (Left, Center, Right)\n   ============================================================================ */\n\n.nav-group {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.nav-group-left,\n.nav-group-right {\n  flex: 0 0 auto;\n}\n\n.nav-group-center {\n  flex: 1;\n  justify-content: center;\n}\n\n/* ============================================================================\n   Navigation Buttons\n   ============================================================================ */\n\n.nav-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--nav-btn-size);\n  height: var(--nav-btn-size);\n  padding: 0;\n  border: none;\n  border-radius: var(--ty-radius-base);\n  background-color: transparent;\n  color: var(--ty-calendar-nav-color, var(--ty-color-neutral));\n  cursor: pointer;\n  transition: all 0.15s ease;\n  outline: none;\n}\n\n.nav-btn:hover {\n  background-color: var(--ty-calendar-nav-hover-bg, var(--ty-bg-neutral-soft));\n  color: var(--ty-calendar-nav-hover-color, var(--ty-color-neutral-strong));\n}\n\n.nav-btn:active {\n  background-color: var(--ty-calendar-nav-active-bg, var(--ty-bg-neutral));\n  transform: scale(0.95);\n}\n\n.nav-btn:disabled {\n  opacity: 0.35;\n  cursor: default;\n  pointer-events: none;\n}\n\n.nav-btn:focus-visible {\n  outline: 2px solid var(--ty-calendar-nav-focus-outline, var(--ty-calendar-accent, var(--ty-color-primary)));\n  outline-offset: 2px;\n}\n\n/* SVG sizing */\n.nav-btn svg {\n  width: var(--nav-btn-icon-size);\n  height: var(--nav-btn-icon-size);\n  display: block;\n}\n\n/* ============================================================================\n   Month/Year Display (Center)\n   ============================================================================ */\n\n.month-year-display {\n  font-size: var(--nav-font-size);\n  font-weight: 600;\n  color: var(--ty-calendar-nav-title-color, var(--ty-color-neutral-strong));\n  text-align: center;\n  white-space: nowrap;\n  letter-spacing: -0.01em;\n}\n";
+export declare const calendarNavigationStyles = "\n/* ============================================================================\n   Size Variants (CSS Custom Properties)\n   ============================================================================ */\n\n/* Theming tokens applied as var(--ty-calendar-nav-*, <default>) at point of\n   use (NOT on :host) so consumers can override them from outside \u2014 this\n   component is nested inside ty-calendar's shadow, so a :host default would\n   block inherited overrides. --ty-calendar-accent still cascades in. */\n\n:host([data-size=\"md\"]) {\n  --nav-btn-size: 2rem;\n  --nav-btn-icon-size: 1.25rem;\n  --nav-font-size: 1rem;\n  --nav-padding: 0.5rem 0.75rem;\n  --nav-default-width: 280px;\n}\n\n:host([data-size=\"sm\"]) {\n  --nav-btn-size: 1.5rem;\n  --nav-btn-icon-size: 1rem;\n  --nav-font-size: 0.875rem;\n  --nav-padding: 0.375rem 0.5rem;\n  --nav-default-width: 240px;\n}\n\n:host([data-size=\"lg\"]) {\n  --nav-btn-size: 2.5rem;\n  --nav-btn-icon-size: 1.5rem;\n  --nav-font-size: 1.125rem;\n  --nav-padding: 0.625rem 1rem;\n  --nav-default-width: 360px;\n}\n\n/* ============================================================================\n   Main Navigation Header\n   ============================================================================ */\n\n.calendar-navigation-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--nav-padding);\n  font-family: system-ui, sans-serif;\n  user-select: none;\n  width: var(--nav-width, var(--nav-default-width));\n  box-sizing: border-box;\n}\n\n/* ============================================================================\n   Navigation Groups (Left, Center, Right)\n   ============================================================================ */\n\n.nav-group {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.nav-group-left,\n.nav-group-right {\n  flex: 0 0 auto;\n}\n\n.nav-group-center {\n  flex: 1;\n  justify-content: center;\n}\n\n/* ============================================================================\n   Navigation Buttons\n   ============================================================================ */\n\n.nav-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--nav-btn-size);\n  height: var(--nav-btn-size);\n  padding: 0;\n  border: none;\n  border-radius: var(--ty-radius-base);\n  background-color: transparent;\n  color: var(--ty-calendar-nav-color, var(--ty-color-neutral));\n  cursor: pointer;\n  transition: var(--ty-local-transition, all 0.15s ease);\n  outline: none;\n}\n\n.nav-btn:hover {\n  background-color: var(--ty-calendar-nav-hover-bg, var(--ty-bg-neutral-soft));\n  color: var(--ty-calendar-nav-hover-color, var(--ty-color-neutral-strong));\n}\n\n.nav-btn:active {\n  background-color: var(--ty-calendar-nav-active-bg, var(--ty-bg-neutral));\n  transform: scale(0.95);\n}\n\n.nav-btn:disabled {\n  opacity: 0.35;\n  cursor: default;\n  pointer-events: none;\n}\n\n.nav-btn:focus-visible {\n  outline: 2px solid var(--ty-calendar-nav-focus-outline, var(--ty-calendar-accent, var(--ty-color-primary)));\n  outline-offset: 2px;\n}\n\n/* SVG sizing */\n.nav-btn svg {\n  width: var(--nav-btn-icon-size);\n  height: var(--nav-btn-icon-size);\n  display: block;\n}\n\n/* ============================================================================\n   Month/Year Display (Center)\n   ============================================================================ */\n\n.month-year-display {\n  font-size: var(--nav-font-size);\n  font-weight: 600;\n  color: var(--ty-calendar-nav-title-color, var(--ty-color-neutral-strong));\n  text-align: center;\n  white-space: nowrap;\n  letter-spacing: -0.01em;\n}\n";
 //# sourceMappingURL=calendar-navigation.d.ts.map

package/lib/styles/calendar-navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar-navigation.d.ts","sourceRoot":"","sources":["../../src/styles/calendar-navigation.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,wBAAwB,snHAiIpC,CAAC"}
+{"version":3,"file":"calendar-navigation.d.ts","sourceRoot":"","sources":["../../src/styles/calendar-navigation.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,wBAAwB,kpHAiIpC,CAAC"}

package/lib/styles/calendar-navigation.js

@@ -87,7 +87,7 @@ export const calendarNavigationStyles = `
   background-color: transparent;
   color: var(--ty-calendar-nav-color, var(--ty-color-neutral));
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: var(--ty-local-transition, all 0.15s ease);
   outline: none;
 }
 

package/lib/styles/checkbox.js

@@ -37,7 +37,7 @@ export const checkboxStyles = `
   display: inline-flex;
   align-items: center;
   outline: none;
-  transition: all 0.15s ease-in-out;
+  transition: var(--ty-local-transition, all 0.15s ease-in-out);
   user-select: none;
   cursor: pointer;
   border-radius: 6px;
@@ -64,7 +64,7 @@ export const checkboxStyles = `
   align-items: center;
   justify-content: center;
   color: inherit;
-  transition: color 0.15s ease-in-out;
+  transition: var(--ty-local-transition, color 0.15s ease-in-out);
   pointer-events: none;
   /* Let the container handle the click */
 }

package/lib/styles/copy.js

@@ -89,7 +89,7 @@ export const copyStyles = `
 /* Hover state — flavor-soft background (primary by default) */
 .input-wrapper:not(.disabled):hover {
   background: var(--copy-bg-hover, var(--ty-bg-primary-soft));
-  transition: background 0.2s ease;
+  transition: var(--ty-local-transition, background 0.2s ease);
 }
 
 /* Copy button */
@@ -104,7 +104,7 @@ export const copyStyles = `
   border: none;
   background: transparent;
   color: var(--copy-color, var(--ty-text-soft));
-  transition: color 0.2s ease, transform 0.2s ease;
+  transition: var(--ty-local-transition, color 0.2s ease, transform 0.2s ease);
   padding: 0;
   margin: 0;
 }

package/lib/styles/custom-scrollbar.d.ts

@@ -2,5 +2,5 @@
  * Shared CSS for CustomScrollbar utility
  * Include this in any component that uses CustomScrollbar
  */
-export declare const customScrollbarStyles = "\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: 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: 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";
+export declare const customScrollbarStyles = "\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";
 //# sourceMappingURL=custom-scrollbar.d.ts.map

package/lib/styles/custom-scrollbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"custom-scrollbar.d.ts","sourceRoot":"","sources":["../../src/styles/custom-scrollbar.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,qBAAqB,urIAuJjC,CAAC"}
+{"version":3,"file":"custom-scrollbar.d.ts","sourceRoot":"","sources":["../../src/styles/custom-scrollbar.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,qBAAqB,+uIAuJjC,CAAC"}

package/lib/styles/custom-scrollbar.js

@@ -53,7 +53,7 @@ export const customScrollbarStyles = `
   min-height: var(--ty-scrollbar-thumb-min-height, 30px);
   background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));
   border-radius: var(--ty-scrollbar-radius, 4px);
-  transition: background 0.15s ease-out;
+  transition: var(--ty-local-transition, background 0.15s ease-out);
   box-sizing: border-box;
   border: 1px solid transparent;
 }
@@ -118,7 +118,7 @@ export const customScrollbarStyles = `
   min-width: var(--ty-scrollbar-thumb-min-height, 30px);
   background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));
   border-radius: var(--ty-scrollbar-radius, 4px);
-  transition: background 0.15s ease-out;
+  transition: var(--ty-local-transition, background 0.15s ease-out);
   box-sizing: border-box;
   border: 1px solid transparent;
 }

package/lib/styles/date-picker.js

@@ -231,7 +231,7 @@ ${FLAVORS.filter((f) => f !== "neutral").map((f) => datePickerFlavor(f)).join(""
   color: var(--ty-color-neutral-soft);
   cursor: pointer;
   border-radius: var(--ty-radius-sm);
-  transition: all 0.15s ease;
+  transition: var(--ty-local-transition, all 0.15s ease);
   pointer-events: auto;
 }
 

package/lib/styles/file-upload.d.ts

@@ -1,2 +1,2 @@
-export declare const fileUploadStyles = "\n:host {\n  display: block;\n  font-family: var(--ty-font-sans);\n  width: 100%;\n}\n\n.file-upload-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* ===== LABEL ===== */\n\n.upload-label {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-medium);\n  color: var(--ty-label-color);\n  margin-bottom: 6px;\n  padding-left: 4px;\n  display: flex;\n  align-items: center;\n}\n\n.required-icon {\n  color: var(--ty-color-danger);\n  margin-left: 4px;\n  font-size: 0.75rem;\n  line-height: 1;\n}\n\n/* ===== DROP ZONE ===== */\n\n.drop-zone {\n  border: 2px dashed var(--ty-border);\n  border-radius: var(--ty-radius-base);\n  padding: 2rem 1.5rem;\n  text-align: center;\n  cursor: pointer;\n  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;\n  outline: none;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  min-height: 140px;\n  user-select: none;\n}\n\n.drop-zone:hover:not(.disabled) {\n  border-color: var(--ty-input-border-hover);\n  background: var(--ty-surface-content);\n}\n\n.drop-zone.focused {\n  border-color: var(--ty-input-border-focus);\n  box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);\n}\n\n.drop-zone.drag-active {\n  border-color: var(--ty-color-primary);\n  border-style: solid;\n  background: var(--ty-bg-primary-);\n}\n\n.drop-zone.drag-active .upload-icon {\n  color: var(--ty-color-primary);\n  transform: translateY(-2px);\n}\n\n.drop-zone.has-files {\n  min-height: 80px;\n  padding: 1.25rem 1.5rem;\n}\n\n.drop-zone.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.drop-zone.error {\n  border-color: var(--ty-color-danger);\n}\n\n.drop-zone.error:not(.disabled) {\n  background: var(--ty-bg-danger-);\n}\n\n/* ===== UPLOAD ICON ===== */\n\n.upload-icon {\n  color: var(--ty-text-faint);\n  width: 2.5rem;\n  height: 2.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: color 0.15s ease, transform 0.15s ease;\n  pointer-events: none;\n}\n\n.upload-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* ===== HINT TEXT ===== */\n\n.upload-hint {\n  color: var(--ty-text-soft);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  pointer-events: none;\n}\n\n.browse-link {\n  color: var(--ty-color-primary);\n  font-weight: var(--ty-font-medium);\n}\n\n.upload-sub-hint {\n  color: var(--ty-text-faint);\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  pointer-events: none;\n}\n\n/* ===== FILE LIST ===== */\n\n.file-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  margin-top: 0.5rem;\n}\n\n.file-item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  border-radius: var(--ty-radius-base);\n  background: var(--ty-surface-content);\n  border: 1px solid var(--ty-border-soft);\n}\n\n.file-icon {\n  color: var(--ty-text-faint);\n  flex-shrink: 0;\n  width: 1rem;\n  height: 1rem;\n  display: flex;\n  align-items: center;\n}\n\n.file-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n.file-name {\n  flex: 1;\n  font-size: var(--ty-font-sm);\n  color: var(--ty-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.file-size {\n  font-size: var(--ty-font-xs);\n  color: var(--ty-text-faint);\n  flex-shrink: 0;\n  font-variant-numeric: tabular-nums;\n}\n\n.file-remove {\n  flex-shrink: 0;\n  cursor: pointer;\n  color: var(--ty-text-faint);\n  width: 1.25rem;\n  height: 1.25rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  transition: color 0.15s ease, background-color 0.15s ease;\n  border: none;\n  background: none;\n  padding: 0;\n  outline: none;\n}\n\n.file-remove:hover {\n  color: var(--ty-color-danger);\n  background: var(--ty-bg-danger-);\n}\n\n.file-remove:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-color-danger);\n}\n\n.file-remove svg {\n  width: 12px;\n  height: 12px;\n}\n\n/* ===== ERROR MESSAGE ===== */\n\n.error-message {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  color: var(--ty-color-danger);\n  margin-top: 4px;\n  padding-left: 4px;\n}\n\n/* ===== ACCESSIBILITY ===== */\n\n@media (prefers-reduced-motion: reduce) {\n  .drop-zone,\n  .upload-icon,\n  .file-remove {\n    transition: none;\n  }\n}\n\n@media (prefers-contrast: high) {\n  .drop-zone {\n    border-width: 3px;\n  }\n}\n";
+export declare const fileUploadStyles = "\n:host {\n  display: block;\n  font-family: var(--ty-font-sans);\n  width: 100%;\n}\n\n.file-upload-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* ===== LABEL ===== */\n\n.upload-label {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-medium);\n  color: var(--ty-label-color);\n  margin-bottom: 6px;\n  padding-left: 4px;\n  display: flex;\n  align-items: center;\n}\n\n.required-icon {\n  color: var(--ty-color-danger);\n  margin-left: 4px;\n  font-size: 0.75rem;\n  line-height: 1;\n}\n\n/* ===== DROP ZONE ===== */\n\n.drop-zone {\n  border: 2px dashed var(--ty-border);\n  border-radius: var(--ty-radius-base);\n  padding: 2rem 1.5rem;\n  text-align: center;\n  cursor: pointer;\n  transition: var(--ty-local-transition, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease);\n  outline: none;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  min-height: 140px;\n  user-select: none;\n}\n\n.drop-zone:hover:not(.disabled) {\n  border-color: var(--ty-input-border-hover);\n  background: var(--ty-surface-content);\n}\n\n.drop-zone.focused {\n  border-color: var(--ty-input-border-focus);\n  box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);\n}\n\n.drop-zone.drag-active {\n  border-color: var(--ty-color-primary);\n  border-style: solid;\n  background: var(--ty-bg-primary-);\n}\n\n.drop-zone.drag-active .upload-icon {\n  color: var(--ty-color-primary);\n  transform: translateY(-2px);\n}\n\n.drop-zone.has-files {\n  min-height: 80px;\n  padding: 1.25rem 1.5rem;\n}\n\n.drop-zone.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.drop-zone.error {\n  border-color: var(--ty-color-danger);\n}\n\n.drop-zone.error:not(.disabled) {\n  background: var(--ty-bg-danger-);\n}\n\n/* ===== UPLOAD ICON ===== */\n\n.upload-icon {\n  color: var(--ty-text-faint);\n  width: 2.5rem;\n  height: 2.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: var(--ty-local-transition, color 0.15s ease, transform 0.15s ease);\n  pointer-events: none;\n}\n\n.upload-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* ===== HINT TEXT ===== */\n\n.upload-hint {\n  color: var(--ty-text-soft);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  pointer-events: none;\n}\n\n.browse-link {\n  color: var(--ty-color-primary);\n  font-weight: var(--ty-font-medium);\n}\n\n.upload-sub-hint {\n  color: var(--ty-text-faint);\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  pointer-events: none;\n}\n\n/* ===== FILE LIST ===== */\n\n.file-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  margin-top: 0.5rem;\n}\n\n.file-item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  border-radius: var(--ty-radius-base);\n  background: var(--ty-surface-content);\n  border: 1px solid var(--ty-border-soft);\n}\n\n.file-icon {\n  color: var(--ty-text-faint);\n  flex-shrink: 0;\n  width: 1rem;\n  height: 1rem;\n  display: flex;\n  align-items: center;\n}\n\n.file-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n.file-name {\n  flex: 1;\n  font-size: var(--ty-font-sm);\n  color: var(--ty-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.file-size {\n  font-size: var(--ty-font-xs);\n  color: var(--ty-text-faint);\n  flex-shrink: 0;\n  font-variant-numeric: tabular-nums;\n}\n\n.file-remove {\n  flex-shrink: 0;\n  cursor: pointer;\n  color: var(--ty-text-faint);\n  width: 1.25rem;\n  height: 1.25rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  transition: var(--ty-local-transition, color 0.15s ease, background-color 0.15s ease);\n  border: none;\n  background: none;\n  padding: 0;\n  outline: none;\n}\n\n.file-remove:hover {\n  color: var(--ty-color-danger);\n  background: var(--ty-bg-danger-);\n}\n\n.file-remove:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-color-danger);\n}\n\n.file-remove svg {\n  width: 12px;\n  height: 12px;\n}\n\n/* ===== ERROR MESSAGE ===== */\n\n.error-message {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  color: var(--ty-color-danger);\n  margin-top: 4px;\n  padding-left: 4px;\n}\n\n/* ===== ACCESSIBILITY ===== */\n\n@media (prefers-reduced-motion: reduce) {\n  .drop-zone,\n  .upload-icon,\n  .file-remove {\n    transition: none;\n  }\n}\n\n@media (prefers-contrast: high) {\n  .drop-zone {\n    border-width: 3px;\n  }\n}\n";
 //# sourceMappingURL=file-upload.d.ts.map

package/lib/styles/file-upload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../src/styles/file-upload.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,yhJA+O5B,CAAA"}
+{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../src/styles/file-upload.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,6mJA+O5B,CAAA"}

package/lib/styles/file-upload.js

@@ -41,7 +41,7 @@ export const fileUploadStyles = `
   padding: 2rem 1.5rem;
   text-align: center;
   cursor: pointer;
-  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
+  transition: var(--ty-local-transition, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease);
   outline: none;
   display: flex;
   flex-direction: column;
@@ -101,7 +101,7 @@ export const fileUploadStyles = `
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: color 0.15s ease, transform 0.15s ease;
+  transition: var(--ty-local-transition, color 0.15s ease, transform 0.15s ease);
   pointer-events: none;
 }
 
@@ -191,7 +191,7 @@ export const fileUploadStyles = `
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  transition: color 0.15s ease, background-color 0.15s ease;
+  transition: var(--ty-local-transition, color 0.15s ease, background-color 0.15s ease);
   border: none;
   background: none;
   padding: 0;

package/lib/styles/input.js

@@ -110,8 +110,8 @@ export const inputStyles = `
   border: 1px solid var(--input-accent, var(--input-border, var(--ty-input-border)));
   border-radius: var(--ty-radius-base);
   background: var(--input-bg, var(--input-bg, var(--ty-input-bg)));
-  transition: all 0.15s ease-in-out;
-  
+  transition: var(--ty-local-transition, all 0.15s ease-in-out);
+
   /* Default size (md) */
   min-height: var(--ty-size-md);
   padding: 0 12px;
@@ -166,7 +166,7 @@ export const inputStyles = `
   background: none;
   cursor: pointer;
   color: var(--input-placeholder, var(--ty-input-placeholder));
-  transition: color 0.15s ease-in-out;
+  transition: var(--ty-local-transition, color 0.15s ease-in-out);
 }
 .password-toggle:hover {
   color: var(--input-color, var(--ty-input-color));

package/lib/styles/radio.js

@@ -118,7 +118,7 @@ ${inputStyles}
   border: 2px solid var(--ty-input-border);
   background: var(--ty-input-bg);
   box-sizing: border-box;
-  transition: border-color 0.15s ease-in-out;
+  transition: var(--ty-local-transition, border-color 0.15s ease-in-out);
 }
 
 /* Default (no flavor attribute) is primary — defaults don't reflect to the