actual-css 0.11.1 → 0.13.0

package/docs/pages/layout/stack.md

@@ -39,19 +39,24 @@ content, keep them in normal block flow instead:
 Use `.stack` for the vertical rhythm *between* related items inside one region,
 not as the wrapper that lays out independent full-width regions of a page.
 
-## Choosing a density
+## Choosing a rhythm
 
-`--gap` is the primitive's channel, and the density context variants set it at
-the point of use. Apply the density class on the stack itself to size one
-instance, or on an ancestor to reach nested layouts. Pick the one that matches
-how tightly the children belong together:
+`--gap` is the primitive's channel. `.tight` and `.loose` set it and nothing
+else; apply one on the stack to space one instance, or on an ancestor to reach
+nested layouts. Pick the one that matches how tightly the children belong
+together:
 
 | Markup            | Gap  | Use for                                    |
 | ----------------- | ---- | ------------------------------------------ |
 | `.stack gap-none` | 0    | Lines forming one typographic unit         |
-| `.stack compact`  | 8px  | A homogeneous series of controls           |
+| `.stack tight`    | 8px  | A homogeneous series of controls           |
 | `.stack`          | 12px | Normal flow between distinct elements      |
-| `.stack spacious` | 24px | Sections, or blocks that read as separated |
+| `.stack loose`    | 24px | Sections, or blocks that read as separated |
+
+**Size** changes a component's scale. **Density** (`.compact`, `.spacious`)
+changes UI geometry and rhythm together: gap, padding, control size. **Rhythm**
+(`.tight`, `.loose`) changes the gap only — closer or farther items, tighter
+spacing without smaller buttons. Use one rhythm class per element.
 
 One typographic unit means a name and a job title, or a figure and its caption.
 A homogeneous series means a radio list, a checkbox list, or a compact vertical
@@ -60,13 +65,13 @@ menu.
 The distinction between the first two matters. `42` above `Open issues` is
 almost a single block of text, so it takes `gap-none`. Three `.choice` labels
 stay three separate controls that happen to form one group, so they take
-`compact` — tighter than the default, but still spaced.
+`tight` — tighter than the default, but still spaced.
 
-`.compact` and `.spacious` rebind `--gap` to `--space-20` and `--space-50`.
-Because the token is inherited, the same two classes also tighten the inner gap
-of any nested stack, cluster, and grid. For a one-off gap that must *not* follow
-density, set the `gap` property directly on the instance (the next section
-explains why).
+`.tight` and `.loose` rebind `--gap` to `--space-20` and `--space-50`, the same
+steps `.compact` and `.spacious` use. Because the token is inherited, they also
+tighten the inner gap of any nested stack, cluster, and grid. For a one-off gap
+that must *not* reach nested layouts, set the `gap` property directly on the
+instance (the next section explains why).
 
 A stack that mixes kinds keeps the default: five `.field` wrappers and one lone
 `.choice` is a form that contains a checkbox, not a list of options, and
@@ -92,7 +97,7 @@ depth:
 ```
 
 Both give the region the same spacing; only the second stops there. This is what
-makes a nested `.stack compact` a real density choice — 12px down to 8px — rather
+makes a nested `.stack tight` a real rhythm choice — 12px down to 8px — rather
 than a patch cancelling a rhythm inherited from three levels up.
 
 Setting `--gap` is still the right move on the element that *consumes* it: a
@@ -100,8 +105,8 @@ one-off `--gap` on a card body or an actions row tunes that primitive and
 nothing below it, because the setter is the consumer. The leak only appears when
 a container sets the token and its children read it.
 
-`.compact` and `.spacious` are the deliberate exception: they set `--gap`
-precisely so a density context reaches nested layouts.
+The rhythm and density classes are the deliberate exception: they set `--gap`
+precisely so the context reaches nested layouts.
 
 ## Grouping items tightly
 

package/docs/pages/layout/switcher.md

@@ -18,3 +18,5 @@ independently.
 ### Hooks
 
 - `--switcher-threshold` controls the space needed before all peers share a row.
+  The children read it, so it also reaches the children of a nested
+  switcher; set it on the nested switcher to give it its own threshold.

package/docs/pages/layout/topbar.md

@@ -4,17 +4,19 @@ Sticky, frosted top bar shell for app/dashboard layouts with a persistent sideba
 
 > **Module** — import `actual-css/css/layout/topbar` or `actual-css/css/layout`.
 
-Use `.topbar` for the structural shell of an app-shell header: sticky positioning, stacking, and a frosted background. Row content — search, breadcrumb, actions — stays local to the page.
+Use `.topbar` for the structural shell of an app-shell header: sticky positioning, stacking, and a frosted background. Its children sit in a centered row by default; a layout primitive on the same element, such as `topbar cluster`, replaces that row. Row content — search, breadcrumb, actions — stays local to the page.
 
 ```html demo
 <header class="topbar">
   <button class="btn neutral ghost" type="button" aria-label="Open navigation">
     <i class="ti ti-menu-2" aria-hidden="true"></i>
   </button>
