actual-css 0.9.2 → 0.11.0

package/src/js/status.js

@@ -67,6 +67,21 @@ let statusTimer;
 let statusGeneration = 0;
 let viewportTracker = null;
 const statusHomes = new WeakMap();
+// Reference kept only while the bar is temporarily mounted in a dialog. If
+// that dialog is removed from the DOM (htmx/Turbo swap), document lookup can
+// no longer find the bar — this reference lets the next status()/clear()
+// restore it to its home instead of silently no-opping forever.
+let mountedStatusTarget = null;
+
+function healDetachedStatusTarget() {
+  if (!mountedStatusTarget || mountedStatusTarget.isConnected) return;
+  if (!statusHomes.has(mountedStatusTarget)) {
+    mountedStatusTarget = null;
+    return;
+  }
+  restoreStatusTarget(mountedStatusTarget);
+  mountedStatusTarget = null;
+}
 
 function statusTarget() {
   if (typeof document === "undefined") return null;
@@ -83,6 +98,7 @@ function restoreStatusTarget(target) {
     parent.insertBefore(target, reference);
   }
   statusHomes.delete(target);
+  if (mountedStatusTarget === target) mountedStatusTarget = null;
 }
 
 function mountStatusTarget(target, source) {
@@ -97,6 +113,7 @@ function mountStatusTarget(target, source) {
     statusHomes.set(target, { parent: target.parentNode, nextSibling: target.nextSibling });
   }
   dialog.append(target);
+  mountedStatusTarget = target;
 }
 
 // The bar is fixed to the layout viewport, so the mobile software keyboard
