actual-css 0.10.0 → 0.11.0

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, {