-  <ol class="breadcrumb" aria-label="Breadcrumb">
-    <li><a href="#">Overview</a></li>
-    <li aria-current="page">Accounts</li>
-  </ol>
+  <nav aria-label="Breadcrumb">
+    <ol class="breadcrumb">
+      <li><a href="#">Overview</a></li>
+      <li aria-current="page">Accounts</li>
+    </ol>
+  </nav>
   <div class="grow"></div>
   <span class="avatar sm"><abbr>LW</abbr></span>
 </header>

package/docs/pages/patterns/icon-slot.md

@@ -42,6 +42,22 @@ For a round disc, add the `.circle` utility — it supplies the `border-radius`:
 }
 ```
 
+## Webfont glyphs
+
+An icon font draws nothing measurable until it loads, so a button or nav link
+shifts when the glyph arrives. Reserve a `1em` square on the icon library's
+class in application CSS; it follows the surrounding font size:
+
+```css
+.ti {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  inline-size: 1em;
+  block-size: 1em;
+}
+```
+
 ## Reuse the existing icon slots
 
 Several components already embody this slot — reach for them before composing
@@ -55,7 +71,7 @@ your own:
 ```html demo
 <div class="media">
   <span class="avatar primary"><abbr>AM</abbr></span>
-  <div class="stack">
+  <div class="stack gap-none">
     <strong>Ada Meridian</strong>
     <span class="muted">Senior designer.</span>
   </div>

package/docs/pages/patterns/navigation-list.md

@@ -1,14 +1,15 @@
 # Navigation List
 
-Use `.nav-list` for a semantic list of navigation links.
-
-It removes native list chrome but does not force a direction. Combine it with layout primitives depending on context.
+Use `.nav-list` for a vertical list of navigation links: it removes native list
+chrome, stacks the rows and stretches each `.nav-link` across the row. For a
+horizontal row of links, use `.cluster` on the list, which removes the list
+chrome too.
 
 ```html demo
 <div class="stack">
   <h2>Navigation</h2>
   <nav aria-label="Main navigation">
-    <ul class="nav-list cluster">
+    <ul class="cluster">
       <li><a href="/docs">Docs</a></li>
       <li><a href="/components">Components</a></li>
       <li><a href="/examples">Examples</a></li>
@@ -16,7 +17,7 @@ It removes native list chrome but does not force a direction. Combine it with la
   </nav>
   <h2>Documentation</h2>
   <nav aria-label="Documentation">
-    <ul class="nav-list stack">
+    <ul class="nav-list">
       <li><a href="/docs/getting-started" aria-current="page">Getting started</a></li>
       <li><a href="/docs/tokens">Tokens</a></li>
       <li><a href="/docs/layout">Layout</a></li>
@@ -26,14 +27,6 @@ It removes native list chrome but does not force a direction. Combine it with la
 </div>
 ```
 
-Use `.nav-list` for:
-
-- header navigation
-- side navigation
-- footer navigation
-- tab-like navigation lists
-- documentation navigation
-
 Do not reset every list inside `nav`.
 
 ```css
@@ -51,7 +44,7 @@ Prefer an explicit pattern class.
 
 ```html demo
 <nav aria-label="Footer">
