@codenhub/styles 0.1.1 → 0.2.0

package/dist/theme.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
-:root,:host{--color-amber-100:oklch(96.2% .059 95.617);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-800:oklch(47.3% .137 46.201);--color-amber-900:oklch(41.4% .112 45.904);--color-emerald-100:oklch(95% .052 163.051);--color-emerald-300:oklch(84.5% .143 164.978);--color-emerald-700:oklch(50.8% .118 165.612);--color-emerald-800:oklch(43.2% .095 166.913);--color-emerald-900:oklch(37.8% .077 168.94);--color-indigo-100:oklch(93% .034 272.788);--color-indigo-300:oklch(78.5% .115 274.713);--color-indigo-600:oklch(51.1% .262 276.966);--color-indigo-800:oklch(39.8% .195 277.366);--color-indigo-900:oklch(35.9% .144 278.697);--color-rose-100:oklch(94.1% .03 12.58);--color-rose-300:oklch(81% .117 11.638);--color-rose-700:oklch(51.4% .222 16.935);--color-rose-800:oklch(45.5% .188 13.697);--color-rose-900:oklch(41% .159 10.272);--color-neutral-50:oklch(98.5% 0 0);--color-neutral-100:oklch(97% 0 0);--color-neutral-200:oklch(92.2% 0 0);--color-neutral-300:oklch(87% 0 0);--color-neutral-400:oklch(70.8% 0 0);--color-neutral-500:oklch(55.6% 0 0);--color-neutral-600:oklch(43.9% 0 0);--color-neutral-700:oklch(37.1% 0 0);--color-neutral-800:oklch(26.9% 0 0);--color-neutral-900:oklch(20.5% 0 0);--color-neutral-950:oklch(14.5% 0 0);--color-white:#fff;--color-primary:light-dark(var(--color-neutral-950),var(--color-neutral-50));--color-primary-contrast:light-dark(var(--color-neutral-50),var(--color-neutral-950));--color-primary-hover:light-dark(var(--color-neutral-700),var(--color-neutral-200));--color-primary-subtle:light-dark(var(--color-neutral-200),var(--color-neutral-900));--color-primary-strong:light-dark(var(--color-neutral-900),var(--color-neutral-100));--color-accent:light-dark(var(--color-neutral-600),var(--color-neutral-400));--color-accent-contrast:light-dark(var(--color-neutral-50),var(--color-neutral-950));--color-accent-hover:light-dark(var(--color-neutral-700),var(--color-neutral-300));--color-accent-subtle:light-dark(var(--color-neutral-100),var(--color-neutral-800));--color-accent-strong:light-dark(var(--color-neutral-800),var(--color-neutral-200));--color-border:light-dark(var(--color-neutral-300),var(--color-neutral-700));--color-control-border:var(--color-neutral-500);--color-surface:light-dark(var(--color-neutral-200),var(--color-neutral-800));--color-text:light-dark(var(--color-neutral-950),var(--color-neutral-50));--color-text-contrast:light-dark(var(--color-neutral-50),var(--color-neutral-950));--color-text-hover:light-dark(var(--color-neutral-700),var(--color-neutral-200));--color-text-strong:light-dark(var(--color-neutral-900),var(--color-neutral-100));--color-tooltip:light-dark(var(--color-white),var(--color-neutral-700));--color-tooltip-contrast:light-dark(var(--color-neutral-900),var(--color-neutral-100));--color-success:var(--color-emerald-700);--color-success-contrast:var(--color-neutral-50);--color-success-hover:light-dark(#007552,#008e66);--color-success-subtle:light-dark(var(--color-emerald-100),var(--color-emerald-900));--color-success-strong:light-dark(var(--color-emerald-800),var(--color-emerald-300));--color-warning:var(--color-amber-600);--color-warning-contrast:var(--color-neutral-950);--color-warning-hover:light-dark(#d46700,#e78300);--color-warning-subtle:light-dark(var(--color-amber-100),var(--color-amber-900));--color-warning-strong:light-dark(var(--color-amber-800),var(--color-amber-300));--color-destructive:var(--color-rose-700);--color-destructive-contrast:var(--color-neutral-50);--color-destructive-hover:light-dark(#c00036,#d1054b);--color-destructive-subtle:light-dark(var(--color-rose-100),var(--color-rose-900));--color-destructive-strong:light-dark(var(--color-rose-800),var(--color-rose-300));--color-info:var(--color-indigo-600);--color-info-contrast:var(--color-neutral-50);--color-info-hover:light-dark(#4b36e9,#5e4ff9);--color-info-subtle:light-dark(var(--color-indigo-100),var(--color-indigo-900));--color-info-strong:light-dark(var(--color-indigo-800),var(--color-indigo-300))}:root,.neutral{--intent-color:var(--color-text);--intent-contrast:var(--color-text-contrast);--intent-hover:var(--color-text-hover);--intent-strong:var(--color-text-strong);--intent-subtle:var(--color-surface);--intent-border:var(--ui-ink,var(--color-border));--intent-fill-max:20%}.primary{--intent-color:var(--color-primary);--intent-contrast:var(--color-primary-contrast);--intent-hover:var(--color-primary-hover);--intent-strong:var(--color-primary-strong);--intent-subtle:var(--color-primary-subtle);--intent-border:var(--color-primary);--intent-fill-max:100%}.secondary{--intent-color:var(--color-accent);--intent-contrast:var(--color-accent-contrast);--intent-hover:var(--color-accent-hover);--intent-strong:var(--color-accent-strong);--intent-subtle:var(--color-accent-subtle);--intent-border:var(--color-accent);--intent-fill-max:100%}.success{--intent-color:var(--color-success);--intent-contrast:var(--color-success-contrast);--intent-hover:var(--color-success-hover);--intent-strong:var(--color-success-strong);--intent-subtle:var(--color-success-subtle);--intent-border:var(--color-success);--intent-fill-max:100%}.warning{--intent-color:var(--color-warning);--intent-contrast:var(--color-warning-contrast);--intent-hover:var(--color-warning-hover);--intent-strong:var(--color-warning-strong);--intent-subtle:var(--color-warning-subtle);--intent-border:var(--color-warning);--intent-fill-max:100%}.destructive,.danger,.error{--intent-color:var(--color-destructive);--intent-contrast:var(--color-destructive-contrast);--intent-hover:var(--color-destructive-hover);--intent-strong:var(--color-destructive-strong);--intent-subtle:var(--color-destructive-subtle);--intent-border:var(--color-destructive);--intent-fill-max:100%}.info{--intent-color:var(--color-info);--intent-contrast:var(--color-info-contrast);--intent-hover:var(--color-info-hover);--intent-strong:var(--color-info-strong);--intent-subtle:var(--color-info-subtle);--intent-border:var(--color-info);--intent-fill-max:100%}:where(.btn,.ipt,.text-control,.surface,.textarea,.select,.input-group,.checkbox,.radio,.switch,.card,.panel,.alert,.data-table,.pre,.quote,.tooltip,.badge,.kbd,.code,.loader,.skeleton,.progress,.divider){--intent-color:var(--color-text);--intent-contrast:var(--color-text-contrast);--intent-hover:var(--color-text-hover);--intent-strong:var(--color-text-strong);--intent-subtle:var(--color-surface);--intent-border:var(--ui-ink,var(--color-border));--intent-fill-max:20%}:where(.text-control,.ipt,.textarea,.select,.input-group,.checkbox,.radio,.switch){--intent-border:var(--ui-ink,var(--color-control-border))}:where(.tooltip),.tooltip.neutral{--intent-color:var(--color-tooltip);--intent-contrast:var(--color-tooltip-contrast);--intent-hover:var(--color-tooltip);--intent-strong:var(--color-tooltip-contrast);--intent-subtle:var(--color-surface);--intent-border:var(--ui-ink,var(--color-border));--intent-fill-max:100%}:where(.loader,.skeleton,.progress,.divider){--intent-color:currentColor;--intent-border:currentColor}.solid{--ui-fill:100%;--ui-fg-on-fill:100%}.soft{--ui-fill:12%;--ui-fg-on-fill:0%}.ghost{--ui-fill:0%;--ui-fg-on-fill:0%}.edged{--ui-border:100%}.edgeless{--ui-border:0%}.elevation-none,.flat{--ui-elevation:0}.elevation-sm,.raised,.elevation-md,.floating{--elevation-y:1px;--elevation-blur:3px}.elevation-sm,.raised{--ui-elevation:1}.elevation-md,.floating{--ui-elevation:2}:root{color-scheme:light dark;--container-narrow:48rem;--container-max:80rem;--container-wide:90rem;--layout-gutter:clamp(1rem, 4vw, 2rem);--layout-section-block:clamp(4rem, 9vw, 7rem);--layout-gap:1rem;--layout-grid-min:16rem;--radius-small:.25rem;--radius-control:.5rem;--radius-surface:.875rem;--control-height:2.5rem;--border-width:1px;--elevation-color:light-dark(#0f172a14,#0000008c);--elevation-none:none;--elevation-sm:0 1px 2px var(--elevation-color), 0 1px 3px var(--elevation-color);--elevation-md:0 4px 6px -1px var(--elevation-color), 0 2px 4px -2px var(--elevation-color);--elevation-lg:0 20px 25px -5px var(--elevation-color), 0 8px 10px -6px var(--elevation-color);--focus-ring:color-mix(in srgb, light-dark(var(--color-neutral-950),var(--color-neutral-50)) 64%, transparent)}@supports (color:color-mix(in lab, red, red)){:root{--focus-ring:color-mix(in srgb, var(--color-primary) 64%, transparent)}}:root{--focus-ring-offset:calc(-1 * var(--border-width));--focus-ring-width:3px;--motion-duration-fast:.12s;--motion-duration-normal:.2s;--motion-duration-slow:.4s;--motion-ease:cubic-bezier(.2, 0, 0, 1);--z-popover:40;--hover-step:14%;--ui-active-transform:scale(.97)}@media (prefers-reduced-motion:reduce){:root{--ui-active-transform:none}}.light,.theme-light,[data-theme=light]{color-scheme:light}.dark,.theme-dark,[data-theme=dark]{color-scheme:dark}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--ui-elevation:initial;--elevation-y:initial;--elevation-blur:initial}}}:root,:host{--color-amber-100:oklch(96.2% .059 95.617);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-800:oklch(47.3% .137 46.201);--color-amber-900:oklch(41.4% .112 45.904);--color-emerald-100:oklch(95% .052 163.051);--color-emerald-300:oklch(84.5% .143 164.978);--color-emerald-700:oklch(50.8% .118 165.612);--color-emerald-800:oklch(43.2% .095 166.913);--color-emerald-900:oklch(37.8% .077 168.94);--color-indigo-100:oklch(93% .034 272.788);--color-indigo-300:oklch(78.5% .115 274.713);--color-indigo-600:oklch(51.1% .262 276.966);--color-indigo-800:oklch(39.8% .195 277.366);--color-indigo-900:oklch(35.9% .144 278.697);--color-rose-100:oklch(94.1% .03 12.58);--color-rose-300:oklch(81% .117 11.638);--color-rose-700:oklch(51.4% .222 16.935);--color-rose-800:oklch(45.5% .188 13.697);--color-rose-900:oklch(41% .159 10.272);--color-neutral-50:oklch(98.5% 0 0);--color-neutral-100:oklch(97% 0 0);--color-neutral-200:oklch(92.2% 0 0);--color-neutral-300:oklch(87% 0 0);--color-neutral-400:oklch(70.8% 0 0);--color-neutral-500:oklch(55.6% 0 0);--color-neutral-600:oklch(43.9% 0 0);--color-neutral-700:oklch(37.1% 0 0);--color-neutral-800:oklch(26.9% 0 0);--color-neutral-900:oklch(20.5% 0 0);--color-neutral-950:oklch(14.5% 0 0);--color-white:#fff;--color-primary:light-dark(var(--color-neutral-950),var(--color-neutral-50));--color-primary-contrast:light-dark(var(--color-neutral-50),var(--color-neutral-950));--color-primary-hover:light-dark(var(--color-neutral-700),var(--color-neutral-200));--color-primary-subtle:light-dark(var(--color-neutral-200),var(--color-neutral-900));--color-primary-strong:light-dark(var(--color-neutral-900),var(--color-neutral-100));--color-accent:light-dark(var(--color-neutral-600),var(--color-neutral-400));--color-accent-contrast:light-dark(var(--color-neutral-50),var(--color-neutral-950));--color-accent-hover:light-dark(var(--color-neutral-700),var(--color-neutral-300));--color-accent-subtle:light-dark(var(--color-neutral-100),var(--color-neutral-800));--color-accent-strong:light-dark(var(--color-neutral-800),var(--color-neutral-200));--color-border:light-dark(var(--color-neutral-400),var(--color-neutral-700));--color-control-border:var(--color-neutral-500);--color-surface:light-dark(var(--color-neutral-200),var(--color-neutral-800));--color-text:light-dark(var(--color-neutral-950),var(--color-neutral-50));--color-text-contrast:light-dark(var(--color-neutral-50),var(--color-neutral-950));--color-text-hover:light-dark(var(--color-neutral-700),var(--color-neutral-200));--color-text-strong:light-dark(var(--color-neutral-900),var(--color-neutral-100));--color-tooltip:light-dark(var(--color-white),var(--color-neutral-700));--color-tooltip-contrast:light-dark(var(--color-neutral-900),var(--color-neutral-100));--color-success:var(--color-emerald-700);--color-success-contrast:var(--color-neutral-50);--color-success-hover:light-dark(#007552,#008e66);--color-success-subtle:light-dark(var(--color-emerald-100),var(--color-emerald-900));--color-success-strong:light-dark(var(--color-emerald-800),var(--color-emerald-300));--color-warning:var(--color-amber-600);--color-warning-contrast:var(--color-neutral-950);--color-warning-hover:light-dark(#d46700,#e78300);--color-warning-subtle:light-dark(var(--color-amber-100),var(--color-amber-900));--color-warning-strong:light-dark(var(--color-amber-800),var(--color-amber-300));--color-destructive:var(--color-rose-700);--color-destructive-contrast:var(--color-neutral-50);--color-destructive-hover:light-dark(#c00036,#d1054b);--color-destructive-subtle:light-dark(var(--color-rose-100),var(--color-rose-900));--color-destructive-strong:light-dark(var(--color-rose-800),var(--color-rose-300));--color-info:var(--color-indigo-600);--color-info-contrast:var(--color-neutral-50);--color-info-hover:light-dark(#4b36e9,#5e4ff9);--color-info-subtle:light-dark(var(--color-indigo-100),var(--color-indigo-900));--color-info-strong:light-dark(var(--color-indigo-800),var(--color-indigo-300))}:root,.neutral{--intent-color:var(--color-text);--intent-contrast:var(--color-text-contrast);--intent-hover:var(--color-text-hover);--intent-strong:var(--color-text-strong);--intent-subtle:var(--color-surface);--intent-border:var(--ui-ink,var(--color-border));--intent-fill-max:20%}.primary{--intent-color:var(--color-primary);--intent-contrast:var(--color-primary-contrast);--intent-hover:var(--color-primary-hover);--intent-strong:var(--color-primary-strong);--intent-subtle:var(--color-primary-subtle);--intent-border:var(--color-primary);--intent-fill-max:100%}.secondary{--intent-color:var(--color-accent);--intent-contrast:var(--color-accent-contrast);--intent-hover:var(--color-accent-hover);--intent-strong:var(--color-accent-strong);--intent-subtle:var(--color-accent-subtle);--intent-border:var(--color-accent);--intent-fill-max:100%}.success{--intent-color:var(--color-success);--intent-contrast:var(--color-success-contrast);--intent-hover:var(--color-success-hover);--intent-strong:var(--color-success-strong);--intent-subtle:var(--color-success-subtle);--intent-border:var(--color-success);--intent-fill-max:100%}.warning{--intent-color:var(--color-warning);--intent-contrast:var(--color-warning-contrast);--intent-hover:var(--color-warning-hover);--intent-strong:var(--color-warning-strong);--intent-subtle:var(--color-warning-subtle);--intent-border:var(--color-warning);--intent-fill-max:100%}.destructive,.danger,.error{--intent-color:var(--color-destructive);--intent-contrast:var(--color-destructive-contrast);--intent-hover:var(--color-destructive-hover);--intent-strong:var(--color-destructive-strong);--intent-subtle:var(--color-destructive-subtle);--intent-border:var(--color-destructive);--intent-fill-max:100%}.info{--intent-color:var(--color-info);--intent-contrast:var(--color-info-contrast);--intent-hover:var(--color-info-hover);--intent-strong:var(--color-info-strong);--intent-subtle:var(--color-info-subtle);--intent-border:var(--color-info);--intent-fill-max:100%}:where(.btn,.ipt,.text-control,.surface,.textarea,.select,.input-group,.checkbox,.radio,.switch,.card,.panel,.alert,.data-table,.pre,.quote,.tooltip-bubble,.tooltip-icon,.badge,.kbd,.code,.loader,.skeleton,.progress,.divider){--intent-color:var(--color-text);--intent-contrast:var(--color-text-contrast);--intent-hover:var(--color-text-hover);--intent-strong:var(--color-text-strong);--intent-subtle:var(--color-surface);--intent-border:var(--ui-ink,var(--color-border));--intent-fill-max:20%}:where(.text-control,.ipt,.textarea,.select,.input-group,.checkbox,.radio,.switch){--intent-border:var(--ui-ink,var(--color-control-border))}:where(.tooltip-bubble),.tooltip-bubble.neutral{--intent-color:var(--color-tooltip);--intent-contrast:var(--color-tooltip-contrast);--intent-hover:var(--color-tooltip);--intent-strong:var(--color-tooltip-contrast);--intent-subtle:var(--color-surface);--intent-border:var(--ui-ink,var(--color-border));--intent-fill-max:100%}:where(.loader,.skeleton,.progress,.divider){--intent-color:currentColor;--intent-border:currentColor}.solid{--ui-fill:100%;--ui-fg-on-fill:100%}.soft{--ui-fill:12%;--ui-fg-on-fill:0%}.ghost{--ui-fill:0%;--ui-fg-on-fill:0%}.edged{--ui-border:100%}.edgeless{--ui-border:0%}@property --ui-elevation{syntax:"*";inherits:false}@property --elevation-y{syntax:"*";inherits:false}@property --elevation-blur{syntax:"*";inherits:false}.elevation-none,.flat{--ui-elevation:0}.elevation-sm,.raised,.elevation-md,.floating{--elevation-y:1px;--elevation-blur:3px}.elevation-sm,.raised{--ui-elevation:1}.elevation-md,.floating{--ui-elevation:2}:root{color-scheme:light dark;--container-narrow:48rem;--container-max:80rem;--container-wide:90rem;--layout-gutter:clamp(1rem, 4vw, 2rem);--layout-section-block:clamp(4rem, 9vw, 7rem);--layout-gap:1rem;--layout-grid-min:16rem;--radius-small:.25rem;--radius-control:.5rem;--radius-surface:.875rem;--control-height:2.5rem;--border-width:1px;--elevation-color:light-dark(#0f172a14,#0000008c);--elevation-none:none;--elevation-sm:0 1px 2px var(--elevation-color), 0 1px 3px var(--elevation-color);--elevation-md:0 4px 6px -1px var(--elevation-color), 0 2px 4px -2px var(--elevation-color);--elevation-lg:0 20px 25px -5px var(--elevation-color), 0 8px 10px -6px var(--elevation-color);--focus-ring:color-mix(in srgb, light-dark(var(--color-neutral-950),var(--color-neutral-50)) 64%, transparent)}@supports (color:color-mix(in lab, red, red)){:root{--focus-ring:color-mix(in srgb, var(--color-primary) 64%, transparent)}}:root{--focus-ring-offset:calc(-1 * var(--border-width));--focus-ring-width:3px;--motion-duration-fast:.12s;--motion-duration-normal:.2s;--motion-duration-slow:.4s;--motion-ease:cubic-bezier(.2, 0, 0, 1);--z-popover:40;--hover-step:14%;--ui-active-transform:scale(.97)}@media (prefers-reduced-motion:reduce){:root{--ui-active-transform:none}}.light,.theme-light,[data-theme=light]{color-scheme:light}.dark,.theme-dark,[data-theme=dark]{color-scheme:dark}

package/dist/tw/aesthetics/chunky-tile.css

@@ -107,3 +107,19 @@
   font-weight: 800;
   letter-spacing: 0.04em;
 }
