actual-css 0.11.1 → 0.13.0

package/CHANGELOG.md

@@ -2,6 +2,102 @@
 
 ## [Unreleased]
 
+## [0.13.0] - 2026-10-06
+### Breaking changes
+
+- `--cluster-justify`, `--cluster-align` and `--cluster-wrap` no longer inherit into nested `.cluster` rows; set them on the row itself or select nested rows.
+- `--grid-columns` and `--grid-min` no longer inherit into a nested `.grid`.
+- `.avatar-stack` no longer infers its size from child `.avatar.sm`/`.lg`; set `.sm`/`.lg` on the stack and omit size classes on its avatars.
+- `--focus-outline` has no default value: it is a fallback-only hook that replaces the generic focus line; read `var(--focus-ring-width) solid var(--focus-outline-color)` instead.
+- `data-enhance="tabs"` needs `role="tablist"` on the same element; without it the runtime warns and wires nothing.
+- `.nav-link` shows its current state only for `aria-current="page"` or `"location"`, and `a.list-item` only for `"page"` or `"true"`; any other value, `"false"` included, is inert.
+
+### Added
+
+- `actual-css/js/full` now exposes `enhance`, `applyEnhancement`, and `registerEnhancement` from the same runtime that registers the built-ins.
+- `--tab-flex` on `.tabs` sets each tab's flex; `1 1 0` gives equal-width tabs.
+- In supporting browsers, an overflowing link `.tabs` strip or `.steps-horizontal` row starts scrolled to its `aria-current` item, with no runtime (`scroll-initial-target`).
+- `--border-control` sets the resting edge of fields, choices, switches, OTP cells, choice cards, `.join-addon` and the color and file inputs; it defaults to `--border`, which keeps separating surfaces.
+
+### Changed
+
+- `.steps-horizontal` fits short labels on a phone, wraps (and hyphenates) long names, and aligns its outer stacked steps with the row's edges at every width.
+- `.steps-horizontal` `--step-min` defaults to the marker width and only sets a wider budget; `--step-gap` also separates adjacent steps.
+- `forms/form-actions` no longer has to load after `layout/cluster`: `.form-actions` relays its hooks into the row's `--cluster-*`.
+- An overflowing horizontal `.tabs` strip shows its selected tab in full, at connect and whenever selection changes, scrolling the strip only.
+- `.floating-field` accepts its `.field-label` before or after the control; state is read through `:has()` on the cell.
+- `.list-item` regions center on the row by default; add `.items-start` to the row or the `.list` for rows with long supporting text.
+- A horizontal `.tabs` strip never wraps, nor do its labels: a strip that does not fit scrolls horizontally.
+- `.breadcrumb` never wraps: a trail that does not fit truncates its labels with an ellipsis, ancestors before the current page.
+- A navigation flyout `.tab` shows the current state with `aria-current="true"` while its panel holds the current page.
+- `.breadcrumb` ancestor labels truncate on their `<a>` or `<span>`; the current page also truncates as bare text in an `<li aria-current="page">`.
+- The current `.nav-list` link trait sits inside the row's inline padding with rounded ends, instead of flush on its rounded edge.
+- A horizontal `.tabs` strip hides its scrollbar; selecting or focusing the clipped tab scrolls it into view.
+- An overflowing horizontal `.tabs` strip fades the edges it can still scroll toward, where scroll-driven animations are supported.
+- `.scroller` no longer styles the scrollbar on touch screens, where the native overlay scrollbar, hidden at rest, stays.
+
+### Fixed
+
+- `actual-css contrast --theme FILE` and `actual-css design --theme FILE` accept a theme written on `:root` and measure its own values, not the default palette.
+- A default `.btn.outline` in a field `.join` takes `--border-control` like the field, not `--border`.
+- The scrolling body of a `dialog.modal.scrollable` and a `dialog.drawer` keeps the focus line of its first and last controls inside its clip.
+- `actual-css contrast` and `actual-css design` detect a theme written `[data-theme = "brand"]` or `[data-theme=brand]`, and ignore selectors quoted in comments.
+- `actual-css contrast` measures a theme whose name contains `&` or `<` under its own name, instead of an island the name had broken.
+- `actual-css contrast` and `actual-css design` reject a `--name` the theme file does not declare as `[data-theme]`, instead of measuring the framework defaults.
+- A bare heading in a `dialog.modal > header` drops its block margins, so the band no longer grows and the title centers on the close.
+- A `<nav>` around `.breadcrumb` or `.tabs` shrinks inside a flex or grid row, so the trail truncates or the strip scrolls instead of the page.
+- An enhanced tablist no longer operates the tabs of a nested `role="tablist"` that has no `data-enhance="tabs"`.
+- A tablist with `data-enhance="tabs"` sets its roving tabindex when a classic script in `<head>` connects it before its tabs are parsed.
+- The generic focus line of links, `summary` and nav items follows a `--focus-ring-width` set on a `[data-theme]` island or any region, like the `.btn` ring beside it.
+- The focus reserve of a scrolling dialog or drawer body is `--focus-outline-offset` + `--focus-ring-width`, no longer widened by `2 × --border-width`.
+
+## [0.12.0] - 2026-10-02
+### Breaking changes
+
+- `.actions` is removed; compose a `<menu>` (or `<ul>`) with `cluster` for a row, or `stack list-reset` for a vertical list.
+- `.navbar-nav` is removed; the horizontal link list is a `.cluster` with the framework `--gap`.
+- `.dialog-confirmation` is removed; compose `.media` with `.dialog-icon`, then `<footer class="bleed background-subtle cluster justify-content-space-between">` (recipe in `docs/pages/components/dialog.md`).
+- The `dialog.modal` body `<footer>` has no layout of its own; compose its row as `<footer class="cluster justify-content-end">`, as in the drawer.
+- `--modal-header-bg` is removed; put a `.background-*` utility on the `dialog.modal > header` band.
+- `.form-actions` no longer lays out its row; write `class="cluster form-actions"` (`--form-actions-justify` and `--form-actions-align` still apply).
+- `.form-actions` drops its top margin and `--form-actions-margin-block-start`; space it from the fields with `.stack` on the form.
+- `.justify-content-*` no longer sets `--cluster-justify`, so it aligns only its own element, never a nested `.cluster`.
+- `.card` header and footer rows drop to zero specificity: `.media`, `.cluster`, `.form-actions` and `.justify-content-*` on a slot now take over its layout.
+- `--font-width-dense` is removed; set `font-stretch` on an element that should render condensed.
+- A theme sets `--control-pad-x-sm` / `-md` / `-lg` instead of `--control-pad-x`, which `.sm`/`.lg` and `.compact`/`.spacious` now select from.
+- A theme that sets its own control steps re-selects them in its block to work as a nested island (recipe in `docs/pages/foundations/tokens.md`).
+
+### Added
+
+- `actual-css contrast [--theme FILE]` (Bun) measures a theme's soft, focus, invalid-focus and inverse pairs in each declared scheme, and exits 1 on a miss.
+- `.tight` and `.loose` set the inherited `--gap` to `--space-20` / `--space-50` alone, without the padding or control size of `.compact` / `.spacious`.
+- `docs/pages/guides/upgrading.md` lists the edits a 0.11 project needs for 0.12.
+- `.items-baseline` aligns children on their first text baseline and sets `--items-align`, completing the `.items-*` series.
+
+### Changed
+
+- An action row composed from `.cluster` inherits the framework `--gap` (0.75rem); the removed `.actions` set 0.5rem. Use `.tight` for the tighter rhythm.
+- `.cluster` removes the native list chrome (`margin`, `padding`, `list-style`) from a `ul`, `ol` or `menu` it is applied to; the element stays a list in the DOM.
+- A heading that is the first child beside a leading `.dialog-icon` in a `.media` row centers on the icon anywhere, not only in a dialog.
+- A `dialog.modal` or `.drawer` header gives back its corner-close room when the dialog contains no `.close`; without `:has()` the room stays.
+- `.compact` and `.spacious` no longer set `font-stretch`: density changes rhythm and geometry, never typography.
+- `.compact` and `.spacious` select `--control-pad-x-sm` / `-lg`, so density controls get narrower or wider, not only shorter or taller.
+- `.sm` controls use the shared `--control-pad-x-sm` step: 13px of inline padding instead of 14px.
+- `.card.compact` lowers `--card-gap` to `--space-20` along with `--card-pad`.
+- `.nav-list` rows sit `--space-10` apart instead of `--space-20`, so a vertical nav reads as one list.
+- `.topbar` lays out its default row at zero specificity, so `topbar cluster` hands the row to `.cluster`.
+- The WCAG and OKLCH color math moves from `scripts/utils/color.js` to `src/tooling/color.js`.
+- `report:theme-contrast` labels a dark-only preset (`dim`, `glass`, `indigo`, `neon`) as dark instead of light.
+
+### Fixed
+
+- `actual-css contrast` counts a resting soft pair under 4.5:1 as a miss; it only gated the hovered pair.
+- The `design` and `contrast` examples run `bunx --bun actual-css`: plain `bunx` honors the CLI's Node shebang and stops on "needs Bun".
+- `dialog.modal.scrollable` lays the body wrapper out as a flex column: a structural header or footer keeps its size and every other region scrolls, so a modal with an external `dialog > header` no longer collapses its footer to zero.
+- `--dialog-icon-size` and `--dialog-icon-glyph-size` are read, not declared, on `.dialog-icon`, so an override on the icon's media row or the dialog moves the circle and the heading beside it together.
+- An `.avatar-stack` avatar layers its fill over `--surface-opaque`, so a translucent fill no longer shows the neighbour it overlaps.
+- `prefers-reduced-motion` also resets `::backdrop`, so a modal or drawer scrim no longer fades when the user reduces motion.
+
 ## [0.11.1] - 2026-09-30
 
 ### Added