-  <ul class="nav-list cluster">
+  <ul class="cluster">
     <li><a href="/privacy">Privacy</a></li>
     <li><a href="/terms">Terms</a></li>
     <li><a href="/contact">Contact</a></li>
@@ -69,7 +62,7 @@ Header navigation is usually a composition of landmarks, layout primitives, and
     <a class="brand" href="/">Actual CSS</a>
 
     <nav aria-label="Main navigation">
-      <ul class="nav-list cluster">
+      <ul class="cluster">
         <li><a href="/docs">Docs</a></li>
         <li><a href="/components">Components</a></li>
         <li><a href="/examples">Examples</a></li>
@@ -85,8 +78,7 @@ In this example:
 - `.center` constrains the content.
 - `.cluster` arranges the brand and navigation.
 - `nav` provides navigation semantics.
-- `.nav-list` normalizes the navigation list.
-- the inner `.cluster` arranges navigation items horizontally.
+- the inner `.cluster` removes the list chrome and arranges the links horizontally.
 
 A project may add `.site-header` when it needs a visual shell.
 
@@ -106,7 +98,7 @@ A project may add `.site-header` when it needs a visual shell.
   <aside class="shell-sidebar-nav" aria-label="Primary">
     <a class="navbar-brand" href="#"><span class="avatar primary"><abbr>AC</abbr></span> Product</a>
     <nav aria-label="Primary">
-      <ul class="nav-list stack">
+      <ul class="nav-list">
         <li><a class="nav-link" href="#" aria-current="page">Overview</a></li>
         <li><a class="nav-link" href="#">Settings</a></li>
       </ul>
@@ -167,7 +159,7 @@ Side navigation is usually a `.nav-list` composed with `.stack`.
 ```html demo
 <aside>
   <nav aria-label="Documentation">
-    <ul class="nav-list stack">
+    <ul class="nav-list">
       <li><a href="/docs/getting-started" aria-current="page">Getting started</a></li>
       <li><a href="/docs/tokens">Tokens</a></li>
       <li><a href="/docs/layout">Layout</a></li>
@@ -182,7 +174,7 @@ A project may add `.side-nav` only when it needs specific visual behavior such a
 ```html demo
 <aside class="side-nav">
   <nav aria-label="Documentation">
-    <ul class="nav-list stack">
+    <ul class="nav-list">
       <li><a href="/docs/getting-started" aria-current="page">Getting started</a></li>
       <li><a href="/docs/tokens">Tokens</a></li>
       <li><a href="/docs/layout">Layout</a></li>
@@ -206,30 +198,8 @@ A project may add `.side-nav` only when it needs specific visual behavior such a
 }
 ```
 
-### Optional Navigation Link Styling
-
-`.nav-list` can stay purely structural. If the framework wants navigation links to have a default hit area and active state, this can be added as a lightweight visual pattern.
-
-```css
-.nav-list a {
-  display: flex;
-  align-items: center;
-  gap: var(--space-20);
-  min-block-size: 2rem;
-  padding-inline: var(--space-20);
-  border-radius: var(--radius-sm);
-  color: inherit;
-  text-decoration: none;
-}
-
-.nav-list a:hover {
-  background: var(--surface-subtle);
-}
-
-.nav-list a[aria-current="page"] {
-  background: var(--surface-subtle);
-  font-weight: 600;
-}
-```
+### Link Styling
 
-Keep this separate from layout primitives. `.cluster` and `.stack` should not style links.
+`.nav-link` gives a link its hit area, hover fill and `aria-current` state, in a
+`.cluster` row or a `.nav-list` (see [Navbar](../components/navbar.md)). Set
+`--gap` on a `.nav-list` to space its rows differently.

package/docs/pages/patterns/overview.md

@@ -22,9 +22,8 @@ Use patterns when a semantic element needs a small amount of normalization befor
 Patterns often compose with layout primitives.
 
 ```html
