actual-css 0.6.0 → 0.8.0

package/src/css/forms/select.css

@@ -7,20 +7,40 @@
  * the CSS chevron, so the picker (appearance: base-select) enhancement in
  * custom-select.css can be opted out independently. Add .native to a specific
  * select to opt out of the enhancement.
+ *
+ * Public hooks:
+ * --select-icon-size
  */
-.select:not([multiple], [size]:not([size="1"])) {
+/* --select-icon-size is typographic (em), so the reserved slot and the
+   pictogram scale with the control's font size, not a fixed rem sliver. */
+.select:not(:is([multiple], [size]:not([size="1"]))) {
+  --select-icon-size: 1em;
+
   appearance: none;
-  padding-inline-end: calc(var(--space-30) + var(--space-60));
+  -webkit-appearance: none;
+  padding-inline-end: calc(var(--control-pad-x) * 2 + var(--select-icon-size));
   background-image: var(--icon-chevron);
-  background-position: center right var(--space-30);
-  background-size: 1rem auto;
+  background-position: center right var(--control-pad-x);
+  background-size: var(--select-icon-size) auto;
   background-repeat: no-repeat;
 }
 
 /* The chevron sits on the inline-end side; flip it in RTL so it follows
-   the padding-inline-end space reserved for it. */
-.select:not([multiple], [size]:not([size="1"])):dir(rtl) {
-  background-position: center left var(--space-30);
+   the padding-inline-end space reserved for it. Safari before 16.4 has no
+   :dir(); the ancestor-attribute path is the Degraded-tier fallback and the
+   :dir() rules are dropped on their own there. :dir() follows inherited
+   directionality, so the explicit ltr rule neutralizes an outer RTL fallback
+   for a nested direction change. */
+[dir="rtl"] .select:not(:is([multiple], [size]:not([size="1"]))) {
+  background-position: center left var(--control-pad-x);
+}
+
+.select:not(:is([multiple], [size]:not([size="1"]))):dir(ltr) {
+  background-position: center right var(--control-pad-x);
+}
+
+.select:not(:is([multiple], [size]:not([size="1"]))):dir(rtl) {
+  background-position: center left var(--control-pad-x);
 }
 
 /* Both forced-colors and prefers-contrast hand the arrow back to the
@@ -28,9 +48,9 @@
    simpler than maintaining contrast variants, and native rendering already
    matches whatever contrast mode the user picked. */
 @media (forced-colors: active), (prefers-contrast: more) {
-  .select:not([multiple], [size]:not([size="1"])) {
+  .select:not(:is([multiple], [size]:not([size="1"]))) {
     appearance: auto;
     background-image: none;
-    padding-inline-end: var(--space-30);
+    padding-inline-end: var(--control-pad-x);
   }
 }

package/src/css/forms/switch.css

@@ -65,6 +65,7 @@
   border-radius: var(--radius-full);
   background: var(--switch-bg);
   appearance: none;
+  -webkit-appearance: none;
   cursor: pointer;
 }
 
@@ -85,14 +86,17 @@
     background-color var(--duration);
 }
 
-.switch:hover:not(:disabled) {
+/* Hover is not selected: an unchecked switch keeps the brand fallback on hover,
+   so a theme that separates --primary from --state-selected never tints an
+   OFF control with the selection accent before it is checked. */
+.switch:not(:checked):hover:not(:disabled) {
   --switch-border: var(--intent, var(--primary));
 }
 
 .switch:checked {
-  --switch-bg: var(--intent, var(--primary));
-  --switch-border: var(--intent, var(--primary));
-  --switch-knob: var(--intent-fg, var(--primary-fg));
+  --switch-bg: var(--intent, var(--state-selected));
+  --switch-border: var(--intent, var(--state-selected));
+  --switch-knob: var(--intent-fg, var(--state-selected-fg));
 }
 
 .switch:checked::before {
@@ -100,7 +104,17 @@
 }
 
 /* The knob travels toward inline-end; in RTL that is leftward, so the
-    translateX sign flips. translateX is physical, not logical. */
+    translateX sign flips. translateX is physical, not logical. Safari before
+    16.4 has no :dir(); the ancestor-attribute path is the Degraded-tier
+    fallback and the :dir() rules are dropped on their own there. */
+[dir="rtl"] .switch:checked::before {
+  transform: translateX(calc(var(--switch-travel) * -1));
+}
+
+.switch:checked:dir(ltr)::before {
+  transform: translateX(var(--switch-travel));
+}
+
 .switch:checked:dir(rtl)::before {
   transform: translateX(calc(var(--switch-travel) * -1));
 }

package/src/css/layout/app-layout.css

@@ -83,7 +83,7 @@
     text-align: start;
   }
 
-  /* Side navigation no longer occupies the viewport's bottom safe area. */
+  /* In the side layout the FAB owns the viewport's bottom safe-area inset. */
   .app-layout > .fab {
     margin-block-end: max(var(--fab-offset), env(safe-area-inset-bottom));
   }

package/src/css/layout/grid.css

@@ -3,7 +3,7 @@
  *
  * .grid is space-driven: it fits as many tracks as --grid-min allows.
  * .grid-N is count-driven: it declares a structural density of N and collapses
- * through natural divisors of N (see the subdivision block below).
+ * through natural divisors of N.
  *
  * Public hooks:
  * --grid-min
@@ -14,22 +14,15 @@
  *
  * Child contract: each direct child is a grid item placed in the tracks the
  * recipe generates.
+ *
+ * Choosing between these and the other layout primitives:
+ * docs/pages/layout/grid.md. Why divisors, why a *named* container, and how
+ * the thresholds were arrived at: docs/design-notes/grid.md.
  */
 
-/* --grid-columns replaces the intrinsic auto-fit template: once set, the
-   grid no longer collapses on its own — the author owns narrow-container
-   collapse. Prefer .sidebar-layout for content + aside layouts; reserve
-   --grid-columns for exact custom track templates. */
-
-/* Recipe:
-   - collection whose item width is the contract -> .grid, tune --grid-min
-   - collection whose column density is the contract -> .grid-2/3/4/6
-   - balanced subdivision of that density -> place it inside any size query
-     container (.container-query is the convenience helper for that context)
-   - peer regions that switch as a group -> .switcher
-   - content + aside -> .sidebar-layout
-   - exact custom track templates -> --grid-columns with an explicit collapse
-     rule of your own */
+/* --grid-columns replaces the intrinsic auto-fit template: once set, the grid
+   no longer collapses on its own and the author owns narrow-container
+   collapse. */
 .grid {
   display: grid;
   gap: var(--gap);
@@ -39,16 +32,14 @@
     );
 }
 
