@codenhub/styles 0.4.0 → 0.6.0

package/dist/tw/components/tooltip.css

@@ -1,24 +1,27 @@
 @reference "tailwindcss";
 @import "../theme.css";
 @reference "../box.css";
-@reference "./surface.css";
+@reference "../surface.css";
 
 /* The host is a positioning wrapper and nothing else -- it paints no fill, no
-   edge, no material of its own. The bubble is a real element beside the
-   trigger rather than a pseudo-element attached to it, so intent,
-   presentation, aesthetic, and elevation classes go on `.tooltip-bubble`, the
-   thing actually shown, not on the wrapper -- the same rule every other
-   component in this package follows (theming.md: "Intent does not cascade").
-
-   Composing the bubble as a real element fixes a real gap, not just a styling
-   one: `content: attr(data-tooltip)` text is not reliably exposed to
-   assistive tech and cannot be the target of an `aria-describedby`, since that
-   needs a real element with a real `id`. A real bubble can carry
-   `role="tooltip"` and be referenced by the trigger's own `aria-describedby`;
-   wiring that association is the consumer's, this package only styles the
-   bubble. See docs/usage/tooltips.md. */
+   edge, no material of its own. The bubble is a real element beside the trigger
+   rather than a pseudo-element, so intent, presentation, aesthetic, and
+   elevation classes go on `.tooltip-bubble`, the thing actually shown, not on
+   the wrapper -- the same rule every other component follows (theming.md:
+   "Intent does not cascade").
+
+   A real element is also what makes the tooltip accessible: `content:
+   attr(data-tooltip)` text is not reliably exposed to assistive tech and cannot
+   be the target of an `aria-describedby`, which needs a real element with a
+   real `id`. A real bubble can carry `role="tooltip"` and be referenced by the
+   trigger's own `aria-describedby`; wiring that association is the consumer's,
+   this package only styles the bubble. See docs/usage/tooltips.md. */
 @utility tooltip {
   --tooltip-gap: 0.5rem;
+  /* How long the bubble stays after the pointer leaves the trigger: long
+     enough to cross `--tooltip-gap` onto the bubble, which keeps it open
+     (WCAG 1.4.13). */
+  --tooltip-linger: 300ms;
   --tooltip-top: calc(var(--tooltip-gap) * -1);
   --tooltip-right: auto;
   --tooltip-bottom: auto;
@@ -52,24 +55,31 @@
 }
 
 /* The bubble. It is a surface, so an aesthetic that blurs surfaces blurs it
-   too, and it rests on a ground of its own, edged, and flat -- depth is
-   opt-in through its own `.raised`/`.floating`, like any other component, now
-   that it is one. No proxy inheritance is needed to carry elevation across a
-   host-to-pseudo-element gap: there is no gap, `.tooltip-bubble.raised` reads
-   `--ui-elevation` the ordinary way every other component does. See
+   too, and it rests on a ground of its own, edged, and flat -- depth is opt-in
+   through its own `.raised`/`.floating`, like any other component. See
    model.md#elevation. */
 @utility tooltip-bubble {
-  @apply surface pointer-events-none absolute z-(--z-popover) w-max max-w-72 px-2.5 py-2 text-sm font-normal whitespace-normal opacity-0 transition-[opacity,transform] duration-(--motion-duration-normal) ease-(--motion-ease);
+  @apply surface absolute z-(--z-popover) w-max max-w-72 px-2.5 py-2 text-sm font-normal whitespace-normal opacity-0;
+
+  /* Hidden rather than merely transparent, so a closed bubble is nothing
+     under the pointer, and it lingers before it goes: the host stays hovered
+     once the pointer is over the bubble, so crossing the gap in
+     `--tooltip-linger` keeps it open. Visibility switches at the end of the
+     fade, so the bubble is there to land on for the whole of it. */
+  visibility: hidden;
+  transition-property: opacity, transform, visibility;
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-ease);
+  transition-delay: var(--tooltip-linger, 0s);
 
   /* Filled, over a ground of its own. An intent floods the fill
      (`.tooltip-bubble.primary` is the primary colour); with no intent
      `intent.css` resolves the bubble onto `--color-tooltip` and lifts the
-     neutral cap, a plate stated per theme because the derived version was a
-     mid-grey slab in light and lifted in dark. The ground stays the surface
-     tone, not the plate -- pointed at both, the fill axis went inert and
-     `axes.spec.ts` caught it. An opaque ground is also what keeps a cascaded
-     `.ghost` from leaving the bubble boundaryless. `--ui-surface-ground` is
-     read first so a glass tooltip stays glass. */
+     neutral cap. The ground stays the surface tone, not the plate: pointed at
+     both, the fill axis goes inert (`axes.spec.ts` catches it). An opaque
+     ground is also what keeps a cascaded `.ghost` from leaving the bubble
+     boundaryless. `--ui-surface-ground` is read first so a glass tooltip stays
+     glass. */
   --_d-fill: 100%;
   --_d-fg-on-fill: 100%;
   --_d-border: 100%;
