@codenhub/styles 0.5.0 → 0.6.0

package/dist/tw/aesthetics/glass.css

@@ -1,12 +1,11 @@
 /* Glass: translucent surfaces over a blurred backdrop with a hairline highlight
-   edge. It needs something behind it to blur -- on a flat page background it is a
-   translucent panel and nothing more.
+   edge. It needs something behind it to blur -- on a flat page background it is
+   a translucent panel and nothing more.
 
-   Tier 1 only. The scope that used to take a hand-written selector list is now a
-   token: only `surface` resolves `--ui-backdrop`, so blur reaches cards,
-   panels, alerts and tooltips while controls stay solid. An active blur costs a
-   compositing layer apiece, and one under every control of a dense cluster reads
-   as noise. */
+   Tier 1 only: the scope is a token. Only `surface` resolves `--ui-backdrop`,
+   so blur reaches cards, panels, alerts and tooltips while controls stay solid.
+   An active blur costs a compositing layer apiece, and one under every control
+   of a dense cluster reads as noise. */
 
 /* The layer map, stated before anything uses a layer -- see `theme.css`. The
    aesthetic's token class sits in `components`, below every utility, so a
@@ -40,8 +39,19 @@
        on a field's 60% resting line, in light. See
        docs/internal/model.md#presentation. */
     --ui-control-ink: light-dark(rgb(0 0 0 / 0.55), rgb(255 255 255 / 0.55));
+    /* Nor is a line drawn on a plate: the hairline vanishes on a table's light
+       plate, and its default, `.ruled`, and `.ruleless` forms would render as
+       one. A table's frame and rules take the theme's ink at a fifth,
+       translucent for the same reason the control line is. */
+    --ui-rule-ink: light-dark(rgb(0 0 0 / 0.2), rgb(255 255 255 / 0.2));
 
-    --ui-bg-alpha: 0.8;
+    /* The glass is the ground, not the fill. Thinning fills with
+       `--ui-bg-alpha` would make how much colour a presentation asked for
+       depend on the aesthetic, which is presentation's question (R1): a
+       `.solid` button, a checked toggle, and a `.solid` card stay opaque.
+       Translucency lives in `--ui-surface-ground` below, the plate a partial
+       fill is painted over. */
+    --ui-bg-alpha: 1;
     --ui-backdrop: blur(14px) saturate(1.6);
     --ui-surface-image: initial;
 
@@ -54,6 +64,15 @@
     --ui-shadow-y: 0px;
     --ui-shadow-blur: 0px;
     --ui-shadow-spread: 0px;
+    --ui-shadow-inset: initial;
+    --ui-shadow-ink: initial;
+    --ui-active-shadow-x: initial;
+    --ui-active-shadow-y: initial;
+    /* The theme's depth colour, restated: the surface shadow below resolves it
+       here, on the region, so inside chunky tile it inherited opaque black and
+       cast a black slab under every card, and inside cyber it inherited
+       transparent and cast none. */
+    --elevation-color: light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55));
     /* No halo, cleared so a region nested inside another
        aesthetic does not inherit one. */
     --ui-halo-blur: initial;
@@ -88,8 +107,14 @@
     /* Nothing here draws its edge as a ring, and an aesthetic nested inside pixel
        has to say so rather than inherit it. */
     --ui-shadow-edge: initial;
+    /* Nothing clips, so the global focus outline shows; pixel's inset focus
+       layer is cleared rather than inherited. */
+    --ui-focus-inset: initial;
     --ui-hover-transform: none;
-    --ui-active-transform: none;
+    /* The base press, stated because every token here is: the depth in this
+       aesthetic is the blur, so a control has no slab to press into, and a pane
+       that gives slightly under the pointer is the one answer a press gets. */
+    --ui-active-transform: scale(0.97);
     --ui-active-translate-x: initial;
     --ui-active-translate-y: initial;
 
