actual-css 0.9.2 → 0.11.0

package/src/css/layout/column-layout.css

@@ -4,12 +4,12 @@
  * Docs: docs/pages/layout/column-layout.md
  *
  * Neither space-driven like .grid nor count-driven like .grid-N: this is a
- * coordinate system. The author places regions with .column-span-N /
- * .column-start-N and owns narrow-container recomposition. There is
- * deliberately no automatic collapse — no threshold, no hidden
- * .container-query behavior, no breakpoint variants. A single framework
- * threshold cannot be right for arbitrary per-region compositions, and a
- * hidden default would have to be undone rather than extended.
+ * coordinate system. Each direct child places itself with two numbers,
+ * --column-start and --column-span, and the author owns narrow-container
+ * recomposition. There is deliberately no automatic collapse — no threshold,
+ * no hidden .container-query behavior, no breakpoint variants. A single
+ * framework threshold cannot be right for arbitrary per-region compositions,
+ * and a hidden default would have to be undone rather than extended.
  *
  * See docs/design-notes/column-layout.md.
  *
@@ -21,11 +21,12 @@
  *   media + flexible content        -> .media
  *   exact custom track templates    -> --grid-columns on .grid
  *
- * Child contract: each direct child is placed on the canvas via its own
- * .column-span-N / .column-start-N.
- *
  * Unlike .grid-N, the track template does not read --gap, so the gap
  * utilities are exact here at every width.
+ *
+ * Public hooks:
+ * --column-start (the start line, 1-12; unset = auto-placed)
+ * --column-span (the width in canvas units, 1-12; unset = to the canvas end)
  */
 .column-layout {
   display: grid;
@@ -33,114 +34,28 @@
   grid-template-columns: repeat(12, minmax(0, 1fr));
 }
 
-/* Three zero-specificity tiers, applied in this order and only ever separated
- * by source order. ORDER IS LOAD-BEARING:
+/* One rule covers the four placements:
+ *   neither          auto-placed, spanning the whole canvas
+ *   span only        auto-placed over N units, so 8 + 4 flows onto one row
+ *   start only       from line S to the canvas end (span 13 - S)
+ *   start and span   explicit; keep S + N - 1 <= 12
  *
- *   1. the child reset       auto-placed, spanning the whole canvas
- *   2. .column-start-*       a definite start line, running to the canvas end
- *   3. .column-span-*        the end only, so it refines either of the above
+ * The start stays `auto` unless set: a definite start on every child would
+ * take all of them out of auto-placement, and an 8 + 4 pair would stack.
  *
- * Moving tier 3 above tier 2 makes every start+span pair run to column 12;
- * moving either above tier 1 makes every placement full-span. Both failures
- * are silent. tests/css-audit.test.js locks the order and
- * tests/browser/column-layout.test.js locks the resulting geometry.
- *
- * Zero specificity is the point: an application's own container-query rules
- * override placement additively, with a single-class selector and without
- * having to undo framework specificity first.
- */
-
-/* Tier 1. A child with no placement class stays a readable full-width region
- * instead of collapsing to one twelfth. Expressed as a span, not as
- * `1 / -1`: a definite start line would give every child a definite column
- * position and disable auto-placement, so `.column-span-8` next to
- * `.column-span-4` would stack instead of composing 8 + 4.
+ * The reset makes the two hooks inputs of this grid item rather than an
+ * inherited context: a nested .column-layout keeps the coordinates it was
+ * given for its own placement, and its children start from nothing. Zero
+ * specificity, so any author rule on the child wins.
  *
  * min-inline-size: 0 keeps the item box inside its track so the canvas never
  * grows past its container. It does not stop content from painting outside a
  * narrow track — that distinction is the primitive's contract, not a bug. */
 :where(.column-layout) > * {
-  grid-column-end: span 12;
-  min-inline-size: 0;
-}
-
-/* Tier 2. A definite start line, running to the end of the canvas unless a
- * .column-span-* refines the end. `column-start-9` alone is therefore the
- * last four columns rather than an implicit 21-line overflow. */
-:where(.column-start-1) {
-  grid-column: 1 / -1;
-}
-:where(.column-start-2) {
-  grid-column: 2 / -1;
-}
-:where(.column-start-3) {
-  grid-column: 3 / -1;
-}
-:where(.column-start-4) {
-  grid-column: 4 / -1;
-}
-:where(.column-start-5) {
-  grid-column: 5 / -1;
-}
-:where(.column-start-6) {
-  grid-column: 6 / -1;
-}
-:where(.column-start-7) {
-  grid-column: 7 / -1;
-}
-:where(.column-start-8) {
-  grid-column: 8 / -1;
-}
-:where(.column-start-9) {
-  grid-column: 9 / -1;
-}
-:where(.column-start-10) {
-  grid-column: 10 / -1;
-}
-:where(.column-start-11) {
-  grid-column: 11 / -1;
-}
-:where(.column-start-12) {
-  grid-column: 12 / -1;
-}
+  --column-start: initial;
+  --column-span: initial;
 