@@ -88,8 +98,13 @@
   --_edge-floor: 100%;
 
   /* A bubble is a small transient popover, not a modal, so it takes the
-     control radius rather than the surface one `surface` hands it. */
-  border-radius: var(--ui-radius, var(--radius-control));
+     control corner `box` computes rather than the surface one `surface` hands
+     it, with the same pattern. */
+  border-radius: var(
+    --ui-radius,
+    calc(var(--_corner) * var(--ui-corner-tl, 1)) calc(var(--_corner) * var(--ui-corner-tr, 1))
+      calc(var(--_corner) * var(--ui-corner-br, 1)) calc(var(--_corner) * var(--ui-corner-bl, 1))
+  );
   left: var(--tooltip-left);
   right: var(--tooltip-right);
   top: var(--tooltip-top);
@@ -100,35 +115,58 @@
   &.edgeless {
     --_edge-floor: 0%;
   }
+
+  /* The bubble appears without growing under reduced motion, for the entries
+     without the reset; see `box.css`. */
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0.01ms;
+  }
 }
 
 /* Shown on hover or focus anywhere in the host, or pinned open with
    `data-state="open"`. `:focus-within` rather than the trigger's own
-   `:focus-visible`, the same substitution `.input-group` makes for the
-   identical reason: the bubble is a sibling, not a pseudo-element, of the
-   trigger, so nothing but the shared ancestor can see both at once. The cost
-   is the one `.input-group` already accepts -- the bubble also shows on a
-   mouse click, which the old `:focus-visible`-only version did not. */
-.tooltip:hover .tooltip-bubble,
-.tooltip:focus-within .tooltip-bubble,
-.tooltip[data-state="open"] .tooltip-bubble {
-  opacity: 1;
-  transform: var(--tooltip-transform) scale(1);
+   `:focus-visible`, the same substitution `.input-group` makes: the bubble is a
+   sibling of the trigger, so only the shared ancestor can see both at once. The
+   cost is the one `.input-group` accepts -- the bubble also shows on a mouse
+   click.
+
+   In `utilities`, where the bubble's own `@utility` is, winning on specificity
+   -- see the seams note in `form.css`. */
+@layer utilities {
+  .tooltip:hover .tooltip-bubble,
+  .tooltip:focus-within .tooltip-bubble,
+  .tooltip[data-state="open"] .tooltip-bubble {
+    opacity: 1;
+    transform: var(--tooltip-transform) scale(1);
+    visibility: visible;
+    transition-delay: 0s;
+  }
+
+  /* Dismissed: a hover message has to close without the pointer moving
+     (WCAG 1.4.13), and CSS cannot hear Escape, so the consumer's handler
+     writes `data-state="closed"` and clears it when the pointer and focus
+     leave. Later and as specific as the rule above, so it wins over hover and
+     focus alike. */
+  .tooltip[data-state="closed"] .tooltip-bubble {
+    opacity: 0;
+    transform: var(--tooltip-transform) scale(0);
+    visibility: hidden;
+    transition-delay: 0s;
+  }
 }
 
 /* The trigger badge, for a message with no other element to hang it on. Quiet
    -- ghost, edged, on `--intent-subtle`, a key cap's resting shape -- because
    it marks that there is a message, it is not one. The line earns its keep:
-   `--intent-subtle` is a near-page tint that reads the same across families,
-   so a plate alone left three of eight intents indistinguishable;
+   `--intent-subtle` is a near-page tint that reads the same across families, so
+   a plate alone leaves three of eight intents indistinguishable;
    `--intent-border` is the slot that differs.
 
-   `clip-path: none` used to exist to protect the bubble, a pseudo-element of
-   this same host, from being clipped away along with it under an aesthetic
-   like `.pixel`. The bubble is independent now, so that reason is gone, but
-   the declaration stays: the docs call this a circular fixed identity, not a
-   shape a container's aesthetic reaches, the same way `.radio` keeps its own
-   circle instead of taking `.pixel`'s stepped silhouette. */
+   Its corner is the aesthetic's, through the pill corner and then the control
+   corner: round by default, a diamond under `.cyber`, square under
+   `.neobrutalism` and `.pixel`, whose corner is zero. Only the silhouette
+   clip is refused -- `clip-path: none`, as `.radio` has it -- because
+   `.pixel`'s stepped polygon would bite a 20px chip rather than shape it. */
 @utility tooltip-icon {
   @apply box inline-flex size-5 cursor-default items-center justify-center text-sm font-bold;
 
@@ -138,6 +176,12 @@
   --_d-elevation: 0;
   --_d-ground: var(--intent-subtle);
 
-  border-radius: var(--ui-radius-pill, var(--ui-radius, calc(infinity * 1px)));
+  /* The trigger is best a real `<button>`, which is a `.btn` under `/native`
+     and carries the user agent's padding under `/components`; either would
+     stretch the chip past its own size. */
+  min-width: 0;
+  min-height: 0;
+  padding: 0;
+  border-radius: var(--ui-radius-pill, var(--ui-radius, var(--ui-corner, calc(infinity * 1px))));
   clip-path: none;
 }

package/dist/tw/corner.css

@@ -0,0 +1,26 @@
+/* Imported into the `components` layer by `theme.css`, below every utility, so
+   a consumer's own utility or unlayered CSS beats these classes. See
+   docs/internal/model.md#cascade-layers.
+
+   The corner pattern: which corners take the corner the aesthetic draws. `box`
+   and `surface` multiply their computed corner by `--ui-corner-tl`, `-tr`,
+   `-br`, and `-bl`, each 0 or 1, so a class that sets the four draws two
+   corners and leaves two square under every aesthetic -- a two-corner leaf
+   under the default look, two cuts under `.cyber`. An explicit `--ui-radius`
+   is taken as written and ignores the pattern. See docs/internal/model.md#material-tokens. */
+
+/* Top-left and bottom-right. */
+.cut-diagonal {
+  --ui-corner-tl: 1;
+  --ui-corner-tr: 0;
+  --ui-corner-br: 1;
+  --ui-corner-bl: 0;
+}
+
+/* Top-right and bottom-left. */
+.cut-diagonal-reverse {
+  --ui-corner-tl: 0;
+  --ui-corner-tr: 1;
+  --ui-corner-br: 0;
+  --ui-corner-bl: 1;
+}

package/dist/tw/elevation.css

@@ -1,29 +1,25 @@
+/* Imported into the `components` layer by `theme.css`, below every utility, so
+   a consumer's own utility or unlayered CSS beats these classes. See
+   docs/internal/model.md#cascade-layers. */
+
 /* Elevation is a modifier, not an axis: depth is a per-element decision (raised
-   tiles beside a flat panel in one aesthetic), so one unitless number multiplies
-   the aesthetic's shadow geometry where the component composes it. `.flat`
-   removes a part-based slab or blur without a conditional (complete surface
-   shadows like glass remain). See model.md#elevation.
+   tiles beside a flat panel in one aesthetic), so one unitless number
+   multiplies the aesthetic's shadow geometry where the component composes it.
+   `.flat` removes a part-based slab or blur without a conditional (complete
+   surface shadows like glass remain). See model.md#elevation.
 
    `--ui-elevation`, and the plain-page fallback geometry (`--elevation-y`,
    `--elevation-blur`) below, are registered non-inheriting: a class sets them
-   on the element it is written on and nothing else picks them up. They used to
-   be ordinary inherited custom properties, on the reasoning that a container
-   could flatten or lift a whole region in one class and any element inside
-   could opt back out -- but the same mechanism let a `.floating` dialog's
-   ambient ×2 reach its own unclassed "Cancel"/"Remove" buttons, doubling their
-   shadow with nothing in the markup asking for that. Depth is not the same
-   kind of thing as color or material: a button inside a raised card is not
-   itself more raised, it is just resting normally inside an already-raised
-   surface. `--ui-shadow-*` -- what an aesthetic supplies -- is unaffected and
-   still cascades normally; that is a different mechanism (the material tokens
-   in `src/aesthetics/*.css`), and an aesthetic still has to reach every nested
-   component uniformly the way it always did. Registering these three is what
-   scopes the change to the elevation modifier alone.
+   on the element it is written on and nothing else picks them up. Inherited, a
+   `.floating` dialog's ambient x2 would reach its own unclassed buttons and
+   double their shadow with nothing in the markup asking for it. Depth is not
+   the same kind of thing as color or material: a button inside a raised card is
+   not itself more raised. `--ui-shadow-*` -- what an aesthetic supplies -- is a
+   different mechanism and still cascades normally, so an aesthetic reaches
+   every nested component uniformly.
 
-   `.flat`/`.raised`/`.floating` and `.elevation-none`/`-sm`/`-md` are
-   interchangeable aliases, the second borrowing the raw `--elevation-*` scale's
-   naming. Bare `sm`/`md`/`lg` would collide with the size modifier;
-   `.elevation-lg` is reserved, not shipped. */
+   `.flat`/`.raised`/`.floating` name what they do rather than a scale step:
+   bare `sm`/`md`/`lg` would collide with the size modifier. */
 
 /* `syntax: "*"` with no `initial-value` is deliberate: a numeric syntax would
    require one (CSS Properties and Values API), and any initial-value at all
@@ -32,8 +28,8 @@
    1))` in `box.css` needs to fall through to a component's own default. With
    no initial-value and `inherits: false`, an element that does not set the
    property directly computes it as guaranteed-invalid, the same as if it had
-   never been registered at all -- `var()` takes its fallback precisely where
-   inheritance used to hand it an ambient value instead. */
+   never been registered at all -- `var()` takes its fallback where an
+   inherited value would otherwise be handed in. */
 @property --ui-elevation {
   syntax: "*";
   inherits: false;
@@ -51,7 +47,6 @@
 
 /* No part-based depth. Complete surface shadow values, such as glass, are not
    reached by the elevation multiplier. */
-.elevation-none,
 .flat {
   --ui-elevation: 0;
 }
@@ -61,22 +56,18 @@
    that declares its own shadow parts overrides it, and the elevation multiplier
    scales whichever one lands. `.floating` takes its extra depth from the
    multiplier below, not a second copy of these parts. */
-.elevation-sm,
 .raised,
-.elevation-md,
 .floating {
   --elevation-y: 1px;
   --elevation-blur: 3px;
 }
 
 /* The aesthetic's depth as authored, said explicitly. */
-.elevation-sm,
 .raised {
   --ui-elevation: 1;
 }
 
 /* Twice it, for menus and popovers. */
-.elevation-md,
 .floating {
   --ui-elevation: 2;
 }

package/dist/tw/index.css

@@ -1,27 +1,23 @@
 @import "tailwindcss";
 
 /* The build has no markup to scan, so Tailwind's automatic content detection
-   sees only this package's own files. The `src/` scan is load-bearing -- it is
+   sees only this package's own files. The `src/` scan is load-bearing: it is
    how the composition utilities (`box`, `surface`, `text-control`,
-   `input-group`, `loader-mask`) get emitted as standalone rules, since nothing
-   `@source inline`s them -- so `source(none)` is not an option. A handful of
-   Tailwind utility names also collide with a CSS property or a word this
-   file's own comments use (`backdrop-filter`, `filter`, `transition`,
-   `transform`, `container`), which reads like a risk of the same scan --
-   verified against Tailwind 4.3.2, none of them emit.
-   `tests/integration/exports.test.ts` guards it, so a scanner change that
-   starts emitting one is caught rather than shipping silently.
+   `input-group`, `loader-mask`) are emitted as standalone rules, so
+   `source(none)` is not an option. Tailwind utility names that collide with a
+   CSS property or a word these comments use (`backdrop-filter`, `filter`,
+   `transition`, `transform`, `container`) do not emit, verified against
+   Tailwind 4.3.2; `tests/integration/exports.test.ts` guards it.
 
-   The `@source not` lines below keep everything that is not `src/` out of that
-   scan: the sibling app and fixture directories, the `docs/` tree, the build
-   scripts, and the root prose and data files (`README.md`, `llms*.txt`,
-   `registry*.json`, `package.json`). Without them a class name or `--color-*`
-   reference that appears only in a documentation example ships as real CSS --
-   the violet ramp in `docs/usage/theming.md`'s custom-intent example was
-   compiling into `dist/index.css` and `dist/native.css`, and any utility in a
-   docs code fence did the same. `tests/integration/exports.test.ts` guards it.
-   `scripts/build-tw.mjs` strips these lines from the `dist/tw/` copy, where they
-   resolve to nothing and the `/tw` consumer scans their own tree anyway. */
+   The `@source not` lines keep everything that is not `src/` out of the scan:
+   the sibling app and fixture directories, the `docs/` tree, the build scripts,
+   and the root prose, data, config, and license files. Without them a class
+   name or `--color-*` reference that appears only in a documentation example
+   ships as real CSS -- the license's "contents" once shipped as
+   `.contents{display:contents}`.
+   `exports.test.ts` guards it. `scripts/build-tw.mjs` strips these lines from
+   the `dist/tw/` copy, where they resolve to nothing and the `/tw` consumer
+   scans their own tree. */
 
 @import "./theme.css";
 @import "./typography.css";

package/dist/tw/intent.css

@@ -1,3 +1,7 @@
+/* Imported into the `components` layer by `theme.css`, below every utility, so
+   a consumer's own utility or unlayered CSS beats these classes. See
+   docs/internal/model.md#cascade-layers. */
+
 /* An intent maps one colour family onto seven shared slots and nothing else.
    It does not cascade: the reset at the bottom redeclares the neutral defaults
    at every component's own root, so a `.success` container cannot recolour a
@@ -29,12 +33,11 @@
 }
 
 /* Neutral stops its fill short: its colour is the page's ink, so a full fill is
-   a slab and `.neutral.solid` was pixel-for-pixel `.primary.solid`. 20% is
+   a slab and `.neutral.solid` would be pixel-for-pixel `.primary.solid`. 20% is
    chosen against `.soft`'s 12% -- a step past the tint, not a repeat.
    `--intent-contrast` stays the page colour; a `.neutral.solid` badge's ink is
    `box`'s question, answered by the same `--ui-fg-on-fill` cap. Pointing this
-   slot at `--color-text` instead rendered a checked neutral checkbox
-   black-on-black. */
+   slot at `--color-text` renders a checked neutral checkbox black-on-black. */
 .neutral {
   --intent-color: var(--color-text);
   --intent-contrast: var(--color-text-contrast);
@@ -85,9 +88,7 @@
   --intent-fill-max: 100%;
 }
 
-.destructive,
-.danger,
-.error {
+.destructive {
   --intent-color: var(--color-destructive);
   --intent-contrast: var(--color-destructive-contrast);
   --intent-hover: var(--color-destructive-hover);
@@ -159,38 +160,52 @@
    border for 3:1. `--color-border` gives it 1.42:1.
 
    Declared here at zero specificity for the same reason the indicators below
-   are: written inside `@utility text-control` it would land in the utilities
-   layer, the reset above lands in no layer at all, and unlayered beats layered
-   at any specificity. Written as a plain class list it would carry 0-1-0 and,
-   being later in the stylesheet, beat `.primary` -- which would make every
-   colored control draw a grey line. `:where()` keeps it under both. */
-:where(.text-control, .ipt, .textarea, .select, .input-group, .checkbox, .radio, .switch) {
-  --intent-border: var(--ui-ink, var(--color-control-border));
+   are: written inside `@utility text-control` it would land in `utilities`,
+   above every intent class in `components`, and overrule `.primary` on the
+   element. Written as a plain class list it would carry 0-1-0 and, being later
+   in the stylesheet, beat `.primary` the same way. Either would make every
+   colored control draw a grey line; `:where()` keeps it under both.
+
+   An aesthetic reaches this line through `--ui-control-ink` first, then its
+   `--ui-ink`: the theme keeps a control border apart from a surface border, and
+   an aesthetic whose neutral line suits a pane but not a control's boundary --
+   `.glass`'s white hairline, `.chunky-tile`'s tile grey -- names a control line
+   of its own. See docs/internal/model.md#presentation.
+
+   The second selector is the tooltip bubble's below, for the same reason:
+   `.neutral` carries 0-1-0 and beat `:where()`, so a `.neutral` field under
+   `.glass` drew the pane's hairline while an unclassed one drew the control
+   line, and writing the intent out changed the box. */
+:where(.text-control, .ipt, .textarea, .select, .input-group, .checkbox, .radio, .switch),
+:is(.text-control, .ipt, .textarea, .select, .input-group, .checkbox, .radio, .switch).neutral {
+  --intent-border: var(--ui-control-ink, var(--ui-ink, var(--color-control-border)));
+}
+
+/* A table's lines -- its frame, head rule, and row rules -- are drawn on a
+   plate, not at a pane's edge against the backdrop, so an aesthetic whose
+   neutral line is a highlight names a rule line of its own: glass's white
+   hairline vanishes on the table's light plate. Neutral only, and `.neutral`
+   included, the way the control line above is. */
+:where(.data-table),
+.data-table.neutral {
+  --intent-border: var(--ui-rule-ink, var(--ui-ink, var(--color-border)));
 }
 
 /* The bubble a tooltip draws is the one plate in the package that is chosen
    rather than composed, so it resolves the no-intent case onto its own pair
-   instead of onto the shared neutral. Composed, it was 20% of the page's
-   ink over `--color-surface`, which lifts off a dark page and sinks into a light
-   one -- see `--color-tooltip` in `theme.css` for the measurements.
+   instead of the shared neutral -- see `--color-tooltip` in `theme.css`.
 
    The cap goes with it. Neutral stops its fill at 20% because its colour is the
-   page's ink and a full fill of that is a slab; `--color-tooltip` is a plate
-   rather than an ink, so a full fill of it is the plate and there is nothing to
-   stop short of.
-
-   `--intent-subtle` stays the surface token, the same tone every other
-   unclassed component sits on. `.tooltip-icon`, the trigger badge, is a
-   separate element now and does not read this block at all -- it never fills
-   past `0%`, so the generic neutral reset above it is enough, and it keeps its
-   own resting ground and line independent of whatever intent the bubble shows.
-
-   Two selectors, because `none` and `neutral` have to agree here. `:where()`
-   loses to any intent class, so `.tooltip-bubble.primary` still floods with
-   primary; `.tooltip-bubble.neutral` carries 0-2-0 and beats `.neutral`, so
-   writing the intent out gives the same bubble as writing nothing. Without the
-   second selector the two would differ on a component where they mean the
-   same thing. */
+   page's ink; `--color-tooltip` is a plate rather than an ink, so a full fill
+   of it is the plate and there is nothing to stop short of. `--intent-subtle`
+   stays the surface token, the tone every other unclassed component sits on.
+   `.tooltip-icon` is a separate element that never fills past `0%`, so the
+   generic neutral reset above is enough for it.
+
+   Two selectors, so `none` and `neutral` agree. `:where()` loses to any intent
+   class, so `.tooltip-bubble.primary` still floods with primary;
+   `.tooltip-bubble.neutral` carries 0-2-0 and beats `.neutral`, so writing the
+   intent out gives the same bubble as writing nothing. */
 :where(.tooltip-bubble),
 .tooltip-bubble.neutral {
   --intent-color: var(--color-tooltip);

package/dist/tw/native.css

@@ -1,3 +1,6 @@
+/* The layer map, stated before any import uses a layer -- see `theme.css`. */
+@layer theme, base, components, utilities;
+
 @import "./theme.css";
 @reference "tailwindcss";
 /* Everything that is not `src/` -- see the note in `index.css`. Without the
@@ -8,45 +11,56 @@
 @import "./components/index.css";
 @import "./reset.css";
 
-/* `intent.css`'s reset keys on class names; these bare elements need the same,
-   or a `color-mix()` reading an undefined `--intent-*` drops silently. Zero
-   specificity like the class reset, values matching it slot for slot -- a bare
-   `<code>` and a `.code` chip are one component reached two ways. */
-:where(table, kbd, code, pre, blockquote, hr, input, textarea, select, button) {
-  --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-ink, var(--color-border));
-  --intent-fill-max: 20%;
-}
-
-/* Native text controls need the same stronger neutral boundary as their classed
-   counterparts, without changing buttons, checkboxes, radios, or other inputs. */
-:where(
-  input:not([type]),
-  input[type="text"],
-  input[type="number"],
-  input[type="email"],
-  input[type="password"],
-  input[type="url"],
-  input[type="tel"],
-  input[type="search"],
-  input[type="month"],
-  input[type="week"],
-  input[type="time"],
-  input[type="date"],
-  input[type="datetime-local"],
-  textarea,
-  select
-) {
-  --intent-border: var(--ui-ink, var(--color-control-border));
-}
-
-:where(hr) {
-  --intent-color: currentColor;
-  --intent-border: currentColor;
+@layer components {
+  /* `intent.css`'s reset keys on class names; these bare elements need the same,
+     or a `color-mix()` reading an undefined `--intent-*` drops silently. Zero
+     specificity like the class reset, values matching it slot for slot -- a bare
+     `<code>` and a `.code` chip are one component reached two ways. */
+  :where(table, kbd, code, pre, blockquote, hr, input, textarea, select, button) {
+    --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-ink, var(--color-border));
+    --intent-fill-max: 20%;
+  }
+
+  /* Native text controls and toggles take the same stronger neutral boundary as
+     their classed counterparts, without changing buttons or other inputs --
+     control ink included, as `intent.css`'s class reset reads it. */
+  :where(
+    input:not([type]),
+    input[type="checkbox"],
+    input[type="radio"],
+    input[type="text"],
+    input[type="number"],
+    input[type="email"],
+    input[type="password"],
+    input[type="url"],
+    input[type="tel"],
+    input[type="search"],
+    input[type="month"],
+    input[type="week"],
+    input[type="time"],
+    input[type="date"],
+    input[type="datetime-local"],
+    textarea,
+    select
+  ) {
+    --intent-border: var(--ui-control-ink, var(--ui-ink, var(--color-control-border)));
+  }
+
+  /* A bare table's lines take the rule line, as `.data-table`'s do in
+     `intent.css`. */
+  :where(table) {
+    --intent-border: var(--ui-rule-ink, var(--ui-ink, var(--color-border)));
+  }
+
+  :where(hr) {
+    --intent-color: currentColor;
+    --intent-border: currentColor;
+  }
 }
 
 @layer base {
@@ -74,9 +88,10 @@
     @apply text-label;
   }
 
+  /* Links are left out: a link takes the text it sits in, so one inside a
+     heading stays heading-sized. */
   p,
-  li,
-  a {
+  li {
     @apply text-body;
   }
 
@@ -167,7 +182,8 @@
     transition: none;
   }
 
-  input[type="checkbox"]:checked {
+  input[type="checkbox"]:checked,
+  input[type="checkbox"]:indeterminate {
     background-color: Highlight;
     border-color: Highlight;