actual-css 0.9.2 → 0.10.0

package/src/css/components/button.css

@@ -17,7 +17,6 @@
  * --btn-min-size
  * --btn-pad-x
  * --btn-radius
- * --btn-focus-color
  * --btn-gap
  * --btn-hover-overlay
  * --btn-default-bg
@@ -30,7 +29,6 @@
  * --btn-fg
  * --btn-border
  * --btn-default-hover-bg
- * --btn-focus-ring-color
  * --btn-border-block-end-color
  * --btn-border-block-end-width
  * --spinner-width
@@ -57,7 +55,6 @@
   --btn-border: var(--ui-border, var(--btn-default-border, transparent));
   --btn-default-hover-bg: var(--btn-bg);
   --btn-radius: var(--radius);
-  --btn-focus-color: var(--intent, var(--focus));
   --btn-hover-overlay: var(--hover-overlay, rgb(0 0 0 / 0.08));
 
   /* Positioning context for indicators, overlays, and grouped states. */
@@ -99,12 +96,6 @@
   padding: 0;
 }
 
-@supports (color: color-mix(in oklch, red, white)) {
-  .btn {
-    --btn-focus-ring-color: color-mix(in oklch, var(--btn-focus-color) 28%, transparent);
-  }
-}
-
 /* .solid/.soft/.outline are shared via variants.css. The baseline --btn-*
    fallbacks make .btn solid by default; .ghost/.link are .btn-only variants. */
 .btn.ghost {
@@ -192,15 +183,13 @@
   text-decoration-thickness: 0.12em;
 }
 
+/* why: the ring must contrast with the surface around the button, not with
+   the button, so it is --focus for every intent and variant — the theme
+   guarantees --focus against --surface and --surface-solid, which covers
+   the page, a solid band and nested surfaces without tracking any context. */
 .btn:focus-visible {
-  outline: 2px solid transparent;
-  box-shadow: 0 0 0 var(--focus-ring-width) var(--btn-focus-ring-color, var(--focus-ring));
-}
-
-.btn.link:focus-visible {
-  outline: var(--focus-outline);
-  outline-offset: 0.2em;
-  box-shadow: none;
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: var(--focus-outline-offset);
 }
 
 .btn:disabled {

package/src/css/components/card.css

@@ -19,7 +19,9 @@
  *
  * Child contract:
  * Direct .bleed children escape --card-pad (negative inset, wider media);
- * edge children inherit the card corners. .bleed must be a direct child.
+ * edge children inherit the card corners. .bleed must be a direct child, and
+ * its rules live in components/bleed.css — the card relays --card-pad to the
+ * shared --surface-pad that they read.
  *
  * Internal:
  * --card-bg
@@ -50,6 +52,10 @@
   --card-bg: var(--ui-bg, var(--surface-raised));
   --card-fg: var(--ui-fg, var(--text));
 
+  /* The inset a direct .bleed child cancels (components/bleed.css). Relayed
+     from --card-pad so .compact and an author override both reach it. */
+  --surface-pad: var(--card-pad);
+
   /* Keep contextual descendants tied to the surface this card actually owns. */
   --heading: var(--card-fg);
   --busy-overlay-bg: var(--card-bg);
@@ -115,45 +121,6 @@
   --card-pad: var(--space-20);
 }
 