-<menu class="actions cluster">...</menu>
-<ul class="nav-list cluster">...</ul>
-<ul class="nav-list stack">...</ul>
+<menu class="cluster">...</menu>
+<ul class="nav-list">...</ul>
 <section class="grid">...</section>
 ```
 
@@ -51,7 +50,7 @@ Avoid putting semantic resets into layout primitives.
 If list chrome should be removed, use an explicit pattern.
 
 ```html demo
-<ul class="nav-list stack">
+<ul class="nav-list">
   <li><a href="/docs">Docs</a></li>
   <li><a href="/components">Components</a></li>
 </ul>

package/docs/pages/utilities/flex.md

@@ -6,24 +6,25 @@ Small flex helpers for grow behavior and other one-line needs.
 
 Base utilities:
 
-| Class           | Description                                                    |
-| --------------- | -------------------------------------------------------------- |
-| `.grow`         | Makes an item take available flex space without overflowing.   |
-| `.items-start`  | Aligns children to the block-start edge; sets `--items-align`. |
-| `.items-center` | Centers children on the cross axis; sets `--items-align`.      |
-| `.items-end`    | Aligns children to the block-end edge; sets `--items-align`.   |
-| `.dot`          | Inline separator dot for metadata rows.                        |
+| Class             | Description                                                         |
+| ----------------- | ------------------------------------------------------------------- |
+| `.grow`           | Makes an item take available flex space without overflowing.        |
+| `.items-start`    | Aligns children to the block-start edge; sets `--items-align`.      |
+| `.items-center`   | Centers children on the cross axis; sets `--items-align`.           |
+| `.items-end`      | Aligns children to the block-end edge; sets `--items-align`.        |
+| `.items-baseline` | Aligns children on their first text baseline; sets `--items-align`. |
+| `.dot`            | Inline separator dot for metadata rows.                             |
 
 Extra utilities:
 
-| Class                            | Description                                               |
-| -------------------------------- | --------------------------------------------------------- |
-| `.justify-content-start`         | `justify-content: flex-start` and `--cluster-justify`.    |
-| `.justify-content-center`        | `justify-content: center` and `--cluster-justify`.        |
-| `.justify-content-end`           | `justify-content: flex-end` and `--cluster-justify`.      |
-| `.justify-content-space-between` | `justify-content: space-between` and `--cluster-justify`. |
-| `.flex-wrap`                     | `flex-wrap: wrap` on any flex container.                  |
-| `.flex-nowrap`                   | `flex-wrap: nowrap` on any flex container.                |
+| Class                            | Description                                             |
+| -------------------------------- | ------------------------------------------------------- |
+| `.justify-content-start`         | `justify-content: flex-start` on the element itself.    |
+| `.justify-content-center`        | `justify-content: center` on the element itself.        |
+| `.justify-content-end`           | `justify-content: flex-end` on the element itself.      |
+| `.justify-content-space-between` | `justify-content: space-between` on the element itself. |
+| `.flex-wrap`                     | `flex-wrap: wrap` on any flex container.                |
+| `.flex-nowrap`                   | `flex-wrap: nowrap` on any flex container.              |
 
 ## Grow
 
@@ -66,14 +67,24 @@ Use `.items-start` on flex or grid layouts when children should keep their natur
 
 Use `.items-center` when a flex or grid layout should center its children on the cross axis. Use `.items-end` when children should align to the block-end edge.
 
+Use `.items-baseline` when a row mixes text sizes — a price and its period, a name and a timestamp — so the words share one line instead of their boxes sharing a center.
+
+```html demo
+<p class="cluster items-baseline">
+  <strong style="font-size: 2rem">$29</strong>
+  <span class="muted">/ month</span>
+</p>
+```
+
 These helpers work by setting a custom property that participating components read,
 so they also apply inside a component's own grid anatomy rather than only on plain
 flex containers:
 
-- `.items-start` / `.items-center` / `.items-end` set `--items-align`, read by `.alert` and `.card`.
+- `.items-start` / `.items-center` / `.items-end` / `.items-baseline` set `--items-align`, read by `.alert`, `.card` and `.list-item`.
 - `.text-start` / `.text-center` / `.text-end` set `--text-align`, read by `.table` cells.
