actual-css 0.11.0 → 0.12.0

package/docs/pages/guides/tailwind.md

@@ -380,6 +380,76 @@ Actual theme tokens should handle shared theme behavior. Local CSS remains appro
 
 This is particularly important when migrating a Tailwind application with a large custom color palette.
 
+### Map the Tailwind palette to theme roles
+
+Tailwind's theme is a set of ramps: `--color-zinc-50` … `--color-zinc-950`,
+one per hue. Actual's theme contract is a set of roles: `--surface`,
+`--border`, `--text-muted`, `--primary`, `--focus`. Each element picks a
+step in Tailwind; Actual picks once per role, in the theme, and every
+component reads the role. Map one neutral family and one brand hue, then
+stop: the rest of the ramp has no consumer.
+
+A starting point for a zinc and blue application:
+
+| Role               | Light      | Dark       |
+| ------------------ | ---------- | ---------- |
+| `--surface`        | `white`    | `zinc-950` |
+| `--surface-raised` | `white`    | `zinc-900` |
+| `--surface-subtle` | `zinc-100` | `zinc-800` |
+| `--surface-solid`  | `zinc-900` | `zinc-100` |
+| `--border`         | `zinc-200` | `zinc-700` |
+| `--text`           | `zinc-950` | `zinc-50`  |
+| `--text-muted`     | `zinc-600` | `zinc-400` |
+| `--text-subtle`    | `zinc-500` | `zinc-500` |
+| `--neutral`        | `zinc-600` | `zinc-400` |
+| `--primary`        | `blue-600` | `blue-400` |
+| `--focus`          | `blue-500` | `blue-500` |
+
+Each scheme is one `light-dark()` pair on the role, instead of a `dark:`
+variant on every element:
+
+```css
+[data-theme="app"] {
+  color-scheme: light dark;
+
+  --surface: light-dark(var(--color-white), var(--color-zinc-950));
+  --border: light-dark(var(--color-zinc-200), var(--color-zinc-700));
+  --primary: light-dark(var(--color-blue-600), var(--color-blue-400));
+  --primary-fg: light-dark(var(--color-white), var(--color-zinc-950));
+  --focus: var(--color-blue-500);
+  /* … the other roles of the table */
+}
+```
+
+Tailwind v4 emits only the theme variables your sources use; declare the
+palette with `@theme static` while the theme reads them, and replace them with
+their literal values before Tailwind leaves the build.
+
+What the ramp does not decide for you:
+
+- **Foreground pairs.** Tailwind has no `-fg` step. White on `blue-600` holds
+  4.5:1, white on `blue-500` does not, so a dark-scheme primary lightened to
+  `blue-400` needs a dark `--primary-fg`. Every intent needs its pair:
+  `--warning-fg` on an amber is dark ink.
+- **Focus.** `--focus` must hold 3:1 on `--surface` and `--surface-solid` in
+  both schemes, so it is a mid-tone, not the primary step. `blue-500` holds
+  on `white`, `zinc-900`, `zinc-950` and `zinc-100`: one value covers both
+  schemes.
+- **Neutral temperature.** `slate`, `gray`, `zinc`, `neutral` and `stone` are
+  the same ramp at different temperatures; `neutral` is pure grey. Pick the
+  family that leans toward your primary, and take every neutral role from it.
+- **No subtle intent steps.** Do not map `blue-50` / `blue-100` to tinted
+  surfaces: `.soft` mixes the intent into the local surface, so there is no
+  `--primary-subtle` to fill.
+- **Shadow and hover ink.** Tailwind shadows are black; Actual derives
+  `--shadow` and `--shadow-popout` from one `--shadow-color`. Take it from the
+  neutral family's darkest step, and `--hover-overlay` as a few percent of
+  `--text`.
+
+`bunx --bun actual-css contrast --theme FILE` measures the focus, soft and inverse
+pairs in both schemes. Check the text tiers on `--surface-subtle` by hand:
+`zinc-500` holds 4.5:1 on `white` but not on `zinc-100`.
+
 ## Forms
 
 Tailwind applications often construct form controls from utility combinations or use an additional forms plugin.

package/docs/pages/guides/upgrading.md

