@codenhub/styles 0.6.0 → 0.8.0

package/{dist/tw → tw}/utilities/content.css

@@ -1,5 +1,3 @@
-@reference "../box.css";
-
 /* A scroll box clips whatever paints outside it, and `overflow-x` takes the
    vertical overflow with it, so an aesthetic's halo around the table -- cyber's
    glow -- would be cut flush on every side. The wrapper makes room for the halo
@@ -40,6 +38,19 @@
    instead (below), which every engine draws on the rows. Recorded in
    `registry.json` beside the decision. */
 @utility data-table {
+  /* The neutral reset, carried so `@apply data-table` gets it, as `btn` carries its own. */
+  @layer families {
+    :where(&:not(.data-table, .primary, .secondary, .success, .warning, .destructive, .info)) {
+      --intent-color: var(--color-text);
+      --intent-contrast: var(--color-text-contrast);
+      --intent-hover: var(--color-text-hover);
+      --intent-strong: var(--color-text-strong);
+      --intent-subtle: var(--color-surface);
+      --intent-border: var(--ui-rule-ink, var(--ui-ink, var(--color-border)));
+      --intent-fill-max: 20%;
+    }
+  }
+
   @apply box text-body w-full border-separate text-start;
 
   --_d-fill: 12%;
@@ -54,7 +65,6 @@
   /* Capped the way `box` caps, because the head is a fill of the intent like any
      other and a neutral table head is otherwise a slab of the page's ink with
      ink printed on it. */
-  --table-fill: calc(min(var(--ui-fill, var(--_d-fill)), var(--intent-fill-max, 100%)) * var(--ui-bg-alpha, 1));
   /* The head's plate is the tint, so a table carrying no fill has no head
      plate. `.ghost` means no tint here the way it means no fill everywhere
      else, and a ghost table is boundaries and type and nothing else -- which is
@@ -75,9 +85,13 @@
      than over `--table-fill`'s own `calc()`/`min()` chain, which matters for
      the reason `--table-rule-plated` below records. */
   --table-ground: min(100%, calc(var(--ui-fill, var(--_d-fill)) * 5));
-  --table-head-plate: color-mix(in oklab, var(--intent-subtle) var(--table-ground), transparent);
   --table-head-bg: color-mix(in oklab, var(--intent-color) var(--table-fill), var(--table-head-plate));
   --table-head-fg: color-mix(in oklab, var(--intent-contrast) var(--_on-fill), var(--intent-strong));
+  /* The table's own contrast ink, resolved here so a row with its own intent
+     prints on the table's plate in the ink that plate takes: the row's
+     `--intent-contrast` is chosen for the row's fill, which a row does not
+     paint, and a light one on a light plate reads at 1:1. */
+  --_table-contrast: var(--intent-contrast);
 
   /* Untinted rather than mixed, the same call `.card.soft` makes: 12% ink onto
      `--intent-subtle` still reads as `.solid` on neutral, since neutral's ink
@@ -96,25 +110,45 @@
      element, so nothing here fights `.soft` for `--ui-fill`. `.ghost` is left
      at box's default (`--_d-ground: transparent`), so it stays the fully bare
      boundaries-only table; `.soft` differs from it by keeping an opaque,
-     untinted plate and a head label strip.
-
-     `:not(.solid, .ghost)` rather than `.soft`: the published resting fill is
-     `soft`, so a bare `<table class="data-table">` with no fill class at all is
-     the common case this has to reach. */
+     untinted plate and a head label strip. */
+  /* Whether the table rests on the quiet plate, as 0% or 100%: a resolved
+     fill above nothing and below full. Stepped from the resolved fill, as
+     `surface`'s `--_quiet` is, not keyed on `:not(.solid, .ghost)` here:
+     presentation cascades, and keyed on the class a container's `.solid`
+     filled the head and dropped the frame while the body kept this plate. */
+  --_table-quiet: min(
+    clamp(0%, calc(var(--ui-fill, var(--_d-fill)) * 1000), 100%),
+    clamp(0%, calc((100% - var(--ui-fill, var(--_d-fill))) * 1000), 100%)
+  );
+  /* A table is a pane of content, so under an aesthetic whose surfaces are
+     glass it is glass too: the plate is the aesthetic's surface ground when
+     one is named. Head and body share the plate, as they do on the page. Only
+     the quiet rest reads it: a `.solid` table is opaque, like every `.solid`,
+     and a `.ghost` one is boundaries and type. */
+  --table-ground-plate: var(--ui-surface-ground, var(--color-foreground));
+  --table-fill: min(
+    calc(min(var(--ui-fill, var(--_d-fill)), var(--intent-fill-max, 100%)) * var(--ui-bg-alpha, 1)),
+    calc(100% - var(--_table-quiet))
+  );
+  --table-head-plate: color-mix(
+    in oklab,
+    var(--table-ground-plate) var(--_table-quiet),
+    color-mix(in oklab, var(--intent-subtle) var(--table-ground), transparent)
+  );
+  --_fill-cap: calc(100% - var(--_table-quiet));
+  --_d-ground: color-mix(in oklab, var(--table-ground-plate) var(--_table-quiet), transparent);
+
+  /* A table rests on a plate of its own at every fill but `.ghost`, so no
+     ink from above passes through it, as on `surface`. A ghost table on a
+     filled parent therefore prints the page's ink on that fill: a toggle
+     cannot be stepped from the fill. */
+  --_held-ink: var(--_fg-own);
+  --_held-on: var(--_own-hold);
+
+  /* The blur behind the glass plate. A filter cannot be stepped from a
+     percentage, so this one part stays keyed on the class: a table under a
+     container's `.ghost` in a glass region still blurs what is behind it. */
   &:not(.solid, .ghost) {
-    --table-fill: 0%;
-    --table-head-plate: var(--table-ground-plate);
-    --_fill-cap: 0%;
-    --_d-ground: var(--table-ground-plate);
-
-    /* A table is a pane of content, so under an aesthetic whose surfaces are
-       glass it is glass too: the plate is the aesthetic's surface ground when
-       one is named, and the blur behind it is the one surfaces take. Head and
-       body share the plate, as they do on the page. Only this arm reads them:
-       a `.solid` table is opaque, like every `.solid`, and a `.ghost` one is
-       boundaries and type with nothing behind them to blur. */
-    --table-ground-plate: var(--ui-surface-ground, var(--color-foreground));
-
     -webkit-backdrop-filter: var(--ui-backdrop, none);
     backdrop-filter: var(--ui-backdrop, none);
   }
@@ -158,7 +192,11 @@
      something every engine can carry. `--table-row-hover` below is written the
      same way, for the same reason. */
   --table-rule-plated: color-mix(in oklab, currentColor 20%, transparent);
-  --table-rule-tone: color-mix(in oklab, var(--table-rule-plated) var(--ui-fill, var(--_d-fill)), var(--intent-border));
+  --table-rule-tone: color-mix(
+    in oklab,
+    var(--table-rule-plated) var(--ui-fill, var(--_d-fill)),
+    var(--intent-border, var(--ui-rule-ink, var(--ui-ink, var(--color-border))))
+  );
   --table-rule: color-mix(in oklab, var(--table-rule-tone) var(--table-rule-amount), transparent);
   --table-boundary: color-mix(in oklab, var(--table-rule-tone) var(--table-boundary-amount), transparent);
   /* A hovered row is a step from the table it is in, not from a tone the page
@@ -270,8 +308,9 @@
      `th` centers unless its parent names an alignment, and `start` is the
      initial value, which counts as naming none. */
   --_table-rule-width: var(--ui-border-width, var(--border-width));
-  & th,
-  & td {
+  /* In `:where()`: these are the cells' defaults, and at the 0-1-1 the plain
+     selector carried, `p-0` or `text-center` on a cell lost to them. */
+  :where(& :is(th, td)) {
     @apply px-4 py-3 text-start align-top;
 
     border-bottom-style: var(--ui-rule-style, var(--ui-line-style, solid));
@@ -298,24 +337,51 @@
     border-top-color: var(--table-boundary);
   }
 
-  /* Rules between body rows, on request -- and every line off, on the opposite
-     request. `.ruleless` is declared second so it wins the nonsense combination
-     rather than leaving it to whichever class the author typed first. */
-  &.ruled {
-    --ui-rule: 100%;
-  }
-
-  &.ruleless {
-    --ui-rule: 0%;
-  }
-
-  & th {
+  :where(& th) {
     @apply text-label font-semibold;
   }
 
   /* Rows deliberately inherit the table's intent instead of resetting it, so a
      `.data-table.success` tints its own rows. A `<tr class="warning">` still wins,
-     because an intent class on the element beats an inherited value. */
+     because an intent class on the element beats an inherited value.
+
+     The class only changes the row's intent slots, though, and everything the
+     row paints was resolved on the table: the text, the rule and the hover
+     step are each a custom property whose `var()`s resolved against the
+     table's intent, so they inherited down already-green to a destructive row.
+     A row with its own intent resolves them again against it. The plate stays
+     the table's, so the ink keeps the table's ramp -- `--_on-fill`, inherited
+     as a resolved percentage -- and a solid table's rows still print the
+     table's contrast ink on it. Only a row that names an intent: an ordinary row would resolve
+     the same values, but a `color` declared on every row would override a
+     colour a consumer set on the table. */
+  & tbody tr:is(.neutral, .primary, .secondary, .success, .warning, .destructive, .info) {
+    --table-rule-tone: color-mix(
+      in oklab,
+      var(--table-rule-plated) var(--ui-fill, var(--_d-fill)),
+      var(--intent-border)
+    );
+    --table-rule: color-mix(in oklab, var(--table-rule-tone) var(--table-rule-amount), transparent);
+    --table-hover-tone: color-mix(in oklab, currentColor var(--ui-fill, var(--_d-fill)), var(--intent-hover));
+    --table-row-hover: color-mix(in oklab, var(--table-hover-tone) 12%, transparent);
+
+    /* A neutral solid table caps its fill at 20%, so its plate is a light grey
+       and the ramp keeps `--_on-fill` low: the row's ink is then mostly the
+       row's `--intent-strong`, which is chosen against the row's own subtle
+       ground rather than a grey one, and success, warning and destructive fall
+       under 4.5:1 on it. Those rows print the table's own ink, `--_fg`,
+       inherited already resolved against the table, and keep their intent in
+       the rule and the hover.
+       `--_plate` is the table's too: 100% where the intent's cap stopped its
+       fill, read rather than a `.solid` class on the table, which a
+       container's `.solid` does not put there. */
+    color: color-mix(
+      in oklab,
+      var(--_fg) var(--_plate, 0%),
+      color-mix(in oklab, var(--_table-contrast) var(--_on-fill), var(--intent-strong))
+    );
+  }
+
   & tbody tr > * {
     transition: background-color var(--motion-duration-fast) var(--motion-ease);
   }
@@ -371,9 +437,23 @@
    separate from, so it alone drops the extra ink. The ground itself is not
    moved the way `.panel`'s is: `--intent-subtle` already resolves to
    `--color-surface` for neutral, a real, visible step past the page on its
-   own, so only the wash on top of it goes. `:not(.solid)` so an explicit
-   `.solid` chip is never clamped to a cap it did not ask for. */
+   own, so only the wash on top of it goes. The cap is stepped from the
+   resolved fill, so a full fill -- the chip's own `.solid` or a container's --
+   is never clamped to a cap it did not ask for. */
 @utility kbd {
+  /* The neutral reset, carried so `@apply kbd` gets it, as `btn` carries its own. */
+  @layer families {
+    :where(&:not(.kbd, .primary, .secondary, .success, .warning, .destructive, .info)) {
+      --intent-color: var(--color-text);
+      --intent-contrast: var(--color-text-contrast);
+      --intent-hover: var(--color-text-hover);
+      --intent-strong: var(--color-text-strong);
+      --intent-subtle: var(--color-surface);
+      --intent-border: var(--ui-ink, var(--color-border));
+      --intent-fill-max: 20%;
+    }
+  }
+
   @apply box inline-flex items-center px-1.5 py-0.5 font-mono text-xs font-medium;
 
   --_d-fill: 12%;
@@ -382,6 +462,10 @@
   --_d-elevation: 0;
   --_d-ground: var(--intent-subtle);
 
+  /* A ground of its own, so no ink from above passes through, as on `surface`. */
+  --_held-ink: var(--_fg-own);
+  --_held-on: var(--_own-hold);
+
   /* A small default remains when no aesthetic asks for a complete chip shape. */
   border-radius: var(
     --ui-radius-tight,
@@ -389,13 +473,35 @@
   );
   clip-path: var(--ui-clip-tight, var(--ui-clip, none));
 
-  &:not(.primary, .secondary, .success, .warning, .destructive, .info, .solid) {
-    --_fill-cap: 0%;
-  }
+  /* The neutral wash goes, and only that: a neutral intent (its cap is below
+     100%) asking for less than its cap. Stepped from the resolved fill, as
+     `surface`'s `--_quiet` is, not keyed on a class here: presentation
+     cascades, and keyed on the class a container's `.solid` reached the ink
+     and the line while the plate stayed capped. */
+  --_fill-cap: calc(
+    100% -
+      min(
+        clamp(0%, calc((100% - var(--intent-fill-max, 100%)) * 1000), 100%),
+        clamp(0%, calc((var(--intent-fill-max, 100%) - var(--ui-fill, var(--_d-fill))) * 1000), 100%)
+      )
+  );
 }
 
 /* The same plate with no line around it. */
 @utility code {
+  /* The neutral reset, carried so `@apply code` gets it, as `btn` carries its own. */
+  @layer families {
+    :where(&:not(.code, .primary, .secondary, .success, .warning, .destructive, .info)) {
+      --intent-color: var(--color-text);
+      --intent-contrast: var(--color-text-contrast);
+      --intent-hover: var(--color-text-hover);
+      --intent-strong: var(--color-text-strong);
+      --intent-subtle: var(--color-surface);
+      --intent-border: var(--ui-ink, var(--color-border));
+      --intent-fill-max: 20%;
+    }
+  }
+
   @apply box px-1.25 py-0.75 font-mono;
 
   --_d-fill: 12%;
@@ -404,19 +510,45 @@
   --_d-elevation: 0;
   --_d-ground: var(--intent-subtle);
 
+  /* A ground of its own, so no ink from above passes through, as on `surface`. */
+  --_held-ink: var(--_fg-own);
+  --_held-on: var(--_own-hold);
+
   border-radius: var(
     --ui-radius-tight,
     min(var(--ui-radius, var(--ui-corner, var(--radius-small))), var(--radius-small))
   );
   clip-path: var(--ui-clip-tight, var(--ui-clip, none));
 
-  &:not(.primary, .secondary, .success, .warning, .destructive, .info, .solid) {
-    --_fill-cap: 0%;
-  }
+  /* The neutral wash goes, and only that: a neutral intent (its cap is below
+     100%) asking for less than its cap. Stepped from the resolved fill, as
+     `surface`'s `--_quiet` is, not keyed on a class here: presentation
+     cascades, and keyed on the class a container's `.solid` reached the ink
+     and the line while the plate stayed capped. */
+  --_fill-cap: calc(
+    100% -
+      min(
+        clamp(0%, calc((100% - var(--intent-fill-max, 100%)) * 1000), 100%),
+        clamp(0%, calc((var(--intent-fill-max, 100%) - var(--ui-fill, var(--_d-fill))) * 1000), 100%)
+      )
+  );
 }
 
 /* And at block scale, where the radius is a control's rather than a chip's. */
 @utility pre {
+  /* The neutral reset, carried so `@apply pre` gets it, as `btn` carries its own. */
+  @layer families {
+    :where(&:not(.pre, .primary, .secondary, .success, .warning, .destructive, .info)) {
+      --intent-color: var(--color-text);
+      --intent-contrast: var(--color-text-contrast);
+      --intent-hover: var(--color-text-hover);
+      --intent-strong: var(--color-text-strong);
+      --intent-subtle: var(--color-surface);
+      --intent-border: var(--ui-ink, var(--color-border));
+      --intent-fill-max: 20%;
+    }
+  }
+
   @apply box block overflow-x-auto px-2.5 py-1.5 font-mono;
 
   --_d-fill: 12%;
@@ -425,9 +557,22 @@
   --_d-elevation: 0;
   --_d-ground: var(--intent-subtle);
 
-  &:not(.primary, .secondary, .success, .warning, .destructive, .info, .solid) {
-    --_fill-cap: 0%;
-  }
+  /* A ground of its own, so no ink from above passes through, as on `surface`. */
+  --_held-ink: var(--_fg-own);
+  --_held-on: var(--_own-hold);
+
+  /* The neutral wash goes, and only that: a neutral intent (its cap is below
+     100%) asking for less than its cap. Stepped from the resolved fill, as
+     `surface`'s `--_quiet` is, not keyed on a class here: presentation
+     cascades, and keyed on the class a container's `.solid` reached the ink
+     and the line while the plate stayed capped. */
+  --_fill-cap: calc(
+    100% -
+      min(
+        clamp(0%, calc((100% - var(--intent-fill-max, 100%)) * 1000), 100%),
+        clamp(0%, calc((var(--intent-fill-max, 100%) - var(--ui-fill, var(--_d-fill))) * 1000), 100%)
+      )
+  );
 }
 
 /* Typography wearing a component's name, so it composes none of `box`: `box`
@@ -445,6 +590,19 @@
    what makes the bar read as a bar at the default hairline: doubling 1px gives
    2px, and a quotation mark needs more presence than a table rule. */
 @utility quote {
+  /* The neutral reset, carried so `@apply quote` gets it, as `btn` carries its own. */
+  @layer families {
+    :where(&:not(.quote, .primary, .secondary, .success, .warning, .destructive, .info)) {
+      --intent-color: var(--color-text);
+      --intent-contrast: var(--color-text-contrast);
+      --intent-hover: var(--color-text-hover);
+      --intent-strong: var(--color-text-strong);
+      --intent-subtle: var(--color-surface);
+      --intent-border: var(--ui-ink, var(--color-border));
+      --intent-fill-max: 20%;
+    }
+  }
+
   --_d-fill: 0%;
   --_d-fg-on-fill: 0%;
   --_d-border: 100%;
@@ -475,7 +633,11 @@
      A quotation draws its own edge instead of taking `box`'s, so an edge change
      is made in `box`, `.quote`, and `.progress`. Recorded in `registry.json`
      beside the decision to compose none of `box`. */
-  --quote-line: color-mix(in oklab, transparent var(--ui-fill, var(--_d-fill)), var(--intent-border));
+  --quote-line: color-mix(
+    in oklab,
+    transparent var(--ui-fill, var(--_d-fill)),
+    var(--intent-border, var(--ui-ink, var(--color-border)))
+  );
   --quote-edge: color-mix(in oklab, var(--quote-line) var(--ui-border, var(--_d-border)), transparent);
   --quote-width: calc(var(--ui-border-width, var(--border-width)) * 2 + 1px);
 

package/tw/utilities/index.css

@@ -0,0 +1,11 @@
+@import "../theme.css";
+@import "../typography.css";
+@reference "../box.css";
+
+/* The focused entry: what the rules in `rules.css` need to compile on their
+   own, then the rules. An aggregate entry imports the rules file directly and
+   supplies those needs once -- Tailwind stacks a `@utility` each time a file
+   that defines it is imported or referenced, so a second route to `box.css`
+   doubles every `@apply box`. See docs/internal/model.md (One route to each
+   utility). */
+@import "./rules.css";

package/tw/utilities/layout.css

@@ -0,0 +1,208 @@
+/* The gap is a private each layout declares from `--layout-gap`, and the
+   density modifiers step it: `tight` and `loose` raise a flag
+   (`modifiers.css`) and the layout reads it, so `@apply stack tight` carries
+   the step. A container's `--layout-gap` still reaches every layout inside
+   it, because each one reads the token afresh; a `.tight` or `.loose` stays
+   on its own element, the way `.p-xs` stays on a card, because the layout
+   inside restates the flags at zero specificity in `families`, where one on
+   the element itself still wins. */
+@utility view {
+  @layer families {
+    :where(&:not(.tight)) {
+      --_m-tight: initial;
+    }
+
+    :where(&:not(.loose)) {
+      --_m-loose: initial;
+    }
+
+    :where(&:not(.vertical)) {
+      --_m-vertical: initial;
+    }
+
+    :where(&:not(.horizontal)) {
+      --_m-horizontal: initial;
+    }
+  }
+
+  @apply flex gap-(--_gap);
+
+  --_tight-gap: var(--_m-tight) 0.5rem;
+  --_loose-gap: var(--_m-loose) 1.5rem;
+  --_gap: var(--_loose-gap, var(--_tight-gap, var(--layout-gap)));
+
+  /* A row unless asked: `vertical` stacks, and `horizontal` is a row that
+     wraps and centres its items. */
+  --_vertical-direction: var(--_m-vertical) column;
+  --_horizontal-direction: var(--_m-horizontal) row;
+  --_horizontal-wrap: var(--_m-horizontal) wrap;
+  --_horizontal-align: var(--_m-horizontal) center;
+
+  flex-direction: var(--_horizontal-direction, var(--_vertical-direction, row));
+  flex-wrap: var(--_horizontal-wrap, nowrap);
+  align-items: var(--_horizontal-align, normal);
+}
+
+@utility stack {
+  @layer families {
+    :where(&:not(.tight)) {
+      --_m-tight: initial;
+    }
+
+    :where(&:not(.loose)) {
+      --_m-loose: initial;
+    }
+  }
+
+  @apply flex flex-col gap-(--_gap);
+
+  --_tight-gap: var(--_m-tight) 0.5rem;
+  --_loose-gap: var(--_m-loose) 1.5rem;
+  --_gap: var(--_loose-gap, var(--_tight-gap, var(--layout-gap)));
+}
+
+@utility cluster {
+  @layer families {
+    :where(&:not(.tight)) {
+      --_m-tight: initial;
+    }
+
+    :where(&:not(.loose)) {
+      --_m-loose: initial;
+    }
+
+    :where(&:not(.between)) {
+      --_m-between: initial;
+    }
+  }
+
+  @apply flex flex-wrap items-center gap-(--_gap);
+
+  --_tight-gap: var(--_m-tight) 0.5rem;
+  --_loose-gap: var(--_m-loose) 1.5rem;
+  --_gap: var(--_loose-gap, var(--_tight-gap, var(--layout-gap)));
+
+  --_between-justify: var(--_m-between) space-between;
+
+  justify-content: var(--_between-justify, normal);
+}
+
+@utility auto-grid {
+  @layer families {
+    :where(&:not(.tight)) {
+      --_m-tight: initial;
+    }
+
+    :where(&:not(.loose)) {
+      --_m-loose: initial;
+    }
+  }
+
+  @apply grid gap-(--_gap);
+
+  --_tight-gap: var(--_m-tight) 0.5rem;
+  --_loose-gap: var(--_m-loose) 1.5rem;
+  --_gap: var(--_loose-gap, var(--_tight-gap, var(--layout-gap)));
+
+  grid-template-columns: repeat(auto-fit, minmax(min(var(--layout-grid-min), 100%), 1fr));
+}
+
+@utility section {
+  @apply px-(--layout-gutter) py-(--layout-section-block);
+}
+
+@utility section-content {
+  @layer families {
+    :where(&:not(.narrow)) {
+      --_m-narrow: initial;
+    }
+
+    :where(&:not(.wide)) {
+      --_m-wide: initial;
+    }
+  }
+
+  @apply mx-auto w-full;
+
+  --_narrow-max: var(--_m-narrow) var(--container-narrow);
+  --_wide-max: var(--_m-wide) var(--container-wide);
+
+  max-width: var(--_wide-max, var(--_narrow-max, var(--container-max)));
+}
+
+/* An indicator: intent only, and no presentation token at all. A rule is a
+   line, and neither a fill class nor an edge class has anything to say about
+   one -- a container's `.ghost.edgeless` must not make every `<hr>` inside it
+   invisible. The width is the aesthetic's line width, unscaled. */
+@utility divider {
+  /* The indicator reset, carried so `@apply divider` gets it, as `btn` carries
+     its own: the neutral slots, with the two an indicator takes from the
+     colour it sits in. Without it an applied one read an undefined
+     `--intent-border`. */
+  @layer families {
+    :where(&:not(.divider, .primary, .secondary, .success, .warning, .destructive, .info)) {
+      --intent-color: currentColor;
+      --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: currentColor;
+      --intent-fill-max: 20%;
+    }
+  }
+
+  @layer families {
+    :where(&:not(.vertical)) {
+      --_m-vertical: initial;
+    }
+  }
+
+  --divider-color: var(--intent-color);
+  --divider-width: var(--ui-border-width, var(--border-width));
+
+  @apply m-0 border-0;
+
+  /* Across unless `vertical`, which turns the line to the inline-start edge
+     and stretches it down its row. */
+  --_vertical-width: var(--_m-vertical) 0px;
+  --_vertical-self: var(--_m-vertical) stretch;
+  --_vertical-line: var(--_m-vertical) var(--divider-width);
+
+  width: var(--_vertical-width, 100%);
+  align-self: var(--_vertical-self, auto);
+  border-color: var(--divider-color);
+  border-style: var(--ui-rule-style, var(--ui-line-style, solid));
+  border-top-width: var(--_vertical-width, var(--divider-width));
+  border-inline-start-width: var(--_vertical-line, 0px);
+}
+
+@utility selection-contrast {
+  &::selection,
+  & *::selection {
+    background: var(--color-primary-contrast);
+    color: var(--color-primary);
+  }
+}
+
+/* `.visually-hidden`, the standard clip-based recipe. Tailwind's `sr-only` does
+   nothing on the vanilla entries (`.`, `/native`), which compile real CSS from
+   a scan of `src/` alone with no Tailwind utility layer to reach, so the
+   package publishes its own.
+
+   It is not named `.sr-only`: on a `/tw` entry the consumer's own Tailwind
+   build supplies that utility, and two same-named utilities in one cascade
+   collide silently -- the collision `registry.test.ts` polices (see
+   `data-table`'s `renamedFrom` in `registry.json`). `@source
+   inline("visually-hidden")` in `utilities/index.css` force-emits it on the
+   entries with no scannable markup of their own. */
+@utility visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

package/tw/utilities/rules.css

@@ -0,0 +1,8 @@
+/* Every utility, with nothing they need: `content.css` applies `box`, which
+   the importing entry supplies once. See `index.css` beside this file. */
+@import "./layout.css";
+@import "./content.css";
+
+/* Safelists the utilities for the compiled build, which has no markup to scan.
+   `scripts/build-tw.mjs` strips it from the `tw/` copy -- see the note in
+   `components/index.css`. */