actual-css 0.11.1 → 0.12.0

package/src/css/components/drawer.css

@@ -22,6 +22,7 @@
  * 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)
  */
@@ -31,6 +32,10 @@
   /* 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);
@@ -210,9 +215,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));
 }

package/src/css/components/flyout.css

@@ -50,6 +50,9 @@
   position: absolute;
   inset-block-start: calc(100% + var(--space-10));
   inset-inline-start: 0;
+  /* Anatomy, not a default to replace: `flyout grid-3` (mega menu) takes its
+     columns from the grid preset and keeps this tight gap, because each
+     section pads itself — the visible gutter is section padding + gap. */
   display: grid;
   gap: var(--space-10);
   inline-size: var(--flyout-inline-size, max-content);

package/src/css/components/index.css

@@ -3,7 +3,6 @@
 @import "./close.css";
 @import "./badge.css";
 @import "./alert.css";
-@import "./actions.css";
 
 /* Surfaces */
 @import "./card.css";

package/src/css/components/modal.css

@@ -9,15 +9,19 @@
  * Public hooks:
  * --modal-size
  * --modal-pad
- * --modal-header-bg
  * --dialog-viewport-gap
  * --dialog-icon-size
  * --dialog-icon-glyph-size
  *
  * The corner close control is .close (components/close.css).
  *
+ * The body footer is a structural slot with no layout of its own: its action
+ * row is composed in markup (`<footer class="cluster justify-content-end">`),
+ * as in the drawer. A default row here would fight every composed one.
+ *
  * Internal:
  * --dialog-inner-radius
+ * --dialog-close-reserve (header room for a corner close; zero without a close)
  * --dialog-focus-bleed
  * --dialog-viewport-block
  * --dialog-viewport-gap-default
@@ -26,10 +30,8 @@
 :where(dialog).modal {
   /* --dialog-viewport-gap stays fallback-only so the responsive default can
      live in an internal token: a media query moves it without closing the
-     public hook.
-
-     calc() multiplication is not in the supported browser range, so the
-     doubled gap is spelled out with an additive calc. */
+     public hook. `-2x` is the gap on the two viewport edges, shared by the
+     width and height caps. */
   --dialog-viewport-gap-default: var(--space-40);
   --dialog-viewport-gap-2x: calc(
     var(--dialog-viewport-gap, var(--dialog-viewport-gap-default)) +
@@ -37,10 +39,19 @@
   );
 
   /* 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. */
+     as one name for the padded wrapper and the header band; a .bleed band
+     inherits it from the wrapper, so none of them drifts from the corner. */
   --dialog-inner-radius: var(--radius-lg);
 
+  /* 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 dialog has no close. */
+  --dialog-close-reserve: calc(
+    var(--close-size, var(--control-size)) +
+    var(--space-20) +
+    var(--space-30)
+  );
+
   /* 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;
@@ -73,9 +84,9 @@
    * both edges, which reads as horizontal movement.
    */
   transform: translateY(0.35rem);
-  transition:
-    opacity var(--duration) var(--ease-exit),
-    transform var(--duration) var(--ease-exit);
+  transition-property: opacity, transform;
+  transition-duration: var(--duration);
+  transition-timing-function: var(--ease-exit);
 }
 
 @media (forced-colors: active) {
@@ -99,10 +110,8 @@
   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. */
+/* Dialog chrome beside the padded body wrapper. Wrapping the close in the
+   trailing cluster keeps it in flow, not the absolute corner overlay. */
 :where(dialog).modal > header {
   display: flex;
   align-items: center;
@@ -112,7 +121,14 @@
   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));
+}
+
+/* Paint is not anatomy: the default band fill has zero specificity, so a
+   .background-* utility on the header replaces it. The layout above stays at
+   the component's weight — a composed .cluster must not reset the title/close
+   alignment. */
+:where(dialog.modal > header) {
+  background: var(--surface-subtle);
 }
 
 :where(dialog).modal > header > .media {
@@ -133,18 +149,16 @@
   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);
