@codenhub/styles 0.7.0 → 0.9.0

package/{dist/tw/components/form.css → tw/components/form.rules.css}

@@ -1,7 +1,3 @@
-@reference "tailwindcss";
-@import "../theme.css";
-@reference "../box.css";
-
 /* What all six text controls share: the box, the chrome, and two bounds that
    exist because presentation cascades -- a cascaded-fill cap so a container's
    `.solid` cannot fill a field with its own text colour, and an edge floor so a
@@ -24,6 +20,13 @@
   --_d-fg-on-fill: 0%;
   --_d-border: 100%;
 
+  /* A field's fill is at most a wash, never a plate, so it never holds an ink
+     of its own, even under a `.solid` it or a container names: it prints in
+     the ink it was handed. */
+  --_held-ink: inherit;
+  --_held-on: inherit;
+  --_own-hold: 0%;
+
   /* 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
@@ -37,8 +40,16 @@
 
      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%;
+     including the checked state below that lifts it.
+
+     The element's own fill class names its own cap: `.soft` its 12% whole,
+     `.solid` 20%, which clears `.soft` and matches the plate a `.solid`
+     badge draws. Read from `--_own-fill`, which the class writes and which
+     does not inherit, so the 6% still answers a container's class. Raised
+     here rather than written as a fill (P6), which is what keeps `.soft` <
+     `.solid`. See
+     model.md#the-bounds-that-survive-and-the-test-for-keeping-one. */
+  --_fill-cap: max(6%, min(var(--_own-fill), 20%));
   /* 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
@@ -52,6 +63,13 @@
      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%;
+  /* Someone who asks for more contrast gets the line whole: above 4:1
+     against the page in both themes, where the quiet line is under 3:1. Hover
+     and focus then change nothing in the tone, which is the trade the
+     preference asks for. See docs/accessibility.md. */
+  @media (prefers-contrast: more) {
+    --_line-rest: 100%;
+  }
   /* 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
@@ -70,20 +88,26 @@
      typing goes and a toggle with no silhouette at all (WCAG 1.4.11). That is
      our own cascade producing the broken result, so our own floor answers it.
 
-     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. */
-  --_edge-floor: 100%;
+     An element's own `.edgeless` lowers the floor -- `--_own-edge`, which
+     the class writes and which does not inherit -- because that is a consumer
+     naming what they want rather than a cascade reaching something nobody
+     classed. `.checkbox` and `.radio` restate the floor absolute: they have
+     nothing outside their line, so removing it removes the control, and
+     `.edgeless` on them is published unsupported. `.input-group` keeps the
+     lowering because the group is the field boundary. */
+  --_edge-floor: var(--_own-edge);
 
   @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. */
