actual-css 0.1.0 → 0.2.0

package/src/css/themes/edge.css

@@ -79,38 +79,14 @@
 }
 
 /* Focus recipe override — the base recipe (control.css) flips --control-border
-   to --focus on top of the outline + ring, which triples up with the lower-edge
-   accent already visible here. Edge drops the border-color flip and thickens
-   the accent edge instead; the ring stays untouched. */
+   to --focus and draws a box-shadow ring. Edge drops the border-color flip and
+   thickens the accent edge instead so the intent-coloured lower edge stays
+   dominant; the focus ring and its 3px width remain the same as the default. */
 [data-theme="edge"] :is(.input, .textarea, .select):focus-visible {
   --control-border: var(--border);
   --control-border-block-end-width: 3px;
 }
 
-/* The shared 2px-solid/2px-offset outline reads as a second ring on top of
-   the accent edge (inputs) or the box-shadow ring (buttons). Edge thins both
-   to the border width and tightens the offset so the outline hugs the
-   control instead of floating a second halo around it. Gated outside
-   forced-colors so that mode's Highlight-colored --focus-outline (theme.css)
-   stays in charge for inputs — a direct property on the element would
-   otherwise out-specificity that fallback regardless of the media condition
-   it was declared under. Buttons don't consume --focus-outline (they compute
-   their own outline so it can use --btn-focus-color's intent awareness), so
-   they get their own local width token, --btn-focus-outline-width. */
-@media not (forced-colors: active) {
-  [data-theme="edge"] :is(.input, .textarea, .select, .btn) {
-    --focus-outline-offset: 1px;
-  }
-
-  [data-theme="edge"] :is(.input, .textarea, .select) {
-    --focus-outline: var(--border-width) solid var(--focus);
-  }
-
-  [data-theme="edge"] .btn {
-    --btn-focus-outline-width: var(--border-width);
-  }
-}
-
 @supports (color: light-dark(red, blue)) {
   [data-theme="edge"] {
     --primary: light-dark(hsl(224 72% 42%), hsl(220 80% 76%));

package/src/css/tokens.css

@@ -29,7 +29,8 @@
   /* Shape */
   --border-width: 1px;
   --radius-full: 9999px;
-  --shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.08);
+  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.04);
+  --shadow: 0 1px 3px rgb(0 0 0 / 0.05), 0 4px 12px rgb(0 0 0 / 0.04);
   --shadow-popout: 0 0.25rem 0.75rem rgb(0 0 0 / 0.15);
 
   /* Motion — see reset.css for the prefers-reduced-motion hard reset.
@@ -43,8 +44,10 @@
   --ease: ease;
 
   /* Focus ring — shared by every interactive component's :focus-visible */
-  --focus-outline: calc(var(--border-width) * 2) solid var(--focus);
+  --focus-outline-color: currentColor;
+  --focus-outline: calc(var(--border-width) * 2) solid var(--focus-outline-color);
   --focus-outline-offset: 2px;
