actual-css 0.11.1 → 0.13.0

package/src/cli/actual-css.js

@@ -8,10 +8,11 @@ function usage() {
   return [
     "actual-css bundle INPUT --out FILE [--minify]",
     "actual-css design [--theme FILE] [--name NAME] --out DIR",
+    "actual-css contrast [--theme FILE] [--name NAME]",
     "",
     "  -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",
+    "      --theme FILE read this theme file ([data-theme] or :root) over the default",
     "      --name NAME  the data-theme name, when the file declares several",
     "  -h, --help       show this message",
     "      --version    print the actual-css version",
@@ -23,7 +24,13 @@ function usage() {
     "",
     "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 ...).",
+    "Needs Bun (bunx --bun actual-css design ...).",
+    "",
+    "contrast: measure the pairs a theme tunes by hand in headless Chrome, in every",
+    "scheme it declares: soft ink on its resting and hovered fill, the focus line on",
+    "--surface and --surface-solid, the invalid-field focus line, and the inverse",
+    "text. Exits 1 when a pair misses its threshold. Needs Bun (bunx --bun actual-css",
+    "contrast ...).",
   ].join("\n");
 }
 
@@ -43,8 +50,8 @@ function parseArgs(argv) {
     return { version: true };
   }
 
-  if (command === "design") {
-    return parseDesignArgs(rest);
+  if (command === "design" || command === "contrast") {
+    return parseThemeArgs(command, rest);
   }
 
   if (command !== "bundle") {
@@ -101,9 +108,10 @@ function parseArgs(argv) {
   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" };
+function parseThemeArgs(command, rest) {
+  const options = { help: false, command, themeFile: null, name: null, out: "" };
+  const valued = { "--theme": "themeFile", "--name": "name" };
+  if (command === "design") Object.assign(valued, { "--out": "out", "-o": "out" });
 
   for (let i = 0; i < rest.length; i += 1) {
     const arg = rest[i];
@@ -116,23 +124,40 @@ function parseDesignArgs(rest) {
     i += 1;
   }
 
-  if (!options.out) throw new Error("Missing required --out DIR option.");
+  if (command === "design" && !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.
+/* Checked before the tooling import: under Node those modules do not even
+   parse (`await using`), and `bundle` must stay usable there. The shebang is
+   Node for that reason, so plain `bunx` honors it and lands here: --bun is
+   what makes Bun run the script. */
+function requireBun(command) {
   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.",
+      `actual-css ${command} needs Bun: it reads the theme in headless Chrome through Bun.WebView. Run it with bunx --bun actual-css ${command} ...`,
     );
   }
+}
+
+async function design({ themeFile, name, out }) {
+  requireBun("design");
   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 contrast({ themeFile, name }) {
+  requireBun("contrast");
+  const { formatContrast, measureThemeFile } = await import("../tooling/theme-contrast.js");
+  const { text, misses } = formatContrast(await measureThemeFile({ themeFile, name }));
+  console.log(text);
+  if (misses > 0) {
+    console.error(`\n${misses} pair${misses === 1 ? "" : "s"} under threshold.`);
+    process.exitCode = 1;
+  }
+}
+
 async function bundle({ input, out, minify }) {
   const inputPath = resolve(input);
   const outputPath = resolve(out);
@@ -167,7 +192,8 @@ async function main() {
     return;
   }
 
-  await (args.command === "design" ? design(args) : bundle(args));
+  const commands = { bundle, contrast, design };
+  await commands[args.command](args);
 }
 
 main().catch((error) => {

package/src/css/components/alert.css

@@ -107,10 +107,11 @@
   }
 }
 
-/* Decorative leading icon — use .alert-icon on the icon element. */
+/* Decorative leading icon — use .alert-icon on the icon element. display and
+   vertical-align are the no-:has() layout (Degraded tier: the icon sits inline
+   before the text); the grid anatomy below replaces them. */
 .alert > .alert-icon {
   display: inline-block;
-  flex: none;
   inline-size: var(--alert-icon-size);
   block-size: var(--alert-icon-size);
   font-size: var(--alert-icon-size);
@@ -142,45 +143,44 @@
 
 /* Grid anatomy — activated by a leading icon, a trailing dismiss button, or
    both. Icon and dismiss are pinned to the outer columns; anything else (the
-   message content) flows into the remaining text column. */
-@supports selector(.alert:has(> *)) {
-  .alert:has(> .alert-icon, > .close) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    align-items: var(--items-align, start);
-    column-gap: var(--space-30);
-  }
-
-  .alert:has(> .alert-icon) {
-    grid-template-columns: auto minmax(0, 1fr);
-  }
+   message content) flows into the remaining text column. Without :has(), the
+   grid rules drop together and the alert keeps ordinary block flow. */
+.alert:has(> .alert-icon, > .close) {
+  display: grid;
+  /* No grid-template-columns: the icon and close branches below always set
+     it, since one of them is what matched. */
+  align-items: var(--items-align, start);
+  column-gap: var(--space-30);
+}
 
-  .alert:has(> .alert-icon) > .alert-icon {
-    grid-column: 1;
-    grid-row: 1 / -1;
-    display: inline-grid;
-    place-items: center;
-    margin-block-start: 0.125em;
-  }
+.alert:has(> .alert-icon) {
+  grid-template-columns: auto minmax(0, 1fr);
+}
 
-  .alert:has(> .alert-icon) > :not(.alert-icon, .close) {
-    grid-column: 2;
-  }
+.alert:has(> .alert-icon) > .alert-icon {
+  grid-column: 1;
+  grid-row: 1 / -1;
+  display: inline-grid;
+  place-items: center;
+  margin-block-start: 0.125em;
+}
 
-  .alert:has(> .close) {
-    grid-template-columns: minmax(0, 1fr) auto;
-  }
+.alert:has(> .alert-icon) > :not(.alert-icon, .close) {
+  grid-column: 2;
+}
 
-  .alert:has(> .alert-icon):has(> .close) {
-    grid-template-columns: auto minmax(0, 1fr) auto;
-  }
+.alert:has(> .close) {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
 
-  .alert:has(> .close) > .close {
-    grid-column: -2 / -1;
-    grid-row: 1;
-  }
+.alert:has(> .alert-icon):has(> .close) {
+  grid-template-columns: auto minmax(0, 1fr) auto;
 }
 
+.alert:has(> .close) > .close {
+  grid-column: -2 / -1;
+  grid-row: 1;
+}
 /* Links */
 .alert :where(a:not(.btn)) {
   color: inherit;

package/src/css/components/avatar.css

@@ -11,13 +11,13 @@
  * --avatar-size
  * --avatar-radius
  * --avatar-font-size
+ * --avatar-bg
  * --avatar-stack-size
  * --avatar-stack-font-size
  * --avatar-stack-overlap
  * --avatar-stack-ring
  *
  * Internal:
- * --avatar-bg
  * --avatar-fg
  * --avatar-status-translate-x
  */
@@ -95,16 +95,13 @@
 
 .avatar > img,
 .avatar > picture > img {
+  display: block;
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
   border-radius: inherit;
 }
 
-.avatar > picture > img {
-  display: block;
-}
-
 button.avatar {
   appearance: none;
   cursor: pointer;
@@ -198,19 +195,13 @@ a.avatar[aria-disabled="true"] {
   --avatar-stack-font-size: var(--font-size-lg);
 }
 
-@supports selector(:has(> .avatar)) {
-  .avatar-stack:has(> .avatar.sm) {
-    --avatar-stack-size: 1.75rem;
-    --avatar-stack-font-size: var(--font-size-xs);
-  }
-
-  .avatar-stack:has(> .avatar.lg) {
-    --avatar-stack-size: 3rem;
-    --avatar-stack-font-size: var(--font-size-lg);
-  }
-}
-
+/* Overlapping avatars hide their neighbour: a translucent fill (--surface-subtle
+   on a glass palette) would show the next avatar's edge through it, most of all
+   when hover raises one above the other. The fill is layered over the opaque
+   role; on an opaque fill the base never shows. */
 .avatar-stack > .avatar {
+  background-color: var(--surface-opaque);
+  background-image: linear-gradient(var(--avatar-bg), var(--avatar-bg));
   box-shadow: 0 0 0 var(--avatar-stack-ring) var(--surface-opaque);
 }
 

package/src/css/components/badge.css

@@ -137,7 +137,6 @@
   --badge-size: var(--badge-dot-size);
   --badge-bg: var(--intent, var(--neutral));
   --badge-fg: var(--intent-fg, var(--neutral-fg));
-  --badge-border: transparent;
   padding: 0;
   border: 0;
   inline-size: var(--badge-size);
@@ -169,10 +168,6 @@
 }
 
 @supports (color: color-mix(in oklch, red, white)) {
-  :is(a.badge, button.badge):is(.solid, :empty) {
-    --ui-hover-bg: color-mix(in oklch, var(--intent, var(--neutral)) 88%, black);
-  }
-
   :is(a.badge, button.badge):where(:not(.solid, .outline, :empty)) {
     --badge-default-hover-bg: color-mix(
       in oklab,
@@ -199,7 +194,7 @@
   :where(:disabled, [aria-disabled="true"])
 ):hover {
   /* Huge inset spread paints the overlay over the pill radius (see button.css). */
-  box-shadow: inset 0 0 0 999px var(--hover-overlay);
+  box-shadow: inset 0 0 0 999px var(--hover-overlay-solid, var(--hover-overlay));
 }
 
 button.badge {

package/src/css/components/breadcrumb.css

@@ -4,14 +4,21 @@
  * Docs: docs/pages/components/breadcrumb.md
  *
  * Inline list separated by "/". Mark the current page with `aria-current="page"`
- * either on the item or on the current link.
+ * either on the item or on the current link. Ancestor labels sit in an <a> or a
+ * <span>, the box that truncates.
+ *
+ * Breadcrumbs are a single navigation hierarchy. Wrapping makes hierarchy look
+ * like separate rows and causes unstable header height, and scrolling hides the
+ * root behind a scrollbar. A trail that does not fit truncates instead:
+ * ancestors first, the current page last, each label behind an ellipsis.
  */
+
 .breadcrumb {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: center;
   gap: var(--space-10);
+  min-inline-size: 0;
   margin: 0;
   padding: 0;
   color: var(--text-subtle);
@@ -19,15 +26,74 @@
   list-style: none;
 }
 
-.breadcrumb li {
-  display: inline-flex;
+/* The landmark around the trail must shrink with it in a flex or grid row, or
+   it keeps the trail's full width and the labels never get to truncate.
+   Without :has() the landmark keeps its width; min-inline-size: 0 on the
+   wrapper is the fallback. */
+:where(nav:has(> .breadcrumb)) {
+  min-inline-size: 0;
+}
+
+/* Grid, not flex: under a min-content constraint a grid track keeps its base
+   size, which is the label's minimum below, so the item's own minimum is
+   separator + label floor without anyone measuring a "/". A flex item would
+   report the full label as its minimum and never shrink.
+
+   Ancestors take the shrink before the current page, so the location is the
+   last thing to lose characters. The ratio is deliberately huge: at 1000 the
+   current page still took a fraction of a pixel, enough to trigger its
+   ellipsis while ancestors had room. Its own factor stays 1, because flex
+   distributes only a share of the deficit when the unfrozen factors sum below
+   one. Keyed on the last item, the current page by convention, so the order
+   holds without :has(). */
+.breadcrumb > li {
+  display: inline-grid;
+  flex: 0 1000000 auto;
+  grid-auto-flow: column;
   align-items: center;
-  gap: var(--space-10);
+  white-space: nowrap;
 }
 
-.breadcrumb li + li::before {
-  content: "/";
+.breadcrumb > li:last-child {
+  flex-shrink: 1;
+}
+
+/* A margin rather than a grid gap, so the separator keeps its space when the
+   current page below lays it out inline. The weight stays normal there, where
+   it would inherit the current page's. */
+.breadcrumb > li + li::before {
+  margin-inline-end: var(--space-10);
   color: var(--text-subtle);
+  font-weight: var(--font-weight-normal);
+  content: "/";
+}
+
+/* The ellipsis lives on the label, not on the item: an element never clips
+   its own outline, but an overflow-hidden item would clip its link's focus
+   line, which sits outside the link box.
+
+   The floor keeps a truncated label readable as a step ("Po…") instead of
+   collapsing to its separator. calc-size() lets a shorter label keep its own
+   width; without it, the plain 2em floor leaves a label under 2em a little
+   trailing room. */
+.breadcrumb > li > :is(a, span) {
+  min-inline-size: 2em;
+  min-inline-size: calc-size(max-content, min(size, 2em));
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* The current page written as bare text has no label box, so its item
+   truncates itself. Only with no element inside: an aria-current item that
+   holds a link would clip that link's focus line, and keeps the label rule
+   above instead. Its own rule, never merged with the one above: a browser
+   without :has() drops it alone, and bare text then keeps its full width. */
+.breadcrumb > li[aria-current="page"]:not(:has(> *)) {
+  display: block;
+  min-inline-size: 2em;
+  min-inline-size: calc-size(max-content, min(size, 2em));
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .breadcrumb a {

package/src/css/components/button.css

@@ -28,7 +28,6 @@
  * --btn-bg
  * --btn-fg
  * --btn-border
- * --btn-default-hover-bg
  * --btn-border-block-end-color
  * --btn-border-block-end-width
  * --btn-border-block
@@ -54,9 +53,8 @@
   --btn-bg: var(--ui-bg, var(--btn-default-bg, var(--intent, var(--neutral))));
   --btn-fg: var(--ui-fg, var(--btn-default-fg, var(--intent-fg, var(--neutral-fg))));
   --btn-border: var(--ui-border, var(--btn-default-border, transparent));
-  --btn-default-hover-bg: var(--btn-bg);
   --btn-radius: var(--radius);
-  --btn-hover-overlay: var(--hover-overlay, rgb(0 0 0 / 0.08));
+  --btn-hover-overlay: var(--hover-overlay-solid, var(--hover-overlay));
   --btn-border-block: calc(
     var(--border-width) +
     var(--btn-border-block-end-width, var(--border-width))
@@ -136,10 +134,6 @@
 }
 
 @supports (color: color-mix(in oklch, red, white)) {
-  .btn {
-    --btn-default-hover-bg: color-mix(in oklch, var(--btn-bg) 88%, black);
-  }
-
   .btn.soft {
     --ui-hover-bg: color-mix(
       in oklab,
@@ -155,9 +149,9 @@
 }
 
 /* The .soft/.outline/.ghost hover recipe (--ui-hover-bg) is set locally above;
-   the overlay darkening for solid/soft is .btn-specific. */
+   the overlay darkening for solid is .btn-specific. */
 .btn:not(:where(:disabled, [aria-disabled="true"])):hover {
-  background: var(--ui-hover-bg, var(--btn-default-hover-bg));
+  background: var(--ui-hover-bg, var(--btn-bg));
   /* Huge inset spread paints the overlay over any border-radius without a
      pseudo-element; a plain background would replace the fill instead of
      darkening it. */

package/src/css/components/card.css

@@ -4,11 +4,11 @@
  * Docs: docs/pages/components/card.md
  *
  * Surface, border, radius, padding, density, and elevation stay local here.
- * Direct header/footer children are structural slots; a direct footer is
- * anchored to the card's bottom edge when extra block space is available (so
- * price/action rows align across equal-height cards in a grid). A bare card
- * owns its direct-child rhythm; a layout primitive on the same element takes
- * over that layout. Page layout remains the job of markup and layout
+ * Direct header/footer children are structural slots with a default split row;
+ * a direct footer is anchored to the card's bottom edge when extra block space
+ * is available (so price/action rows align across equal-height cards in a
+ * grid). A bare card owns its direct-child rhythm and its slot rows; a layout
+ * primitive on the card or on a slot takes over that layout. Page layout remains the job of markup and layout
  * primitives outside the card.
  *
  * Public hooks:
@@ -46,6 +46,9 @@
 
 .card {
   --card-pad: var(--space-40);
+  /* Local anatomy, like the padding. Never var(--gap): that token is
+     inherited, so the --gap of a parent grid became the rhythm inside every
+     card (+79px per card on a 38px grid). */
   --card-gap: var(--space-30);
   --card-radius: var(--radius-lg);
   --card-max-inline-size: none;
@@ -87,7 +90,11 @@
   margin-block: 0;
 }
 
-.card > :where(header, footer) {
+/* The slot row is a convenience default, not anatomy: like the root box it
+   lives at zero specificity, so a primitive, role or utility on the slot
+   (.cluster, .media, .form-actions, .justify-content-*) replaces it instead of
+   losing to components/ on source order. */
+:where(.card > header, .card > footer) {
   display: flex;
   flex-wrap: wrap;
   align-items: var(--items-align, center);
@@ -96,15 +103,15 @@
   min-inline-size: 0;
 }
 
+:where(.card > header) {
+  align-items: var(--items-align, flex-start);
+}
+
 .card > :where(header, footer) > * {
   min-inline-size: 0;
   margin-block: 0;
 }
 
-.card > header {
-  align-items: var(--items-align, flex-start);
-}
-
 /* A direct footer is pinned to the bottom when the card has free space.
    Specificity beats .stack > * so a .card.stack keeps this contract. */
 .card > footer {
@@ -119,6 +126,7 @@
 }
 .card.compact {
   --card-pad: var(--space-20);
+  --card-gap: var(--space-20);
 }
 
 @media print {

package/src/css/components/chat.css

@@ -94,9 +94,8 @@
 }
 
 /* Remove the reserved avatar gutter when a message has no avatar. This is a
-   cosmetic enhancement; the two-column baseline remains fully readable. */
-@supports selector(:has(*)) {
-  .chat:not(:has(> .chat-avatar)) {
-    column-gap: 0;
-  }
+   cosmetic enhancement; the two-column baseline remains fully readable, and a
+   browser without :has() drops only this rule. */
+.chat:not(:has(> .chat-avatar)) {
+  column-gap: 0;
 }

package/src/css/components/drawer.css

@@ -22,8 +22,10 @@
  * Internal:
  * --drawer-closed-translate (side/RTL positioning state)
  * --drawer-focus-bleed
+ * --drawer-close-reserve (header room for a corner close; zero without a close)
  * --drawer-motion-duration (shared by panel and ::backdrop so exit duration
  *   changes in one place; entry state redefines it longer)
+ * --drawer-motion-ease (panel easing owned by the open/closed state)
  */
 :where(dialog).drawer {
   --drawer-size: 20rem;
@@ -31,9 +33,14 @@
   /* The inset a direct .bleed child cancels (components/bleed.css). */
   --surface-pad: var(--drawer-pad);
   --drawer-closed-translate: -100%;
+  /* Header room for a corner close. Unconditional baseline: without :has()
+     (Degraded tier) a header keeps too much room rather than a title running
+     under the close. Zeroed when the drawer has no close. */
+  --drawer-close-reserve: calc(var(--close-size, var(--control-size)) + var(--space-30));
   /* Exit is shorter than entry so the panel clears quickly; the scrim reads
      the same variable through inheritance and never lags the panel. */
   --drawer-motion-duration: var(--duration);
+  --drawer-motion-ease: var(--ease-exit);
 
   /* Keep the surface anchored to the viewport in the top layer. This also
      provides the containing block for the absolutely positioned close button.
@@ -65,21 +72,21 @@
   box-shadow: var(--shadow);
   opacity: 0;
   transform: translateX(var(--drawer-closed-translate));
-  transition:
-    opacity var(--drawer-motion-duration) var(--ease-exit),
-    transform var(--drawer-motion-duration) var(--ease-exit);
+  /* Unsupported discrete behavior drops alone, preserving opacity/transform. */
+  transition-property: opacity, transform, overlay, display;
+  transition-duration: var(--drawer-motion-duration);
+  transition-timing-function: var(--drawer-motion-ease);
+  transition-behavior: allow-discrete;
 }
 
 :where(dialog).drawer[open] {
   --drawer-motion-duration: var(--duration-slow);
+  --drawer-motion-ease: var(--ease-enter);
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto;
   gap: var(--space-40);
   opacity: 1;
   transform: translateX(0);
-  transition:
-    opacity var(--drawer-motion-duration) var(--ease-enter),
-    transform var(--drawer-motion-duration) var(--ease-enter);
 }
 
 /* A form is the drawer's content wrapper when actions need method="dialog".
@@ -99,7 +106,10 @@
   opacity: 0;
   /* Scrim curve stays neutral `ease`; only the panel's character curves
      apply. Duration follows --drawer-motion-duration through inheritance. */
-  transition: opacity var(--drawer-motion-duration) ease;
+  transition-property: opacity, overlay, display;
+  transition-duration: var(--drawer-motion-duration);
+  transition-timing-function: ease;
+  transition-behavior: allow-discrete;
 }
 
 :where(dialog).drawer[data-side="end"] {
@@ -133,47 +143,23 @@
    exclusion list is easier to trust than its `position: absolute`. */
 :where(dialog).drawer > :not(:is(header, footer, form, .close)),
 :where(dialog).drawer > form > :not(:is(header, footer, .close)) {
-  --drawer-focus-bleed: calc(
-    var(--focus-outline-offset) +
-    max(var(--focus-ring-width), var(--border-width) * 2)
-  );
+  /* Declared here, not as a :root alias: an inherited alias arrives already
+     computed, so a --focus-ring-width override on the drawer would not reach
+     it. */
+  --drawer-focus-bleed: calc(var(--focus-outline-offset) + var(--focus-ring-width));
 
   min-block-size: 0;
-  /* Keep focus paint inside the clip without moving the body off the fixed
-     header and footer edges. The reserve covers the thicker of the two
-     outside indicators: the :focus baseline (2 × border) and the component
-     line (--focus-ring-width, 3px in bootstrap-v6). */
-  margin-inline: calc(var(--drawer-focus-bleed) * -1);
-  padding-inline: var(--drawer-focus-bleed);
+  /* Keep focus paint inside the clip, on all four sides (overflow: auto clips
+     both axes), without moving the content. Every outside indicator is
+     --focus-ring-width wide (core/focus.css). On the block axis the reserve
+     reaches into the slot gap, which is wider, so the scrollport never slides
+     under the header or footer. */
+  margin: calc(var(--drawer-focus-bleed) * -1);
+  padding: var(--drawer-focus-bleed);
   overflow: auto;
   overscroll-behavior: contain;
 }
 
-@supports (transition-behavior: allow-discrete) {
-  :where(dialog).drawer {
-    transition:
-      opacity var(--drawer-motion-duration) var(--ease-exit),
-      transform var(--drawer-motion-duration) var(--ease-exit),
-      overlay var(--drawer-motion-duration) allow-discrete,
-      display var(--drawer-motion-duration) allow-discrete;
-  }
-
-  :where(dialog).drawer[open] {
-    transition:
-      opacity var(--drawer-motion-duration) var(--ease-enter),
-      transform var(--drawer-motion-duration) var(--ease-enter),
-      overlay var(--drawer-motion-duration) allow-discrete,
-      display var(--drawer-motion-duration) allow-discrete;
-  }
-
-  :where(dialog).drawer::backdrop {
-    transition:
-      opacity var(--drawer-motion-duration) ease,
-      overlay var(--drawer-motion-duration) allow-discrete,
-      display var(--drawer-motion-duration) allow-discrete;
-  }
-}
-
 /* Safari before 16.4 does not support :dir(); keep the ancestor-attribute
    path as the Degraded-tier fallback. The :dir() rules are dropped on their
    own there, so they need no wrapper. :dir() follows inherited HTML
@@ -210,9 +196,20 @@
   }
 }
 
+/* No close anywhere: reclaim the reserve. Deliberately coarse — a close in
+   the body keeps the reserve, which costs only room, never overlap. */
+:where(dialog).drawer:not(:has(.close)) {
+  --drawer-close-reserve: 0px;
+}
+
 /* The header reserves inline room so the title never runs under the close
-   control. */
+   control. A .bleed header keeps at least its band inset. */
 :where(dialog).drawer > header,
-:where(dialog).drawer > form > header {
-  padding-inline-end: calc(var(--close-size, var(--control-size)) + var(--space-30));
+:where(dialog).drawer > :where(form) > header {
+  padding-inline-end: var(--drawer-close-reserve);
+}
+
+:where(dialog).drawer > header:where(.bleed),
+:where(dialog).drawer > :where(form) > header:where(.bleed) {
+  padding-inline-end: max(var(--bleed-pad, 0px), var(--drawer-close-reserve));
 }