actual-css 0.2.0 → 0.3.0

package/src/js/tab.js

@@ -16,12 +16,17 @@
  */
 
 import { registerEnhancement } from "./enhance.js";
-import { firstItem, lastItem, nextItem } from "./keys.js";
+import { itemForKey } from "./keys.js";
 
 const TABLIST_SELECTOR = '[data-enhance~="tabs"]';
 
+// A tablist owns only the tabs directly beneath it, not those of a nested
+// tablist. Filtering by closest owner keeps the outer list from operating on
+// (and re-reacting to events from) tabs that belong to an inner list.
 function tabsOf(list) {
-  return [...list.querySelectorAll('[role="tab"]')];
+  return [...list.querySelectorAll('[role="tab"]')].filter(
+    (tab) => tab.closest(TABLIST_SELECTOR) === list,
+  );
 }
 
 function panelsOf(tabs) {
@@ -35,7 +40,7 @@ function panelsOf(tabs) {
 
 function panelFor(tab) {
   const panelId = tab.getAttribute("aria-controls");
-  return panelId ? document.getElementById(panelId) : null;
+  return panelId ? tab.ownerDocument.getElementById(panelId) : null;
 }
 
 function isTabDisabled(tab) {
@@ -89,68 +94,46 @@ function initialize(list) {
 }
 
 function onKeydown(e) {
+  const list = e.currentTarget;
   const tab = e.target.closest('[role="tab"]');
-  if (!tab) return;
-  const list = tab.closest(TABLIST_SELECTOR);
-  if (!list) return;
+  if (!tab || tab.closest(TABLIST_SELECTOR) !== list) return;
 
   const tabs = activatableTabs(list);
   if (!tabs.length || !tabs.includes(tab)) return;
   const isVertical = list.getAttribute("aria-orientation") === "vertical";
-  let next;
 
-  switch (e.key) {
-    case "ArrowRight":
-      if (isVertical) break;
-      e.preventDefault();
-      next = nextItem(tabs, tab, 1, { wrap: true });
-      if (next) activateAndFocus(next);
-      break;
-    case "ArrowLeft":
-      if (isVertical) break;
-      e.preventDefault();
-      next = nextItem(tabs, tab, -1, { wrap: true });
-      if (next) activateAndFocus(next);
-      break;
-    case "ArrowDown":
-      if (!isVertical) {
-        e.preventDefault();
-        const panel = panelFor(tab);
-        if (panel) {
-          makePanelFocusable(panel);
-          panel.focus();
-        }
-        break;
-      }
-      e.preventDefault();
-      next = nextItem(tabs, tab, 1, { wrap: true });
-      if (next) activateAndFocus(next);
-      break;
-    case "ArrowUp":
-      if (!isVertical) break;
-      e.preventDefault();
-      next = nextItem(tabs, tab, -1, { wrap: true });
-      if (next) activateAndFocus(next);
-      break;
-    case "Home":
-      e.preventDefault();
-      activateAndFocus(firstItem(tabs));
-      break;
-    case "End":
-      e.preventDefault();
-      activateAndFocus(lastItem(tabs));
-      break;
-    case "Enter":
-    case " ":
+  if (e.key === "ArrowDown" && !isVertical) {
+    const panel = panelFor(tab);
+    if (panel) {
       e.preventDefault();
-      activate(tab);
-      break;
+      makePanelFocusable(panel);
+      panel.focus();
+    }
+    return;
+  }
+
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    activate(tab);
+    return;
   }
+
+  const direction = list.ownerDocument.defaultView?.getComputedStyle(list).direction || "ltr";
+  const target = itemForKey(tabs, tab, e.key, {
+    orientation: isVertical ? "vertical" : "horizontal",
+    wrap: true,
+    direction,
+  });
+  if (!target) return;
+
+  e.preventDefault();
+  activateAndFocus(target);
 }
 
 function onClick(e) {
+  const list = e.currentTarget;
   const tab = e.target.closest('[role="tab"]');
-  if (!tab) return;
+  if (!tab || tab.closest(TABLIST_SELECTOR) !== list) return;
   if (isTabDisabled(tab)) {
     e.preventDefault();
     return;

package/src/js/tooltip.js

@@ -28,8 +28,7 @@
  */
 
 import enhance from "./enhance.js";
-import { EVENTS } from "./events.js";
-import { reposition, track } from "./floating.js";
+import { autoUpdate, reposition } from "./floating.js";
 import { CLASSES } from "./selectors.js";
 
 const SHOW_DELAY_MS = 150;
@@ -40,12 +39,13 @@ const HIDE_DELAY_MS = 100;
  * @property {Set<Element>} refs Triggers that currently reference this tip.
  * @property {Element | null} activeRef Trigger that last showed this tip.
  * @property {AbortController} controller Tip-level event listener cleanup.
- * @property {() => void} untrack Floating-position cleanup.
+ * @property {() => void} stopTracking Floating-position cleanup.
  * @property {boolean} generated True when the tip was created from data-tooltip text.
  * @property {{ parent: Node, next: ChildNode | null } | null} mount Original DOM position for explicit tips moved into a dialog/body root.
  * @property {ReturnType<typeof setTimeout> | null} timer Pending delayed show.
  * @property {ReturnType<typeof setTimeout> | null} hideTimer Pending delayed hide.
- * @property {boolean} overRef Pointer is over the active trigger.
+ * @property {boolean} hovered Pointer is over the active trigger.
+ * @property {boolean} focused The active trigger has keyboard focus.
  * @property {boolean} overTip Pointer is over the tooltip.
  */
 
@@ -132,7 +132,7 @@ function nextTooltipId(doc) {
 }
 
 function repositionTip(ref, tip) {
-  reposition(ref, tip, {
+  return reposition(ref, tip, {
     placement: placementFor(ref),
     distance: 6,
     flip: true,
@@ -165,11 +165,11 @@ function scheduleHide(tip) {
   const state = tipStates.get(tip);
   if (!state) return;
   if (isClickTrigger(state.activeRef) || isAlwaysVisible(state.activeRef)) return;
-  if (state.overRef || state.overTip) return;
+  if (state.hovered || state.focused || state.overTip) return;
   if (state.hideTimer) clearTimeout(state.hideTimer);
   state.hideTimer = setTimeout(() => {
     state.hideTimer = null;
-    if (!state.overRef && !state.overTip) hideTip(tip);
+    if (!state.hovered && !state.focused && !state.overTip) hideTip(tip);
   }, HIDE_DELAY_MS);
 }
 
@@ -185,25 +185,21 @@ function wireTip(tip, options = {}) {
     refs: new Set(),
     activeRef: null,
     controller,
-    untrack: track(tip),
+    stopTracking: autoUpdate(tip, () => {
+      if (isAlwaysVisible(state.activeRef)) tip.hidden = false;
+      if (!tip.hidden && state.activeRef) {
+        if (!repositionTip(state.activeRef, tip)) hideTip(tip, true);
+      }
+    }),
     generated: options.generated === true,
     mount: options.mount || null,
     timer: null,
     hideTimer: null,
-    overRef: false,
+    hovered: false,
+    focused: false,
     overTip: false,
   };
 
-  const onHide = () => hideTip(tip);
-  const onOutOfView = () => hideTip(tip, true);
-  const onReposition = () => {
-    if (isAlwaysVisible(state.activeRef)) tip.hidden = false;
-    if (!tip.hidden && state.activeRef) repositionTip(state.activeRef, tip);
-  };
-
-  tip.addEventListener(EVENTS.reposition, onReposition, { signal: controller.signal });
-  tip.addEventListener(EVENTS.hide, onHide, { signal: controller.signal });
-  tip.addEventListener(EVENTS.outOfView, onOutOfView, { signal: controller.signal });
   tip.addEventListener(
     "mouseenter",
     () => {
@@ -221,6 +217,17 @@ function wireTip(tip, options = {}) {
     { signal: controller.signal },
   );
 
+  tip.ownerDocument.addEventListener(
+    "keydown",
+    (event) => {
+      if (event.key !== "Escape" || event.ctrlKey || event.altKey || event.shiftKey) return;
+      if (tip.hidden) return;
+      event.preventDefault();
+      hideTip(tip);
+    },
+    { signal: controller.signal },
+  );
+
   tipStates.set(tip, state);
   return state;
 }
@@ -256,10 +263,11 @@ function ensureTip(trigger) {
   if (!tip) {
     tip = explicitTipFor(trigger);
     if (!tip) return null;
-    tip.hidden = true;
-    tip.style.position = "fixed";
-
+    // Wire and mount the shared tip only on first retain. A later trigger
+    // must not re-hide a tooltip that is currently visible for another.
     if (!tipStates.has(tip)) {
+      tip.hidden = true;
+      tip.style.position = "fixed";
       mount = mountTip(tip, trigger);
     }
   }
@@ -268,12 +276,22 @@ function ensureTip(trigger) {
   state.refs.add(trigger);
 
   const triggerController = new AbortController();
-  const onLeave = () => {
-    state.overRef = false;
-    scheduleHide(tip);
-  };
-  trigger.addEventListener("mouseleave", onLeave, { signal: triggerController.signal });
-  trigger.addEventListener("blur", onLeave, { signal: triggerController.signal });
+  trigger.addEventListener(
+    "mouseleave",
+    () => {
+      state.hovered = false;
+      scheduleHide(tip);
+    },
+    { signal: triggerController.signal },
+  );
+  trigger.addEventListener(
+    "blur",
+    () => {
+      state.focused = false;
+      scheduleHide(tip);
+    },
+    { signal: triggerController.signal },
+  );
 
   const cleanup = () => {
     triggerController.abort();
@@ -290,7 +308,7 @@ function ensureTip(trigger) {
 
     hideTip(tip, true);
     state.controller.abort();
-    state.untrack();
+    state.stopTracking();
     tipStates.delete(tip);
     if (state.generated) tip.remove();
     else restoreTip(tip, state);
@@ -310,7 +328,6 @@ function show(tip, ref, immediate = false) {
   if (!state) return;
 
   state.activeRef = ref;
-  state.overRef = true;
   clearHide(tip);
   if (state.timer) clearTimeout(state.timer);
   const reveal = () => {
@@ -339,7 +356,12 @@ function handleTriggerIntent(e) {
     return;
 
   const tip = ensureTip(trigger);
-  if (tip) show(tip, trigger);
+  if (!tip) return;
+
+  const state = tipStates.get(tip);
+  if (e.type === "focusin") state.focused = true;
+  else state.hovered = true;
+  show(tip, trigger);
 }
 
 function handleTriggerClick(e) {

package/src/js/validation.js

@@ -74,8 +74,11 @@ const rules = {
       return false;
     }
   },
+  // A user-entered decimal: optional sign, digits with optional fraction,
+  // optional exponent. Rejects JS-isms that Number() would accept (0x10,
+  // Infinity, scientific shorthand, whitespace).
   number(v) {
-    return !Number.isNaN(Number(v));
+    return /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?$/.test(v);
   },
   digits(v) {
     return /^\d+$/.test(v);
@@ -106,18 +109,28 @@ function fieldContainer(el) {
   return el.closest?.(`.${FIELD_CLASS}`) || null;
 }
 
-// .field.danger is validation-owned state, added/removed here based on
-// aria-invalid/data-validation-errors on the field's controls. A .danger
-// applied manually by app code for an unrelated reason will be removed the
-// next time this runs.
+// .field.danger added by validation is tracked in a WeakSet so that only
+// validation-owned state is removed. A .danger applied manually by app code
+// for an unrelated reason is left alone: validation claims ownership only
+// when it introduces the class itself.
+const dangerOwned = new WeakSet();
+
+function markDangerOwned(field) {
+  if (!field.classList.contains(DANGER_CLASS)) {
+    dangerOwned.add(field);
+  }
+  field.classList.add(DANGER_CLASS);
+}
+
 function syncFieldDangerState(el) {
   const field = fieldContainer(el);
   if (!field) return;
 
   if (field.querySelector('[aria-invalid="true"], [data-validation-errors]')) {
-    field.classList.add(DANGER_CLASS);
-  } else {
+    markDangerOwned(field);
+  } else if (dangerOwned.has(field)) {
     field.classList.remove(DANGER_CLASS);
+    dangerOwned.delete(field);
   }
 }
 
@@ -181,7 +194,10 @@ function errorEl(el) {
 
 function markInvalid(el) {
   el.setAttribute("aria-invalid", "true");
-  fieldContainer(el)?.classList.add(DANGER_CLASS);
+  const field = fieldContainer(el);
+  if (field) {
+    markDangerOwned(field);
+  }
 }
 
 function markValid(el) {
@@ -322,6 +338,10 @@ function connectForm(form) {
     { signal: controller.signal },
   );
 
+  // Disconnect contract: release resources only. Validation-owned classes,
+  // aria-invalid, custom validity, and rendered errors are intentionally left
+  // in place, so a move/remove/reinsert of the form does not erase business
+  // state. A full reset goes through the reset event, not teardown.
   const cleanup = () => {
     controller.abort();
     releaseManagedNoValidate(form);
@@ -338,6 +358,12 @@ export class FormValidator {
   }
 
   static registerRule(name, callback) {
+    if (typeof name !== "string" || name.trim() === "") {
+      throw new TypeError("registerRule() requires a non-empty rule name.");
+    }
+    if (typeof callback !== "function") {
+      throw new TypeError(`registerRule("${name}") requires a function callback.`);
+    }
     rules[name] = callback;
   }