animl 0.0.0-stage → 0.1.1

package/modules/a11y-actions/core/diff.d.ts

@@ -0,0 +1,2 @@
+import type { SemanticNode, SemanticDiff } from '../../a11y/core/types.js';
+export declare function semanticDiff(prev: SemanticNode[], next: SemanticNode[]): SemanticDiff;

package/modules/a11y-actions/core/diff.js

@@ -0,0 +1,24 @@
+import { flat } from "../../a11y/core/tree.js";
+const equal = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+function semanticDiff(prev, next) {
+  const a = new Map(flat(prev).map((n) => [n.id, n]));
+  const b = new Map(flat(next).map((n) => [n.id, n]));
+  return {
+    added: [...b.keys()].filter((id) => !a.has(id)),
+    removed: [...a.keys()].filter((id) => !b.has(id)),
+    changed: [...b].flatMap(([id, n]) => {
+      const old = a.get(id);
+      if (!old) return [];
+      const keys = [.../* @__PURE__ */ new Set([...Object.keys(old), ...Object.keys(n)])].filter(
+        (k) => k === "children" ? !equal(
+          old.children.map((c) => c.id),
+          n.children.map((c) => c.id)
+        ) : !equal(old[k], n[k])
+      );
+      return keys.length ? [{ id, keys }] : [];
+    })
+  };
+}
+export {
+  semanticDiff
+};

package/modules/a11y-actions/core/index.d.ts

@@ -0,0 +1,4 @@
+import type { Module } from '../../../packages/core/src/modules.js';
+export { semanticDiff } from './diff.js';
+export * from '../../a11y/core/types.js';
+export declare const a11yActions: Module;

package/modules/a11y-actions/core/index.js

