actual-css 0.12.0 → 0.13.0

package/CHANGELOG.md

@@ -2,6 +2,55 @@
 
 ## [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
 

package/README.md

@@ -64,7 +64,7 @@ size is not worth optimizing:
 ```
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/actual-css@0.12/dist/actual.full.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/actual-css@0.13/dist/actual.full.min.css">
 ```
 
 ## Usage
@@ -137,7 +137,7 @@ registries:
 * **Full runtime, zero-config** — every built-in enhancer, compiled:
 
   ```html
-  <script src="https://cdn.jsdelivr.net/npm/actual-css@0.12/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,
@@ -174,14 +174,13 @@ For more conservative fallbacks, import and compose the source entrypoints direc
 
 Actual CSS is before 1.0:
 
-* A minor release (`0.11` → `0.12`) may remove or rename classes and hooks. Each
-  one ships an upgrade guide; the current one is
-  [Upgrading to 0.12](docs/pages/guides/upgrading.md).
-* A patch release (`0.11.0` → `0.11.1`) keeps every class and hook. It fixes
+* 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 `@0.11` CDN path takes patches automatically. Pin the exact
-version (`actual-css@0.12.1`) when the rendering must not change without a
+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

package/components.json

@@ -74,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"
     ],
@@ -284,7 +284,8 @@
       "--drawer-closed-translate",
       "--drawer-focus-bleed",
       "--drawer-close-reserve",
-      "--drawer-motion-duration"
+      "--drawer-motion-duration",
+      "--drawer-motion-ease"
     ],
     "states": [
       "open"
@@ -637,8 +638,13 @@
       "tabs"
     ],
     "publicHooks": [
+      "--tab-flex",
       "--tab-gap"
     ],
+    "internalHooks": [
+      "--tab-edge",
+      "--tab-fade-dir"
+    ],
     "states": [
       "aria-current",
       "aria-disabled",