@codenhub/styles 0.4.0 → 0.6.0

package/dist/tw/components/form.css

@@ -24,55 +24,21 @@
   --_d-fg-on-fill: 0%;
   --_d-border: 100%;
 
-  /* The cap used to be 12%, which is exactly what `.soft` asks for, so `min()`
-     handed `.solid` and `.soft` the same tint and three fill names rendered two
-     boxes. 6% is a quiet wash, and it is the cap rather than a presentation:
-     `.soft` names the tint it wants and takes it whole below, so what this
-     governs is `.solid` and the container that cascades one onto a field nobody
-     classed.
+  /* 6% is a quiet wash, and it is the cap rather than a presentation: `.soft`
+     names the tint it wants and takes it whole below, so what this governs is
+     `.solid` and the container that cascades one onto a field nobody classed. A
+     cap equal to `.soft`'s 12% would hand `.solid` and `.soft` the same tint
+     through `min()`.
 
      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, so the bound still does what it was
-     written for. */
+     any value this cap is likely to take.
+
+     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,
+     including the checked state below that lifts it. */
   --_fill-cap: 6%;
-  /* The floor is zero everywhere except a checked toggle, which needs a ground
-     under its mark. A container's `.ghost` would otherwise leave a checked
-     checkbox as a tick floating on the page -- our own cascade producing the
-     broken result, which is the test a bound has to pass. */
-  --_fill-floor: 0%;
-  --_fill: calc(
-    clamp(
-        var(--_fill-floor),
-        min(var(--ui-fill, var(--_d-fill)), var(--_fill-cap), var(--intent-fill-max, 100%)),
-        100%
-      ) *
-      var(--ui-bg-alpha, 1)
-  );
-  /* The ink follows *this* control's fill, not `box`'s. `box` ramps against
-     `--_capped`, which knows `--intent-fill-max` but not `--_fill-cap`, so on a
-     control it would read a fill far higher than the one actually painted: a
-     `.primary.solid` checkbox has `--ui-fill: 100%` and an unbounded intent, so
-     `box` would call for the contrast tone while the plate sits at 20%. White
-     tick on light grey.
-
-     Ramping against `--_fill` keeps the two in step at every bound, including
-     the checked state that lifts them.
-
-     `--_fg-on-fill-floor` is the seam `:checked` pins instead of touching
-     `--ui-fg-on-fill` directly. `.ghost`/`.soft` are unlayered CSS (P3, and see
-     model.md's `--_fill-cap` history) and `text-control` compiles into
-     Tailwind's `utilities` layer, so a layered `:checked` writing
-     `--ui-fg-on-fill` the way it writes `--_fill-cap`/`--_fill-floor` would
-     lose to `.ghost`'s unlayered `--ui-fg-on-fill: 0%` regardless of
-     specificity -- the same trap `--_fill-cap` exists to avoid on the fill
-     itself. A private floor `.ghost`/`.soft` never touch has nothing
-     unlayered contesting it. */
-  --_on-fill: max(
-    var(--_fg-on-fill-floor, 0%),
-    min(var(--ui-fg-on-fill, var(--_d-fg-on-fill)), max(0%, calc(var(--_fill) * 2 - 100%)))
-  );
   /* The resting line is a fraction of the intent rather than all of it, and the
      fraction is what makes the pointer visible. Drawn at full strength a control
      already sits at its intent's darkest, and hover moves it to a neighbouring
@@ -86,15 +52,16 @@
      back to 100% -- its line is a silhouette rather than a field's edge, and
      there is nothing else marking an unchecked box. */
   --_line-rest: 60%;
