@codenhub/styles 0.4.0 → 0.5.0

package/dist/tw/components/form.css

@@ -35,44 +35,12 @@
      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. */
+     written for.
+
+     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
@@ -87,9 +55,11 @@
      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.
+     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.
 
      Written as a single `--_line` that states overwrote, a hovered or focused
      control lost the blend along with the tone, because replacing a composed
@@ -133,14 +103,18 @@
     --_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
+  /* R8, 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 (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). 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 fill used to be pinned 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:
@@ -154,20 +128,19 @@
      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. */
+     The ink is declared alongside the fill: 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 setting the
+     fill without 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. `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. */
@@ -187,94 +160,104 @@
   }
 }
 
-/* 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%;
-}
+/* 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. They used to be unlayered, which stopped
+   working once `/components` and `/native` put the components in `utilities`
+   too. 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 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 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%;
-}
+  :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. 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%;
-}
+  /* 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 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%;
-}
+  /* 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%;
+  }
 
-/* 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 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%;
+  }
 
-/* `.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%;
-}
+  /* `.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%;
+  }
 
-/* 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);
+  /* 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. */
@@ -316,7 +299,7 @@
   letter-spacing: 0.05em;
   line-height: 100%;
 
-  &.error {
+  &.destructive {
     color: var(--intent-color);
   }
 }
@@ -363,6 +346,17 @@
     calc(100% - 0.6875rem) center;
   background-repeat: no-repeat;
   background-size: 0.3125rem 0.3125rem;
+
+  /* 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);
+  }
 }
 
 /* A wrapper that owns the field box so a control can carry adornments beside it
@@ -485,12 +479,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 +500,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 {
@@ -531,7 +525,9 @@
 /* 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 +546,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 {
@@ -623,7 +619,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 +629,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,7 +640,7 @@
        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);

package/dist/tw/components/index.css

@@ -1,8 +1,20 @@
+/* The layer map, stated before any import uses a layer -- see `theme.css`.
+   Tailwind's utilities are imported into `utilities` the way
+   `tailwindcss/index.css` does it, so every component lands there on this
+   entrypoint and on `/native` too, exactly where `.` already puts them. Without
+   `layer(utilities)` the CLI emitted them unlayered here, and they beat every
+   consumer rule on these two entries alone. */
+@layer theme, base, components, utilities;
+
+/* The theme before `@reference "tailwindcss"`, as `native.css` has it:
+   Tailwind writes the theme's variables at the first `@theme` it meets, and
+   after the reference that is Tailwind's own reference-only one. See
+   docs/internal/model.md (Which files import the theme). */
+@import "../theme.css";
 @reference "tailwindcss";
-@import "tailwindcss/utilities.css";
+@import "tailwindcss/utilities.css" layer(utilities);
 /* Everything that is not `src/` -- see the note in `index.css`. Keeps a class
    name in a docs code fence from shipping as a real rule in `dist/components.css`. */
-@import "../theme.css";
 @import "../typography.css";
 @import "../box.css";
 @import "./button.css";
@@ -25,4 +37,4 @@
    makes the emission deliberate; the composition-body check in
    `exports.test.ts` fails the build if one is dropped. `text-control` and
    `surface` are also documented as consumer-usable on their own. */
-@source inline("box box-hover box-active loader-mask text-control surface input-group text-display text-title-lg text-title text-title-sm text-label-lg text-label text-body btn field label hint ipt email password url tel search date datetime month week time icon left right textarea select checkbox radio switch alert alert-icon badge skeleton progress tooltip tooltip-bubble tooltip-icon card panel interactive flush compact spacious neutral solid soft ghost edged edgeless flat raised floating loader");
+@source inline("box box-hover box-active loader-mask text-control surface input-group text-display text-title-lg text-title text-title-sm text-label-lg text-label text-body btn field label hint ipt email password url tel search date datetime month week time icon left right textarea select checkbox radio switch alert alert-icon badge skeleton progress tooltip tooltip-bubble tooltip-icon card panel interactive flush neutral solid soft ghost edged edgeless flat raised floating loader");

package/dist/tw/components/loader.css