-/* Full-bleed children */
-.card > .bleed {
-  margin-inline: calc(var(--card-pad) * -1);
-  max-inline-size: none;
-}
-
-.card > .bleed:first-child {
-  margin-block-start: calc(var(--card-pad) * -1);
-  border-start-start-radius: inherit;
-  border-start-end-radius: inherit;
-}
-
-.card > .bleed:last-child {
-  margin-block-end: calc(var(--card-pad) * -1);
-  border-end-start-radius: inherit;
-  border-end-end-radius: inherit;
-}
-
-/* Media bleed */
-.card > :where(img, picture, video, canvas, svg).bleed {
-  display: block;
-  inline-size: calc(100% + var(--card-pad) * 2);
-  max-inline-size: none;
-}
-
-.card > picture.bleed {
-  overflow: hidden;
-}
-
-.card > picture.bleed > img {
-  display: block;
-  inline-size: 100%;
-  block-size: auto;
-}
-
-/* Padded structural bleed */
-.card > :where(header, footer, figure).bleed {
-  padding: var(--card-pad);
-}
 @media print {
   .card {
     border: var(--border-width) solid CanvasText;

package/src/css/components/close.css

@@ -0,0 +1,91 @@
+/*
+ * Close button — the shared X that removes or closes the thing it sits in.
+ *
+ * Docs: docs/pages/components/close.md
+ *
+ * .close is always the X, painted from the --icon-close mask: an empty
+ * <button class="close" aria-label="…"> needs no icon font and no text glyph.
+ * The mechanism stays with the container (command="request-close",
+ * method="dialog", command="--dismiss", application logic); the class only
+ * names the visual action.
+ *
+ * The containers that host one (alert, badge) tune it from their own files by
+ * declaring the size hooks and their geometry; this file owns the control
+ * and the dialog-surface corner, shared by .modal and .drawer.
+ *
+ * Public hooks:
+ * --close-size
+ * --close-icon-size
+ */
+.close {
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  inline-size: var(--close-size, var(--control-size));
+  block-size: var(--close-size, var(--control-size));
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.close::before {
+  content: "";
+  inline-size: var(--close-icon-size, 1rem);
+  block-size: var(--close-icon-size, 1rem);
+  background: currentColor;
+  -webkit-mask: var(--icon-close) center / contain no-repeat;
+  mask: var(--icon-close) center / contain no-repeat;
+}
+
+/* An inset overlay, not a background: it tints whatever fill the context gave
+   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);
+  }
+}
+
+.close:active {
+  box-shadow: inset 0 0 0 999px var(--hover-overlay);
+}
+
+.close:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: var(--focus-outline-offset);
+}
+
+/* Dialog corner — out of the content flow, anchored to the positioned dialog
+   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. */
+: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 {
+  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);
+}
+
+@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);
+  }
+}
+
+@media (forced-colors: active) {
+  /* The X is a currentColor mask fill: without this the system remaps the
+    background to Canvas and the glyph disappears. Kept on the pseudo so the
+    host keeps its native color and focus adaptation. */
+  .close::before {
+    forced-color-adjust: none;
+  }
+}

package/src/css/components/data-list.css

@@ -7,6 +7,9 @@
  * A plain <dl> handles richer relationships (several terms or descriptions)
  * and stays untouched by this component.
  *
+ * Variants:
+ * .stacked — value under its term rather than beside it.
+ *
  * Why margin resets: neutralizes .prose list margins if .data-list appears
  * inside an authored rich-text scope; the grid owns row/column rhythm.
  */
@@ -27,3 +30,18 @@
   min-inline-size: 0;
   margin: 0;
 }
+
+/* Stacked — the value sits under its term instead of beside it, for narrow
+   columns and for values too long to sit in a second column.
+   Why the pair separation rides on the term's margin: the children alternate
+   dt/dd with no element around a pair, so the grid has no row boundary to give
+   a larger gap to. The tight gap is the row gap; the term reopens the space. */
+.data-list.stacked {
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--space-10);
+}
+
+.data-list.stacked > dt + dt,
+.data-list.stacked > dd + dt {
+  margin-block-start: var(--space-30);
+}

package/src/css/components/drawer.css

@@ -17,6 +17,8 @@
  * --drawer-size
  * --drawer-pad
  *
+ * The corner close control is .close (components/close.css).
+ *
  * Internal:
  * --drawer-closed-translate (side/RTL positioning state)
  * --drawer-focus-bleed
@@ -26,6 +28,8 @@
 :where(dialog).drawer {
   --drawer-size: 20rem;
   --drawer-pad: var(--space-40);
+  /* The inset a direct .bleed child cancels (components/bleed.css). */
+  --surface-pad: var(--drawer-pad);
   --drawer-closed-translate: -100%;
   /* Exit is shorter than entry so the panel clears quickly; the scrim reads
      the same variable through inheritance and never lags the panel. */
@@ -125,15 +129,20 @@
 /* The body region absorbs the panel's height and scrolls. A drawer is a
    full-height shell by definition, so it always scrolls its body — unlike the
    modal, which sizes to its content and opts in with .scrollable. Header and
-   footer keep their own tracks; .drawer-close is named because a generic
+   footer keep their own tracks; .close is named because a generic
    exclusion list is easier to trust than its `position: absolute`. */
-:where(dialog).drawer > :not(:is(header, footer, form, .drawer-close)),
-:where(dialog).drawer > form > :not(:is(header, footer, .drawer-close)) {
-  --drawer-focus-bleed: calc(var(--focus-outline-offset) + var(--border-width) * 2);
+: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)
+  );
 
   min-block-size: 0;
   /* Keep focus paint inside the clip without moving the body off the fixed
-     header and footer edges. */
+     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);
   overflow: auto;