+  --focus-ring-width: 3px;
 
   /* Status dot positioning — used by .avatar > .badge:empty. The offset is
      the circle-aware inset (1 - 1/√2) / 2 ≈ 14.65%; the ring surrounds the
@@ -111,7 +114,10 @@
 
 @supports (color: color-mix(in oklch, red, white)) {
   :root {
-    --shadow: 0 0.5rem 1.5rem color-mix(in oklch, var(--shadow-color) 8%, transparent);
+    --shadow-xs: 0 1px 2px color-mix(in oklch, var(--shadow-color) 4%, transparent);
+    --shadow:
+      0 1px 3px color-mix(in oklch, var(--shadow-color) 5%, transparent),
+      0 4px 12px color-mix(in oklch, var(--shadow-color) 4%, transparent);
     --shadow-popout: 0 0.25rem 0.75rem color-mix(in oklch, var(--shadow-color) 15%, transparent);
     --backdrop-fill: color-mix(
       in oklch,

package/src/js/context-menu.js

@@ -1,18 +1,11 @@
 import enhance from "./enhance.js";
 import { EVENTS } from "./events.js";
 import { focusFirstMenuItem, hasMenuItems } from "./menu.js";
-import { CLASSES } from "./selectors.js";
-import {
-  closeSurface,
-  disconnectSurface,
-  isSurfaceOpen,
-  openSurface,
-  prepareSurface,
-} from "./surface.js";
+import { closeSurface, isSurfaceOpen, openSurface, prepareSurface } from "./surface.js";
 
 const LONG_PRESS_MS = 450;
 const MOVE_TOLERANCE = 10;
-const CONTEXT_MENU_SELECTOR = `menu.${CLASSES.flyout}`;
+const CONTEXT_MENU_SELECTOR = 'menu, [role="menu"]';
 const CONTEXT_TARGET_SELECTOR = "[data-context-menu]";
 const contextMap = new WeakMap();
 const contextByMenu = new WeakMap();
@@ -253,33 +246,24 @@ function disconnectContextTarget(target) {
   if (!state) return;
   clearLongPress(state);
   state.controller.abort();
-  if (contextFor(state.menu)?.context === target) contextByMenu.delete(state.menu);
+  if (contextFor(state.menu)?.context === target) {
+    contextByMenu.delete(state.menu);
+    closeSurface(state.menu, { restoreFocus: false });
+  }
   contextMap.delete(target);
 }
 
-function connectContextMenu(menu) {
-  const controller = new AbortController();
-  menu.addEventListener(
-    EVENTS.surfaceOpen,
-    (event) => {
-      const options = event.detail?.options;
-      const trigger = options?.trigger;
-      const context = trigger?.closest?.(CONTEXT_TARGET_SELECTOR);
-      if (!context || menuFor(context) !== menu) return;
-      if (!requestContextMenu(context, menu, { origin: trigger, trigger: "button" })) {
-        event.preventDefault();
-        return;
-      }
-      options.source = context;
-      options.restoreFocusTo = trigger;
-    },
-    { signal: controller.signal },
-  );
-  return () => {
-    controller.abort();
-    contextByMenu.delete(menu);
-    disconnectSurface(menu);
-  };
+function onSurfaceOpen(event) {
+  const options = event.detail?.options;
+  const trigger = options?.trigger;
+  const context = trigger?.closest?.(CONTEXT_TARGET_SELECTOR);
+  if (!context || menuFor(context) !== event.detail?.surface) return;
+  if (!requestContextMenu(context, event.detail.surface, { origin: trigger, trigger: "button" })) {
+    event.preventDefault();
+    return;
+  }
+  options.source = context;
+  options.restoreFocusTo = trigger;
 }
 
 enhance({
@@ -287,5 +271,8 @@ enhance({
     connectContextTarget(target);
     return () => disconnectContextTarget(target);
   },
-  [CONTEXT_MENU_SELECTOR]: (menu) => connectContextMenu(menu),
 });
+
+if (typeof document !== "undefined") {
+  document.addEventListener(EVENTS.surfaceOpen, onSurfaceOpen);
+}

package/src/js/enhance.js

@@ -14,6 +14,15 @@
  *
  * enhancers: { [selector]: (el) => cleanup | void }
  * Returns: { refresh, forget, disconnect }
+ *
+ * Enhancement tokens — the data-enhance layer on top of enhance().
+ *
+ * enhancementSelector("tabs") returns [data-enhance~="tabs"], the generic
+ * opt-in for root-controller behaviors. registerEnhancement() is a stateless
+ * wrapper around enhance() — no central registry, no double-registration
+ * warning. Third-party behaviors register exactly like built-in ones.
+ *
+ * See docs/design-notes/enhancement-contract.md.
  */
 
 const registries = new WeakMap();
@@ -172,6 +181,23 @@ function createRegistry(root) {
   };
 }
 