@@ -0,0 +1,133 @@
+import { clamp } from "../../../packages/core/src/geom.js";
+const tapKey = (c) => c.activate ?? [c.checked, c.pressed, c.selected].find((v) => typeof v === "string");
+import { after } from "../manifest.js";
+import { semanticDiff } from "./diff.js";
+import { semanticDiff as semanticDiff2 } from "./diff.js";
+export * from "../../a11y/core/types.js";
+const pending = /* @__PURE__ */ new WeakMap();
+const installed = /* @__PURE__ */ new WeakSet();
+const focusInstalled = /* @__PURE__ */ new WeakSet();
+const a11yActions = {
+  name: "a11yactions",
+  after,
+  entries: [],
+  init(modules, shared) {
+    const base = modules.get("a11y");
+    if (!base) return a11yActions;
+    const runtime = base.runtime;
+    runtime.version = modules.size;
+    const { caches, flat } = runtime;
+    runtime.update = (p, cache, old) => {
+      const { entries, tree } = cache;
+      const live = flat(tree), ancestry = /* @__PURE__ */ new Set();
+      let at = entries.find((e) => e.id === p.focused);
+      while (at) {
+        ancestry.add(at.id);
+        at = entries.find((e) => e.id === at.parent);
+      }
+      for (const n of live) {
+        const e = entries.find((e2) => e2.id === n.id), c = e.config, d = e.data;
+        if (!d.disabled) {
+          const writable = (key) => !d.readonly && typeof key === "string" && !e.p.model.inputs.get(key)?.readonly;
+          if (writable(tapKey(c))) n.actions.push("tap");
+          if (c.role === "slider" && writable(c.value)) n.actions.push("increase", "decrease");
+          if (e.p.focusItems?.().some((f) => f.id === e.p.model.nodes[e.i].id))
+            n.actions.push("focus");
+        }
+        if (n.actions.includes("focus")) n.states.focused = ancestry.has(n.id);
+      }
+      const targets = live.filter((n) => n.actions.includes("focus"));
+      if (p.focused && !targets.some((n) => n.id === p.focused)) {
+        const previous = old?.entries ?? entries;
+        let ancestor = previous.find((e) => e.id === p.focused);
+        while (ancestor && !targets.some((n) => n.id === ancestor.id))
+          ancestor = previous.find((e) => e.id === ancestor.parent);
+        const order = previous.findIndex((e) => e.id === p.focused);
+        const next = targets.find((n) => entries.findIndex((e) => e.id === n.id) > order) ?? targets[0];
+        p.focusTarget?.(ancestor?.id ?? next?.id ?? null);
+        return true;
+      }
+      return false;
+    };
+    const P = shared.Player;
+    if (modules.has("focus") && !focusInstalled.has(P.prototype)) {
+      focusInstalled.add(P.prototype);
+      const items = P.prototype.focusItems;
+      if (items)
+        P.prototype.focusItems = function(all) {
+          if (!caches.has(this) && this.model.doc.requires?.includes("a11y")) this.semantics();
+          const cache = caches.get(this);
+          return items.call(this, all).map((n) => {
+            const bounds = cache?.entries.find((e) => e.id === n.id)?.bounds;
+            return bounds && !n.config.bounds ? {
+              ...n,
+              point: [bounds[0] + bounds[2] / 2, bounds[1] + bounds[3] / 2]
+            } : n;
+          }).filter((n) => {
+            let e = cache?.entries.find((e2) => e2.id === n.id);
+            if (all || !e) return true;
+            if (e.config && (e.data.disabled || !flat(cache.tree).some((v) => v.id === n.id)))
+              return false;
+            for (; e; e = cache.entries.find((x) => x.id === e.parent))
+              if (!e.visible) return false;
+            return true;
+          });
+        };
+      P.prototype.machineFocus = function(id) {
+        return this.focused === id || !!this.model.doc.requires?.includes("a11y") && flat(this.semantics()).some((n) => n.id === id && n.states.focused);
+      };
+    }
+    if (!installed.has(P.prototype)) {
+      installed.add(P.prototype);
+      P.prototype.semanticDiff = semanticDiff;
+      P.prototype.semanticAction = function(id, action) {
+        const node = flat(this.semantics()).find((n) => n.id === id);
+        if (!node?.actions.includes(action)) return false;
+        if (action === "focus") return this.focusTarget?.(id) ?? false;
+        const e = caches.get(this).entries.find((e2) => e2.id === id);
+        const c = e.config;
+        if (action === "tap") {
+          const key = tapKey(c);
+          if (e.p.model.inputs.get(key)?.type === "trigger") e.p.fire(key);
+          else e.p.toggle(key);
+        } else {
+          const input = e.p.model.inputs.get(c.value), key = input.name;
+          const values = pending.get(e.p) ?? /* @__PURE__ */ new Map();
+          pending.set(e.p, values);
+          const range = (v) => clamp(
+            clamp(v + (action === "increase" ? 1 : -1) * node.step, node.min, node.max),
+            input.min,
+            input.max
+          );
+          const from = values.get(key) ?? e.p.get(key), value = range(from);
+          if (value === from) return false;
+          values.set(key, value);
+          e.p.act({
+            fire: [],
+            toggle: [],
+            set: [
+              [
+                key,
+                () => {
+                  values.delete(key);
+                  return range(e.p.get(key));
+                }
+              ]
+            ]
+          });
+        }
+        return true;
+      };
+    }
+    return a11yActions;
+  },
+  resolve(model) {
+    for (const n of model.nodes)
+      if (n.raw.a11y && "button checkbox switch radio slider tab gridcell link list-item".split(" ").includes(n.raw.a11y.role) && !n.raw.focus)
+        n.raw = { ...n.raw, focus: { tabStops: true, bounds: n.raw.a11y.bounds } };
+  }
+};
+export {
+  a11yActions,
+  semanticDiff2 as semanticDiff
+};

package/modules/a11y-actions/manifest.d.ts

@@ -0,0 +1,29 @@
+export declare const after: string[];
+declare const _default: {
+    name: string;
+    summary: string;
+    after: string[];
+    core: {
+        entry: string;
+        export: string;
+    };
+    web: {
+        name: string;
+        budget: number;
+        over: string;
+    }[];
+    adapters: {
+        'packages/core/src/modules/a11y-actions/index.ts': string;
+        'packages/web/src/a11y-actions.ts': string;
+        'packages/web/src/a11yactions.ts': string;
+    };
+    exports: {
+        'core:./a11y-actions': string;
+        'web:./a11y-actions': string;
+        'web:./a11yactions': string;
+    };
+    tests: string[];
+    conformance: never[];
+    docs: string[];
+};
+export default _default;

package/modules/a11y-actions/manifest.js