+     every entry: `/components` carries no reset to say so. Its tracking is
+     typed text's own, `normal`, rather than the page's: body copy's wider
+     tracking is set on `body`, and Preflight's `letter-spacing: inherit` on
+     `/tw` handed it, or a container's, to every field. */
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
+  letter-spacing: normal;
 
   &::placeholder {
     color: var(--color-text-secondary);
@@ -92,16 +116,20 @@
   /* The last exclusion is `.input-group`'s: a group whose control is disabled
      dims as a disabled field does (see `input-group`), so it does not answer
      the pointer either. The list is the group's own, so a `<select>` with a
-     disabled `<option>` is not caught by it. */
-  &:hover:not(
-      :disabled,
-      .disabled,
-      [aria-disabled="true"],
-      [data-disabled],
-      :focus-visible,
-      :has(> :is(.ipt, .textarea, .select, .text-control, input, textarea, select):disabled)
-    ) {
-    --_line-tone: var(--intent-hover);
+     disabled `<option>` is not caught by it. Under `(hover: hover)` as the
+     other hover responses are: a tapped checkbox, select, or group stays in
+     `:hover` without matching `:focus-visible`, and kept the hover line. */
+  @media (hover: hover) {
+    &:hover:not(
+        :disabled,
+        .disabled,
+        [aria-disabled="true"],
+        [data-disabled],
+        :focus-visible,
+        :has(> :is(.ipt, .textarea, .select, .text-control, input, textarea, select):disabled)
+      ) {
+      --_line-tone: var(--intent-hover);
+    }
   }
 
   /* The line moves to the intent on top of the `reset.css` `:focus-visible`
@@ -112,12 +140,115 @@
     --_line-tone: var(--intent-color);
   }
 
+  /* The forced-colours ring, carried so `@apply text-control` draws it: the
+     unlayered block at the end of this file names the package's own classes,
+     and `reset.css` names only typed native fields, so an applied control --
+     an `<input>` with no `type`, a `contenteditable` -- kept the 3px ring in a
+     system colour instead of the 2px `Highlight` one beside a `.text-control`.
+
+     `!important`, as the reset's ring is: the copy lands in whichever layer the
+     consumer applied it in, and an accessibility override has to win over any
+     layered rule there. So it cannot be suppressed and is kept off a control
+     inside an `.input-group`, which draws the field's ring and has the control
+     inside draw none; the offset and the cleared shadow are not important and
+     reach that control too, as the unlayered block's do. */
+  @media (forced-colors: active) {
+    &:focus-visible {
+      outline-offset: 2px;
+      box-shadow: none;
+    }
+
+    &:focus-visible:where(:not(.input-group > *)) {
+      outline: 2px solid Highlight !important;
+    }
+  }
+
+  /* Everything below until `:checked` is keyed on the class, and lives inside
+     the utility so `@apply text-control` carries it: `@apply` copies this body
+     with the consumer's own selector, and a rule naming `.text-control` from
+     outside it never reaches their element. See model.md#the-composition-api.
+
+     The neutral reset, for an element that carries none of the package's own
+     text-control classes -- a consumer's `.my-control { @apply text-control }`.
+     Those classes keep the reset in `intent.css`, in `components`; this one
+     lands in `utilities` and would beat a consumer's own intent class declared
+     in `components` there. It writes the values that reset and the control
+     line do, so a field inside a `.card.success` stays neutral and draws the
+     3:1 control line rather than `--color-border`.
+
+     Zero specificity, and never on an element with an intent class, so it
+     cannot overrule one: the intent class is excluded, and every rule that
+     writes an intent slot in `utilities` -- `aria-invalid` below, the
+     `:checked` arm, `.input-group`'s inherited `--intent-strong` -- carries at
+     least 0-1-0. `.neutral` is not excluded, so `.neutral` takes the control
+     line here as it does on `.ipt.neutral`. */
+  /* In `families`, beside the intent classes: applied with an intent --
+     `@apply text-control info` -- the reset and the intent land in one layer, where the
+     intent's 0-1-0 beats this. Left in the rule's own layer it would beat
+     every intent applied with it. */
+  @layer families {
+    :where(
+      &:not(
+        .text-control,
+        .ipt,
+        .textarea,
+        .select,
+        .input-group,
+        .checkbox,
+        .radio,
+        .switch,
+        .primary,
+        .secondary,
+        .success,
+        .warning,
+        .destructive,
+        .info
+      )
+    ) {
+      --intent-color: var(--color-text);
+      --intent-contrast: var(--color-text-contrast);
+      --intent-hover: var(--color-text-hover);
+      --intent-strong: var(--color-text-strong);
+      --intent-subtle: var(--color-surface);
+      --intent-border: var(--ui-control-ink, var(--ui-ink, var(--color-control-border)));
+      --intent-fill-max: 20%;
+    }
+  }
+
+  /* The component seams: rules that beat their own component's body on
+     specificity, 0-2-0 against 0-1-0, in `utilities`. They write only package
+     privates or a state's intent slots, so nothing a consumer writes competes
+     with them. */
+
+  /* An invalid control is destructive whatever else it was asked to be. In
+     `utilities` above every intent class in `utilities.families` and both
+     resets in `components`, and
+     0-2-0 so it also outranks the control's own body and the reset above; 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, and `--intent-strong` so typed text is destructive too.
+     `--intent-contrast` and `--intent-subtle` go with them, so an invalid
+     toggle is a destructive one in every part: left neutral, a checked invalid
+     checkbox in the dark theme drew the near-black neutral mark on a red plate
+     (3.28:1). The bare elements and the `.input-group` bridge are below the
+     utility, since they name no class `@apply` could carry. */
+  &[aria-invalid="true"] {
+    --intent-color: var(--color-destructive);
+    --intent-contrast: var(--color-destructive-contrast);
+    --intent-hover: var(--color-destructive-hover);
+    --intent-border: var(--color-destructive);
+    --intent-strong: var(--color-destructive-strong);
+    --intent-subtle: var(--color-destructive-subtle);
+  }
+
   /* 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
+     0-2-0, above the fill classes in `utilities.families`, 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
@@ -178,41 +309,41 @@
   }
 }
 
-/* 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
+/* The seams that name no class `@apply text-control` could carry: bare
+   elements, the toggles' shared lift, and one component's own combination.
+   Placed in `utilities` and winning there on specificity, like the seams inside
+   the utility. They write only package privates 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%;
-  }
-
-  :is(.text-control, .ipt, .textarea, .select, .input-group).solid {
-    --_fill-cap: 20%;
-  }
-
   /* 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. */
+     `.text-control` composition does check itself; only an `<input>` can be,
+     so the `input` arm reaches an `@apply text-control` one too. A plain rule
+     at 0-2-0 in `utilities`, above every intent class in
+     `utilities.families`, so
+     `.neutral` on the element cannot put the cap back. */
   :is(.text-control, input):checked {
     --intent-fill-max: 100%;
   }
 
+  /* A bare toggle's "on" plate. `/native` reaches the toggles through `@apply`
+     in `base`, where their `:checked` and `:indeterminate` pins lose to
+     `.ghost` and `.soft` in `utilities`, so a checked quiet checkbox kept its
+     resting plate. The class route already wins on specificity in this layer;
+     this repeats its values for the bare element, with the neutral cap
+     `native.css`'s reset puts back, which the arm above lifts only when
+     checked. Not `radio:indeterminate`, which every radio of a group with
+     nothing chosen matches. */
+  input:is([type="checkbox"], [type="radio"]):checked,
+  input[type="checkbox"]:indeterminate {
+    --intent-fill-max: 100%;
+    --ui-fill: 100%;
+    --ui-fg-on-fill: 100%;
+    --_fill-cap: 100%;
+  }
+
   /* 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
@@ -222,60 +353,28 @@
      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%;
-  }
-
-  /* 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%;
-  }
-
-  /* `.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, and `--intent-strong` so typed
-     text is destructive too. The `:has()` arm bridges an
-     inner control's state to an `.input-group`. */
-  :is(
-    .text-control,
-    .ipt,
-    .textarea,
-    .select,
-    .checkbox,
-    .radio,
-    .switch,
-    .input-group,
-    input,
-    textarea,
-    select
-  )[aria-invalid="true"],
+  /* `.switch`'s one exception to the `.edgeless` opt-out in `text-control`:
+     `.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. Three classes against the opt-out's two, so it wins
+     regardless of source order. */
+
+  /* `text-control`'s invalid state, for a bare field no class reaches and for
+     the `.input-group` whose control is invalid. The values are the
+     utility's; see the state there. */
+  :is(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-contrast: var(--color-destructive-contrast);
     --intent-hover: var(--color-destructive-hover);
     --intent-border: var(--color-destructive);
     --intent-strong: var(--color-destructive-strong);
+    --intent-subtle: var(--color-destructive-subtle);
   }
 }
 
@@ -296,21 +395,48 @@
      4.5:1 there for several intents. On the three text inputs, not
      `text-control`, because a toggle's mark takes `box`'s composed `--_fg`
      instead. See docs/internal/model.md#intent. */
-  --_fg: var(--intent-strong);
-
-  min-height: var(--control-height);
+  --_fg-own: var(--intent-strong);
+
+  /* The button's size steps, so an `.ipt.sm` and a `.btn.sm` line up in a row:
+     the same 2rem and 3rem heights, the same text sizes, and the same
+     `--_scale-size` step `box` scales the corner by. Flags, read here, for the
+     reason `btn` gives. */
+  --_sm-h: var(--_size-sm) 2rem;
+  --_lg-h: var(--_size-lg) 3rem;
+  --_sm-px: var(--_size-sm) 0.625rem;
+  --_lg-px: var(--_size-lg) 1rem;
+  --_sm-py: var(--_size-sm) 0.25rem;
+  --_lg-py: var(--_size-lg) 0.625rem;
+  --_sm-text: var(--_size-sm) var(--text-sm);
+  --_lg-text: var(--_size-lg) 1.0625rem;
+  --_sm-leading: var(--_size-sm) var(--text-sm--line-height);
+  --_sm-scale: var(--_size-sm) 0.75;
+  --_lg-scale: var(--_size-lg) 1.25;
+  --_scale-size: var(--_sm-scale, var(--_lg-scale));
+
+  height: var(--_sm-h, var(--_lg-h, var(--control-height, 2.5rem)));
+  min-height: var(--_sm-h, var(--_lg-h, var(--control-height)));
+  padding-inline: var(--_sm-px, var(--_lg-px, 0.75rem));
+  padding-block: var(--_sm-py, var(--_lg-py, 0.5rem));
+  font-size: var(--_sm-text, var(--_lg-text, inherit));
+  line-height: var(--_sm-leading, inherit);
 }
 
 @utility field {
-  --field-gap: 0.35rem;
+  @apply flex w-full flex-col;
 
-  @apply flex w-full flex-col gap-(--field-gap);
+  /* Public, read with its default, so a value on a form reaches every field. */
+  gap: var(--field-gap, 0.35rem);
 }
 
 @utility label {
-  font-size: 1rem;
-  font-weight: 500;
-  letter-spacing: 0.025em;
+  /* In `:where()`: a label's type is a default, and Tailwind emits this rule
+     after its own type utilities, so at 0-1-0 `.label.text-sm` stayed 16px. */
+  :where(&) {
+    font-size: 1rem;
+    font-weight: 500;
+    letter-spacing: 0.025em;
+  }
 }
 
 /* A hint wraps, so it takes `text-sm`'s leading like the package's other 14px
@@ -322,8 +448,15 @@
   font-weight: 400;
   letter-spacing: 0.05em;
 
-  &.destructive {
-    color: var(--intent-color);
+  /* A named intent prints its readable tone, `--intent-strong`, the colour
+     typed text takes: a hint is text on the page, and `--intent-color` is a
+     fill colour that reads below 4.5:1 there (destructive measured 3.28:1 on
+     the dark page). No intent, or `.neutral`, keeps the secondary grey that
+     marks a hint as helper text. A hint is not a component, so the intent
+     reset does not reach it and an intent on a container does not recolour
+     it; only a class on the hint itself does. */
+  &:is(.primary, .secondary, .success, .warning, .destructive, .info) {
+    color: var(--intent-strong);
   }
 }
 