@@ -205,55 +214,5 @@
    control. */
 :where(dialog).drawer > header,
 :where(dialog).drawer > form > header {
-  padding-inline-end: calc(var(--control-size) + var(--space-30));
-}
-
-/* Close control, owned here so a drawer-only build does not depend on
-   modal.css. Mirrors the modal's .dialog-close placement: absolute at the
-   panel's top inline-end, out of the content flow. */
-.drawer-close {
-  --drawer-close-icon-size: 1rem;
-
-  display: inline-grid;
-  place-items: center;
-  padding: 0;
-  border: 0;
-  border-radius: var(--radius);
-  color: var(--text-muted);
-  cursor: pointer;
-
-  position: absolute;
-  z-index: 1;
-  inset-block-start: var(--space-20);
-  inset-inline-end: var(--space-20);
-
-  inline-size: var(--control-size);
-  block-size: var(--control-size);
-
-  background: var(--surface-subtle);
-}
-
-.drawer-close::before {
-  content: "";
-  inline-size: var(--drawer-close-icon-size);
-  block-size: var(--drawer-close-icon-size);
-  background: currentColor;
-  -webkit-mask: var(--icon-close) center / contain no-repeat;
-  mask: var(--icon-close) center / contain no-repeat;
-}
-
-@media (hover: hover) {
-  .drawer-close:hover {
-    box-shadow: inset 0 0 0 999px var(--hover-overlay);
-    color: var(--text);
-  }
-}
-
-.drawer-close:active {
-  box-shadow: inset 0 0 0 999px var(--hover-overlay);
-}
-
-.drawer-close:focus-visible {
-  outline: 2px solid transparent;
-  box-shadow: var(--focus-ring-shadow);
+  padding-inline-end: calc(var(--close-size, var(--control-size)) + var(--space-30));
 }

package/src/css/components/fab.css

@@ -128,3 +128,13 @@
   opacity: 1;
   transform: none;
 }
+
+@media (forced-colors: active) {
+  /* Both toggle markers are currentColor mask fills: without this the system
+    remaps the backgrounds to Canvas and the glyphs disappear. Kept on the
+    pseudos so the host keeps its native color and focus adaptation. */
+  .fab > summary::before,
+  .fab > summary::after {
+    forced-color-adjust: none;
+  }
+}

package/src/css/components/flyout.css

@@ -70,6 +70,7 @@
   border: var(--border-width) solid var(--border);
   border-radius: var(--radius);
   background: var(--surface-raised);
+  color: var(--text);
   box-shadow: var(--shadow-popout);
   list-style: none;
   opacity: 1;

package/src/css/components/index.css

@@ -1,5 +1,6 @@
 /* Controls */
 @import "./button.css";
+@import "./close.css";
 @import "./badge.css";
 @import "./alert.css";
 @import "./actions.css";
@@ -8,6 +9,7 @@
 @import "./card.css";
 @import "./modal.css";
 @import "./drawer.css";
+@import "./bleed.css";
 
 /* Overlays */
 @import "./flyout.css";

package/src/css/components/join.css

@@ -50,6 +50,11 @@
   min-block-size: var(--control-size);
   padding-inline: var(--space-30);
   border: var(--border-width) solid var(--control-border);
+  /* An addon is a field segment: it honours the same lower-edge extension
+     points as text controls (control.css), so a theme's underline or accent
+     edge reaches it instead of stopping at the field. */
+  border-block-end-color: var(--control-border-block-end-color, var(--control-border));
+  border-block-end-width: var(--control-border-block-end-width, var(--border-width));
   border-radius: var(--radius);
   background: var(--control-bg);
   color: var(--control-fg);
@@ -97,37 +102,48 @@
   z-index: 1;
 }
 