@@ -0,0 +1,25 @@
+const after = ["a11y"];
+var manifest_default = {
+  name: "a11y-actions",
+  summary: "Accessibility actions (tap, increase, decrease, focus) that drive listeners like real input.",
+  after,
+  core: { entry: "core/index.ts", export: "a11yActions" },
+  web: [{ name: "a11y-actions", budget: 1216, over: "a11y" }],
+  adapters: {
+    "packages/core/src/modules/a11y-actions/index.ts": "core/index.ts",
+    "packages/web/src/a11y-actions.ts": "web/index.ts",
+    "packages/web/src/a11yactions.ts": "web/index.ts"
+  },
+  exports: {
+    "core:./a11y-actions": "packages/core/src/modules/a11y-actions/index.ts",
+    "web:./a11y-actions": "packages/web/src/a11y-actions.ts",
+    "web:./a11yactions": "packages/web/src/a11yactions.ts"
+  },
+  tests: ["modules/a11y/test/**/*.test.ts", "modules/a11y-actions/test/**/*.test.ts"],
+  conformance: [],
+  docs: ["modules/a11y/SPEC.md"]
+};
+export {
+  after,
+  manifest_default as default
+};

package/modules/a11y-actions/web/index.d.ts

@@ -0,0 +1 @@
+import '../../a11y/web/index.js';

package/modules/a11y-actions/web/index.js

@@ -0,0 +1,4 @@
+import "../../a11y/web/index.js";
+import { a11yActions } from "../core/index.js";
+const Icon = customElements.get("anima-icon");
+Icon.registerModule(a11yActions);

package/modules/a11y-dom/web/index.d.ts

@@ -0,0 +1,11 @@
+import '../../a11y-actions/web/index.js';
+import type { SemanticNode, SemanticAction } from '../../a11y/core/types.js';
+declare module '../../../packages/web/src/index.ts' {
+    interface AnimaIcon {
+        readonly semantics: SemanticNode[];
+        semanticAction(id: string, action: SemanticAction): boolean;
+    }
+    namespace AnimaIcon {
+        let semanticElement: (icon: AnimaIcon, id: string) => HTMLElement | null | undefined;
+    }
+}

package/modules/a11y-dom/web/index.js

