actual-css 0.11.1 → 0.13.0

package/docs/pages/components/dialog.md

@@ -6,13 +6,12 @@
 
 ## Class reference
 
-| Class                  | Kind        | Description                                    |
-| ---------------------- | ----------- | ---------------------------------------------- |
-| `.modal`               | Component   | Centered surface on the native `<dialog>`.     |
-| `.scrollable`          | Variant     | Header and footer stay while the body scrolls. |
-| `.dialog-confirmation` | Variant     | Message above a full-width action band.        |
-| `.dialog-icon`         | Component   | Circular intent-aware icon well.               |
-| `.close`               | Composition | Icon-only close button, at the top end.        |
+| Class          | Kind        | Description                                    |
+| -------------- | ----------- | ---------------------------------------------- |
+| `.modal`       | Component   | Centered surface on the native `<dialog>`.     |
+| `.scrollable`  | Variant     | Header and footer stay while the body scrolls. |
+| `.dialog-icon` | Component   | Circular intent-aware icon well.               |
+| `.close`       | Composition | Icon-only close button, at the top end.        |
 
 ## Anatomy
 
@@ -26,8 +25,10 @@ controls second. The title has the close control's minimum height; its leading
 icon and every trailing control share the same center axis. A wrapped title
 simply makes the row taller.
 
-A direct `dialog > header` is dialog chrome and forms a distinct header band.
-Put an ordinary content heading inside the padded `form` or `.stack` instead.
+A direct `dialog > header` is dialog chrome and forms a distinct header band,
+painted `--surface-subtle`. Change the fill with a surface utility on the header
+(`<header class="background-raised">`). Put an ordinary content heading inside
+the padded `form` or `.stack` instead.
 
 Keep a corner [`.close`](close.md) as a direct child of the dialog and put the
 title in the wrapper's direct `<header>`. The button then stays outside the
@@ -42,9 +43,35 @@ The corner close overlays the panel edge, so a body tall enough to scroll would
 run its scrollbar under the button. Give such a dialog the `scrollable` anatomy:
 the close then sits over the fixed header and the scrollbar starts below it.
 
-Add `.bleed` to that header when it should form a full-width band. It reaches
-the dialog edges, keeps the modal's inner padding, and can take a surface token
-such as `background: var(--surface-subtle)`.
+Add `.bleed` to that header, or to the wrapper's footer, when it should form a
+full-width band. It reaches the dialog edges and corners, keeps the modal's
+inner padding, and takes a surface utility such as `.background-subtle`.
+
+The wrapper's `<footer>` is a structural slot: it stays fixed under
+`.scrollable` but has no layout of its own. Compose the action row in markup —
+`<footer class="cluster justify-content-end">` for trailing actions,
+`.justify-content-space-between` for a split pair.
+
+### Where each region lives
+
+Two anatomies are legitimate. Pick one; each owns its scroll, footer, and close
+placement.
+
+**Wrapper header** — a `<header>` inside the `form`/`.stack` body. The wrapper
+owns padding, rhythm, and overflow. With `.scrollable` the header and footer are
+fixed rows and the content between them scrolls. The `.close` stays a direct
+child of the dialog and the header reserves its inline room.
+
+**External header** — a direct `dialog > header`, before the body wrapper. The
+header is dialog chrome outside the scroll container, so it never scrolls. The
+footer stays inside the wrapper and is the trailing fixed row under
+`.scrollable`. Wrap the `.close` in the header's trailing `.cluster` to keep it
+in flow; a `.close` that is a direct child of the header is still the absolute
+corner overlay, and the header reserves its room.
+
+The `.scrollable` row template follows the regions the wrapper actually holds,
+so a modal without a header, without a footer, or with an external header all
+keep the footer reachable and the body scrollable.
 
 ## Usage
 
@@ -97,7 +124,7 @@ runtime, backdrop clicks give a small static feedback instead of closing.
       <p>The project, saved reports, and connected automations will be removed permanently.</p>
     </div>
 
-    <footer>
+    <footer class="cluster justify-content-end">
       <button class="btn outline" value="cancel">Cancel</button>
 
       <button class="btn danger"
