actual-css 0.4.2 → 0.6.0

package/src/css/core/variants.css

@@ -1,8 +1,8 @@
 /*
  * Cross-cutting variant token mapping.
  *
- * Variant scope: .solid/.soft/.outline set --ui-* for components that opt into
- * shared variants. .inverted is a surface modifier, not a variant: it paints
+ * Variant scope: .solid/.soft/.outline/.surface set --ui-* for components that
+ * opt into shared variants. .inverted is a surface modifier, not a variant: it paints
  * the element directly (background/color/border-color) so it works on any bare
  * block, and remaps the shared --ui-* tokens so participating components
  * (.card, .navbar, .alert, .badge) invert through their own rules. Loaded
@@ -21,8 +21,10 @@
  * components may consume --density-* when the density context should affect
  * their local rhythm. Compact components may consume --density-compact-size.
  * Components with bespoke sizing (spinner, avatar) define local .sm/.lg;
- * applying .sm/.lg to card, dialog, accordion, navbar, table is
- * a no-op.
+ * applying .sm/.lg to card, dialog, accordion, navbar, table, progress, meter
+ * is a no-op. Progress and meter are deliberate: a bar keeps its inline size
+ * and only changes thickness, which --bar-height expresses better than a
+ * three-step scale.
  *
  * Intent list source of truth: intents.css. Components consume --intent* tokens
  * instead of re-listing intent classes.
@@ -45,6 +47,17 @@
   --ui-border: var(--intent, currentColor);
 }
 
+/* Neutral chrome, intent only in the ink: the page surface with the theme
+   border. .soft is the intent-tinted treatment (its baseline fallback uses
+   --surface-subtle) and .outline has no fill at all, so neither can express
+   it. Deliberately literal — no color-mix enhancement — so this stays the one
+   variant that reads exactly as the theme's own surface. */
+.surface {
+  --ui-bg: var(--surface);
+  --ui-fg: var(--intent, var(--text));
+  --ui-border: var(--border);
+}
+
 /* Inverse surface treatment. Paints the element directly (so it works on any
    bare block) and remaps the shared --ui-* tokens so opt-in components
    (.card, .navbar) invert through their own rules. Because this loads before

package/src/css/effects/aura.css

@@ -1,12 +1,23 @@
 /*
  * Decorative intent-colored frame for one direct child.
  *
+ * The effect is built from three layers with distinct roles: a frame carrying
+ * a short accent of light, a small halo that belongs to the frame and keeps
+ * that light attached to the edge, and a wide static halo that belongs to the
+ * object and gives it a permanent, diffuse presence. Only the small halo
+ * follows the animated gradient, so a rotating aura repaints one blurred layer
+ * per frame, not two.
+ *
  * Public hooks:
  * --aura-color
  * --aura-width
  * --aura-blur
+ * --aura-intensity
  * --aura-radius
  * --aura-duration
+ *
+ * Internal:
+ * --aura-angle
  */
 @property --aura-angle {
   syntax: "<angle>";
@@ -23,7 +34,8 @@
 .aura {
   --aura-color: var(--intent, var(--primary));
   --aura-width: 2px;
-  --aura-blur: 0.75rem;
+  --aura-blur: 0.25rem;
+  --aura-intensity: 1;
   --aura-radius: var(--radius-lg);
   --aura-duration: 6s;
 
@@ -34,9 +46,19 @@
   border-radius: calc(var(--aura-radius) + var(--aura-width));
   border: var(--border-width) solid transparent;
   background: var(--aura-color);
-  background: conic-gradient(from var(--aura-angle), transparent 0 65%, var(--aura-color));
+
+  /* A short feathered accent rather than a long wedge with a hard edge, which
+     reads as one lit side. Nothing tints the frame outside it: a constant tint
+     across 2px draws an outline, the opposite of the effect. */
+  background: conic-gradient(
+    from var(--aura-angle),
+    transparent 0 78%,
+    var(--aura-color) 93%,
+    transparent
+  );
 }
 
+/* Near halo — inherits the frame gradient, so it tracks the lit accent. */
 .aura::before {
   position: absolute;
   z-index: -1;
@@ -44,15 +66,40 @@
   border-radius: inherit;
   background: inherit;
   filter: blur(var(--aura-blur));
-  opacity: 0.45;
+  opacity: calc(0.55 * var(--aura-intensity));
   pointer-events: none;
   content: "";
 }
 
+/* Far halo — flat and static. At this blur the rotating detail is no longer
+   legible, so there is nothing to gain from animating a second wide blurred
+   layer. It outgrows the frame, otherwise the child covers it and the whole
+   effect reads as a drop shadow. This is the layer that stays lit at all
+   times, so it — not the frame — is what keeps the object present between two
+   passes of the accent. */
+.aura::after {
+  position: absolute;
+  z-index: -1;
+  inset: calc(-1 * var(--aura-blur));
+  border-radius: calc(var(--aura-radius) + var(--aura-width) + var(--aura-blur));
+  background: var(--aura-color);
+  filter: blur(calc(var(--aura-blur) * 4));
+  opacity: calc(0.15 * var(--aura-intensity));
+  pointer-events: none;
+  content: "";
+}
+
+/* Lifts the child above both halos. It also has to be opaque: the frame paints
+   across the whole box and only its edge is meant to show, so a transparent
+   child (an .outline alert, a .ghost button) is filled with the frame color
+   rather than framed by it. Documented as a constraint, not worked around —
+   masking a ring would cost more than the case is worth. */
 .aura > * {
   position: relative;
 }
 
+/* Glow lights the whole perimeter instead of a short accent, so both halos
+   become a single soft field around the child. */
 .aura-glow {
   background: var(--aura-color);
 }
@@ -61,6 +108,29 @@
   .aura:not(.aura-glow) {
     animation: aura-rotate var(--aura-duration) linear infinite;
   }
+
+  /* Both halos breathe: moving the near one alone changes a line's brightness,
+     which barely registers. Opening the wide field with it is what reads as a
+     breath. */
+  .aura-glow::before {
+    animation: aura-breathe-near var(--aura-duration) ease-in-out infinite;
+  }
+
+  .aura-glow::after {
+    animation: aura-breathe-far var(--aura-duration) ease-in-out infinite;
+  }
+}
+
+/* Without motion the accent would freeze at an arbitrary angle and read as a
+   broken animation, so it becomes a deliberate composition: two opposite
+   corners. Fixed radii keep those corners stable across aspect ratios;
+   proportional radii turn wide or tall elements into lit edges instead. */
+@media (prefers-reduced-motion: reduce) {
+  .aura:not(.aura-glow) {
+    background:
+      radial-gradient(4rem 4rem at 0% 0%, var(--aura-color), transparent 70%),
+      radial-gradient(4rem 4rem at 100% 100%, var(--aura-color), transparent 70%);
+  }
 }
 
 @keyframes aura-rotate {
@@ -69,16 +139,36 @@
   }
 }
 
