@codenhub/styles 0.1.0 → 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))}.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{--ui-elevation:1;--elevation-y:1px;--elevation-blur:3px}.elevation-md,.floating{--ui-elevation:2;--elevation-y:1px;--elevation-blur:3px}: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

@@ -80,8 +80,10 @@
 
   /* Consumer-supplied, the way `.pixel` reads `--font-pixel`. The package ships no
      font binary, so the aesthetic has no rounded face to fall back to and takes the
-     page's own stack until one is supplied. */
-  font-family: var(--font-rounded, var(--font-sans, ui-sans-serif, system-ui, sans-serif));
+     page's own stack until one is supplied -- `--font-default`, the token the
+     reset applies to `html`/`body`, so a consumer that themed the page font gets
+     it here too. `--font-sans` is Tailwind's own and the package never sets it. */
+  font-family: var(--font-rounded, var(--font-default, ui-sans-serif, system-ui, sans-serif));
 }
 
 /* The one R3 exception this aesthetic takes, recorded in the registry as
@@ -105,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
@@ -26,6 +48,17 @@
      stays the ceiling, not the result, or the slot is declared and unread. */
   --_on-fill: min(var(--ui-fg-on-fill, var(--_d-fg-on-fill)), max(0%, calc(var(--_capped) * 2 - 100%)));
 
+  /* The ground a partial fill is painted over. Every box rests on nothing unless
+     it says so, and it says so here rather than through the `var(--_d-ground,
+     transparent)` fallback on the line below: `--_d-ground` inherits like any
+     custom property, so a `surface` setting it to its own opaque plate would
+     reach every box nested inside -- a `ghost` button in a card would blend its
+     zero fill over the page colour and paint an opaque slab where it asked for
+     no fill, and the slab would stay while the card tints on hover. An own
+     declaration beats the inherited one at any specificity; `surface`, `kbd`,
+     `code`, `pre` and the tooltip each restate theirs after `@apply box`. */
+  --_d-ground: transparent;
+
   --_bg: color-mix(in oklab, var(--intent-color) var(--_fill), var(--_d-ground, transparent));
   /* The two ends answer different questions: `--intent-contrast` prints *on* the
      fill, `--intent-strong` prints on the page (the slot for readable ink on a
@@ -106,6 +139,16 @@
   --_shadow: var(--_shadow-parts);
   --_focus-stack: var(--_shadow), inset 0 0 0 var(--ui-focus-inset) var(--focus-ring);
 
+  /* Every box sizes itself as `min-height`/`min-width: var(--control-height)`
+     plus its own padding and the border shorthand above, so its geometry is only
+     right under `box-sizing: border-box`. `reset.css` sets that on `*`, but only
+     the `.`, `/native` and `/tw/reset` entrypoints carry the reset -- and the
+     first two pull Tailwind's Preflight, which sets it anyway. `/components` and
+     the granular `/tw/*` component entrypoints ship neither, so a box there
+     inherited the `content-box` default and every sized control came out
+     inflated by its own padding and border. A component's own geometry is not an
+     external reset's job; `box` owns it. */
+  box-sizing: border-box;
   background-color: var(--_bg);
   color: var(--_fg);
   border: var(--_width) solid var(--_edge);

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
@@ -33,18 +32,50 @@
     min-width: var(--control-height);
   }
 
-  /* `.p-sm`/`.p-lg` are the canonical names, matching the `sm`/`md`/`lg`
-     vocabulary the elevation modifier uses; `.compact`/`.spacious` are
+  /* `.p-xs`/`.p-sm`/`.p-lg` are the canonical names, matching the `sm`/`md`/`lg`
+     vocabulary the elevation modifier uses; `.dense`/`.compact`/`.spacious` are
      first-class aliases, not a deprecation shim -- the same pattern
      `.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. */
+     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.
+
+     `.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 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 {
+      @apply p-0.5;
+
+      min-width: 0;
+    }
+  }
+
   &.p-sm,
   &.compact {
     @apply px-2.5 py-1;
 
     &.icon {
       @apply p-1;
+
+      min-width: 0;
+      min-height: 0;
     }
   }
 
@@ -54,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