@@ -109,12 +136,19 @@ runtime, backdrop clicks give a small static feedback instead of closing.
 </dialog>
 ```
 
-For a compact destructive confirmation with a leading status icon, compose
-`dialog-confirmation` with the media object. The icon well accepts the shared
-intent and emphasis classes; `dialog-icon danger soft` creates the tinted red
-circle while keeping the glyph centered. The footer becomes a separate action
-band whose two actions sit at its edges, so the cancel-style control never sits
-next to the committing one.
+### Confirmation with an icon and an action band
+
+For a compact confirmation with a leading status icon, put a `.dialog-icon` and
+the text column in a `.media` row. The first heading of that column centers on
+the icon; following copy stays in the same column. The icon well accepts the
+shared intent and emphasis classes: `dialog-icon danger soft` is the tinted red
+circle.
+
+The action band is the footer composed with existing primitives: `.bleed`
+reaches the panel edges and corners, `.background-subtle` paints it, and
+`.cluster.justify-content-space-between` splits the decision pair. Keep the
+cancel-style action first, so it holds the leading edge and never sits next to
+the committing one.
 
 ```html demo
 <button class="btn danger"
@@ -126,7 +160,7 @@ next to the committing one.
   Deactivate account
 </button>
 
-<dialog class="modal dialog-confirmation"
+<dialog class="modal"
         id="deactivate-dialog"
         closedby="none"
         style="--modal-size: 40rem">
@@ -136,13 +170,13 @@ next to the committing one.
         <i class="ti ti-alert-triangle"></i>
       </span>
 
-      <header>
+      <header class="stack">
         <h3>Deactivate account</h3>
         <p class="muted">Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone.</p>
       </header>
     </div>
 
-    <footer>
+    <footer class="bleed background-subtle cluster justify-content-space-between">
       <button class="btn outline" value="cancel">Cancel</button>
       <button class="btn danger" value="deactivate">Deactivate</button>
     </footer>
@@ -152,8 +186,7 @@ next to the committing one.
 
 For a trailing illustration, use a direct `<header>` as the message region and
 compose it as a non-wrapping split cluster. `.grow` keeps the text column
-flexible while `.dialog-icon` stays at the inline end. The confirmation variant
-pads either this header or the leading-icon `.media` shape above.
+flexible while `.dialog-icon` stays at the inline end.
 
 Use the same anatomy in a `.card` instead when the surface belongs in page
 content and does not need modal focus or a backdrop.
@@ -168,7 +201,7 @@ content and does not need modal focus or a backdrop.
   Customize workspace
 </button>
 
-<dialog class="modal dialog-confirmation"
+<dialog class="modal"
         id="customize-dialog"
         closedby="none"
         aria-labelledby="customize-dialog-title">
@@ -185,9 +218,9 @@ content and does not need modal focus or a backdrop.
       </span>
     </header>
 
-    <footer>
-      <button class="btn primary" value="customize">Customize</button>
+    <footer class="bleed background-subtle cluster justify-content-end">
       <button class="btn ghost" value="later">Later</button>
+      <button class="btn primary" value="customize">Customize</button>
     </footer>
   </form>
 </dialog>
@@ -289,7 +322,7 @@ the dialog title itself is not an alert.
 
     <p>Confirm these settings to finish setting up the workspace.</p>
 
-    <footer>
+    <footer class="cluster justify-content-end">
       <button class="btn primary inline-size-full" value="continue">Continue</button>
     </footer>
   </form>
@@ -310,6 +343,9 @@ keyboard-focusable so it can be scrolled without a pointer — it takes a focus
 ring like any other focusable element, and it can claim initial focus when
 nothing focusable precedes it. Mark the control you want focused `autofocus`.
 
+Each non-header/footer child region is its own scrollport, so wrap the body in a
+single element (`<div class="stack">`) when there should be one scrollbar.
+
 ```html demo
 <button class="btn"
         type="button"
@@ -341,7 +377,7 @@ nothing focusable precedes it. Mark the control you want focused `autofocus`.
       <p>Section 7. Continued use confirms acceptance of the current terms.</p>
     </div>
 
-    <footer>
+    <footer class="cluster justify-content-end">
       <button class="btn outline" value="cancel">Cancel</button>
 
       <button class="btn primary" value="accept">
@@ -352,6 +388,55 @@ nothing focusable precedes it. Mark the control you want focused `autofocus`.
 </dialog>
 ```
 
