@codenhub/styles 0.7.0 → 0.8.0

package/{dist/tw → tw}/aesthetics/sketch.css

@@ -73,12 +73,6 @@
     font-family: var(--font-sketch, cursive);
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .sketch {
-      --ui-active-transform: none;
-    }
-  }
-
   /* 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.
@@ -97,188 +91,213 @@
 
   /* One region token gives every element the same outline, so the rotation and
      the dashed accents are written on components, which the registry records.
-     The root is a component carrying either class, or one inside either region
-     and not inside another aesthetic nested there, which keeps its own
-     material. The list below is the one place other aesthetics are named, and
-     `registry.test.ts` fails when one is missing from it.
+
+     The nearest region decides. A component in another aesthetic nested inside
+     a sketch region keeps that aesthetic's material, and one in a sketch region
+     nested again inside that rotates. A `:not(.sketch :is(...) *)` exclusion
+     cannot tell those two apart, since the re-entered component also sits below
+     the other aesthetic, so each region writes private flags instead and
+     inheritance hands a component the nearest one's -- the way neobrutalism
+     rests its alert:
+
+     - `--_sketch-on`, `--_sketch-pointed`, `--_sketch-rounded` are space
+       toggles: empty is on, and `initial` makes a value reading one invalid at
+       computed-value time, which is off. `.sketch` turns on the pointed
+       outlines and `.sketch-rounded` the rounded ones; rounded wins where both
+       are on, as the modifier does. Another aesthetic turns all three off.
+     - `--_sketch-pass-*` is what that other aesthetic declared for each token
+       the rotation writes, so a component under it takes the region's value
+       back rather than a rotation's -- cyber's whole surface shape included.
+       Off, a value is the pass, then the rounded one, then the pointed one; the
+       first that is valid wins, and with none the token is unset, as every
+       other aesthetic declares it.
+
+     The other aesthetics are named below and in the flags, and
+     `registry.test.ts` fails when one is missing. A region's own element is
+     not rotated: it declares the pass from its own tokens, which a rotation
+     would then declare from the pass.
 
      Rotation is by sibling position, and a field's control takes its field's
      position instead of its own, so stacked rows alternate. It is stable for a
      given DOM order. A knob, when set, is one outline for every position. */
-  :is(
-    .sketch,
-    .sketch-rounded:not(.sketch-solo),
-    :is(.sketch, .sketch-rounded:not(.sketch-solo))
-      :not(
-        :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: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);
-        }
-
-        &:nth-child(4n + 3) {
-          --ui-radius: var(--sketch-radius, 245px 220px 15px 18px / 18px 15px 245px 235px);
-        }
-
-        &:nth-child(4n) {
-          --ui-radius: var(--sketch-radius, 18px 250px 225px 15px / 245px 15px 18px 235px);
-        }
-      }
+  .sketch,
+  .sketch-rounded:not(.sketch-solo) {
+    --_sketch-on: ;
+    --_sketch-pass-radius: initial;
+    --_sketch-pass-radius-surface: initial;
+    --_sketch-pass-radius-tight: initial;
+    --_sketch-pass-radius-pill: initial;
+    --_sketch-pass-line-style: initial;
+    --_sketch-pass-rule-style: initial;
+  }
 