@@ -105,11 +130,155 @@
      surface rather than a softer blur. */
   @media (prefers-reduced-transparency: reduce) {
     .glass {
-      --ui-bg-alpha: 1;
       --ui-backdrop: none;
       --ui-surface-ground: var(--color-background);
     }
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .glass {
+      --ui-active-transform: none;
+    }
+  }
+
+  /* Liquid glass: a modifier of glass, the way `.sketch-rounded` is of sketch.
+     Continuous corners, a bright rim where light catches the pane, a lighter
+     blur, and -- in engines that render an SVG filter in `backdrop-filter`,
+     Chromium today -- a lens that bends the backdrop at the edges. On the region
+     beside `.glass`, or on one surface inside a glass region.
+
+     Only the corners apply on their own. The ink, ground, and blur are glass
+     material, so they are set below only where `.glass` is in scope: a lone
+     `.glass-liquid` would otherwise make every surface translucent with nothing
+     to blur and every field's line a near-invisible hairline.
+
+     The corner knobs are glass's own, with larger defaults: a continuous corner
+     reads smaller than a round one of the same radius. Where `corner-shape` is
+     not drawn the corners stay round. */
+  .glass-liquid {
+    --ui-corner: var(--glass-radius, 1rem);
+    --ui-corner-surface: var(--glass-radius-surface, 1.5rem);
+    --ui-corner-shape: squircle;
+
+    --_glass-liquid-blur: blur(2px) saturate(1.8);
+
+    /* The lens is its own layer rather than a second function in the blur's
+       list: Firefox and WebKit accept `url()` there and draw nothing for it, and
+       a filter list with an unusable reference is dropped whole -- the blur with
+       it. Kept apart, an engine that ignores the lens still blurs.
+
+       The displacement map is built inside the filter from the box itself:
+       erode a flood of the filter region by 8px, blur it into a ramp, and take
+       the ramp's slope across x and y as the two displacement channels. Every
+       length is absolute, so the band is the same width on a tooltip and on a
+       page-wide card; no length is a percentage of the box. The blur is wider
+       than the erosion so the ramp's corners round off -- otherwise the square
+       core shows through as loops at every corner. A filter cannot read a custom
+       property, so the band and the strength are fixed, not knobs. */
+    --_glass-liquid-lens: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='lens' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feFlood flood-color='white'/><feMorphology operator='erode' radius='8'/><feGaussianBlur stdDeviation='10' result='ramp'/><feOffset in='ramp' dx='-3' result='l'/><feOffset in='ramp' dx='3' result='r'/><feComposite in='l' in2='r' operator='arithmetic' k2='2' k3='-2' k4='0.5' result='dx'/><feOffset in='ramp' dy='-3' result='u'/><feOffset in='ramp' dy='3' result='d'/><feComposite in='u' in2='d' operator='arithmetic' k2='2' k3='-2' k4='0.5' result='dy'/><feColorMatrix in='dx' values='0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1' result='x'/><feColorMatrix in='dy' values='0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 1'/><feComposite in='x' operator='arithmetic' k2='1' k3='1'/><feDisplacementMap in='SourceGraphic' scale='110' xChannelSelector='R' yChannelSelector='G'/></filter></svg>#lens");
+
+    /* The rim: light caught on the top-left edge and, fainter, the bottom-right,
+       over a soft inner glow. Drawn on the lens layer, the topmost, because a
+       rim drawn on the surface itself would sit under the layers and blur. */
+    --_glass-liquid-rim:
+      inset 1px 1px 0 light-dark(rgb(255 255 255 / 0.75), rgb(255 255 255 / 0.35)),
+      inset -1px -1px 0 light-dark(rgb(255 255 255 / 0.35), rgb(255 255 255 / 0.12)),
+      inset 0 0 18px light-dark(rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.05));
+    --_glass-liquid-sheen: linear-gradient(
+      160deg,
+      light-dark(rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.06)),
+      transparent 45%
+    );
+  }
+
+  /* The glass material the modifier changes, where glass is in scope: on the
+     same element, or on a surface inside a glass region. The blur moves off the
+     surface onto a layer behind its content (below): a surface with a backdrop
+     filter of its own is a backdrop root, and a layer inside one sees only the
+     surface, never the page behind it. */
+  .glass.glass-liquid,
+  .glass .glass-liquid {
+    --ui-ink: light-dark(rgb(255 255 255 / 0.45), rgb(255 255 255 / 0.16));
+    --ui-surface-ground: color-mix(in srgb, var(--color-background) 30%, transparent);
+    --ui-surface-image: initial;
+    --ui-backdrop: none;
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    .glass.glass-liquid,
+    .glass .glass-liquid {
+      --ui-surface-ground: var(--color-background);
+    }
+
+    .glass-liquid {
+      --_glass-liquid-blur: none;
+      --_glass-liquid-lens: none;
+    }
+  }
+
+  /* The layers: a treatment no token reaches, so a selector list glass owns and
+     the registry records. Two pseudo-elements behind a surface's content, the
+     blur beneath and the lens with the rim and sheen above it. `isolation`
+     keeps them above the surface's own plate, which they then blur with the
+     page; `position` anchors them, and a component that positions itself --
+     the tooltip bubble -- keeps its own. A default or `.soft` table frosts
+     under glass, so it takes the layers too. Both slots are spent, so a surface
+     inside a liquid region carries no `::before` or `::after` of the
+     consumer's; the fields cannot host one, and controls stay solid as they do
+     under glass.
+
+     A region of another aesthetic nested inside, or of plain glass, keeps its
+     own material and takes no layers. This list names the other aesthetics, and
+     `registry.test.ts` fails when one is missing. */
+  :is(.glass-liquid, .glass-liquid *):is(.glass, .glass *):is(
+    .card,
+    .panel,
+    .alert,
+    .tooltip-bubble,
+    .surface,
+    .data-table:not(.solid, .ghost)
+  ):not(
+    .glass-liquid :is(.neobrutalism, .pixel, .chunky-tile, .cyber, .sketch),
+    .glass-liquid :is(.neobrutalism, .pixel, .chunky-tile, .cyber, .sketch) *,
+    .glass-liquid .glass:not(.glass-liquid),
+    .glass-liquid .glass:not(.glass-liquid) *
+  ) {
+    position: relative;
+    isolation: isolate;
+
+    &::before,
+    &::after {
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      border-radius: inherit;
+      corner-shape: inherit;
+      content: "";
+      pointer-events: none;
+    }
+
+    /* Prefixed first, for the reason `surface` gives. */
+    &::before {
+      -webkit-backdrop-filter: var(--_glass-liquid-blur);
+      backdrop-filter: var(--_glass-liquid-blur);
+    }
+
+    &::after {
+      backdrop-filter: var(--_glass-liquid-lens);
+      background-image: var(--_glass-liquid-sheen);
+      box-shadow: var(--_glass-liquid-rim);
+    }
+  }
+}
+
+/* Forced colours paint the plain surface: no layer blurs, bends, or lights it. */
+@media (forced-colors: active) {
+  .glass-liquid {
+    --_glass-liquid-blur: none;
+    --_glass-liquid-lens: none;
+    --_glass-liquid-rim: none;
+    --_glass-liquid-sheen: none;
+  }
 }
 
 /* Solo: the same look painted onto the one element carrying the class, for an
@@ -151,3 +320,59 @@
     backdrop-filter: none;
   }
 }
+
+/* With `.glass-liquid`, the liquid pane: its corner and ground, and the same two
+   layers behind the element's content. The element's own blur goes, for the
+   backdrop-root reason the modifier gives. Both pseudo-elements are spent, so a
+   foreign element that draws its own `::before` or `::after` loses them.
+
+   The layers need a positioned element to anchor to. That one declaration is
+   layered, where the element's own `fixed` or `absolute` beats it -- a toast
+   keeps its placement, and an unpositioned element is anchored. */
+@layer components {
+  .glass-solo.glass-liquid {
+    position: relative;
+  }
+}
+
+.glass-solo.glass-liquid {
+  isolation: isolate;
+  background-color: color-mix(
+    in srgb,
+    var(--color-background, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0))) 30%,
+    transparent
+  );
+  border-color: light-dark(rgb(255 255 255 / 0.45), rgb(255 255 255 / 0.16));
+  border-radius: var(--glass-radius-surface, 1.5rem);
+  corner-shape: squircle;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+
+  &::before,
+  &::after {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    border-radius: inherit;
+    corner-shape: inherit;
+    content: "";
+    pointer-events: none;
+  }
+
+  &::before {
+    -webkit-backdrop-filter: var(--_glass-liquid-blur);
+    backdrop-filter: var(--_glass-liquid-blur);
+  }
+
+  &::after {
+    backdrop-filter: var(--_glass-liquid-lens);
+    background-image: var(--_glass-liquid-sheen);
+    box-shadow: var(--_glass-liquid-rim);
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .glass-solo.glass-liquid {
+    background-color: var(--color-background, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0)));
+  }
+}