@@ -0,0 +1,250 @@
+import "../../a11y-actions/web/index.js";
+const Icon = customElements.get("anima-icon");
+const trees = /* @__PURE__ */ new WeakMap();
+const roots = /* @__PURE__ */ new WeakMap();
+const attached = /* @__PURE__ */ new WeakMap();
+const roles = {
+  "radio-group": "radiogroup",
+  "tab-list": "tablist",
+  "list-item": "listitem",
+  "alert-dialog": "alertdialog"
+};
+Object.defineProperty(Icon.prototype, "semantics", {
+  get() {
+    return structuredClone(this.player?.semantics() ?? []);
+  }
+});
+Icon.prototype.semanticAction = function(id, action) {
+  const changed = this.player?.semanticAction(id, action) ?? false;
+  if (changed) {
+    this.flush();
+    if (!this.hasAttribute("paused")) this.play();
+  }
+  return changed;
+};
+Icon.semanticElement = (icon, id) => icon.getAttribute("a11y") !== "off" && trees.has(icon) ? icon.shadowRoot.querySelector(`[data-semantic="${CSS.escape(id)}"]`) ?? null : void 0;
+function attach(icon) {
+  attached.get(icon)?.();
+  const p = icon.player;
+  if (!p?.model.doc.requires?.includes("a11y")) return;
+  let tree = [], rendered = [];
+  const targets = /* @__PURE__ */ new Map();
+  const current = /* @__PURE__ */ new Map();
+  const box = document.createElement("span");
+  box.style.cssText = "position:absolute;inset:0;pointer-events:none;transform-origin:0 0";
+  let transform = "";
+  const style = document.createElement("style");
+  style.textContent = "input{appearance:none;background:none}input::-webkit-slider-thumb{appearance:none;width:0;height:0}input::-moz-range-thumb,input::-moz-range-track{width:0;height:0;border:0;background:none}";
+  icon.shadowRoot.append(style, box);
+  const layout = () => {
+    const c = Icon.canvasBox?.(icon, [0, 0, 1, 1]);
+    const m = c ? new DOMMatrix([c.width, 0, 0, c.height, c.x, c.y]) : icon.shadowRoot.querySelector("svg")?.getScreenCTM(), r = icon.getBoundingClientRect();
+    if (m) {
+      const next = `matrix(${m.a},${m.b},${m.c},${m.d},${m.e - r.x},${m.f - r.y})`;
+      if (transform !== next) box.style.transform = transform = next;
+    }
+  };
+  const update = () => {
+    const next = p.semantics(), diff = p.semanticDiff(tree, next);
+    tree = next;
+    trees.set(icon, tree);
+    const visible = icon.getAttribute("a11y") === "off" ? [] : tree;
+    const patch = p.semanticDiff(rendered, visible);
+    rendered = visible;
+    for (const id of patch.removed) {
+      targets.get(id)?.remove();
+      targets.delete(id);
+      current.delete(id);
+    }
+    const dirty = /* @__PURE__ */ new Set([...patch.added, ...patch.changed.map((n) => n.id)]);
+    const moved = new Set(patch.changed.filter((n) => n.keys.includes("bounds")).map((n) => n.id));
+    const walk = (nodes, parent, origin = [0, 0], group = "", shift = false) => {
+      for (const [i, n] of nodes.entries()) {
+        current.set(n.id, n);
+        let el = targets.get(n.id);
+        if (dirty.has(n.id) || shift) {
+          const tag = n.role === "heading" ? "h" + (n.level ?? 1) : ["button", "switch", "tab"].includes(n.role) ? "button" : ["checkbox", "radio", "slider"].includes(n.role) ? "input" : n.role === "link" ? "a" : "div";
+          if (!el || el.localName !== tag) {
+            const old = el;
+            el = document.createElement(tag);
+            old?.replaceWith(el);
+            targets.set(n.id, el);
+            el.dataset.semantic = n.id;
+            el.id = "semantic-" + n.id;
+            el.addEventListener("focus", () => icon.semanticAction(n.id, "focus"));
+            el.addEventListener(
+              n.role === "slider" ? "input" : n.role === "radio" ? "change" : "click",
+              (event) => {
+                if (Icon.inputEvents.has(event) || tag !== "input" && !current.get(n.id)?.actions.includes("tap"))
+                  return;
+                Icon.inputEvents.add(event);
+                if (n.role === "slider") {
+                  const target = +event.target.value;
+                  let value = Number(current.get(n.id)?.value);
+                  while (value !== target) {
+                    if (!icon.semanticAction(n.id, value < target ? "increase" : "decrease")) break;
+                    const next2 = Number(current.get(n.id)?.value);
+                    if (!Number.isFinite(next2) || next2 === value || value < target !== next2 < target && next2 !== target)
+                      break;
+                    value = next2;
+                  }
+                  event.target.value = String(
+                    current.get(n.id)?.value ?? value
+                  );
+                } else {
+                  icon.semanticAction(n.id, "tap");
+                  const state = current.get(n.id)?.states ?? {};
+                  event.target.checked = state.checked === true;
+                  event.target.indeterminate = state.checked === "mixed";
+                }
+              }
+            );
+          }
+          el.setAttribute("role", roles[n.role] ?? n.role);
+          for (const [key, value] of Object.entries({
+            label: n.label,
+            description: n.hint,
+            controls: n.controls === void 0 ? void 0 : "semantic-" + n.controls,
+            valuemin: n.min,
+            valuemax: n.max,
+            valuenow: n.value === void 0 || typeof n.value !== "number" ? void 0 : n.value,
+            valuetext: n.valueText,
+            ...n.states
+          })) {
+            if (key === "focused") continue;
+            const attr = "aria-" + key;
+            if (value === void 0) el.removeAttribute(attr);
+            else el.setAttribute(attr, String(value));
+          }
+          for (const key of [
+            "checked",
+            "pressed",
+            "selected",
+            "expanded",
+            "disabled",
+            "required",
+            "readonly",
+            "modal",
+            "live"
+          ])
+            if (!(key in n.states)) el.removeAttribute("aria-" + key);
+          const input = el;
+          if (tag === "input") {
+            input.type = n.role === "slider" ? "range" : n.role;
+            input.name = group;
+            input.checked = n.states.checked === true;
+            input.indeterminate = n.states.checked === "mixed";
+            for (const key of ["min", "max", "step"]) input[key] = String(n[key] ?? "");
+            if (typeof n.value === "number") input.value = String(n.value);
+          }
+          if (tag === "a") el.href = n.href ?? "";
+          input.disabled = !!n.states.disabled;
+          if (!n.children.length && tag !== "input") el.textContent = n.label ?? "";
+          if (!el.dataset.focus || n.states.disabled)
+            el.tabIndex = n.states.disabled ? -1 : "button switch checkbox radio slider link tab".split(" ").includes(n.role) ? 0 : -1;
+          const [x, y, w, h] = n.bounds;
+          el.style.cssText = `position:absolute;opacity:0;pointer-events:none;margin:0;padding:0;border:0;left:${x - origin[0]}px;top:${y - origin[1]}px;width:${w}px;height:${h}px`;
+        }
+        if (!el) continue;
+        if (parent.children[i] !== el) parent.insertBefore(el, parent.children[i] ?? null);
+        walk(n.children, el, n.bounds, n.role === "radio-group" ? n.id : group, moved.has(n.id));
+        if (["tab-list", "radio-group"].includes(n.role)) {
+          const radio = n.role === "radio-group";
+          const tabs = [...el.children].filter(
+            (t) => t.getAttribute("role") === (radio ? "radio" : "tab") && t.ariaDisabled !== "true"
+          );
+          const active = tabs.find((t) => t === icon.shadowRoot.activeElement) ?? tabs.find((t) => t.getAttribute(radio ? "aria-checked" : "aria-selected") === "true") ?? tabs[0];
+          for (const t of tabs) {
+            const index = t === active ? 0 : -1;
+            if (t.tabIndex !== index) t.tabIndex = index;
+          }
+          el.onkeydown = (event) => {
+            const key = event.key;
+            if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(key))
+              return;
+            event.preventDefault();
+            const order = p.focusItems?.().map((n2) => n2.id);
+            const enabled = tabs.filter((t) => t.getAttribute("aria-disabled") !== "true").sort(
+              (a, b) => order ? order.indexOf(a.dataset.semantic) - order.indexOf(b.dataset.semantic) : 0
+            );
+            const reverse = key === "ArrowLeft" || key === "ArrowUp";
+            const at = enabled.indexOf(icon.shadowRoot.activeElement);
+            const target = key === "Home" ? enabled[0] : key === "End" ? enabled.at(-1) : enabled[(at + (reverse ? -1 : 1) + enabled.length) % enabled.length];
+            if (target) {
+              target.focus();
+              if (radio && target.getAttribute("aria-checked") !== "true")
+                icon.semanticAction(target.dataset.semantic, "tap");
+              update();
+            }
+          };
+        }
+      }
+    };
+    walk(visible, box);
+    layout();
+    if (visible.length && !p.model.doc.a11y) {
+      icon.removeAttribute("aria-hidden");
+      if (icon.getAttribute("role") !== "group") icon.setAttribute("role", "group");
+    }
+    if (!visible.length && !p.model.doc.a11y && !p.model.doc.requires?.includes("focus")) {
+      if (icon.getAttribute("aria-hidden") !== "true") icon.setAttribute("aria-hidden", "true");
+      icon.removeAttribute("role");
+    }
+    if (patch.added.length || patch.removed.length || patch.changed.some((n) => n.keys.includes("role") || n.keys.includes("level")))
+      icon.dispatchEvent(new Event("anima:overlay"));
+    if (diff.added.length || diff.removed.length || diff.changed.length)
+      icon.dispatchEvent(new CustomEvent("anima:semantics", { detail: diff }));
+  };
+  roots.set(icon, () => {
+    const detached = !box.isConnected;
+    if (detached) icon.shadowRoot.append(style, box);
+    if (detached || p.semantics() !== tree) update();
+    if (Icon.viewBox) layout();
+  });
+  const step = p.step;
+  p.step = function(...args) {
+    const result = step.apply(this, args);
+    update();
+    return result;
+  };
+  box.addEventListener("focusin", update);
+  const observer = new MutationObserver(update);
+  observer.observe(icon, {
+    attributes: true,
+    // seam(P7-3): the canonical alignment attribute also moves semantic bounds.
+    attributeFilter: ["a11y", "aria-hidden", "fit", "align", "alignment"]
+  });
+  const resize = new ResizeObserver(layout);
+  resize.observe(icon);
+  update();
+  attached.set(icon, () => {
+    observer.disconnect();
+    resize.disconnect();
+    p.step = step;
+    box.remove();
+    style.remove();
+    trees.delete(icon);
+    roots.delete(icon);
+    attached.delete(icon);
+  });
+}
+const hooked = /* @__PURE__ */ new WeakSet();
+const loadModel = Icon.prototype.loadModel, destroy = Icon.prototype.destroy;
+Icon.prototype.loadModel = function(model) {
+  attached.get(this)?.();
+  if (!hooked.has(this)) {
+    hooked.add(this);
+    this.addEventListener("anima:load", () => attach(this));
+  }
+  loadModel.call(this, model);
+};
+Icon.prototype.destroy = function() {
+  attached.get(this)?.();
+  destroy.call(this);
+};
+for (const icon of document.querySelectorAll("anima-icon")) attach(icon);
+const previousEvent = Icon.eventHook;
+Icon.eventHook = (icon, kind, detail) => {
+  previousEvent?.(icon, kind, detail);
+  if (kind === "draw") roots.get(icon)?.();
+};

