actual-css 0.1.0 → 0.3.0

package/src/js/focus-group.js

@@ -0,0 +1,116 @@
+import { itemForKey } from "./keys.js";
+
+const ORIENTATIONS = new Set(["horizontal", "vertical"]);
+
+function restoreTabIndex(item, value) {
+  if (value == null) item.removeAttribute("tabindex");
+  else item.setAttribute("tabindex", value);
+}
+
+export function connectFocusGroup(root, opts = {}) {
+  if (!root?.addEventListener || !root?.contains) {
+    throw new TypeError("connectFocusGroup() requires a root element.");
+  }
+  if (typeof opts.getItems !== "function") {
+    throw new TypeError("connectFocusGroup() requires getItems().");
+  }
+
+  const orientation = opts.orientation || "horizontal";
+  if (!ORIENTATIONS.has(orientation)) {
+    throw new TypeError(`Invalid focus-group orientation: ${orientation}`);
+  }
+
+  const controller = new AbortController();
+  const externalSignal = opts.signal || null;
+  const originalTabIndex = new Map();
+  let remembered = null;
+  let disconnected = false;
+
+  function getItems() {
+    const seen = new Set();
+    return [...(opts.getItems() || [])].filter((item) => {
+      if (typeof item?.focus !== "function" || !root.contains(item) || seen.has(item)) return false;
+      seen.add(item);
+      return true;
+    });
+  }
+
+  function restore(item) {
+    if (!originalTabIndex.has(item)) return;
+    restoreTabIndex(item, originalTabIndex.get(item));
+    originalTabIndex.delete(item);
+  }
+
+  function sync(preferred = remembered) {
+    if (disconnected) return [];
+
+    const items = getItems();
+    const itemSet = new Set(items);
+    for (const item of originalTabIndex.keys()) {
+      if (!itemSet.has(item)) restore(item);
+    }
+
+    const active = root.ownerDocument.activeElement;
+    const target =
+      (itemSet.has(preferred) && preferred) ||
+      (itemSet.has(active) && active) ||
+      items.find((item) => item.tabIndex === 0) ||
+      items[0] ||
+      null;
+
+    for (const item of items) {
+      if (!originalTabIndex.has(item)) {
+        originalTabIndex.set(item, item.getAttribute("tabindex"));
+      }
+      const tabIndex = item === target ? 0 : -1;
+      item.tabIndex = tabIndex;
+    }
+    remembered = target;
+    return items;
+  }
+
+  function onFocusIn(event) {
+    const items = getItems();
+    if (items.includes(event.target)) sync(event.target);
+  }
+
+  function onKeydown(event) {
+    const items = sync();
+    const current = root.ownerDocument.activeElement;
+    if (!items.includes(current)) return;
+
+    const style = root.ownerDocument.defaultView?.getComputedStyle?.(root);
+    const direction = style?.direction === "rtl" ? "rtl" : "ltr";
+    const target = itemForKey(items, current, event.key, {
+      orientation,
+      wrap: opts.wrap === true,
+      direction,
+    });
+    if (!target) return;
+
+    event.preventDefault();
+    sync(target);
+    target.focus();
+  }
+
+  root.addEventListener("focusin", onFocusIn, { signal: controller.signal });
+  root.addEventListener("keydown", onKeydown, { signal: controller.signal });
+
+  sync();
+
+  function disconnect() {
+    if (disconnected) return;
+    disconnected = true;
+    externalSignal?.removeEventListener("abort", disconnect);
+    controller.abort();
+    for (const item of originalTabIndex.keys()) restore(item);
+    remembered = null;
+  }
+
+  if (externalSignal) {
+    if (externalSignal.aborted) disconnect();
+    else externalSignal.addEventListener("abort", disconnect, { once: true });
+  }
+
+  return { sync, disconnect };
+}

package/src/js/focus.js