-/* Tier 3. The end only. Combined with a start, keep the placement inside the
- * canvas: S + N - 1 <= 12. Exceeding it adds an auto-sized implicit column,
- * which reshapes every 1fr track — the whole canvas loses its alignment, not
- * just the offending region. */
-:where(.column-span-1) {
-  grid-column-end: span 1;
-}
-:where(.column-span-2) {
-  grid-column-end: span 2;
-}
-:where(.column-span-3) {
-  grid-column-end: span 3;
-}
-:where(.column-span-4) {
-  grid-column-end: span 4;
-}
-:where(.column-span-5) {
-  grid-column-end: span 5;
-}
-:where(.column-span-6) {
-  grid-column-end: span 6;
-}
-:where(.column-span-7) {
-  grid-column-end: span 7;
-}
-:where(.column-span-8) {
-  grid-column-end: span 8;
-}
-:where(.column-span-9) {
-  grid-column-end: span 9;
-}
-:where(.column-span-10) {
-  grid-column-end: span 10;
-}
-:where(.column-span-11) {
-  grid-column-end: span 11;
-}
-:where(.column-span-12) {
-  grid-column-end: span 12;
+  grid-column-start: var(--column-start, auto);
+  grid-column-end: span var(--column-span, calc(13 - var(--column-start, 1)));
+  min-inline-size: 0;
 }

package/src/css/utilities/extra.css