-- `.justify-content-*` (utilities/extra) set `--cluster-justify`, read by `.cluster`.
-- `.flex-wrap` / `.flex-nowrap` (utilities/extra) set `flex-wrap` directly on any flex container.
+
+`.justify-content-*` and `.flex-wrap` / `.flex-nowrap` (utilities/extra) set the property
+directly, so they never reach a nested `.cluster`.
 
 Set the property directly when you need a value the helpers do not ship.
 
@@ -107,6 +118,5 @@ Always mark it `aria-hidden="true"` — it is a visual separator, not content.
 
 ## CSS hooks
 
-- `--items-align` — cross-axis alignment, set by `.items-start` / `.items-center` / `.items-end`.
+- `--items-align` — cross-axis alignment, set by the `.items-*` helpers.
 - `--text-align` — text alignment, set by `.text-start` / `.text-center` / `.text-end`.
-- `--cluster-justify` — main-axis distribution, set by the optional `.justify-content-*` helpers and read by `.cluster`.

package/docs/pages/utilities/sizing-wrapping.md

@@ -29,7 +29,7 @@ one line (`.badge`). To stop a layout primitive from wrapping — for example to
 force a `.cluster` onto a single row — set `--cluster-wrap: nowrap`.
 
 ```html demo
-<div class="cluster compact" style="--cluster-wrap: nowrap;">
+<div class="cluster tight" style="--cluster-wrap: nowrap;">
   <select class="select sm fit" aria-label="Segment">
     <option>All segments</option>
   </select>
@@ -66,11 +66,10 @@ Use `.truncate` on the flexible item that should ellipsize inside a constrained
 
 ## Scroller
 
-Use `.scroller` to apply optional framework scrollbar treatment to a scroll container. It styles the scrollbar only; pair it with `.overflow-auto` or a component that already creates overflow.
+Use `.scroller` to apply optional framework overflow treatment to a scroll container: a quieter scrollbar. It does not create overflow; pair it with `.overflow-auto` or a component that already creates overflow.
 
-The utility is two standard declarations and nothing else — the engine keeps
-drawing the scrollbar, `.scroller` only hands it a density and a colour that
-follow the theme. There is no `::-webkit-scrollbar` chrome: rebuilding a thumb
+The engine keeps drawing the scrollbar; `.scroller` only hands it a density
+and a colour that follow the theme. There is no `::-webkit-scrollbar` chrome: rebuilding a thumb
 by hand means re-implementing the hover, the corner and the light/dark
 adaptation that `color-scheme` already provides, and the hand-built version
 never quite matches the native one anyway.
@@ -80,6 +79,9 @@ above the capability floor. An engine that knows neither ignores both
 declarations and draws its native scrollbar — the intended fallback, not a
 broken state.
 
+`.scroller` does not apply to touch screens, where the native overlay scrollbar
+stays: it hides at rest, where a styled bar would stay visible.
+
 `.scroller` is a layout primitive, so it comes with `actual.full.css` and with
 `actual-css/css/layout` like `.stack` or `.cluster`. A project importing module
 by module reaches it directly:
@@ -102,9 +104,13 @@ by module reaches it directly:
 .scroller {
   --scroller-track: transparent;
   --scroller-thumb: var(--border);
+}
 
-  scrollbar-color: var(--scroller-thumb) var(--scroller-track);
-  scrollbar-width: thin;
+@media not all and (pointer: coarse) {
+  .scroller {
+    scrollbar-color: var(--scroller-thumb) var(--scroller-track);
+    scrollbar-width: thin;
+  }
 }
 ```
 
@@ -120,6 +126,45 @@ Thickness is not a hook: `scrollbar-width` takes `thin` or `auto`, not a length.
 Hover is left to the engine — it varies by platform, and matching it by hand was
 the part of a custom scrollbar that never held up.
 