-      &:is(.ipt, .textarea, .select, .input-group) {
-        .field:nth-child(4n + 1) & {
-          --ui-radius: var(--sketch-radius, 255px 15px 225px 15px / 15px 225px 15px 255px);
-        }
+  .sketch {
+    --_sketch-pointed: ;
+  }
 
-        .field:nth-child(4n + 2) & {
-          --ui-radius: var(--sketch-radius, 18px 240px 15px 255px / 240px 15px 255px 18px);
-        }
+  .sketch-rounded:not(.sketch-solo) {
+    --_sketch-rounded: ;
+  }
 
-        .field:nth-child(4n + 3) & {
-          --ui-radius: var(--sketch-radius, 245px 220px 15px 18px / 18px 15px 245px 235px);
-        }
+  :is(.neobrutalism, .glass, .pixel, .chunky-tile, .cyber) {
+    --_sketch-on: initial;
+    --_sketch-pointed: initial;
+    --_sketch-rounded: initial;
+    --_sketch-pass-radius: var(--ui-radius);
+    --_sketch-pass-radius-surface: var(--ui-radius-surface);
+    --_sketch-pass-radius-tight: var(--ui-radius-tight);
+    --_sketch-pass-radius-pill: var(--ui-radius-pill);
+    --_sketch-pass-line-style: var(--ui-line-style);
+    --_sketch-pass-rule-style: var(--ui-rule-style);
+  }
 
-        .field:nth-child(4n) & {
-          --ui-radius: var(--sketch-radius, 18px 250px 225px 15px / 245px 15px 18px 235px);
-        }
+  :is(.sketch, .sketch-rounded:not(.sketch-solo), :is(.sketch, .sketch-rounded:not(.sketch-solo)) *):not(
+    :is(.neobrutalism, .glass, .pixel, .chunky-tile, .cyber)
+  ) {
+    /* Controls, fields, surfaces, and chips. Each position names its pointed
+       outline in `--_sketch-p` and its rounded one in `--_sketch-r`, declared
+       with the token, so a position never reads a value inherited from an
+       ancestor's. */
+    &:is(.btn, .ipt, .textarea, .select, .input-group, .pre, .tooltip-bubble) {
+      &:nth-child(4n + 2) {
+        --_sketch-p: var(--_sketch-pointed) var(--sketch-radius, 18px 240px 15px 255px / 240px 15px 255px 18px);
+        --_sketch-r: var(--_sketch-rounded) var(--sketch-radius-rounded, 11px 25px 12px 24px / 23px 11px 22px 12px);
+        --ui-radius: var(--_sketch-pass-radius, var(--_sketch-r, var(--_sketch-p)));
       }
 
-      &:is(.card, .panel, .alert, .data-table) {
-        &:nth-child(4n + 2) {
-          --ui-radius-surface: var(--sketch-radius-surface, 4px 75px 5px 80px / 75px 3px 80px 4px);
-        }
-
-        &:nth-child(4n + 3) {
-          --ui-radius-surface: var(--sketch-radius-surface, 75px 70px 4px 5px / 4px 3px 75px 70px);
-        }
-
-        &:nth-child(4n) {
-          --ui-radius-surface: var(--sketch-radius-surface, 5px 80px 75px 4px / 75px 4px 5px 70px);
-        }
+      &:nth-child(4n + 3) {
+        --_sketch-p: var(--_sketch-pointed) var(--sketch-radius, 245px 220px 15px 18px / 18px 15px 245px 235px);
+        --_sketch-r: var(--_sketch-rounded) var(--sketch-radius-rounded, 24px 12px 26px 10px / 11px 23px 12px 22px);
+        --ui-radius: var(--_sketch-pass-radius, var(--_sketch-r, var(--_sketch-p)));
       }
 
-      &:is(.badge, .kbd, .code, .checkbox, .switch, .progress) {
-        &:nth-child(4n + 2) {
-          --ui-radius-tight: 2px 8px 1px 10px / 8px 2px 10px 1px;
-        }
-
-        &:nth-child(4n + 3) {
-          --ui-radius-tight: 8px 2px 10px 1px / 1px 9px 2px 8px;
-        }
-
-        &:nth-child(4n) {
-          --ui-radius-tight: 1px 10px 2px 7px / 9px 1px 8px 2px;
-        }
+      &:nth-child(4n) {
+        --_sketch-p: var(--_sketch-pointed) var(--sketch-radius, 18px 250px 225px 15px / 245px 15px 18px 235px);
+        --_sketch-r: var(--_sketch-rounded) var(--sketch-radius-rounded, 12px 24px 10px 25px / 22px 12px 23px 11px);
+        --ui-radius: var(--_sketch-pass-radius, var(--_sketch-r, var(--_sketch-p)));
       }
     }
 
-    /* The rounded outlines, in the same four places. */
-    &: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);
-        }
-
-        &:nth-child(4n + 3) {
-          --ui-radius: var(--sketch-radius-rounded, 24px 12px 26px 10px / 11px 23px 12px 22px);
-        }
-
-        &:nth-child(4n) {
-          --ui-radius: var(--sketch-radius-rounded, 12px 24px 10px 25px / 22px 12px 23px 11px);
-        }
+    &:is(.ipt, .textarea, .select, .input-group) {
+      .field:nth-child(4n + 1) & {
+        --_sketch-p: var(--_sketch-pointed) var(--sketch-radius, 255px 15px 225px 15px / 15px 225px 15px 255px);
+        --_sketch-r: var(--_sketch-rounded) var(--sketch-radius-rounded, 26px 10px 24px 11px / 12px 23px 11px 20px);
+        --ui-radius: var(--_sketch-pass-radius, var(--_sketch-r, var(--_sketch-p)));
       }
 
-      &:is(.ipt, .textarea, .select, .input-group) {
-        .field:nth-child(4n + 1) & {
-          --ui-radius: var(--sketch-radius-rounded, 26px 10px 24px 11px / 12px 23px 11px 20px);
-        }
-
-        .field:nth-child(4n + 2) & {
-          --ui-radius: var(--sketch-radius-rounded, 11px 25px 12px 24px / 23px 11px 22px 12px);
-        }
+      .field:nth-child(4n + 2) & {
+        --_sketch-p: var(--_sketch-pointed) var(--sketch-radius, 18px 240px 15px 255px / 240px 15px 255px 18px);
+        --_sketch-r: var(--_sketch-rounded) var(--sketch-radius-rounded, 11px 25px 12px 24px / 23px 11px 22px 12px);
+        --ui-radius: var(--_sketch-pass-radius, var(--_sketch-r, var(--_sketch-p)));
+      }
 
-        .field:nth-child(4n + 3) & {
-          --ui-radius: var(--sketch-radius-rounded, 24px 12px 26px 10px / 11px 23px 12px 22px);
-        }
+      .field:nth-child(4n + 3) & {
+        --_sketch-p: var(--_sketch-pointed) var(--sketch-radius, 245px 220px 15px 18px / 18px 15px 245px 235px);
+        --_sketch-r: var(--_sketch-rounded) var(--sketch-radius-rounded, 24px 12px 26px 10px / 11px 23px 12px 22px);
+        --ui-radius: var(--_sketch-pass-radius, var(--_sketch-r, var(--_sketch-p)));
+      }
 
-        .field:nth-child(4n) & {
-          --ui-radius: var(--sketch-radius-rounded, 12px 24px 10px 25px / 22px 12px 23px 11px);
-        }
+      .field:nth-child(4n) & {
+        --_sketch-p: var(--_sketch-pointed) var(--sketch-radius, 18px 250px 225px 15px / 245px 15px 18px 235px);
+        --_sketch-r: var(--_sketch-rounded) var(--sketch-radius-rounded, 12px 24px 10px 25px / 22px 12px 23px 11px);
+        --ui-radius: var(--_sketch-pass-radius, var(--_sketch-r, var(--_sketch-p)));
       }
+    }
 
-      &:is(.card, .panel, .alert, .data-table) {
-        &:nth-child(4n + 2) {
-          --ui-radius-surface: var(--sketch-radius-surface-rounded, 17px 36px 18px 34px / 33px 16px 32px 17px);
-        }
+    &:is(.card, .panel, .alert, .data-table) {
+      &:nth-child(4n + 2) {
+        --_sketch-p: var(--_sketch-pointed) var(--sketch-radius-surface, 4px 75px 5px 80px / 75px 3px 80px 4px);
+        --_sketch-r: var(--_sketch-rounded)
+          var(--sketch-radius-surface-rounded, 17px 36px 18px 34px / 33px 16px 32px 17px);
+        --ui-radius-surface: var(--_sketch-pass-radius-surface, var(--_sketch-r, var(--_sketch-p)));
+      }
 
-        &:nth-child(4n + 3) {
-          --ui-radius-surface: var(--sketch-radius-surface-rounded, 35px 18px 38px 15px / 17px 32px 16px 34px);
-        }
+      &:nth-child(4n + 3) {
+        --_sketch-p: var(--_sketch-pointed) var(--sketch-radius-surface, 75px 70px 4px 5px / 4px 3px 75px 70px);
+        --_sketch-r: var(--_sketch-rounded)
+          var(--sketch-radius-surface-rounded, 35px 18px 38px 15px / 17px 32px 16px 34px);
+        --ui-radius-surface: var(--_sketch-pass-radius-surface, var(--_sketch-r, var(--_sketch-p)));
+      }
 
-        &:nth-child(4n) {
-          --ui-radius-surface: var(--sketch-radius-surface-rounded, 18px 35px 16px 37px / 31px 17px 34px 16px);
-        }
+      &:nth-child(4n) {
+        --_sketch-p: var(--_sketch-pointed) var(--sketch-radius-surface, 5px 80px 75px 4px / 75px 4px 5px 70px);
+        --_sketch-r: var(--_sketch-rounded)
+          var(--sketch-radius-surface-rounded, 18px 35px 16px 37px / 31px 17px 34px 16px);
+        --ui-radius-surface: var(--_sketch-pass-radius-surface, var(--_sketch-r, var(--_sketch-p)));
       }
+    }
 
-      &:is(.badge, .kbd, .code, .checkbox, .switch, .progress) {
-        &:nth-child(4n + 2) {
-          --ui-radius-tight: 4px 8px 3px 9px / 8px 3px 8px 4px;
-        }
+    &:is(.badge, .kbd, .code, .checkbox, .switch, .progress) {
+      &:nth-child(4n + 2) {
+        --_sketch-p: var(--_sketch-pointed) 2px 8px 1px 10px / 8px 2px 10px 1px;
+        --_sketch-r: var(--_sketch-rounded) 4px 8px 3px 9px / 8px 3px 8px 4px;
+        --ui-radius-tight: var(--_sketch-pass-radius-tight, var(--_sketch-r, var(--_sketch-p)));
+      }
 
-        &:nth-child(4n + 3) {
-          --ui-radius-tight: 8px 4px 9px 3px / 3px 9px 4px 8px;
-        }
+      &:nth-child(4n + 3) {
+        --_sketch-p: var(--_sketch-pointed) 8px 2px 10px 1px / 1px 9px 2px 8px;
+        --_sketch-r: var(--_sketch-rounded) 8px 4px 9px 3px / 3px 9px 4px 8px;
+        --ui-radius-tight: var(--_sketch-pass-radius-tight, var(--_sketch-r, var(--_sketch-p)));
+      }
 
-        &:nth-child(4n) {
-          --ui-radius-tight: 3px 9px 4px 8px / 9px 4px 8px 3px;
-        }
+      &:nth-child(4n) {
+        --_sketch-p: var(--_sketch-pointed) 1px 10px 2px 7px / 9px 1px 8px 2px;
+        --_sketch-r: var(--_sketch-rounded) 3px 9px 4px 8px / 9px 4px 8px 3px;
+        --ui-radius-tight: var(--_sketch-pass-radius-tight, var(--_sketch-r, var(--_sketch-p)));
       }
     }
 
     /* A pill button keeps a rounded pill in either variant, bounded to the
        button's half-height so a wide one keeps flat top and bottom edges. */
     &.btn.pill {
-      --ui-radius-pill: var(--sketch-radius-pill, 24px 16px 23px 17px / 17px 21px 16px 20px);
+      --ui-radius-pill: var(
+        --_sketch-pass-radius-pill,
+        var(--_sketch-on) var(--sketch-radius-pill, 24px 16px 23px 17px / 17px 21px 16px 20px)
+      );
 
       &:nth-child(4n + 2) {
-        --ui-radius-pill: var(--sketch-radius-pill, 17px 23px 16px 24px / 21px 16px 20px 17px);
+        --ui-radius-pill: var(
+          --_sketch-pass-radius-pill,
+          var(--_sketch-on) var(--sketch-radius-pill, 17px 23px 16px 24px / 21px 16px 20px 17px)
+        );
       }
 
       &:nth-child(4n + 3) {
-        --ui-radius-pill: var(--sketch-radius-pill, 23px 17px 24px 16px / 16px 20px 17px 21px);
+        --ui-radius-pill: var(
+          --_sketch-pass-radius-pill,
+          var(--_sketch-on) var(--sketch-radius-pill, 23px 17px 24px 16px / 16px 20px 17px 21px)
+        );
       }
 
       &:nth-child(4n) {
-        --ui-radius-pill: var(--sketch-radius-pill, 16px 24px 17px 23px / 20px 17px 21px 16px);
+        --ui-radius-pill: var(
+          --_sketch-pass-radius-pill,
+          var(--_sketch-on) var(--sketch-radius-pill, 16px 24px 17px 23px / 20px 17px 21px 16px)
+        );
       }
     }
 
     /* Badges, progress bars, and switches take their chip outline where they
        would be fully round. */
     &:is(.badge, .progress, .switch) {
-      --ui-radius-pill: var(--ui-radius-tight);
+      --ui-radius-pill: var(--_sketch-pass-radius-pill, var(--_sketch-on) var(--ui-radius-tight));
     }
 
     /* Radios and the tooltip trigger stay circles, slightly uneven, so a radio
        is never mistaken for a checkbox. */
     &:is(.radio, .tooltip-icon) {
-      --ui-radius-pill: 48% 52% 46% 54% / 53% 46% 54% 47%;
+      --ui-radius-pill: var(--_sketch-pass-radius-pill, var(--_sketch-on) 48% 52% 46% 54% / 53% 46% 54% 47%);
     }
 
-    /* The dashed accents; every other line stays solid. */
-    &:is(.sketch, .sketch *) {
-      &.checkbox {
-        --ui-line-style: dashed;
-      }
+    /* The dashed accents, under `.sketch`; every other line stays solid. The
+       bare elements `/native` styles as these components are named beside
+       them, in `:where()` so the selector's weight stays the class's. */
+    &:is(.checkbox, :where(input[type="checkbox"]:not(.switch, .radio))) {
+      --ui-line-style: var(--_sketch-pass-line-style, var(--_sketch-pointed) dashed);
+    }
 
-      &:is(.divider, .data-table) {
-        --ui-rule-style: dashed;
-      }
+    &:is(.divider, .data-table, :where(hr, table)) {
+      --ui-rule-style: var(--_sketch-pass-rule-style, var(--_sketch-pointed) dashed);
     }
   }
 }

package/{dist/tw → tw}/box.css

@@ -34,6 +34,23 @@
      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%;
+  /* What a box rests as when nothing above `@apply box` says otherwise: no
+     fill, no line, the ordinary depth. Stated on the element, not left to
+     the `var()` fallbacks: `--_d-*` inherit like any custom property, so a
+     bare `box` inside a `.btn` rested as the button does -- a full fill and
+     the button's line. A component writes its own after `@apply box`, where
+     the later declaration wins. See docs/internal/model.md#resting-defaults. */
+  --_d-fill: 0%;
+  --_d-fg-on-fill: 0%;
+  --_d-border: 0%;
+  --_d-elevation: 1;
+  --_d-holds-ink: none;
+
+  /* Printed as drawn. A browser leaves backgrounds off paper by default, and
+     a filled box prints its label in the contrast colour: white on nothing.
+     Inherited, so everything inside keeps its paint too. */
+  print-color-adjust: exact;
+
   --_capped: min(var(--ui-fill, var(--_d-fill)), var(--_fill-cap, 100%), var(--intent-fill-max, 100%));
   /* Whether the intent's cap stopped the fill short, as 0% or 100%. A capped
      fill is a plate the presentation asked to be full, so it rests on the page
@@ -85,7 +102,26 @@
      `--intent-contrast` keeps its own meaning -- `--_on-fill` reconciles it with
      a capped intent -- rather than being bent so neutral's contrast is the ink,
      which renders a checked neutral checkbox black-on-black. */
-  --_fg: color-mix(in oklab, var(--intent-contrast) var(--_on-fill), var(--intent-strong));
+  --_fg-own: color-mix(in oklab, var(--intent-contrast) var(--_on-fill), var(--intent-strong));
+  /* The ink of the plate beneath. Intent does not cascade, so a component with
+     none prints the page's ink, and on a filled parent that ink sat on the
+     parent's fill: a badge in a primary button read at 1.11:1. A box whose
+     fill is a plate hands its own ink down; one with no plate declares these
+     invalid, which for a registered property means it inherits them, so the
+     ink passes through an input group to the field inside it. `--_through`
+     is 100% for a neutral box (its cap is below 100%) that was handed an ink
+     and holds none: an intent keeps its own ink, as it keeps its own colour.
+     A component that rests on a ground of its own restates all three after
+     `@apply box`. See docs/internal/model.md#the-ink-of-the-plate-beneath. */
+  --_held-ink: var(--_holds-ink, var(--_d-holds-ink)) var(--_fg-own);
+  --_held-on: var(--_holds-ink, var(--_d-holds-ink)) 100%;
+  --_own-hold: var(--_holds-ink, var(--_d-holds-ink)) 100%;
+  --_through: min(
+    var(--_held-on),
+    calc(100% - var(--_own-hold)),
+    clamp(0%, calc((100% - var(--intent-fill-max, 100%)) * 1000), 100%)
+  );
+  --_fg: color-mix(in oklab, var(--_held-ink) var(--_through), var(--_fg-own));
   /* P3: the line fades out as the fill fills in, so a filled box has a seamless
      edge. It fades toward `transparent`, not toward the plate: the plate
      already runs under the border (nothing clips the background to the padding
@@ -98,7 +134,29 @@
      `.edgeless` on the fill colour, which the border box paints as a second
      coat -- a ring around an element that asked for no edge. See
      docs/internal/model.md#presentation. */
-  --_line: color-mix(in oklab, transparent var(--ui-fill, var(--_d-fill)), var(--intent-border));
+  /* The neutral line of a box with no fill, where an aesthetic's line cannot
+     be seen without one: glass's hairline is a highlight on a plate, and on a
+     `.ghost.edged` button there is no plate (1.01:1 on a light page). A
+     component that wants the swap names the ink after `@apply box`; cleared
+     here so a box nested in one does not inherit it. `--_bare` is 100% for a
+     neutral intent (its cap is below 100%) resolving to no fill, stepped from
+     the resolved values as `surface`'s `--_quiet` is, so a container's
+     `.ghost` counts and an intent's own line is never swapped. */
+  --_bare-ink: initial;
+  --_bare: min(
+    clamp(0%, calc((100% - var(--intent-fill-max, 100%)) * 1000), 100%),
+    clamp(0%, calc(100% - var(--ui-fill, var(--_d-fill)) * 1000), 100%)
+  );
+  --_line-ink: color-mix(
+    in oklab,
+    var(--_held-ink) var(--_through),
+    color-mix(
+      in oklab,
+      var(--_bare-ink, var(--intent-border, var(--ui-ink, var(--color-border)))) var(--_bare),
+      var(--intent-border, var(--ui-ink, var(--color-border)))
+    )
+  );
+  --_line: color-mix(in oklab, transparent var(--ui-fill, var(--_d-fill)), var(--_line-ink));
   /* How much line there is, as an input rather than a result. A component that
      must keep its line whatever the edge class says raises `--_edge-floor`
      instead of rewriting `--_edge`, and the composition above still runs.
@@ -134,10 +192,6 @@
      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
@@ -161,7 +215,11 @@
      mixes where the intent lives). An intent-coloured shadow at full opacity is
      a smear of the component's hue, not depth; neobrutalism's slab, which *is*
      ink, asks for it by name. */
-  --_depth-color: color-mix(in oklab, var(--intent-border) var(--ui-shadow-ink, 0%), var(--elevation-color));
+  --_depth-color: color-mix(
+    in oklab,
+    var(--intent-border, var(--ui-ink, var(--color-border))) var(--ui-shadow-ink, 0%),
+    var(--elevation-color)
+  );
   /* Or the shadow *is* the edge. An aesthetic that draws its line as an inset
      ring (`.pixel`) puts the border where `clip-path` cannot cut it, so that
      ring must answer the edge axis like a real border -- `--_edge` already does,
@@ -187,7 +245,7 @@
   --_halo-layer:
     ,
     0 0 var(--ui-halo-blur, 0px) var(--ui-halo-spread, 0px)
-      color-mix(in oklab, var(--intent-border) var(--ui-halo-ink), transparent);
+      color-mix(in oklab, var(--intent-border, var(--ui-ink, var(--color-border))) var(--ui-halo-ink), transparent);
   /* Indirection so a component can substitute a complete value of its own
      without restating the parts -- `surface` does, for the multi-layer case.
      There is deliberately no `--ui-shadow` wrapper: a complete value has nothing
@@ -202,8 +260,21 @@
      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),
+    var(--_shadow),
+    inset 0 0 0 var(--ui-focus-inset) var(--focus-ring, color-mix(in srgb, var(--color-primary) 64%, transparent)),
     inset 0 0 0 calc(var(--ui-focus-inset) + 2px) var(--color-background);
+  /* The same line of the page colour under the outline `reset.css` draws,
+     for the same reason: the outline sits over the box's own edge, and on a
+     box filled with the ring's colour that part of it was invisible. Under a
+     two-pixel line that left one pixel of ring, which neobrutalism's slab
+     covered on two sides. Stepped from the capped fill, so only a box filled
+     past half takes it: on an unfilled one the ring already reads against the
+     page, and a line of the page colour inside a soft field is a stray mark. */
+  --_focus-gap: color-mix(
+    in oklab,
+    var(--color-background) clamp(0%, calc((var(--_capped) - 50%) * 1000), 100%),
+    transparent
+  );
 
   /* 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
@@ -274,7 +345,7 @@
      non-inherited property is `initial`, that is `none`. Every focused box would
      lose its shadow rather than keep it. */
   &:focus-visible {
-    box-shadow: var(--_focus-stack, var(--_shadow));
+    box-shadow: var(--_focus-stack, var(--_shadow), inset 0 0 0 2px var(--_focus-gap));
   }
 
   &:disabled,
@@ -314,7 +385,9 @@
    component opts in. `btn` and `.card.interactive` both do. The gesture is the
    aesthetic's -- neobrutalism travels into its offset shadow, chunky-tile drops
    onto its bar -- and with no aesthetic it is the base `scale(0.97)` from
-   `theme.css`, dropped under reduced motion. The `--ui-active-shadow-*` slots
+   `theme.css`. Reduced motion keeps every press and drops its motion, in
+   `box`, since a press is the feedback that a click landed. The
+   `--ui-active-shadow-*` slots
    stay no-ops until an aesthetic sets them.
 
    A press that travels into the element's own depth is a translation, given as
@@ -331,7 +404,11 @@
 @utility box-active {
   &:active:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]) {
     --_sx: calc(var(--ui-active-shadow-x, var(--ui-shadow-x, var(--_d-shadow-x, 0px))) * var(--_depth));
-    --_sy: calc(var(--ui-active-shadow-y, var(--ui-shadow-y, var(--_d-shadow-y, 0px))) * var(--_depth));
+    /* The same three slots as the resting offset, `.raised`'s plain step last,
+       so with no aesthetic a pressed button keeps the depth it rests on. */
+    --_sy: calc(
+      var(--ui-active-shadow-y, var(--ui-shadow-y, var(--_d-shadow-y, var(--elevation-y, 0px)))) * var(--_depth)
+    );
 
     --_press: calc(var(--ui-active-translate-x, 0px) * var(--_depth))
       calc(var(--ui-active-translate-y, 0px) * var(--_depth));

package/tw/components/button.css

@@ -0,0 +1,11 @@
+@reference "tailwindcss";
+@import "../theme.css";
+@reference "../box.css";
+
+/* The focused entry: what the rules in `button.rules.css` need to compile on their
+   own, then the rules. An aggregate entry imports the rules file directly and
+   supplies those needs once -- Tailwind stacks a `@utility` each time a file
+   that defines it is imported or referenced, so a second route to `box.css`
+   doubles every `@apply box`. See docs/internal/model.md (One route to each
+   utility). */
+@import "./button.rules.css";