@codenhub/styles 0.5.0 → 0.6.0

package/dist/tw/components/surface.css

@@ -34,43 +34,32 @@
     --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 `--_d-surface-ground`, the default `surface` reads beneath the
-     public `--ui-surface-ground` -- so a consumer's own override, or glass's
-     ground, still wins over both states. 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` 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%;
     --_d-surface-ground: var(--color-foreground);
@@ -134,39 +123,53 @@
     --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 `--_d-surface-ground`, the same
-     default `.card.soft` rests on -- so a bare `.panel` rests at exactly the
-     plate a `.card.soft` does (measured: `245, 245, 245` light, `23, 23, 23`
-     dark, identical both ways), and a consumer's `--ui-surface-ground` or
-     glass's translucent ground still wins over it: a neutral panel under
-     `.glass` is glass, like every other surface there. 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. */
+  /* 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%;
     --_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;
+}

package/dist/tw/components/tooltip.css

@@ -4,21 +4,24 @@
 @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%;
@@ -105,40 +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.
-
-   In `utilities`, where the bubble's own `@utility` is, winning on
-   specificity -- see the seams note in `form.css`. */
+   `: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;
 
@@ -148,6 +176,12 @@
   --_d-elevation: 0;
   --_d-ground: var(--intent-subtle);
 
+  /* 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/elevation.css

@@ -3,31 +3,23 @@
    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` name what they do rather than a scale step:
-   bare `sm`/`md`/`lg` would collide with the size modifier, and the
-   `.elevation-*` spellings, which borrowed the raw `--elevation-*` shadows'
-   names for a different mechanism, were removed in `0.5.0`. */
+   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
@@ -36,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;

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

@@ -33,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);
@@ -171,34 +170,42 @@
    `--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. */
-:where(.text-control, .ipt, .textarea, .select, .input-group, .checkbox, .radio, .switch) {
+   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

@@ -26,11 +26,13 @@
     --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 --
+  /* 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"],
@@ -49,6 +51,12 @@
     --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;
@@ -80,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;
   }
 
@@ -173,7 +182,8 @@
     transition: none;
   }
 
-  input[type="checkbox"]:checked {
+  input[type="checkbox"]:checked,
+  input[type="checkbox"]:indeterminate {
     background-color: Highlight;
     border-color: Highlight;
 

package/dist/tw/palette.css

@@ -7,11 +7,14 @@
 @layer theme, base, components, utilities;
 
 @layer theme {
-  :root {
-    --palette-neutral-solid-bg: oklab(0.145 0 0 / 0.2);
+  :root,
+  .light,
+  .theme-light,
+  [data-theme="light"] {
+    --palette-neutral-solid-bg: oklab(0.817 0 0);
     --palette-neutral-solid-fg: oklab(0.205 0 0);
     --palette-neutral-solid-edge: oklab(0 0 0 / 0);
-    --palette-neutral-solid-bg-hover: oklab(0.371 0 0 / 0.34);
+    --palette-neutral-solid-bg-hover: oklab(0.77624 0 0);
     --palette-neutral-solid-edge-hover: oklab(0 0 0 / 0);
     --palette-neutral-soft-fg: oklab(0.205 0 0);
     --palette-neutral-soft-bg: oklab(0.145 0 0 / 0.12);
@@ -233,10 +236,10 @@
   .dark,
   .theme-dark,
   [data-theme="dark"] {
-    --palette-neutral-solid-bg: oklab(0.985 0 0 / 0.2);
+    --palette-neutral-solid-bg: oklab(0.313 0 0);
     --palette-neutral-solid-fg: oklab(0.97 0 0);
     --palette-neutral-solid-edge: oklab(0 0 0 / 0);
-    --palette-neutral-solid-bg-hover: oklab(0.922 0 0 / 0.34);
+    --palette-neutral-solid-bg-hover: oklab(0.40918 0 0);
     --palette-neutral-solid-edge-hover: oklab(0 0 0 / 0);
     --palette-neutral-soft-fg: oklab(0.97 0 0);
     --palette-neutral-soft-bg: oklab(0.985 0 0 / 0.12);