actual-css 0.5.0 → 0.7.0

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/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/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/status.js

@@ -31,6 +31,12 @@
  *   - Any other code, without importing this module: dispatch `actual:status`
  *     directly — `detail: { message, intent, duration }`, or `{}` to clear.
  *
+ * A message originating inside an open dialog temporarily mounts the singleton
+ * bar in that dialog. Content outside a modal dialog is inert and cannot sit
+ * above its top layer, so this keeps both the visual feedback and live region
+ * in the active subtree. Programmatic callers pass the originating element as
+ * `options.source`; event and command entry points propagate it automatically.
+ *
  * 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
@@ -59,12 +65,39 @@ let statusTimer;
 // never emptied by the previous message's cleanup.
 let statusGeneration = 0;
 let viewportTracker = null;
+const statusHomes = new WeakMap();
 
 function statusTarget() {
   if (typeof document === "undefined") return null;
   return document.querySelector(STATUS_SELECTOR);
 }
 
+function restoreStatusTarget(target) {
+  const home = statusHomes.get(target);
+  if (!home) return;
+
+  const parent = home.parent?.isConnected ? home.parent : target.ownerDocument?.body;
+  if (parent) {
+    const reference = home.nextSibling?.parentNode === parent ? home.nextSibling : null;
+    parent.insertBefore(target, reference);
+  }
+  statusHomes.delete(target);
+}
+
+function mountStatusTarget(target, source) {
+  const dialog = source?.closest?.("dialog[open]");
+  if (!dialog || dialog.ownerDocument !== target.ownerDocument) {
+    restoreStatusTarget(target);
+    return;
+  }
+  if (dialog.contains(target)) return;
+
+  if (!statusHomes.has(target)) {
+    statusHomes.set(target, { parent: target.parentNode, nextSibling: target.nextSibling });
+  }
+  dialog.append(target);
+}
+
 // 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.
@@ -130,6 +163,8 @@ export function status(message, options = {}) {
   clearTimeout(statusTimer);
   statusGeneration++;
 
+  mountStatusTarget(target, options.source);
+
   clearIntentClasses(target);
   const intent = intentClasses(options.intent);
   if (intent.length) {
@@ -168,6 +203,7 @@ status.clear = function clear() {
     target.textContent = "";
     clearIntentClasses(target);
     releaseViewport();
+    restoreStatusTarget(target);
   });
 };
 
@@ -198,7 +234,7 @@ function connectStatusTrigger(trigger, target) {
 if (typeof document !== "undefined") {
   document.addEventListener(EVENTS.invalid, (event) => {
     const message = event.detail?.message;
-    if (message) status(message, { intent: "danger" });
+    if (message) status(message, { intent: "danger", source: event.target });
   });
 
   // Public contract: any code can trigger the status bar this way, without
@@ -209,7 +245,7 @@ if (typeof document !== "undefined") {
     // 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 });
+      status(message, { intent, duration, source: event.target });
     } else {
       status.clear();
     }

package/src/js/surface.js

@@ -1,7 +1,7 @@
+import { autoUpdate, reposition, repositionAt } from "@lekoala/floating";
 import enhance from "./enhance.js";
 import { registerEscapeDismissal } from "./escape.js";
 import { EVENTS } from "./events.js";
-import { autoUpdate, reposition, repositionAt } from "./floating.js";
 
 import { CLASSES } from "./selectors.js";
 import { waitForTransitions } from "./transition.js";
@@ -210,6 +210,10 @@ function startSurfaceResources(menu, state) {
     const armKey = (event) => {
       if (!event.defaultPrevented && SCROLL_KEYS.has(event.key)) arm(event);
     };
+    const dismissOnScroll = (event) => {
+      if (state.scrollIntentAt == null || menu.contains(event.target)) return;
+      closeSurface(menu);
+    };
     const captureOptions = { signal: controller.signal, capture: true };
     const passiveCaptureOptions = { ...captureOptions, passive: true };
     const doc = menu.ownerDocument;
@@ -217,20 +221,13 @@ function startSurfaceResources(menu, state) {
     doc.addEventListener("touchmove", arm, passiveCaptureOptions);
     doc.addEventListener("wheel", arm, passiveCaptureOptions);
     doc.addEventListener("keydown", armKey, { signal: controller.signal });
+    doc.addEventListener("scroll", dismissOnScroll, passiveCaptureOptions);
     state.stopScrollIntent = () => controller.abort();
   }
-  state.stopTracking = autoUpdate(menu, ({ type, targets, timeStamp }) => {
+  const anchor = state.point ? null : state.trigger || state.source;
+  state.stopTracking = autoUpdate(anchor, menu, ({ type }) => {
     if (menu.hidden) return;
-    if (
-      type === "scroll" &&
-      state.dismissOnScroll &&
-      state.scrollIntentAt != null &&
-      timeStamp >= state.scrollIntentAt &&
-      [...targets].some((target) => target !== menu && !menu.contains(target))
-    ) {
-      closeSurface(menu);
-      return;
-    }
+    if (type === "scroll" && state.dismissOnScroll) return;
     applyPresentation(menu, state);
     if (!positionSurface(menu)) closeSurface(menu);
   });
@@ -249,11 +246,30 @@ export function prepareSurface(menu) {
   reaperFor(menu)?.refresh(menu);
 }
 
+/*
+ * One lifecycle owner per surface. surface.js opens by clearing [hidden] and
+ * adding .is-open; it never calls showPopover(). So a [popover] panel handed to
+ * the runtime has two owners and stays shut: the platform keeps a popover it
+ * was never asked to show closed, whatever the runtime writes.
+ *
+ * This covers every popover value. "manual" is a candidate future transport for
+ * this module, which does not make it a legitimate mix today. Delete this guard
+ * in the commit that makes surface.js call showPopover().
+ */
+function warnPopoverConflict(panel) {
+  if (!panel.hasAttribute("popover")) return;
+  console.warn(
+    "Actual: the surface lifecycle cannot own a [popover] element — choose one lifecycle owner (remove the popover attribute, or drop the Actual enhancement).",
+    panel,
+  );
+}
+
 export function retainSurface(panel) {
   if (!panel) return () => {};
 
   let entry = surfaceRetainers.get(panel);
   if (!entry) {
+    warnPopoverConflict(panel);
     prepareSurface(panel);
     entry = { count: 0 };
     surfaceRetainers.set(panel, entry);

package/src/js/tooltip.js

@@ -27,9 +27,9 @@
  * Hide:       blur, pointer leave, Escape
  */
 
+import { autoUpdate, reposition } from "@lekoala/floating";
 import enhance from "./enhance.js";
 import { registerEscapeDismissal } from "./escape.js";
-import { autoUpdate, reposition } from "./floating.js";
 import { CLASSES } from "./selectors.js";
 
 const SHOW_DELAY_MS = 150;
@@ -163,7 +163,7 @@ function updateTrackedTip(tip, state) {
 function startTracking(tip, state) {
   if (state.stopTracking) return;
 
-  state.stopTracking = autoUpdate(tip, () => updateTrackedTip(tip, state));
+  state.stopTracking = autoUpdate(state.activeRef, tip, () => updateTrackedTip(tip, state));
 }
 
 function stopTracking(state) {