@@ -0,0 +1,74 @@
+# Upgrading to 0.12
+
+Each step below is a search for a removed class or hook and its replacement.
+The [changelog](https://github.com/lekoala/actual-css/blob/master/CHANGELOG.md)
+lists every change; this page keeps the ones that need an edit.
+
+**Related terms:** migration, breaking changes, update, version.
+
+## Action rows
+
+`.actions`, `.navbar-nav` and the layout of `.form-actions` are gone. A row of
+actions is a `.cluster`; a vertical list is `stack list-reset`. Replace
+`class="actions"` and `class="navbar-nav"` with `class="cluster"`, and
+`class="form-actions"` with `class="cluster form-actions"`:
+
+```html
+<menu class="cluster">…</menu>
+<ul class="cluster">…</ul>
+<div class="cluster form-actions">…</div>
+<ul class="stack list-reset">…</ul>
+```
+
+- The row takes the framework `--gap` (0.75rem). The former `.actions` used
+  0.5rem: add `.tight` to keep it.
+- The former `.navbar-nav` used `--space-10` (0.25rem), which no utility
+  reproduces. If the tighter navbar rhythm matters, set
+  `gap: var(--space-10)` on that row in application CSS.
+- `.form-actions` has no top margin and no `--form-actions-margin-block-start`:
+  put `.stack` on the form. `--form-actions-justify` and `--form-actions-align`
+  still apply. In a modular build, import `layout/cluster` before
+  `forms/form-actions`.
+- `.justify-content-*` aligns only its own element and no longer reaches a
+  nested `.cluster`. Put the utility on the row it should align.
+
+## Dialogs
+
+- `.dialog-confirmation` is removed. Compose `.media` with `.dialog-icon`, then
+  a `<footer class="bleed background-subtle cluster justify-content-space-between">`;
+  the recipe is in [Dialog](../components/dialog.md).
+- A `dialog.modal` body `<footer>` has no layout of its own: write
+  `<footer class="cluster justify-content-end">`.
+- `--modal-header-bg` is removed: put a `.background-*` utility on the
+  `dialog.modal > header` band. Only that default fill has zero specificity;
+  the header's layout keeps its structural rule.
+- The confirmation recipe uses the regular 1rem modal inset where the former
+  `.dialog-confirmation` used 1.5rem. Set `--modal-pad: var(--space-50)` on
+  the dialog to keep the roomier treatment.
+
+## Cards
+
+The layout of a `.card` header or footer row is a zero-specificity default: any
+author rule that targets the slot replaces it, not only a `.media`, `.cluster`,
+`.form-actions` or `.justify-content-*` class. Check application CSS for bare
+element rules such as `header { … }` or `footer { … }`, which now win over the
+card's slot row.
+
+## Themes and density
+
+- A theme sets `--control-pad-x-sm`, `--control-pad-x-md` and
+  `--control-pad-x-lg` instead of `--control-pad-x`. Used as a nested island,
+  it re-selects them in its own block; see
+  [Tokens](../foundations/tokens.md).
+- `--font-width-dense` is removed, and `.compact` no longer condenses type: set
+  `font-stretch` on the element that should render condensed.
+
+## Rendering changes without an edit
+
+These need no markup change; compare the affected screens.
+
+- `.sm` controls have 13px of inline padding instead of 14px.
+- `.compact` and `.spacious` controls get narrower or wider, not only shorter
+  or taller.
+- `.nav-list` rows sit `--space-10` apart instead of `--space-20`.
+- `.card.compact` lowers the gap between its children to `--space-20`.

package/docs/pages/layout/cluster.md

@@ -17,6 +17,30 @@ between items always comes from `--gap`. Unlike `.stack`, which resets only the
 block axis, cluster resets margins on both axes — a wrapping cluster's `gap`
 controls inline spacing between items and block spacing between wrapped rows.
 
+## Action rows
+
+Actions are content; the cluster owns the geometry. A semantic action list is a
+`<menu>` (or `<ul>`) with `.cluster`:
+
+```html demo
+<menu class="cluster">
+  <li><button class="btn primary" type="button">Save</button></li>
+  <li><button class="btn outline" type="button">Cancel</button></li>
+</menu>
+```
+
+There is no `.actions` class. A dense row is `cluster tight`; a vertical action
+list is `stack list-reset`.
+
+## List chrome
+
+`.cluster` neutralizes the native chrome of a `<ul>`, `<ol>` or `<menu>` it is
+applied to. The element stays a list in the DOM and for assistive technology,
+but a horizontal, wrapping group cannot carry markers and indentation
+meaningfully, so they are removed. `.stack` makes no such change — an
+`<ol class="stack">` keeps its numbers. Use `.list-reset` alone for a plain list
+with no layout.
+
 ## CSS hooks
 
 - `--cluster-justify` — main-axis distribution (`justify-content`).
@@ -48,8 +72,10 @@ wraps to several lines — set `--cluster-align`.
 ```
 
 The optional utility layer ships `.justify-content-start`, `.justify-content-center`,
-`.justify-content-end` and `.justify-content-space-between`, which set
-`--cluster-justify` for you. See the utilities page.
+`.justify-content-end` and `.justify-content-space-between`. They set
+`justify-content` on that one row only; a nested `.cluster` keeps its own
+alignment. `--cluster-justify` is inherited, so setting it on a region reaches
+nested clusters too. See the utilities page.
 
 ## Controls inside a wrapping cluster
 

package/docs/pages/layout/overview.md

@@ -57,4 +57,4 @@ Prefer a parent `gap` for relationships between peers instead of encoding siblin
 
 Before adding a divider or other separating chrome, consider whether additional spacing already expresses the boundary clearly.
 
-Density changes the amount of space available, not the relationships that space communicates. When a composition contains local, group, and section rhythms, preserve their relative hierarchy with nested or local `--gap` values rather than relying on one inherited gap at every level. See [Choosing a density](./stack.md#choosing-a-density) for the nesting and density mechanics.
+Density changes the amount of space available, not the relationships that space communicates. When a composition contains local, group, and section rhythms, preserve their relative hierarchy with nested or local `--gap` values rather than relying on one inherited gap at every level. See [Choosing a rhythm](./stack.md#choosing-a-rhythm) for the nesting mechanics, and `.tight` / `.loose` for a gap-only change.

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/topbar.md

@@ -4,7 +4,7 @@ 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">

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` and `.card`.
 - `.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>

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.0",
+  "version": "0.12.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"
   },
@@ -131,6 +131,7 @@
     "build:js": "bun scripts/build-js.js",
     "build:themes": "bun scripts/build-themes.js",
     "build:size": "bun scripts/build-size.js",
+    "export:design": "bun scripts/export-design.js",
     "check:enhance": "bun run scripts/check-enhance.js",
     "generate:reserved": "bun scripts/generate-reserved-classes.js",
     "check:reserved": "bun scripts/check-reserved.js",

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",