actual-css 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -2,6 +2,79 @@
 
 ## [Unreleased]
 
+## [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
+
+- `dialog.modal > header` provides aligned icon/title/action chrome through `--modal-header-bg`; modal body wrappers expose `--modal-pad` and support `.bleed` bands.
+- `actual-css design` (Bun) exports a theme to Figma and Penpot tokens; see `docs/pages/guides/design-tools.md`.
+- `actual-css design` writes a Penpot plugin that builds Button, Input, Badge, Alert and Card bound to those tokens.
+- Soft fills and borders export as recipe tokens named `<variant>-<intent>-<role>` (`soft-danger-bg`).
+- `scripts/serve.js --cors` serves the repository to another origin, such as penpot.app loading a local plugin.
+- `--meter-track` sets the `.meter` track, matching `--progress-track`.
+- `--close-bg` sets the dialog corner `.close` background, so a dialog over a painted band can drop the default chip.
+- `--close-color` and `--close-hover-color` set the X ink at rest and on hover, so a bare X can take a painted band's foreground.
+- `--close-hover-overlay` routes the `.close` hover/active wash (matching `--btn-hover-overlay`); the modal/drawer corner sets it transparent so only the ink changes.
+
+### Changed
+
+- `dialog.modal` is borderless: the raised surface and shadow define the panel, so a full-bleed header, footer, or hero band no longer meets a hard edge; a forced-colors border keeps the outline.
+
+### Fixed
+
+- A corner `.close` that is a direct child of `dialog.modal > header` reserves inline room for itself; previously only the wrapper `<header>` did, so a long chrome title could run under it.
+- `dialog.modal` derives one `--dialog-inner-radius` for the body wrapper, the header band, and the `.dialog-confirmation` footer, so an edge band keeps the panel corner instead of taking its own radius.
+- The `.dialog-confirmation` action band spreads a two-action decision to its edges, keeping a cancel action apart from the committing one.
+- `.dialog-confirmation` centers its leading icon on the title while keeping supporting copy in the same text column.
+- `.btn` and the `.file` selector button take their borders out of the block padding, so they match `.input` height at every size instead of standing 2px taller outside a `.join`.
+- `tests/browser/control-geometry.test.js` measures controls outside a `.join`, whose stretch had hidden the mismatch.
 
 ## [0.11.0] - 2026-09-30
 

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,6 +49,10 @@ 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 --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).
+
 ### Full bundle (zero-config)
 
 The bare `actual-css` entrypoint and `actual-css/full` both resolve to the
@@ -53,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.12/dist/actual.full.min.css">
 ```
 
 ## Usage
@@ -73,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
 
@@ -94,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`.
 
@@ -127,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.12/dist/actual.full.js" type="module"></script>
   ```
 
 * **Your own build** — copy the package's `src/js/full.js` as your entry,
@@ -160,6 +170,20 @@ 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.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
+  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
+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",
@@ -135,7 +124,8 @@
     "source": "src/css/components/bleed.css",
     "cssImport": "actual-css/css/components/bleed",
     "classes": [
-      "bleed"
+      "bleed",
+      "stack"
     ],
     "publicHooks": [
       "--bleed-pad"
@@ -195,9 +185,9 @@
       "--btn-bg",
       "--btn-fg",
       "--btn-border",
-      "--btn-default-hover-bg",
       "--btn-border-block-end-color",
       "--btn-border-block-end-width",
+      "--btn-border-block",
       "--spinner-width"
     ],
     "states": [
@@ -262,7 +252,11 @@
     ],
     "publicHooks": [
       "--close-size",
-      "--close-icon-size"
+      "--close-icon-size",
+      "--close-bg",
+      "--close-color",
+      "--close-hover-color",
+      "--close-hover-overlay"
     ]
   },
   {
@@ -289,6 +283,7 @@
     "internalHooks": [
       "--drawer-closed-translate",
       "--drawer-focus-bleed",
+      "--drawer-close-reserve",
       "--drawer-motion-duration"
     ],
     "states": [
@@ -444,6 +439,7 @@
       "meter"
     ],
     "publicHooks": [
+      "--meter-track",
       "--meter-value",
       "--bar-height"
     ]
@@ -453,21 +449,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",
       "--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",
@@ -485,8 +484,7 @@
       "nav-link",
       "nav-list",
       "navbar",
-      "navbar-brand",
-      "navbar-nav"
+      "navbar-brand"
     ],
     "internalHooks": [
       "--gap"