actual-css 0.10.0 → 0.11.1

package/CHANGELOG.md

@@ -2,6 +2,104 @@
 
 ## [Unreleased]
 
+## [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
+
+### Breaking changes
+
+- `enhancementSelector()` and `hasEnhancement()` are no longer exported from `actual-css/js/enhance`; query `[data-enhance~="name"]` directly.
+- `registerCommands()` drops the `prepare` callback; write `aria-controls`, `aria-haspopup`, and `aria-pressed` on command buttons in the markup.
+- `registerCommands()` and `commandSelector()` throw on a name that is neither a native `command` keyword nor a custom `--` command.
+- `FormValidator.init()` is removed; the module self-registers, and `applyEnhancement("validation", selector)` opts forms in by selector.
+- The non-modal dialog command is `command="--show"`; `command="show"` is not an HTML keyword and no longer opens a dialog.
+- `.choice-card` shows its control on the leading edge — a ring (radio) or box (checkbox) at rest that fills with the check — instead of a corner badge shown only once checked; the badge is now the "Corner badge" recipe in `docs/pages/forms/choice-cards.md`.
+- `.choice-card` is a two-column grid: each child element of the label becomes a row beside the indicator, so loose text needs an element.
+- `--choice-card-check-size` defaults to `1.25em` and also sets the width of the `.choice-card` indicator column.
+- `--aura-width` is the whole painted `.aura` frame (the border, no padding); `--aura-width: 3px` reproduces the former default frame.
+- `.aura` defaults to a thin lit line: `--aura-width: 1px` and `--aura-intensity: 0.4`.
+
+### Added
+
+- `--surface-opaque` and `--surface-solid-fg` let a theme paint translucent surfaces while rings, separators and inverse text stay opaque.
+- `report:theme-contrast` reports the `--surface-solid-fg` on `--surface-solid` text pair.
+- `scripts/utils/color.js` holds the WCAG contrast and OKLCH math for reports and browser tests; `contrast()` refuses translucent colors.
+- `glass` demo theme: translucent surfaces over a theme-painted backdrop, a stress test of the opaque surface roles.
+- `tests/browser/translucent-surface.test.js` keeps rings, separators, step markers, and inverse text opaque over translucent surfaces.
+- `--choice-card-gap` sets the space between a `.choice-card` indicator and its label.
+- `tests/browser/choice-card.test.js` locks the leading indicator: visible at rest, level with the first line of a wrapping label, and kept under forced colors.
+- `.shimmer` (`actual-css/css/effects/shimmer`) sweeps a highlight across a text label for an activity in progress; hooks `--shimmer-color` and `--shimmer-highlight`.
+- `.range` moves to a `1.125rem` thumb on a `0.625rem` track with a `data-enhance="range"` fill (`--range-progress`) and named `datalist` values (`aria-valuetext` plus `output` sync).
+- `--flyout-pad` gives rich flyout panels dialog air.
+- `tests/browser/control-geometry.test.js` locks the shared control block geometry: input, select, addon, and buttons (including busy and icon-only) share one height per size, and the spinner follows its context at `1em`.
+
+### Changed
+
+- `--indicator-ring`, the `.avatar-stack` ring, the `.range` thumb separator, segmented `.meter` separators and `.steps` markers read `--surface-opaque`.
+- `.tooltip` text reads `--surface-solid-fg`.
+- `.aura` masks its frame under the child with `--surface-opaque`, so a transparent or translucent child is framed rather than filled.
+- The `.aura` far halo is an outer `box-shadow`, so it never paints under the child.
+- `.status-bar` without an intent paints `--surface-solid` / `--surface-solid-fg` instead of `--text` / `--surface`.
+- `registerEnhancement()` discovers every named behavior through one shared `[data-enhance]` query per root instead of one `[data-enhance~="name"]` selector each.
+- The command router calls `event.preventDefault()` once a target resolves, before `handle`; handlers no longer cancel the click themselves.
+- `--focus-outline` (the generic `currentColor` focus fallback) is `--focus-ring-width` wide instead of `2 × --border-width`: 3px instead of 4px under `prefers-contrast: more`.
+
+### Fixed
+
+- `actual-css/js/range` synchronizes fill, `aria-valuetext`, and outputs after a native form reset, including controls associated through `form="…"`, while respecting cancellation and teardown.
+- Docs search leaves Enter on the close button and IME confirmation alone, and ArrowUp from no selection reaches the last result.
+- `demo/sites/admini/chat.html` loads the shared composer recipe before local overrides so the bottom bar keeps its flat border and compact textarea.
+- `.otp` with `.input` on its native input no longer draws the field focus ring around all the cells.
+- Docs search keeps focus in the input while arrowing through results (`aria-activedescendant` + `Home`/`End`), so the second and later matches are reachable by keyboard; `Enter` follows the highlight instead of closing the dialog.
+- `.tab` and `.rating` draw the component focus ring (`--focus-ring-width` solid `--focus`): an intent on the rating no longer becomes the focus color, and neither ring is 4px under `prefers-contrast: more`.
+- `commandSelector()` matches native command keywords case-insensitively, as the router does.
+- The command router ignores a trigger disabled through a `<fieldset disabled>` ancestor.
+- `tooltip.js` shows on focus only when the trigger matches `:focus-visible`: a pointer press, or focus handed back by a dialog closed with the pointer, no longer brings the tooltip back.
+
+### Documentation and tooling
+
+- Choice cards: a stacked-list demo, and a "Corner badge" recipe (`.choice-tile`) that the Neon Ramen item page uses for its tiles.
+- `tests/browser/choice-chip.test.js` asserts the chip's dot layer keeps its height, not just its clip and colour.
+- `tests/exports.test.js` keys its inventory on every JS subpath of `package.json#exports`, so a new subpath or an export on an unlisted module now fails the suite.
+- Docs search ranks a query token inside a longer alias (`select` finds the Combobox page via `searchable select`) and matches body text on word boundaries, so `selection` no longer outranks `select`; Combobox and Forms carry `select`, `custom select`, and `form controls` aliases.
+- `focus.css` documents two focus contracts: text-like elements keep the `currentColor` fallback, boxed components draw the `--focus` ring, and an invalid field's `--form-invalid-border` ring is the one exception.
+- `tests/css-audit.test.js` fails on any framework `outline` outside the two focus contracts.
+- `report:theme-contrast` reports each preset's invalid-field focus line against the field background.
+- `check:sync` fails when the `.sm` and `.lg` participant lists in `variants.css` diverge.
+- Tailwind guide: `.outline` is named as the dangerous collision, with `.table`, `.sticky`, `.truncate`, `.prose`, and `.sr-only`.
+- Tailwind and Bootstrap guides: a prefix transform is consumer-pipeline work and must also rename the runtime state classes in `actual-css/js/selectors`.
+- Table: clarified the responsive boundary — horizontal overflow (`.table-wrap` + `--table-min` + accessible scroll) stays the strategy, and the docs now name the alternatives (list/media view, `.data-list`, dedicated data grid).
+- Badge vs choice chip vs removable tag vocabulary: a badge is information (non-interactive), `choice-card.chip` is a selectable label (never nest a `.close` inside it), and removable tags belong to the widget that produced them.
+- Combobox: a "Bridge contract" section names what Actual owns (tokens, focus, invalid, `.join`, contrast) versus the widget (behavior, multi-value, i18n), and keeps the bridge CSS in docs/demo.
+- Tabs: the `.tabs` strip / `.tab` trigger pair is documented as the container/item convention, with the `tab` module versus `tabs` token split stated.
+- Pagination: items are documented as `.btn.ghost` with chevrons on Previous/Next, so `aria-current="page"` is the only filled item.
+- Rich text: `demo/templates/rich-text.html` is now an `@lekoala/rich-text` integration (`@0.2` from jsDelivr) instead of a hand-wired Squire prototype, with the skin reduced to a `--rt-*` token bridge plus a rich composer reusing `.composer` chrome.
+
 ## [0.10.0] - 2026-09-25
 
 ### Breaking changes