-/* Structural density presets. The baseline is an auto-fill grid bounded at N
-   tracks: responsive and overflow-safe on its own, so a preset used without a
-   query container is never a trap — it simply reaches its balanced states less
-   precisely. auto-fill rather than auto-fit keeps item width stable when a
-   partial final page holds fewer items than the grid's capacity.
+/* Baseline: auto-fill bounded at N, so a preset is responsive and
+   overflow-safe with no wrapper at all. auto-fill rather than auto-fit keeps
+   item width stable when a partial final page holds fewer items than the
+   grid's capacity.
 
-   --grid-min is deliberately NOT read here. The subdivision below runs on
-   @container thresholds, which cannot resolve a custom property, so a hook
-   honored in the baseline would fall silent the moment a query container is
-   added. Item width is .grid's contract; column density is .grid-N's. */
+   --grid-min is deliberately NOT read here: @container thresholds cannot
+   resolve a custom property, so a hook honored in the baseline would fall
+   silent the moment a query container is added. */
 :where(.grid-2, .grid-3, .grid-4, .grid-6) {
   display: grid;
   gap: var(--gap);
@@ -77,79 +68,62 @@
   --grid-count: 6;
 }
 
-/* Grid items keep an automatic minimum inline size (min-content), which can
-   overflow a track sized minmax(0, 1fr). Layout primitives remove that
-   intrinsic floor so their overflow-safe track sizing holds; authors only
-   need .min-inline-size-0 outside primitives that do not already remove this
-   floor. */
+/* Grid items keep an automatic min-content floor that can overflow a
+   minmax(0, 1fr) track. Layout primitives remove it so their overflow-safe
+   track sizing holds; .min-inline-size-0 is for the ones that do not. */
 :where(.grid, .grid-2, .grid-3, .grid-4, .grid-6) > * {
   min-inline-size: 0;
 }
 