@@ -341,9 +474,27 @@
      4.5:1 there for several intents. On the three text inputs, not
      `text-control`, because a toggle's mark takes `box`'s composed `--_fg`
      instead. See docs/internal/model.md#intent. */
-  --_fg: var(--intent-strong);
+  --_fg-own: var(--intent-strong);
 
   @apply min-h-28 resize-y;
+
+  /* The size steps `ipt` takes, for its text, padding, and corner. Its
+     height is its rows, so it keeps its own floor. */
+  --_sm-px: var(--_size-sm) 0.625rem;
+  --_lg-px: var(--_size-lg) 1rem;
+  --_sm-py: var(--_size-sm) 0.25rem;
+  --_lg-py: var(--_size-lg) 0.625rem;
+  --_sm-text: var(--_size-sm) var(--text-sm);
+  --_lg-text: var(--_size-lg) 1.0625rem;
+  --_sm-leading: var(--_size-sm) var(--text-sm--line-height);
+  --_sm-scale: var(--_size-sm) 0.75;
+  --_lg-scale: var(--_size-lg) 1.25;
+  --_scale-size: var(--_sm-scale, var(--_lg-scale));
+
+  padding-inline: var(--_sm-px, var(--_lg-px, 0.75rem));
+  padding-block: var(--_sm-py, var(--_lg-py, 0.5rem));
+  font-size: var(--_sm-text, var(--_lg-text, inherit));
+  line-height: var(--_sm-leading, inherit);
 }
 
 /* The same control with a native list behind it. The chevron is drawn from two
@@ -362,7 +513,7 @@
      4.5:1 there for several intents. On the three text inputs, not
      `text-control`, because a toggle's mark takes `box`'s composed `--_fg`
      instead. See docs/internal/model.md#intent. */