+An external header follows the same contract from the other side: the header is
+chrome outside the wrapper, the footer stays in the wrapper, and the content
+between them scrolls.
+
+```html demo
+<button class="btn"
+        type="button"
+        commandfor="external-scroll-dialog"
+        command="show-modal"
+        aria-haspopup="dialog"
+        aria-controls="external-scroll-dialog">
+  Open external-header modal
+</button>
+
+<dialog class="modal scrollable"
+        id="external-scroll-dialog"
+        closedby="any"
+        aria-labelledby="external-scroll-title">
+  <header>
+    <h3 id="external-scroll-title">Release notes</h3>
+
+    <div class="cluster">
+      <button class="close"
+              type="button"
+              commandfor="external-scroll-dialog"
+              command="request-close"
+              aria-controls="external-scroll-dialog"
+              aria-label="Close dialog"></button>
+    </div>
+  </header>
+
+  <form method="dialog" class="stack">
+    <div class="stack">
+      <p>Section 1. The service stores project settings, interface preferences, and theme choices.</p>
+      <p>Section 2. Administrators can invite users and review access periodically.</p>
+      <p>Section 3. Billing changes may affect future invoices.</p>
+      <p>Section 4. Export tools are provided for common formats.</p>
+      <p>Section 5. Support requests should include browser and account context.</p>
+      <p>Section 6. Continued use confirms acceptance of the current terms.</p>
+    </div>
+
+    <footer class="cluster justify-content-end">
+      <button class="btn outline" value="cancel">Cancel</button>
+      <button class="btn primary" value="accept">Accept</button>
+    </footer>
+  </form>
+</dialog>
+```
+
 ## Overlays inside modals
 
 Flyouts and tooltips opened from inside a modal dialog stay exactly where they
@@ -490,7 +575,7 @@ transition.
       <p>This dialog morphs to and from the trigger button.</p>
     </header>
 
-    <footer>
+    <footer class="cluster justify-content-end">
       <button class="btn outline" value="cancel">Cancel</button>
       <button class="btn primary" value="confirm">Confirm</button>
     </footer>
@@ -510,10 +595,13 @@ animation-friendly, and consistent across supported browsers.
   dialog or an inherited value both reach it. A dialog is shrink-to-fit: a
   composition that must fill this width sets `inline-size` as well.
 - `--modal-pad` — padding of the direct `<form>` or `.stack` content wrapper.
-- `--modal-header-bg` — background of a direct header band.
 - `--dialog-viewport-gap` — distance kept between the dialog and the viewport edges.
-- `--dialog-icon-size` — diameter of the `.dialog-icon` circle.
-- `--dialog-icon-glyph-size` — size of the glyph centered inside `.dialog-icon`.
+- `--dialog-icon-size` — diameter of the `.dialog-icon` circle. The heading
+  beside a leading icon reads the same hook to center on it, so set it on the
+  icon's media row (or the dialog) and both inherit one value. A value on the
+  icon alone sizes only the circle.
+- `--dialog-icon-glyph-size` — size of the glyph centered inside `.dialog-icon`;
+  same placement as `--dialog-icon-size`.
 - `--close-size` / `--close-icon-size` — size of the corner `.close` and of its
   X. The header reserves the close size, its edge inset, and a content gap so
   the title never runs under it.

package/docs/pages/components/drawer.md

@@ -61,7 +61,7 @@ your intended target `autofocus`; otherwise the body claims initial focus.
   </header>
 
   <nav>
-    <ul class="nav-list stack">
+    <ul class="nav-list">
       <li><a href="#" aria-current="page">Home</a></li>
       <li><a href="#">Users</a></li>
       <li><a href="#">Settings</a></li>
@@ -103,7 +103,7 @@ actions and the close button can close the drawer.
       <p>Unsaved changes will be lost if you close without saving.</p>
     </div>
 
-    <footer class="cluster" style="--cluster-justify: end">
+    <footer class="cluster justify-content-end">
       <button class="btn" value="save">Save</button>
     </footer>
   </form>