package/dist/tw/aesthetics/index.css

@@ -2,7 +2,8 @@
    for only the one in use: a cascading class has no static call site, so nothing
    here can be tree-shaken.
 
-   Import after the base stylesheet in either form. */
+   Import before or after the base stylesheet, in either form: every entrypoint
+   states the layer order first, so load order decides nothing. */
 @import "./neobrutalism.css";
 @import "./glass.css";
 @import "./pixel.css";

package/dist/tw/aesthetics/neobrutalism.css

@@ -1,8 +1,7 @@
 /* Neobrutalism: thick ink outline, a hard unblurred offset shadow, and a press
    that moves the element into its own shadow. Material tokens only, no component
    named -- the ink reaches everything through the intent reset, the shadow is
-   colourless geometry each component colours against its own intent. Load after
-   the base stylesheet; source order decides against the zero-specificity reset. */
+   colourless geometry each component colours against its own intent. */
 
 /* The layer map, stated before anything uses a layer -- see `theme.css`. The
    aesthetic's token class sits in `components`, below every utility, so a
@@ -37,6 +36,10 @@
        is the whole look, so this aesthetic asks for the intent instead of the
        neutral depth colour every other shadow uses. */
     --ui-shadow-ink: 100%;
+    /* The ink replaces the depth colour whole, so this one is inert here; it is
+       restated so a region nested inside chunky tile or cyber does not inherit
+       their black or transparent depth. */
+    --elevation-color: light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55));
     --ui-shadow-x: var(--_neo-offset);
     --ui-shadow-y: var(--_neo-offset);
     --ui-shadow-blur: 0px;
