@codenhub/styles 0.4.0 → 0.6.0

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";
@@ -17,12 +29,8 @@
    the content scan will not emit on its own. `box` and friends appear only as
    `@utility` blocks and `@apply` targets; `text-control`, `surface` and
    `input-group` appear only inside `:is()`/`:where()` argument lists in
-   `intent.css` and `form.css`, never as a selector of their own. Their standalone
-   rules shipped only because docs prose happened to name them, and excluding
-   `docs/` from the scan removed that -- `.input-group` (and, with it, its focus
-   ring, its flush inner control, and `:has()`-propagated invalid state) went
-   silently dark, caught only by the browser suite. Safelisting all seven here
-   makes the emission deliberate; the composition-body check in
+   `intent.css` and `form.css`, never as a selector of their own. Safelisting
+   all seven 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 unadorned 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,63 +21,66 @@
   -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
-   edge, no silhouette: what used to be a bordered box wrapped around a mask is
-   now the mask. `--intent-color` defaults to `currentColor` for indicators, so
-   a loader inside filled content matches the text around it and
-   `.loader.success` is green. There is nothing else to know. */
+/* A loader takes a colour and its own geometry, and nothing else: no fill, no
+   edge, no silhouette. `--intent-color` defaults to `currentColor` for
+   indicators, so a loader inside filled content matches the text around it and
+   `.loader.success` is green. */
 @utility loader {
   @apply loader-mask inline-block size-7 [&.lg]:size-9 [&.sm]:size-5;
 

package/dist/tw/components/surface.css

@@ -1,39 +1,8 @@
 @reference "tailwindcss";
 @import "../theme.css";
+@import "../surface.css";
 @reference "../box.css";
 
-/* What every surface shares. Two slots exist here and nowhere else, and that is
-   how an aesthetic reaches surfaces without naming one: only a surface resolves
-   `--ui-backdrop`, so glass blurs cards and panels while controls stay solid,
-   and only a surface resolves `--ui-surface-shadow`, so a two-layer drop shadow
-   does not land under every button on the page. */
-@utility surface {
-  @apply box block;
-
-  /* Bare and edged. `box` reads these three with no fallback, so `surface` --
-     typeable on its own -- owes all three; `card` restates its own. No shadow
-     geometry: depth is asked for (`.raised`/`.floating`, an aesthetic, the
-     registry elevation) rather than carried, so a plain card is flat. */
-  --_d-fill: 0%;
-  --_d-fg-on-fill: 0%;
-  --_d-border: 100%;
-
-  --_d-ground: var(--ui-surface-ground, var(--color-background));
-
-  /* The complete-shadow slot for a shadow that is not one layer (glass tucks two
-     under with negative spread). Only `surface` reads it -- through `--ui-shadow`
-     it would land an 18px drop under every button and chip -- like the backdrop. */
-  --_shadow: var(--ui-surface-shadow, var(--_shadow-parts));
-
-  border-radius: var(--ui-radius-surface, var(--radius-surface));
-  /* Prefixed property first, deliberately: written second the minifier folds the
-     pair into the prefixed one alone, and the standard property never reaches
-     `dist/` -- which drops the blur in Firefox (the one engine with
-     `backdrop-filter` and not the `-webkit-` alias). Measured on the built CSS. */
-  -webkit-backdrop-filter: var(--ui-backdrop, none);
-  backdrop-filter: var(--ui-backdrop, none);
-}
-
 /* A ghost, edged container that takes one unit when depth is supplied. */
 @utility card {
   @apply surface p-(--surface-padding,1.25rem);
@@ -46,71 +15,58 @@
   --_d-border: 100%;
   --_d-elevation: 1;
 
-  /* `.p-xs`/`.p-sm`/`.p-lg` are the canonical names; `.dense`/`.compact`/`.spacious`
-     are first-class aliases -- see the identical note in `button.css`. */
-  &.p-xs,
-  &.dense {
+  &.p-xs {
     --surface-padding: 0.5rem;
+    --_scale-pad: 0.5;
   }
 
-  &.p-sm,
-  &.compact {
+  &.p-sm {
     --surface-padding: 0.75rem;
+    --_scale-pad: 0.75;
   }
 
-  &.p-lg,
-  &.spacious {
+  &.p-lg {
     --surface-padding: 2rem;
+    --_scale-pad: 1.25;
   }
 
   &.flush {
     --surface-padding: 0;
   }
 
-  /* `.soft` rests untinted for no named intent, rather than mixing its 12% --
-     measured on a neutral card, 12% of `--color-text` onto any of
-     `--color-background`, `--color-foreground`, or `--color-surface` lands
-     within a few units of the others (a near-black ink dominates the result
-     regardless of which near-white ground it is mixed onto), which is why
-     swapping the ground token alone does not read as quieter. A resting
-     no-intent `.card.soft` is instead `--color-foreground` with no ink mixed
-     in at all -- a plain step up from the page that marks a different
-     container without drawing attention to it, the way a card that is not
-     currently interesting should.
-
-     A named intent keeps its ordinary 12% wash rather than being untinted
-     unconditionally: 12% of an actual hue does not read as a slab the way
-     12% of near-black ink does -- measured, `.card.soft.destructive` at 12%
-     is a gentle `249, 225, 225`, nothing like the `217, 217, 217` a neutral
-     surface mixing the same 12% of its own ink used to read as -- and
-     untinting it anyway would silence a `.card.soft.destructive` at rest
-     rather than merely quiet it, the same reason `.panel`'s own carve-out
-     (below) is scoped the same way. `:not(...)` names every intent class for
-     that reason; a version of this fix that untinted every intent shipped
-     first and was corrected once `.panel` needed the identical, narrower
-     carve-out to keep a resting `.panel.destructive` legible.
-
-     `--_fill-cap: 0%` (box.css's override slot, not `--ui-fill` directly --
-     see the comment there) composed with `box-hover`'s own formula
-     (`min(100%, resting + 14%)`) is what reveals the intent on hover without
-     a second fill declaration, for the no-intent case: resting at 0% means
-     hover lands at exactly the hover step, 14%, in `--intent-hover` as
-     always. The ground steps to `--color-surface` at the same moment,
-     through the public `--ui-surface-ground` escape hatch rather than the
-     private `--_d-ground`, so a consumer's own override still wins over both
-     states the way it always has. Scoped to `.interactive` and `.hoverable`,
-     the two classes that already opt a card into `box-hover` -- a plain
-     `.card.soft` with neither has no hover state to reveal into and stays at
-     the quiet, untinted rest. A named intent needs neither special case: it
-     already rests tinted, so the same generic `box-hover` formula deepens it
-     on hover (12% to 26%) with no ground shift required. */
-  &.soft:not(.primary, .secondary, .success, .warning, .destructive, .danger, .error, .info) {
+  /* `.soft` rests untinted for no named intent instead of mixing its 12%: 12%
+     of `--color-text` onto any of `--color-background`, `--color-foreground`,
+     or `--color-surface` lands within a few units of the others (a near-black
+     ink dominates the result), so swapping the ground token alone does not read
+     as quieter. A resting no-intent `.card.soft` is `--color-foreground` with
+     no ink mixed in -- a plain step up from the page that marks a different
+     container without drawing attention to it.
+
+     A named intent keeps its ordinary 12% wash: 12% of an actual hue does not
+     read as a slab the way 12% of near-black ink does (`.card.soft.destructive`
+     is a gentle `249, 225, 225`), and untinting it would silence it rather than
+     quiet it. `:not(...)` names every intent class for that reason; `.panel`'s
+     carve-out below is scoped the same way.
+
+     `--_fill-cap: 0%` (box.css's override slot, not `--ui-fill` directly -- see
+     the comment there) composed with `box-hover`'s formula (`min(100%, resting
+     + 14%)`) reveals the intent on hover with no second fill declaration for
+     the no-intent case: resting at 0% means hover lands at exactly the hover
+     step, 14%, in `--intent-hover`. The ground steps to `--color-surface` at
+     the same moment, through `--_d-surface-ground`, the default `surface` reads
+     beneath the public `--ui-surface-ground`, so a consumer's override, or
+     glass's ground, wins over both states. Scoped to `.interactive` and
+     `.hoverable`, the two classes that opt a card into `box-hover`: a plain
+     `.card.soft` has no hover state to reveal into and stays at the quiet rest.
+     A named intent needs neither special case: it rests tinted, so the generic
+     `box-hover` formula deepens it on hover (12% to 26%). */
+  &.soft:not(.primary, .secondary, .success, .warning, .destructive, .info) {
     --_fill-cap: 0%;
-    --ui-surface-ground: var(--color-foreground);
+    --_d-surface-ground: var(--color-foreground);
 
     &.interactive:hover,
     &.hoverable:hover {
-      --ui-surface-ground: var(--color-surface);
+      --_d-surface-ground: var(--color-surface);
     }
   }
 
@@ -148,68 +104,72 @@
   --_d-border: 0%;
   --_d-elevation: 0;
 
-  &.p-xs,
-  &.dense {
+  &.p-xs {
     --surface-padding: 0.25rem;
+    --_scale-pad: 0.5;
   }
 
-  &.p-sm,
-  &.compact {
+  &.p-sm {
     --surface-padding: 0.5rem;
+    --_scale-pad: 0.75;
   }
 
-  &.p-lg,
-  &.spacious {
+  &.p-lg {
     --surface-padding: 1.5rem;
+    --_scale-pad: 1.25;
   }
 
   &.flush {
     --surface-padding: 0;
   }
 
-  /* Neutral panels are the common case -- most are plain layout wells,
-     sidebars, and toolbars with no named intent -- and 12% of `--color-text`
-     (near-black) mixed onto the page is a far more assertive move than 12%
-     of an actual hue: measured, `217, 217, 217` against a `250, 250, 250`
-     page, the same "neutral ink reads louder" effect `.card.soft`'s fix
-     already answered, and the same reason `--intent-fill-max` stops
-     neutral's fill short everywhere else in the model.
-
-     Scoped to no named intent rather than untinted unconditionally the way
-     `data-table` is: a panel is not interactive, so there is no hover to
-     reveal a colored intent back into later, and it is edgeless by default,
-     so the fill is the only channel a `.primary` bulk-actions bar or a
-     `.destructive` danger-zone panel has to say what it is. Untinting those
-     unconditionally would silence them, not just quiet them -- measured, a
-     resting `.panel.destructive` is a gentle `249, 225, 225` warm wash,
-     nothing like the neutral slab above. `.card.soft` carries the identical
-     no-named-intent scoping now, corrected to match once this carve-out
-     shipped -- see the comment on `.card`'s own `&.soft`, above. `:not(...)`
-     names every intent class for that reason, plus `.solid`/`.ghost` so an
-     explicit presentation on the element is never clamped to a cap it did
-     not ask for -- the same guard `data-table`'s own `:not(.solid, .ghost)`
-     uses.
-
-     Grounds on `--color-foreground` through the public `--ui-surface-ground`
-     escape hatch, not the private `--_d-ground`, the same token `.card.soft`
-     steps to -- so a consumer's own override still wins, and a bare `.panel`
-     rests at exactly the plate a `.card.soft` does (measured: `245, 245, 245`
-     light, `23, 23, 23` dark, identical both ways). Permanent rather than
-     hover-revealed: neither a panel nor `data-table` has an interaction
-     state to reveal a tint into, so both rest quiet rather than reveal.
-
-     The one cost, inherited rather than new: an own declaration always beats
-     an inherited one, so this also beats `.glass` setting the same token on
-     an ancestor for its translucent ground -- a neutral panel under `.glass`
-     is quiet but opaque rather than blurred. `.card.soft` has carried this
-     exact trade-off since it shipped; nothing exercised it there because
-     `tests/browser/aesthetics.spec.ts`'s glass coverage tests a default
-     (ghost) card, never a soft one. Accepted rather than solved differently:
-     there is no way to ask "did an ancestor already set this token" in CSS,
-     only which declaration wins, and the quiet neutral rest is the more
-     common case a panel needs to get right. */
-  &:not(.primary, .secondary, .success, .warning, .destructive, .danger, .error, .info, .solid, .ghost) {
+  /* Neutral panels are the common case -- layout wells, sidebars, toolbars with
+     no named intent -- and 12% of `--color-text` (near-black) mixed onto the
+     page is far more assertive than 12% of a hue (`217, 217, 217` against a
+     `250, 250, 250` page): the same "neutral ink reads louder" effect
+     `.card.soft` answers, and the reason `--intent-fill-max` stops neutral's
+     fill short everywhere else.
+
+     Scoped to no named intent rather than untinted unconditionally, as
+     `data-table` is: a panel is not interactive, so there is no hover to reveal
+     a colored intent into, and it is edgeless by default, so the fill is the
+     only channel a `.primary` bulk-actions bar or a `.destructive` danger-zone
+     panel has to say what it is (a resting `.panel.destructive` is a gentle
+     `249, 225, 225` wash). `.card.soft` carries the same scoping. `:not(...)`
+     names every intent class, plus `.solid`/`.ghost` so an explicit
+     presentation on the element is never clamped to a cap it did not ask for --
+     the guard `data-table`'s `:not(.solid, .ghost)` also uses.
+
+     Grounds on `--color-foreground` through `--_d-surface-ground`, the default
+     `.card.soft` rests on, so a bare `.panel` rests at exactly the plate a
+     `.card.soft` does, and a consumer's `--ui-surface-ground` or glass's
+     translucent ground wins over it: a neutral panel under `.glass` is glass.
+     Permanent rather than hover-revealed: neither a panel nor `data-table` has
+     an interaction state to reveal a tint into. */
+  &:not(.primary, .secondary, .success, .warning, .destructive, .info, .solid, .ghost) {
     --_fill-cap: 0%;
-    --ui-surface-ground: var(--color-foreground);
+    --_d-surface-ground: var(--color-foreground);
   }
 }
+
+/* The user agent already promises both of these for a native `<dialog>` --
+   `dialog:not([open]) { display: none }` and a centred `margin: auto` on the
+   open box -- but both are user-agent origin, which loses to any author rule
+   at all. `.card`'s own `display: block` beats the first outright, so a
+   `<dialog class="card">` rendered open with no `open` attribute and no
+   `.showModal()` call, and a margin reset beats the second, so an opened one
+   pinned to the top-left. The registry has no dialog component, and these
+   three are the containers a consumer reaches for.
+
+   Here rather than in the reset, so every entrypoint that ships `.card` ships
+   the fix, `/components` included. Unlayered, because a behaviour override has
+   to win over any layered rule whatever its specificity, and scoped to the
+   package's own containers, so a dialog the package does not style keeps
+   whatever margin its author gives it. */
+dialog:is(.card, .panel, .surface):not([open]) {
+  display: none;
+}
+
+dialog:is(.card, .panel, .surface)[open] {
+  margin: auto;
+}