@codenhub/styles 0.1.0 → 0.1.1

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}
+: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}

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

package/dist/tw/box.css

@@ -26,6 +26,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 +117,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

@@ -33,12 +33,32 @@
     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. */
+  &.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. */
+    min-height: 0;
+
+    &.icon {
+      @apply p-0.5;
+
+      min-width: 0;
+    }
+  }
+
   &.p-sm,
   &.compact {
     @apply px-2.5 py-1;

package/dist/tw/components/form.css

@@ -104,8 +104,6 @@
 
   @apply w-full appearance-none;
 
-  box-sizing: border-box;
-
   &::placeholder {
     color: var(--color-text-secondary);
   }

package/dist/tw/components/index.css

@@ -1,10 +1,7 @@
 @reference "tailwindcss";
 @import "tailwindcss/utilities.css";
-@source not "../../dist";
-@source not "../../tests";
-@source not "../../dev";
-@source not "../../debug";
-@source not "../../playground";
+/* Everything that is not `src/` -- see the note in `index.css`. Keeps a class
+   name in a docs code fence from shipping as a real rule in `dist/components.css`. */
 @import "../theme.css";
 @import "../typography.css";
 @import "../box.css";
@@ -15,4 +12,17 @@
 @import "./surface.css";
 @import "./tooltip.css";
 
-@source inline("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");
+/* The composition utilities -- `box`, `box-hover`, `box-active`, `loader-mask`,
+   `text-control`, `surface`, `input-group` -- are `@utility` rules whose bodies
+   the content scan will not emit on its own. `box` and friends appear only as
+   `@utility` blocks and `@apply` targets; `text-control`, `surface` and
+   `input-group` appear only inside `:is()`/`:where()` argument lists in
+   `intent.css` and `form.css`, never as a selector of their own. Their standalone
+   rules shipped only because docs prose happened to name them, and excluding
+   `docs/` from the scan removed that -- `.input-group` (and, with it, its focus
+   ring, its flush inner control, and `:has()`-propagated invalid state) went
+   silently dark, caught only by the browser suite. Safelisting all seven here
+   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");

package/dist/tw/components/surface.css

@@ -46,8 +46,13 @@
   --_d-border: 100%;
   --_d-elevation: 1;
 
-  /* `.p-sm`/`.p-lg` are the canonical names; `.compact`/`.spacious` are
-     first-class aliases -- see the identical note in `button.css`. */
+  /* `.p-xs`/`.p-sm`/`.p-lg` are the canonical names; `.dense`/`.compact`/`.spacious`
+     are first-class aliases -- see the identical note in `button.css`. */
+  &.p-xs,
+  &.dense {
+    --surface-padding: 0.5rem;
+  }
+
   &.p-sm,
   &.compact {
     --surface-padding: 0.75rem;
@@ -65,9 +70,23 @@
   /* Opt-in, because a card is only sometimes a control. Applications still owe
      it a real interactive element and an accessible name. Hover and press are
      the derived ones every other pressable box gets; there is nothing
-     card-specific about either. */
-  &.interactive {
-    @apply box-hover box-active cursor-pointer;
+     card-specific about either.
+
+     `.interactive` is the whole opt-in and stays that way; `.hoverable` and
+     `.pressable` are its halves, for a card that answers one gesture and not
+     the other. A card with its own nested controls takes `.hoverable` for the
+     hover warmth without the press-scale that reads as "you activated the
+     card" when the click really landed on a nested button. `.hoverable` alone
+     does not set the pointer cursor: that travels with being a click target,
+     i.e. with `.pressable` / `.interactive`. */
+  &.interactive,
+  &.hoverable {
+    @apply box-hover;
+  }
+
+  &.interactive,
+  &.pressable {
+    @apply box-active cursor-pointer;
   }
 }
 
@@ -82,6 +101,11 @@
   --_d-border: 0%;
   --_d-elevation: 0;
 
+  &.p-xs,
+  &.dense {
+    --surface-padding: 0.25rem;
+  }
+
   &.p-sm,
   &.compact {
     --surface-padding: 0.5rem;

package/dist/tw/elevation.css

@@ -20,20 +20,27 @@
   --ui-elevation: 0;
 }
 
-/* The aesthetic's depth as authored, said explicitly. The geometry is the
-   fallback for a page with no aesthetic in scope; an aesthetic that declares its
-   own overrides it, and the elevation multiplies whichever one lands. */
+/* The plain-step geometry both rungs multiply, declared once so the two cannot
+   drift. It is the fallback for a page with no aesthetic in scope; an aesthetic
+   that declares its own shadow parts overrides it, and the elevation multiplier
+   scales whichever one lands. `.floating` takes its extra depth from the
+   multiplier below, not a second copy of these parts. */
 .elevation-sm,
-.raised {
-  --ui-elevation: 1;
+.raised,
+.elevation-md,
+.floating {
   --elevation-y: 1px;
   --elevation-blur: 3px;
 }
 
+/* The aesthetic's depth as authored, said explicitly. */
+.elevation-sm,
+.raised {
+  --ui-elevation: 1;
+}
+
 /* Twice it, for menus and popovers. */
 .elevation-md,
 .floating {
   --ui-elevation: 2;
-  --elevation-y: 1px;
-  --elevation-blur: 3px;
 }

package/dist/tw/index.css

@@ -1,9 +1,24 @@
 @import "tailwindcss";
-@source not "../dist";
-@source not "../tests";
-@source not "../dev";
-@source not "../debug";
-@source not "../playground";
+
+/* The build has no markup to scan, so Tailwind's automatic content detection
+   sees only this package's own files. The `src/` scan is load-bearing -- it is
+   how the composition utilities (`box`, `surface`, `text-control`,
+   `input-group`, `loader-mask`) get emitted as standalone rules, since nothing
+   `@source inline`s them -- so `source(none)` is not an option. The cost is that
+   a handful of Tailwind utilities whose names collide with a CSS property or a
+   word in a comment (`.backdrop-filter`, `.filter`, `.transition`, `.container`,
+   ...) are emitted unused. They are inert and small; left as-is deliberately.
+
+   The `@source not` lines below keep everything that is not `src/` out of that
+   scan: the sibling app and fixture directories, the `docs/` tree, the build
+   scripts, and the root prose and data files (`README.md`, `llms*.txt`,
+   `registry*.json`, `package.json`). Without them a class name or `--color-*`
+   reference that appears only in a documentation example ships as real CSS --
+   the violet ramp in `docs/usage/theming.md`'s custom-intent example was
+   compiling into `dist/index.css` and `dist/native.css`, and any utility in a
+   docs code fence did the same. `tests/integration/exports.test.ts` guards it.
+   `scripts/build-tw.mjs` strips these lines from the `dist/tw/` copy, where they
+   resolve to nothing and the `/tw` consumer scans their own tree anyway. */
 
 @import "./theme.css";
 @import "./typography.css";

package/dist/tw/intent.css

@@ -8,6 +8,26 @@
    tooltips, key caps, code and table heads sit on) and `--intent-border` to
    `--ui-ink` (how an aesthetic restates the neutral line without naming one). */
 
+/* The same neutral values, at the root. This is the floor: an element that
+   carries no intent class and matches none of the resets below -- a component
+   `@apply`-ed onto a selector the package does not name, a bare `<code>` with
+   no native stylesheet loaded -- still composes against a real colour instead
+   of an undefined one that collapses its `color-mix()` to nothing. It is not
+   the barrier. `.neutral` and both resets below still write these slots on the
+   element itself, which is a matching rule and so beats this inherited value --
+   that is what stops a `.success` container's intent reaching a component
+   nested under it. An intent class on the element beats both. Values track
+   `.neutral` slot for slot; `registry.test.ts` fails the build on drift. */
+:root {
+  --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%;
+}
+
 /* Neutral stops its fill short: its colour is the page's ink, so a full fill is
    a slab and `.neutral.solid` was pixel-for-pixel `.primary.solid`. 20% is
    chosen against `.soft`'s 12% -- a step past the tint, not a repeat.

package/dist/tw/native.css

@@ -1,10 +1,8 @@
 @import "./theme.css";
 @reference "tailwindcss";
-@source not "../dist";
-@source not "../tests";
-@source not "../dev";
-@source not "../debug";
-@source not "../playground";
+/* Everything that is not `src/` -- see the note in `index.css`. Without the
+   docs and root-file excludes a utility used only in a documentation example
+   compiles into `dist/native.css`. */
 @import "./typography.css";
 @import "./utilities/index.css";
 @import "./components/index.css";
@@ -52,21 +50,7 @@
 }
 
 @layer base {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p,
-  figure,
-  blockquote,
-  dl,
-  dd,
-  ul,
-  ol {
-    margin: 0;
-  }
+  /* The `h1`-`ol` margin reset lives in `reset.css`, imported above. */
 
   /* Headings */
   h1 {

package/dist/tw/reset.css

@@ -3,16 +3,13 @@
 @import "./typography.css";
 
 @layer base {
-  /* Every sizing utility this package ships — `min-height`/`min-width:
-     var(--control-height)` on `.btn`, `.ipt`, `.select`, `.textarea` chief
-     among them — means that as the control's total footprint, padding and
-     border included. Without this, `apps/docs` reads correctly only because
-     its own Tailwind pipeline supplies Preflight's border-box reset
-     separately; this package only pulls in Tailwind's utility engine via
-     `@reference`, never its Preflight, so a consumer with no Tailwind
-     pipeline of its own — `apps/demo` imports this compiled stylesheet
-     directly — got the content-box default instead, inflating every sized
-     control by its own padding and border. */
+  /* The package's own components no longer lean on this: `@utility box` sets
+     `box-sizing: border-box` on itself, so a sized control is right in every
+     entrypoint including the reset-less `/components` and granular `/tw/*`
+     ones. What is left for the universal rule is the consumer's own markup --
+     a plain `<div>` laid out beside our components under the full reset -- so
+     it stays part of the opinionated baseline the reset already is, rather
+     than a correctness prop the components need. */
   *,
   *::before,
   *::after {
@@ -36,7 +33,7 @@
 
   html,
   body {
-    @apply bg-background text-text font-default min-h-dvh;
+    @apply bg-background text-text font-default;
   }
 
   h1,
@@ -55,10 +52,6 @@
     margin: 0;
   }
 
-  body {
-    @apply flex flex-col;
-  }
-
   button,
   input,
   optgroup,
@@ -74,10 +67,6 @@
     @apply enabled:cursor-pointer;
   }
 
-  img {
-    @apply select-none;
-  }
-
   ::selection {
     background: var(--color-primary);
     color: var(--color-primary-contrast);
@@ -124,19 +113,17 @@
   }
 }
 
-@layer components {
-  [aria-current="page"] {
-    @apply text-primary font-bold;
-  }
-
-  @media (forced-colors: active) {
-    .btn,
-    .ipt,
-    .textarea,
-    .select,
-    .alert,
-    .badge {
-      border-color: CanvasText;
-    }
+/* Unlayered on purpose, matching the `forced-colors` blocks in `native.css` and
+   `form.css`. An accessibility override has to win over any layered rule
+   whatever the specificity, and a `@layer components` wrapper here would let the
+   component utilities that draw a border overrule it. */
+@media (forced-colors: active) {
+  .btn,
+  .ipt,
+  .textarea,
+  .select,
+  .alert,
+  .badge {
+    border-color: CanvasText;
   }
 }

package/dist/tw/theme.css

@@ -2,11 +2,8 @@
 @import "./intent.css";
 @import "./presentation.css";
 @import "./elevation.css";
-@source not "../dist";
-@source not "../tests";
-@source not "../dev";
-@source not "../debug";
-@source not "../playground";
+/* Everything that is not `src/` -- see the note in `index.css`. Keeps a
+   `--color-*` reference in a docs example from shipping as a real theme entry. */
 
 /* Color tokens are declared once with `light-dark()`, which resolves at the
    point of use against the consuming element's computed `color-scheme`. Theme
@@ -50,7 +47,9 @@
   --color-text-secondary: light-dark(var(--color-neutral-700), var(--color-neutral-400));
   --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-subtle: light-dark(var(--color-neutral-200), var(--color-neutral-900));
+  /* No `--color-text-subtle`: the neutral intent points `--intent-subtle` at
+     `--color-surface`, not at a text-family tint, so the slot the other families
+     fill had no reader here. */
   --color-text-strong: light-dark(var(--color-neutral-900), var(--color-neutral-100));
 
   /* The tooltip bubble is the one component whose plate is chosen rather than
@@ -215,4 +214,10 @@
   color-scheme: dark;
 }
 
-@custom-variant dark (&:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *));
+/* The selector list mirrors the `color-scheme: dark` block above, all three
+   spellings included -- a consumer writing `.theme-dark` for the token theme
+   was otherwise left without the matching `dark:` variant. System preference is
+   deliberately out: the variant follows an explicit theme selector, the same
+   rule the rest of the theme model states, so `dark:` utilities track the theme
+   a subtree was actually put in rather than the OS default. */
+@custom-variant dark (&:where(.dark, .dark *, .theme-dark, .theme-dark *, [data-theme="dark"], [data-theme="dark"] *));

package/dist/tw/utilities/content.css

@@ -306,7 +306,11 @@
   --_d-fg-on-fill: 0%;
   --_d-border: 100%;
   --_d-elevation: 0;
-  --quote-fill: calc(min(var(--ui-fill, var(--_d-fill)), var(--intent-fill-max, 100%)) * var(--ui-bg-alpha, 1));
+  /* Presentation capped by the intent, the same `--_capped` `box` composes, kept
+     separate from `--quote-fill` because the ink ramp below reads it before
+     `--ui-bg-alpha` thins it. */
+  --quote-capped: min(var(--ui-fill, var(--_d-fill)), var(--intent-fill-max, 100%));
+  --quote-fill: calc(var(--quote-capped) * var(--ui-bg-alpha, 1));
   --quote-bg: color-mix(in oklab, var(--intent-color) var(--quote-fill), transparent);
   /* The same edge blend `box` draws, in the same order and for the same reason:
      the blend is the line's colour, and how much line there is comes after it.
@@ -327,9 +331,17 @@
   background-color: var(--quote-bg);
   border-inline-start-color: var(--quote-edge);
   border-inline-start-width: var(--quote-width);
+  /* The ink is gated by the plate, not tied to the fill: `--ui-fg-on-fill` is the
+     ceiling, and the contrast tone only ramps in past a half fill, reaching full
+     at a full fill. Below that the ink stays `--intent-strong`, the tone chosen
+     to read on the page. This is `box`'s `--_on-fill` exactly -- `min(asked,
+     --intent-fill-max)` read plausibly and was wrong at the bottom of the range,
+     printing a capped-neutral `.solid` quote at ~6.6:1 where the ramp gives
+     ~11:1, and this renderer has to agree with `box`. */
   color: color-mix(
     in oklab,
-    var(--intent-contrast) min(var(--ui-fg-on-fill, var(--_d-fg-on-fill)), var(--intent-fill-max, 100%)),
+    var(--intent-contrast)
+      min(var(--ui-fg-on-fill, var(--_d-fg-on-fill)), max(0%, calc(var(--quote-capped) * 2 - 100%))),
     var(--intent-strong)
   );