@@ -47,19 +50,24 @@
     --ui-halo-spread: initial;
     --ui-halo-ink: initial;
 
-    /* The press: travel the offset, shrink the shadow to nothing, so the element
-       lands flat where its slab was. A translation `box` scales with the slab, so
-       the two stay the same length at every size and elevation. Hover keeps the slab still under the pointer;
-       `box-hover`'s derived fill tint is the whole hover response. One token pair,
-       no `:hover` list, R3 intact. */
+    /* The press: travel the offset, shrink the shadow to nothing, so the
+       element lands flat where its slab was. A translation `box` scales with
+       the slab, so the two stay the same length at every size and elevation.
+       Hover keeps the slab still under the pointer; `box-hover`'s derived fill
+       tint is the whole hover response. One token pair, no `:hover` list, R3
+       intact. */
     --ui-active-shadow-x: 0px;
     --ui-active-shadow-y: 0px;
     --ui-active-transform: none;
     --ui-active-translate-x: var(--_neo-offset);
     --ui-active-translate-y: var(--_neo-offset);
+    --ui-hover-transform: none;
 
     /* Nothing here clips or blurs, and an aesthetic nested inside another has to
-       say so rather than inherit it. */
+       say so rather than inherit it. Nothing clips, so the global focus outline
+       shows and no inset focus layer is wanted: cleared so a region nested
+       inside pixel does not inherit pixel's. */
+    --ui-focus-inset: initial;
     --ui-clip: none;
     --ui-clip-tight: none;
     /* Round corners, said explicitly, and the pill and chip corners cleared back
@@ -86,9 +94,13 @@
     --ui-bg-alpha: 1;
     --ui-surface-image: initial;
 
-    /* The control ink glass and chunky tile name, cleared so a region nested
-       inside either draws its controls in this aesthetic's own ink. */
-    --ui-control-ink: initial;
+    /* A control's neutral line is the theme's control border, not this
+       aesthetic's ink: that ink is the primary colour in both themes, so every
+       unchecked toggle and resting field drew its boundary as loudly as a
+       primary one. Named rather than cleared, so a region nested inside glass
+       or chunky tile does not inherit theirs either. */
+    --ui-control-ink: var(--color-control-border);
+    --ui-rule-ink: initial;
 
     /* Chunky tile's heavier label, cleared so a region nested inside it keeps
        the button's and the badge's own label. */