-  --_fg: var(--intent-strong);
+  --_fg-own: var(--intent-strong);
 
   min-height: var(--control-height);
   background-image:
@@ -374,6 +525,27 @@
   background-repeat: no-repeat;
   background-size: 0.3125rem 0.3125rem;
 
+  /* The size steps `ipt` takes. The inline end keeps the chevron's room. */
+  --_sm-h: var(--_size-sm) 2rem;
+  --_lg-h: var(--_size-lg) 3rem;
+  --_sm-px: var(--_size-sm) 0.625rem;
+  --_lg-px: var(--_size-lg) 1rem;
+  --_sm-py: var(--_size-sm) 0.25rem;
+  --_lg-py: var(--_size-lg) 0.625rem;
+  --_sm-text: var(--_size-sm) var(--text-sm);
+  --_lg-text: var(--_size-lg) 1.0625rem;
+  --_sm-leading: var(--_size-sm) var(--text-sm--line-height);
+  --_sm-scale: var(--_size-sm) 0.75;
+  --_lg-scale: var(--_size-lg) 1.25;
+  --_scale-size: var(--_sm-scale, var(--_lg-scale));
+
+  height: var(--_sm-h, var(--_lg-h, var(--control-height, 2.5rem)));
+  min-height: var(--_sm-h, var(--_lg-h, var(--control-height)));
+  padding-inline-start: var(--_sm-px, var(--_lg-px, 0.75rem));
+  padding-block: var(--_sm-py, var(--_lg-py, 0.5rem));
+  font-size: var(--_sm-text, var(--_lg-text, inherit));
+  line-height: var(--_sm-leading, inherit);
+
   /* 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. */
