actual-css 0.10.0 → 0.11.1

package/src/css/forms/choice-card.css

@@ -5,13 +5,15 @@
  *
  * Each .choice-card is a <label> wrapping a native radio or checkbox. When
  * :has() is supported the input is visually hidden and the card mirrors its
- * state: checked border and tint, checkmark badge (round for radio, rounded
- * square for checkbox), focus ring, disabled dimming. Without :has() the
- * native input stays visible so selection state never disappears.
+ * state: an indicator on the leading edge (a ring for radio, a box for
+ * checkbox) that fills with a check, checked border and tint, focus ring,
+ * disabled dimming. Without :has() the native input stays visible in the
+ * indicator's slot, so selection state never disappears.
  *
- * The badge overhangs the top-right corner by 0.375em; ancestors with
- * overflow: hidden will clip it. Pair with grid or flex utilities for group
- * layout.
+ * The card is a two-column grid: the indicator in the first column, level
+ * with the first row, and each child element of the label on its own row in
+ * the second. Wrap loose text in an element. A corner badge for tiles is a
+ * documented recipe on these same layers, not a variant.
  *
  * .chip is the compact pill form (filter chips, selectable tags): control
  * height, and a leading dot that turns into the check in a fixed slot, so
@@ -19,6 +21,7 @@
  *
  * Public hooks:
  * --choice-card-pad
+ * --choice-card-gap
  * --choice-card-radius
  * --choice-card-border
  * --choice-card-bg
@@ -33,19 +36,25 @@
 
 .choice-card {
   --choice-card-pad: var(--density-space, var(--space-40));
+  --choice-card-gap: var(--space-30);
   --choice-card-radius: var(--radius);
   --choice-card-border: var(--border);
   --choice-card-bg: var(--surface);
-  --choice-card-check-size: 1.5em;
+  --choice-card-check-size: 1.25em;
 
   position: relative;
-  display: block;
+  display: grid;
+  grid-template-columns: var(--choice-card-check-size) minmax(0, 1fr);
+  /* why: a card stretched by a taller grid neighbour keeps its rows at the
+     top instead of spreading them. */
+  align-content: start;
+  column-gap: var(--choice-card-gap);
   padding: var(--choice-card-pad);
   border: var(--border-width) solid var(--form-invalid-border, var(--choice-card-border));
   border-radius: var(--choice-card-radius);
   background: var(--choice-card-bg);
   color: var(--text);
-  /* Consumed so .sm/.lg reach the card; the badge's em sizing follows. */
+  /* Consumed so .sm/.lg reach the card; the indicator's em sizing follows. */
   font-size: var(--control-font-size);
   cursor: pointer;
   transition:
@@ -54,6 +63,18 @@
     box-shadow var(--duration);
 }
 
+.choice-card > * {
+  grid-column: 2;
+}
+
+/* The input owns the indicator's cell: visible there without :has(), hidden
+   in it with :has(). */
+.choice-card > :is(input[type="radio"], input[type="checkbox"]) {
+  grid-area: 1 / 1;
+  place-self: center;
+  margin: 0;
+}
+
 /* The native input is visually hidden but stays focusable and participates in
    form submission and keyboard navigation (sr-only pattern). Guarded: without
    :has() the card cannot mirror the input's state, so the visible native
@@ -99,24 +120,31 @@
   }
 }
 
-/* Checkmark badge — always rendered at scale(0) and scaled in on check, so
-   the entrance can transition (a pseudo created on :checked could not). */
+/* Indicator: ::before is the ring or box, ::after the check. Both share the
+   input's cell, centred on the first line — not the first row, which a long
+   label wraps — and stay hidden until :has() can mirror the input. The em
+   margin is the lh-less fallback at the default 1.5 line-height. */
 .choice-card::before,
 .choice-card::after {
   content: "";
-  position: absolute;
-  inset-inline-end: -0.375em;
-  inset-block-start: -0.375em;
+  grid-area: 1 / 1;
+  align-self: start;
+  margin-block-start: calc((1.5em - var(--choice-card-check-size)) / 2);
+  margin-block-start: calc((1lh - var(--choice-card-check-size)) / 2);
   inline-size: var(--choice-card-check-size);
   block-size: var(--choice-card-check-size);
   transform: scale(0);
-  transition: transform var(--duration);
+  transition:
+    transform var(--duration),
+    background-color var(--duration),
+    border-color var(--duration);
 }
 