@@ -81,7 +179,7 @@
 - Button: a dark button (formerly `.btn.inverted`) is a custom intent, `--intent: var(--surface-solid)` / `--intent-fg: var(--surface)`.
 - `demo/templates/surfaces.html` is removed; `contrast-contexts.html` covers surface boundaries.
 - `tests/browser/inverted.test.js` becomes `surface-context.test.js`, on an application-painted band.
-- Pushing a version tag publishes the GitHub release: `.npmrc` keeps `npm version` on the bare tag format, `bun run release:notes` extracts (and validates) the dated changelog section, and the CI `release` job attaches `dist/`.
+- Pushing a version tag publishes the GitHub release: `bun run release` bumps, dates, rebuilds, commits and tags on the bare format, `bun run release:notes` extracts (and validates) the dated changelog section, and the CI `release` job attaches `dist/`.
 - Theming: a "Replace the palette with my own brand" entry names the tinted neutrals and soft-ink tokens a partial override leaves behind, and points at the minimal recolor set.
 - Tokens: the minimal recolor theme includes `--shadow-color`.
 - Tokens: a "Where a token is declared" section separates global, component-scoped, and relay properties, and shows the `var(--card-pad, <default>)` form for reading a component hook from outside.

package/README.md

@@ -42,6 +42,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 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 +57,7 @@ size is not worth optimizing:
 ```
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/actual-css@0.10/dist/actual.full.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/actual-css@0.11/dist/actual.full.min.css">
 ```
 
 ## Usage
