@codenhub/styles 0.6.0 → 0.7.0

package/dist/tw/aesthetics/sketch.css

@@ -81,8 +81,14 @@
 
   /* Rounded variant: bounded elliptical corners, so the top and bottom edges of
      a wide element stay straight instead of bulging into an egg. On the region
-     with `.sketch`, or on one component inside it. Knobs follow R8. */
-  .sketch-rounded {
+     with `.sketch`, or on one component inside it. Knobs follow R8.
+
+     Never on a solo element, here or in the rotation below:
+     `.sketch-solo.sketch-rounded` paints its own outline, and a complete
+     radius declared on it would inherit into whatever it holds -- a `.btn`
+     inside a solo toast took a sketch outline on a page with no sketch in
+     scope. */
+  .sketch-rounded:not(.sketch-solo) {
     --ui-radius: var(--sketch-radius-rounded, 26px 10px 24px 11px / 12px 23px 11px 20px);
     --ui-radius-surface: var(--sketch-radius-surface-rounded, 38px 16px 36px 17px / 16px 34px 17px 32px);
     --ui-radius-pill: var(--sketch-radius-pill, 24px 16px 23px 17px / 17px 21px 16px 20px);
@@ -101,15 +107,15 @@
      given DOM order. A knob, when set, is one outline for every position. */
   :is(
     .sketch,
-    .sketch-rounded,
-    :is(.sketch, .sketch-rounded)
+    .sketch-rounded:not(.sketch-solo),
+    :is(.sketch, .sketch-rounded:not(.sketch-solo))
       :not(
-        :is(.sketch, .sketch-rounded) :is(.neobrutalism, .glass, .pixel, .chunky-tile, .cyber),
-        :is(.sketch, .sketch-rounded) :is(.neobrutalism, .glass, .pixel, .chunky-tile, .cyber) *
+        :is(.sketch, .sketch-rounded:not(.sketch-solo)) :is(.neobrutalism, .glass, .pixel, .chunky-tile, .cyber),
+        :is(.sketch, .sketch-rounded:not(.sketch-solo)) :is(.neobrutalism, .glass, .pixel, .chunky-tile, .cyber) *
       )
   ) {
     /* The pointed outlines: controls, fields, surfaces, and chips. */
-    &:is(.sketch, .sketch *):not(.sketch-rounded, .sketch-rounded *) {
+    &:is(.sketch, .sketch *):not(.sketch-rounded:not(.sketch-solo), .sketch-rounded:not(.sketch-solo) *) {
       &:is(.btn, .ipt, .textarea, .select, .input-group, .pre, .tooltip-bubble) {
         &:nth-child(4n + 2) {
           --ui-radius: var(--sketch-radius, 18px 240px 15px 255px / 240px 15px 255px 18px);
@@ -172,7 +178,7 @@
     }
 
     /* The rounded outlines, in the same four places. */
-    &:is(.sketch-rounded, .sketch-rounded *) {
+    &:is(.sketch-rounded:not(.sketch-solo), .sketch-rounded:not(.sketch-solo) *) {
       &:is(.btn, .ipt, .textarea, .select, .input-group, .pre, .tooltip-bubble) {
         &:nth-child(4n + 2) {
           --ui-radius: var(--sketch-radius-rounded, 11px 25px 12px 24px / 23px 11px 22px 12px);
@@ -277,12 +283,40 @@
   }
 }
 
-/* Solo: the look on one unstyled element. It uses standalone fallbacks rather
-   than material tokens inherited from an aesthetic around it. */
+/* Solo: the same look painted onto the one element carrying the class, for an
+   element the package does not style. See docs/internal/model.md#solo-classes and
+   the note on `.glass-solo`: it composes with the element's presentation,
+   intent, and elevation, and reads its material from its own knobs and
+   foundation tokens with literal fallbacks, never a shared material `--ui-*`
+   or `--elevation-color` token. Unlayered, and not for this package's own
+   components. */
 .sketch-solo {
-  --_sketch-ink: light-dark(var(--color-neutral-950, oklch(14.5% 0 0)), var(--color-neutral-50, oklch(98.5% 0 0)));
-
-  border: 1px solid var(--_sketch-ink);
+  /* The composition, the same in every solo class; `registry.test.ts` holds
+     the copies together. See the note on `.glass-solo`. */
+  --_solo-intent-color: initial;
+  --_solo-intent-contrast: initial;
+  --_solo-intent-strong: initial;
+  --_solo-intent-border: initial;
+  --_solo-intent-fill-max: initial;
+  --_solo-color: var(--_solo-intent-color, var(--color-text, light-dark(oklch(14.5% 0 0), oklch(98.5% 0 0))));
+  --_solo-contrast: var(
+    --_solo-intent-contrast,
+    var(--color-text-contrast, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0)))
+  );
+  --_solo-strong: var(--_solo-intent-strong, var(--color-text-strong, light-dark(oklch(20.5% 0 0), oklch(97% 0 0))));
+  --_solo-capped: min(var(--ui-fill, 0%), var(--_solo-intent-fill-max, 20%));
+  --_solo-fill: color-mix(in oklab, var(--_solo-color) var(--_solo-capped), transparent);
+  --_solo-on-fill: min(var(--ui-fg-on-fill, 0%), max(0%, calc(var(--_solo-capped) * 2 - 100%)));
+  --_solo-fg: color-mix(in oklab, var(--_solo-contrast) var(--_solo-on-fill), var(--_solo-strong));
+  /* The line with no intent on the element: this aesthetic's own ink. */
+  --_solo-ink: var(
+    --_solo-intent-border,
+    light-dark(var(--color-neutral-950, oklch(14.5% 0 0)), var(--color-neutral-50, oklch(98.5% 0 0)))
+  );
+  --_solo-edge: color-mix(in oklab, var(--_solo-ink) var(--ui-border, 100%), var(--_solo-fill));
+  --_solo-depth: calc(2px * var(--ui-elevation, 1));
+
+  border: 1px solid var(--_solo-edge);
   /* The surface shape: the element this exists for is usually a pane. An action
      takes the control shape below. */
   border-radius: var(--sketch-radius-surface, 80px 4px 75px 5px / 3px 70px 4px 80px);
@@ -290,10 +324,41 @@
      offset in the depth colour, and casting a solo pane in full ink would read
      as a heavier, neobrutalist slab. The depth colour is a literal, for the reason
      `.glass-solo` gives. */
-  box-shadow: 2px 2px 0 0 light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55));
+  box-shadow:
+    var(--_solo-depth) var(--_solo-depth) 0 0 light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55)),
+    inset 0 0 0 100vmax var(--_solo-fill);
   font-family: var(--font-sketch, cursive);
 }
 
+/* An intent class on the element colours it, as on a component. Named rather
+   than read from `--intent-*` alone: those slots inherit, so a `.success`
+   container would colour a solo element where it leaves a component neutral. */
+.sketch-solo:is(.primary, .secondary, .success, .warning, .destructive, .info) {
+  --_solo-intent-color: var(--intent-color);
+  --_solo-intent-contrast: var(--intent-contrast);
+  --_solo-intent-strong: var(--intent-strong);
+  --_solo-intent-border: var(--intent-border);
+  --_solo-intent-fill-max: var(--intent-fill-max);
+}
+
+/* The text colour is written only where a fill or an intent is asked for, on
+   the element or by a container's fill class. Anywhere else the element keeps
+   its own: a dark toast keeps its light text. */
+.sketch-solo:is(
+  .solid,
+  .soft,
+  .ghost,
+  .primary,
+  .secondary,
+  .success,
+  .warning,
+  .destructive,
+  .info,
+  :is(.solid, .soft, .ghost) *
+) {
+  color: var(--_solo-fg);
+}
+
 /* An action takes the expressive control shape. */
 .sketch-solo:is(
   button,
@@ -313,14 +378,14 @@
 }
 
 .sketch-solo.sketch-rounded:is(
-  button,
-  a[href],
-  [role="button"],
-  summary,
-  input[type="button"],
-  input[type="submit"],
-  input[type="reset"]
-) {
+    button,
+    a[href],
+    [role="button"],
+    summary,
+    input[type="button"],
+    input[type="submit"],
+    input[type="reset"]
+  ) {
   border-radius: var(--sketch-radius-rounded, 26px 10px 24px 11px / 12px 23px 11px 20px);
 }
 

package/dist/tw/box.css

@@ -106,7 +106,14 @@
      Rewriting the result drops every term it was composed from, silently and
      with nothing to report. Bounding the input leaves the axis live, so
      `.edged` and `.edgeless` still mean what they say on a component that
-     floors itself. */
+     floors itself.
+
+     Restated at `0%` -- no floor -- for the reason `--_fill-cap` is restated
+     above: the floor inherits, so a field's or a tooltip bubble's `100%` reached
+     every box nested inside, and a `.btn.edgeless` clear button in an
+     `.input-group` drew a field's line it had asked not to have. Components
+     that floor themselves declare theirs after `@apply box`. */
+  --_edge-floor: 0%;
   --_edge-amount: max(var(--ui-border, var(--_d-border)), var(--_edge-floor, 0%));
   --_edge: color-mix(in oklab, var(--_line) var(--_edge-amount), transparent);
   --_width: min(var(--ui-border-width, var(--border-width)), var(--ui-border-max, 100px));
@@ -127,6 +134,10 @@
      public override, undeclared by the package. See docs/internal/model.md#material-tokens. */
   --_scale-size: initial;
   --_scale-pad: initial;
+  /* The padding the same modifiers set on a `.card` or `.panel`, restated for
+     the same reason: a `.card.p-xs` or `.flush` would otherwise pad every
+     surface nested inside it to its own value. */
+  --surface-padding: initial;
   --_scale: var(--ui-scale, min(var(--_scale-size, var(--_scale-pad, 1)), var(--_scale-pad, var(--_scale-size, 1))));
   /* Depth follows the step down and not up: a 4px slab under a 20px button
      swallows it, while a press that travels the aesthetic's whole depth has to
@@ -184,7 +195,15 @@
      on anything that set one. `--ui-surface-shadow` is that escape hatch narrowed
      to the single case that needs it. */
   --_shadow: var(--_shadow-parts) var(--_halo-layer,);
-  --_focus-stack: var(--_shadow), inset 0 0 0 var(--ui-focus-inset) var(--focus-ring);
+  /* The inset focus layer an aesthetic that clips asks for, in two tones. The
+     ring is the primary colour, so on a `.solid.primary` box it was painted
+     over its own colour and a focused button was pixel for pixel a resting
+     one. A line of the page colour sits inside it: one of the two always
+     differs from the fill, whatever the fill is. Shadows paint first-on-top,
+     so the line is listed last and is the two pixels the ring leaves showing. */
+  --_focus-stack:
+    var(--_shadow), inset 0 0 0 var(--ui-focus-inset) var(--focus-ring),
+    inset 0 0 0 calc(var(--ui-focus-inset) + 2px) var(--color-background);
 
   /* 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

package/dist/tw/components/feedback.css

@@ -135,11 +135,11 @@
 
 /* The track is a box, the fill is not: `box.css`'s formula composes the frame,
    the value fill stays `--intent-color` at full strength with no presentation,
-   same contract as `.loader`/`.skeleton`. `.progress` cannot `@apply box`
+   same contract as `.skeleton`. `.progress` cannot `@apply box`
    (the fill is a `::after`, not the element's own background), so it hand-
    reimplements the formula the way `.quote` does -- see
    docs/internal/model.md#components-that-do-not-take-the-whole-of-box for the
-   decision and why the other three indicators do not get the same treatment. */
+   decision and why the other two indicators do not get the same treatment. */
 @utility progress {
   --_d-fill: 12%;
   --_d-fg-on-fill: 0%;

package/dist/tw/components/form.css

@@ -32,8 +32,8 @@
 
      Named rather than written into the `min()`, because the soft hover below is
      derived from it and the two must not drift apart. Typed text is
-     `--intent-color` over a wash of its own tone, past 10:1 in both themes at
-     any value this cap is likely to take.
+     `--intent-strong` over a wash of its own tone, which holds 4.5:1 for every
+     intent in both themes up to `.solid`'s 20% below.
 
      The fill and the ink are `box`'s own, unrestated: its `--_capped` reads
      this cap, so the plate and the ink ramp stay in step at every bound,
@@ -89,7 +89,18 @@
     color: var(--color-text-secondary);
   }
 
-  &:hover:not(:disabled, [aria-disabled="true"], [data-disabled], :focus-visible) {
+  /* The last exclusion is `.input-group`'s: a group whose control is disabled
+     dims as a disabled field does (see `input-group`), so it does not answer
+     the pointer either. The list is the group's own, so a `<select>` with a
+     disabled `<option>` is not caught by it. */
+  &:hover:not(
+      :disabled,
+      .disabled,
+      [aria-disabled="true"],
+      [data-disabled],
+      :focus-visible,
+      :has(> :is(.ipt, .textarea, .select, .text-control, input, textarea, select):disabled)
+    ) {
     --_line-tone: var(--intent-hover);
   }
 
@@ -244,7 +255,8 @@
      own utility; a consumer's utility setting an intent slot on an invalid
      field loses to it too, because state wins over every choice
      (model.md#precedence). `--intent-hover` is redirected with the others so
-     the line does not go grey under the pointer. The `:has()` arm bridges an
+     the line does not go grey under the pointer, and `--intent-strong` so typed
+     text is destructive too. The `:has()` arm bridges an
      inner control's state to an `.input-group`. */
   :is(
     .text-control,
@@ -263,6 +275,7 @@
     --intent-color: var(--color-destructive);
     --intent-hover: var(--color-destructive-hover);
     --intent-border: var(--color-destructive);
+    --intent-strong: var(--color-destructive-strong);
   }
 }
 
@@ -278,10 +291,12 @@
   --_d-border: 100%;
   --_d-elevation: 0;
 
-  /* Typed text is the intent colour at full strength -- on the three text
-     inputs, not `text-control`, because a toggle's mark takes `box`'s composed
-     `--_fg` instead. */
-  --_fg: var(--intent-color);
+  /* Typed text is the intent printed on a page, `--intent-strong`: a field's
+     plate is at most a wash, and `--intent-color`, a fill colour, reads below
+     4.5:1 there for several intents. On the three text inputs, not
+     `text-control`, because a toggle's mark takes `box`'s composed `--_fg`
+     instead. See docs/internal/model.md#intent. */
+  --_fg: var(--intent-strong);
 
   min-height: var(--control-height);
 }
@@ -321,10 +336,12 @@
   --_d-border: 100%;
   --_d-elevation: 0;
 
-  /* Typed text is the intent colour at full strength -- on the three text
-     inputs, not `text-control`, because a toggle's mark takes `box`'s composed
-     `--_fg` instead. */
-  --_fg: var(--intent-color);
+  /* Typed text is the intent printed on a page, `--intent-strong`: a field's
+     plate is at most a wash, and `--intent-color`, a fill colour, reads below
+     4.5:1 there for several intents. On the three text inputs, not
+     `text-control`, because a toggle's mark takes `box`'s composed `--_fg`
+     instead. See docs/internal/model.md#intent. */
+  --_fg: var(--intent-strong);
 
   @apply min-h-28 resize-y;
 }
@@ -340,10 +357,12 @@
   --_d-border: 100%;
   --_d-elevation: 0;
 
-  /* Typed text is the intent colour at full strength -- on the three text
-     inputs, not `text-control`, because a toggle's mark takes `box`'s composed
-     `--_fg` instead. */
-  --_fg: var(--intent-color);
+  /* Typed text is the intent printed on a page, `--intent-strong`: a field's
+     plate is at most a wash, and `--intent-color`, a fill colour, reads below
+     4.5:1 there for several intents. On the three text inputs, not
+     `text-control`, because a toggle's mark takes `box`'s composed `--_fg`
+     instead. See docs/internal/model.md#intent. */
+  --_fg: var(--intent-strong);
 
   min-height: var(--control-height);
   background-image:
@@ -470,6 +489,14 @@
     }
   }
 