+
+/* `--tile-lift` alone cannot reach this: it resolves once, on `.chunky-tile`
+   itself (`--_tile-lift: var(--tile-lift, 4px)`), and inherits down already a
+   plain `4px` -- a nested `--tile-lift` on a descendant button is a fresh
+   declaration nothing downstream reads. `--ui-shadow-y` is what `box` actually
+   multiplies by elevation, so that is the token restated here, at half the
+   resting lift. A `.btn.icon` at `.dense`/`.p-xs` is close to the smallest
+   button the package draws (~20px, once the size floor both tiers drop for
+   `.icon` is gone -- see `button.css`), and a flat 4px bar under a target that
+   size sits close enough to the glyph's own footprint to read as a solid fill
+   behind it -- a `.ghost` button that looks `.solid`. 2px keeps the bar
+   legible as depth without swallowing the icon. */
+.chunky-tile .btn.icon.dense,
+.chunky-tile .btn.icon.p-xs {
+  --ui-shadow-y: 2px;
+}

package/dist/tw/box.css

@@ -12,8 +12,30 @@
      by `--intent-fill-max` -- neutral stops early because a full fill of the
      page's ink is a slab. The cap lands before the hover step, so a capped
      intent still deepens on hover instead of pinning rest and hover together.
-     See model.md#the-ink-is-gated-by-the-plate-not-tied-to-the-fill. */
-  --_capped: min(var(--ui-fill, var(--_d-fill)), var(--intent-fill-max, 100%));
+     See model.md#the-ink-is-gated-by-the-plate-not-tied-to-the-fill.
+
+     `--_fill-cap` is the matching slot for a component that reinterprets what a
+     presentation means for itself rather than merely bounding it -- `.card.soft`
+     uses it to rest at 0% regardless of what `.soft` asks for. It has to be a
+     separate term rather than a rewrite of `--ui-fill`: `presentation.css`'s
+     `.soft` is unlayered CSS and `@utility card`'s own rule compiles into
+     Tailwind's `utilities` layer, and an unlayered declaration always wins over
+     a layered one for the same property, at any specificity -- so `.card.soft`
+     writing `--ui-fill: 0%` directly was silently losing to `.soft`'s `12%`
+     every time. `--_fill-cap` is a token `.soft` never touches, so nothing
+     contests it.
+
+     Restated here at `100%` -- a no-op -- for the same reason `--_d-ground`
+     is restated `transparent` below rather than left to its `var()` fallback:
+     `--_fill-cap` inherits like any custom property, so `.card.soft` setting
+     it to `0%` would otherwise reach every box nested inside, not just the
+     card itself -- a badge sitting in a `.data-table:not(.solid, .ghost)`
+     cell inherited the table's `0%` cap and rendered with no fill and no
+     visible chip at all. An own declaration beats an inherited one at any
+     specificity, so restating it here is what keeps a nested box reading its
+     own presentation instead of the container's reinterpretation of one. */
+  --_fill-cap: 100%;
+  --_capped: min(var(--ui-fill, var(--_d-fill)), var(--_fill-cap, 100%), var(--intent-fill-max, 100%));
   --_fill: calc(var(--_capped) * var(--ui-bg-alpha, 1));
   --_hover-fill: calc(min(100%, var(--_capped) + var(--hover-step)) * var(--ui-bg-alpha, 1));
   /* How much of the foreground is the contrast ink: what the presentation asks

package/dist/tw/components/button.css

@@ -1,6 +1,5 @@
 @reference "tailwindcss";
 @import "../theme.css";
-@reference "./loader.css";
 @reference "../box.css";
 
 /* A filled, edgeless, raised box you can press. `box` paints it; everything
@@ -39,17 +38,26 @@
      `.destructive`/`.danger`/`.error` uses on the intent axis. Bare `sm`/`lg`
      are already the size modifier's class names, so `p-` prefixes here to
      avoid colliding with a button's own size. `.p-xs` is the tightest step,
-     below `.compact`: a chip-sized button in a toolbar or a table cell. */
+     below `.compact`: a chip-sized button in a toolbar or a table cell.
+
+     `.icon` drops both floors -- `min-width` from its own base rule below and
+     `min-height` from `--control-height` -- at every padding tier, labeled
+     buttons keep the height floor everywhere but `.p-xs`/`.dense`. `.icon`
+     already asks to be square: `aspect-square` ties its width to whatever
+     height it lands on, so a height floor that survives keeps the button
+     bigger than its own glyph regardless of how tight the padding asked to be
+     -- the one combination `.p-xs`/`.dense` used to get right and the other two
+     tiers did not, leaving a `.icon.compact` floating in a box far bigger than
+     it needed and a `.icon.spacious` doing the same one step further out. */
   &.p-xs,
   &.dense {
     @apply px-2 py-0.5;
 
-    /* The one padding step that also drops the size floor. At this tier the
-       button is a chip in a toolbar or a table cell, where `--control-height`
-       is taller than the row it sits in; every other size and padding class
-       keeps the floor, so a plain button stays a comfortable target. The icon
-       variant gives up `min-width` with it -- with no floor on either axis the
-       box is padding around whatever the consumer sized their glyph to. */
+    /* The one padding step that also drops the size floor for a labeled
+       button. At this tier the button is a chip in a toolbar or a table
+       cell, where `--control-height` is taller than the row it sits in;
+       every other size and padding class keeps the floor, so a plain button
+       stays a comfortable target. */
     min-height: 0;
 
     &.icon {
@@ -65,6 +73,9 @@
 
     &.icon {
       @apply p-1;
+
+      min-width: 0;
+      min-height: 0;
     }
   }
 
@@ -74,35 +85,13 @@
 
     &.icon {
       @apply p-3;
+
+      min-width: 0;
+      min-height: 0;
     }
   }
 
   &.pill {
     @apply rounded-full;
   }
