actual-css 0.11.0 → 0.11.1

package/docs/navigation.json

@@ -9,7 +9,8 @@
         "modular-import",
         "progressive-enhancement",
         "bootstrap",
-        "tailwind"
+        "tailwind",
+        "design-tools"
       ]
     },
     {

package/docs/pages/components/bleed.md

@@ -3,10 +3,11 @@
 `.bleed` lets a direct child of a padded surface reach its edges. Use it for a
 full-width image, a colored header or footer, or a notice band.
 
-It works inside `.card`, `.drawer`, and an accordion panel. The accordion panel
-owns the padding, so place `.bleed` directly inside the panel, after the summary.
-A deeper descendant stays within its wrapper. A modular build imports
-`actual-css/css/components/bleed` alongside the surface component.
+It works inside `.card`, `.drawer`, a modal's direct `<form>` or `.stack`, and
+an accordion panel. The accordion panel owns the padding, so place `.bleed`
+directly inside the panel, after the summary. A deeper descendant stays within
+its wrapper. A modular build imports `actual-css/css/components/bleed`
+alongside the surface component.
 
 ```html demo
 <article class="card stack" style="--card-max-inline-size: 24rem">

package/docs/pages/components/close.md

@@ -28,7 +28,9 @@
 In a `.modal` or a `.drawer`, the close sits out of the content flow at the
 panel's top inline-end corner. Place it as a direct child of the dialog, of its
 top-level `form` or `header`, or of a `form` inside that header; a `.close`
-deeper in the content keeps its own place. See [Dialog](dialog.md) and
+deeper in the content keeps its own place, so wrapping it in a `.cluster` keeps
+it in the header's row. A header that hosts the corner close reserves inline
+room so a title never runs under it. See [Dialog](dialog.md) and
 [Drawer](drawer.md).
 
 ```html
@@ -43,6 +45,10 @@ deeper in the content keeps its own place. See [Dialog](dialog.md) and
 
 - `--close-size` — inline and block size of the button; `--control-size` unless the container sets it.
 - `--close-icon-size` — size of the X.
+- `--close-bg` — background of the dialog corner close; `--surface-subtle` unless the dialog or a painted band sets it, e.g. `transparent` for a bare X.
+- `--close-color` — ink of the X; `--text-muted` at the dialog corner, otherwise inherited from the context.
+- `--close-hover-color` — ink of the dialog corner close on hover; `--text` unless a band sets its own foreground.
+- `--close-hover-overlay` — hover and active wash that tints the fill the context gave the control; the dialog corner sets it `transparent` so a hover changes only the ink.
 
-Alerts and badges declare both hooks on themselves, so set them on the container
-or on the button.
+Alerts and badges declare both size hooks on themselves, so set them on the
+container or on the button.

package/docs/pages/components/dialog.md

@@ -14,9 +14,37 @@
 | `.dialog-icon`         | Component   | Circular intent-aware icon well.               |
 | `.close`               | Composition | Icon-only close button, at the top end.        |
 
-A [`.close`](close.md) placed as a direct child of the dialog or of its form
-sits outside the content flow, so it does not take part in the dialog's own
-layout.
+## Anatomy
+
+`.modal` is the outer surface and deliberately has no inner padding. Wrap its
+content in a direct `<form>` or `.stack`; that wrapper owns the padding, rhythm,
+and overflow. Put `.stack` on the wrapper, never on `dialog.modal` itself.
+
+For a header band, place `<header>` directly under `dialog.modal`, before the
+body wrapper. Put a flexible `.media` title region first and a `.cluster` of
+controls second. The title has the close control's minimum height; its leading
+icon and every trailing control share the same center axis. A wrapped title
+simply makes the row taller.
+
+A direct `dialog > header` is dialog chrome and forms a distinct header band.
+Put an ordinary content heading inside the padded `form` or `.stack` instead.
+
+Keep a corner [`.close`](close.md) as a direct child of the dialog and put the
+title in the wrapper's direct `<header>`. The button then stays outside the
+content flow while the header reserves enough inline space to keep its title
+clear.
+
+A `.close` placed as a direct child of the chrome header is still the corner
+overlay. That header reserves the same inline room for it, never below its own
+`--modal-pad`, so a wrapping title stays clear either way.
+
+The corner close overlays the panel edge, so a body tall enough to scroll would
+run its scrollbar under the button. Give such a dialog the `scrollable` anatomy:
+the close then sits over the fixed header and the scrollbar starts below it.
+
+Add `.bleed` to that header when it should form a full-width band. It reaches
+the dialog edges, keeps the modal's inner padding, and can take a surface token
+such as `background: var(--surface-subtle)`.
 
 ## Usage
 
@@ -85,7 +113,8 @@ For a compact destructive confirmation with a leading status icon, compose
 `dialog-confirmation` with the media object. The icon well accepts the shared
 intent and emphasis classes; `dialog-icon danger soft` creates the tinted red
 circle while keeping the glyph centered. The footer becomes a separate action
-band without changing the semantics of the form or its buttons.
+band whose two actions sit at its edges, so the cancel-style control never sits
+next to the committing one.
 
 ```html demo
 <button class="btn danger"
@@ -121,6 +150,49 @@ band without changing the semantics of the form or its buttons.
 </dialog>
 ```
 
+For a trailing illustration, use a direct `<header>` as the message region and
+compose it as a non-wrapping split cluster. `.grow` keeps the text column
+flexible while `.dialog-icon` stays at the inline end. The confirmation variant
+pads either this header or the leading-icon `.media` shape above.
+
+Use the same anatomy in a `.card` instead when the surface belongs in page
+content and does not need modal focus or a backdrop.
+
+```html demo
+<button class="btn"
+        type="button"
+        commandfor="customize-dialog"
+        command="show-modal"
+        aria-haspopup="dialog"
+        aria-controls="customize-dialog">
+  Customize workspace
+</button>
+
+<dialog class="modal dialog-confirmation"
+        id="customize-dialog"
+        closedby="none"
+        aria-labelledby="customize-dialog-title">
+  <form method="dialog">
+    <header class="cluster"
+            style="--cluster-align: start; --cluster-justify: space-between; --cluster-wrap: nowrap">
+      <hgroup class="grow">
+        <h3 id="customize-dialog-title">Make this workspace your own</h3>
+        <p class="muted">Choose colors and defaults now, or continue with the current settings.</p>
+      </hgroup>
+
+      <span class="dialog-icon success soft" aria-hidden="true">
+        <i class="ti ti-check"></i>
+      </span>
+    </header>
+
+    <footer>
+      <button class="btn primary" value="customize">Customize</button>
+      <button class="btn ghost" value="later">Later</button>
+    </footer>
+  </form>
+</dialog>
+```
+
 ## Information modal
 
 Use this shape for contextual information or lightweight secondary content. It
@@ -163,6 +235,67 @@ has no action button; the header close button dismisses the dialog.
 </dialog>
 ```
 
+## Action modal
+
+Use this shape when contextual information leads to one non-destructive next
+step, such as reviewing a setup before continuing. Unlike an alert dialog, it
+can be dismissed without choosing the action; unlike an information modal, it
+has a primary action in a footer.
+
+Use `.dialog-icon` with the media object for a leading title icon. An `.alert`
+belongs in the body only when the dialog contains a distinct status message;
+the dialog title itself is not an alert.
+
+```html demo
+<button class="btn primary"
+        type="button"
+        commandfor="setup-dialog"
+        command="show-modal"
+        aria-haspopup="dialog"
+        aria-controls="setup-dialog">
+  Continue setup
+</button>
+
+<dialog class="modal"
+        id="setup-dialog"
+        closedby="any"
+        data-dialog-dismissible
+        aria-labelledby="setup-dialog-title">
+  <header>
+    <div class="media items-center grow">
+      <span class="dialog-icon warning soft" aria-hidden="true">
+        <i class="ti ti-alert-triangle"></i>
+      </span>
+
+      <h2 id="setup-dialog-title">Finish workspace setup</h2>
+    </div>
+
+    <div class="cluster">
+      <button class="close"
+              type="button"
+              commandfor="setup-dialog"
+              command="request-close"
+              aria-controls="setup-dialog"
+              aria-label="Close dialog"></button>
+    </div>
+  </header>
+
+  <form method="dialog" class="stack">
+    <div class="card stack">
+      <p><strong>Acme workspace</strong></p>
+      <p>Team plan</p>
+      <p>Starts October 1</p>
+    </div>
+
+    <p>Confirm these settings to finish setting up the workspace.</p>
+
+    <footer>
+      <button class="btn primary inline-size-full" value="continue">Continue</button>
+    </footer>
+  </form>
+</dialog>
+```
+
 ## Scrollable modal
 
 Use `modal scrollable` when the header and footer should stay visible while the
@@ -371,20 +504,16 @@ Prefer native dialog behavior whenever possible. The framework runtime should
 not replace the platform modal system; it should only make dialogs declarative,
 animation-friendly, and consistent across supported browsers.
 
-The close button is anchored to the dialog surface, not the content flow: it
-sits at the top `inline-end`, inside the panel. The button itself is out of
-flow, while the header reserves enough inline padding to keep its title clear.
-Keep the button a direct child of `dialog.modal` so the scrolling content
-(`> form` or `> .stack`) never competes with it.
-
 ## CSS hooks
 
 - `--modal-size` — maximum dialog width. Fallback-only, so a class on the
   dialog or an inherited value both reach it. A dialog is shrink-to-fit: a
   composition that must fill this width sets `inline-size` as well.
+- `--modal-pad` — padding of the direct `<form>` or `.stack` content wrapper.
+- `--modal-header-bg` — background of a direct header band.
 - `--dialog-viewport-gap` — distance kept between the dialog and the viewport edges.
 - `--dialog-icon-size` — diameter of the `.dialog-icon` circle.
 - `--dialog-icon-glyph-size` — size of the glyph centered inside `.dialog-icon`.
 - `--close-size` / `--close-icon-size` — size of the corner `.close` and of its
-  X. The header reserves the close size plus `--space-30` on its inline end so
+  X. The header reserves the close size, its edge inset, and a content gap so
   the title never runs under it.

package/docs/pages/components/meter.md

@@ -70,6 +70,8 @@ marker to that background rather than to the neutral intent.
 
 ### Hooks
 
+- `--meter-track` — track color; raise it when the meter sits on a
+  `--surface-subtle` card, where the default track would disappear.
 - `--bar-height` — bar thickness, shared with `.progress`.
 - `--meter-value` — relative weight of a direct child in a segmented meter.
 

package/docs/pages/examples/overview.md

@@ -28,6 +28,7 @@ Whole pages, composed the way a real product would.
 - [Marketing](../../demo/templates/marketing.html) - landing page with typography and fluid type
 - [Blog](../../demo/templates/blog.html) - article page with prose
 - [Settings modal](../../demo/templates/settings-modal.html) - two-pane preferences dialog, with the local CSS it needs audited rule by rule
+- [Modal patterns](../../demo/templates/modal-patterns.html) - eight application modals, each the modal surface plus the smallest application CSS it needs
 - [Workspace settings](../../demo/templates/settings-pricing.html) - plans with visible native choices, preferences and a local segmented tab treatment
 - [Card compositions](../../demo/templates/card-compositions.html) - editorial, team, sign-in and horizontal cards composed from existing primitives
 - [Register form](../../demo/templates/register-form.html) - registration page with choice cards, masks, the password toggle, `tel-prefix` validation, an OTP verification dialog, and status feedback

package/docs/pages/guides/design-tools.md

@@ -0,0 +1,36 @@
+# Design tools (Figma, Penpot)
+
+`actual-css design` exports a theme to design tools: its tokens for Figma and Penpot, and a Penpot plugin that builds Button, Input, Badge, Alert and Card bound to those tokens. Use it to hand designers the same palette, scale and components the code ships — a design kit, a UI kit, a Figma or Penpot library generated from your theme.
+
+```sh
+bunx actual-css design --theme src/theme.css --out design/
+```
+
+`--theme` is a file declaring one `[data-theme="…"]` block (see [Theming](../foundations/theming.md)); without it the default theme is exported. The command needs Bun: it reads the theme in headless Chrome, so every `light-dark()`, `color-mix()` and `var()` chain resolves exactly as the browser paints it.
+
+## What is exported
+
+| File                                          | Content                              |
+| --------------------------------------------- | ------------------------------------ |
+| `figma/foundations.tokens.json`               | spacing, radius, borders, type sizes |
+| `figma/light.tokens.json`, `dark.tokens.json` | colors, one file per scheme          |
+| `penpot/tokens.json`                          | all tokens, as sets and themes       |
+| `penpot/plugin/`                              | the plugin and component spec        |
+
+Token names are the CSS names without `--`: `surface-raised` in the design tool is `var(--surface-raised)` in code. A scheme exists when the theme declares it: `color-scheme: light dark` exports both, anything else one. Lengths are exported in px, with the CSS value kept in `$extensions["actual-css"]`.
+
+Colors no theme token paints — the soft fills and borders of `.soft` — are exported as recipe tokens named `<variant>-<intent>-<role>` (`soft-danger-bg`, `soft-danger-border`, `soft-danger-fg`), next to the theme colors so they switch with the scheme. Font stacks, line heights, shadows, motion and z-index have no design-tool equivalent and are not exported.
+
+## Figma
+
+Import each file from the Variables panel. Figma makes one collection per file: import `light`, then add `dark` to that collection as a second mode (a paid-plan feature; the free plan allows one mode per collection).
+
+## Penpot
+
+1. Tokens tab → Tools → Import `penpot/tokens.json`. It replaces the file's tokens.
+2. Serve `penpot/plugin/` over http with CORS, and add its `manifest.json` URL in the plugin manager (`Ctrl + Alt + P`).
+3. Run **Build components**.
+
+The components are built on their own page, "Actual CSS components"; drag instances from Assets onto any page. Each is a variant set whose properties are the classes an author stacks — `Intent`, `Variant` and `Size` on Button and Badge, `Intent` and `Variant` on Alert, `Size` on Input — defaulting to the bare class (`.btn`, `.badge`). Fills, borders and text colors are bound to tokens, so switching the Penpot theme between Light and Dark repaints every variant. Radius, padding, height and type are the measured values: run the export again after changing them in the theme.
+
+The components are measured, not modelled: the browser renders the classes and the plugin replays the result, so a theme's own radius or padding shows up without configuration. States (hover, focus, disabled) stay a code concern.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "actual-css",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "Plain CSS component framework with semantic classes, universal variants, small tokens, theme hooks, and progressive enhancements.",
   "type": "module",
   "packageManager": "bun@1.4.2",
@@ -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/skills/actual-css/references/enhancements.md

@@ -21,6 +21,41 @@ Self-describing leaf behavior should use the feature's own documented attribute,
 
 Native `<dialog>` is semantically self-describing and does not need a generic enhancement token merely to be a dialog.
 
+## Dialog anatomy
+
+Treat `.modal` as the outer surface, not as its content layout. It deliberately
+has no padding. Wrap modal content in a direct `<form>` or `.stack`; do not put
+`.stack` on `dialog.modal` itself.
+
+For a header band, put `<header>` directly under the dialog before the body
+wrapper. Compose a flexible `.media` title region and a trailing `.cluster` of
+controls. Nest `.close` in that cluster so it remains in flow; the title,
+leading `.dialog-icon`, close, and any additional control then share one center
+axis and the title uses the close control's minimum height. A direct
+`dialog > header` is dialog chrome and forms a distinct band; put an ordinary
+content heading in the wrapper's `<header>` instead.
+
+For a corner close button, keep `.close` as a direct child of the dialog and put
+the title in the content wrapper's direct `<header>`. The close button is then
+anchored to the surface, and the header reserves room so the title cannot run
+under it. A `.close` that is a direct child of the chrome header is that same
+corner overlay, and that header reserves room for it too. Put actions in the
+wrapper's `<footer>`.
+
+Use `.bleed` on that direct header when it needs a contrasting full-width band;
+the wrapper relays the modal padding so the band reaches the surface edges while
+its contents keep the normal inset. In `.dialog-confirmation`, keep the icon and
+the text header as the media object's two children; the component centers the
+header's first heading on the icon while following copy stays in that text
+column. For a trailing icon, use the confirmation's direct header as a
+non-wrapping split `.cluster`, with `.grow` on the text group. Do not compensate
+heading alignment with a literal margin.
+
+Do not turn the dialog heading into an `.alert` to obtain icon or surface
+styling. Compose `.dialog-icon` with `.media` for a leading title icon; reserve
+`.alert` for a distinct status message in the dialog body. Inspect
+`docs/pages/components/dialog.md` in the installed package for current recipes.
+
 ## Custom widgets
 
 Before implementing lifecycle, focus, Escape handling, keyboard navigation, input rewriting, or floating-surface policy from scratch, inspect the exported Actual JS primitives.

package/src/cli/actual-css.js

@@ -7,16 +7,23 @@ import { inlineImports, minifyCss } from "../tooling/css-bundle.js";
 function usage() {
   return [
     "actual-css bundle INPUT --out FILE [--minify]",
+    "actual-css design [--theme FILE] [--name NAME] --out DIR",
     "",
-    "  -o, --out FILE   write the bundle to FILE (required)",
+    "  -o, --out FILE   write the bundle to FILE / the export to DIR (required)",
     "      --minify     collapse comments and whitespace",
+    "      --theme FILE export this [data-theme] file instead of the default theme",
+    "      --name NAME  the data-theme name, when the file declares several",
     "  -h, --help       show this message",
     "      --version    print the actual-css version",
     "",
-    "Bundle plain CSS @import chains from relative files and actual-css/css/* subpaths.",
-    "A layer or layer(name) import is flattened into the @layer block it stands for.",
-    "Remote imports are kept and hoisted to the top of the bundle.",
+    "bundle: flatten plain CSS @import chains from relative files and actual-css/css/*",
+    "subpaths. A layer or layer(name) import is flattened into the @layer block it",
+    "stands for. Remote imports are kept and hoisted to the top of the bundle.",
     "Leaves modern CSS syntax untouched; this is a bundler, not a transpiler.",
+    "",
+    "design: export a theme's tokens for Figma and Penpot, plus Button, Input, Badge,",
+    "Alert and Card measured in headless Chrome and a Penpot plugin that builds them.",
+    "Needs Bun (bunx actual-css design ...).",
   ].join("\n");
 }
 
@@ -36,6 +43,10 @@ function parseArgs(argv) {
     return { version: true };
   }
 
+  if (command === "design") {
+    return parseDesignArgs(rest);
+  }
+
   if (command !== "bundle") {
     throw new Error(`Unknown command: ${command}`);
   }
@@ -87,7 +98,39 @@ function parseArgs(argv) {
     throw new Error("Missing required --out FILE option.");
   }
 
-  return { help: false, input, out, minify };
+  return { help: false, command: "bundle", input, out, minify };
+}
+
+function parseDesignArgs(rest) {
+  const options = { help: false, command: "design", themeFile: null, name: null, out: "" };
+  const valued = { "--theme": "themeFile", "--name": "name", "--out": "out", "-o": "out" };
+
+  for (let i = 0; i < rest.length; i += 1) {
+    const arg = rest[i];
+    if (arg === "--help" || arg === "-h") return { help: true };
+    const key = valued[arg];
+    if (!key) throw new Error(`Unknown option: ${arg}`);
+    const value = rest[i + 1];
+    if (!value) throw new Error(`Missing value for ${arg}.`);
+    options[key] = value;
+    i += 1;
+  }
+
+  if (!options.out) throw new Error("Missing required --out DIR option.");
+  return options;
+}
+
+async function design({ themeFile, name, out }) {
+  // Checked before the import: under Node the module does not even parse
+  // (`await using`), and `bundle` must stay usable there.
+  if (typeof Bun === "undefined") {
+    throw new Error(
+      "actual-css design needs Bun: it reads the theme in headless Chrome through Bun.WebView. Run it with bunx.",
+    );
+  }
+  const { exportDesign } = await import("../tooling/design-export.js");
+  const written = await exportDesign({ themeFile, name, out: resolve(out) });
+  console.log(`Exported ${written.length} files to ${resolve(out)}`);
 }
 
 async function bundle({ input, out, minify }) {
@@ -124,7 +167,7 @@ async function main() {
     return;
   }
 
-  await bundle(args);
+  await (args.command === "design" ? design(args) : bundle(args));
 }
 
 main().catch((error) => {

package/src/css/components/bleed.css

@@ -5,9 +5,9 @@
  *
  * A surface that insets its direct children relays that inset to them as
  * --surface-pad; a direct .bleed child cancels it and reaches the surface
- * edge. Card and drawer pad at the container level, so they own the token
- * there; the accordion pads its summary and its panel instead, so the panel
- * owns it and the item does not.
+ * edge. Card and drawer pad at the container level, while modal pads its inner
+ * wrapper; each owns the token where that inset lives. The accordion pads its
+ * summary and panel instead, so the panel owns it and the item does not.
  *
  * Why the token is handed to the children rather than declared on the surface:
  * custom properties inherit, so a surface-level declaration would also reach a
@@ -28,11 +28,11 @@
  * Framework plumbing:
  * --surface-pad (declared by the surface)
  */
-:where(.card, .drawer, .accordion details > summary + *) > * * {
+:where(.card, .drawer, dialog.modal > :is(form, .stack), .accordion details > summary + *) > * * {
   --bleed-pad: initial;
 }
 
-:where(.card, .drawer, .accordion details > summary + *) > * {
+:where(.card, .drawer, dialog.modal > :is(form, .stack), .accordion details > summary + *) > * {
   --bleed-pad: var(--surface-pad);
 }
 

package/src/css/components/button.css

@@ -31,6 +31,7 @@
  * --btn-default-hover-bg
  * --btn-border-block-end-color
  * --btn-border-block-end-width
+ * --btn-border-block
  * --spinner-width
  */
 
@@ -56,6 +57,10 @@
   --btn-default-hover-bg: var(--btn-bg);
   --btn-radius: var(--radius);
   --btn-hover-overlay: var(--hover-overlay, rgb(0 0 0 / 0.08));
+  --btn-border-block: calc(
+    var(--border-width) +
+    var(--btn-border-block-end-width, var(--border-width))
+  );
 
   /* Positioning context for indicators, overlays, and grouped states. */
   position: relative;
@@ -65,7 +70,13 @@
   gap: var(--btn-gap, 0.375em);
   min-block-size: var(--btn-min-size);
   padding-block: var(--space-20);
-  padding-block: max(var(--space-10), calc((var(--btn-min-size) - 1lh) / 2));
+  /* why: centres one line in --btn-min-size and keeps that rhythm when the
+     label wraps. min-block-size is a border-box length, so both borders come
+     out of it; without them .btn stood 2px taller than .input. */
+  padding-block: max(
+    var(--space-10),
+    calc((var(--btn-min-size) - 1lh - var(--btn-border-block)) / 2)
+  );
   padding-inline: var(--btn-pad-x);
   border: var(--border-width) solid var(--btn-border-color, var(--btn-border));
   border-block-end-color: var(
@@ -162,6 +173,8 @@
   --ui-fg: var(--intent, currentColor);
   --ui-border: transparent;
   --btn-radius: var(--radius-sm);
+  /* border: 0 below; the padding must not subtract a border it lacks. */
+  --btn-border-block: 0px;
 
   min-block-size: auto;
   padding-inline: 0;

package/src/css/components/close.css

@@ -16,8 +16,17 @@
  * Public hooks:
  * --close-size
  * --close-icon-size
+ * --close-bg
+ * --close-color
+ * --close-hover-color
+ * --close-hover-overlay
  */
 .close {
+  /* Routes the hover/active wash, as --btn-hover-overlay does for .btn. A
+     context that wants ink-only feedback (the dialog corner) sets it
+     transparent. */
+  --close-hover-overlay: var(--hover-overlay);
+
   display: inline-grid;
   place-items: center;
   flex: none;
@@ -44,12 +53,12 @@
    the control (the dialog corner's --surface-subtle) instead of replacing it. */
 @media (hover: hover) {
   .close:hover {
-    box-shadow: inset 0 0 0 999px var(--hover-overlay);
+    box-shadow: inset 0 0 0 999px var(--close-hover-overlay);
   }
 }
 
 .close:active {
-  box-shadow: inset 0 0 0 999px var(--hover-overlay);
+  box-shadow: inset 0 0 0 999px var(--close-hover-overlay);
 }
 
 .close:focus-visible {
@@ -61,23 +70,25 @@
    surface rather than to the header or a scroll container inside it. Matched
    on the documented positions (the dialog, its form, its header, or a form
    inside that header) so a .close inside content — an alert in the body —
-   keeps its own place. */
+   keeps its own place. The corner drops the wash: only the ink changes. */
 :where(dialog):is(.modal, .drawer) > .close,
 :where(dialog):is(.modal, .drawer) > :is(form, header) > .close,
 :where(dialog):is(.modal, .drawer) > :is(form, header) > :is(form, header) > .close {
+  --close-hover-overlay: transparent;
+
   position: absolute;
   z-index: 1;
   inset-block-start: var(--space-20);
   inset-inline-end: var(--space-20);
-  background: var(--surface-subtle);
-  color: var(--text-muted);
+  background: var(--close-bg, var(--surface-subtle));
+  color: var(--close-color, var(--text-muted));
 }
 
 @media (hover: hover) {
   :where(dialog):is(.modal, .drawer) > .close:hover,
   :where(dialog):is(.modal, .drawer) > :is(form, header) > .close:hover,
   :where(dialog):is(.modal, .drawer) > :is(form, header) > :is(form, header) > .close:hover {
-    color: var(--text);
+    color: var(--close-hover-color, var(--text));
   }
 }
 

package/src/css/components/meter.css

@@ -11,11 +11,14 @@
  * .sm/.lg are deliberately not supported.
  *
  * Public hooks:
+ * --meter-track
  * --meter-value
  * --bar-height
  */
 
 .meter {
+  --meter-track: var(--surface-subtle);
+
   appearance: none;
   -webkit-appearance: none;
   display: block;
@@ -24,7 +27,7 @@
   overflow: hidden;
   border: 0;
   border-radius: var(--radius-full);
-  background: var(--surface-subtle);
+  background: var(--meter-track);
 }
 
 /* A non-native meter is a weighted flex container. The element type keeps the
@@ -51,7 +54,7 @@
   block-size: var(--bar-height);
   border: 0;
   border-radius: var(--radius-full);
-  background: var(--surface-subtle);
+  background: var(--meter-track);
 }
 
 .meter::-webkit-meter-optimum-value {