+  /* Except a drop-down's end: its chevron is the select's own background,
+     drawn inside its box 0.6875-1.3125rem from the inline end, so a long label
+     with no padding there ran under it. A list box draws none and keeps the
+     padding its own rule gives it. */
+  & > :is(.select, select):not([multiple], [size]:not([size="1"])) {
+    padding-inline-end: 1.75rem;
+  }
+
   /* Anything else in the group -- an icon, affix text -- does not stretch and
      reads as secondary. A nested `<button>` keeps its own styling. */
   & > :not(.ipt, .textarea, .select, .text-control, input, textarea, select, button) {
@@ -716,10 +743,13 @@
        physical x offset and mirrored under :dir(rtl) to travel toward the
        opposite edge, matching the inset-inline-start resting position. */
     translate: var(--switch-travel);
+  }
 
-    :dir(rtl) & {
-      translate: calc(-1 * var(--switch-travel));
-    }
+  /* Direction sits on the control, ahead of the pseudo-element: nested as
+     `:dir(rtl) &` inside `&:checked::after`, `&` carries `::after`, which
+     cannot appear inside `:is()`, and the emitted rule matched nothing. */
+  &:checked:dir(rtl)::after {
+    translate: calc(-1 * var(--switch-travel));
   }
 
   /* The mark appears without moving under reduced motion, for the entries
@@ -748,6 +778,15 @@
     background-color: CanvasText;
   }
 
+  /* The chevron is two gradients, and forced colours drop every gradient, so a
+     drop-down with `appearance: none` showed no arrow at all and read as a text
+     field. The platform's own arrow comes back instead: it is drawn in system
+     colours, and the author border, padding and focus outline still apply. A
+     list box has no arrow to restore. */
+  .select:not([multiple], [size]:not([size="1"])) {
+    appearance: auto;
+  }
+
   .checkbox:checked,
   .checkbox:indeterminate,
   .radio:checked,