@@ -1,10 +1,15 @@
-@reference "tailwindcss";
 @source inline("loader dots-wave dots-fade dots-queue dots-rotate dots-grow dots-grow-alternate dot-bounce bars-wave pulse-ring");
 
 /* The mask machinery, shared by the loader and by any component that shows a
    spinner of its own. Artwork is a mask rather than an image so it takes its
    colour from whatever paints behind it, which is the whole indicator contract:
-   an intent class recolours the loader and nothing else has to know. */
+   an intent class recolours the loader and nothing else has to know.
+
+   Each artwork's closing `style` tag is percent-encoded. A stylesheet pasted
+   into an HTML `<style>` element ends at the first literal close tag, so one
+   left raw would silently drop every rule after it; the data URI decodes the
+   escape before the SVG is parsed, so the artwork is unchanged. The exports
+   test fails a build that ships the raw sequence. */
 @utility loader-mask {
   mask-image: var(--loader-art);
   -webkit-mask-image: var(--loader-art);
@@ -16,56 +21,60 @@
   -webkit-mask-position: center;
 }
 
-.loader:not(
-  :where(
-    .dots-wave,
-    .dots-fade,
-    .dots-queue,
-    .dots-rotate,
-    .dots-grow,
-    .dots-grow-alternate,
-    .dot-bounce,
-    .bars-wave,
-    .pulse-ring
-  )
-) {
-  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>.spinner_V8m1{transform-origin:center;animation:spinner_zKoa 2s linear infinite}.spinner_V8m1 circle{stroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite}@keyframes spinner_zKoa{100%{transform:rotate(360deg)}}@keyframes spinner_YpZS{0%{stroke-dasharray:0 150;stroke-dashoffset:0}47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16}95%,100%{stroke-dasharray:42 150;stroke-dashoffset:-59}}</style><g class='spinner_V8m1'><circle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'></circle></g></svg>");
+/* In `utilities`, beside the loader and art utilities it defaults for -- see
+   the seams note in `form.css`. */
+@layer utilities {
+  .loader:not(
+    :where(
+      .dots-wave,
+      .dots-fade,
+      .dots-queue,
+      .dots-rotate,
+      .dots-grow,
+      .dots-grow-alternate,
+      .dot-bounce,
+      .bars-wave,
+      .pulse-ring
+    )
+  ) {
+    --loader-art: url("data:image/svg+xml;charset=utf-8,<svg stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>.spinner_V8m1{transform-origin:center;animation:spinner_zKoa 2s linear infinite}.spinner_V8m1 circle{stroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite}@keyframes spinner_zKoa{100%{transform:rotate(360deg)}}@keyframes spinner_YpZS{0%{stroke-dasharray:0 150;stroke-dashoffset:0}47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16}95%,100%{stroke-dasharray:42 150;stroke-dashoffset:-59}}%3C/style%3E<g class='spinner_V8m1'><circle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'></circle></g></svg>");
+  }
 }
 
 @utility dots-wave {
-  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg fill='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_8HQG{0%,57.14%{animation-timing-function:cubic-bezier(.33,.66,.66,1);transform:translate(0)}28.57%{animation-timing-function:cubic-bezier(.33,0,.66,.33);transform:translateY(-6px)}to{transform:translate(0)}}.spinner_qM83{animation:spinner_8HQG 1.05s infinite}</style><circle class='spinner_qM83' cx='4' cy='12' r='3'/><circle class='spinner_qM83' cx='12' cy='12' r='3' style='animation-delay:.1s'/><circle class='spinner_qM83' cx='20' cy='12' r='3' style='animation-delay:.2s'/></svg>");
+  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg fill='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_8HQG{0%,57.14%{animation-timing-function:cubic-bezier(.33,.66,.66,1);transform:translate(0)}28.57%{animation-timing-function:cubic-bezier(.33,0,.66,.33);transform:translateY(-6px)}to{transform:translate(0)}}.spinner_qM83{animation:spinner_8HQG 1.05s infinite}%3C/style%3E<circle class='spinner_qM83' cx='4' cy='12' r='3'/><circle class='spinner_qM83' cx='12' cy='12' r='3' style='animation-delay:.1s'/><circle class='spinner_qM83' cx='20' cy='12' r='3' style='animation-delay:.2s'/></svg>");
 }
 
 @utility dots-fade {
-  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>.dot{animation:dot-anim 1s ease-in-out infinite;fill:currentColor}.d1{animation-delay:-0.32s}.d2{animation-delay:-0.16s}@keyframes dot-anim{0%,80%,100%{transform:scale(0.6);opacity:0.2}40%{transform:scale(1);opacity:1}}</style><circle class='dot d1' cx='4' cy='12' r='3' transform-origin='4px 12px'></circle><circle class='dot d2' cx='12' cy='12' r='3' transform-origin='12px 12px'></circle><circle class='dot d3' cx='20' cy='12' r='3' transform-origin='20px 12px'></circle></svg>");
+  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>.dot{animation:dot-anim 1s ease-in-out infinite;fill:currentColor}.d1{animation-delay:-0.32s}.d2{animation-delay:-0.16s}@keyframes dot-anim{0%,80%,100%{transform:scale(0.6);opacity:0.2}40%{transform:scale(1);opacity:1}}%3C/style%3E<circle class='dot d1' cx='4' cy='12' r='3' transform-origin='4px 12px'></circle><circle class='dot d2' cx='12' cy='12' r='3' transform-origin='12px 12px'></circle><circle class='dot d3' cx='20' cy='12' r='3' transform-origin='20px 12px'></circle></svg>");
 }
 
 @utility dots-queue {
-  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_qtyZ{0%{r:0}25%{r:3px;cx:4px}50%{r:3px;cx:12px}75%{r:3px;cx:20px}to{r:0;cx:20px}}.spinner_nOfF{animation:spinner_qtyZ 2s cubic-bezier(.36,.6,.31,1) infinite}</style><circle class='spinner_nOfF' cx='4' cy='12' r='3'/><circle class='spinner_nOfF' cx='4' cy='12' r='3' style='animation-delay:-.5s'/><circle class='spinner_nOfF' cx='4' cy='12' r='3' style='animation-delay:-1s'/><circle class='spinner_nOfF' cx='4' cy='12' r='3' style='animation-delay:-1.5s'/></svg>");
+  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_qtyZ{0%{r:0}25%{r:3px;cx:4px}50%{r:3px;cx:12px}75%{r:3px;cx:20px}to{r:0;cx:20px}}.spinner_nOfF{animation:spinner_qtyZ 2s cubic-bezier(.36,.6,.31,1) infinite}%3C/style%3E<circle class='spinner_nOfF' cx='4' cy='12' r='3'/><circle class='spinner_nOfF' cx='4' cy='12' r='3' style='animation-delay:-.5s'/><circle class='spinner_nOfF' cx='4' cy='12' r='3' style='animation-delay:-1s'/><circle class='spinner_nOfF' cx='4' cy='12' r='3' style='animation-delay:-1.5s'/></svg>");
 }
 
 @utility dots-rotate {
-  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_XVY9{50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}</style><circle cx='12' cy='12' r='3'/><g style='transform-origin:center;animation:spinner_XVY9 1s cubic-bezier(.36,.6,.31,1) infinite'><circle cx='4' cy='12' r='3'/><circle cx='20' cy='12' r='3'/></g></svg>");
+  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_XVY9{50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}%3C/style%3E<circle cx='12' cy='12' r='3'/><g style='transform-origin:center;animation:spinner_XVY9 1s cubic-bezier(.36,.6,.31,1) infinite'><circle cx='4' cy='12' r='3'/><circle cx='20' cy='12' r='3'/></g></svg>");
 }
 
 @utility dots-grow {
-  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_xe7Q{93.75%,to{r:3px}46.875%{r:.2px}}.spinner_b2T7{animation:spinner_xe7Q .8s linear infinite}</style><circle class='spinner_b2T7' cx='4' cy='12' r='3'/><circle class='spinner_b2T7' cx='12' cy='12' r='3' style='animation-delay:-.65s'/><circle class='spinner_b2T7' cx='20' cy='12' r='3' style='animation-delay:-.5s'/></svg>");
+  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_xe7Q{93.75%,to{r:3px}46.875%{r:.2px}}.spinner_b2T7{animation:spinner_xe7Q .8s linear infinite}%3C/style%3E<circle class='spinner_b2T7' cx='4' cy='12' r='3'/><circle class='spinner_b2T7' cx='12' cy='12' r='3' style='animation-delay:-.65s'/><circle class='spinner_b2T7' cx='20' cy='12' r='3' style='animation-delay:-.5s'/></svg>");
 }
 
 @utility dots-grow-alternate {
-  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_qhi1{0%,to{r:1.5px}50%{r:3px}}.spinner_I8Q1{animation:spinner_qhi1 .75s linear infinite}</style><circle class='spinner_I8Q1' cx='4' cy='12' r='1.5'/><circle class='spinner_I8Q1' cx='12' cy='12' r='3' style='animation-delay:-.375s'/><circle class='spinner_I8Q1' cx='20' cy='12' r='1.5'/></svg>");
+  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_qhi1{0%,to{r:1.5px}50%{r:3px}}.spinner_I8Q1{animation:spinner_qhi1 .75s linear infinite}%3C/style%3E<circle class='spinner_I8Q1' cx='4' cy='12' r='1.5'/><circle class='spinner_I8Q1' cx='12' cy='12' r='3' style='animation-delay:-.375s'/><circle class='spinner_I8Q1' cx='20' cy='12' r='1.5'/></svg>");
 }
 
 @utility dot-bounce {
-  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_YeBj{0%{animation-timing-function:cubic-bezier(.33,0,.66,.33);cy:5px}46.875%{cy:20px;rx:4px;ry:4px}50%{animation-timing-function:cubic-bezier(.33,.66,.66,1);cy:20.5px;rx:4.8px;ry:3px}53.125%{rx:4px;ry:4px}to{cy:5px}}</style><circle cx='12' cy='5' style='animation:spinner_YeBj .8s infinite' r='4'/></svg>");
+  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_YeBj{0%{animation-timing-function:cubic-bezier(.33,0,.66,.33);cy:5px}46.875%{cy:20px;rx:4px;ry:4px}50%{animation-timing-function:cubic-bezier(.33,.66,.66,1);cy:20.5px;rx:4.8px;ry:3px}53.125%{rx:4px;ry:4px}to{cy:5px}}%3C/style%3E<circle cx='12' cy='5' style='animation:spinner_YeBj .8s infinite' r='4'/></svg>");
 }
 
 @utility bars-wave {
-  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>.bar{animation:bar-anim 1s ease-in-out infinite;fill:currentColor}.b1{animation-delay:-0.4s}.b2{animation-delay:-0.2s}@keyframes bar-anim{0%,100%{transform:scaleY(0.3)}50%{transform:scaleY(1)}}</style><rect class='bar b1' x='3' y='2' width='4' height='20' rx='2' transform-origin='5px 12px'></rect><rect class='bar b2' x='10' y='2' width='4' height='20' rx='2' transform-origin='12px 12px'></rect><rect class='bar b3' x='17' y='2' width='4' height='20' rx='2' transform-origin='19px 12px'></rect></svg>");
+  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>.bar{animation:bar-anim 1s ease-in-out infinite;fill:currentColor}.b1{animation-delay:-0.4s}.b2{animation-delay:-0.2s}@keyframes bar-anim{0%,100%{transform:scaleY(0.3)}50%{transform:scaleY(1)}}%3C/style%3E<rect class='bar b1' x='3' y='2' width='4' height='20' rx='2' transform-origin='5px 12px'></rect><rect class='bar b2' x='10' y='2' width='4' height='20' rx='2' transform-origin='12px 12px'></rect><rect class='bar b3' x='17' y='2' width='4' height='20' rx='2' transform-origin='19px 12px'></rect></svg>");
 }
 
 @utility pulse-ring {
-  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>.pulse{animation:pulse-anim 1.2s cubic-bezier(0, 0.2, 0.8, 1) infinite;stroke:currentColor;transform-origin:center}.p2{animation-delay:-0.6s}@keyframes pulse-anim{0%{transform:scale(0);opacity:1}100%{transform:scale(1);opacity:0}}</style><circle class='pulse p1' cx='12' cy='12' r='10' fill='none' stroke-width='3'></circle><circle class='pulse p2' cx='12' cy='12' r='10' fill='none' stroke-width='3'></circle></svg>");
+  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>.pulse{animation:pulse-anim 1.2s cubic-bezier(0, 0.2, 0.8, 1) infinite;stroke:currentColor;transform-origin:center}.p2{animation-delay:-0.6s}@keyframes pulse-anim{0%{transform:scale(0);opacity:1}100%{transform:scale(1);opacity:0}}%3C/style%3E<circle class='pulse p1' cx='12' cy='12' r='10' fill='none' stroke-width='3'></circle><circle class='pulse p2' cx='12' cy='12' r='10' fill='none' stroke-width='3'></circle></svg>");
 }
 
 /* A loader takes a colour and its own geometry, and nothing else. No fill, no