-
-  &.loading {
-    /* `text-transparent!` forces the label invisible whatever the intent
-       resolved to, so the spinner is the only thing left to read. */
-    @apply pointer-events-none text-transparent!;
-
-    & > * {
-      opacity: 0 !important;
-    }
-
-    /* The spinner takes the label's colour, which `box` already resolved
-       against this button's own intent and presentation. It reads `--_fg`
-       rather than `currentColor`: the rule above forces `color` to transparent
-       to hide the label, and a spinner painted in `currentColor` inherits that
-       and paints nothing at all. */
-    &::after {
-      @apply loader-mask absolute block size-4 -translate-x-1/2 -translate-y-1/2;
-
-      background-color: var(--_fg);
-
-      top: calc(50% + var(--border-width));
-      left: calc(50% + var(--border-width));
-      content: "";
-    }
-  }
 }

package/dist/tw/components/feedback.css

@@ -30,54 +30,59 @@
 /* A soft, edged surface, so an aesthetic that blurs surfaces blurs this too: an
    alert is a container carrying a message, not a control. */
 @utility alert {
-  @apply surface flex p-4 leading-5;
+  @apply surface flex items-start gap-3 p-4 leading-5;
 
   --_d-fill: 12%;
   --_d-fg-on-fill: 0%;
   --_d-border: 100%;
   --_d-elevation: 0;
 
-  &.icon {
-    @apply relative ps-11;
-
-    &::before {
-      @apply absolute start-4 top-4 block size-5 bg-current;
-
-      content: "";
-      mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
-      -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
-      mask-size: contain;
-      -webkit-mask-size: contain;
-      mask-repeat: no-repeat;
-      -webkit-mask-repeat: no-repeat;
-      mask-position: center;
-      -webkit-mask-position: center;
-    }
-
-    &.success::before {
-      mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>");
-      -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>");
-    }
-
-    &.warning::before {
-      mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>");
-      -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>");
-    }
-
-    &.destructive::before,
-    &.danger::before,
-    &.error::before {
-      mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m15 9-6 6'/><path d='m9 9 6 6'/></svg>");
-      -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m15 9-6 6'/><path d='m9 9 6 6'/></svg>");
-    }
-
-    &.info::before {
-      mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
-      -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
-    }
+  /* Same carve-out as `.panel`'s, and for the same reason: a neutral alert
+     mixes 12% of near-black ink onto the page, measured `217, 217, 217`
+     against `250, 250, 250` -- the identical slab `.panel` read before its
+     own fix, not a status-signaling problem, since this is scoped to no
+     named intent. A named intent keeps its ordinary wash; untinting
+     `.alert.soft.destructive` too would silence the status it exists to
+     carry rather than quiet it, which is why an earlier, unconditional
+     version of this fix was rejected for `.alert` specifically. This
+     version never reaches that case: `:not(...)` names every intent class,
+     plus `.solid`/`.ghost` so an explicit presentation on the element is
+     never clamped to a cap it did not ask for.
+
+     Grounds on `--color-foreground` through the public `--ui-surface-ground`
+     escape hatch, exactly like `.panel` and a resting `.card.soft` -- an
+     alert has no hover state to reveal a tint into either, so this is
+     permanent rather than revealed. Unlike a neutral panel or badge, an
+     alert cannot lose its visual identity from this: `--_d-border: 100%`
+     above holds regardless of fill, so a neutral alert still reads as a
+     framed box, just a quiet one instead of a grey slab. */
+  &:not(.primary, .secondary, .success, .warning, .destructive, .danger, .error, .info, .solid, .ghost) {
+    --_fill-cap: 0%;
+    --ui-surface-ground: var(--color-foreground);
   }
 }
 
+/* No icon is shipped: the five hardcoded per-intent masks this used to paint on
+   a `::before` are gone, the same way the per-input-type icon was removed from
+   `.input-group` -- see `docs/internal/model.md#input-group-owns-the-box-the-control-inside-gives-it-up`.
+   `.alert` is
+   already `flex`, so an icon dropped in as a real child is spaced by `gap-3`
+   with nothing to trigger: `.alert-icon` only fixes its size and alignment, not
+   whether one is present. Any icon element works, the same contract
+   `.input-group` documents -- an inline `<svg>`, an `<img>`, or a class from an
+   icon set such as `@codenhub/icons`. */
+@utility alert-icon {
+  @apply inline-flex flex-none items-center justify-center;
+
+  /* `!important`: an icon-set glyph (`@codenhub/icons` among them) carries its
+     own `width`/`height` on a selector this utility cannot outrank -- an
+     attribute selector reads more specific than one class regardless of
+     stylesheet order. Sizing what you drop in is this utility's one job, so it
+     has to win over the glyph's own opinion. */
+  width: 1.25rem !important;
+  height: 1.25rem !important;
+}
+
 /* A soft, edgeless chip. Small enough that the structural silhouette would be
    most of its height, so it takes the tight one where an aesthetic ships a pair. */
 @utility badge {
@@ -114,10 +119,22 @@
 
 /* The same: intent only. The track is 10px tall, which is most of a border under
    any aesthetic thick enough to have an opinion, so the bar draws no edge and the
-   ceilings that used to keep one survivable are gone with it. */
+   ceilings that used to keep one survivable are gone with it.
+
+   `--progress-surface` used to mix `--intent-subtle` at 60% -- a tint of the
+   same tone the track already sits on (a bare page, or a `.soft` card), which
+   measured under 1.2:1 against both in either theme, well under the 3:1 WCAG
+   1.4.11 floor `registry.json` already cites for the checkbox, radio, and
+   switch. `--color-border` was tried next and measured no better (1.05:1): it
+   is calibrated for a line against the page, and a `.soft` card already sits
+   close to that same lightness, so a border-strength token disappears against
+   it too. Mixing `--color-text-secondary` instead is what actually separates
+   the track from both -- it is a step read against text at rest everywhere
+   else in the package, and stepping toward it here clears 3:1 (3.63-4.26:1
+   measured) on a bare page and a `.soft` card, in both themes. */
 @utility progress {
   --progress-color: var(--intent-color);
-  --progress-surface: color-mix(in srgb, var(--intent-subtle) 60%, transparent);
+  --progress-surface: color-mix(in srgb, var(--color-text-secondary) 70%, transparent);
 
   @apply relative h-2.5 w-full overflow-hidden bg-(--progress-surface);
   /* Round by default; an aesthetic that declares no radius squares the track and

package/dist/tw/components/form.css

@@ -58,8 +58,21 @@
      tick on light grey.
 
      Ramping against `--_fill` keeps the two in step at every bound, including
-     the checked state that lifts them. */
-  --_on-fill: min(var(--ui-fg-on-fill, var(--_d-fg-on-fill)), max(0%, calc(var(--_fill) * 2 - 100%)));
+     the checked state that lifts them.
+
+     `--_fg-on-fill-floor` is the seam `:checked` pins instead of touching
+     `--ui-fg-on-fill` directly. `.ghost`/`.soft` are unlayered CSS (P3, and see
+     model.md's `--_fill-cap` history) and `text-control` compiles into
+     Tailwind's `utilities` layer, so a layered `:checked` writing
+     `--ui-fg-on-fill` the way it writes `--_fill-cap`/`--_fill-floor` would
+     lose to `.ghost`'s unlayered `--ui-fg-on-fill: 0%` regardless of
+     specificity -- the same trap `--_fill-cap` exists to avoid on the fill
+     itself. A private floor `.ghost`/`.soft` never touch has nothing
+     unlayered contesting it. */
+  --_on-fill: max(
+    var(--_fg-on-fill-floor, 0%),
+    min(var(--ui-fg-on-fill, var(--_d-fg-on-fill)), max(0%, calc(var(--_fill) * 2 - 100%)))
+  );
   /* The resting line is a fraction of the intent rather than all of it, and the
      fraction is what makes the pointer visible. Drawn at full strength a control
      already sits at its intent's darkest, and hover moves it to a neighbouring
@@ -120,14 +133,41 @@
     --_line-tone: var(--intent-color);
   }
 
-  /* R8, P6: `:checked` lifts the bounds and lets the fill class compose, rather
-     than pinning `--_fill`/`--_fg` (which made every checked toggle render
-     identically). The floor keeps a mark on a ground when a container's `.ghost`
-     would take it away. Lives here, not on the toggles, because a text input is
-     never `:checked`. */
+  /* R8, P6: `:checked` pins the fill by making the floor and the cap the same
+     value, so `clamp()` returns exactly that value whatever `--ui-fill` asks --
+     still a bound on the input, still lifted rather than a rewrite of the
+     result (the failure mode P6 exists for: an early version pinned `--_fill`
+     and `--_fg` directly, which made a checked toggle ignore its own aesthetic
+     and elevation along with presentation).
+
+     The floor used to sit at `12%` rather than `100%`, which kept presentation
+     live on the checked mark too -- a checked `.soft` toggle rendered a pale
+     plate with just the mark at full strength, the classic ring-and-dot radio.
+     The stress-test pass found that cost more than it bought on a real screen:
+     three presentations gave a checkbox, a radio, and a switch three different
+     "on" identities to learn, while every *unchecked* toggle read the same
+     washed-out plate regardless of which class asked for it -- close enough to
+     the disabled look that a form full of ordinary, unchecked, un-intended
+     controls read as half-disabled. Pinning checked to one plate and freeing
+     presentation to separate the *unchecked* one instead (see
+     `checkbox`/`radio`/`switch` below) moves the axis to where it was doing
+     something. Lives here, not on the toggles, because a text input is never
+     `:checked`.
+
+     The ink is pinned alongside the fill, through `--_fg-on-fill-floor` rather
+     than `--ui-fg-on-fill` directly (see that seam, above): the other half of
+     what a fill class asks for is how much contrast ink it wants
+     (`--ui-fg-on-fill: 0%` is `.ghost`/`.soft` declaring "none, my plate stays
+     quiet"), and pinning the fill without pinning this left a checked
+     `.ghost`/`.soft` toggle with an opaque plate and a mark that still read as
+     though the plate were quiet -- both derived from the same intent tone,
+     close enough to disappear into each other. `--_on-fill` ramps against the
+     *composed* `--_fill`, so once that is pinned to 100% the ink has to reach
+     full contrast too, or the ramp's own ceiling has nothing to reach. */
   &:checked {
     --_fill-cap: 100%;
-    --_fill-floor: 12%;
+    --_fill-floor: 100%;
+    --_fg-on-fill-floor: 100%;
   }
 
   /* Native decorations a field replaces with its own artwork. */
@@ -164,11 +204,25 @@
   --_fill-cap: 20%;
 }
 
-/* A checked toggle fills with its own intent, so neutral has to drop its 20%
-   cap here. Declared where the intents are (0-2-0, unlayered): inside
-   `text-control` `.neutral` would overrule it and a checked toggle would fill to
-   a fifth of its colour. */
-:is(.text-control, .checkbox, .radio, .switch, input):checked {
+/* A checked text-control fills with its own intent, so neutral has to drop its
+   20% cap here. No toggle needs this arm any more (see below), but a text
+   input is never `:checked` in practice either -- kept for whatever custom
+   `.text-control` composition does check itself. Declared where the intents
+   are (0-2-0, unlayered): inside `text-control` `.neutral` would overrule it. */
+:is(.text-control, input):checked {
+  --intent-fill-max: 100%;
+}
+
+/* The three toggles read their own component cap (`--_fill-cap`, below) as the
+   ceiling regardless of intent, checked or not -- not just at `:checked`, the
+   way the arm above still works for a hypothetical checked text-control. A
+   neutral fill stops at 20% everywhere else because it is the page's own ink,
+   and a full one reads as a slab on a badge or a card. That reasoning does not
+   hold for a toggle at rest: a neutral checkbox is the common case, most
+   controls carry no intent class at all, and it has to look like a present,
+   interactive box rather than a washed-out one just because nothing colored
+   it. Declared where the intents are, for the reason given above. */
+:is(.checkbox, .radio, .switch) {
   --intent-fill-max: 100%;
 }
 
@@ -182,6 +236,21 @@
   --_edge-floor: 0%;
 }
 
+/* `.switch`'s one exception to the opt-out above: `.ghost` already asks for
+   zero fill, so a `.switch.ghost.edgeless` track has neither a line nor a
+   plate and disappears entirely -- nothing marks its bounds but the floating
+   knob. Every other fill on this component still has something to paint
+   (`.soft`/`.solid`/default all rest above 0%), so only this one pairing
+   needs the floor held up. `.switch.ghost.edgeless` renders identically to
+   `.switch.ghost.edged` now, published unsupported as a distinct look --
+   the same "produces a row indistinguishable from its neighbour" reason
+   `.solid.edgeless`/`.solid.edged` already collapse to one row for. Higher
+   specificity than the rule above (three classes, not an `:is()` of one)
+   wins regardless of source order. */
+.switch.ghost.edgeless {
+  --_edge-floor: 100%;
+}
+
 /* An invalid control is destructive whatever else it was asked to be. A plain
    unlayered rule, not `&[aria-invalid]` inside `@utility`: the intent reset is
    unlayered too and would overrule a layered version (leaving a grey line and
@@ -307,9 +376,17 @@
    No icons ship. Any element works in a slot -- an inline `<svg>`, an `<img>`,
    or a class from an icon set such as `@codenhub/icons` -- placed before the
    control for a leading adornment and after it for a trailing one. See
-   docs/usage/forms.md#icons. */
+   docs/usage/forms.md#icons.
+
+   The gap between the control and its adornment is a token, `--input-group-gap`,
+   rather than a bare Tailwind `gap-2`: an icon reads that 0.5rem as the normal
+   breathing room a distinct glyph needs, but a text affix meant to glue onto the
+   value -- a URL host, a currency symbol, a unit -- reads the same gap as a
+   stray space breaking the two apart. A consumer sets `--input-group-gap: 0` on
+   their own `.input-group` for a flush affix; the default stays the icon-tuned
+   0.5rem so every existing icon composition is unchanged. */
 @utility input-group {
-  @apply text-control flex w-full items-center gap-2;
+  @apply text-control flex w-full items-center;
 
   /* After the `@apply`, for the reason `ipt` states it: `text-control` inlines
      its own resting geometry there, so a default written above it loses to the
@@ -320,9 +397,11 @@
   --_d-border: 100%;
   --_d-elevation: 0;
 
+  --input-group-gap: 0.5rem;
   --input-group-pad: 0.75rem;
 
   min-height: var(--control-height);
+  gap: var(--input-group-gap);
   padding-inline: var(--input-group-pad);
 
   /* The focus ring the wrapper cannot get from `:focus-visible` -- a `<div>` is
@@ -382,18 +461,26 @@
 
 /* The three toggles compose `text-control` for its bounds, not its chrome: the
    edge floor keeps a container's `.edgeless` from erasing the closed silhouette
-   (WCAG 1.4.11), and the checked state that lifts the fill bounds lives there.
-   They raise the fill cap to 20% -- the 6% one keeps typed text legible and a
-   toggle has none; 20% is a `.solid` badge's plate and separates the three
-   fills. `.ghost` is unsupported (an unchecked ghost toggle is the silhouette
-   it already has, a checked one a mark on nothing); the registry records it and
-   the checked fill floor clamps a cascaded one. See model.md#unsupported-values. */
+   (WCAG 1.4.11), and the checked state that pins the fill (see `text-control`'s
+   `:checked` above) lives there. They raise the fill cap to 40% -- the 6% one
+   keeps typed text legible and a toggle has none, and 40% is where a resting
+   `.ghost` (0%), `.soft`/default (12%), and `.solid` (the cap itself) read as
+   three distinct plates rather than three shades of the same wash, the same
+   separation `.switch` was already measured against. Unclassed rests at
+   `.soft` rather than at the cap: `--_d-fill`/`--_d-fg-on-fill` below name the
+   same pair `.soft` does, so a bare `<input class="checkbox">` reads as the
+   quiet tint the stress-test pass preferred over the louder plate `.solid`
+   asks for -- a consumer still reaches that plate by writing `.solid` itself.
+   `.ghost` used to be unsupported here -- a checked one used to be a mark on
+   nothing -- and is not any more, now that checked reads the same plate
+   whatever the presentation.
+   See model.md#the-bounds-that-survive-and-the-test-for-keeping-one. */
 @utility checkbox {
   @apply text-control inline-grid size-4 cursor-pointer place-content-center;
 
-  --_d-fill: 100%;
-  --_d-fg-on-fill: 100%;
-  --_fill-cap: 20%;
+  --_d-fill: 12%;
+  --_d-fg-on-fill: 0%;
+  --_fill-cap: 40%;
   --_line-rest: 100%;
   --_d-border: 100%;
   --_d-elevation: 0;
@@ -439,13 +526,14 @@
   }
 }
 
-/* The same control with a round silhouette and a dot for its mark. */
+/* The same control with a round silhouette and a dot for its mark, and the
+   same fill cap raise given on `checkbox`. */
 @utility radio {
   @apply text-control inline-grid size-4 cursor-pointer place-content-center rounded-full;
 
-  --_d-fill: 100%;
-  --_d-fg-on-fill: 100%;
-  --_fill-cap: 20%;
+  --_d-fill: 12%;
+  --_d-fg-on-fill: 0%;
+  --_fill-cap: 40%;
   --_line-rest: 100%;
   --_d-border: 100%;
   --_d-elevation: 0;
@@ -470,12 +558,14 @@
     content: "";
   }
 
-  /* A checked radio thickens its ring and takes the intent whole on the line;
-     the fill is left to the presentation. The dot takes `box`'s composed
-     foreground, which walks to the contrast tone as the plate fills, so a
-     filled circle still carries a readable dot. `--_line-tone` rather than
-     `--_edge`, so `text-control`'s edge floor still draws the ring under a
-     container's `.edgeless`. */
+  /* A checked radio thickens its ring and takes the intent whole on the line.
+     The fill is pinned by `text-control`'s `:checked` now, not left to the
+     presentation -- a filled circle at every checked radio, whatever fill
+     class it carries, rather than the classic ring-and-dot a checked `.soft`
+     used to draw. The dot still takes `box`'s composed foreground, which walks
+     to the contrast tone as the (now always full) plate fills, so it stays
+     readable. `--_line-tone` rather than `--_edge`, so `text-control`'s edge
+     floor still draws the ring under a container's `.edgeless`. */
   &:checked {
     --_line-tone: var(--intent-color);
 
@@ -491,24 +581,28 @@
 }
 
 /* A2: every dimension derives from the border width `box` resolved, so the knob
-   cannot drift out of a track a thick aesthetic widened. A switch caps its fill
-   higher than the other toggles because its track is the whole component. */
+   cannot drift out of a track a thick aesthetic widened. */
 @utility switch {
   @apply text-control relative cursor-pointer;
 
-  --_d-fill: 100%;
-  --_d-fg-on-fill: 100%;
+  --_d-fill: 12%;
+  --_d-fg-on-fill: 0%;
   --_line-rest: 100%;
   --_d-border: 100%;
   --_d-elevation: 0;
 
-  /* 40%, measured: at `text-control`'s 6% the three fills collapsed to two looks
-     and the switch had to vary its *line* per fill class -- the one place a fill
-     class decided an edge. 40% separates all three (29/67/144 sRGB steps on the
-     light page, against ~20 for a visible one) without reaching a checked
-     track's 100%, so the knob's position still says which. `axes.spec.ts`
-     asserts all three. `--intent-fill-max` still caps neutral at 20%. A cap
-     rather than a resting value, because it answers the cascade case. */
+  /* 40%, measured: at `text-control`'s 6% the three resting fills collapsed to
+     two looks and the switch had to vary its *line* per fill class instead --
+     the one place a fill class decided an edge. 40% separates all three
+     (29/67/144 sRGB steps on the light page, against ~20 for a visible one)
+     without reaching a checked track's pinned 100%, so the knob's position
+     still says which. `axes.spec.ts` asserts all three. `checkbox`/`radio`
+     raise their own cap to the same value for the same reason -- a switch does
+     not need a higher one, a track is just the component every toggle's box
+     already was. A cap rather than a resting value, because it answers the
+     cascade case; `--intent-fill-max` (declared where the intents are, above)
+     lifts to 100% for all three toggles so a neutral one reads this cap too,
+     not the 20% ceiling a badge or a card stays under. */
   --_fill-cap: 40%;
 
   --switch-height: 1.25rem;

package/dist/tw/components/index.css

@@ -25,4 +25,4 @@
    makes the emission deliberate; the composition-body check in
    `exports.test.ts` fails the build if one is dropped. `text-control` and
    `surface` are also documented as consumer-usable on their own. */
-@source inline("box box-hover box-active loader-mask text-control surface input-group text-display text-title-lg text-title text-title-sm text-label-lg text-label text-body btn field label hint ipt email password url tel search date datetime month week time icon left right textarea select checkbox radio switch alert badge skeleton progress tooltip card panel interactive flush compact spacious neutral solid soft ghost edged edgeless flat raised floating loader");
+@source inline("box box-hover box-active loader-mask text-control surface input-group text-display text-title-lg text-title text-title-sm text-label-lg text-label text-body btn field label hint ipt email password url tel search date datetime month week time icon left right textarea select checkbox radio switch alert alert-icon badge skeleton progress tooltip tooltip-bubble tooltip-icon card panel interactive flush compact spacious neutral solid soft ghost edged edgeless flat raised floating loader");

package/dist/tw/components/loader.css

@@ -28,19 +28,6 @@
     .bars-wave,
     .pulse-ring
   )
-),
-.loading:not(
-  :where(
-    .dots-wave,
-    .dots-fade,
-    .dots-queue,
-    .dots-rotate,
-    .dots-grow,
-    .dots-grow-alternate,
-    .dot-bounce,
-    .bars-wave,
-    .pulse-ring
-  )
 ) {
   --loader-art: url("data:image/svg+xml;charset=utf-8,<svg stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>.spinner_V8m1{transform-origin:center;animation:spinner_zKoa 2s linear infinite}.spinner_V8m1 circle{stroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite}@keyframes spinner_zKoa{100%{transform:rotate(360deg)}}@keyframes spinner_YpZS{0%{stroke-dasharray:0 150;stroke-dashoffset:0}47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16}95%,100%{stroke-dasharray:42 150;stroke-dashoffset:-59}}</style><g class='spinner_V8m1'><circle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'></circle></g></svg>");
 }
@@ -87,15 +74,14 @@
    a loader inside filled content matches the text around it and
    `.loader.success` is green. There is nothing else to know. */
 @utility loader {
-  @apply loader-mask inline-block size-8 [&.lg]:size-10 [&.sm]:size-6;
+  @apply loader-mask inline-block size-7 [&.lg]:size-9 [&.sm]:size-5;
 
   color: var(--intent-color);
   background-color: currentColor;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .loader,
-  .loading {
+  .loader {
     --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='9.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-dasharray='42 18'/></svg>");
   }