-/* Badge disc — circle for radio, rounded square for checkbox */
+/* A border, not an inset shadow: forced colors drop shadows, and the resting
+   ring is the only sign of an unchecked option. The invalid border reaches it
+   through the same hook as the card's. */
 .choice-card::before {
-  background: var(--intent, var(--state-selected));
-  box-shadow: 0 0 0 2px var(--surface);
+  border: max(var(--border-width), 1.5px) solid var(--form-invalid-border, var(--text-muted));
   z-index: 1;
 }
 
@@ -138,7 +166,19 @@
   z-index: 2;
 }
 
-.choice-card:has(:checked)::before,
+/* Guarded with the input's hiding above: a resting ring beside a visible
+   native input would draw the indicator twice. */
+@supports selector(:has(*)) {
+  .choice-card::before {
+    transform: none;
+  }
+}
+
+.choice-card:has(:checked)::before {
+  border-color: var(--intent, var(--state-selected));
+  background: var(--intent, var(--state-selected));
+}
+
 .choice-card:has(:checked)::after {
   transform: scale(1);
 }
@@ -164,11 +204,16 @@
 .choice-card.chip::before {
   --choice-chip-dot: calc(var(--control-pad-x) + var(--choice-card-check-size) / 2) 50%;
 
+  position: absolute;
   inset: 0;
+  /* why: an absolute box honours self-alignment — the card's start would
+     shrink this layer to 0 height and the dot with it. */
+  align-self: auto;
+  margin: 0;
   inline-size: auto;
   block-size: auto;
+  border: 0;
   border-radius: inherit;
-  box-shadow: none;
   background: var(--text-subtle);
   transform: none;
   clip-path: circle(0.1875em at var(--choice-chip-dot));
@@ -182,10 +227,11 @@
 
 /* The check keeps the card's scale-in, in flow ahead of the label. */
 .choice-card.chip::after {
-  position: static;
   order: -1;
   flex: none;
-  margin-inline-end: 0.375em;
+  align-self: center;
+  margin-block: 0;
+  margin-inline: 0 0.375em;
   background: var(--intent, var(--state-selected));
   -webkit-mask-size: contain;
   mask-size: contain;
@@ -195,9 +241,11 @@
    this repair, forced colors pushes disc and check to the same system color
    and the state disappears. Highlight/Canvas/HighlightText are preserved as-is,
    so no forced-color-adjust is needed. The pseudo is not focusable — the
-   outline is a separator against the card, not a focus channel. */
+   outline separates the disc from whatever it overlaps (the card's border,
+   for a corner-badge recipe), not a focus channel. */
 @media (forced-colors: active) {
   .choice-card:has(:checked)::before {
+    border-color: Highlight;
     background: Highlight;
     outline: 2px solid Canvas;
   }

package/src/css/forms/control.css

@@ -53,8 +53,8 @@
   cursor: var(--control-cursor);
   /* No outline: none here — the core :focus fallback must survive for browsers
      without :focus-visible. Pointer focus is hidden by core's
-     :focus:not(:focus-visible); keyboard focus swaps in the transparent
-     outline + ring below. */
+     :focus:not(:focus-visible); keyboard focus draws the inset outline below
+     (invalid fields take --form-invalid-border, the documented exception). */
   transition:
     border-color var(--duration),
     box-shadow var(--duration),

package/src/css/forms/native.css

@@ -19,7 +19,11 @@
      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);

package/src/css/forms/otp.css

@@ -64,7 +64,7 @@
   padding-block: 0;
   padding-inline: calc((var(--otp-cell-size) - 1ch) / 2) 0;
   border: 0;
-  outline: 2px solid transparent;
+  outline: none;
   box-shadow: none;
   background: transparent;
   color: var(--text);
@@ -89,6 +89,14 @@
    character after it: the state rules select the cells as following siblings
    (input:focus ~ span, input:disabled ~ span, …), so that order is part of the
    contract. */
+/* The documented markup puts .input on the native input, so the field ring
+   (.input:focus-visible:not(:disabled), control.css) would outrank the reset
+   above and draw that group ring; this selector must stay one step above it.
+   No transparent outline either: forced colors would paint it as a ring. */
+.otp > input:focus-visible:not(:disabled) {
+  outline: none;
+}
+
 .otp > input:focus ~ span {
   --otp-cell-border: var(--focus);
   --otp-cell-border-width: calc(var(--border-width) * 2);

package/src/css/forms/range.css

@@ -13,6 +13,10 @@
  * --range-track-height
  * --range-thumb-bg
  * --range-track-bg
+ * --range-fill-bg
+ *
+ * Runtime-written (by actual-css/js/range, never set by hand):
+ * --range-progress
  */
 
 /* Intent boundary — inherited intents do not tint this component.
@@ -22,10 +26,17 @@
 }
 
 .range {
-  --range-thumb-size: 1.25rem;
-  --range-track-height: 0.25rem;
+  --range-thumb-size: 1.125rem;
+  --range-track-height: 0.625rem;
   --range-thumb-bg: var(--intent, var(--primary));
   --range-track-bg: var(--border);
+  --range-fill-bg: var(--intent, var(--primary));
+  /* Fill share, written by actual-css/js/range. 0% with no runtime means a
+     plain track — the control stays fully usable without JavaScript. */
+  --range-progress: 0%;
+  /* Logical fill direction: the gradient below cannot use flow-relative
+     keywords, so RTL flips the angle through this hook instead. */
+  --range-fill-from: to right;
 
   appearance: none;
   -webkit-appearance: none;
@@ -35,16 +46,29 @@
   cursor: pointer;
 }
 
+:where([dir="rtl"]) .range,
+.range:dir(rtl) {
+  --range-fill-from: to left;
+}
+
 .range::-webkit-slider-runnable-track {
   block-size: var(--range-track-height);
   border-radius: var(--radius-full);
-  background: var(--range-track-bg);
+  background: linear-gradient(
+    var(--range-fill-from),
+    var(--range-fill-bg) var(--range-progress),
+    var(--range-track-bg) var(--range-progress)
+  );
 }
 
 .range::-moz-range-track {
   block-size: var(--range-track-height);
   border-radius: var(--radius-full);
-  background: var(--range-track-bg);
+  background: linear-gradient(
+    var(--range-fill-from),
+    var(--range-fill-bg) var(--range-progress),
+    var(--range-track-bg) var(--range-progress)
+  );
 }
 
 .range::-webkit-slider-thumb {
@@ -57,6 +81,10 @@
   background: var(--range-thumb-bg);
   margin-block-start: calc((var(--range-track-height) - var(--range-thumb-size)) / 2);
   cursor: inherit;
+  /* Permanent surface separator: the fill defaults to the thumb color, so
+     without this the thumb would melt into the filled part of the track.
+     Focus-visible keeps this ring and adds the --focus ring outside it. */
+  box-shadow: 0 0 0 2px var(--surface-opaque);
   transition: box-shadow var(--duration);
 }
 
@@ -67,6 +95,7 @@
   border: 0;
   background: var(--range-thumb-bg);
   cursor: inherit;
+  box-shadow: 0 0 0 2px var(--surface-opaque);
   transition: box-shadow var(--duration);
 }
 
@@ -77,20 +106,21 @@
 /*
  * A thumb pseudo-element takes no reliable outline, so its ring is a solid
  * --focus shadow (the transparent outline above covers forced colors). The
- * 1px surface-coloured separator keeps the ring visually distinct from the
- * small, coloured thumb — unlike a full-size input where the same gap would
- * read as an unwanted void.
+ * surface-coloured separator keeps the ring visually distinct from the
+ * coloured thumb — unlike a full-size input where the same gap would
+ * read as an unwanted void. It doubles as the resting separator between
+ * the thumb and the same-coloured fill.
  */
 .range:focus-visible::-webkit-slider-thumb {
   box-shadow:
-    0 0 0 1px var(--surface),
-    0 0 0 calc(1px + var(--focus-ring-width)) var(--focus);
+    0 0 0 2px var(--surface-opaque),
+    0 0 0 calc(2px + var(--focus-ring-width)) var(--focus);
 }
 
 .range:focus-visible::-moz-range-thumb {
   box-shadow:
-    0 0 0 1px var(--surface),
-    0 0 0 calc(1px + var(--focus-ring-width)) var(--focus);
+    0 0 0 2px var(--surface-opaque),
+    0 0 0 calc(2px + var(--focus-ring-width)) var(--focus);
 }
 
 .range:disabled {
@@ -98,28 +128,41 @@
   cursor: not-allowed;
   opacity: var(--disabled-opacity);
 }
-
 /* Forced colors: the track must stay a visible line against the page (Canvas
-  would merge with it) and the thumb needs a real boundary to remain
-  distinguishable from the track. Disabled keeps GrayText via :disabled.
-  Focus stays on the transparent outline of :focus-visible. Track and thumb
-  fills are written on the properties, not only the hooks: an application
-  hook override at the same specificity loads after this file and would win
-  the variable, leaving a Canvas-remapped fill. */
+   would merge with it) and the thumb needs a real boundary to remain
+   distinguishable from the track. The fill keeps its two-tone split with
+   system colors so the value stays readable. Disabled keeps GrayText via
+   :disabled. Focus stays on the transparent outline of :focus-visible. Track
+   and thumb fills are written on the properties, not only the hooks: an
+   application hook override at the same specificity loads after this file
+   and would win the variable, leaving a Canvas-remapped fill.
+   The split lives in a background-image, which forced-color-adjust: auto
+   drops — so the tracks opt out locally. The colors stay system keywords,
+   keeping native contrast adaptation; only the host keeps adjusting. */
 @media (forced-colors: active) {
   .range {
     --range-track-bg: CanvasText;
     --range-thumb-bg: ButtonFace;
+    --range-fill-bg: Highlight;
   }
 
   .range::-webkit-slider-runnable-track {
-    background: CanvasText;
+    forced-color-adjust: none;
+    background: linear-gradient(
+      var(--range-fill-from),
+      Highlight var(--range-progress),
+      CanvasText var(--range-progress)
+    );
   }
 
   .range::-moz-range-track {
-    background: CanvasText;
+    forced-color-adjust: none;
+    background: linear-gradient(
+      var(--range-fill-from),
+      Highlight var(--range-progress),
+      CanvasText var(--range-progress)
+    );
   }
-
   .range::-webkit-slider-thumb {
     background: ButtonFace;
     border: var(--border-width) solid ButtonText;

package/src/js/command.js

@@ -7,6 +7,12 @@
  * late targets, changed commandfor values, and same-id replacements therefore
  * work immediately without an observer, scan, refresh call, or per-element
  * listener.
+ *
+ * A routed command cancels the click, so the browser never dispatches the
+ * native `command` event to the target, and the router does not re-dispatch
+ * one. Listen to the behavior's own events instead. Accessibility state that
+ * must exist before interaction (`aria-controls`, `aria-haspopup`,
+ * `aria-pressed`) belongs in the markup: the router has no connection step.
  */
 
 /* One registry per document owns its delegated listener and command handlers.
@@ -14,18 +20,45 @@
  * behavior definitions only, never DOM triggers or resolved targets. */
 const registries = new WeakMap();
 
-function commandNames(commands, caller) {
-  const names = Array.isArray(commands) ? commands : [commands];
-  if (!names.length || names.some((name) => typeof name !== "string" || !name)) {
-    throw new TypeError(`${caller} requires one or more command names.`);
-  }
-  return [...new Set(names)];
+// The HTML `command` keywords. Any other value that does not start with "--"
+// is the invalid state, which the browser ignores. Extend this list when HTML
+// adds a keyword: registerCommands() throws on an unknown non-"--" name, so a
+// stale list fails loudly instead of silently swallowing the new keyword.
+// A future path that listens to the native `command` event instead of the
+// click would need a per-tier matrix (native support varies) plus
+// no-double-execution tests — the click stays the single routing event until
+// then, which is why a routed command cancels it by design (see above).
+const NATIVE_COMMANDS = new Set([
+  "toggle-popover",
+  "show-popover",
+  "hide-popover",
+  "close",
+  "request-close",
+  "show-modal",
+]);
+
+function isCustom(command) {
+  return command.startsWith("--");
 }
 
 // Native command keywords are ASCII case-insensitive. Custom commands keep
 // their exact spelling, as required by the command invoker contract.
 function commandKey(command) {
-  return command.startsWith("--") ? command : command.toLowerCase();
+  return isCustom(command) ? command : command.toLowerCase();
+}
+
+function commandNames(commands, caller) {
+  const names = Array.isArray(commands) ? commands : [commands];
+  if (!names.length || names.some((name) => typeof name !== "string")) {
+    throw new TypeError(`${caller} requires one or more command names.`);
+  }
+  const invalid = names.find((name) => !isCustom(name) && !NATIVE_COMMANDS.has(commandKey(name)));
+  if (invalid !== undefined) {
+    throw new TypeError(
+      `${caller}: "${invalid}" is neither a native command nor a custom "--" command.`,
+    );
+  }
+  return [...new Set(names.map(commandKey))];
 }
 
 /**
@@ -46,23 +79,25 @@ export function targetFor(trigger) {
 /**
  * Build the button selector corresponding to one or more command names.
  *
+ * Native keywords match case-insensitively, custom commands exactly — the
+ * same rule the router applies.
+ *
  * @param {string | string[]} commands Command name or names to include.
  * @returns {string} A selector matching command buttons with `commandfor`.
- * @throws {TypeError} When no valid command name is provided.
+ * @throws {TypeError} When a name is neither native nor a custom `--` command.
  */
 export function commandSelector(commands) {
-  const attributes = commandNames(commands, "commandSelector()").map(
-    (name) => `[command="${name.replaceAll("\\", "\\\\").replaceAll('"', '\\"')}"]`,
-  );
+  const attributes = commandNames(commands, "commandSelector()").map((name) => {
+    const value = name.replaceAll("\\", "\\\\").replaceAll('"', '\\"');
+    return `[command="${value}"${isCustom(name) ? "" : " i"}]`;
+  });
   return `button[commandfor]:is(${attributes.join(", ")})`;
 }
 
 function triggerFromEvent(event, doc) {
-  const ElementClass = doc.defaultView?.Element;
-  if (!ElementClass) return null;
-
   for (const node of event.composedPath?.() ?? [event.target]) {
-    if (node instanceof ElementClass && node.matches("button[commandfor][command]")) {
+    // nodeType rather than instanceof: nodes from another realm still count.
+    if (node.nodeType === 1 && node.matches("button[commandfor][command]")) {
       return node;
     }
     if (node === doc) break;
@@ -78,7 +113,7 @@ function createRegistry(doc) {
     if (event.defaultPrevented) return;
 
     const trigger = triggerFromEvent(event, doc);
-    if (!trigger || trigger.disabled) return;
+    if (!trigger || trigger.matches(":disabled")) return;
 
     const command = commandKey(trigger.getAttribute("command"));
     const registration = commands.get(command);
@@ -87,7 +122,10 @@ function createRegistry(doc) {
     const target = registration.resolve(trigger);
     if (!target) return;
 
-    registration.prepare?.(trigger, target, command);
+    // One routed command owns the click, even when the handler throws. This
+    // is also what stops a second copy of this module, with its own registry
+    // and listener, from handling the same activation.
+    event.preventDefault();
     registration.handle(event, trigger, target, command);
   }
 
@@ -98,31 +136,22 @@ function createRegistry(doc) {
 /**
  * Register one behavior for one or more command names.
  *
- * `prepare`, when present, runs immediately before `handle` on every matching
- * action. It must be idempotent; it is useful for semantics derived from the
- * resolved target, without introducing a connection lifecycle.
+ * The router cancels the click once `resolve` returns a target, so `handle`
+ * runs with `event.defaultPrevented` already true.
  *
  * @param {string | string[]} commands Command name or names owned by this behavior.
  * @param {object} options Behavior callbacks.
  * @param {(trigger: HTMLButtonElement) => Element | null} [options.resolve=targetFor]
  * Resolver evaluated for every action.
- * @param {(trigger: HTMLButtonElement, target: Element, command: string) => void} [options.prepare]
- * Optional idempotent callback run immediately before the handler.
  * @param {(event: MouseEvent, trigger: HTMLButtonElement, target: Element, command: string) => void} options.handle
  * Command handler.
  * @returns {{ disconnect: () => void }} An idempotent registration teardown handle.
  * @throws {TypeError} When command names or callbacks are invalid.
  * @throws {Error} When a command already has an owner in the current document.
  */
-export function registerCommands(commands, { resolve = targetFor, prepare, handle } = {}) {
-  const names = [
-    ...new Set(commandNames(commands, "registerCommands()").map((name) => commandKey(name))),
-  ];
-  if (
-    typeof resolve !== "function" ||
-    (prepare !== undefined && typeof prepare !== "function") ||
-    typeof handle !== "function"
-  ) {
+export function registerCommands(commands, { resolve = targetFor, handle } = {}) {
+  const names = commandNames(commands, "registerCommands()");
+  if (typeof resolve !== "function" || typeof handle !== "function") {
     throw new TypeError("registerCommands() requires function callbacks.");
   }
   if (typeof document === "undefined") return { disconnect() {} };
@@ -139,7 +168,7 @@ export function registerCommands(commands, { resolve = targetFor, prepare, handl
     throw new Error(`Command "${conflict}" is already registered in this document.`);
   }
 
-  const registration = { resolve, prepare, handle };
+  const registration = { resolve, handle };
   for (const name of names) registry.commands.set(name, registration);
 
   let connected = true;

package/src/js/dialog.js

@@ -5,7 +5,7 @@
  * Close button:  <button commandfor="dialog-id" command="request-close">
  * Dialog:        <dialog id="dialog-id" data-dialog-dismissible>
  *
- * Command semantics are explicit: show-modal calls showModal(), show calls
+ * Command semantics are explicit: show-modal calls showModal(), --show calls
  * show(). data-dialog-modal still defines the default for direct openDialog()
  * calls when no command mode is forced.
  * data-dialog-dismissible gates backdrop click only: with it, the runtime
@@ -34,7 +34,9 @@ import { CLASSES } from "./selectors.js";
 
 const dialogMap = new WeakMap();
 const wiredDialogs = new Set();
-const DIALOG_COMMANDS = ["show-modal", "show", "request-close", "close"];
+// HTML has no non-modal dialog keyword, so non-modal opening is the custom
+// `--show` command.
+const DIALOG_COMMANDS = ["show-modal", "--show", "request-close", "close"];
 const DIALOG_SELECTOR = "dialog";
 const DIALOG_TITLE_SELECTOR = "[data-title], h1, h2, h3, h4, h5, h6";
 const STATIC_SHAKE_MS = 250;
@@ -519,28 +521,11 @@ registerCommands(DIALOG_COMMANDS, {
     const dialog = targetFor(trigger);
     return isDialogElement(dialog) ? dialog : null;
   },
-  prepare: (trigger, dialog, command) => {
-    if (isDialogElement(dialog)) {
-      ensureDialogWired(dialog);
-    }
-
-    trigger.setAttribute("aria-controls", dialog.id);
-
-    if (
-      !trigger.hasAttribute("aria-haspopup") &&
-      (command === "show-modal" || command === "show")
-    ) {
-      trigger.setAttribute("aria-haspopup", "dialog");
-    }
-  },
-  handle: (event, trigger, dialog, command) => {
-    event.preventDefault();
-
-    if (!isDialogElement(dialog)) {
-      return;
-    }
+  handle: (_event, trigger, dialog, command) => {
+    // A dialog inserted since the last enhance() pass is wired on first use.
+    ensureDialogWired(dialog);
 
-    if (command === "show-modal" || command === "show") {
+    if (command === "show-modal" || command === "--show") {
       openDialogWithViewTransition(dialog, trigger, command === "show-modal");
       return;
     }

package/src/js/dismiss.js

@@ -7,8 +7,7 @@ import { registerCommands } from "./command.js";
 import { EVENTS } from "./events.js";
 
 registerCommands("--dismiss", {
-  handle(event, trigger, target) {
-    event.preventDefault();
+  handle(_event, trigger, target) {
     target.hidden = true;
     target.dispatchEvent(
       new CustomEvent(EVENTS.dismiss, {