@@ -402,6 +574,14 @@
     padding-inline: 0.75rem;
     background-image: none;
   }
+
+  /* Forced colours, carried for an applied drop-down: the platform's arrow, for
+     the reason the unlayered copy at the foot of this file gives. */
+  @media (forced-colors: active) {
+    &:not([multiple], [size]:not([size="1"])) {
+      appearance: auto;
+    }
+  }
 }
 
 /* A wrapper that owns the field box so a control can carry adornments beside it
@@ -422,7 +602,7 @@
    breathing room a distinct glyph needs, but a text affix meant to glue onto the
    value -- a URL host, a currency symbol, a unit -- reads the same gap as a
    stray space breaking the two apart. A consumer sets `--input-group-gap: 0` on
-   their own `.input-group` for a flush affix; the default stays the icon-tuned
+   the group or an ancestor for a flush affix; the default stays the icon-tuned
    0.5rem so every existing icon composition is unchanged. */
 @utility input-group {
   @apply text-control flex w-full items-center;
@@ -436,12 +616,28 @@
   --_d-border: 100%;
   --_d-elevation: 0;
 
-  --input-group-gap: 0.5rem;
-  --input-group-pad: 0.75rem;
-
-  min-height: var(--control-height);
-  gap: var(--input-group-gap);
-  padding-inline: var(--input-group-pad);
+  /* The size steps `ipt` takes, on the group rather than the control inside:
+     the group is the field, and the control and its adornments inherit the
+     text size. The control's height is the group's (below), so the group's
+     floor is its height. */
+  --_sm-h: var(--_size-sm) 2rem;
+  --_lg-h: var(--_size-lg) 3rem;
+  --_sm-px: var(--_size-sm) 0.625rem;
+  --_lg-px: var(--_size-lg) 1rem;
+  --_sm-text: var(--_size-sm) var(--text-sm);
+  --_lg-text: var(--_size-lg) 1.0625rem;
+  --_sm-leading: var(--_size-sm) var(--text-sm--line-height);
+  --_sm-scale: var(--_size-sm) 0.75;
+  --_lg-scale: var(--_size-lg) 1.25;
+  --_scale-size: var(--_sm-scale, var(--_lg-scale));
+
+  min-height: var(--_sm-h, var(--_lg-h, var(--control-height)));
+  /* Public, read with their defaults, so a value set on any ancestor reaches
+     the group. */
+  gap: var(--input-group-gap, 0.5rem);
+  padding-inline: var(--input-group-padding, var(--_sm-px, var(--_lg-px, 0.75rem)));
+  font-size: var(--_sm-text, var(--_lg-text, inherit));
+  line-height: var(--_sm-leading, inherit);
 
   /* The focus ring the wrapper cannot get from `:focus-visible` -- a `<div>` is
      not focusable, and `:has(:focus-visible)` is unreliable because the inner
@@ -454,27 +650,92 @@
   &:focus-within {
     --_line-tone: var(--intent-color);
 
-    outline: var(--focus-ring-width) solid var(--focus-ring);
+    outline: var(--focus-ring-width) solid var(--focus-ring, color-mix(in srgb, var(--color-primary) 64%, transparent));
     outline-offset: var(--focus-ring-offset, calc(-1 * var(--ui-border-width, var(--border-width))));
-    box-shadow: var(--_focus-stack, var(--_shadow));
+    box-shadow: var(--_focus-stack, var(--_shadow), inset 0 0 0 2px var(--_focus-gap));
+  }
+
+  /* Focus on anything but the field -- the clear button the docs show, a
+     toggle -- is focus on that control, so it keeps its own ring and the group
+     drops the field's. Enter presses a focused button rather than typing into
+     the field, and two rings around one target say neither. The line keeps its
+     focus tone: something in the field still has focus. A separate rule rather
+     than a `:not(:has())` on the ring above, so an engine without `:has()`
+     drops only this rule and keeps the group's ring. */
+  &:has(> :not(.ipt, .textarea, .select, .text-control, input, textarea, select):focus) {
+    outline: none;
+    box-shadow: var(--_shadow);
   }
 
   /* A disabled control inside dims the whole group. `.input-group.disabled` and
      the aria/data spellings are already handled by `box`'s own rule, carried in
      by `text-control`; this is the child-driven case a wrapper cannot see
      without `:has()`. */
-  &:has(> :is(.ipt, .textarea, .select, .text-control, input, textarea, select):disabled) {
+  &:has(
+    > :is(.ipt, .textarea, .select, .text-control, input, textarea, select):where(
+        :not(
+          .checkbox,
+          .radio,
+          .switch,
+          .btn,
+          [type="checkbox"],
+          [type="radio"],
+          [type="button"],
+          [type="submit"],
+          [type="reset"],
+          [type="image"],
+          [type="range"],
+          [type="color"],
+          [type="file"],
+          [type="hidden"]
+        )
+      ):disabled
+  ) {
     @apply cursor-not-allowed;
 
     opacity: 0.58;
   }
 
-  /* The control goes flush: the group drew the box, so the control paints no
+  /* "The control inside" is a text field. Every selector below that names it
+     ends in the same `:where(:not(...))`, which takes out the toggles, the
+     button-like inputs, and the inputs that draw their own widget: matched,
+     a checkbox in a group lost its box and its line, and stretched like a
+     field. In `:where()`, so the exclusion adds no specificity.
+
+     The control goes flush: the group drew the box, so the control paints no
      fill, no line and no ring, and gives its horizontal padding to the group.
      `border: none` rather than a transparent 1px, so the control does not add
-     its own width inside the group. */
-  & > :is(.ipt, .textarea, .select, .text-control, input, textarea, select) {
+     its own width inside the group.
+
+     The typed text is the one paint the control keeps, and it is the group's
+     intent: the control resets its intent to neutral at its own root, like
+     every component, so an `.input-group.success` drew a success line around
+     neutral text. `--intent-strong` is the only slot the text reads, so it
+     alone inherits, and an invalid group -- by its own `aria-invalid` or the
+     control's, through the `:has()` arm -- prints destructive text the way a
+     lone invalid field does. The group owns the field, so an intent class on
+     the control inside does not colour its text. */
+  &
+    > :is(.ipt, .textarea, .select, .text-control, input, textarea, select):where(
+      :not(
+        .checkbox,
+        .radio,
+        .switch,
+        .btn,
+        [type="checkbox"],
+        [type="radio"],
+        [type="button"],
+        [type="submit"],
+        [type="reset"],
+        [type="image"],
+        [type="range"],
+        [type="color"],
+        [type="file"],
+        [type="hidden"]
+      )
+    ) {
     --_fill-cap: 0%;
+    --intent-strong: inherit;
 
     flex: 1 1 auto;
     min-width: 0;
@@ -487,6 +748,46 @@
       outline: none;
       box-shadow: none;
     }
+
+    /* The group dims for a disabled control, so the control does not dim
+       again inside it: opacity multiplies, and the two 0.58s left the value
+       at about 0.34. Only `:disabled`, the state the group's `:has()` above
+       bridges; a control disabled by class or aria dims itself as a lone one
+       does, because the group does not dim for it. */
+    &:disabled {
+      opacity: 1;
+    }
+  }
+
+  /* A one-row control gives its height to the group too. Keeping its own
+     `--control-height` inside a box that draws its own line made the group
+     42px next to 40px fields and buttons. It stretches to the group's inside
+     instead, with no block padding, so the group is the control height and the
+     whole of its inside still takes a click. A textarea and a list box keep
+     their own height: their rows are the height. */
+  &
+    > :is(.ipt, .select, input, select):not([multiple], [size]:not([size="1"])):where(
+      :not(
+        .checkbox,
+        .radio,
+        .switch,
+        .btn,
+        [type="checkbox"],
+        [type="radio"],
+        [type="button"],
+        [type="submit"],
+        [type="reset"],
+        [type="image"],
+        [type="range"],
+        [type="color"],
+        [type="file"],
+        [type="hidden"]
+      )
+    ) {
+    align-self: stretch;
+    height: auto;
+    min-height: 0;
+    padding-block: 0;
   }
 
   /* Except a drop-down's end: its chevron is the select's own background,
@@ -498,12 +799,45 @@
   }
 
   /* Anything else in the group -- an icon, affix text -- does not stretch and
-     reads as secondary. A nested `<button>` keeps its own styling. */
-  & > :not(.ipt, .textarea, .select, .text-control, input, textarea, select, button) {
+     reads as secondary. A button, a link button, and any `<input>` keep their
+     own styling. Zero specificity: it is a default for unstyled content, and at
+     the 0-2-0 it had, a badge or a text utility on the adornment lost its
+     colour to this grey. */
+  :where(& > :not(.ipt, .textarea, .select, .text-control, input, textarea, select, button, .btn)) {
     @apply inline-flex flex-none items-center;
 
     color: var(--color-text-secondary);
   }
+
+  /* The group is destructive when its control is invalid. Carried here for an
+     applied group; the package's own keeps the plain rule above the utility. */
+  &:has(
+    > :is(.ipt, .textarea, .select, .text-control, input, textarea, select):where(
+        :not(
+          .checkbox,
+          .radio,
+          .switch,
+          .btn,
+          [type="checkbox"],
+          [type="radio"],
+          [type="button"],
+          [type="submit"],
+          [type="reset"],
+          [type="image"],
+          [type="range"],
+          [type="color"],
+          [type="file"],
+          [type="hidden"]
+        )
+      )[aria-invalid="true"]
+  ) {
+    --intent-color: var(--color-destructive);
+    --intent-contrast: var(--color-destructive-contrast);
+    --intent-hover: var(--color-destructive-hover);
+    --intent-border: var(--color-destructive);
+    --intent-strong: var(--color-destructive-strong);
+    --intent-subtle: var(--color-destructive-subtle);
+  }
 }
 
 /* The three toggles compose `text-control` for its bounds, not its chrome: the
@@ -523,6 +857,8 @@
   --_d-fill: 12%;
   --_d-fg-on-fill: 0%;
   --_fill-cap: 40%;
+  /* Absolute, whatever the element's own edge class: see `text-control`. */
+  --_edge-floor: 100%;
   --_line-rest: 100%;
   --_d-border: 100%;
   --_d-elevation: 0;
@@ -548,7 +884,9 @@
      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) var(--_halo-layer,), 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, color-mix(in srgb, var(--color-primary) 64%, transparent));
   }
 
   &::after {
@@ -593,6 +931,33 @@
       transition-duration: 0.01ms;
     }
   }
