tyrell-components 1.0.0-TC52 → 1.0.0-TC53

package/lib/index.js

@@ -35,25 +35,25 @@ import { registerIcons, getIcon, hasIcon, getIconNames, getCacheInfo, clearIcons
 export { registerIcons, getIcon, hasIcon, getIconNames, getCacheInfo, clearIcons, getCachedIcon };
 import { getSize as getResizeSize, onResize as subscribeResize, getAllSizes } from './utils/resize-observer.js';
 if (typeof window !== 'undefined') {
-    window.tyVersion = VERSION;
-    console.log(`%c[tyrell-components]%c v${VERSION}`, 'color:#06b6d4;font-weight:600', 'color:inherit;font-weight:400');
-    window.tyIcons = {
-        register: (icons) => {
-            const count = Object.keys(icons).length;
-            registerIcons(icons);
-            setTimeout(() => {
-                console.log(`✅ Registered ${count} icons (cached for instant reload)`);
-            }, 0);
-        },
-        get: (name) => getIcon(name),
-        has: (name) => hasIcon(name),
-        list: () => getIconNames(),
-        cacheInfo: () => getCacheInfo(),
-        clearCache: () => clearIcons()
-    };
-    window.tyResizeObserver = {
-        getSize: (id) => getResizeSize(id),
-        onResize: (id, callback) => subscribeResize(id, callback),
-        get sizes() { return getAllSizes(); }
-    };
+window.tyVersion = VERSION;
+console.log(`%c[tyrell-components]%c v${VERSION}`, 'color:#06b6d4;font-weight:600', 'color:inherit;font-weight:400');
+window.tyIcons = {
+register: (icons) => {
+const count = Object.keys(icons).length;
+registerIcons(icons);
+setTimeout(() => {
+console.log(`✅ Registered ${count} icons (cached for instant reload)`);
+}, 0);
+},
+get: (name) => getIcon(name),
+has: (name) => hasIcon(name),
+list: () => getIconNames(),
+cacheInfo: () => getCacheInfo(),
+clearCache: () => clearIcons()
+};
+window.tyResizeObserver = {
+getSize: (id) => getResizeSize(id),
+onResize: (id, callback) => subscribeResize(id, callback),
+get sizes() { return getAllSizes(); }
+};
 }

package/lib/styles/button.js

@@ -1,16 +1,16 @@
 import { FLAVORS } from '../types/common.js';
 const tokenRef = (prefix, f, suffix, fb) => fb
-    ? `var(${prefix}-${f}${suffix}, var(${prefix}-${fb}${suffix}))`
-    : `var(${prefix}-${f}${suffix})`;
+? `var(${prefix}-${f}${suffix}, var(${prefix}-${fb}${suffix}))`
+: `var(${prefix}-${f}${suffix})`;
 const nudged = (fillExpr, offsetDial) => `oklch(from ${fillExpr} calc(l + var(--ty-${offsetDial})) c h)`;
 const nudgedMid = (fillExpr, offsetDial) => `oklch(from ${fillExpr} calc(l + sign(0.5 - l) * abs(var(--ty-${offsetDial}))) c h)`;
 const solidFlavor = (f, fb) => {
-    const solid = (suffix) => tokenRef('--ty-solid', f, suffix, fb);
-    const borderL = f === 'neutral'
-        ? ' --_border-l: var(--ty-button-border-l-neutral, var(--ty-button-border-l, -0.15));'
-        : ' --_border-l: var(--_muted-border-l, var(--ty-button-border-l, -0.15));';
-    const plusNudge = f === 'neutral' ? nudgedMid : nudged;
-    return `
+const solid = (suffix) => tokenRef('--ty-solid', f, suffix, fb);
+const borderL = f === 'neutral'
+? ' --_border-l: var(--ty-button-border-l-neutral, var(--ty-button-border-l, -0.15));'
+: ' --_border-l: var(--_muted-border-l, var(--ty-button-border-l, -0.15));';
+const plusNudge = f === 'neutral' ? nudgedMid : nudged;
+return `
 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')})); }
@@ -23,416 +23,304 @@ button.solid.${f}.tone-minus:active:not(:disabled) { --_solid-bg: ${nudged(solid
 `;
 };
 const outlinedFlavor = (f, fb) => {
-    const color = (suffix) => tokenRef('--ty-color', f, suffix, fb);
-    const textInk = (suffix) => (f === 'neutral' && suffix === '-strong' ? `var(--ty-solid-neutral${suffix})` : color(suffix));
-    return `
+const color = (suffix) => tokenRef('--ty-color', f, suffix, fb);
+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, ${textInk('')}));
-  border-color: var(--ty-button-border, var(--_muted-outlined-line, ${textInk('')}));
+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, ${textInk('-strong')}));
-  border-color: var(--ty-button-border, var(--_muted-outlined-line, ${textInk('-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, ${textInk('-soft')}));
-  border-color: var(--ty-button-border, var(--_muted-outlined-line, ${textInk('-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. */
+background: var(--ty-button-bg-hover, ${tokenRef('--ty-bg', f, '-soft', fb)});
+}
 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')});
+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);
-    const ink = (suffix) => (f === 'neutral' && suffix === '-strong' ? `var(--ty-solid-neutral${suffix})` : color(suffix));
-    return `
+const color = (suffix) => tokenRef('--ty-color', f, suffix, fb);
+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, ${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)});
+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')});
+color: var(--ty-button-color, ${ink('-strong')});
 }
 `;
 };
 export const buttonCustomFlavorCss = (base) => solidFlavor(base, 'neutral') + outlinedFlavor(base, 'neutral') + ghostFlavor(base, 'neutral');
 export const buttonStyles = `
 :host {
-  display: inline-block;
-  font-family: inherit;
+display: inline-block;
+font-family: inherit;
 }
-
 :host([wide]) {
-  display: flex;
-  flex-grow: 1;
+display: flex;
+flex-grow: 1;
 }
-
 button {
-  /* Native form controls do NOT inherit font from the shadow host — the UA
-     stylesheet sets one on them, which beats inheritance. Must be explicit
-     here or the button silently falls back to the system font. */
-  font-family: inherit;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--ty-spacing-1);
-  font-size: var(--ty-font-xs);
-  line-height: var(--ty-leading-xs);
-  letter-spacing: var(--ty-tracking-xs);
-  /* 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: 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;
-}
-
+font-family: inherit;
+position: relative;
+display: flex;
+align-items: center;
+justify-content: center;
+gap: var(--ty-spacing-1);
+font-size: var(--ty-font-xs);
+line-height: var(--ty-leading-xs);
+letter-spacing: var(--ty-tracking-xs);
+font-weight: var(--ty-weight-action, var(--ty-font-medium));
+white-space: nowrap;
+cursor: pointer;
+user-select: none;
+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;
+}
 button:not(.action) {
-  min-width: 4rem;
+min-width: 4rem;
 }
-
 button:not(.pill) {
-  border-radius: var(--ty-radius-md);
+border-radius: var(--ty-radius-md);
 }
-
 button.xs:not(.pill) { border-radius: var(--ty-button-radius-xs, var(--ty-radius-md)); }
 button.sm:not(.pill) { border-radius: var(--ty-button-radius-sm, var(--ty-radius-md)); }
 button.md:not(.pill) { border-radius: var(--ty-button-radius-md, var(--ty-radius-md)); }
 button.lg:not(.pill) { border-radius: var(--ty-button-radius-lg, var(--ty-radius-md)); }
 button.xl:not(.pill) { border-radius: var(--ty-button-radius-xl, var(--ty-radius-md)); }
-
 button:focus-visible {
-  outline: none;
+outline: none;
 }
-
 button:disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
+cursor: not-allowed;
+opacity: 0.6;
 }
-
-/* Spinner overlays the button center; original content kept in flow but
-   hidden via visibility so width/height are preserved (no layout shift). */
 .loader-icon {
-  display: none;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 1em;
-  height: 1em;
-  color: currentColor;
+display: none;
+align-items: center;
+justify-content: center;
+flex-shrink: 0;
+width: 1em;
+height: 1em;
+color: currentColor;
 }
 .loader-icon svg {
-  width: 100%;
-  height: 100%;
+width: 100%;
+height: 100%;
 }
 button.loading {
-  cursor: wait;
+cursor: wait;
 }
 button.loading > *:not(.loader-icon) {
-  visibility: hidden;
+visibility: hidden;
 }
 button.loading > .loader-icon {
-  display: inline-flex;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  animation: ty-button-spin 0.7s linear infinite;
+display: inline-flex;
+position: absolute;
+top: 50%;
+left: 50%;
+transform: translate(-50%, -50%);
+animation: ty-button-spin 0.7s linear infinite;
 }
 @keyframes ty-button-spin {
-  to { transform: translate(-50%, -50%) rotate(360deg); }
+to { transform: translate(-50%, -50%) rotate(360deg); }
 }
 @media (prefers-reduced-motion: reduce) {
-  button.loading > .loader-icon {
-    animation-duration: 1.6s;
-  }
+button.loading > .loader-icon {
+animation-duration: 1.6s;
+}
 }
-
 ::slotted(*) {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+display: inline-flex;
+align-items: center;
+justify-content: center;
 }
-
 ::slotted(ty-icon) {
-  flex-shrink: 0;
+flex-shrink: 0;
 }
-
 :host([wide]) button {
-  flex-grow: 1;
-}
-
-/* Buttons run a 4px ladder (24-40px). Shared scale with fields
-   (--ty-size-sm/md/lg — see tyrell.css): field sm = button md (32px),
-   field md = button lg (36px), field lg = button xl (40px) — a button
-   and a field of the paired size sit flush, same height, in a row. */
-
+flex-grow: 1;
+}
 button.xs {
-  padding: 0 var(--ty-spacing-2);
-  font-size: var(--ty-font-xs);
-  line-height: var(--ty-leading-xs);
-  letter-spacing: var(--ty-tracking-xs);
-  gap: var(--ty-spacing-1);
-  height: 1.5rem; /* 24px */
-}
-
+padding: 0 var(--ty-spacing-2);
+font-size: var(--ty-font-xs);
+line-height: var(--ty-leading-xs);
+letter-spacing: var(--ty-tracking-xs);
+gap: var(--ty-spacing-1);
+height: 1.5rem; 
+}
 button.sm {
-  padding: 0 var(--ty-spacing-2);
-  font-size: var(--ty-font-xs);
-  line-height: var(--ty-leading-xs);
-  letter-spacing: var(--ty-tracking-xs);
-  gap: var(--ty-spacing-1);
-  height: 1.75rem; /* 28px */
-}
-
+padding: 0 var(--ty-spacing-2);
+font-size: var(--ty-font-xs);
+line-height: var(--ty-leading-xs);
+letter-spacing: var(--ty-tracking-xs);
+gap: var(--ty-spacing-1);
+height: 1.75rem; 
+}
 button.md {
-  padding: 0.375rem var(--ty-spacing-3);
-  font-size: var(--ty-font-sm);
-  line-height: var(--ty-leading-sm);
-  letter-spacing: var(--ty-tracking-sm);
-  gap: var(--ty-spacing-2);
-  height: 2rem; /* 32px — matches field sm */
-}
-
+padding: 0.375rem var(--ty-spacing-3);
+font-size: var(--ty-font-sm);
+line-height: var(--ty-leading-sm);
+letter-spacing: var(--ty-tracking-sm);
+gap: var(--ty-spacing-2);
+height: 2rem; 
+}
 button.lg {
-  padding: 0.375rem var(--ty-spacing-4);
-  font-size: var(--ty-font-sm);
-  line-height: var(--ty-leading-sm);
-  letter-spacing: var(--ty-tracking-sm);
-  gap: var(--ty-spacing-2);
-  height: 2.25rem; /* 36px — matches field md */
-}
-
+padding: 0.375rem var(--ty-spacing-4);
+font-size: var(--ty-font-sm);
+line-height: var(--ty-leading-sm);
+letter-spacing: var(--ty-tracking-sm);
+gap: var(--ty-spacing-2);
+height: 2.25rem; 
+}
 button.xl {
-  padding: var(--ty-spacing-2) var(--ty-spacing-6);
-  font-size: var(--ty-font-base);
-  line-height: var(--ty-leading-base);
-  letter-spacing: var(--ty-tracking-base);
-  gap: var(--ty-spacing-2);
-  height: 2.5rem; /* 40px — matches field lg */
-}
-
-/* Action = icon-only square */
+padding: var(--ty-spacing-2) var(--ty-spacing-6);
+font-size: var(--ty-font-base);
+line-height: var(--ty-leading-base);
+letter-spacing: var(--ty-tracking-base);
+gap: var(--ty-spacing-2);
+height: 2.5rem; 
+}
 button.action {
-  gap: 0px !important;
-  height: 2rem;
-  width: 2rem;
-  padding: 0px !important;
+gap: 0px !important;
+height: 2rem;
+width: 2rem;
+padding: 0px !important;
 }
-
 button.action ::slotted(ty-icon) {
-  height: 1rem;
-  width: 1rem;
+height: 1rem;
+width: 1rem;
 }
-
 button.action.xs { height: 1.375rem; width: 1.375rem; }
 button.action.xs ::slotted(ty-icon) { height: 0.75rem; width: 0.75rem; }
-
 button.action.sm { height: 1.5rem; width: 1.5rem; }
 button.action.sm ::slotted(ty-icon) { height: 0.875rem; width: 0.875rem; }
-
 button.action.lg { height: 2.25rem; width: 2.25rem; }
 button.action.lg ::slotted(ty-icon) { height: 1.125rem; width: 1.125rem; }
-
 button.action.xl { height: 2.5rem; width: 2.5rem; }
 button.action.xl ::slotted(ty-icon) { height: 1.25rem; width: 1.25rem; }
-
-/* MUTED: show the neutral tokens at rest instead of the flavor color; reveal the
-   real flavor on interaction. Implemented as a fallback tier the flavor
-   rules above already read (--_muted-*), which sits behind the public
-   --ty-button-{bg,color,border} override slots and ahead of the flavor's
-   own token — so a custom brand color still wins, muted or not. Unsetting
-   --_muted-* on interaction falls the var() chain through to whatever's
-   next (the user's override, or the real flavor color).
-   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);
-  --_muted-outlined-line: var(--ty-color-neutral);
-  --_muted-ghost-fg: var(--ty-color-neutral);
-  --_muted-border-l: var(--ty-button-border-l-neutral, var(--ty-button-border-l, -0.15));
+--_muted-solid-bg: var(--ty-solid-neutral);
+--_muted-solid-fg: var(--ty-solid-neutral-fg);
+--_muted-outlined-line: var(--ty-color-neutral);
+--_muted-ghost-fg: var(--ty-color-neutral);
+--_muted-border-l: var(--ty-button-border-l-neutral, var(--ty-button-border-l, -0.15));
 }
 button.muted.tone-plus {
-  --_muted-solid-bg: var(--ty-solid-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);
+--_muted-solid-bg: var(--ty-solid-neutral-strong);
+--_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);
+--_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);
 }
 @media (hover: hover) and (pointer: fine) {
-  button.muted:hover:not(:disabled) {
-    --_muted-solid-bg: unset;
-    --_muted-solid-fg: unset;
-    --_muted-outlined-line: unset;
-    --_muted-ghost-fg: unset;
-    --_muted-border-l: unset;
-  }
+button.muted:hover:not(:disabled) {
+--_muted-solid-bg: unset;
+--_muted-solid-fg: unset;
+--_muted-outlined-line: unset;
+--_muted-ghost-fg: unset;
+--_muted-border-l: unset;
+}
 }
 button.muted:active:not(:disabled),
 button.muted:focus-visible:not(:disabled) {
-  --_muted-solid-bg: unset;
-  --_muted-solid-fg: unset;
-  --_muted-outlined-line: unset;
-  --_muted-ghost-fg: unset;
-  --_muted-border-l: unset;
+--_muted-solid-bg: unset;
+--_muted-solid-fg: unset;
+--_muted-outlined-line: unset;
+--_muted-ghost-fg: unset;
+--_muted-border-l: unset;
 }
-
 button.pill {
-  border-radius: 9999px;
-  padding-left: 1.25em;
-  padding-right: 1.25em;
+border-radius: 9999px;
+padding-left: 1.25em;
+padding-right: 1.25em;
 }
-
 button.pill.xs { padding-left: 1em; padding-right: 1em; }
 button.pill.sm { padding-left: 1.125em; padding-right: 1.125em; }
 button.pill.lg { padding-left: 1.5em; padding-right: 1.5em; }
 button.pill.xl { padding-left: 1.75em; padding-right: 1.75em; }
-
 button.pill:has(ty-icon:only-child),
 button.pill:has(slot[name="start"]:only-child),
 button.pill:has(slot[name="end"]:only-child) {
-  padding: 0;
-  aspect-ratio: 1;
-  min-width: var(--ty-size-md);
+padding: 0;
+aspect-ratio: 1;
+min-width: var(--ty-size-md);
 }
-
 button.pill.xs:has(ty-icon:only-child) { min-width: 1.375rem; min-height: 1.375rem; }
 button.pill.sm:has(ty-icon:only-child) { min-width: 1.5rem; min-height: 1.5rem; }
 button.pill.md:has(ty-icon:only-child) { min-width: 2rem; min-height: 2rem; }
 button.pill.lg:has(ty-icon:only-child) { min-width: 2.25rem; min-height: 2.25rem; }
 button.pill.xl:has(ty-icon:only-child) { min-width: 2.5rem; min-height: 2.5rem; }
-
-/* SOLID — flat: one variable per segment. No color math here; all the
-   --ty-solid-{flavor}-{hover,active,strong,soft} tokens are DERIVED in
-   tyrell-theme.css (OKLCH) or set literally in tyrell.css. Override any
-   single token to recolor that one segment. Bare .solid = custom-flavor
-   fallback, themable via --ty-button-{bg,bg-hover,color}. */
-
 button.solid {
-  --_ring: var(--ty-color-neutral);
-  --_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)));
+--_ring: var(--ty-color-neutral);
+--_solid-bg: var(--ty-button-bg, var(--ty-solid-neutral));
+--_solid-rest: var(--ty-button-bg, var(--ty-solid-neutral));
+--_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));
+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) {
-  --_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));
+--_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) {
-  --_solid-bg: oklch(from var(--ty-solid-neutral-strong) calc(l + sign(0.5 - l) * abs(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) {
-  --_solid-bg: 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) {
-  --_solid-bg: 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('')}
 button.solid:focus-visible {
-  box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--_ring);
-}
-
-/* OUTLINED — transparent bg, text === border (uses --ty-color-*).
-   Bare .outlined rule = fallback for custom flavors. Text is bound to
-   border color, so the fallback chain prefers --ty-button-border, then
-   --ty-button-color. */
-
+box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--_ring);
+}
 button.outlined {
-  background: transparent;
-  color:        var(--ty-button-border, var(--ty-button-color, var(--ty-color-neutral)));
-  border-color: var(--ty-button-border, var(--ty-button-color, var(--ty-color-neutral)));
+background: transparent;
+color:        var(--ty-button-border, var(--ty-button-color, var(--ty-color-neutral)));
+border-color: var(--ty-button-border, var(--ty-button-color, var(--ty-color-neutral)));
 }
 button.outlined:hover:not(:disabled) {
-  background: var(--ty-button-bg-hover, var(--ty-bg-neutral-soft));
+background: var(--ty-button-bg-hover, var(--ty-bg-neutral-soft));
 }
-
 ${FLAVORS.map((f) => outlinedFlavor(f)).join('')}
-
-/* GHOST — text only, hover bg (uses --ty-color-* + --ty-bg-*-soft).
-   Bare .ghost rule = fallback for custom flavors. */
-
 button.ghost {
-  background: transparent;
-  border: none;
-  color: var(--ty-button-color, var(--ty-color-neutral));
+background: transparent;
+border: none;
+color: var(--ty-button-color, var(--ty-color-neutral));
 }
 button.ghost:hover:not(:disabled) {
-  background: var(--ty-button-bg-hover, var(--ty-bg-neutral-soft));
+background: var(--ty-button-bg-hover, var(--ty-bg-neutral-soft));
 }
-
 ${FLAVORS.map((f) => ghostFlavor(f)).join('')}`;