-  }
+/* The header stays fixed while the body wrapper owns overflow. Without :has()
+   these drop individually and compact dialogs keep ordinary block flow. */
+: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;
-  }
+:where(dialog).modal:has(> header) > :is(form, .stack) {
+  min-block-size: 0;
+  max-block-size: none;
 }
 
 @supports (block-size: 100svh) {
@@ -163,10 +177,21 @@
 
 :where(dialog).modal.scrollable > form,
 :where(dialog).modal.scrollable > .stack {
-  grid-template-rows: auto minmax(0, 1fr) auto;
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
 }
 
+/* Regions carry their own behaviour: a structural header or footer keeps its
+   size, every other child absorbs the free space and scrolls. Nothing here has
+   to detect which regions exist — an external header leaves the wrapper with
+   content + footer and this still holds. Each non-chrome child is its own
+   scrollport; wrap the body in one region for a single one. */
+:where(dialog).modal.scrollable > form > :is(header, footer),
+:where(dialog).modal.scrollable > .stack > :is(header, footer) {
+  flex: none;
+}
+
 :where(dialog).modal.scrollable > form > :not(:is(header, footer)),
 :where(dialog).modal.scrollable > .stack > :not(:is(header, footer)) {
   --dialog-focus-bleed: calc(
@@ -174,6 +199,7 @@
     max(var(--focus-ring-width), var(--border-width) * 2)
   );
 
+  flex: 1 1 auto;
   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
@@ -202,59 +228,30 @@
   margin-block: 0;
 }
 
+/* No close anywhere: reclaim the reserve. Deliberately coarse — a close in
+   the body keeps the reserve, which costs only room, never overlap. */
+:where(dialog).modal:not(:has(.close)) {
+  --dialog-close-reserve: 0px;
+}
+
 /* 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>. */
+   content flow; headers reserve inline room so titles never run under it. A
+   .bleed header keeps at least its band inset. 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-20) +
-    var(--space-30)
-  );
+  padding-inline-end: var(--dialog-close-reserve);
+}
+
+:where(dialog).modal > :where(form, .stack) > header:where(.bleed) {
+  padding-inline-end: max(var(--bleed-pad, 0px), var(--dialog-close-reserve));
 }
 
 /* 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 {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: var(--gap);
-}
-
-/* Confirmation layout — a focused message followed by a visually distinct
-   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 > :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: var(--dialog-inner-radius);
-  border-end-end-radius: var(--dialog-inner-radius);
-  background: var(--surface-subtle);
+  padding-inline-end: max(var(--modal-pad, var(--space-40)), var(--dialog-close-reserve));
 }
 
 /* Intent boundary — inherited intents do not tint the icon well. A local
@@ -267,14 +264,17 @@
   --ui-fg: initial;
 }
 
+/* The size hooks are read here, never declared: an author sets them on the
+   icon's media row (or the dialog) so both the circle and the title that
+   centers on it inherit one value. A local declaration on .dialog-icon would
+   shadow that value for the circle while the title kept the inherited one —
+   the two centers would drift. An override on the icon alone is deliberately
+   local and moves only the circle. */
 .dialog-icon {
-  --dialog-icon-size: 3rem;
-  --dialog-icon-glyph-size: 1.5rem;
-
   display: inline-grid;
   place-items: center;
-  inline-size: var(--dialog-icon-size);
-  block-size: var(--dialog-icon-size);
+  inline-size: var(--dialog-icon-size, 3rem);
+  block-size: var(--dialog-icon-size, 3rem);
   flex: none;
   border-radius: var(--radius-full);
   background: var(--ui-bg, var(--surface-subtle));
@@ -284,46 +284,27 @@
 .dialog-icon > * {
   display: inline-grid;
   place-items: center;
-  inline-size: var(--dialog-icon-glyph-size);
-  block-size: var(--dialog-icon-glyph-size);
-  font-size: var(--dialog-icon-glyph-size);
+  inline-size: var(--dialog-icon-glyph-size, 1.5rem);
+  block-size: var(--dialog-icon-glyph-size, 1.5rem);
+  font-size: var(--dialog-icon-glyph-size, 1.5rem);
   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 {
+/* A leading icon well centers the first heading of the text column beside it:
+   the heading occupies the icon row, so its text centers without a
+   font-relative nudge, and following copy stays in the same column. Keyed on
+   the media anatomy, not on the dialog, so a card or page row composes it too. */
+.media > .dialog-icon + * > :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 > :is(.media, header),
-  :where(dialog).modal.dialog-confirmation > form > footer {
-    padding: var(--space-40);
-  }
+  margin-block: 0;
 }
 
 :where(dialog).modal[open] {
   opacity: 1;
   transform: none;
-  transition:
-    opacity var(--duration) var(--ease-enter),
-    transform var(--duration) var(--ease-enter);
+  transition-timing-function: var(--ease-enter);
 }
 
 @starting-style {
@@ -338,31 +319,22 @@
   opacity: 0;
   /* Scrim curve stays neutral `ease`; only the panel carries the character
      curves. */
-  transition: opacity var(--duration) ease;
+  transition-property: opacity;
+  transition-duration: var(--duration);
+  transition-timing-function: ease;
 }
 
 @supports (transition-behavior: allow-discrete) {
+  /* Add the discrete top-layer pair to the property list. Duration and timing
+     stay on the base rules, so [open] still only swaps the easing. */
   :where(dialog).modal {
-    transition:
-      opacity var(--duration) var(--ease-exit),
-      transform var(--duration) var(--ease-exit),
-      overlay var(--duration) allow-discrete,
-      display var(--duration) allow-discrete;
-  }
-
-  :where(dialog).modal[open] {
-    transition:
-      opacity var(--duration) var(--ease-enter),
-      transform var(--duration) var(--ease-enter),
-      overlay var(--duration) allow-discrete,
-      display var(--duration) allow-discrete;
+    transition-property: opacity, transform, overlay, display;
+    transition-behavior: allow-discrete;
   }
 
   :where(dialog).modal::backdrop {
-    transition:
-      opacity var(--duration) ease,
-      overlay var(--duration) allow-discrete,
-      display var(--duration) allow-discrete;
+    transition-property: opacity, overlay, display;
+    transition-behavior: allow-discrete;
   }
 }
 

package/src/css/components/navbar.css

@@ -3,8 +3,8 @@
  *
  * Docs: docs/pages/components/navbar.md
  *
- * .navbar is a horizontal bar; .navbar-brand is the brand link; .navbar-nav is
- * the inline link list using .nav-link items. .nav-list is the vertical nav
+ * .navbar is a horizontal bar; .navbar-brand is the brand link; the inline
+ * links are a .cluster using .nav-link items. .nav-list is the vertical nav
  * list shared with .drawer, fed by the shared --gap token.
  *
  * Internal:
@@ -53,17 +53,6 @@
   border-radius: var(--radius-sm);
 }
 
-.navbar-nav {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--space-10);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
 .nav-link {
   display: inline-flex;
   align-items: center;
@@ -86,19 +75,16 @@
    removed everywhere else, never serialized as aria-current="false".
    Selection never changes text metrics: the shared medium weight is kept and
    the current link is carried by the selected accent. */
-.nav-link[aria-current] {
-  background: var(--surface-subtle);
-  color: var(--state-selected);
-}
-
 .nav-link:hover {
   background: var(--surface-subtle);
   color: var(--text);
 }
 
-/* A current link keeps its accent on hover: without this, the hover rule above
-   would drop it back to --text. The surface hover still applies. */
-.nav-link[aria-current]:hover {
+/* Current last, equal specificity to :hover (0,2,0): a hovered current link
+   keeps the selected accent instead of dropping to --text. The surface fill is
+   shared with the hover rule above. */
+.nav-link[aria-current] {
+  background: var(--surface-subtle);
   color: var(--state-selected);
 }
 
@@ -118,19 +104,22 @@
     color: var(--ui-fg, var(--text));
   }
 
-  .nav-link[aria-current],
-  .nav-link[aria-current]:hover {
+  /* After :hover so a hovered current link keeps the selected accent. */
+  .nav-link[aria-current] {
     color: var(--ui-fg, var(--state-selected));
   }
 }
 
 /* Nav list — a vertical navigation list. Used by .drawer for stacked links.
    Links fill each row so the whole line is an interactive target; the
-   horizontal .navbar-nav links keep their intrinsic size. */
+   horizontal .cluster links keep their intrinsic size. */
+/* A vertical nav reads as one list, not a stack of separate buttons: each row
+   is already a control-height target, so the rows sit a hair apart. The grid
+   is the component's own layout; for a horizontal row use .cluster instead. */
 .nav-list {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
-  --gap: var(--space-20);
+  --gap: var(--space-10);
   gap: var(--gap);
   margin: 0;
   padding: 0;

package/src/css/core/base.css

@@ -7,7 +7,7 @@
  * Public hooks:
  * --link
  * --hr-space
- * --font-width / --font-width-dense (see variants.css for the dense application)
+ * --font-width (the document's font-stretch; a theme typography choice)
  */
 
 body {

package/src/css/core/reset.css

@@ -36,7 +36,8 @@ select {
 
   *,
   *::before,
-  *::after {
+  *::after,
+  ::backdrop {
     animation-duration: 0.01ms !important;
     animation-delay: 0s !important;
     animation-iteration-count: 1 !important;

package/src/css/core/theme.css

@@ -79,6 +79,10 @@
      fields, a solid band), which rules out the primary itself. */
   --focus: hsl(268 30% 55%);
   --hover-overlay: hsl(260 20% 10% / 0.04);
+  /* Solid fills take a stronger wash than the subtle shared overlay. Black in
+     both schemes on purpose: a solid button darkens on hover even in dark mode
+     (see themes/gradient.css), unlike the neutral washes. */
+  --hover-overlay-solid: rgb(0 0 0 / 0.14);
 
   /* Radius scale — themes may override the whole scale (e.g. [data-theme="square"]) */
   --radius: 0.5rem;

package/src/css/core/tokens.css

@@ -20,7 +20,6 @@
   --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   --font-width: 100%;
-  --font-width-dense: 95%;
   --line-height: 1.5;
   --line-height-tight: 1.25;
   --line-height-relaxed: 1.75;
@@ -104,8 +103,9 @@
   --bar-height: 0.65rem;
 
   /* Controls — inputs and buttons share --control-size so heights always match.
-     .compact/.spacious (variants.css) switch geometry without changing
-     --control-font-size. Local .sm/.lg component sizes switch all three.
+     .compact/.spacious (variants.css) switch geometry (--control-size,
+     --control-pad-x) without changing --control-font-size. Local .sm/.lg
+     component sizes switch all three.
 
      Inline choices (checkbox, radio, switch) are typographic, not field-sized:
      they sit on a line of text, so they follow --control-font-size through
@@ -116,17 +116,35 @@
 
      --control-pad-x is the opposite kind of token: a resolved geometry length,
      not an em ratio. Every part of one control must see the same horizontal
-     distance, so it is stated in the typographic tokens rather than an em
-     whose value would change on a descendant with its own font size (the
-     input-icon glyph, made larger by --input-icon-size). It mirrors
-     --control-font-size and is rebound beside it at the .sm/.lg boundaries
-     (variants.css); declaring it only in :root would freeze the md value,
-     because a var() inside a custom property resolves where it is declared. */
+     distance, so it is stated in lengths rather than an em whose value would
+     change on a descendant with its own font size (the input-icon glyph, made
+     larger by --input-icon-size).
+
+     Like --control-size, it is a scale plus a selection: themes set the
+     -sm/-md/-lg steps, and :root, .sm/.lg and .compact/.spacious (variants.css)
+     pick one. A theme that wrote --control-pad-x itself would be overwritten
+     by every size and density boundary — bootstrap-v6's 12px became a wider
+     13px inside .compact. The selection is rebound at each boundary because a
+     var() inside a custom property resolves where it is declared.
+
+     The boundaries also write --control-step-sm/-md/-lg: which step is
+     selected, as 0/1 weights that mean the same under every theme. A theme
+     that sets its own steps rebuilds the selection from them in its own block
+     (bootstrap-v6.css), so a nested island of it reads its steps without
+     resetting the density it sits in. Never rebind on every [data-theme]: a
+     palette-only island then became a geometry boundary that an inherited
+     --control-size or --control-pad-x no longer crossed. */
   --control-size-sm: 2rem;
   --control-size-md: 2.375rem;
   --control-size-lg: 2.75rem;
   --control-size: var(--control-size-md);
-  --control-pad-x: var(--font-size-md);
+  --control-pad-x-sm: var(--font-size-xs);
+  --control-pad-x-md: var(--font-size-md);
+  --control-pad-x-lg: var(--font-size-lg);
+  --control-pad-x: var(--control-pad-x-md);
+  --control-step-sm: 0;
+  --control-step-md: 1;
+  --control-step-lg: 0;
   --control-font-size: var(--font-size-md);
   --choice-control-size: 1.125em;
   --disabled-opacity: 0.65;