+
+  /* The toggle's cap is its own (`--_fill-cap`), whatever the intent: a
+     neutral fill stops at 20% elsewhere because it is the page's ink, and a
+     neutral checkbox is the common case and has to look like a present,
+     interactive box. In the body so `@apply` carries it; it beats the intent
+     classes from here as it did as a plain rule in `utilities`. */
+  --intent-fill-max: 100%;
+
+  /* Forced colours, carried for an applied toggle. The package's own classes
+     also keep the unlayered copy at the foot of this file, which beats every
+     layered rule. */
+  @media (forced-colors: active) {
+    forced-color-adjust: none;
+    background-color: Canvas;
+    border-color: CanvasText;
+    transition: none;
+
+    &:checked,
+    &:indeterminate {
+      background-color: Highlight;
+      border-color: Highlight;
+
+      &::after {
+        background-color: HighlightText;
+      }
+    }
+  }
 }
 
 /* The same control with a round silhouette and a dot for its mark, and the
@@ -605,6 +970,8 @@
   --_d-fill: 12%;
   --_d-fg-on-fill: 0%;
   --_fill-cap: 40%;
+  /* Absolute, whatever the element's own edge class: see `text-control`. */
+  --_edge-floor: 100%;
   --_line-rest: 100%;
   --_d-border: 100%;
   --_d-elevation: 0;