-/* 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-container / inline-size on your own region.
+/* Balanced subdivision, keyed on an ancestor container *named*
+ * actual-container — never an anonymous one, so a region that sets
+ * container-type: inline-size for an unrelated reason cannot change a grid.
  *
  *   .grid-2   2 -> 1
  *   .grid-3   3 -> 1
  *   .grid-4   4 -> 2 -> 1
  *   .grid-6   6 -> 3 -> 2 -> 1
  *
- * Every state is a divisor of N, so all items keep the same width and no
- * state produces a visibly uneven split such as 5 + 1 or 4 + 2. Intermediate
- * counts are skipped on purpose: do not "complete" these chains with the
- * missing integers, and do not replace them with an unbounded auto-fit.
+ * Every state is a divisor of N. Do not complete these chains with the
+ * missing integers and do not replace them with an unbounded auto-fit: both
+ * bring back uneven splits such as 5 + 1.
  *
- * The query container must be an ancestor. An element cannot query its own
- * size without taking inline-size containment, which destroys its intrinsic
- * inline contribution and collapses it inside .cluster, .topbar, floats, and
- * any shrink-to-fit box. See docs/design-notes/grid.md.
+ * The container must be an ANCESTOR. An element cannot query its own size
+ * without inline-size containment, which destroys its intrinsic inline
+ * contribution and collapses it inside .cluster, .topbar, floats and any
+ * shrink-to-fit box.
  *
- * 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).
- *
- * Three shared thresholds, not one calibrated per preset: 28rem opens the
- * first horizontal density, 48rem opens three columns, 64rem opens the dense
- * 4 and 6. N already carries the author's statement about item size, so
- * tuning every step to land the same item width would erase that signal —
- * .grid-6 at 64rem gives ~161px per tile, which is the point of choosing it.
- * Probed with the content each preset targets: large cards for .grid-2 down
- * to stats, avatars, and thumbnails for .grid-6.
+ * With no such ancestor none of these resolve and the baseline above stays.
+ * min-width: 0 is the lowest step: it pins the grid to one column before any
+ * larger threshold fires, which a bare grid would otherwise show as a 2 + 1
+ * orphan between 28 and 48rem.
  *
  * Ascending min-width only: the last matching step wins by cascade order.
  */