package/docs/pages/components/list.md

@@ -39,14 +39,10 @@ gap: `.list-item-content` always takes the row's free space and
 leading region or not. A settings row — a label, a description, and one
 control on the end edge — is the two-region form.
 
-Regions align to the row's first line: the leading check or avatar, the title,
-and the trailing metadata or control sit on one horizontal line while
-supporting text wraps beneath — a structured row, not a centered button. For a
-shared two-line arrangement where leading and trailing truly need to center,
-the app composes the alignment itself rather than switching this default.
-A pure traversal affordance such as a trailing caret can opt out of the
-first-line rule on its own item with `align-self: center`, keeping metadata
-rows unaffected.
+Regions center on the row. When supporting text runs to three lines or more,
+add `.items-start` to the row, or to the `.list` for every row, so the leading
+avatar and the trailing control stay on the title line instead of floating
+mid-paragraph (top-align, align to first line).
 
 ```html demo
 <ul class="list">
@@ -83,7 +79,7 @@ For a navigable row, keep the list semantics and put `.list-item` on the link:
         <strong class="list-item-title">Profile</strong>
         <span class="list-item-text">Name, photo, and contact details</span>
       </span>
-      <i class="ti ti-chevron-right list-item-trailing" style="align-self: center" aria-hidden="true"></i>
+      <i class="ti ti-chevron-right list-item-trailing" aria-hidden="true"></i>
     </a>
   </li>
 </ul>
@@ -92,10 +88,10 @@ For a navigable row, keep the list semantics and put `.list-item` on the link:
 Do not attach click JavaScript to the entire row. Use a link for navigation and
 a button or native control for actions.
 
-In a master/detail navigation, mark the current row with `aria-current` on its
-link, using the value that matches the semantics (`page`, `location`, …).
-Presence is the contract: set the attribute on the current row and remove it
-elsewhere, never `aria-current="false"`. The [Workspaces example](../examples/overview.md)
+Mark the current row on its link with `aria-current="page"` when the row opens
+a page, or `aria-current="true"` when it is the current item of a master/detail
+view (a conversation, a thread, a record) that is not a page of its own. Any
+other value is inert. The [Workspaces example](../examples/overview.md)
 shows a current row with trailing actions and a flyout. Navigable rows usually
 want a non-zero `--list-item-pad-inline`: without that gutter, the current
 indicator touches the leading region and the trailing touches the row edge.

package/docs/pages/components/navbar.md

@@ -1,23 +1,22 @@
 # Navbar
 
-> Horizontal top-level navigation bar with a brand, an inline link list, and a vertical nav-list for drawers.
+> Horizontal top-level navigation bar with a brand, an inline `.cluster` link list, and a vertical `.nav-list` for drawers.
 
 - Use `.navbar` for the horizontal bar shell.
 - `.navbar-brand` is the brand link at the inline start.
-- `.navbar-nav` is the horizontal link list; its items are `.nav-link`.
+- Horizontal links live in a `.cluster`; its items are `.nav-link`.
 - `.nav-list` is the shared vertical navigation list, reused by `.drawer` for stacked links.
-- Mark the current page with `aria-current="page"` on the active `.nav-link`.
-- Presence is the contract: set `aria-current` on the current link and remove
-  it elsewhere, never `aria-current="false"`. Scrollspy follows the same rule
-  with `aria-current="location"`.
+- Mark the current page with `aria-current="page"` on the active `.nav-link`,
+  or the current section of the page with `aria-current="location"` (what
+  scrollspy sets). Any other value is inert.
 
 For a public or normally scrolling page, `.navbar` belongs inside the semantic
 site header. Do not use `.topbar` or `.app-layout` unless the page actually has
 the specialized persistent application-shell behavior those APIs describe.
 
-`.navbar-nav` and `.nav-list` are mutually exclusive: `.navbar-nav` is a horizontal
-flex list, `.nav-list` a vertical grid. Putting both on one element resolves to
-`.nav-list` (vertical) — pick one per container.
+Horizontal navbar links use a `.cluster`. Use `.nav-list` when the navigation
+becomes a full-width vertical list. The two are distinct contracts, so pick one
+per container.
 
 `.navbar` stays the horizontal bar for a site or webapp header with a brand and
 normal document scrolling. `.app-nav` is not merely a stacked-icon flavour of it:
@@ -32,7 +31,6 @@ icons. See [App Navigation](app-navigation.md).
 | --------------- | ----------- | ----------------------------------------------------- |
 | `.navbar`       | Component   | Horizontal bar shell.                                 |
 | `.navbar-brand` | Composition | Brand link at the inline start.                       |
-| `.navbar-nav`   | Composition | Horizontal link list.                                 |
 | `.nav-link`     | Component   | A link item; current page via `aria-current="page"`.  |
 | `.nav-list`     | Component   | Shared vertical navigation list, reused by `.drawer`. |
 
@@ -41,7 +39,7 @@ icons. See [App Navigation](app-navigation.md).
 ```html demo
 <nav class="navbar" aria-label="Main">
   <a class="navbar-brand" href="/">Actual CSS</a>