package/README.md

@@ -1,7 +1,14 @@
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="docs/brand/logo-dark.svg">
+  <img src="docs/brand/logo-light.svg" alt="Actual CSS" width="380">
+</picture>
+
 # Actual CSS
 
 Plain CSS component framework for new projects. Semantic classes, shared variants, small tokens, theme hooks, and progressive enhancement.
 
+Documentation: <https://lekoala.github.io/actual-css/>
+
 Actual CSS claims a documented set of global class names; the package publishes
 it as [`actual-css/reserved-classes.json`](reserved-classes.json).
 
@@ -42,7 +49,7 @@ Flatten the composition for production with
 resolves package subpaths and relative files, then inlines them without
 transpiling modern CSS.
 
-Hand your theme to designers with `bunx actual-css design --theme theme.css --out design/`:
+Hand your theme to designers with `bunx --bun actual-css design --theme theme.css --out design/`:
 Figma and Penpot tokens, plus a Penpot plugin that builds the core components.
 See [Design tools](docs/pages/guides/design-tools.md).
 
@@ -57,7 +64,7 @@ size is not worth optimizing:
 ```
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/actual-css@0.11/dist/actual.full.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/actual-css@0.13/dist/actual.full.min.css">
 ```
 
 ## Usage
@@ -77,8 +84,7 @@ Variants such as `.solid`, `.soft`, `.outline`, and `.surface` are shared by com
 
 Size variants `.sm` and `.lg` scale typography and participating component
 geometry consistently. Density contexts `.compact` and `.spacious` change