-  /* Two seams rather than one composed result. `--_line-tone` is what colour the
-     line is, and the states below move it; `--_line` folds in P3's blend toward
-     the fill, exactly as `box` does it, so the two agree and a state never has to
-     restate the blend to keep it.
-
-     Written as a single `--_line` that states overwrote, a hovered or focused
-     control lost the blend along with the tone, because replacing a composed
-     result drops every term it was composed from. Same failure as the edge
-     below, one property over. */
+  /* Two seams rather than one composed result. `--_line-tone` is what colour
+     the line is, and the states below move it; `--_line` folds in the fill,
+     walking the line toward the intent colour by the fill amount, so a state
+     never has to restate that blend to keep it. It is a field's own form of P3
+     rather than `box`'s: a field keeps its line whatever it is filled with, so
+     the line walks toward the fill's colour instead of fading out into it.
+
+     A single `--_line` that states overwrote would lose the blend along with
+     the tone, because replacing a composed result drops every term it was
+     composed from -- the same failure as the edge below. */
   --_line-tone: color-mix(in oklab, var(--intent-border) var(--_line-rest), transparent);
   --_line: color-mix(in oklab, var(--intent-color) var(--_fill), var(--_line-tone));
   /* The edge floor, as an input to `box` rather than a rewrite of its result.
@@ -106,17 +73,18 @@
      An element's own `.edgeless` lowers the floor -- see the rule below the
      utility -- which is a consumer naming what they want rather than a cascade
      reaching something nobody classed. `.checkbox` and `.radio` are left off
-     that rule and keep the floor absolute: they have nothing outside their line,
-     so removing it removes the control.
-
-     This used to be `--_edge: color-mix(...)` written after `@apply box`, which
-     dropped `--ui-border` out of the composition entirely. `.edged` and
-     `.edgeless` were both inert on all six text controls, and `--_d-border` was
-     declared and never read on each of them. */
+     that rule and keep the floor absolute: they have nothing outside their
+     line, so removing it removes the control. */
   --_edge-floor: 100%;
 
   @apply w-full appearance-none;
 
+  /* The surrounding font rather than the user agent's smaller field one, on
+     every entry: `/components` carries no reset to say so. */
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+
   &::placeholder {
     color: var(--color-text-secondary);
   }
@@ -133,148 +101,169 @@
     --_line-tone: var(--intent-color);
   }
 
-  /* R8, P6: `:checked` pins the fill by making the floor and the cap the same
-     value, so `clamp()` returns exactly that value whatever `--ui-fill` asks --
-     still a bound on the input, still lifted rather than a rewrite of the
-     result (the failure mode P6 exists for: an early version pinned `--_fill`
-     and `--_fg` directly, which made a checked toggle ignore its own aesthetic
-     and elevation along with presentation).
-
-     The floor used to sit at `12%` rather than `100%`, which kept presentation
-     live on the checked mark too -- a checked `.soft` toggle rendered a pale
-     plate with just the mark at full strength, the classic ring-and-dot radio.
-     The stress-test pass found that cost more than it bought on a real screen:
-     three presentations gave a checkbox, a radio, and a switch three different
-     "on" identities to learn, while every *unchecked* toggle read the same
-     washed-out plate regardless of which class asked for it -- close enough to
-     the disabled look that a form full of ordinary, unchecked, un-intended
-     controls read as half-disabled. Pinning checked to one plate and freeing
-     presentation to separate the *unchecked* one instead (see
-     `checkbox`/`radio`/`switch` below) moves the axis to where it was doing
-     something. Lives here, not on the toggles, because a text input is never
-     `:checked`.
-
-     The ink is pinned alongside the fill, through `--_fg-on-fill-floor` rather
-     than `--ui-fg-on-fill` directly (see that seam, above): the other half of
-     what a fill class asks for is how much contrast ink it wants
-     (`--ui-fg-on-fill: 0%` is `.ghost`/`.soft` declaring "none, my plate stays
-     quiet"), and pinning the fill without pinning this left a checked
-     `.ghost`/`.soft` toggle with an opaque plate and a mark that still read as
-     though the plate were quiet -- both derived from the same intent tone,
-     close enough to disappear into each other. `--_on-fill` ramps against the
-     *composed* `--_fill`, so once that is pinned to 100% the ink has to reach
-     full contrast too, or the ramp's own ceiling has nothing to reach. */
+  /* S1, P6: `:checked` is a state, so it re-declares the presentation inputs --
+     a full fill and full contrast ink -- and lifts the cap that would bound
+     them, and `box` composes the rest. It does not write a result: pinning
+     `--_fill` and `--_fg` directly would make a checked toggle ignore its own
+     aesthetic and elevation along with presentation. It sits in `utilities` at
+     0-2-0, above the fill classes in `components`, so a checked toggle renders
+     one plate whatever presentation it or a container asks for, and a
+     consumer's utility loses to it because state wins over every choice
+     (model.md#precedence). A toggle is a void `<input>`, so the inputs it
+     writes reach nothing but its own mark.
+
+     The checked fill is 100% whatever the presentation, so a checkbox, a radio,
+     and a switch each have one "on" identity; presentation separates the
+     *unchecked* plate instead (see `checkbox`/`radio`/`switch` below). It lives
+     here, not on the toggles, because a text input is never `:checked`.
+
+     The ink is declared alongside the fill: `--ui-fg-on-fill: 0%` is
+     `.ghost`/`.soft` declaring "my plate stays quiet", and a checked toggle
+     with an opaque plate and an ink that still expects a quiet one loses its
+     mark into the plate. `box` ramps the ink against the bounded fill before
+     `--ui-bg-alpha` thins it, so a checked toggle under `.glass` keeps full
+     contrast ink on its translucent plate. */
   &:checked {
+    --ui-fill: 100%;
+    --ui-fg-on-fill: 100%;
     --_fill-cap: 100%;
-    --_fill-floor: 100%;
-    --_fg-on-fill-floor: 100%;
   }