-  <ul class="navbar-nav">
+  <ul class="cluster">
     <li><a class="nav-link" href="/docs" aria-current="page">Docs</a></li>
     <li><a class="nav-link" href="/components">Components</a></li>
     <li><a class="nav-link" href="/examples">Examples</a></li>
@@ -60,31 +58,36 @@ section titles, a pinned account footer, and the native current state.
 There is no collapse/toggler mechanism. For a responsive navigation, keep the
 horizontal `.navbar` for the desktop bar and compose the mobile experience from
 a `.drawer` with a vertical `.nav-list`, opened by a `command="show-modal"` /
-`commandfor` trigger. Keep that trigger outside the `<nav>` subtree you hide at
-narrow widths, or hiding the nav hides the control that opens it.
+`commandfor` trigger. Keep that trigger in the bar but outside the `<nav>`
+subtree you hide at narrow widths, or hiding the nav hides the control that
+opens it: the bar is then the `<header>`, and the links get their own `<nav>`.
 
 When the compact layout drops labels, keep that text in the DOM and hide it
 visually instead of replacing it with `aria-label` strings: one source for the
 accessible name.
 
 ```html demo
-<nav class="navbar" aria-label="Main">
+<header class="navbar">
   <a class="navbar-brand" href="/">Actual CSS</a>
-  <ul class="navbar-nav">
-    <li><a class="nav-link" href="/" aria-current="page">Home</a></li>
-    <li><a class="nav-link" href="/docs">Docs</a></li>
-  </ul>
-</nav>
-
-<button class="btn ghost"
-        type="button"
-        command="show-modal"
-        commandfor="site-nav"
-        aria-haspopup="dialog"
-        aria-controls="site-nav"
-        aria-label="Open menu">
-  <i class="ti ti-menu-2" aria-hidden="true"></i>
-</button>
+  <div class="cluster">
+    <nav class="site-links" aria-label="Main">
+      <ul class="cluster">
+        <li><a class="nav-link" href="/" aria-current="page">Home</a></li>
+        <li><a class="nav-link" href="/docs">Docs</a></li>
+      </ul>
+    </nav>
+
+    <button class="btn ghost site-menu"
+            type="button"
+            command="show-modal"
+            commandfor="site-nav"
+            aria-haspopup="dialog"
+            aria-controls="site-nav"
+            aria-label="Open menu">
+      <i class="ti ti-menu-2" aria-hidden="true"></i>
+    </button>
+  </div>
+</header>
 
 <dialog class="drawer"
         id="site-nav"
@@ -99,7 +102,7 @@ accessible name.
   </header>
 
   <nav>
-    <ul class="nav-list stack">
+    <ul class="nav-list">
       <li><a class="nav-link" href="#" aria-current="page">Home</a></li>
       <li><a class="nav-link" href="#">Docs</a></li>
       <li><a class="nav-link" href="#">Components</a></li>
@@ -108,6 +111,22 @@ accessible name.
 </dialog>
 ```
 
+The demo shows both controls; the application picks one per width:
+
+```css
+@media (width < 40rem) {
+  .site-links {
+    display: none;
+  }
+}
+
+@media (width >= 40rem) {
+  .site-menu {
+    display: none;
+  }
+}
+```
+
 The drawer can be hidden until opened: give the `dialog` the `hidden` attribute
 in the HTML and let the command runtime manage it, or rely on the drawer being
 rendered only on the mobile layout. `command` and `commandfor` work without

