actual-css 0.11.0 → 0.11.1

package/CHANGELOG.md

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

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

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"
     ]
   },
   {
@@ -444,6 +450,7 @@
       "meter"
     ],
     "publicHooks": [
+      "--meter-track",
       "--meter-value",
       "--bar-height"
     ]
@@ -463,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",

package/dist/actual.full.css

@@ -2448,7 +2448,11 @@ small {
      the whole control, not just the filename text. */
   min-block-size: var(--control-size);
   padding-block: var(--space-10);
-  padding-block: max(var(--space-10), calc((var(--control-size) - 1lh) / 2));
+  /* Border-box height: both borders come out of the padding, as on .btn. */
+  padding-block: max(
+    var(--space-10),
+    calc((var(--control-size) - 1lh - 2 * var(--border-width)) / 2)
+  );
   padding-inline: var(--space-20);
   border: var(--border-width) solid var(--border);
   border-radius: var(--radius-sm);
@@ -3735,6 +3739,7 @@ small {
  * --btn-default-hover-bg
  * --btn-border-block-end-color
  * --btn-border-block-end-width
+ * --btn-border-block
  * --spinner-width
  */
 
@@ -3760,6 +3765,10 @@ small {
   --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;
@@ -3769,7 +3778,13 @@ small {
   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(
@@ -3866,6 +3881,8 @@ small {
   --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;
@@ -3957,8 +3974,17 @@ a.btn[aria-disabled="true"] {
  * 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;
@@ -3985,12 +4011,12 @@ a.btn[aria-disabled="true"] {
    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 {
@@ -4002,23 +4028,25 @@ a.btn[aria-disabled="true"] {
    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));
   }
 }
 
@@ -4703,6 +4731,8 @@ a.badge[aria-disabled="true"] {
  *
  * Public hooks:
  * --modal-size
+ * --modal-pad
+ * --modal-header-bg
  * --dialog-viewport-gap
  * --dialog-icon-size
  * --dialog-icon-glyph-size
@@ -4710,6 +4740,7 @@ a.badge[aria-disabled="true"] {
  * The corner close control is .close (components/close.css).
  *
  * Internal:
+ * --dialog-inner-radius
  * --dialog-focus-bleed
  * --dialog-viewport-block
  * --dialog-viewport-gap-default
@@ -4728,6 +4759,11 @@ a.badge[aria-disabled="true"] {
     var(--dialog-viewport-gap, var(--dialog-viewport-gap-default))
   );
 
+  /* The panel is borderless, so its inner and outer radius are the same. Kept
+     as one name for the padded wrapper and any edge band (header,
+     confirmation footer) so none of them drifts from the corner. */
+  --dialog-inner-radius: var(--radius-lg);
+
   /* Keep the surface anchored to the viewport in the top layer. This also
      provides the containing block for the absolutely positioned close button. */
   position: fixed;
@@ -4741,7 +4777,9 @@ a.badge[aria-disabled="true"] {
      dynamic token; only the modal pins the small viewport. */
   --dialog-viewport-block: var(--viewport-block);
   max-block-size: calc(var(--dialog-viewport-block) - var(--dialog-viewport-gap-2x));
-  border: var(--border-width) solid var(--border);
+  /* Zero rather than absent: the UA stylesheet draws `border: solid` on
+     dialog, and an authored edge reads as a hard seam against .bleed bands. */
+  border: 0;
   border-radius: var(--radius-lg);
   background: var(--surface-raised);
   color: var(--text);
@@ -4763,14 +4801,73 @@ a.badge[aria-disabled="true"] {
     transform var(--duration) var(--ease-exit);
 }
 
+@media (forced-colors: active) {
+  /* With no authored border the panel edge disappears once colors collapse.
+     The browser forces the border color, so only the width is authored. */
+  :where(dialog).modal {
+    border: var(--border-width) solid CanvasText;
+  }
+}
+
 :where(dialog).modal > form,
 :where(dialog).modal > .stack {
+  --surface-pad: var(--modal-pad, var(--space-40));
+
   display: grid;
   gap: var(--space-40);
   max-block-size: calc(var(--dialog-viewport-block) - var(--dialog-viewport-gap-2x));
+  border-radius: var(--dialog-inner-radius);
   overflow: auto;
   overscroll-behavior: contain;
-  padding: var(--space-40);
+  padding: var(--surface-pad);
+}
+
+/* Optional dialog chrome lives beside the padded body wrapper. Its leading
+   region and trailing controls share one center axis; wrapping the close in
+   the trailing cluster keeps it in flow instead of invoking the absolute
+   corner treatment from close.css. */
+:where(dialog).modal > header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-30);
+  min-block-size: var(--close-size, var(--control-size));
+  padding: var(--modal-pad, var(--space-40));
+  border-start-start-radius: var(--dialog-inner-radius);
+  border-start-end-radius: var(--dialog-inner-radius);
+  background: var(--modal-header-bg, var(--surface-subtle));
+}
+
+:where(dialog).modal > header > .media {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+
+:where(dialog).modal > header > .media > :is(h1, h2, h3, h4, h5, h6) {
+  display: flex;
+  align-items: center;
+  min-block-size: var(--close-size, var(--control-size));
+  margin-block: 0;
+}
+
+:where(dialog).modal > header > .cluster {
+  --cluster-wrap: nowrap;
+
+  flex: none;
+}
+
+@supports selector(dialog:has(> header)) {
+  /* The header stays fixed while the body wrapper owns overflow. Without
+     :has(), compact dialogs keep ordinary block flow as the fallback. */
+  :where(dialog).modal[open]:has(> header) {
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+
+  :where(dialog).modal:has(> header) > :is(form, .stack) {
+    min-block-size: 0;
+    max-block-size: none;
+  }
 }
 
 @supports (block-size: 100svh) {
@@ -4822,12 +4919,32 @@ a.badge[aria-disabled="true"] {
   margin-block-end: 0;
 }
 
+/* A media row inside the structural header is title anatomy, so its heading
+   does not bring prose margins into the icon alignment. */
+:where(dialog).modal > :where(form, .stack) > header > .media > :is(h1, h2, h3, h4, h5, h6) {
+  margin-block: 0;
+}
+
 /* The close button is anchored to the dialog at top inline-end, out of the
    content flow; headers reserve inline room so titles never run under it.
    The form/.stack anatomy is structural, so it stays in :where() and never
    lends .stack's specificity to a bare <form>. */
 :where(dialog).modal > :where(form, .stack) > header {
-  padding-inline-end: calc(var(--close-size, var(--control-size)) + var(--space-30));
+  padding-inline-end: calc(
+    var(--close-size, var(--control-size)) +
+    var(--space-20) +
+    var(--space-30)
+  );
+}
+
+/* A corner .close that is a direct child of the chrome header needs the same
+   reserve, but never below the header's own pad. Kept as its own rule so an
+   unsupported :has() drops only this geometry, not the wrapper reserve. */
+:where(dialog).modal > header:has(> .close) {
+  padding-inline-end: max(
+    var(--modal-pad, var(--space-40)),
+    calc(var(--close-size, var(--control-size)) + var(--space-20) + var(--space-30))
+  );
 }
 
 :where(dialog).modal > :where(form, .stack) > footer {
@@ -4841,19 +4958,25 @@ a.badge[aria-disabled="true"] {
    action band. The media primitive owns icon/content alignment; this variant
    only removes the standard form inset so both regions can own their padding. */
 :where(dialog).modal.dialog-confirmation > form {
+  --surface-pad: 0px;
+
   gap: 0;
   padding: 0;
 }
 
-:where(dialog).modal.dialog-confirmation > form > .media {
+:where(dialog).modal.dialog-confirmation > form > :is(.media, header) {
   gap: var(--space-40);
   padding: var(--space-50);
 }
 
+/* The action band splits a decision pair: the cancel-style action holds the
+   leading edge and the committing action the trailing one, so the destructive
+   choice is never adjacent to the dismiss. */
 :where(dialog).modal.dialog-confirmation > form > footer {
+  justify-content: space-between;
   padding: var(--space-40) var(--space-50);
-  border-end-start-radius: calc(var(--radius-lg) - var(--border-width));
-  border-end-end-radius: calc(var(--radius-lg) - var(--border-width));
+  border-end-start-radius: var(--dialog-inner-radius);
+  border-end-end-radius: var(--dialog-inner-radius);
   background: var(--surface-subtle);
 }
 
@@ -4890,8 +5013,29 @@ a.badge[aria-disabled="true"] {
   line-height: 1;
 }
 
+:where(dialog).modal.dialog-confirmation > form > .media > header {
+  display: grid;
+  gap: var(--space-20);
+}
+
+:where(dialog).modal.dialog-confirmation > form > .media > header > * {
+  margin-block: 0;
+}
+
+/* The first heading occupies the icon row, so its text centers on the icon
+   without a font-relative nudge. Following copy stays in the same column. */
+:where(dialog).modal.dialog-confirmation
+  > form
+  > .media
+  > header
+  > :is(h1, h2, h3, h4, h5, h6):first-child {
+  display: flex;
+  align-items: center;
+  min-block-size: var(--dialog-icon-size, 3rem);
+}
+
 @media (max-width: 30rem) {
-  :where(dialog).modal.dialog-confirmation > form > .media,
+  :where(dialog).modal.dialog-confirmation > form > :is(.media, header),
   :where(dialog).modal.dialog-confirmation > form > footer {
     padding: var(--space-40);
   }
@@ -5217,9 +5361,9 @@ html.has-modal-open.had-scrollbar {
  *
  * 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
@@ -5240,11 +5384,11 @@ html.has-modal-open.had-scrollbar {
  * 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);
 }
 
@@ -8158,11 +8302,14 @@ a.list-item[aria-current]::before {
  * .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;
@@ -8171,7 +8318,7 @@ a.list-item[aria-current]::before {
   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
@@ -8198,7 +8345,7 @@ a.list-item[aria-current]::before {
   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 {