+}
 
-  /* Native decorations a field replaces with its own artwork. */
+/* The browser's own field decorations -- the date picker button, a number's
+   spin buttons, a search field's clear and magnifier -- stay by default,
+   because each one is also behaviour: hiding the picker button hides the only
+   pointer route to the picker. `.unadorned` removes them for a consumer who
+   draws their own adornments in an `.input-group` and wires the behaviour back
+   (`showPicker()`, `stepUp()`/`stepDown()`, clearing the value). On the
+   control, or on the group to reach the control inside.
+
+   Firefox exposes no pseudo-element for its date picker button, so that one
+   stays there; its number spinners go with `appearance: textfield`. */
+@utility unadorned {
   &::-webkit-search-decoration,
   &::-webkit-search-cancel-button,
   &::-webkit-search-results-button,
   &::-webkit-search-results-decoration,
   &::-webkit-calendar-picker-indicator,
   &::-webkit-inner-spin-button,
-  &::-webkit-clear-button {
+  &::-webkit-outer-spin-button,
+  &::-webkit-clear-button,
+  & > input::-webkit-search-decoration,
+  & > input::-webkit-search-cancel-button,
+  & > input::-webkit-search-results-button,
+  & > input::-webkit-search-results-decoration,
+  & > input::-webkit-calendar-picker-indicator,
+  & > input::-webkit-inner-spin-button,
+  & > input::-webkit-outer-spin-button,
+  & > input::-webkit-clear-button {
     -webkit-appearance: none;
-    display: none !important;
-    opacity: 0;
-    pointer-events: none;
-    width: 0;
-    height: 0;
+    display: none;
   }
-}
 
-/* A fill class on the element names its own cap; the 6% cascade cap in the
-   utility is for a container reaching a field nobody classed. Both raise
-   `--_fill-cap` rather than writing `--_fill` (P6), which is also what keeps
-   `.soft` < `.solid` -- written as a rewrite the louder name rendered the
-   quieter box, measured and inverted on `.ipt`, `.checkbox` and `.radio`.
-   20% clears `.soft`'s 12% and matches the plate a `.solid` badge draws.
-
-   `.switch` is deliberately absent: its track caps at 40% in its own utility,
-   and an unlayered rule here would overrule that. See model.md#the-bounds-that-survive-and-the-test-for-keeping-one. */
-:is(.text-control, .ipt, .textarea, .select, .input-group).soft {
-  --_fill-cap: 12%;
+  &[type="number"],
+  & > input[type="number"] {
+    appearance: textfield;
+  }
 }
 
-:is(.text-control, .ipt, .textarea, .select, .input-group).solid {
-  --_fill-cap: 20%;
-}
+/* The component seams: rules that exist to beat their own component's
+   `@utility`, placed in `utilities` and winning there on specificity, each at
+   least 0-2-0 against the component's 0-1-0. They write only package privates
+   (`--_fill-cap`, `--_edge-floor`) or a state's intent slots, so nothing a
+   consumer writes competes with them. See
+   docs/internal/model.md#cascade-layers. */
+@layer utilities {
+  /* A fill class on the element names its own cap; the 6% cascade cap in the
+     utility is for a container reaching a field nobody classed. Both raise
+     `--_fill-cap` rather than writing `--_fill` (P6), which is also what keeps
+     `.soft` < `.solid`: written as a rewrite, the louder name renders the
+     quieter box. 20% clears `.soft`'s 12% and matches the plate a `.solid`
+     badge draws.
+
+     `.switch` is deliberately absent: its track caps at 40% in its own utility,
+     and a 0-2-0 rule here would overrule that. See
+     model.md#the-bounds-that-survive-and-the-test-for-keeping-one. */
+  :is(.text-control, .ipt, .textarea, .select, .input-group).soft {
+    --_fill-cap: 12%;
+  }
 
-/* A checked text-control fills with its own intent, so neutral has to drop its
-   20% cap here. No toggle needs this arm any more (see below), but a text
-   input is never `:checked` in practice either -- kept for whatever custom
-   `.text-control` composition does check itself. Declared where the intents
-   are (0-2-0, unlayered): inside `text-control` `.neutral` would overrule it. */
-:is(.text-control, input):checked {
-  --intent-fill-max: 100%;
-}
+  :is(.text-control, .ipt, .textarea, .select, .input-group).solid {
+    --_fill-cap: 20%;
+  }
 
-/* The three toggles read their own component cap (`--_fill-cap`, below) as the
-   ceiling regardless of intent, checked or not -- not just at `:checked`, the
-   way the arm above still works for a hypothetical checked text-control. A
-   neutral fill stops at 20% everywhere else because it is the page's own ink,
-   and a full one reads as a slab on a badge or a card. That reasoning does not
-   hold for a toggle at rest: a neutral checkbox is the common case, most
-   controls carry no intent class at all, and it has to look like a present,
-   interactive box rather than a washed-out one just because nothing colored
-   it. Declared where the intents are, for the reason given above. */
-:is(.checkbox, .radio, .switch) {
-  --intent-fill-max: 100%;
-}
+  /* A checked text-control fills with its own intent, so neutral has to drop its
+     20% cap here. No toggle needs this arm any more (see below), but a text
+     input is never `:checked` in practice either -- kept for whatever custom
+     `.text-control` composition does check itself. A plain rule at 0-2-0 in
+     `utilities`, above every intent class in `components`, so `.neutral` on the
+     element cannot put the cap back. */
+  :is(.text-control, input):checked {
+    --intent-fill-max: 100%;
+  }
 
-/* The element's own `.edgeless` lowers the floor `text-control` raises -- a
-   class on the element is a consumer's request, a class on a container is a
-   cascade. `.checkbox` and `.radio` are absent: an unchecked one is a
-   transparent square/circle with nothing but its line, so the floor is absolute
-   and `.edgeless` on them is published unsupported. `.input-group` is on it
-   because the group is the field boundary now. */
-:is(.text-control, .ipt, .textarea, .select, .switch, .input-group).edgeless {
-  --_edge-floor: 0%;
-}
+  /* The three toggles read their own component cap (`--_fill-cap`, below) as the
+     ceiling regardless of intent, checked or not -- not just at `:checked`, the
+     way the arm above still works for a hypothetical checked text-control. A
+     neutral fill stops at 20% everywhere else because it is the page's own ink,
+     and a full one reads as a slab on a badge or a card. That reasoning does not
+     hold for a toggle at rest: a neutral checkbox is the common case, most
+     controls carry no intent class at all, and it has to look like a present,
+     interactive box rather than a washed-out one just because nothing colored
+     it. Declared where the intents are, for the reason given above. */
+  :is(.checkbox, .radio, .switch) {
+    --intent-fill-max: 100%;
+  }
 
-/* `.switch`'s one exception to the opt-out above: `.ghost` already asks for
-   zero fill, so a `.switch.ghost.edgeless` track has neither a line nor a
-   plate and disappears entirely -- nothing marks its bounds but the floating
-   knob. Every other fill on this component still has something to paint
-   (`.soft`/`.solid`/default all rest above 0%), so only this one pairing
-   needs the floor held up. `.switch.ghost.edgeless` renders identically to
-   `.switch.ghost.edged` now, published unsupported as a distinct look --
-   the same "produces a row indistinguishable from its neighbour" reason
-   `.solid.edgeless`/`.solid.edged` already collapse to one row for. Higher
-   specificity than the rule above (three classes, not an `:is()` of one)
-   wins regardless of source order. */
-.switch.ghost.edgeless {
-  --_edge-floor: 100%;
-}
+  /* The element's own `.edgeless` lowers the floor `text-control` raises -- a
+     class on the element is a consumer's request, a class on a container is a
+     cascade. `.checkbox` and `.radio` are absent: an unchecked one is a
+     transparent square/circle with nothing but its line, so the floor is
+     absolute and `.edgeless` on them is published unsupported. `.input-group`
+     is on it because the group is the field boundary. */
+  :is(.text-control, .ipt, .textarea, .select, .switch, .input-group).edgeless {
+    --_edge-floor: 0%;
+  }
 
-/* An invalid control is destructive whatever else it was asked to be. A plain
-   unlayered rule, not `&[aria-invalid]` inside `@utility`: the intent reset is
-   unlayered too and would overrule a layered version (leaving a grey line and
-   only the hint marking the error). `:is()` gives it 0-2-0 to outrank an intent
-   class. `--intent-hover` is redirected with the others so the line does not go
-   grey under the pointer. The `:has()` arm bridges an inner control's state to
-   an `.input-group`. */
-:is(
-  .text-control,
-  .ipt,
-  .textarea,
-  .select,
-  .checkbox,
-  .radio,
-  .switch,
-  .input-group,
-  input,
-  textarea,
-  select
-)[aria-invalid="true"],
-.input-group:has(> :is(.ipt, .textarea, .select, .text-control, input, textarea, select)[aria-invalid="true"]) {
-  --intent-color: var(--color-destructive);
-  --intent-hover: var(--color-destructive-hover);
-  --intent-border: var(--color-destructive);
+  /* `.switch`'s one exception to the opt-out above: `.ghost` already asks for
+     zero fill, so a `.switch.ghost.edgeless` track would have neither a line
+     nor a plate and disappear -- nothing would mark its bounds but the floating
+     knob. Every other fill on this component has something to paint
+     (`.soft`/`.solid`/default all rest above 0%), so only this pairing needs
+     the floor held up. `.switch.ghost.edgeless` therefore renders identically
+     to `.switch.ghost.edged`, and is published unsupported as a distinct look.
+     Higher specificity than the rule above (three classes, not an `:is()` of
+     one) wins regardless of source order. */
+  .switch.ghost.edgeless {
+    --_edge-floor: 100%;
+  }
+
+  /* An invalid control is destructive whatever else it was asked to be. It sits
+     in `utilities`, above every intent class and both intent resets in
+     `components`, and `:is()` gives it 0-2-0 so it also outranks the control's
+     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
+     inner control's state to an `.input-group`. */
+  :is(
+    .text-control,
+    .ipt,
+    .textarea,
+    .select,
+    .checkbox,
+    .radio,
+    .switch,
+    .input-group,
+    input,
+    textarea,
+    select
+  )[aria-invalid="true"],
+  .input-group:has(> :is(.ipt, .textarea, .select, .text-control, input, textarea, select)[aria-invalid="true"]) {
+    --intent-color: var(--color-destructive);
+    --intent-hover: var(--color-destructive-hover);
+    --intent-border: var(--color-destructive);
+  }
 }
 
 /* A ghost, edged, unelevated text control. */
@@ -309,14 +298,16 @@
   letter-spacing: 0.025em;
 }
 
+/* A hint wraps, so it takes `text-sm`'s leading like the package's other 14px
+   text rather than a line height equal to its size, where wrapped lines touch. */
 @utility hint {
+  @apply text-sm;
+
   color: var(--color-text-secondary);
-  font-size: 0.875rem;
   font-weight: 400;
   letter-spacing: 0.05em;
-  line-height: 100%;
 
-  &.error {
+  &.destructive {
     color: var(--intent-color);
   }
 }
@@ -342,7 +333,7 @@
    gradients rather than masked, because `appearance: none` removes the platform
    arrow and a background image is the only thing a replaced element can paint. */
 @utility select {
-  @apply text-control h-(--control-height,2.5rem) py-2 pr-10 pl-3;
+  @apply text-control h-(--control-height,2.5rem) py-2 ps-3 pe-10;
 
   --_d-fill: 0%;
   --_d-fg-on-fill: 0%;
@@ -363,6 +354,35 @@
     calc(100% - 0.6875rem) center;
   background-repeat: no-repeat;
   background-size: 0.3125rem 0.3125rem;
+
+  /* The chevron sits at the inline end, like the padding kept for it, so a
+     right-to-left select draws it at the left. `background-position` has no
+     logical form, so the mirror is named here. */
+  &:dir(rtl) {
+    background-position:
+      0.6875rem center,
+      1rem center;
+  }
+
+  /* The open list is painted by the browser, over the select's own background
+     when it has one. A ghost select has none, so Chromium falls back to its
+     default popup -- white on Windows -- while the options inherit the select's
+     text, near-white in the dark theme: white on white. The options take the
+     page's ground and text instead, which follow the theme. */
+  & option,
+  & optgroup {
+    background-color: var(--color-background);
+    color: var(--color-text);
+  }
+
+  /* Several rows showing is a list box, not a drop-down: no chevron, the height
+     of its rows, and the chevron's room given back. `--control-height` stays
+     the floor. */
+  &:is([multiple], [size]:not([size="1"])) {
+    height: auto;
+    padding-inline: 0.75rem;
+    background-image: none;
+  }
 }
 
 /* A wrapper that owns the field box so a control can carry adornments beside it
@@ -416,7 +436,7 @@
     --_line-tone: var(--intent-color);
 
     outline: var(--focus-ring-width) solid var(--focus-ring);
-    outline-offset: var(--focus-ring-offset);
+    outline-offset: var(--focus-ring-offset, calc(-1 * var(--ui-border-width, var(--border-width))));
     box-shadow: var(--_focus-stack, var(--_shadow));
   }
 
@@ -462,19 +482,14 @@
 /* The three toggles compose `text-control` for its bounds, not its chrome: the
    edge floor keeps a container's `.edgeless` from erasing the closed silhouette
    (WCAG 1.4.11), and the checked state that pins the fill (see `text-control`'s
-   `:checked` above) lives there. They raise the fill cap to 40% -- the 6% one
+   `:checked` above) lives there. They raise the fill cap to 40%: the 6% cap
    keeps typed text legible and a toggle has none, and 40% is where a resting
    `.ghost` (0%), `.soft`/default (12%), and `.solid` (the cap itself) read as
-   three distinct plates rather than three shades of the same wash, the same
-   separation `.switch` was already measured against. Unclassed rests at
-   `.soft` rather than at the cap: `--_d-fill`/`--_d-fg-on-fill` below name the
-   same pair `.soft` does, so a bare `<input class="checkbox">` reads as the
-   quiet tint the stress-test pass preferred over the louder plate `.solid`
-   asks for -- a consumer still reaches that plate by writing `.solid` itself.
-   `.ghost` used to be unsupported here -- a checked one used to be a mark on
-   nothing -- and is not any more, now that checked reads the same plate
-   whatever the presentation.
-   See model.md#the-bounds-that-survive-and-the-test-for-keeping-one. */
+   three distinct plates rather than three shades of one wash. Unclassed rests
+   at `.soft` rather than at the cap: `--_d-fill`/`--_d-fg-on-fill` below name
+   the same pair `.soft` does, so a bare `<input class="checkbox">` reads as the
+   quiet tint, and a consumer reaches the louder plate by writing `.solid`. See
+   model.md#the-bounds-that-survive-and-the-test-for-keeping-one. */
 @utility checkbox {
   @apply text-control inline-grid size-4 cursor-pointer place-content-center;
 
@@ -485,12 +500,12 @@
   --_d-border: 100%;
   --_d-elevation: 0;
 
-  /* Capped at its own radius: a control radius is sized for a 40px control, and
-     14px of it on a 16px box renders as a circle, which is the one shape a
-     checkbox must not be. A squaring aesthetic still reaches it, through the
-     chip corner first -- `.cyber` squares chips outright, which is also what
-     tells its checkbox from its diamond radio. */
-  border-radius: min(var(--ui-radius-tight, var(--ui-radius, var(--radius-small))), var(--radius-small));
+  /* A chip keeps a small default even under a large control corner, but an
+     explicit tight radius is a complete shape, including elliptical corners. */
+  border-radius: var(
+    --ui-radius-tight,
+    min(var(--ui-radius, var(--ui-corner, var(--radius-small))), var(--radius-small))
+  );
 
   /* Chip geometry: the tight silhouette, and an inset edge no thicker than the
      line the aesthetic draws elsewhere. A 16px box cannot spend four pixels a
@@ -506,7 +521,7 @@
      rather than as an `outline`, so a clipping aesthetic clips it with
      everything else and its own inset focus layer still paints over the top. */
   &:focus-visible {
-    --_shadow: var(--_shadow-parts), 0 0 0 var(--focus-ring-width) var(--focus-ring);
+    --_shadow: var(--_shadow-parts) var(--_halo-layer,), 0 0 0 var(--focus-ring-width) var(--focus-ring);
   }
 
   &::after {
@@ -526,12 +541,39 @@
   &:checked::after {
     @apply opacity-100;
   }
+
+  /* Mixed -- part of a group checked -- takes the checked plate, the same
+     inputs `text-control`'s `:checked` writes, and a dash for its mark. After
+     the checked mark, so a box that is both draws the dash, as the browser's
+     own checkbox does. */
+  &:indeterminate {
+    --ui-fill: 100%;
+    --ui-fg-on-fill: 100%;
+    --_fill-cap: 100%;
+  }
+
+  &:indeterminate::after {
+    @apply opacity-100;
+
+    mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round'><line x1='5' y1='12' x2='19' y2='12'/></svg>");
+    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round'><line x1='5' y1='12' x2='19' y2='12'/></svg>");
+  }
+
+  /* The mark appears without moving under reduced motion, for the entries
+     without the reset; see `box.css`. */
+  @media (prefers-reduced-motion: reduce) {
+    &::after {
+      transition-duration: 0.01ms;
+    }
+  }
 }
 
 /* The same control with a round silhouette and a dot for its mark, and the
    same fill cap raise given on `checkbox`. */
 @utility radio {
-  @apply text-control inline-grid size-4 cursor-pointer place-content-center rounded-full;
+  @apply text-control inline-grid size-4 cursor-pointer place-content-center;
+
+  border-radius: var(--ui-radius-pill, calc(infinity * 1px));
 
   --_d-fill: 12%;
   --_d-fg-on-fill: 0%;
@@ -550,7 +592,7 @@
 
   /* The ring, for the reason given on `checkbox`. */
   &:focus-visible {
-    --_shadow: var(--_shadow-parts), 0 0 0 var(--focus-ring-width) var(--focus-ring);
+    --_shadow: var(--_shadow-parts) var(--_halo-layer,), 0 0 0 var(--focus-ring-width) var(--focus-ring);
   }
 
   &::after {
@@ -565,13 +607,12 @@
   }
 
   /* A checked radio thickens its ring and takes the intent whole on the line.
-     The fill is pinned by `text-control`'s `:checked` now, not left to the
-     presentation -- a filled circle at every checked radio, whatever fill
-     class it carries, rather than the classic ring-and-dot a checked `.soft`
-     used to draw. The dot still takes `box`'s composed foreground, which walks
-     to the contrast tone as the (now always full) plate fills, so it stays
-     readable. `--_line-tone` rather than `--_edge`, so `text-control`'s edge
-     floor still draws the ring under a container's `.edgeless`. */
+     The fill is pinned by `text-control`'s `:checked`, so every checked radio
+     is a filled circle whatever fill class it carries. The dot takes `box`'s
+     composed foreground, which walks to the contrast tone as the (always full)
+     plate fills, so it stays readable. `--_line-tone` rather than `--_edge`, so
+     `text-control`'s edge floor still draws the ring under a container's
+     `.edgeless`. */
   &:checked {
     --_line-tone: var(--intent-color);
 
@@ -584,6 +625,14 @@
   &:checked::after {
     @apply scale-100 opacity-100;
   }
+
+  /* The mark appears without moving under reduced motion, for the entries
+     without the reset; see `box.css`. */
+  @media (prefers-reduced-motion: reduce) {
+    &::after {
+      transition-duration: 0.01ms;
+    }
+  }
 }
 
 /* A2: every dimension derives from the border width `box` resolved, so the knob
@@ -597,24 +646,30 @@
   --_d-border: 100%;
   --_d-elevation: 0;
 
-  /* 40%, measured: at `text-control`'s 6% the three resting fills collapsed to
-     two looks and the switch had to vary its *line* per fill class instead --
-     the one place a fill class decided an edge. 40% separates all three
+  /* 40%, measured: at `text-control`'s 6% the three resting fills collapse to
+     two looks, so the switch would have to vary its *line* per fill class --
+     the one place a fill class would decide an edge. 40% separates all three
      (29/67/144 sRGB steps on the light page, against ~20 for a visible one)
      without reaching a checked track's pinned 100%, so the knob's position
-     still says which. `axes.spec.ts` asserts all three. `checkbox`/`radio`
-     raise their own cap to the same value for the same reason -- a switch does
-     not need a higher one, a track is just the component every toggle's box
-     already was. A cap rather than a resting value, because it answers the
-     cascade case; `--intent-fill-max` (declared where the intents are, above)
-     lifts to 100% for all three toggles so a neutral one reads this cap too,
-     not the 20% ceiling a badge or a card stays under. */
+     still says which; `axes.spec.ts` asserts all three. `checkbox`/`radio`
+     raise their own cap to the same value for the same reason. A cap rather
+     than a resting value, because it answers the cascade case;
+     `--intent-fill-max` (declared where the intents are, above) lifts to 100%
+     for all three toggles so a neutral one reads this cap, not the 20% ceiling
+     a badge or a card stays under. */
   --_fill-cap: 40%;
 
   --switch-height: 1.25rem;
   --switch-width: 2.5rem;
   --switch-gap: 1px;
-  --switch-inset: calc(var(--_width) + var(--switch-gap));
+  /* The edge an aesthetic draws as an inset ring rather than as a border
+     (`.pixel`), present only while `--ui-shadow-edge` is declared -- the idiom
+     `box` uses. That ring paints under the knob, so a knob sized from the
+     border alone covered it: under pixel the border is zero, the knob met the
+     edge, and an unchecked and a checked switch both read as two halves. */
+  --_switch-ring: var(--ui-shadow-edge) var(--_ss);
+  --_switch-offset: calc(var(--_switch-ring, 0px) + var(--switch-gap));
+  --switch-inset: calc(var(--_width) + var(--_switch-offset));
   --switch-knob: calc(var(--switch-height) - var(--switch-inset) * 2);
   --switch-travel: calc(var(--switch-width) - var(--switch-inset) * 2 - var(--switch-knob));
 
@@ -623,7 +678,7 @@
   /* Pill by default; a squaring aesthetic reaches the track and the knob
      together, and an aesthetic with a pill corner of its own reaches both
      through that first. */
-  border-radius: var(--ui-radius-pill, var(--ui-radius, calc(infinity * 1px)));
+  border-radius: var(--ui-radius-pill, var(--ui-radius, var(--ui-corner, calc(infinity * 1px))));
 
   /* Chip geometry, for the reason given on `checkbox`: a 20px track has no more
      room for a thick inset edge than a 16px box does. */
@@ -633,7 +688,7 @@
 
   /* The ring, for the reason given on `checkbox`. */
   &:focus-visible {
-    --_shadow: var(--_shadow-parts), 0 0 0 var(--focus-ring-width) var(--focus-ring);
+    --_shadow: var(--_shadow-parts) var(--_halo-layer,), 0 0 0 var(--focus-ring-width) var(--focus-ring);
   }
 
   &::after {
@@ -644,15 +699,15 @@
        tone as the label beside it. Checked, it takes the mark colour like the
        other two toggles. */
     background-color: var(--color-text-secondary);
-    border-radius: var(--ui-radius-pill, var(--ui-radius, calc(infinity * 1px)));
+    border-radius: var(--ui-radius-pill, var(--ui-radius, var(--ui-corner, calc(infinity * 1px))));
     /* A pseudo-element is not a box: the knob takes the track's corner shape
        itself, so the two stay the same shape. */
     corner-shape: var(--ui-corner-shape, round);
     content: "";
     height: var(--switch-knob);
     width: var(--switch-knob);
-    top: var(--switch-gap);
-    inset-inline-start: var(--switch-gap);
+    top: var(--_switch-offset);
+    inset-inline-start: var(--_switch-offset);
   }
 
   &:checked::after {
@@ -666,6 +721,14 @@
       translate: calc(-1 * var(--switch-travel));
     }
   }
+
+  /* The mark appears without moving under reduced motion, for the entries
+     without the reset; see `box.css`. */
+  @media (prefers-reduced-motion: reduce) {
+    &::after {
+      transition-duration: 0.01ms;
+    }
+  }
 }
 
 @media (forced-colors: active) {
@@ -679,7 +742,14 @@
     transition: none;
   }
 
+  /* The switch knob is the one mark visible while unchecked, and with forced
+     colours off it would keep the package grey on a system Canvas. */
+  .switch::after {
+    background-color: CanvasText;
+  }
+
   .checkbox:checked,
+  .checkbox:indeterminate,
   .radio:checked,
   .switch:checked {
     background-color: Highlight;