package/dist/tw/components/index.css

@@ -20,17 +20,16 @@
 @import "./button.css";
 @import "./feedback.css";
 @import "./form.css";
-@import "./loader.css";
 @import "./surface.css";
 @import "./tooltip.css";
 
-/* The composition utilities -- `box`, `box-hover`, `box-active`, `loader-mask`,
+/* The composition utilities -- `box`, `box-hover`, `box-active`,
    `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. Safelisting
-   all seven makes the emission deliberate; the composition-body check in
+   all six 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 unadorned 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 neutral solid soft ghost edged edgeless flat raised floating loader");
+@source inline("box box-hover box-active text-control surface input-group unadorned text-display text-title-lg text-title text-title-sm text-label-lg text-label text-body btn field label hint ipt icon textarea select checkbox radio switch alert alert-icon badge skeleton progress tooltip tooltip-bubble tooltip-icon card panel interactive flush neutral solid soft ghost edged edgeless flat raised floating");

package/dist/tw/components/surface.css

@@ -162,14 +162,23 @@
    three are the containers a consumer reaches for.
 
    Here rather than in the reset, so every entrypoint that ships `.card` ships
-   the fix, `/components` included. Unlayered, because a behaviour override has
-   to win over any layered rule whatever its specificity, and scoped to the
-   package's own containers, so a dialog the package does not style keeps
-   whatever margin its author gives it. */
+   the fix, `/components` included, and scoped to the package's own containers,
+   so a dialog the package does not style keeps whatever margin its author
+   gives it.
+
+   The two halves sit in different places. Hiding a closed dialog is
+   behaviour, so it is unlayered and beats any layered rule whatever its
+   specificity. Centring an open one is a default, so it is in `utilities` at
+   zero specificity: it beats a reset in `base`, and a consumer's own margin
+   -- a utility, or unlayered CSS -- beats it. Unlayered at 0-2-1 it overruled
+   `mt-8` and `.my-dialog { margin-top: 2rem }` alike, and a dialog could not
+   be placed. */
 dialog:is(.card, .panel, .surface):not([open]) {
   display: none;
 }
 