package/dist/tw/aesthetics/pixel.css

@@ -64,11 +64,10 @@
        has to be wider than the edge to show at all. */
     --ui-focus-inset: calc(var(--_pixel-unit) + var(--focus-ring-width));
 
-    /* One square unit off each corner, and nothing else. The staircase this
-       replaces stepped twice at half the unit to approximate a curve, which is the
-       one thing a low-resolution grid cannot do: at any size it read as a bevel
-       that had not quite committed. A single cut of the grid's own unit is the
-       shape the look is actually made of.
+    /* One square unit off each corner, and nothing else. A staircase
+       approximates a curve, which is the one thing a low-resolution grid cannot
+       do: it reads as a bevel that has not quite committed. A single cut of the
+       grid's own unit is the shape the look is made of.
 
        The polygon resolves the unit here, on `.pixel`, and inherits down
        already-resolved -- so a component cannot rescale the corner by setting
@@ -108,6 +107,13 @@
     --ui-corner-br: initial;
     --ui-corner-bl: initial;
 
+    /* The ring is the edge and nothing here is depth, so the shadow ink, the
+       press's shadow, and the depth colour are cleared or restated rather than
+       inherited from an aesthetic around this one. */
+    --ui-shadow-ink: initial;
+    --ui-active-shadow-x: initial;
+    --ui-active-shadow-y: initial;
+    --elevation-color: light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55));
     --ui-hover-transform: none;
     --ui-active-transform: none;
     --ui-active-translate-x: initial;