-@supports selector(:has(*)) {
-  .aura:has(> .btn) {
-    --aura-radius: var(--radius);
+/* Only the peak is declared, so each halo breathes up from its own resting
+   opacity and never dips below the static glow. The peaks scale with the same
+   intensity as the resting values, which keeps the breath proportional at
+   every setting. */
+@keyframes aura-breathe-near {
+  50% {
+    opacity: calc(0.95 * var(--aura-intensity));
+    transform: scale(1.03);
   }
+}
 
-  .aura:has(> :is(.card, .alert)) {
-    --aura-radius: var(--radius-lg);
+@keyframes aura-breathe-far {
+  50% {
+    opacity: calc(0.28 * var(--aura-intensity));
+    transform: scale(1.07);
   }
+}
 
-  .aura:has(> .badge) {
-    --aura-radius: var(--radius-full);
-  }
+/* Each rule is a lone :has() setting a decorative radius, so a browser without
+   :has() simply drops it and keeps the default. No @supports needed — that
+   guard only earns its place around a selector list that mixes :has() with
+   selectors worth keeping. */
+.aura:has(> .btn) {
+  --aura-radius: var(--radius);
+}
+
+.aura:has(> :is(.card, .alert)) {
+  --aura-radius: var(--radius-lg);
+}
+
+.aura:has(> .badge) {
+  --aura-radius: var(--radius-full);
 }

package/src/css/forms/custom-select.css

@@ -24,7 +24,7 @@
 
       &::picker(select) {
         appearance: base-select;
-        max-height: min(24rem, calc(var(--viewport-block) * 0.7));
+        max-block-size: min(24rem, calc(var(--viewport-block) * 0.7));
         margin-block: var(--space-20);
         padding: 0;
         border: var(--border-width) solid var(--border);

package/src/css/forms/floating-field.css

@@ -7,8 +7,10 @@
  * messages stay in the surrounding .field, not inside the cell, so the
  * resting label can center on the control alone.
  *
- * The control must precede the label: the float is driven by the sibling
- * combinator and :placeholder-shown. Every .input/.textarea needs
+ * The control must precede the label: the float is driven by the general
+ * sibling combinator and :placeholder-shown. Injected nodes may appear between
+ * the control and the label (password managers, extension wrappers); the cell
+ * contract stays a single control plus one label. Every .input/.textarea needs
  * placeholder=" " to expose a reliable empty state — without it the label
  * only reacts to focus.
  *
@@ -56,14 +58,14 @@
 }
 
 /* Single-line controls rest in the middle until they receive a value. */
-.floating-field > :is(.input, .select) + .field-label {
+.floating-field > :is(.input, .select) ~ .field-label {
   inset-block-start: 50%;
   transform: translateY(-50%);
 }
 
 /* An empty textarea label follows the control's normal first-line position;
    the control itself keeps the extra headroom reserved for its floated state. */
-.floating-field > .textarea + .field-label {
+.floating-field > .textarea ~ .field-label {
   inset-block-start: calc(1em + var(--border-width));
   transform: none;
 }
@@ -72,7 +74,7 @@
    not have propagated the value to the placeholder state yet. */
 .floating-field
   > :is(.input, .textarea):is(:focus, :autofill, :not(:placeholder-shown))
-  + .field-label {
+  ~ .field-label {
   inset-block-start: var(--floating-label-top);
   transform: none;
   font-size: var(--font-size-xs);
@@ -91,7 +93,7 @@
     .input[type="month"],
     .input[type="week"]
   )
-  + .field-label {
+  ~ .field-label {
   inset-block-start: var(--floating-label-top);
   transform: none;
   font-size: var(--font-size-xs);

package/src/css/forms/form.css

@@ -4,6 +4,10 @@
  * Individual controls keep their own files; .choice label layout lives in
  * choice.css; .form-actions lives in form-actions.css.
  *
+ * .field-group owns its own box only. Distance between sibling groups is a
+ * composition concern (.stack on the form), never a sibling margin here: the
+ * component cannot know whether its siblings are stacked or gridded.
+ *
  * Public API: .field, .field-label, .field-help, .field-error, .field-group,
  * .required-mark.
  *
@@ -24,10 +28,6 @@
   border-radius: var(--radius);
 }
 
-.field-group + .field-group {
-  margin-block-start: var(--space-40);
-}
-
 .field-label,
 .field-group > legend {
   color: var(--text);

package/src/css/layout/container-query.css

@@ -1,15 +1,39 @@
-/* Convenience helper: establishes a query container named actual-grid for
-   descendants. Use it for a component that changes representation according
-   to its allocated inline size, and to give .grid-N the named context it needs
-   for balanced subdivision (see grid.css). The name matters: grids only respond
-   to an explicitly actual-grid-named container, never to an incidental
-   query container. Layout primitives are responsive without it; this adds
-   precision, it is never a prerequisite.
-
-   The element takes inline-size containment, so put it on a normal
-   block-level wrapper, never on a shrink-to-fit item (a .cluster child, a
-   float, an inline-block): its contents would stop contributing to its own
-   inline size and it would collapse. */
+/* Convenience helper for size-aware components: establishes an inline-size
+   query container named actual-container. The name is the contract, not this
+   class — an author can declare `container: actual-container / inline-size` on
+   their own region and get the same result.
+
+   actual-container is shared. Granting it to a region may enable size-aware
+   enhancements for any Actual component inside that region, not only the one
+   that motivated the container: .grid-N reads it for balanced subdivision,
+   .steps for its label collapse, and future components will read the same
+   context. That is the scope of the API, not a caveat.
+
+   An anonymous query container is not part of it. A region that declares
+   `container-type: inline-size` for the application's own purposes carries no
+   actual-container name, so no framework component changes behaviour there.
+   Opting into the protocol is always explicit. Nothing here is a prerequisite
+   either — every primitive is responsive without it; this adds precision.
+
+   Place it where the width you want measured lives: usually a wrapper for a
+   grid, whose queried children sit inside it, and the component itself for
+   .steps, whose own row is the width in question.
+
+   The rule for where it is safe is the containment rule, not a list of
+   primitives. Query containment removes the element's intrinsic inline-size
+   contribution, so:
+
+     safe    the element's width is imposed by its context
+             (.steps sets inline-size: 100%, so it survives even as a
+             .cluster child — it wraps and fills)
+
+     unsafe  the element's width depends on its contents' intrinsic
+             contribution (a bare .grid child of .cluster measures 0 once
+             contained, as does a float, inline-block, table, grid auto track,
+             max-content parent, or an abspos box sized by its contents)
+
+   So .cluster is neither safe nor unsafe; what matters is where the child's
+   width comes from. */
 .container-query {
-  container: actual-grid / inline-size;
+  container: actual-container / inline-size;
 }

package/src/css/layout/grid.css

@@ -86,13 +86,13 @@
   min-inline-size: 0;
 }
 
-/* Balanced subdivision, activated by an ancestor container named actual-grid.
+/* Balanced subdivision, activated by an ancestor container named actual-container.
  * A .grid-N inside such a container enters only divisor states of N. The name
  * is deliberate: a grid must not key off the nearest anonymous query container,
  * or a region that sets container-type: inline-size for an unrelated reason
  * would silently change the grid. The author opts the grid in by naming the
  * context — .container-query is the official helper, or declare
- * container: actual-grid / inline-size on your own region.
+ * container: actual-container / inline-size on your own region.
  *
  *   .grid-2   2 -> 1
  *   .grid-3   3 -> 1
@@ -109,7 +109,7 @@
  * inline contribution and collapses it inside .cluster, .topbar, floats, and
  * any shrink-to-fit box. See docs/design-notes/grid.md.
  *
- * Without an actual-grid ancestor none of these @container rules resolve, so
+ * Without an actual-container ancestor none of these @container rules resolve, so
  * the auto-fill baseline above stays. The min-width: 0 rule is the lowest
  * step: it pins the grid to one column inside a container before any larger
  * threshold fires (a bare grid would otherwise show a 2 + 1 orphan at 28-48rem).
@@ -125,25 +125,25 @@
  * Ascending min-width only: the last matching step wins by cascade order.
  */
 @supports (container-type: inline-size) {
-  @container actual-grid (min-width: 0px) {
+  @container actual-container (min-width: 0px) {
     :where(.grid-2, .grid-3, .grid-4, .grid-6) {
       grid-template-columns: 1fr;
     }
   }
 
-  @container actual-grid (min-width: 28rem) {
+  @container actual-container (min-width: 28rem) {
     :where(.grid-2, .grid-4, .grid-6) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
 
-  @container actual-grid (min-width: 48rem) {
+  @container actual-container (min-width: 48rem) {
     :where(.grid-3, .grid-6) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
 
-  @container actual-grid (min-width: 64rem) {
+  @container actual-container (min-width: 64rem) {
     :where(.grid-4) {
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }

package/src/css/layout/index.css

@@ -14,7 +14,7 @@
  * .sidebar-layout main content + secondary aside
  * .grid           responsive collection; item width is the contract
  *  .grid-N         structural density of N; balanced inside a container named
- *                  actual-grid (in grid.css)
+ *                  actual-container (in grid.css)
  * .column-layout  explicit 12-column region composition; the author owns
  *                 narrow-container recomposition
  * .scroller       theme-aware scrollbar density and colour

package/src/css/typography/prose.css

@@ -83,9 +83,8 @@
   font-size: var(--prose-h4);
 }
 
-/* Link ink defaults to --primary. --link is an optional escape hatch: a
-   theme whose primary is too light or too vivid to read as inline text sets
-   it without having to restate the rule. */
+/* --link is a theme-level token (core/base.css also reads it for bare links);
+   prose falls back to --primary so a theme that never sets it is unaffected. */
 .prose :where(a) {
   color: var(--link, var(--primary));
   text-decoration-line: underline;

package/src/css/utilities/base.css

@@ -18,6 +18,22 @@
   border: 0;
 }
 
+/* Enlarge a small control's touch target on touch-primary devices without
+   growing the visual. Opt-in — apply to genuinely small targets only. The
+   ::after exists only under (pointer: coarse), so on fine pointers the class
+   is fully neutral. */
+@media (pointer: coarse) {
+  .touch-target {
+    position: relative;
+  }
+
+  .touch-target::after {
+    content: "";
+    position: absolute;
+    inset: calc(var(--space-20) * -1);
+  }
+}
+
 .overflow-auto {
   overflow: auto;
 }

package/src/js/password.js

@@ -92,7 +92,7 @@ if (typeof document !== "undefined") {
   submitRoots.add(document);
   document.addEventListener("submit", handleSubmit);
 
-  window.addEventListener("pagehide", () => {
+  document.defaultView?.addEventListener("pagehide", () => {
     for (const input of revealed) {
       // Opportunistic housekeeping: an input removed from the DOM before
       // navigation no longer needs reverting and can leave the set.

package/src/js/selectors.js

@@ -25,6 +25,7 @@ export const CLASSES = {
   // for aria-invalid/danger state. Optional — degrades to no-op.
   field: "field",
   // surface.js — state class on the open flyout/menu/dialog surface.
+  // status.js writes the same class on the status bar while a message shows.
   open: "is-open",
   // surface.js — state class while the surface renders as a mobile sheet.
   sheet: "is-sheet",

package/src/js/status.js

@@ -2,8 +2,15 @@
  * Status — singleton floating status bar.
  *
  * A status bar is a transient, non-critical feedback area. Keep one element in
- * the HTML, empty by default; JavaScript only updates its text content. It is
- * hidden visually when empty but stays available as a live region.
+ * the HTML, empty by default; JavaScript writes its text content and toggles
+ * the shared `.is-open` state class, which is the visual state the CSS
+ * animates. The element itself is never hidden, so it stays a live region.
+ *
+ * Showing and clearing are asymmetric on purpose. A show writes content first
+ * and opens after; a clear only closes, and empties content and intent once the
+ * exit transition has finished, so the bar leaves in the state it was shown in
+ * rather than collapsing to a neutral empty pill mid-animation. An empty
+ * message is a clear, not a blank pill.
  *
  * Importing the module auto-wires it to Actual's validation: a form that fails
  * to submit shows its data-validation-message in the status bar. The bar is a
@@ -39,17 +46,62 @@
 
 import { registerCommands, targetFor } from "./command.js";
 import { EVENTS } from "./events.js";
+import { CLASSES } from "./selectors.js";
+import { waitForTransitions } from "./transition.js";
 
 const STATUS_SELECTOR = '[data-status][role="status"]';
 const STATUS_CLASSES_ATTR = "statusClasses";
+const VIEWPORT_OFFSET_PROPERTY = "--status-viewport-offset";
 
 let statusTimer;
+// Bumped by every show and every clear. A deferred exit cleanup only runs when
+// its own generation is still current, so a message that arrives mid-exit is
+// never emptied by the previous message's cleanup.
+let statusGeneration = 0;
+let viewportTracker = null;
 
 function statusTarget() {
   if (typeof document === "undefined") return null;
   return document.querySelector(STATUS_SELECTOR);
 }
 
+// The bar is fixed to the layout viewport, so the mobile software keyboard
+// covers it. visualViewport reports the occluded band; the CSS adds it to the
+// bottom inset. Tracking runs only while a message is on screen.
+function trackViewport(target) {
+  if (viewportTracker?.target === target) return;
+  releaseViewport();
+
+  const view = target.ownerDocument?.defaultView;
+  const viewport = view?.visualViewport;
+  if (!viewport) return;
+
+  const controller = new AbortController();
+  const update = () => {
+    // Self-heal: an app that drops the bar while a message is up never reaches
+    // the clear() path, so the tracker would outlive its element.
+    if (!target.isConnected) {
+      releaseViewport();
+      return;
+    }
+    const occluded = Math.max(0, view.innerHeight - viewport.height - viewport.offsetTop);
+    target.style.setProperty(VIEWPORT_OFFSET_PROPERTY, `${occluded}px`);
+  };
+
+  viewport.addEventListener("resize", update, { signal: controller.signal });
+  viewport.addEventListener("scroll", update, { signal: controller.signal });
+  update();
+
+  viewportTracker = { target, stop: () => controller.abort() };
+}
+
+function releaseViewport() {
+  if (!viewportTracker) return;
+  viewportTracker.stop();
+  viewportTracker.target.style.removeProperty(VIEWPORT_OFFSET_PROPERTY);
+  viewportTracker = null;
+}
+
 function intentClasses(value) {
   return typeof value === "string" ? value.trim().split(/\s+/).filter(Boolean) : [];
 }
@@ -66,7 +118,17 @@ export function status(message, options = {}) {
   const target = statusTarget();
   if (!target || message == null) return;
 
+  // A live region with nothing to announce is not a message. `:empty` used to
+  // absorb this case for free; now that the open state is explicit, an empty
+  // message has to mean "close" or it would open a blank pill. This also keeps
+  // status(await response.text()) from leaving a stale message on screen.
+  if (message === "") {
+    status.clear();
+    return;
+  }
+
   clearTimeout(statusTimer);
+  statusGeneration++;
 
   clearIntentClasses(target);
   const intent = intentClasses(options.intent);
@@ -75,7 +137,11 @@ export function status(message, options = {}) {
     target.dataset[STATUS_CLASSES_ATTR] = intent.join(" ");
   }
 
+  // Content and intent are in place before the bar opens, so it enters at its
+  // final size and color.
   target.textContent = message;
+  target.classList.add(CLASSES.open);
+  trackViewport(target);
 
   if (options.duration !== false) {
     statusTimer = setTimeout(() => status.clear(), options.duration ?? 3000);
@@ -83,12 +149,26 @@ export function status(message, options = {}) {
 }
 
 status.clear = function clear() {
+  clearTimeout(statusTimer);
+
   const target = statusTarget();
-  if (target) {
+  if (!target) {
+    // No bar to animate out — but one may have been removed while open, and its
+    // viewport listeners and element reference still have to go.
+    releaseViewport();
+    return;
+  }
+
+  const generation = ++statusGeneration;
+  target.classList.remove(CLASSES.open);
+
+  waitForTransitions(target).then(() => {
+    // A show during the exit owns the bar now; leave its message alone.
+    if (generation !== statusGeneration) return;
     target.textContent = "";
     clearIntentClasses(target);
-  }
-  clearTimeout(statusTimer);
+    releaseViewport();
+  });
 };
 
 const STATUS_SHOW_COMMANDS = ["--status"];
@@ -125,8 +205,9 @@ if (typeof document !== "undefined") {
   // importing this module. A message shows it; omitting one clears it.
   document.addEventListener(EVENTS.status, (event) => {
     const { message, intent, duration } = event.detail ?? {};
-    // `message != null` keeps "" (an intentional empty message) on the show
-    // path, consistent with status() itself; an absent message clears.
+    // An absent message clears here; "" reaches status() and closes there. Both
+    // paths end in the same exit, so a detail that lost its message never
+    // strands a stale one on screen.
     if (message != null) {
       status(message, { intent, duration });
     } else {

package/src/js/surface.js

@@ -4,6 +4,7 @@ import { EVENTS } from "./events.js";
 import { autoUpdate, reposition, repositionAt } from "./floating.js";
 
 import { CLASSES } from "./selectors.js";
+import { waitForTransitions } from "./transition.js";
 
 const openSurfaces = new Set();
 const surfaceMap = new WeakMap();
@@ -46,16 +47,6 @@ function reaperFor(menu) {
   return reaper;
 }
 
-function waitForAnimations(...elements) {
-  const animations = elements
-    .filter(Boolean)
-    .flatMap((el) =>
-      typeof el.getAnimations === "function" ? el.getAnimations({ subtree: true }) : [],
-    );
-
-  return Promise.allSettled(animations.map((animation) => animation.finished));
-}
-
 function getSurfaceRoot(menu, anchor) {
   return anchor?.closest("dialog") || menu.closest("dialog") || menu.ownerDocument.body;
 }
@@ -360,7 +351,7 @@ export function closeSurface(menu, opts = {}) {
     state.restoreFocusTo.focus({ preventScroll: true });
   }
 
-  waitForAnimations(menu, backdrop).then(() => {
+  waitForTransitions(menu, backdrop).then(() => {
     if (!state || state.closeId !== closeId) return;
     state.isSheet = false;
     menu.classList.remove(CLASSES.sheet);