@@ -12,7 +12,12 @@ const FOCUSABLE_SELECTOR = [
 export function isElementVisible(el) {
   if (!el || el.hidden) return false;
   if (typeof el.checkVisibility === "function") return el.checkVisibility();
-  return el.getClientRects().length > 0;
+  if (el.getClientRects().length === 0) return false;
+  // checkVisibility() covers visibility:hidden; without it, read the
+  // computed direction of the cascade so a hidden element is not focusable.
+  const style = el.ownerDocument?.defaultView?.getComputedStyle?.(el);
+  if (!style) return true;
+  return style.visibility !== "hidden" && style.visibility !== "collapse";
 }
 
 function isFocusable(el) {

package/src/js/index.js

@@ -14,8 +14,7 @@
 import "./flyout.js";
 import "./context-menu.js";
 import "./dialog.js";
-// Legacy <dialog> shim for browsers below Baseline 2023; omit in custom builds.
-import "./dialog-fallback.js";
+import "./dismiss.js";
 import "./tab.js";
 import "./tooltip.js";
 import "./scrollspy.js";
@@ -24,3 +23,6 @@ import "./mask.js";
 import "./password.js";
 import "./validation.js";
 import "./status.js";
+import { watchEnhancementManifests } from "./enhancement-loader.js";
+
+watchEnhancementManifests();

package/src/js/input.js

@@ -7,7 +7,7 @@ export function selectionStart(el) {
 }
 
 export function setCaret(el, position) {
-  if (document.activeElement !== el) return;
+  if (el.ownerDocument.activeElement !== el) return;
   if (typeof el.setSelectionRange !== "function") return;
   try {
     el.setSelectionRange(position, position);

package/src/js/keys.js

@@ -28,3 +28,30 @@ export function nextItem(items, current, delta, opts = {}) {
   const wrapped = ((next % items.length) + items.length) % items.length;
   return items[wrapped];
 }
+
+export function itemForKey(items, current, key, opts = {}) {
+  const orientation = opts.orientation || "horizontal";
+  const wrap = opts.wrap === true;
+  const direction = opts.direction || "ltr";
+
+  switch (key) {
+    case "Home":
+      return firstItem(items);
+    case "End":
+      return lastItem(items);
+    case "ArrowRight":
+      if (orientation !== "horizontal") return null;
+      return nextItem(items, current, direction === "rtl" ? -1 : 1, { wrap });
+    case "ArrowLeft":
+      if (orientation !== "horizontal") return null;
+      return nextItem(items, current, direction === "rtl" ? 1 : -1, { wrap });
+    case "ArrowDown":
+      if (orientation !== "vertical") return null;
+      return nextItem(items, current, 1, { wrap });
+    case "ArrowUp":
+      if (orientation !== "vertical") return null;
+      return nextItem(items, current, -1, { wrap });
+    default:
+      return null;
+  }
+}

package/src/js/mask.js

@@ -55,21 +55,22 @@ function rawMaskChars(value, mask) {
   return parseMaskValue(value, mask).raw;
 }
 
-function appendFollowingLiterals(mask, start) {
+function appendFollowingLiterals(pattern, start) {
   let out = "";
-  for (let i = start; i < mask.length && !isToken(mask[i]); i++) {
-    out += mask[i];
+  for (let i = start; i < pattern.length && !isToken(pattern[i]); i++) {
+    out += pattern[i];
   }
   return out;
 }
 
 function formatRaw(raw, mask, inputType = "") {
   const autoLiteral = inputType.startsWith("insert");
+  const pattern = [...mask];
   let rawIndex = 0;
   let out = "";
 
-  for (let i = 0; i < mask.length; i++) {
-    const token = mask[i];
+  for (let i = 0; i < pattern.length; i++) {
+    const token = pattern[i];
 
     if (!isToken(token)) {
       if (rawIndex < raw.length) out += token;
@@ -89,7 +90,7 @@ function formatRaw(raw, mask, inputType = "") {
     if (!matched) break;
 
     if (autoLiteral && rawIndex >= raw.length) {
-      out += appendFollowingLiterals(mask, i + 1);
+      out += appendFollowingLiterals(pattern, i + 1);
       break;
     }
   }

package/src/js/menu.js

@@ -1,15 +1,9 @@
 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(",");
+import { connectFocusGroup } from "./focus-group.js";
+import { firstItem, itemForKey, lastItem } from "./keys.js";
+
+const MENU_ITEM_SELECTOR = ":scope > li > .menu-item";
+const MENU_ITEM_ROLES = new Set(["menuitem", "menuitemcheckbox", "menuitemradio"]);
 
 function isUsableMenuItem(item) {
   return (
@@ -25,11 +19,11 @@ export function getMenuItems(menu) {
 }
 
 function isAriaMenuItem(item) {
-  return item.getAttribute("role") === "menuitem";
+  return MENU_ITEM_ROLES.has(item.getAttribute("role"));
 }
 
 function activateCurrentItem(menu) {
-  const item = document.activeElement;
+  const item = menu.ownerDocument.activeElement;
   if (!menu.contains(item) || !isAriaMenuItem(item)) return false;
 
   item.click();
@@ -40,8 +34,13 @@ export function hasMenuItems(menu) {
   return getMenuItems(menu).length > 0;
 }
 
-export function hasMenuItem(target) {
-  return !!target.closest?.(MENU_ITEM_SELECTOR);
+function getMenuItem(menu, target) {
+  const item = target?.closest?.(".menu-item");
+  return item?.parentElement?.parentElement === menu ? item : null;
+}
+
+export function hasMenuItem(menu, target) {
+  return !!getMenuItem(menu, target);
 }
 
 export function focusFirstMenuItem(menu) {
@@ -52,28 +51,22 @@ export function focusLastMenuItem(menu) {
   lastItem(getMenuItems(menu))?.focus();
 }
 
-export function onMenuKeydown(e, { close }) {
+export function onMenuKeydown(e, { close, navigate = true }) {
   const menu = e.currentTarget;
-  const items = getMenuItems(menu);
-  if (!items.length) return;
+  if (navigate) {
+    const items = getMenuItems(menu);
+    const target = itemForKey(items, menu.ownerDocument.activeElement, e.key, {
+      orientation: "vertical",
+      wrap: true,
+    });
+    if (target) {
+      e.preventDefault();
+      target.focus();
+      return;
+    }
+  }
 
   switch (e.key) {
-    case "ArrowDown":
-      e.preventDefault();
-      nextItem(items, document.activeElement, 1, { wrap: true })?.focus();
-      break;
-    case "ArrowUp":
-      e.preventDefault();
-      nextItem(items, document.activeElement, -1, { wrap: true })?.focus();
-      break;
-    case "Home":
-      e.preventDefault();
-      firstItem(items)?.focus();
-      break;
-    case "End":
-      e.preventDefault();
-      lastItem(items)?.focus();
-      break;
     case "Tab":
       close(menu);
       break;
@@ -81,8 +74,69 @@ export function onMenuKeydown(e, { close }) {
     case " ":
       if (activateCurrentItem(menu)) {
         e.preventDefault();
-        close(menu);
       }
       break;
   }
 }
+
+// Menu wiring is a shared, ref-counted resource: a menu may be retained by
+// several triggers (or by flyout and context-menu at once), so the listeners
+// and their AbortController belong to the menu, not to any single caller.
+// Each retain returns a release(); the wiring is torn down on the last one.
+const menuConnections = new WeakMap();
+
+export function connectMenu(menu, { close }) {
+  let entry = menuConnections.get(menu);
+
+  if (!entry) {
+    const controller = new AbortController();
+    const focusGroup = menu.matches('[role="menu"]')
+      ? connectFocusGroup(menu, {
+          getItems: () => getMenuItems(menu).filter(isAriaMenuItem),
+          orientation: "vertical",
+          wrap: true,
+          signal: controller.signal,
+        })
+      : null;
+    menu.addEventListener(
+      "keydown",
+      (event) =>
+        onMenuKeydown(event, {
+          close: () => close(menu),
+          navigate: !focusGroup,
+        }),
+      { signal: controller.signal },
+    );
+    menu.addEventListener(
+      "click",
+      (event) => {
+        const item = getMenuItem(menu, event.target);
+        if (!item) return;
+
+        if (item.matches(":disabled, [aria-disabled='true']")) {
+          event.preventDefault();
+          // A disabled command must not reach the surface-level inside-click
+          // policy and dismiss the menu as if it had been activated.
+          event.stopPropagation();
+          return;
+        }
+      },
+      { signal: controller.signal },
+    );
+    entry = { count: 0, controller, focusGroup };
+    menuConnections.set(menu, entry);
+  }
+
+  entry.count++;
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    entry.count--;
+    if (entry.count <= 0) {
+      entry.focusGroup?.disconnect();
+      entry.controller.abort();
+      menuConnections.delete(menu);
+    }
+  };
+}

package/src/js/parse-config.js

@@ -0,0 +1,47 @@
+/*
+ * parse-config.js — Configuration parsing for data-enhance-config.
+ *
+ * Strict JSON is parsed as-is, never rewritten. When strict JSON fails, a
+ * small, deliberate relax step accepts the ergonomic subset that is common in
+ * HTML attributes: unquoted keys and single-quoted strings. The relaxed
+ * subset is intentionally tiny and is NOT a second grammar — anything it
+ * cannot transform cleanly is rejected by the final JSON.parse. The root
+ * value must be an object; bare string values (other than true/false/null)
+ * stay invalid, and trailing commas are rejected.
+ */
+
+function relax(source) {
+  return source.replace(
+    /([a-zA-Z_$][\w$-]*)\s*:|'((?:\\'|[^'])*)'/g,
+    (_match, key, stringContent) => {
+      if (key) return `"${key}":`;
+      const unescaped = stringContent.replace(/\\'/g, "'");
+      const escaped = unescaped.replace(/"/g, '\\"');
+      return `"${escaped}"`;
+    },
+  );
+}
+
+export function parseConfig(source) {
+  if (source == null || typeof source !== "string") return {};
+  const str = source.trim();
+  if (str === "") return {};
+
+  let text = str;
+  let value;
+  try {
+    value = JSON.parse(text);
+  } catch {
+    const relaxed = relax(text);
+    text = relaxed.startsWith("{") ? relaxed : `{${relaxed}}`;
+    value = JSON.parse(text);
+  }
+
+  if (value === null || typeof value !== "object" || Array.isArray(value)) {
+    throw new TypeError("Enhancement config must be an object");
+  }
+
+  return value;
+}
+
+export default parseConfig;

package/src/js/password.js

@@ -93,6 +93,14 @@ if (typeof document !== "undefined") {
   document.addEventListener("submit", handleSubmit);
 
   window.addEventListener("pagehide", () => {
-    for (const input of revealed) setRevealed(input, false);
+    for (const input of revealed) {
+      // Opportunistic housekeeping: an input removed from the DOM before
+      // navigation no longer needs reverting and can leave the set.
+      if (!input.isConnected) {
+        revealed.delete(input);
+        continue;
+      }
+      setRevealed(input, false);
+    }
   });
 }