package/docs/pages/components/pagination.md

@@ -54,3 +54,22 @@ buttons — they are decorative, not actionable.
   </ol>
 </nav>
 ```
+
+## Narrow screens
+
+When the items do not fit, the row wraps: every page stays visible and
+clickable. That is the fallback, not the mobile design. For a phone or a
+narrow column (responsive, mobile, small screen), render a shorter range — the
+server knows which pages matter around the current one:
+
+```html demo
+<nav aria-label="Pagination">
+  <ol class="pagination sm">
+    <li><a href="?page=7" class="btn ghost" rel="prev"><i class="ti ti-chevron-left" aria-hidden="true"></i> Previous</a></li>
+    <li><a href="?page=7" class="btn ghost" aria-label="Page 7">7</a></li>
+    <li><a href="?page=8" class="btn ghost" aria-current="page" aria-label="Page 8">8</a></li>
+    <li><a href="?page=9" class="btn ghost" aria-label="Page 9">9</a></li>
+    <li><a href="?page=9" class="btn ghost" rel="next">Next <i class="ti ti-chevron-right" aria-hidden="true"></i></a></li>
+  </ol>
+</nav>
+```

package/docs/pages/components/steps.md

@@ -145,23 +145,28 @@ names, or when a step should be navigable:
 ```
 
 **Actual CSS never hides an authored step label.** Labels stay visible at every
-width. If a labelled row does not fit its space, it scrolls — and the honest
-answers to that are more room, fewer stages, or `.steps-vertical`.
+width. Stacked steps keep their markers evenly spaced, and long names wrap
+inside their share, hyphenated when the page declares a `lang`. The first and
+last steps align with the row's edges, labels included, so the track lines up
+with the heading above it. Short labels fit a phone with no width budget.
 
-Since scrolling is the fallback, a labelled row is worth pairing with
-`.scroller`, which gives the native scrollbar the theme's density and colour
-instead of the OS default:
+Set `--step-min` when names need a wider minimum share. If the markers or that
+minimum do not fit, the row scrolls; use `.steps-vertical` when every name must
+remain visible without horizontal scrolling.
+
+In supporting browsers, a row that scrolls starts on its `aria-current="step"`
+instead of step 1. A row
+that raises `--step-min` can scroll, so it is worth pairing with `.scroller`,
+which gives the native scrollbar the theme's density and colour instead of the
+OS default:
 
 ```html
 <ol class="steps steps-horizontal scroller">
 ```
 