-spacing and geometry without changing font size or icons; `.compact` may
-slightly narrow typefaces that support a width axis.
+spacing and geometry without changing font size, font width or icons.
 
 ## Public Class Grammar
 
@@ -98,7 +104,7 @@ Undocumented `is-*` classes are runtime internals.
 
 **UI components** — dialog, drawer, flyout, tooltip, tabs, scrollspy, context menus, and other components that rely on JavaScript or modern platform behavior.
 
-**Patterns** — actions, navbar, and overline. These are regular source files and can be imported only when needed.
+**Patterns** — navbar and overline. These are regular source files and can be imported only when needed.
 
 **Layout primitives** — `.stack`, `.cluster`, `.grid`, `.switcher`, `.center`, `.media`, `.frame`, `.app-shell`, `.sidebar-layout`, and `.container-query`.
 
@@ -131,7 +137,7 @@ registries:
 * **Full runtime, zero-config** — every built-in enhancer, compiled:
 
   ```html
-  <script src="https://cdn.jsdelivr.net/npm/actual-css@0.11/dist/actual.full.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/actual-css@0.13/dist/actual.full.js" type="module"></script>
   ```
 
 * **Your own build** — copy the package's `src/js/full.js` as your entry,
@@ -164,6 +170,19 @@ Actual CSS does not currently ship a separate compatibility build. It is designe
 
 For more conservative fallbacks, import and compose the source entrypoints directly.
 