+### One-row strips
+
+Components that never wrap scroll horizontally when they do not fit: `.tabs`,
+`.steps-horizontal`, and `.table-wrap`. (`.breadcrumb` truncates its labels
+instead; see [Breadcrumb](../components/breadcrumb.md). `.pagination` wraps.)
+In supporting browsers, a strip that loads on a current link tab or step starts
+scrolled to it; elsewhere it starts at its first item.
+
+`.tabs` hides its scrollbar and fades its edges instead: selecting the clipped
+tab scrolls it into view. The others leave the scrollbar to the engine, so an
+OS-default horizontal scrollbar can sit under a short strip, and on touch
+screens it overlays the strip and hides at rest, leaving a clipped item as the
+cue that the strip continues. Put `.scroller` on the strip itself — the element
+that scrolls — for a thin, theme-coloured bar under a mouse; touch keeps the
+overlay. These strips have no edge fade (overflow shadow, scroll hint): the
+clipped item and the scrollbar already say there is more. Keyboard focus stops
+an item with its focus line inside the strip.
+
+```html
+<ol class="steps steps-horizontal scroller">
+```
+
+There is no class that hides the scrollbar: on a strip whose items do not
+scroll it themselves, it is the only visible scroll control for a mouse without
+a horizontal wheel. Apply `.scroller` to every such strip of a page, or to
+none, so the bars stay consistent.
+
+A strip keeps scrolling inside a flex or grid row, such as a label and link
+tabs on one `.cluster`: a `<nav>` directly around `.tabs` shrinks with the row
+(and around `.breadcrumb`, which then truncates). Any other wrapper needs
+`min-inline-size: 0`, or the row pushes the whole page into scrolling.
+
+```html
+<div class="cluster">
+  <span>Sections</span>
+  <nav aria-label="Account sections"><ul class="tabs">…</ul></nav>
+</div>
+```
+
 ## CSS hooks
 
 - `--scroller-track` — scrollbar track color.

package/docs/pages/utilities/spacing.md

@@ -48,9 +48,10 @@ Override the default gap from layout primitives (`.stack`, `.cluster`, `.grid`):
 - `.gap-none` → `gap: 0`
 
 `.gap-none` sets the element's own gap directly and does not change `--gap`
-for nested layouts. For a denser or roomier rhythm, use the `.compact` /
-`.spacious` density contexts, or set the `gap` property on the instance when the
-change must stop there.
+for nested layouts. For a tighter or looser rhythm alone — closer items, without
+smaller controls — use `.tight` / `.loose`; `.compact` / `.spacious` also change
+padding and control size. Set the `gap` property on the instance when the change
+must stop there.
 
 `--gap` defines the contextual rhythm; `.gap-context` applies that rhythm to a
 container that does not already consume `--gap`. The layout primitives

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "actual-css",
-  "version": "0.11.1",
+  "version": "0.13.0",
   "description": "Plain CSS component framework with semantic classes, universal variants, small tokens, theme hooks, and progressive enhancements.",
   "type": "module",
   "packageManager": "bun@1.4.2",
@@ -10,7 +10,7 @@
     "type": "git",
     "url": "https://github.com/lekoala/actual-css.git"
   },
-  "homepage": "https://github.com/lekoala/actual-css",
+  "homepage": "https://lekoala.github.io/actual-css/",
   "bugs": {
     "url": "https://github.com/lekoala/actual-css/issues"
   },