@@ -619,7 +986,9 @@
 
   /* The ring, for the reason given on `checkbox`. */
   &:focus-visible {
-    --_shadow: var(--_shadow-parts) var(--_halo-layer,), 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, color-mix(in srgb, var(--color-primary) 64%, transparent));
   }
 
   &::after {
@@ -660,6 +1029,32 @@
       transition-duration: 0.01ms;
     }
   }
+
+  /* The toggle's cap is its own (`--_fill-cap`), whatever the intent: a
+     neutral fill stops at 20% elsewhere because it is the page's ink, and a
+     neutral checkbox is the common case and has to look like a present,
+     interactive box. In the body so `@apply` carries it; it beats the intent
+     classes from here as it did as a plain rule in `utilities`. */
+  --intent-fill-max: 100%;
+
+  /* Forced colours, carried for an applied toggle. The package's own classes
+     also keep the unlayered copy at the foot of this file, which beats every
+     layered rule. */
+  @media (forced-colors: active) {
+    forced-color-adjust: none;
+    background-color: Canvas;
+    border-color: CanvasText;
+    transition: none;
+
+    &:checked {
+      background-color: Highlight;
+      border-color: Highlight;
+
+      &::after {
+        background-color: HighlightText;
+      }
+    }
+  }
 }
 
 /* A2: every dimension derives from the border width `box` resolved, so the knob
@@ -686,22 +1081,24 @@
      a badge or a card stays under. */
   --_fill-cap: 40%;
 