-Steps does not apply it for you, because scrollbar treatment is an app-wide
-decision rather than a per-component one. Every other scroll container —
-`.table`, a `.flyout`, a scrolling `dialog` — leaves the scrollbar alone too,
-so a page that thinned only its stepper would show two kinds of scrollbar. Put
-`.scroller` on whatever scrolls, once. See the sizing and wrapping page for its
-hooks.
+Steps does not apply it for you; see
+[one-row strips](../utilities/sizing-wrapping.md#one-row-strips) for the
+page-wide rule and the hooks.
 
 Do not add `.stable-gutter` here. It reserves gutter on the inline axis, for a
 vertical scrollbar this row never draws, so it narrows the row instead of
@@ -361,8 +366,9 @@ On `.steps`, so both orientations read them:
 
 `.steps-horizontal` only:
 
-- `--step-min` — minimum item width in the stacked horizontal layout
-- `--step-gap` — marker-to-label space in the stacked horizontal layout
+- `--step-min` — minimum width budget for stacked steps; the first and last
+  cells use half that budget plus half the marker width
+- `--step-gap` — marker-to-label and between-step space in the stacked layout
 - `--step-connector` — default horizontal connector background
 - `--step-inline-connector` — optional connector background for wide horizontal steps
 
@@ -372,12 +378,11 @@ On `.steps`, so both orientations read them:
 
 ## Notes
 
-Do not mix labelled and unlabelled steps in one sequence. Each step is sized on
-its own content, so a mixed sequence renders a narrow marker between reading-
-width steps — it lays out, but it reads as a gap rather than as progress.
+Do not mix labelled and unlabelled steps in one sequence. Empty steps align
+their markers to the start; labelled steps centre them over their names.
 
 A step name belongs in a `.step-label`. Bare text in an `<li>` is outside the
-contract: it is content, so it gets a reading width like a label, but no rule
+contract: it takes the same item floor as a label, but no rule
 places or aligns it.
 
 The **2 to 5** range applies to the horizontal orientation, and the inline
@@ -399,9 +404,8 @@ to stay distinguishable there. Steps deliberately ships no forced-colors
 override of its own: painting the marker `Highlight` makes the number or glyph
 inside it unreadable, which is worse than the ambiguity it removes.
 
-The inline threshold is calibrated to the default `--step-min`. Container
-queries cannot read custom properties, so changing `--step-min` moves the
-scroll budget but not the threshold.
+The inline threshold reserves connector space for five named stages. Changing
+`--step-min` moves the stacked scroll budget without moving that threshold.
 
 See [Steps representations and thresholds](https://github.com/lekoala/actual-css/blob/master/docs/design-notes/steps.md)
 for why the contract is shaped this way, and which alternatives were measured

package/docs/pages/components/table.md

@@ -101,9 +101,9 @@ table width before the wrapper scrolls horizontally.
 ## Compact tables
 
 `.compact` lowers cell padding and establishes compact density for controls or
-spacing helpers inside cells. Font size and icons stay unchanged; the framework's
-denser font width may apply when the typeface supports it. It is the
-same vocabulary as `.card.compact`.
+spacing helpers inside cells. The text stays as set; a data-heavy table that
+also wants condensed type sets `font-stretch` on itself. It is the same
+vocabulary as `.card.compact`.
 
 ```html demo
 <div class="table-wrap">

package/docs/pages/enhancements/flyout.md

@@ -322,7 +322,7 @@ can be multi-column with `<section>` / `<ul>` groups.
 
 ```html demo
 <nav aria-label="Main navigation">
-  <ul class="list-reset cluster">
+  <ul class="cluster">
     <li class="flyout-trigger">
       <button class="btn ghost"
               type="button"
@@ -373,7 +373,7 @@ a separate `dialog.drawer` when the content needs a modal mobile presentation.
 
 ```html demo
 <nav aria-label="Product navigation">
-  <ul class="list-reset cluster">
+  <ul class="cluster">
     <li class="flyout-trigger">
       <button class="btn ghost"
               type="button"

package/docs/pages/enhancements/scrollspy.md

@@ -4,15 +4,15 @@
 
 Scrollspy is a behavior hook, not a visual component. It marks a navigation
 region for the JavaScript enhancement. Pair it with `.nav-list` and `.nav-link`,
-or style `[aria-current]` yourself.
+or style `[aria-current="location"]` yourself.
 
 ## Class reference
 
-| Class        | Kind        | Description                                                     |
-| ------------ | ----------- | --------------------------------------------------------------- |
-| `.scrollspy` | Component   | Marks the nav region for the enhancer; adds no visual styles.   |
-| `.nav-list`  | Composition | Vertical list of navigation links.                              |
-| `.nav-link`  | Component   | Navigation link whose active state comes from `[aria-current]`. |
+| Class        | Kind        | Description                                                   |
+| ------------ | ----------- | ------------------------------------------------------------- |
+| `.scrollspy` | Component   | Marks the nav region for the enhancer; adds no visual styles. |
+| `.nav-list`  | Composition | Vertical list of navigation links.                            |
+| `.nav-link`  | Component   | Navigation link, current on `aria-current="location"`.        |
 
 ## Usage
 
@@ -26,7 +26,7 @@ or style `[aria-current]` yourself.
 
 ```html demo
 <nav class="scrollspy" data-enhance="scrollspy" aria-label="Page sections">
-  <ol class="nav-list stack">
+  <ol class="nav-list">
     <li><a class="nav-link" href="#overview" aria-current="location">Overview</a></li>
     <li><a class="nav-link" href="#tokens">Tokens</a></li>
     <li><a class="nav-link" href="#components">Components</a></li>