package/modules/a11y-dom/web/navigation.d.ts

@@ -0,0 +1 @@
+import './index.js';

package/modules/a11y-dom/web/navigation.js

@@ -0,0 +1,93 @@
+import "./index.js";
+const Icon = customElements.get("anima-icon");
+const attached = /* @__PURE__ */ new WeakMap();
+function attach(icon) {
+  if (attached.has(icon)) return;
+  const abort = new AbortController();
+  const groups = /* @__PURE__ */ new Set();
+  const update = () => {
+    for (const el of groups) el.onkeydown = null;
+    groups.clear();
+    const p = icon.player;
+    if (!p) return;
+    const root = icon.shadowRoot;
+    const element = (n) => root.querySelector(`[data-semantic="${CSS.escape(n.id)}"]`);
+    const items = p.model.doc.requires?.includes("focus") ? p.focusItems?.() : void 0, configs = p.focusItems?.(true);
+    const enabled = (n) => !n.states.disabled && (!items || items.some((i) => i.id === n.id));
+    const walk = (nodes) => {
+      for (const n of nodes) {
+        walk(n.children);
+        if (!["toolbar", "grid"].includes(n.role)) continue;
+        const el = element(n);
+        if (!el) continue;
+        groups.add(el);
+        const grid = n.role === "grid";
+        const rows = grid ? n.children.filter((r) => r.role === "row") : [n];
+        const cells = rows.map(
+          (r) => r.children.filter(
+            (c) => grid ? c.role === "gridcell" : "button switch checkbox radio slider tab link".split(" ").includes(c.role)
+          )
+        );
+        if (!grid && items)
+          cells[0].sort(
+            (a, b) => items.findIndex((i) => i.id === a.id) - items.findIndex((i) => i.id === b.id)
+          );
+        const all = cells.flat(), available = all.filter(enabled);
+        const active = available.find((c) => element(c) === root.activeElement) ?? available[0];
+        for (const c of all) {
+          const target = element(c);
+          if (target) target.tabIndex = c === active ? 0 : -1;
+        }
+        el.onkeydown = (event) => {
+          const key = event.key;
+          if (event.target.closest('[role="toolbar"],[role="grid"]') !== el || event.altKey || event.metaKey || event.shiftKey || event.ctrlKey && !(grid && (key === "Home" || key === "End")) || !["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(key))
+            return;
+          const current = all.find((c) => element(c) === root.activeElement);
+          if (!current) return;
+          const row = cells.findIndex((r) => r.includes(current));
+          const column = cells[row].indexOf(current);
+          const reverse = key === "ArrowLeft" || key === "ArrowUp";
+          const line = grid && !event.ctrlKey ? cells[row].filter(enabled) : available;
+          let target;
+          if (key === "Home") target = line[0];
+          else if (key === "End") target = line.at(-1);
+          else if (grid && (key === "ArrowUp" || key === "ArrowDown")) {
+            target = cells[row + (reverse ? -1 : 1)]?.[column];
+            if (target && !enabled(target)) target = void 0;
+          } else {
+            const index = line.indexOf(current) + (reverse ? -1 : 1);
+            target = line[index];
+            if (!target) {
+              const edge = grid ? configs?.find((i) => i.id === rows[row].id)?.config.edge ?? "stop" : "closed-loop";
+              if (edge === "closed-loop") target = reverse ? line.at(-1) : line[0];
+              else if (edge === "parent-scope" && p.focusTraverse?.(reverse ? "left" : "right"))
+                icon.flush();
+            }
+          }
+          event.preventDefault();
+          if (target) element(target)?.focus();
+          update();
+        };
+      }
+    };
+    walk(p.semantics());
+  };
+  for (const kind of ["anima:load", "anima:semantics", "anima:overlay", "focusin"])
+    icon.addEventListener(kind, update, { signal: abort.signal });
+  update();
+  attached.set(icon, () => {
+    abort.abort();
+    for (const el of groups) el.onkeydown = null;
+    attached.delete(icon);
+  });
+}
+const load = Icon.prototype.loadModel, destroy = Icon.prototype.destroy;
+Icon.prototype.loadModel = function(model) {
+  attach(this);
+  load.call(this, model);
+};
+Icon.prototype.destroy = function() {
+  attached.get(this)?.();
+  destroy.call(this);
+};
+for (const icon of document.querySelectorAll("anima-icon")) attach(icon);

package/modules/assetio/web/index.d.ts

@@ -0,0 +1 @@
+import '../../../packages/web/src/index.js';