-  --switch-height: 1.25rem;
-  --switch-width: 2.5rem;
-  --switch-gap: 1px;
+  /* The track's size is public, read with its default, so a value set on any
+     ancestor reaches the switch; the knob is derived from it. */
+  --_switch-height: var(--switch-height, 1.25rem);
+  --_switch-width: var(--switch-width, 2.5rem);
+  --_switch-gap: 1px;
   /* 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));
+  --_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));
 
-  height: var(--switch-height);
-  width: var(--switch-width);
+  height: var(--_switch-height);
+  width: var(--_switch-width);
   /* 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. */
@@ -715,7 +1112,9 @@
 
   /* The ring, for the reason given on `checkbox`. */
   &:focus-visible {
-    --_shadow: var(--_shadow-parts) var(--_halo-layer,), 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, color-mix(in srgb, var(--color-primary) 64%, transparent));
   }
 
   &::after {
@@ -731,8 +1130,8 @@
        itself, so the two stay the same shape. */
     corner-shape: var(--ui-corner-shape, round);
     content: "";
-    height: var(--switch-knob);
-    width: var(--switch-knob);
+    height: var(--_switch-knob);
+    width: var(--_switch-knob);
     top: var(--_switch-offset);
     inset-inline-start: var(--_switch-offset);
   }
@@ -742,14 +1141,14 @@
     /* translate has no logical form, so the checked travel is named as a
        physical x offset and mirrored under :dir(rtl) to travel toward the
        opposite edge, matching the inset-inline-start resting position. */
-    translate: var(--switch-travel);
+    translate: var(--_switch-travel);
   }
 
   /* Direction sits on the control, ahead of the pseudo-element: nested as
      `:dir(rtl) &` inside `&:checked::after`, `&` carries `::after`, which
      cannot appear inside `:is()`, and the emitted rule matched nothing. */
   &:checked:dir(rtl)::after {
-    translate: calc(-1 * var(--switch-travel));
+    translate: calc(-1 * var(--_switch-travel));
   }
 
   /* The mark appears without moving under reduced motion, for the entries
@@ -759,6 +1158,43 @@
       transition-duration: 0.01ms;
     }
   }
+
+  /* `.ghost.edgeless` would leave the track neither a line nor a plate, so the
+     floor is held up: three classes against the opt-out's two in
+     `text-control`. Published unsupported as a distinct look. */
+  &.ghost.edgeless {
+    --_edge-floor: 100%;
+  }
+
+  /* The toggle's cap is its own (`--_fill-cap`), whatever the intent: a
+     neutral fill stops at 20% elsewhere because it is the page's ink, and a
+     neutral checkbox is the common case and has to look like a present,
+     interactive box. In the body so `@apply` carries it; it beats the intent
+     classes from here as it did as a plain rule in `utilities`. */
+  --intent-fill-max: 100%;
+
+  /* Forced colours, carried for an applied toggle. The package's own classes
+     also keep the unlayered copy at the foot of this file, which beats every
+     layered rule. */
+  @media (forced-colors: active) {
+    forced-color-adjust: none;
+    background-color: Canvas;
+    border-color: CanvasText;
+    transition: none;
+
+    &::after {
+      background-color: CanvasText;
+    }
+
+    &:checked {
+      background-color: Highlight;
+      border-color: Highlight;
+
+      &::after {
+        background-color: HighlightText;
+      }
+    }
+  }
 }
 
 @media (forced-colors: active) {
@@ -810,4 +1246,11 @@
     outline-offset: 2px;
     box-shadow: none;
   }
+
+  /* The group draws the field's ring, so the control inside draws none here
+     either: this block is unlayered, and the ring above beat the group's
+     layered suppression and drew a second ring inside the group's. */
+  .input-group > :is(.ipt, .textarea, .select, .text-control, input, textarea, select):focus-visible {
+    outline: none;
+  }
 }