@@ -112,7 +112,8 @@
     "node": ">=18"
   },
   "scripts": {
-    "lint": "biome check",
+    "hooks:install": "bun scripts/install-hooks.js",
+    "lint": "biome check --reporter concise",
     "lint:fix": "biome check --write",
     "build:docs": "bun run build:themes && bun scripts/build-docs.js",
     "watch:docs": "bun run build:themes && bun scripts/build-docs.js --watch",
@@ -139,7 +140,6 @@
     "check:catalog": "bun scripts/check-catalog.js",
     "check:links": "bun scripts/check-doc-links.js",
     "check:templates": "bun scripts/check-templates.js",
-    "check:markup": "bun scripts/check-markup.js",
     "shot:crop": "bun scripts/shot-crop.js",
     "shot:forced": "bun scripts/forced-colors-shot.js",
     "shot:multi": "bun scripts/multi-shot.js",
@@ -152,11 +152,11 @@
     "release:notes": "bun scripts/release-notes.js",
     "test": "bun test",
     "test:changed": "bun test --changed=master",
-    "build:all": "bun run lint && bun run build:dist && bun run build:js && bun run build:size && bun run format:docs && bun run build:docs && bun run check:docs && bun run check:doc-classes && bun run check:compat && bun run check:css-api && bun run check:color-space && bun run check:architecture && bun run check:enhance && bun run generate:reserved && bun run check:reserved && bun run generate:catalog && bun run check:catalog && bun run check:sync && bun run check:links && bun run check:templates && bun run check:markup && bun run test",
+    "build:all": "bun run lint && bun run build:dist && bun run build:js && bun run build:size && bun run format:docs && bun run build:docs && bun run check:docs && bun run check:doc-classes && bun run check:compat && bun run check:css-api && bun run check:color-space && bun run check:architecture && bun run check:enhance && bun run generate:reserved && bun run check:reserved && bun run generate:catalog && bun run check:catalog && bun run check:sync && bun run check:links && bun run check:templates && bun run test",
     "prepublishOnly": "bun run build:all"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.5.12",
+    "@biomejs/biome": "^2.5.15",
     "happy-dom": "^20.14.0"
   },
   "dependencies": {

package/reserved-classes.json

@@ -1,6 +1,5 @@
 [
   "accordion",
-  "actions",
   "admonition",
   "alert",
   "alert-body",
@@ -56,7 +55,6 @@
   "cursor-pointer",
   "danger",
   "data-list",
-  "dialog-confirmation",
   "dialog-icon",
   "display-block",
   "display-flex",
@@ -110,6 +108,7 @@
   "intent-color",
   "is-open",
   "is-static",
+  "items-baseline",
   "items-center",
   "items-end",
   "items-start",
@@ -132,6 +131,7 @@
   "list-item-title",
   "list-item-trailing",
   "list-reset",
+  "loose",
   "margin-block-end-auto",
   "margin-block-start-auto",
   "margin-inline-auto",
@@ -159,7 +159,6 @@
   "nav-list",
   "navbar",
   "navbar-brand",
-  "navbar-nav",
   "needs-validation",
   "neutral",
   "otp",
@@ -248,6 +247,7 @@
   "text-uppercase",
   "text-wrap",
   "textarea",
+  "tight",
   "tooltip",
   "topbar",
   "touch-target",

package/skills/actual-css/references/enhancements.md

@@ -40,16 +40,19 @@ the title in the content wrapper's direct `<header>`. The close button is then
 anchored to the surface, and the header reserves room so the title cannot run
 under it. A `.close` that is a direct child of the chrome header is that same
 corner overlay, and that header reserves room for it too. Put actions in the
-wrapper's `<footer>`.
+wrapper's `<footer>` and compose its row in markup
+(`<footer class="cluster justify-content-end">`); the modal and drawer footers
+have no layout of their own.
 
 Use `.bleed` on that direct header when it needs a contrasting full-width band;
 the wrapper relays the modal padding so the band reaches the surface edges while
-its contents keep the normal inset. In `.dialog-confirmation`, keep the icon and
-the text header as the media object's two children; the component centers the
-header's first heading on the icon while following copy stays in that text
-column. For a trailing icon, use the confirmation's direct header as a
-non-wrapping split `.cluster`, with `.grow` on the text group. Do not compensate
-heading alignment with a literal margin.
+its contents keep the normal inset. A confirmation is composition, not a
+variant: a `.media` row with a leading `.dialog-icon` and the text column (its
+first heading centers on the icon, following copy stays in that column), then a
+`<footer class="bleed background-subtle cluster justify-content-space-between">` action
+band with the cancel-style action first. For a trailing icon, use the wrapper's
+direct header as a non-wrapping split `.cluster`, with `.grow` on the text
+group. Do not compensate heading alignment with a literal margin.
 
 Do not turn the dialog heading into an `.alert` to obtain icon or surface
 styling. Compose `.dialog-icon` with `.media` for a leading title icon; reserve