-@supports (container-type: inline-size) {
-  @container actual-container (min-width: 0px) {
-    :where(.grid-2, .grid-3, .grid-4, .grid-6) {
-      grid-template-columns: 1fr;
-    }
+@container actual-container (min-width: 0px) {
+  :where(.grid-2, .grid-3, .grid-4, .grid-6) {
+    grid-template-columns: 1fr;
   }
+}
 
-  @container actual-container (min-width: 28rem) {
-    :where(.grid-2, .grid-4, .grid-6) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
+@container actual-container (min-width: 28rem) {
+  :where(.grid-2, .grid-4, .grid-6) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+}
 
-  @container actual-container (min-width: 48rem) {
-    :where(.grid-3, .grid-6) {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
+@container actual-container (min-width: 48rem) {
+  :where(.grid-3, .grid-6) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+}
 
-  @container actual-container (min-width: 64rem) {
-    :where(.grid-4) {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
+@container actual-container (min-width: 64rem) {
+  :where(.grid-4) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
 
-    :where(.grid-6) {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
+  :where(.grid-6) {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
   }
 }

package/src/css/layout/scroll-snap.css

@@ -31,24 +31,28 @@
   .scroll-snap {
     overscroll-behavior-inline: contain;
     scroll-padding-inline: var(--scroll-snap-padding, var(--scroll-snap-gap));
+    /* x then inline: an engine that lacks the logical keyword keeps x.
+       proximity is the default, so a short rail cannot trap the pointer. */
+    scroll-snap-type: x proximity;
+    scroll-snap-type: inline proximity;
+  }
+
+  /* Strict snapping is opt-in; proximity keeps a rail from fighting the
+     pointer on a short strip. */
+  .scroll-snap[data-snap="mandatory"] {
     scroll-snap-type: x mandatory;
+    scroll-snap-type: inline mandatory;
   }
 
   .scroll-snap > * {
     scroll-snap-align: var(--scroll-snap-align);
   }
 
-  .scroll-snap[data-snap="center"] {
+  .scroll-snap[data-snap-align="center"] {
     --scroll-snap-align: center;
   }
 }
 
-@supports (scroll-snap-type: inline mandatory) {
-  .scroll-snap {
-    scroll-snap-type: inline mandatory;
-  }
-}
-
 .scroll-snap[data-scrollbar="hidden"] {
   scrollbar-width: none;
 }

package/src/css/layout/scroller.css

@@ -8,10 +8,9 @@
  * the light/dark adaptation that color-scheme already gives for free, and the
  * two never match anyway.
  *
- * Above the capability floor: scrollbar-color lands in Chromium 121 and
- * Safari 18.2, the floor is Chromium 99 / Safari 15.4. Older engines ignore
- * both declarations and draw their native scrollbar — the intended fallback,
- * not a broken state.
+ * Above every tier: scrollbar-color lands in Chromium 121 and Safari 18.2, so
+ * even a Recommended engine may lack it. Engines that ignore both declarations
+ * draw their native scrollbar — the intended fallback, not a broken state.
  *
  * Styles the scrollbar only; it does not create the overflow. Pair it with
  * .overflow-auto or a component that already scrolls.

package/src/css/layout/stack.css

@@ -7,8 +7,8 @@
    --gap is inherited, so a container that composes other primitives sets its
    own rhythm on the `gap` property, not on the token: setting --gap on a
    region re-spaces every nested stack, cluster and grid at any depth. Setting
-   the token stays correct on the element that consumes it, and .sm/.lg set it
-   deliberately so a density context reaches nested layouts. See
+   the token stays correct on the element that consumes it, and
+   .compact/.spacious set it deliberately so a density context reaches nested layouts. See
    docs/pages/layout/stack.md. */
 .stack {
   display: flex;

package/src/css/typography/fluid.css

@@ -1,9 +1,10 @@
 /*
  * Optional fluid typography module.
  *
- * Not imported by actual.css. Import this file manually after actual.css when
- * you need display, title, and lead sizes that scale with the viewport. Typical
- * use cases: marketing pages, landing pages, hero sections, documentation
+ * Part of the typography family (typography/index.css) and the full bundle; it
+ * is not in the minimal core, so a core-only import adds it explicitly when
+ * display, title, and lead sizes must scale with the viewport. Typical use
+ * cases: marketing pages, landing pages, hero sections, documentation
  * homepages.
  *
  * Do not use this for body text, app UI, or the default prose scale. Fluid

package/src/css/typography/prose.css

@@ -51,7 +51,7 @@
 .prose :where(h1, h2, h3, h4, h5, h6) {
   margin-block: 1.5em 0;
   color: var(--heading, var(--text));
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-semibold);
   line-height: var(--prose-heading-line-height);
 }
 
@@ -92,12 +92,12 @@
   text-underline-offset: 0.18em;
 }
 
-.prose :where(a:hover) {
+.prose :where(a:hover, a:focus-visible) {
   text-decoration-thickness: 0.12em;
 }
 
 @supports (color: color-mix(in oklch, red, white)) {
-  .prose :where(a:hover) {
+  .prose :where(a:hover, a:focus-visible) {
     color: color-mix(in oklab, var(--link, var(--primary)), var(--text) 15%);
   }
 }
@@ -115,7 +115,7 @@
 /* Description lists keep document flow: a valid <dl> may pair several <dt>
    with one <dd> or the reverse, so no grid layout is imposed here. */
 .prose :where(dt) {
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-semibold);
 }
 
 .prose :where(dd) {
@@ -157,8 +157,8 @@
 }
 /* @sync key-recipe */
 
+/* Overflow containment is global on `pre` (base.css); only the box is prose's. */
 .prose :where(pre) {
-  overflow-x: auto;
   padding: 1em;
   border: var(--border-width) solid var(--border);
   border-radius: var(--radius);
@@ -171,6 +171,7 @@
 }
 
 .prose :where(blockquote) {
+  margin-inline: 0;
   padding-inline-start: 1em;
   border-inline-start: var(--border-width) solid var(--border);
   color: var(--text-muted);

package/src/css/utilities/base.css

@@ -143,7 +143,8 @@
   text-decoration: none;
 }
 
-.link-muted:hover {
+.link-muted:hover,
+.link-muted:focus-visible {
   color: var(--text);
 }
 

package/src/css/utilities/extra.css

@@ -5,7 +5,8 @@
  * They are escape hatches for layout nudges, not a full atomic scale.
  *
  * Core principle:
- * - .sm / .lg provide local rhythm through --gap and --density-space.
+ * - .compact / .spacious provide inherited rhythm through --gap and
+ *   --density-space.
  * - utilities consume the current context instead of defining their own -sm/-lg scale.
  * - optional utilities extend core utilities, they do not re-express them.
  * - follow verbose .{property}-{value} naming.
@@ -86,18 +87,6 @@
   flex-wrap: nowrap;
 }
 
-.gap-sm {
-  gap: var(--space-20);
-}
-
-.gap-md {
-  gap: var(--space-40);
-}
-
-.gap-lg {
-  gap: var(--space-50);
-}
-
 .justify-content-start {
   --cluster-justify: flex-start;
   justify-content: flex-start;
@@ -155,6 +144,10 @@
   margin-block-end: auto;
 }
 
+/* Consume the inherited --gap rhythm on an arbitrary layout container.
+   Setting --gap alone only defines the custom property; it has no visual
+   effect unless the element already uses gap: var(--gap) (as .stack,
+   .cluster, .grid, etc. do). */
 .gap-context {
   gap: var(--gap);
 }
@@ -206,15 +199,15 @@
 }
 
 .font-weight-normal {
-  font-weight: var(--font-weight);
+  font-weight: var(--font-weight-normal);
 }
 
 .font-weight-medium {
   font-weight: var(--font-weight-medium);
 }
 
-.font-weight-strong {
-  font-weight: var(--font-weight-strong);
+.font-weight-semibold {
+  font-weight: var(--font-weight-semibold);
 }
 
 .font-weight-bold {
@@ -255,18 +248,28 @@
   border-inline-end: var(--border-width) solid var(--border);
 }
 
-/* Surface */
+/* 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
+   .intent-color for that. */
 .background-surface {
+  --heading: currentColor;
+
   background: var(--surface);
   color: var(--text);
 }
 
 .background-raised {
+  --heading: currentColor;
+
   background: var(--surface-raised);
   color: var(--text);
 }
 
 .background-subtle {
+  --heading: currentColor;
+
   background: var(--surface-subtle);
   color: var(--text);
 }

package/src/js/context-menu.js

@@ -1,3 +1,9 @@
+/*
+ * Context menu — `data-context-menu` targets opening a shared menu surface at
+ * a pointer, keyboard, or button origin. Reuses surface for the lifecycle and
+ * menu for item navigation; the panel gets no token.
+ */
+
 import enhance from "./enhance.js";
 import { EVENTS } from "./events.js";
 import { connectMenu, focusFirstMenuItem, hasMenuItems } from "./menu.js";
@@ -53,7 +59,6 @@ function getLongPressDelay(target, menu) {
 function readPanelOptions(menu) {
   const opts = { autoClose: "true" };
   const ds = menu.dataset;
-  if (ds.flyoutMobile) opts.mobile = ds.flyoutMobile;
   if (ds.flyoutAutoClose) opts.autoClose = ds.flyoutAutoClose;
   return opts;
 }
@@ -62,8 +67,10 @@ function focusMenuContainer(menu) {
   if (!menu.hasAttribute("tabindex")) {
     menu.tabIndex = -1;
   }
-  // Moving the mounted menu into the surface root must not scroll the page.
-  // Genuine user scrolling is handled separately by the surface policy.
+  // The menu is promoted where it stands rather than moved, so there is no
+  // relocation left to compensate for. preventScroll stays for its own sake:
+  // focusing a panel must not move the page under the user. Genuine user
+  // scrolling is handled separately by the surface policy.
   menu.focus({ preventScroll: true });
 }
 
@@ -95,15 +102,23 @@ function requestContextMenu(context, menu, opts = {}) {
 function openContextMenu(context, menu, opts = {}) {
   if (!requestContextMenu(context, menu, opts)) return;
   if (isSurfaceOpen(menu)) closeSurface(menu);
+
+  // Measured after the cancelable event: a handler may have moved the anchor.
+  let { x, y } = opts;
+  if (x == null || y == null) {
+    const rect = (opts.origin || context).getBoundingClientRect();
+    x ??= rect.left;
+    y ??= rect.bottom;
+  }
+
   if (
     openSurface(menu, {
       source: context,
-      x: opts.x,
-      y: opts.y,
+      x,
+      y,
       placement: opts.placement || "bottom-start",
       distance: opts.distance ?? 2,
       dismissOnScroll: true,
-      mobile: opts.mobile || "auto",
       scope: opts.scope || getContextScope(context),
       restoreFocusTo: opts.restoreFocusTo,
       ...readPanelOptions(menu),
@@ -114,10 +129,7 @@ function openContextMenu(context, menu, opts = {}) {
 }
 
 function openFromKeyboard(context, menu, origin = context, restoreFocusTo) {
-  const rect = origin.getBoundingClientRect();
   openContextMenu(context, menu, {
-    x: rect.left,
-    y: rect.bottom,
     placement: "bottom-start",
     distance: 4,
     focus: "first-item",
@@ -264,23 +276,12 @@ function connectContextTarget(target) {
         return;
       }
 
-      if (!requestContextMenu(target, menu, { origin: trigger, trigger: "button" })) return;
-
-      const rect = trigger.getBoundingClientRect();
-      if (
-        openSurface(menu, {
-          source: target,
-          x: rect.left,
-          y: rect.bottom,
-          placement: "bottom-start",
-          distance: 4,
-          dismissOnScroll: true,
-          restoreFocusTo: trigger,
-          ...readPanelOptions(menu),
-        })
-      ) {
-        focusMenuContainer(menu);
-      }
+      openContextMenu(target, menu, {
+        distance: 4,
+        origin: trigger,
+        trigger: "button",
+        restoreFocusTo: trigger,
+      });
     },
     { signal: controller.signal },
   );

package/src/js/dialog.js

@@ -37,6 +37,7 @@ const wiredDialogs = new Set();
 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;
 let uid = 0;
 
 function isDialogElement(el) {
@@ -213,7 +214,7 @@ function flashStatic(dialog) {
   state.staticTimer = win?.setTimeout(() => {
     dialog.classList.remove(CLASSES.static);
     state.staticTimer = null;
-  }, 250);
+  }, STATIC_SHAKE_MS);
 }
 
 function finishClose(dialog, returnValue = "") {

package/src/js/dismiss.js

@@ -1,3 +1,8 @@
+/*
+ * Dismiss command — the generic `--dismiss` action. Hides the resolved target
+ * and emits the bubbling `actual:dismiss` event.
+ */
+
 import { registerCommands } from "./command.js";
 import { EVENTS } from "./events.js";