@@ -122,9 +128,13 @@
        font to fall back to but a monospace stack. */
     font-family: var(--font-pixel, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
 
-    /* The control ink glass and chunky tile name, cleared so a region nested
-       inside either draws its controls in this aesthetic's own ink. */
-    --ui-control-ink: initial;
+    /* A control's neutral line is the theme's control border, not this
+       aesthetic's ink: that ink is the primary colour in both themes, so every
+       unchecked toggle and resting field drew its boundary as loudly as a
+       primary one. Named rather than cleared, so a region nested inside glass
+       or chunky tile does not inherit theirs either. */
+    --ui-control-ink: var(--color-control-border);
+    --ui-rule-ink: initial;
 
     /* Chunky tile's heavier label, cleared so a region nested inside it keeps
        the button's and the badge's own label. */

package/dist/tw/aesthetics/sketch.css

@@ -1,6 +1,6 @@
 /* Sketch: uneven elliptical corners, a solid ink edge, and a small hard shadow.
    The handwriting face is consumer-supplied, so this file has no font asset or
-   network side effect. Load after the base stylesheet. */
+   network side effect. */
 
 /* The layer map, stated before anything uses a layer -- see `theme.css`. The
    aesthetic's token class sits in `components`, below every utility, so a
@@ -28,7 +28,10 @@
     --ui-corner-shape: round;
 
     --ui-ink: light-dark(var(--color-neutral-950), var(--color-neutral-50));
-    --ui-control-ink: initial;
+    /* Controls take the theme's control border rather than the ink, which is the
+       primary colour in both themes; see `neobrutalism.css`. */
+    --ui-control-ink: var(--color-control-border);
+    --ui-rule-ink: initial;
     --ui-border-width: 1px;
     --ui-border-max: 100px;
     --ui-line-style: solid;
@@ -107,7 +110,7 @@
   ) {
     /* The pointed outlines: controls, fields, surfaces, and chips. */
     &:is(.sketch, .sketch *):not(.sketch-rounded, .sketch-rounded *) {
-      &:is(.btn, .ipt, .textarea, .select, .input-group, .pre, .tooltip-bubble, .data-table) {
+      &: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);
         }
@@ -139,7 +142,7 @@
         }
       }
 
-      &:is(.card, .panel, .alert) {
+      &: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);
         }
@@ -170,7 +173,7 @@
 
     /* The rounded outlines, in the same four places. */
     &:is(.sketch-rounded, .sketch-rounded *) {
-      &:is(.btn, .ipt, .textarea, .select, .input-group, .pre, .tooltip-bubble, .data-table) {
+      &: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);
         }
@@ -202,7 +205,7 @@
         }
       }
 
-      &:is(.card, .panel, .alert) {
+      &: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);
         }
@@ -283,7 +286,11 @@
   /* 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);
-  box-shadow: 2px 2px 0 0 var(--_sketch-ink);
+  /* The aesthetic's neutral depth cue, not the ink: the class casts its 2px
+     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));
   font-family: var(--font-sketch, cursive);
 }
 

package/dist/tw/box.css

@@ -35,6 +35,21 @@
      own presentation instead of the container's reinterpretation of one. */
   --_fill-cap: 100%;
   --_capped: min(var(--ui-fill, var(--_d-fill)), var(--_fill-cap, 100%), var(--intent-fill-max, 100%));
+  /* 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
+     background rather than on nothing: 20% of the page's ink over nothing
+     showed whatever sat behind a neutral `.solid` -- glass's backdrop, an
+     image, the colour of a filled card around it -- where on a plain page it
+     read as the light grey plate it is meant to be. The component's own cap
+     is measured out first, so a text control's 20% wash and a neutral
+     `.card.soft`'s 0% stay the tints they are, whatever the intent. Stepped
+     rather than scaled because the two percentages cannot be divided in every
+     engine yet. */
+  --_plate: clamp(
+    0%,
+    calc((min(var(--ui-fill, var(--_d-fill)), var(--_fill-cap, 100%)) - var(--_capped)) * 1000),
+    100%
+  );
   --_fill: calc(var(--_capped) * var(--ui-bg-alpha, 1));
   --_hover-fill: calc(min(100%, var(--_capped) + var(--hover-step)) * var(--ui-bg-alpha, 1));
   /* How much of the foreground is the contrast ink: what the presentation asks
@@ -57,40 +72,41 @@
      declaration beats the inherited one at any specificity; `surface`, `kbd`,
      `code`, `pre` and the tooltip each restate theirs after `@apply box`. */
   --_d-ground: transparent;
+  /* The ground, made the page background wherever `--_plate` says the cap
+     stopped the fill -- over a component's own ground too, so a capped
+     `.solid` surface under glass is opaque like every other `.solid`. */
+  --_ground: color-mix(in oklab, var(--color-background) var(--_plate), var(--_d-ground, transparent));
 