-dialog:is(.card, .panel, .surface)[open] {
-  margin: auto;
+@layer utilities {
+  :where(dialog:is(.card, .panel, .surface)[open]) {
+    margin: auto;
+  }
 }

package/dist/tw/index.css

@@ -3,7 +3,7 @@
 /* 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`) are emitted as standalone rules, so
+   `input-group`) are emitted as standalone rules, so
    `source(none)` is not an option. Tailwind utility names that collide with a
    CSS property or a word these comments use (`backdrop-filter`, `filter`,
    `transition`, `transform`, `container`) do not emit, verified against

package/dist/tw/intent.css

@@ -139,7 +139,6 @@
   .badge,
   .kbd,
   .code,
-  .loader,
   .skeleton,
   .progress,
   .divider
@@ -185,9 +184,11 @@
    plate, not at a pane's edge against the backdrop, so an aesthetic whose
    neutral line is a highlight names a rule line of its own: glass's white
    hairline vanishes on the table's light plate. Neutral only, and `.neutral`
-   included, the way the control line above is. */
+   included, the way the control line above is, and a `.neutral` row in a
+   table of another intent, which draws its rules as a neutral table does. */
 :where(.data-table),
-.data-table.neutral {
+.data-table.neutral,
+.data-table tr.neutral {
   --intent-border: var(--ui-rule-ink, var(--ui-ink, var(--color-border)));
 }
 
@@ -218,11 +219,11 @@
 }
 
 /* Indicators take the color they sit in rather than the shared neutral, so a
-   loader inside filled or colored content still matches it. It has to be
+   skeleton inside filled or colored content still matches it. It has to be
    declared here at zero specificity: written in the component's own block it
    would carry 0-1-0 and, being later in the stylesheet, beat `.success` --
    which silently makes every indicator ignore every intent class. */
-:where(.loader, .skeleton, .progress, .divider) {
+:where(.skeleton, .progress, .divider) {
   --intent-color: currentColor;
   --intent-border: currentColor;
 }

package/dist/tw/native.css

@@ -182,8 +182,11 @@
     transition: none;
   }
 
+  /* A checked radio is the filled disc and dot it draws with forced colours
+     off, as `.radio` is in `form.css`: one look on both entrypoints. */
   input[type="checkbox"]:checked,
-  input[type="checkbox"]:indeterminate {
+  input[type="checkbox"]:indeterminate,
+  input[type="radio"]:checked {
     background-color: Highlight;
     border-color: Highlight;
 
@@ -192,12 +195,9 @@
     }
   }
 
-  input[type="radio"]:checked {
-    background-color: Canvas;
-    border-color: Highlight;
-
-    &::after {
-      background-color: Highlight;
-    }
+  /* The platform's arrow, for the reason `.select` takes it back in
+     `form.css`: forced colours drop the gradient chevron. */
+  select:not([multiple], [size]:not([size="1"])) {
+    appearance: auto;
   }
 }

package/dist/tw/palette.css

@@ -228,9 +228,9 @@
     --palette-info-ghost-subtle-edge: oklab(0.511 0.0317755 -0.260066);
     --palette-info-ghost-subtle-bg-hover: oklab(0.8685 0.00575617 -0.0640304);
     --palette-info-ghost-subtle-edge-hover: oklab(0.490714 0.0309565 -0.24875);
-    --palette-border: oklch(0.708 0 0);
-    --palette-surface: oklch(0.922 0 0);
-    --palette-text: oklch(0.145 0 0);
+    --palette-border: oklch(0.708 0 none);
+    --palette-surface: oklch(0.922 0 none);
+    --palette-text: oklch(0.145 0 none);
   }
 
   .dark,