@@ -127,7 +131,7 @@ registries:
 * **Full runtime, zero-config** — every built-in enhancer, compiled:
 
   ```html
-  <script src="https://cdn.jsdelivr.net/npm/actual-css@0.10/dist/actual.full.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/actual-css@0.11/dist/actual.full.js" type="module"></script>
   ```
 
 * **Your own build** — copy the package's `src/js/full.js` as your entry,

package/components.json

@@ -135,7 +135,8 @@
     "source": "src/css/components/bleed.css",
     "cssImport": "actual-css/css/components/bleed",
     "classes": [
-      "bleed"
+      "bleed",
+      "stack"
     ],
     "publicHooks": [
       "--bleed-pad"
@@ -198,6 +199,7 @@
       "--btn-default-hover-bg",
       "--btn-border-block-end-color",
       "--btn-border-block-end-width",
+      "--btn-border-block",
       "--spinner-width"
     ],
     "states": [
@@ -262,7 +264,11 @@
     ],
     "publicHooks": [
       "--close-size",
-      "--close-icon-size"
+      "--close-icon-size",
+      "--close-bg",
+      "--close-color",
+      "--close-hover-color",
+      "--close-hover-overlay"
     ]
   },
   {
@@ -326,7 +332,8 @@
     ],
     "publicHooks": [
       "--flyout-inline-size",
-      "--flyout-max-inline-size"
+      "--flyout-max-inline-size",
+      "--flyout-pad"
     ],
     "internalHooks": [
       "--menu-item-size",
@@ -443,6 +450,7 @@
       "meter"
     ],
     "publicHooks": [
+      "--meter-track",
       "--meter-value",
       "--bar-height"
     ]
@@ -462,11 +470,14 @@
     ],
     "publicHooks": [
       "--modal-size",
+      "--modal-pad",
+      "--modal-header-bg",
       "--dialog-viewport-gap",
       "--dialog-icon-size",
       "--dialog-icon-glyph-size"
     ],
     "internalHooks": [
+      "--dialog-inner-radius",
       "--dialog-focus-bleed",
       "--dialog-viewport-block",
       "--dialog-viewport-gap-default",