+## Versioning
+
+Actual CSS is before 1.0:
+
+* A minor release (`0.12` → `0.13`) may remove or rename classes and hooks. Each
+  one adds a section to [Upgrading](docs/pages/guides/upgrading.md).
+* A patch release (`0.12.0` → `0.12.1`) keeps every class and hook. It fixes
+  bugs and may add hooks, so a fix can still move a rendering by a few pixels.
+
+The floating `actual-css@0.13` CDN path takes patches automatically. Pin the exact
+version (`actual-css@0.13.0`) when the rendering must not change without a
+review.
+
 ## Browser support
 
 Actual CSS is built around progressive enhancement.

package/components.json

@@ -18,17 +18,6 @@
       "open"
     ]
   },
-  {
-    "name": "actions",
-    "source": "src/css/components/actions.css",
-    "cssImport": "actual-css/css/components/actions",
-    "classes": [
-      "actions"
-    ],
-    "internalHooks": [
-      "--gap"
-    ]
-  },
   {
     "name": "alert",
     "source": "src/css/components/alert.css",
@@ -85,13 +74,13 @@
       "--avatar-size",
       "--avatar-radius",
       "--avatar-font-size",
+      "--avatar-bg",
       "--avatar-stack-size",
       "--avatar-stack-font-size",
       "--avatar-stack-overlap",
       "--avatar-stack-ring"
     ],
     "internalHooks": [
-      "--avatar-bg",
       "--avatar-fg",
       "--avatar-status-translate-x"
     ],
@@ -196,7 +185,6 @@
       "--btn-bg",
       "--btn-fg",
       "--btn-border",
-      "--btn-default-hover-bg",
       "--btn-border-block-end-color",
       "--btn-border-block-end-width",
       "--btn-border-block",
@@ -295,7 +283,9 @@
     "internalHooks": [
       "--drawer-closed-translate",
       "--drawer-focus-bleed",
-      "--drawer-motion-duration"
+      "--drawer-close-reserve",
+      "--drawer-motion-duration",
+      "--drawer-motion-ease"
     ],
     "states": [
       "open"
@@ -460,24 +450,24 @@
     "source": "src/css/components/modal.css",
     "cssImport": "actual-css/css/components/modal",
     "classes": [
-      "dialog-confirmation",
       "dialog-icon",
       "had-scrollbar",
       "has-modal-open",
       "is-static",
+      "media",
       "modal",
       "scrollable"
     ],
     "publicHooks": [
       "--modal-size",
       "--modal-pad",
-      "--modal-header-bg",
       "--dialog-viewport-gap",
       "--dialog-icon-size",
       "--dialog-icon-glyph-size"
     ],
     "internalHooks": [
       "--dialog-inner-radius",
+      "--dialog-close-reserve",
       "--dialog-focus-bleed",
       "--dialog-viewport-block",
       "--dialog-viewport-gap-default",
@@ -495,8 +485,7 @@
       "nav-link",
       "nav-list",
       "navbar",
-      "navbar-brand",
-      "navbar-nav"
+      "navbar-brand"
     ],
     "internalHooks": [
       "--gap"
@@ -649,8 +638,13 @@
       "tabs"
     ],
     "publicHooks": [
+      "--tab-flex",
       "--tab-gap"
     ],
+    "internalHooks": [
+      "--tab-edge",
+      "--tab-fade-dir"
+    ],
     "states": [
       "aria-current",
       "aria-disabled",