@@ -1,7 +1,7 @@
 /*
- * Optional utility helpers.
- *
- * These classes are intentionally not part of the core API.
+ * Extra utility helpers — explicit property/value names beside the curated
+ * shortcuts of base.css. Both are imported by utilities/index.css and are
+ * equally public (docs/design-notes/naming.md § Utilities).
  * They are escape hatches for layout nudges, not a full atomic scale.
  *
  * Core principle:
@@ -177,8 +177,9 @@
   overflow-y: auto;
 }
 
-/* Text */
-.white-space-normal {
+/* Text. .text-wrap is the counterpart of base's .text-nowrap: it restores
+   wrapping inside a component that sets nowrap (.badge). */
+.text-wrap {
   white-space: normal;
 }
 
@@ -251,7 +252,7 @@
 /* Surface. These are semantic surfaces, not arbitrary paint: each owns its
    matching ink and rebinds --heading to that ink, so it stays readable when it
    recreates a light surface inside a context that installed a dark one
-   (.inverted). Intent ink is not inherited through a surface utility; use
+   (e.g. a --surface-solid band). Intent ink is not inherited through a surface utility; use
    .intent-color for that. */
 .background-surface {
   --heading: currentColor;

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
@@ -24,7 +24,7 @@
  *
  * The runtime assumes native <dialog> with show()/showModal()/close() — the
  * Minimal browser tier. requestClose() is newer than the floor and is used
- * when present, falling back to close() otherwise.
+ * when present, falling back to a cancel event before close() otherwise.
  */
 
 import { registerCommands, targetFor } from "./command.js";
@@ -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;
@@ -48,34 +50,69 @@ function boolData(el, name) {
   return el.hasAttribute(name) && el.getAttribute(name) !== "false";
 }
 
-function ensureId(el, prefix) {
+function setOwnedAttribute(state, el, name, value) {
+  const current = el.getAttribute(name);
+  if (current === value) return;
+
+  const previous = state.ownedAttributes.find((entry) => entry.el === el && entry.name === name);
+  if (previous && current !== previous.written) previous.original = current;
+  if (value === null) el.removeAttribute(name);
+  else el.setAttribute(name, value);
+
+  if (previous) previous.written = value;
+  else state.ownedAttributes.push({ el, name, original: current, written: value });
+}
+
+function restoreOwnedAttributes(state) {
+  for (const { el, name, original, written } of state.ownedAttributes) {
+    // An author may have changed an attribute while the dialog was connected.
+    if (el.getAttribute(name) !== written) continue;
+    if (original === null) el.removeAttribute(name);
+    else el.setAttribute(name, original);
+  }
+}
+
+function ensureId(el, prefix, state) {
   if (!el.id) {
     uid++;
-    el.id = `${prefix}-${uid}`;
+    setOwnedAttribute(state, el, "id", `${prefix}-${uid}`);
   }
   return el.id;
 }
 
-function syncDialogSemantics(dialog, modal = isModal(dialog)) {
-  if (modal) {
-    dialog.setAttribute("aria-modal", "true");
-  } else {
-    dialog.removeAttribute("aria-modal");
-  }
+function ownsCurrentAttribute(state, el, name) {
+  return state.ownedAttributes.some(
+    (entry) => entry.el === el && entry.name === name && el.getAttribute(name) === entry.written,
+  );
+}
+
+function syncDialogSemantics(dialog, state, modal = isModal(dialog)) {
+  setOwnedAttribute(state, dialog, "aria-modal", modal ? "true" : null);
 
-  if (dialog.hasAttribute("aria-label") || dialog.hasAttribute("aria-labelledby")) {
+  const ownsLabel = ownsCurrentAttribute(state, dialog, "aria-label");
+  const ownsLabelledby = ownsCurrentAttribute(state, dialog, "aria-labelledby");
+  if (dialog.hasAttribute("aria-labelledby") && !ownsLabelledby) {
+    if (ownsLabel) setOwnedAttribute(state, dialog, "aria-label", null);
+    return;
+  }
+  if (dialog.hasAttribute("aria-label") && !ownsLabel) {
+    if (ownsLabelledby) setOwnedAttribute(state, dialog, "aria-labelledby", null);
     return;
   }
 
   const label = dialog.getAttribute("data-title")?.trim();
   if (label) {
-    dialog.setAttribute("aria-label", label);
+    if (ownsLabelledby) setOwnedAttribute(state, dialog, "aria-labelledby", null);
+    setOwnedAttribute(state, dialog, "aria-label", label);
     return;
   }
 
   const title = dialog.querySelector(DIALOG_TITLE_SELECTOR);
+  if (ownsLabel) setOwnedAttribute(state, dialog, "aria-label", null);
   if (title) {
-    dialog.setAttribute("aria-labelledby", ensureId(title, "dialog-title"));
+    setOwnedAttribute(state, dialog, "aria-labelledby", ensureId(title, "dialog-title", state));
+  } else if (ownsLabelledby) {
+    setOwnedAttribute(state, dialog, "aria-labelledby", null);
   }
 }
 
@@ -262,13 +299,19 @@ export function closeDialog(dialog, returnValue = "") {
 export function requestDialogClose(dialog, returnValue = "") {
   if (!isDialogElement(dialog) || !dialog.open) return;
 
-  if (typeof dialog.requestClose === "function") {
-    ensureDialogWired(dialog).returnValue = returnValue;
-    dialog.requestClose(returnValue);
-    return;
+  const state = ensureDialogWired(dialog);
+  state.returnValue = returnValue;
+  state.requestingClose = true;
+  try {
+    if (typeof dialog.requestClose === "function") {
+      dialog.requestClose(returnValue);
+    } else {
+      // Older browsers still owe consumers the same cancel lifecycle.
+      dialog.dispatchEvent(new Event("cancel", { cancelable: true }));
+    }
+  } finally {
+    state.requestingClose = false;
   }
-
-  closeDialog(dialog, returnValue);
 }
 
 export function openDialog(dialog, trigger = null, forcedModal = null) {
@@ -276,7 +319,7 @@ export function openDialog(dialog, trigger = null, forcedModal = null) {
 
   const state = ensureDialogWired(dialog);
   const modal = resolveModalMode(dialog, forcedModal);
-  syncDialogSemantics(dialog, modal);
+  syncDialogSemantics(dialog, state, modal);
 
   state.closing = false;
   state.restoreFocusTo = trigger || dialog.ownerDocument.activeElement;
@@ -285,6 +328,7 @@ export function openDialog(dialog, trigger = null, forcedModal = null) {
   // while doing so; capture the position first and restore it so the page does
   // not jump to the top behind the modal.
   const viewport = dialog.ownerDocument.defaultView;
+  const scrollX = viewport?.scrollX ?? 0;
   const scrollY = viewport?.scrollY ?? 0;
 
   if (modal) {
@@ -295,17 +339,33 @@ export function openDialog(dialog, trigger = null, forcedModal = null) {
     state.modalOpen = false;
   }
 
-  if (scrollY > 0) {
-    viewport?.scrollTo(0, scrollY);
+  if (scrollX !== 0 || scrollY > 0) {
+    viewport?.scrollTo(scrollX, scrollY);
   }
 
   syncModalOpenClass(dialog.ownerDocument);
 }
 
+function handleDialogPointerDown(event) {
+  const dialog = event.currentTarget;
+  const state = dialogMap.get(dialog);
+  if (!state) return;
+
+  // Only a press that starts on the backdrop may dismiss on click. A
+  // text selection started inside the dialog and released over the backdrop
+  // produces a click on <dialog> with outside coordinates, which must not
+  // close (or flash static on) the dialog.
+  state.backdropPress = event.target === dialog && isOutsideDialog(dialog, event);
+}
+
 function handleDialogClick(event) {
   const dialog = event.currentTarget;
+  const state = dialogMap.get(dialog);
+  const backdropPress = state?.backdropPress === true;
+  if (state) state.backdropPress = false;
 
   if (event.target !== dialog || !isOutsideDialog(dialog, event)) return;
+  if (!backdropPress) return;
 
   // A native closedby="any" dialog owns its light dismiss; the runtime only
   // takes over when the author opted in via data-dialog-dismissible (which
@@ -338,7 +398,15 @@ function handleDialogCancel(event) {
   const dialog = event.currentTarget;
   const state = dialogMap.get(dialog);
 
-  // Escape and close requests always close, whatever the dismissible flag:
+  // Older dialogs may dispatch cancel for Escape without implementing
+  // closedBy. Explicit requestDialogClose() remains available to close them.
+  const closedBy = "closedBy" in dialog ? dialog.closedBy : dialog.getAttribute("closedby");
+  if (closedBy === "none" && !state?.requestingClose) {
+    event.preventDefault();
+    return;
+  }
+
+  // Escape and close requests close regardless of the dismissible flag:
   // data-dialog-dismissible only gates light dismiss (backdrop click, handled
   // in handleDialogClick). Applications intercept via actual:dialog-cancel.
   const request = new CustomEvent(EVENTS.dialogCancel, {
@@ -395,15 +463,19 @@ function ensureDialogWired(dialog) {
     controller,
     closing: false,
     modalOpen: isModalOpen(dialog),
+    ownedAttributes: [],
+    requestingClose: false,
     restoreFocusTo: null,
     returnValue: "",
     staticTimer: null,
+    backdropPress: false,
   };
 
   // A dialog that is already `open` in the markup is non-modal per spec,
   // whatever data-dialog-modal says; infer semantics from its actual state.
-  syncDialogSemantics(dialog, dialog.open ? isModalOpen(dialog) : isModal(dialog));
+  syncDialogSemantics(dialog, state, dialog.open ? isModalOpen(dialog) : isModal(dialog));
 
+  dialog.addEventListener("pointerdown", handleDialogPointerDown, { signal: controller.signal });
   dialog.addEventListener("click", handleDialogClick, { signal: controller.signal });
   dialog.addEventListener("submit", handleDialogSubmit, { signal: controller.signal });
   dialog.addEventListener("cancel", handleDialogCancel, { signal: controller.signal });
@@ -414,7 +486,7 @@ function ensureDialogWired(dialog) {
   // closedby keeps its native meaning — "any" closes on backdrop click,
   // "closerequest" on Escape, "none" disables both. Never override "none".
   if (isDismissible(dialog) && "closedBy" in dialog && dialog.closedBy === "any") {
-    dialog.closedBy = "closerequest";
+    setOwnedAttribute(state, dialog, "closedby", "closerequest");
   }
 
   dialogMap.set(dialog, state);
@@ -437,6 +509,7 @@ function disconnectDialog(dialog) {
 
   state.controller.abort();
   dialog.classList.remove(CLASSES.static);
+  restoreOwnedAttributes(state);
   state.modalOpen = false;
   dialogMap.delete(dialog);
   wiredDialogs.delete(dialog);
@@ -448,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, {