actual-css 0.1.0 → 0.3.0

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

@@ -8,27 +8,22 @@
  * framework: server / AJAX validation lives in app code and feeds results
  * back through FormValidator.setErrors().
  *
- * Opt in with the .needs-validation class. Importing the module registers
- * the behavior; there is no init call.
+ * 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.
  *
- * The .needs-validation class is a static, init-time contract: this module
- * does not observe attribute mutations, so toggling the class after connect
- * only takes effect on the next focusout/input event, not immediately. A
- * submit that races that window can still bypass native validation (the
- * managed novalidate attribute is still present). Treat the class as fixed
- * for a form's lifetime rather than something toggled at runtime. Removing
- * the form from the DOM, however, is fully supported: the enhance() sweep
- * runs the cleanup below, which aborts all listeners, removes the managed
- * novalidate attribute, and releases the form's internal state.
+ * The marker is a static, init-time contract. Removing the form from the
+ * DOM tears down everything, including the managed novalidate attribute.
  */
 
-import enhance from "./enhance.js";
+import enhance, { enhancementSelector } from "./enhance.js";
 import { EVENTS } from "./events.js";
 import { CLASSES } from "./selectors.js";
 
 const NOVALIDATE = "novalidate";
 const WAS_VALIDATED_CLASS = CLASSES.wasValidated;
-const NEEDS_VALIDATION_CLASS = CLASSES.needsValidation;
+const VALIDATION_SELECTOR = enhancementSelector("validation");
 const FIELD_CLASS = CLASSES.field;
 const DANGER_CLASS = CLASSES.danger;
 const MANAGED_NOVALIDATE_ATTR = "validationManagedNovalidate";
@@ -79,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);
@@ -111,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);
   }
 }
 
@@ -177,7 +185,7 @@ function errorEl(el) {
   if (!ids) return null;
   for (const id of ids.split(/\s+/)) {
     const node = el.ownerDocument.getElementById(id);
-    if (node?.classList.contains(CLASSES.fieldError)) {
+    if (node?.matches(`.${CLASSES.fieldError}, [data-field-error]`)) {
       return node;
     }
   }
@@ -186,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) {
@@ -205,14 +216,6 @@ function hydrateServerErrors(form) {
   }
 }
 
-function ensureManagedNoValidate(form) {
-  if (!form.classList.contains(NEEDS_VALIDATION_CLASS)) return;
-  if (form.hasAttribute(NOVALIDATE)) return;
-
-  form.setAttribute(NOVALIDATE, "");
-  form.dataset[MANAGED_NOVALIDATE_ATTR] = "";
-}
-
 function releaseManagedNoValidate(form) {
   if (form.dataset[MANAGED_NOVALIDATE_ATTR] === undefined) return;
   form.removeAttribute(NOVALIDATE);
@@ -220,8 +223,6 @@ function releaseManagedNoValidate(form) {
 }
 
 function validateField(el, trigger) {
-  const form = el.form;
-  if (!form?.classList.contains(NEEDS_VALIDATION_CLASS)) return;
   if (ignoreField(el)) return;
 
   if (trigger === "input" && el.dataset.validationErrors === "server") {
@@ -261,11 +262,6 @@ function connectForm(form) {
     (event) => {
       const el = event.target;
       if (el instanceof Element && el.form === form) {
-        if (!form.classList.contains(NEEDS_VALIDATION_CLASS)) {
-          releaseManagedNoValidate(form);
-          return;
-        }
-        ensureManagedNoValidate(form);
         validateField(el, "blur");
       }
     },
@@ -277,11 +273,6 @@ function connectForm(form) {
     (event) => {
       const el = event.target;
       if (el instanceof Element && el.form === form) {
-        if (!form.classList.contains(NEEDS_VALIDATION_CLASS)) {
-          releaseManagedNoValidate(form);
-          return;
-        }
-        ensureManagedNoValidate(form);
         validateField(el, "input");
       }
     },
@@ -306,13 +297,6 @@ function connectForm(form) {
     (event) => {
       if (event.submitter?.formNoValidate) return;
 
-      if (!form.classList.contains(NEEDS_VALIDATION_CLASS)) {
-        releaseManagedNoValidate(form);
-        return;
-      }
-
-      ensureManagedNoValidate(form);
-
       let firstInvalid = null;
 
       for (const el of form.elements) {
@@ -354,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);
@@ -370,10 +358,16 @@ 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;
   }
 
-  static init(selector = `.${NEEDS_VALIDATION_CLASS}`) {
+  static init(selector = VALIDATION_SELECTOR) {
     if (typeof document === "undefined") return;
     for (const form of document.querySelectorAll(selector)) {
       if (isFormElement(form)) connectForm(form);
@@ -412,7 +406,7 @@ export class FormValidator {
 
 if (typeof document !== "undefined") {
   enhance({
-    [`form.${NEEDS_VALIDATION_CLASS}`]: (form) => connectForm(form),
+    [`form${VALIDATION_SELECTOR}`]: (form) => connectForm(form),
   });
 }