@@ -149,6 +166,7 @@ function clearIntentClasses(target) {
 }
 
 export function status(message, options = {}) {
+  healDetachedStatusTarget();
   const target = statusTarget();
   if (!target || message == null) return;
 
@@ -186,6 +204,7 @@ export function status(message, options = {}) {
 
 status.clear = function clear() {
   clearTimeout(statusTimer);
+  healDetachedStatusTarget();
 
   const target = statusTarget();
   if (!target) {
@@ -228,10 +247,6 @@ function resolveStatusTrigger(trigger) {
   return target && target === statusTarget() ? target : null;
 }
 
-function connectStatusTrigger(trigger, target) {
-  trigger.setAttribute("aria-controls", target.id);
-}
-
 if (typeof document !== "undefined") {
   document.addEventListener(EVENTS.invalid, (event) => {
     const message = event.detail?.message;
@@ -254,9 +269,7 @@ if (typeof document !== "undefined") {
 
   registerCommands(STATUS_SHOW_COMMANDS, {
     resolve: resolveStatusTrigger,
-    prepare: connectStatusTrigger,
-    handle: (event, trigger) => {
-      event.preventDefault();
+    handle: (_event, trigger) => {
       dispatchStatusEvent(trigger, {
         message: trigger.getAttribute("data-status-message"),
         intent: trigger.getAttribute("data-status-intent") ?? undefined,
@@ -267,9 +280,7 @@ if (typeof document !== "undefined") {
 
   registerCommands(STATUS_CLEAR_COMMANDS, {
     resolve: resolveStatusTrigger,
-    prepare: connectStatusTrigger,
-    handle: (event, trigger) => {
-      event.preventDefault();
+    handle: (_event, trigger) => {
       dispatchStatusEvent(trigger, {});
     },
   });

package/src/js/surface.js

@@ -222,7 +222,10 @@ function startSurfaceResources(menu, state) {
 }
 
 export function isSurfaceOpen(menu) {
-  return menu.classList.contains(CLASSES.open);
+  // The open set is the source of truth; .is-open is only its visual
+  // projection. A morph touching classes must not orphan Escape entries,
+  // position tracking, or the open set.
+  return openSurfaces.has(menu);
 }
 
 export function prepareSurface(menu) {
@@ -304,8 +307,14 @@ export function openSurface(menu, opts = {}) {
   state.coordinateSpace = mode.space;
   menu.style.position = mode.position;
 
+  // Register before promoting: a position failure below closes the surface
+  // again, and that close must observe the open state to tear down.
+  openSurfaces.add(menu);
   // Promote before measuring: a closed popover has no box to position.
-  if (!showTransport(menu)) return false;
+  if (!showTransport(menu)) {
+    openSurfaces.delete(menu);
+    return false;
+  }
   menu.classList.add(CLASSES.open);
   syncExpanded(menu, true);
 
@@ -335,13 +344,12 @@ export function openSurface(menu, opts = {}) {
    * from; placing focus in the new surface is the caller's job, and both
    * callers in tree do it as soon as this returns.
    */
-  for (const other of openSurfaces) {
+  for (const other of [...openSurfaces]) {
     if (other !== menu && other.ownerDocument === menu.ownerDocument) {
       closeSurface(other, { restoreFocus: false });
     }
   }
 
-  openSurfaces.add(menu);
   startSurfaceResources(menu, state);
   return true;
 }
@@ -411,7 +419,3 @@ function ensureDocumentClick(menu) {
   clickBoundDocuments.add(doc);
   doc.addEventListener("click", onDocumentClick);
 }
-
-export function getSurfaceAutoClose(menu) {
-  return surfaceMap.get(menu)?.autoClose ?? "outside";
-}

package/src/js/tab.js

@@ -17,7 +17,7 @@
  */
 
 import { registerEnhancement } from "./enhance.js";
-import { itemForKey } from "./keys.js";
+import { itemForKey, shouldIgnoreKey } from "./keys.js";
 
 const TABLIST_SELECTOR = '[data-enhance~="tabs"]';
 
@@ -100,6 +100,7 @@ function initialize(list) {
 
 function onKeydown(e) {
   const list = e.currentTarget;
+  if (shouldIgnoreKey(e)) return;
   const tab = e.target.closest('[role="tab"]');
   if (!tab || tab.closest(TABLIST_SELECTOR) !== list) return;
 

package/src/js/tooltip.js

@@ -23,7 +23,16 @@
  *             for tooltips that are never triggered. AJAX-loaded triggers
  *             work automatically via bubbling delegated listeners.
  *
- * Show:       hover + focus (150ms delay), click toggle, or always visible
+ * Snapshot, not reactive: generated tooltip text is synchronized when
+ *             the tooltip is shown. Changes to data-tooltip do not rewrite
+ *             a tooltip that is already shown. Always-visible generated
+ *             tooltips therefore keep their initial text; use an explicit
+ *             tooltip when its content must update dynamically.
+ *
+ * Show:       hover + keyboard focus (150ms delay), click toggle, or always
+ *             visible. Focus counts only when it matches :focus-visible, so
+ *             a pointer press, or focus handed back by a closing dialog after
+ *             a pointer close, shows nothing.
  * Hide:       focus leaving the trigger (focusout), pointer leave, Escape
  *
  * Geometry:   a trigger scrolled out of the positioning boundary takes its tip
@@ -367,7 +376,10 @@ function ensureTip(trigger) {
   const text = trigger.getAttribute("data-tooltip");
   const doc = trigger.ownerDocument;
 
-  // shorthand: data-tooltip="text" → create element lazily
+  // shorthand: data-tooltip="text" → create element lazily.
+  // Shorthand content is always text. Never use innerHTML here:
+  // data-tooltip may hold application/user-provided strings. Rich content
+  // belongs in an explicit author-owned tooltip.
   if (text) {
     tip = doc.createElement("div");
     tip.className = CLASSES.tooltip;
@@ -467,6 +479,14 @@ function show(tip, ref, immediate = false) {
   const state = tipStates.get(tip);
   if (!state) return;
 
+  // Shorthand tips copy data-tooltip text at creation; re-read it on every
+  // show so a "Copy" → "Copied!" update is reflected without rewiring.
+  // Text only, never innerHTML — see the note at creation above.
+  if (state.generated) {
+    const text = ref.getAttribute("data-tooltip");
+    if (text && tip.textContent !== text) tip.textContent = text;
+  }
+
   state.activeRef = ref;
   const mode = positionModeFor(ref);
   state.space = mode.space;
@@ -502,6 +522,13 @@ function handleTriggerIntent(e) {
   )
     return;
 
+  // why: focus is a show intent only when it is keyboard focus. A pointer
+  // press focuses the trigger too, and a dialog or drawer closed with the
+  // pointer hands focus back to its invoker; neither asks for a label the
+  // user just acted on. :focus-visible is the browser's own modality verdict,
+  // the one the focus rings already follow, so Tab still shows the tip.
+  if (e.type === "focusin" && !e.target.matches(":focus-visible")) return;
+
   const tip = ensureTip(trigger);
   if (!tip) return;
 

package/src/js/validation.js

@@ -11,19 +11,20 @@
  * Opt in with data-enhance="validation". The .needs-validation class
  * remains valid for presentation-only (CSS :user-invalid feedback without
  * the JS behavior). Importing the module registers the behavior; there is
- * no init call.
+ * no init call. To opt existing forms in by selector, use
+ * applyEnhancement("validation", selector) so they join the enhance()
+ * lifecycle (inserted forms connect, removed forms tear down).
  *
  * The marker is a static, init-time contract. Removing the form from the
  * DOM tears down everything, including the managed novalidate attribute.
  */
 
-import enhance, { enhancementSelector } from "./enhance.js";
+import { registerEnhancement } from "./enhance.js";
 import { EVENTS } from "./events.js";
 import { CLASSES } from "./selectors.js";
 
 const NOVALIDATE = "novalidate";
 const WAS_VALIDATED_CLASS = CLASSES.wasValidated;
-const VALIDATION_SELECTOR = enhancementSelector("validation");
 const FIELD_CLASS = CLASSES.field;
 const DANGER_CLASS = CLASSES.danger;
 const MANAGED_NOVALIDATE_ATTR = "validationManagedNovalidate";
@@ -398,13 +399,6 @@ export class FormValidator {
     rules[name] = callback;
   }
 
-  static init(selector = `form${VALIDATION_SELECTOR}`) {
-    if (typeof document === "undefined") return;
-    for (const form of document.querySelectorAll(selector)) {
-      if (isFormElement(form)) connectForm(form);
-    }
-  }
-
   static setFieldError(el, message) {
     el.setCustomValidity(message || "invalid");
     el.dataset.validationErrors = "server";
@@ -435,10 +429,9 @@ export class FormValidator {
   }
 }
 
-if (typeof document !== "undefined") {
-  enhance({
-    [`form${VALIDATION_SELECTOR}`]: (form) => connectForm(form),
-  });
-}
+// Registered by name, not through a bare enhance(), so applyEnhancement()
+// refreshes it like the other token behaviors. The token only means
+// something on a form.
+registerEnhancement("validation", (el) => (isFormElement(el) ? connectForm(el) : undefined));
 
 export default FormValidator;