-  --_bg: color-mix(in oklab, var(--intent-color) var(--_fill), var(--_d-ground, transparent));
+  --_bg: color-mix(in oklab, var(--intent-color) var(--_fill), var(--_ground));
   /* 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
      subtle fill). Reading `--intent-color` at the page end instead makes every
      colour do double duty and prints a soft amber component at 3.1:1.
      `--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 rendered a checked neutral checkbox black-on-black. */
+     which renders a checked neutral checkbox black-on-black. */
   --_fg: color-mix(in oklab, var(--intent-contrast) var(--_on-fill), var(--intent-strong));
   /* 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 here clips the background to the padding
-     box), so a line blended toward `--_bg` painted the plate a second time over
-     itself. On an opaque plate that is invisible; on a translucent one -- a
-     neutral fill, capped at 20%, or any fill `--ui-bg-alpha` thins -- it drew a
-     ring around the box, 1.54:1 against its own plate in light. Faded toward
-     nothing, the border shows the one coat beneath it.
+     edge. It fades toward `transparent`, not toward the plate: the plate
+     already runs under the border (nothing clips the background to the padding
+     box), so a line blended toward `--_bg` paints the plate a second time over
+     itself -- invisible on an opaque plate, a ring on a translucent one (a
+     neutral fill capped at 20%, or any fill `--ui-bg-alpha` thins). Faded
+     toward nothing, the border shows the one coat beneath it.
 
-     Blend first, amount after (`--_edge-amount` below) -- the other order lands
-     `.edgeless` on the fill colour, which the border box then paints as a second
-     coat: a ring around an element that asked for no edge. See
+     Blend first, amount after (`--_edge-amount` below): the other order lands
+     `.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));
   /* 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.
 
-     The distinction is not cosmetic. Rewriting the result drops every term the
-     result was composed from, silently and with nothing to report: that is how
-     `--ui-border` stopped reaching all six text controls, and how `--_d-border`
-     sat declared and unread on each of them for a release. Bounding the input
-     leaves the axis live, so `.edged` and `.edgeless` still mean what they say
-     on a component that happens to floor itself. */
+     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. */
   --_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));
@@ -171,14 +187,11 @@
   --_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. */
+     plus its own padding and the border shorthand above, so its geometry is
+     only right under `border-box`. `reset.css` sets that on `*`, but only the
+     `.`, `/native` and `/tw/reset` entrypoints carry the reset; `/components`
+     and the granular `/tw/*` component entrypoints ship neither it nor
+     Preflight, so `box` owns it. */
   box-sizing: border-box;
   background-color: var(--_bg);
   color: var(--_fg);
@@ -221,6 +234,15 @@
     transform var(--motion-duration-normal) var(--motion-ease),
     translate var(--motion-duration-normal) var(--motion-ease);
 
+  /* Reduced motion stops here as well as in `reset.css`: `/components` and the
+     focused `/tw/*` entries carry no reset, so each component that moves says
+     so itself -- this for everything `box` paints, and the components with a
+     transition or animation of their own beside it. The same near-zero
+     duration the reset uses, so a `transitionend` still fires. */
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0.01ms;
+  }
+
   /* An aesthetic that clips cannot show the global focus outline, so it declares
      `--ui-focus-inset` and gets an inset layer instead. With no such aesthetic
      the token is undefined, which makes the whole stack invalid at computed-value
@@ -254,7 +276,7 @@
    and wrong for something you type into, so a component opts in. */
 @utility box-hover {
   &:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]):hover {
-    --_bg: color-mix(in oklab, var(--intent-hover) var(--_hover-fill), var(--_d-ground, transparent));
+    --_bg: color-mix(in oklab, var(--intent-hover) var(--_hover-fill), var(--_ground));
     /* P3 again, against the hover tone: the line still fades as the fill fills
        in, but toward the hover ink. Without this the edge keeps the resting ink
        -- a ring of the colour the box just left. */