-/* Keep an active focus ring above an adjacent hovered control. This matters
-   on platforms where clicking a button does not move focus from the input. */
-.join > :is(:focus, :focus-within) {
-  z-index: 4;
-}
-
 /* An input's border must read as the "primary" edge against an attached
    action (e.g. a password-reveal button) at all times, not only while
    hovered or focused — otherwise the shared edge flips ownership as the
-   user's pointer moves, which reads as a rendering glitch. */
-.join > :is(.input, .textarea, .select) {
+   user's pointer moves, which reads as a rendering glitch. The :has()
+   variant covers a control nested one wrapper level deep (e.g. a combobox
+   element): the wrapper is the flex item, so it carries the z-index — a
+   z-index on the inner control would be a no-op on a static grandchild. */
+.join > :is(.input, .textarea, .select),
+.join > :has(> :is(.input, .textarea, .select)) {
   z-index: 3;
 }
 
-/* An input/select with an attached action reads as one composite field. Move
-   its outer focus treatment to the join; button-only groups keep per-button
-   focus, and unsupported :has() browsers retain the control's normal ring. */
-.join:has(> :is(.input, .textarea, .select):focus-visible) {
-  border-radius: var(--join-radius);
-  outline: 2px solid transparent;
-  box-shadow: var(--focus-ring-shadow);
+/* Keep an active focus line above every neighbour, including an adjacent
+   field and a hovered control (some platforms keep focus on the input while
+   a button is clicked). It must follow the primary-edge rule above: both are
+   (0,2,0), and when it came first a focused field stayed at 3 and the next
+   field, painted later, covered the 1px shared edge of its line. */
+.join > :is(:focus, :focus-within) {
+  z-index: 4;
 }
 
-.join:has(> :is(.input, .textarea, .select)) > :is(.input, .textarea, .select):focus-visible {
-  outline: none;
-  box-shadow: none;
+/* One wrapper level (e.g. a combobox element around the native control) is
+   supported generically — no widget is named here. The wrapper is the flex
+   item that receives the corner longhands above; the inner control inherits
+   them. The wrapper is also what align-items stretches: block-size: 100%
+   resolves against that stretched size, so the field fills it. :hover and
+   :focus-within already propagate to the wrapper, so the z-index rules above
+   need no duplication. */
+.join > * > :is(.input, .textarea, .select) {
+  block-size: 100%;
+  border-radius: inherit;
 }
 
+/* Text controls paint their own inset focus outline (control.css), so a
+   .join never moves the ring to the group: button-only groups and wrapped
+   inputs alike keep per-control focus, with no :has() group treatment. */
+
 /* A default outline action belongs to the composite field border. An explicit
    intent still provides its own outline color — --intent is guaranteed-invalid
-   for a neutral button (the :where(.btn) boundary), so the fallback applies. */
-.join:has(> :is(.input, .textarea, .select)) > .btn.outline {
+   for a neutral button (the :where(.btn) boundary), so the fallback applies.
+   The second :has() covers a control nested one wrapper level deep. */
+.join:has(> :is(.input, .textarea, .select)) > .btn.outline,
+.join:has(> * > :is(.input, .textarea, .select)) > .btn.outline {
   --btn-border-color: var(--intent, var(--border));
 }

package/src/css/components/menu.css

@@ -133,3 +133,15 @@
   border: 0;
   border-block-start: var(--border-width) solid var(--border);
 }
+
+@media (forced-colors: active) {
+  /* The check mark is a currentColor mask fill and the mixed/radio marks are
+    currentColor gradients: without this the system remaps them to Canvas or
+    drops the image and the state disappears. Kept on the pseudo so the host
+    keeps its native color and focus adaptation. */
+  .menu-item[role="menuitemcheckbox"][aria-checked="true"]::before,
+  .menu-item[role="menuitemcheckbox"][aria-checked="mixed"]::before,
+  .menu-item[role="menuitemradio"]::before {
+    forced-color-adjust: none;
+  }
+}

package/src/css/components/modal.css

@@ -12,8 +12,9 @@
  * --dialog-icon-size
  * --dialog-icon-glyph-size
  *
+ * The corner close control is .close (components/close.css).
+ *
  * Internal:
- * --dialog-close-icon-size
  * --dialog-focus-bleed
  * --dialog-viewport-block
  * --dialog-viewport-gap-default
@@ -99,11 +100,16 @@
 
 :where(dialog).modal.scrollable > form > :not(:is(header, footer)),
 :where(dialog).modal.scrollable > .stack > :not(:is(header, footer)) {
-  --dialog-focus-bleed: calc(var(--focus-outline-offset) + var(--border-width) * 2);
+  --dialog-focus-bleed: calc(
+    var(--focus-outline-offset) +
+    max(var(--focus-ring-width), var(--border-width) * 2)
+  );
 
   min-block-size: 0;
   /* Keep focus paint inside the clip without moving the body off the fixed
-     header and footer edges. */
+     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(--dialog-focus-bleed) * -1);
   padding-inline: var(--dialog-focus-bleed);
   overflow: auto;
@@ -126,7 +132,7 @@
    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(--control-size) + var(--space-30));
+  padding-inline-end: calc(var(--close-size, var(--control-size)) + var(--space-30));
 }
 
 :where(dialog).modal > :where(form, .stack) > footer {
@@ -289,56 +295,3 @@ html.has-modal-open.had-scrollbar {
     transform: translateX(0.35rem);
   }
 }
-
-/* Close control. A close button is an action attached to a surface, so it
-   never participates in the content flow — absolute at the panel's top
-   inline-end, inside the surface. The glyph comes from --icon-close, masked to
-   currentColor, so no icon font or text glyph is required in the markup. */
-.dialog-close {
-  --dialog-close-icon-size: 1rem;
-
-  display: inline-grid;
-  place-items: center;
-  padding: 0;
-  border: 0;
-  border-radius: var(--radius);
-  color: var(--text-muted);
-  cursor: pointer;
-
-  /* Out of flow, anchored to the positioned dialog surface, not the header or
-     any scroll container inside it. */
-  position: absolute;
-  z-index: 1;
-  inset-block-start: var(--space-20);
-  inset-inline-end: var(--space-20);
-
-  inline-size: var(--control-size);
-  block-size: var(--control-size);
-
-  background: var(--surface-subtle);
-}
-
-.dialog-close::before {
-  content: "";
-  inline-size: var(--dialog-close-icon-size);
-  block-size: var(--dialog-close-icon-size);
-  background: currentColor;
-  -webkit-mask: var(--icon-close) center / contain no-repeat;
-  mask: var(--icon-close) center / contain no-repeat;
-}
-
-@media (hover: hover) {
-  .dialog-close:hover {
-    box-shadow: inset 0 0 0 999px var(--hover-overlay);
-    color: var(--text);
-  }
-}
-
-.dialog-close:active {
-  box-shadow: inset 0 0 0 999px var(--hover-overlay);
-}
-
-.dialog-close:focus-visible {
-  outline: 2px solid transparent;
-  box-shadow: var(--focus-ring-shadow);
-}

package/src/css/components/navbar.css

@@ -68,11 +68,16 @@
   display: inline-flex;
   align-items: center;
   min-block-size: var(--control-size-sm);
+  padding-block: 0;
   padding-inline: var(--space-20);
+  border: 0;
   border-radius: var(--radius);
+  background: transparent;
   color: var(--ui-fg, var(--text-muted));
+  font: inherit;
   font-weight: var(--font-weight-medium);
   text-decoration: none;
+  cursor: pointer;
 }
 
 /* nav-link serves two contracts: plain page navigation (aria-current="page")
@@ -97,6 +102,28 @@
   color: var(--state-selected);
 }
 
+/* On a bar with its own --ui-bg/--ui-fg the fill is a tint of the link's own
+   ink, the .btn.ghost hover recipe, so it reads on light and dark bars alike
+   instead of snapping back to --surface-subtle. Not --ui-hover-bg: that is the
+   bar's own hover and can equal its fill. The ink follows --ui-fg too — the
+   selected accent has no contrast pair with an arbitrary bar. The baseline
+   above keeps the light chip where color-mix is missing, with ink that is
+   legible on it. */
+@supports (color: color-mix(in oklch, red, white)) {
+  .nav-link:is(:hover, [aria-current]) {
+    background: color-mix(in oklch, currentColor 10%, transparent);
+  }
+
+  .nav-link:hover {
+    color: var(--ui-fg, var(--text));
+  }
+
+  .nav-link[aria-current],
+  .nav-link[aria-current]:hover {
+    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. */

package/src/css/core/focus.css

@@ -3,9 +3,15 @@
    pointer/mouse focus and interactive components layer their ring on top.
 
    Invariant: an interactive component must never rely on box-shadow alone
-   for its keyboard focus indicator. Components that remove the native
-   outline on :focus-visible replace it with a transparent outline — invisible
-   normally, forced to the system focus color under forced-colors. */
+   for its keyboard focus indicator; forced colors keep outlines and drop
+   shadows.
+
+   Component indicators are a solid --focus-ring-width line in --focus: inset
+   on fields (inside their border box), offset by --focus-outline-offset on
+   discrete actions. The color never derives from an intent or a local
+   surface — the theme guarantees --focus at 3:1 against both --surface and
+   --surface-solid, so one token reads on the page, on a solid band and on
+   any nested surface. */
 :focus {
   outline: var(--focus-outline);
   outline-offset: var(--focus-outline-offset);