@@ -453,8 +453,8 @@
     --palette-info-ghost-subtle-edge: oklab(0.511 0.0317755 -0.260066);
     --palette-info-ghost-subtle-bg-hover: oklab(0.38601 0.0239578 -0.155809);
     --palette-info-ghost-subtle-edge-hover: oklab(0.551929 0.0373722 -0.238521);
-    --palette-border: oklch(0.371 0 0);
-    --palette-surface: oklch(0.269 0 0);
-    --palette-text: oklch(0.985 0 0);
+    --palette-border: oklch(0.371 0 none);
+    --palette-surface: oklch(0.269 0 none);
+    --palette-text: oklch(0.985 0 none);
   }
 }

package/dist/tw/reset.css

@@ -93,21 +93,21 @@
 
   @media (forced-colors: active) {
     input:is(
-      [type="text"],
-      [type="email"],
-      [type="password"],
-      [type="url"],
-      [type="tel"],
-      [type="number"],
-      [type="search"],
-      [type="date"],
-      [type="datetime-local"],
-      [type="month"],
-      [type="week"],
-      [type="time"],
-      [type="checkbox"],
-      [type="radio"]
-    ):focus-visible,
+        [type="text"],
+        [type="email"],
+        [type="password"],
+        [type="url"],
+        [type="tel"],
+        [type="number"],
+        [type="search"],
+        [type="date"],
+        [type="datetime-local"],
+        [type="month"],
+        [type="week"],
+        [type="time"],
+        [type="checkbox"],
+        [type="radio"]
+      ):focus-visible,
     textarea:focus-visible,
     select:focus-visible {
       outline: 2px solid Highlight !important;

package/dist/tw/theme.css

@@ -21,8 +21,15 @@
    selectors below therefore set `color-scheme` and nothing else. Verified
    across Chromium, Firefox, and WebKit, including resolution through
    `color-mix()` and through Tailwind's `@theme`, which emits theme values as
-   unregistered custom properties rather than `@property` registrations. */
-@theme {
+   unregistered custom properties rather than `@property` registrations.
+
+   `static`, because every token here is documented as public. Tailwind keeps a
+   plain `@theme` value only where it sees the entry read it, and `/theme`
+   carries no reset or component to read `--color-background`,
+   `--color-foreground`, `--color-text-secondary`, or `--font-default`, so it
+   shipped without them. `exports.test.ts` holds every compiled entry to the
+   tokens `docs/usage/theming.md` lists. */
+@theme static {
   --font-default: "Segoe UI", system-ui, sans-serif;
 
   --color-primary: light-dark(var(--color-neutral-950), var(--color-neutral-50));
@@ -40,6 +47,9 @@
      `.card.soft.edged`'s own fill and reads as no boundary. Dark's neutral-700
      already separates (27 units). */
   --color-border: light-dark(var(--color-neutral-400), var(--color-neutral-700));
+  /* Nothing in the package draws a border that darkens on hover; it is a
+     public override point for a consumer's own. */
+  --color-border-hover: light-dark(var(--color-neutral-600), var(--color-neutral-500));
 
   /* A text control's line is the only thing identifying it: the box is
      transparent at rest, so nothing else marks where typing goes.
@@ -120,22 +130,13 @@
   --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));
-
-  --breakpoint-xs: 30rem;
 }
 
-/* Tailwind only keeps a `@theme` variable in the compiled output when it
-   detects that variable being used somewhere in this package's own source --
-   everything above earns its keep that way, through `intent.css` or a
-   component reading it. `--color-border-hover` is different: `docs/usage/
-   theming.md` documents it as a public override point like every other row
-   in that table, but nothing in this package draws a border that darkens on
-   hover, so nothing here ever references it, and Tailwind quietly dropped it
-   from every compiled stylesheet. `static` forces it to compile regardless,
-   so the token a consumer's docs promise is the token their `var()` actually
-   resolves. */
-@theme static {
-  --color-border-hover: light-dark(var(--color-neutral-600), var(--color-neutral-500));
+/* Not `static`: a breakpoint is a variant for a `/tw` consumer's own build and
+   means nothing as a custom property, since a media query cannot read `var()`.
+   Tailwind keeps the variable only where an `xs:` utility uses it. */
+@theme {
+  --breakpoint-xs: 30rem;
 }
 
 /* The foundation tokens and the colour-scheme selectors, in `theme` so every
@@ -260,9 +261,20 @@
    and nothing an aesthetic layers on top. Unlayered, so it beats every layered
    declaration of these tokens -- an aesthetic's and a consumer's utility alike --
    the way the other `forced-colors` blocks do. See
-   docs/internal/model.md#material-tokens. */
+   docs/internal/model.md#material-tokens.
+
+   The border comes back and the clip goes. Forced colours remove every box
+   shadow, so an aesthetic that draws its edge as an inset ring and takes the
+   border out with `--ui-border-max` (`.pixel`) left buttons, fields, and cards
+   with no boundary at all. With the ceiling lifted the border is drawn at the
+   aesthetic's own width and the system colours it; with no clip the corners
+   it would cut are whole and the focus outline shows. */
 @media (forced-colors: active) {
   * {
+    --ui-border-max: initial;
+    --ui-clip: none;
+    --ui-clip-tight: none;
+    --ui-shadow-edge: initial;
     --ui-line-style: solid;
     --ui-rule-style: solid;
     --ui-halo-ink: initial;