+const ENHANCEMENT_NAME = /^[a-z][a-z0-9-]*$/;
+
+export function enhancementSelector(name) {
+  if (!ENHANCEMENT_NAME.test(name)) {
+    throw new TypeError(`Invalid enhancement name: ${name}`);
+  }
+  return `[data-enhance~="${name}"]`;
+}
+
+export function hasEnhancement(el, name) {
+  return el.matches(enhancementSelector(name));
+}
+
+export function registerEnhancement(name, init, root) {
+  return enhance({ [enhancementSelector(name)]: init }, root);
+}
+
 function registryFor(root) {
   let registry = registries.get(root);
   if (!registry) {

package/src/js/flyout.js

@@ -5,21 +5,14 @@
  * same surface lifecycle without menu semantics.
  */
 
-import enhance from "./enhance.js";
+import enhance, { registerEnhancement } from "./enhance.js";
 import { focusFirstDescendant } from "./focus.js";
 import { focusFirstMenuItem, focusLastMenuItem, getMenuItems } from "./menu.js";
-import { CLASSES } from "./selectors.js";
-import {
-  closeSurface,
-  disconnectSurface,
-  isSurfaceOpen,
-  openSurface,
-  prepareSurface,
-} from "./surface.js";
+import { closeSurface, isSurfaceOpen, openSurface, prepareSurface } from "./surface.js";
 
 // trigger -> { flyout, controller }
 const triggerMap = new WeakMap();
-const FLYOUT_SELECTOR = `.${CLASSES.flyout}`;
+const FLYOUT_SELECTOR = '[data-enhance~="flyout"]';
 const FLYOUT_TRIGGER_SELECTOR = "[aria-controls][aria-expanded]";
 
 function openFlyout(flyout, trigger) {
@@ -157,6 +150,9 @@ function disconnectTrigger(trigger) {
   const state = triggerMap.get(trigger);
   if (!state) return;
   state.controller.abort();
+  if (state.flyout?.isConnected && isSurfaceOpen(state.flyout)) {
+    closeSurface(state.flyout, { restoreFocus: false });
+  }
   triggerMap.delete(trigger);
 }
 
@@ -170,18 +166,15 @@ function connectFlyout(flyout) {
   }
 }
 
-function disconnectFlyout(flyout) {
-  if (!flyout) return;
-  disconnectSurface(flyout);
-}
-
 enhance({
   [FLYOUT_TRIGGER_SELECTOR]: (trigger) => {
     connectTrigger(trigger);
     return () => disconnectTrigger(trigger);
   },
-  [FLYOUT_SELECTOR]: (flyout) => {
-    connectFlyout(flyout);
-    return () => disconnectFlyout(flyout);
-  },
+});
+
+registerEnhancement("flyout", (flyout) => {
+  connectFlyout(flyout);
+  // Surface owns its own teardown; the marker enhancer in surface.js
+  // calls disconnectSurface(el, { restore: false }) on sweep.
 });

package/src/js/menu.js

@@ -1,15 +1,15 @@
 import { isElementVisible } from "./focus.js";
 import { firstItem, lastItem, nextItem } from "./keys.js";
 
-const MENU_ITEM_TARGET_SELECTORS = ["button", "a", '[role="menuitem"]'];
-// Item contract, mirrored from flyout.css: a button, link, or menuitem
-// directly in the flyout or directly in any of its <li>. Prefixed with
-// .flyout rather than :scope because hasMenuItem() matches it via closest(),
-// where :scope would resolve to the target element instead of the flyout.
-export const MENU_ITEM_SELECTOR = MENU_ITEM_TARGET_SELECTORS.flatMap((target) => [
-  `.flyout > ${target}`,
-  `.flyout li > ${target}`,
-]).join(",");
+const MENU_ITEM = 'button, a, [role="menuitem"]';
+// Mirrors the item contract in flyout.css: an item sits directly in the surface,
+// or directly in any of its <li> — bare list, or grouped section > ul > li.
+// `:scope li` must stay a *descendant* combinator for that second form; the
+// grouped flyouts in docs/ui.md lose roving focus with `:scope > li`.
+// Scoping is what keeps a neighbouring surface's items out: this selector only
+// ever runs against one surface, and hasMenuItem() resolves the clicked item
+// through this list rather than through a global closest().
+const MENU_ITEM_SELECTOR = `:scope > :is(${MENU_ITEM}), :scope li > :is(${MENU_ITEM})`;
 
 function isUsableMenuItem(item) {
   return (
@@ -29,7 +29,7 @@ function isAriaMenuItem(item) {
 }
 
 function activateCurrentItem(menu) {
-  const item = document.activeElement;
+  const item = menu.ownerDocument.activeElement;
   if (!menu.contains(item) || !isAriaMenuItem(item)) return false;
 
   item.click();
@@ -40,8 +40,9 @@ export function hasMenuItems(menu) {
   return getMenuItems(menu).length > 0;
 }
 
-export function hasMenuItem(target) {
-  return !!target.closest?.(MENU_ITEM_SELECTOR);
+export function hasMenuItem(menu, target) {
+  const item = target?.closest?.(MENU_ITEM);
+  return !!item && getMenuItems(menu).includes(item);
 }
 
 export function focusFirstMenuItem(menu) {
@@ -60,11 +61,11 @@ export function onMenuKeydown(e, { close }) {
   switch (e.key) {
     case "ArrowDown":
       e.preventDefault();
-      nextItem(items, document.activeElement, 1, { wrap: true })?.focus();
+      nextItem(items, menu.ownerDocument.activeElement, 1, { wrap: true })?.focus();
       break;
     case "ArrowUp":
       e.preventDefault();
-      nextItem(items, document.activeElement, -1, { wrap: true })?.focus();
+      nextItem(items, menu.ownerDocument.activeElement, -1, { wrap: true })?.focus();
       break;
     case "Home":
       e.preventDefault();

package/src/js/scrollspy.js

@@ -1,22 +1,39 @@
 /*
  * Scrollspy — navigation that highlights the active section on scroll.
  *
- * Nav:    .scrollspy containing <a href="#section-id"> links
+ * Nav:    [data-enhance="scrollspy"] containing <a href="#section-id"> links
  * Target: elements referenced by the href fragments
  *
- * Uses IntersectionObserver. Falls back gracefully: links still work
- * even if IntersectionObserver isn't available.
+ * Deterministic geometry, not IntersectionObserver: on each scroll (throttled
+ * with requestAnimationFrame) the active section is the last one whose top has
+ * crossed an activation line. An IntersectionObserver reports *which* sections
+ * intersect, not which one is current, so it has to guess whenever several
+ * share the viewport — and guesses wrong for sections shorter than the band.
  *
- * Optional root: data-scrollspy-root="#scroll-container" observes section
- * visibility within a scroll container instead of the viewport.
+ * activation line = root top + offset      (default 20% of the root's height)
+ * active section  = last section whose top <= activation line
+ * scrolled to end = last section, whatever the line says
+ * above the first = no active section
  *
- * Self-registers via enhance: injected .scrollspy navs wire automatically.
- * Cleanup disconnects the IntersectionObserver and the small MutationObserver
- * that refreshes the link→section map as nav links or sections are injected.
+ * Optional root: data-scrollspy-root="#scroll-container" measures against a
+ * scroll container instead of the viewport.
+ * Optional offset: data-scrollspy-offset="24" | "24px" | "20%" moves the
+ * activation line. Invalid values fall back to 20%; negatives clamp to 0.
+ *
+ * Self-registers via registerEnhancement: injected navs wire automatically.
+ * Cleanup removes the scroll/resize listeners and the small MutationObserver
+ * that refreshes the link->section map as nav links are injected. New sections
+ * outside the nav subtree are not observed — call refreshScrollspy(nav) after
+ * those mutations.
+ *
+ * The .scrollspy class alone still gives :target-current behavior via CSS —
+ * a documented no-JS mode, not a fallback remark.
  */
 
-import enhance from "./enhance.js";
-import { CLASSES } from "./selectors.js";
+import { registerEnhancement } from "./enhance.js";
+
+const DEFAULT_OFFSET_RATIO = 0.2;
+const navState = new WeakMap();
 
 function rootFor(nav) {
   const selector = nav.getAttribute("data-scrollspy-root");
@@ -42,80 +59,126 @@ function sectionsFor(nav) {
   return sections;
 }
 
-const navState = new WeakMap();
+/*
+ * Viewport-relative measurements for either scroll root. The window branch
+ * reads documentElement rather than a captured window so a nav in another
+ * document measures its own root — same reason surface.js resolves
+ * ownerDocument instead of binding at import time.
+ */
+function measureRoot(nav, root) {
+  if (root) {
+    return {
+      top: root.getBoundingClientRect().top,
+      height: root.clientHeight,
+      scrollTop: root.scrollTop,
+      scrollHeight: root.scrollHeight,
+    };
+  }
 
-export function refreshScrollspy(nav) {
-  navState.get(nav)?.rebuild();
+  const html = nav.ownerDocument.documentElement;
+  return {
+    top: 0,
+    height: html.clientHeight,
+    scrollTop: html.scrollTop,
+    scrollHeight: html.scrollHeight,
+  };
+}
+
+/*
+ * "24" and "24px" are pixels, "20%" is a share of the root's visible height.
+ * Percentages resolve per measurement, so a resize needs no rebuild.
+ */
+function activationOffset(nav, height) {
+  const raw = (nav.getAttribute("data-scrollspy-offset") ?? "").trim();
+  if (!raw) return height * DEFAULT_OFFSET_RATIO;
+
+  const value = Number.parseFloat(raw);
+  if (!Number.isFinite(value)) return height * DEFAULT_OFFSET_RATIO;
+
+  return Math.max(0, raw.endsWith("%") ? (height * value) / 100 : value);
 }
 
 function setupNav(nav) {
-  if (typeof IntersectionObserver === "undefined") return;
-  let io = null;
+  const controller = new AbortController();
   let sections = [];
-  const activeEntries = new Map();
-  let scheduled = false;
+  let frame = 0;
+  let current;
+
+  function activate(section) {
+    if (section === current) return;
+    current = section;
+
+    for (const entry of sections) {
+      if (entry.section === section) {
+        entry.link.setAttribute("aria-current", "location");
+      } else {
+        entry.link.removeAttribute("aria-current");
+      }
+    }
+  }
 
-  function rebuild() {
-    scheduled = false;
-    io?.disconnect();
-    sections = sectionsFor(nav);
-    activeEntries.clear();
+  function measure() {
+    frame = 0;
     if (!sections.length) return;
 
-    io = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          if (entry.isIntersecting) {
-            activeEntries.set(entry.target, entry);
-          } else {
-            activeEntries.delete(entry.target);
-          }
-        }
-
-        const visible = [...activeEntries.values()].sort(
-          (a, b) => a.boundingClientRect.top - b.boundingClientRect.top,
-        );
-
-        const id = visible[0]?.target.id;
-        for (const { link } of sections) {
-          if (id && link.getAttribute("href") === `#${id}`) {
-            link.setAttribute("aria-current", "location");
-          } else {
-            link.removeAttribute("aria-current");
-          }
-        }
-      },
-      {
-        root: rootFor(nav),
-        rootMargin: "-20% 0px -70% 0px",
-        threshold: 0,
-      },
-    );
+    const root = rootFor(nav);
+    const { top, height, scrollTop, scrollHeight } = measureRoot(nav, root);
+
+    // Scrolled to the end: the last section wins even when its top never
+    // crosses the line. This is the case IntersectionObserver cannot express.
+    if (scrollHeight > height && scrollTop + height >= scrollHeight - 1) {
+      activate(sections.at(-1).section);
+      return;
+    }
 
+    const line = top + activationOffset(nav, height);
+    let active = null;
     for (const { section } of sections) {
-      io.observe(section);
+      if (section.getBoundingClientRect().top <= line) active = section;
     }
+
+    activate(active);
   }
 
-  function scheduleRebuild() {
-    if (scheduled) return;
-    scheduled = true;
-    queueMicrotask(rebuild);
+  function schedule(run = measure) {
+    if (frame) cancelAnimationFrame(frame);
+    frame = requestAnimationFrame(run);
   }
 
-  const mo = new MutationObserver(scheduleRebuild);
+  function rebuild() {
+    sections = sectionsFor(nav);
+    current = undefined;
+    measure();
+  }
+
+  const scrollTarget = rootFor(nav) ?? nav.ownerDocument.defaultView;
+  scrollTarget?.addEventListener("scroll", () => schedule(), {
+    passive: true,
+    signal: controller.signal,
+  });
+  nav.ownerDocument.defaultView?.addEventListener("resize", () => schedule(), {
+    passive: true,
+    signal: controller.signal,
+  });
+
+  // Observer is scoped to the nav subtree — link injection is caught;
+  // section-only DOM mutations elsewhere need an explicit refreshScrollspy().
+  const mo = new MutationObserver(() => schedule(rebuild));
   mo.observe(nav, { childList: true, subtree: true });
-  navState.set(nav, { rebuild: scheduleRebuild });
+  navState.set(nav, { rebuild });
 
   rebuild();
 
   return () => {
-    io?.disconnect();
+    controller.abort();
+    if (frame) cancelAnimationFrame(frame);
     mo.disconnect();
     navState.delete(nav);
   };
 }
 
-enhance({
-  [`.${CLASSES.scrollspy}`]: setupNav,
-});
+export function refreshScrollspy(nav) {
+  navState.get(nav)?.rebuild();
+}
+
+registerEnhancement("scrollspy", setupNav);

package/src/js/selectors.js

@@ -1,35 +1,29 @@
 /*
- * Selectors — the CSS class names this runtime looks for or writes, gathered
- * in one file.
+ * Selectors — the state-class vocabulary the runtime writes.
  *
- * Every module that matches against or toggles one of Actual's own class
- * names imports its token from here instead of writing the string inline.
- * To run this runtime against a different CSS framework, edit this file (or
- * alias it in a bundler) — no other module needs to change.
+ * This file no longer lists discovery selectors: behavior discovery moved
+ * to data-enhance tokens in 0.2. What remains are the class names modules
+ * write as state (is-open, was-validated, …) and validation's two read-side
+ * presentation adapters (field, fieldError). To run this runtime against a
+ * different CSS framework, edit this file (or alias it in a bundler).
  *
  * data-* attributes and ARIA are not listed: they are each module's own
  * behavior API, not CSS vocabulary, so they stay framework-neutral by
- * construction and never need remapping. A module with no entry here (see
- * status.js) has no CSS class dependency at all.
+ * construction and never need remapping.
  */
+
 export const CLASSES = {
-  // flyout.js, context-menu.js — opt-in class on the panel/menu element.
-  flyout: "flyout",
-  // tab.js — opt-in class on the tablist element.
-  tabs: "tabs",
-  // scrollspy.js — opt-in class on the nav element.
-  scrollspy: "scrollspy",
-  // validation.js — opt-in class on the <form>.
-  needsValidation: "needs-validation",
   // validation.js — written on <form> after the first submit attempt.
   wasValidated: "was-validated",
-  // validation.js — read on the element an aria-describedby id resolves to.
-  fieldError: "field-error",
-  // validation.js — ancestor container searched for aria-invalid/danger state.
-  field: "field",
   // validation.js — intents.css vocabulary class toggled on the field
   // container while any control inside it is invalid.
   danger: "danger",
+  // validation.js — read-side presentation adapter: error slot among
+  // aria-describedby targets. [data-field-error] is an accepted alias (D6).
+  fieldError: "field-error",
+  // validation.js — read-side presentation adapter: ancestor container
+  // for aria-invalid/danger state. Optional — degrades to no-op.
+  field: "field",
   // surface.js — state class on the open flyout/menu/dialog surface.
   open: "is-open",
   // surface.js — state class while the surface renders as a mobile sheet.
@@ -52,8 +46,4 @@ export const CLASSES = {
   hadScrollbar: "had-scrollbar",
   // tooltip.js — class name written on a shorthand-generated tooltip element.
   tooltip: "tooltip",
-  // status.js — required alongside [data-status]. "status" is a common
-  // domain word (order status, task status, …); the class keeps a
-  // document-wide querySelector from matching an unrelated app element.
-  statusBar: "status-bar",
 };

package/src/js/status.js

@@ -24,23 +24,23 @@
  *   - Any other code, without importing this module: dispatch `actual:status`
  *     directly — `detail: { message, intent, duration }`, or `{}` to clear.
  *
- * The element contract is `.status-bar[data-status]`. Both are required:
- * "status" is a generic domain word, so the class keeps the document-wide
- * lookup from matching an unrelated app element that happens to carry its own
- * `data-status`. `intent` is applied verbatim as one or more classes on the
- * target (space-separated for more than one, e.g. "danger uppercase").
- * status.js does not know or validate any specific names — .danger, .success,
- * and friends are Actual's own intents.css vocabulary, not something this
- * module hardcodes. Each call removes the intent classes the previous call
- * added (tracked in data-status-classes on the target itself), then adds the
- * current call's, so stale intent classes never accumulate and classes the
- * app added independently are left alone.
+ * The element contract is `[data-status][role="status"]`. Both are required:
+ * "status" is a generic domain word, so `role="status"` keeps the
+ * document-wide lookup from matching an unrelated app element that happens to
+ * carry its own `data-status`. `intent` is applied verbatim as one or more
+ * classes on the target (space-separated for more than one, e.g. "danger
+ * uppercase"). status.js does not know or validate any specific names —
+ * .danger, .success, and friends are Actual's own intents.css vocabulary, not
+ * something this module hardcodes. Each call removes the intent classes the
+ * previous call added (tracked in data-status-classes on the target itself),
+ * then adds the current call's, so stale intent classes never accumulate and
+ * classes the app added independently are left alone.
  */
+
 import { registerCommands, targetFor } from "./command.js";
 import { EVENTS } from "./events.js";
-import { CLASSES } from "./selectors.js";
 
-const STATUS_SELECTOR = `.${CLASSES.statusBar}[data-status]`;
+const STATUS_SELECTOR = '[data-status][role="status"]';
 const STATUS_CLASSES_ATTR = "statusClasses";
 
 let statusTimer;