@ponchia/ui 0.4.1 → 0.6.0

package/behaviors/internal.js

@@ -0,0 +1,97 @@
+// Shared, dependency-free DOM helpers for the behavior modules.
+// Not part of the public @ponchia/ui/behaviors surface (the barrel
+// re-exports only the documented behaviors).
+
+export const noop = () => {};
+
+export const hasDom = () => typeof document !== 'undefined';
+
+// Resolve the delegation host from an init call's `root` option, distinguishing
+// three cases so an unattached/null root never silently widens to whole-document
+// delegation (the "scoped island hijacks every control" foot-gun):
+//   • root absent/undefined → no scope requested → delegate from `fallback`
+//     (default `document`). This is the intended global-wiring path.
+//   • root === null         → a scope WAS requested but isn't ready yet (e.g. a
+//     framework ref still null at mount). Return null so the caller no-ops
+//     instead of hijacking the whole document.
+//   • root is an element    → use it.
+// The bindings (@ponchia/ui/{react,solid,qwik}) emit `root: null` for the
+// not-ready case precisely so this distinction survives across the boundary.
+export function resolveHost(root, fallback = document) {
+  if (root === null) return null;
+  return root || fallback;
+}
+
+// Monotonic counter for auto-minted field / list ids, shared across
+// initFormValidation and initCombobox so separate calls (and separate
+// behaviors) never collide on an id.
+let fieldUid = 0;
+export const nextFieldUid = () => ++fieldUid;
+
+// Make delegated initializers idempotent. Re-binding the same logical
+// listener on the same host/element tears the previous binding down first,
+// so double-init (HMR, framework re-mount, repeated calls) never stacks
+// duplicate handlers (the "double-toggle" class of bug). The returned
+// cleanup removes the single live binding.
+const BOUND = Symbol('bronto-bound');
+
+export function bindOnce(target, key, add) {
+  const reg = target[BOUND] || (target[BOUND] = Object.create(null));
+  if (reg[key]) reg[key]();
+  const remove = add();
+  const cleanup = () => {
+    remove();
+    if (reg[key] === cleanup) delete reg[key];
+  };
+  reg[key] = cleanup;
+  return cleanup;
+}
+
+export function byIdInHost(host, id) {
+  if (!id) return null;
+  if (host === document) return document.getElementById(id);
+  if (host.id === id) return host;
+  return (
+    Array.from(host.querySelectorAll?.('[id]') || []).find((el) => el.id === id) ||
+    document.getElementById(id)
+  );
+}
+
+export function closestSafe(el, selector) {
+  try {
+    return el.closest(selector);
+  } catch {
+    return null;
+  }
+}
+
+// Collect the hosts an initializer should wire: the descendants matching
+// `selector` PLUS `host` itself when it matches (querySelectorAll only sees
+// descendants, so a `root` that *is* a target would otherwise be skipped).
+// Self-first, null-safe — the shape ~9 delegated behaviors hand-rolled.
+export function collectHosts(host, selector) {
+  const out = host !== document && host.matches?.(selector) ? [host] : [];
+  out.push(...(host.querySelectorAll?.(selector) ?? []));
+  return out;
+}
+
+// scrollIntoView is a pure affordance and throws in jsdom/layout-less envs;
+// never let that break a keyboard/roving handler. (combobox/command/carousel.)
+export function scrollIntoViewSafe(el, opts = { block: 'nearest' }) {
+  try {
+    el?.scrollIntoView(opts);
+  } catch {
+    /* headless / no layout — the scroll is cosmetic */
+  }
+}
+
+// Wrap an index by `delta` within [0, len), the roving keyboard math shared by
+// the combobox and command listboxes (a -1 `cur` lands on the first/last as
+// before). Only this core is shared — the surrounding setActive/filter/group
+// logic diverges between the two for real reasons. (code-quality audit Q12.)
+export function wrapIndex(cur, delta, len) {
+  let next = cur + delta;
+  if (next < 0) next = len - 1;
+  if (next >= len) next = 0;
+  return next;
+}

package/behaviors/legend.js

@@ -0,0 +1,67 @@
+import { hasDom, resolveHost, noop, bindOnce } from './internal.js';
+
+/**
+ * Wire `[data-bronto-legend]` interactive legends. Each entry is a
+ * `.ui-legend__item` authored as a `<button aria-pressed>`; clicking it (or
+ * Enter/Space, native to `<button>`) flips `aria-pressed`, toggles the
+ * `.is-inactive` class, and dispatches `bronto:legend:toggle` on the legend
+ * with `{ detail: { series, active } }` (`series` is the entry's
+ * `data-series`, or its 0-based index if unset).
+ *
+ * Bronto owns only the control and its pressed/inactive *state*. It does not
+ * know the chart's series, hide anything, or announce the change: the host
+ * listens for the event, hides its own series, and owns any `aria-live`
+ * announcement. The convention is `aria-pressed="true"` ⇒ the series is shown
+ * (the default); the entry's label never changes on toggle (WAI-ARIA). SSR-safe
+ * and idempotent per host; returns a cleanup function.
+ */
+export function initLegend({ root } = {}) {
+  if (!hasDom()) return noop;
+  const host = resolveHost(root);
+  if (!host) return noop;
+  const isButton = (el) => el.tagName === 'BUTTON' || el.getAttribute('role') === 'button';
+  const onClick = (e) => {
+    const item = e.target.closest('.ui-legend__item');
+    if (!item || !host.contains(item)) return;
+    const legend = item.closest('[data-bronto-legend]');
+    if (!legend || !host.contains(legend)) return;
+    // The contract requires a real `<button>` (keyboard-operable, focusable). A
+    // non-button item is mouse-only — refuse to toggle it rather than ship a
+    // pointer-only control (WCAG 2.1.1 — C11). The author is warned at bind.
+    if (!isButton(item)) return;
+    const active = item.getAttribute('aria-pressed') !== 'false';
+    const next = !active;
+    item.setAttribute('aria-pressed', String(next));
+    item.classList.toggle('is-inactive', !next);
+    // This legend's own items only — an item inside a nested [data-bronto-legend]
+    // belongs to that inner legend, so it must not shift this one's indices.
+    const items = [...legend.querySelectorAll('.ui-legend__item')].filter(
+      (el) => el.closest('[data-bronto-legend]') === legend,
+    );
+    legend.dispatchEvent(
+      new CustomEvent('bronto:legend:toggle', {
+        bubbles: true,
+        detail: { series: item.dataset.series ?? items.indexOf(item), active: next },
+      }),
+    );
+  };
+  return bindOnce(host, 'legend', () => {
+    // Warn once per non-button item present at bind: it gets cursor:pointer from
+    // the CSS but is neither focusable nor keyboard-operable (C11).
+    if (typeof console !== 'undefined') {
+      for (const legend of host.querySelectorAll?.('[data-bronto-legend]') ?? []) {
+        const stray = [...legend.querySelectorAll('.ui-legend__item')].some(
+          (el) => el.closest('[data-bronto-legend]') === legend && !isButton(el),
+        );
+        if (stray) {
+          console.warn(
+            '[bronto] initLegend(): interactive legend entries must be <button> (or role="button") to be keyboard-operable — a non-button .ui-legend__item is ignored.',
+          );
+          break;
+        }
+      }
+    }
+    host.addEventListener('click', onClick);
+    return () => host.removeEventListener('click', onClick);
+  });
+}

package/behaviors/menu.js

@@ -0,0 +1,47 @@
+import { hasDom, resolveHost, noop, bindOnce } from './internal.js';
+
+/**
+ * Dropdown-menu close affordances for a native `<details data-bronto-menu>`
+ * holding a `.ui-menu`. `<details>` alone won't close on Escape, on an
+ * outside click, or when a `.ui-menu__item` is activated — this adds
+ * exactly those, returning focus to the `<summary>` on Esc/activate.
+ *
+ * Deliberately NOT a full WAI-ARIA menu (no arrow-key roving): the items
+ * are real buttons, Tab-reachable; this is a disclosure of actions, and
+ * over-claiming `role="menu"` semantics would be worse. SSR-safe,
+ * idempotent; returns a cleanup function.
+ */
+export function initMenu({ root } = {}) {
+  if (!hasDom()) return noop;
+  const host = resolveHost(root);
+  if (!host) return noop;
+  const openMenus = () => host.querySelectorAll?.('[data-bronto-menu][open]') ?? [];
+  const shut = (menu) => {
+    if (!menu || !menu.open) return;
+    menu.open = false;
+    menu.querySelector('summary')?.focus();
+  };
+  const onClick = (e) => {
+    const menu = e.target.closest('[data-bronto-menu]');
+    // Activate an item → close its menu (and return focus to summary).
+    if (menu && e.target.closest('.ui-menu__item')) {
+      shut(menu);
+      return;
+    }
+    // Click outside any open menu → close them all (no focus move).
+    for (const m of openMenus()) if (!m.contains(e.target)) m.open = false;
+  };
+  const onKey = (e) => {
+    if (e.key !== 'Escape') return;
+    const menu = e.target.closest?.('[data-bronto-menu][open]') || openMenus()[0];
+    shut(menu);
+  };
+  return bindOnce(host, 'menu', () => {
+    host.addEventListener('click', onClick);
+    host.addEventListener('keydown', onKey);
+    return () => {
+      host.removeEventListener('click', onClick);
+      host.removeEventListener('keydown', onKey);
+    };
+  });
+}

package/behaviors/popover.js

@@ -0,0 +1,179 @@
+import { hasDom, resolveHost, noop, bindOnce, byIdInHost } from './internal.js';
+
+/**
+ * Collision-aware popover, dependency-free. A `[data-bronto-popover]`
+ * trigger toggles the `.ui-popover` panel whose id it names. The panel
+ * is placed under the trigger and **flips above** when it would
+ * overflow the viewport, with its inline edge clamped on-screen — the
+ * thing the CSS-only tooltip can't do near edges / inside scroll
+ * containers. If the panel has the native `popover` attribute and the
+ * Popover API is available it is shown in the top layer (never
+ * clipped); otherwise an `.is-open` class is toggled. Manages
+ * `aria-expanded` / `aria-controls`, closes on Escape and outside
+ * click, and re-positions on scroll/resize while open. SSR-safe,
+ * idempotent; returns a cleanup function.
+ *
+ * The trigger advertises `aria-haspopup="dialog"`, so on open the panel is
+ * given `role="dialog"` (unless the author set a role) and focus is moved into
+ * it — the first focusable descendant, or the panel itself. It is a *non-modal*
+ * dialog: the rest of the page stays interactive and there is no focus trap.
+ * Author an accessible name on the panel (`aria-label` / `aria-labelledby`); a
+ * dev-time `console.warn` fires when it is missing.
+ *
+ * Escape returns focus to the trigger; closing via outside-click leaves focus
+ * where the click landed (treated as deliberate intent to move on).
+ */
+export function initPopover({ root } = {}) {
+  if (!hasDom()) return noop;
+  const host = resolveHost(root);
+  if (!host) return noop;
+  const view = document.defaultView;
+  const GAP = 8;
+  let openPanel = null;
+  let openTrigger = null;
+
+  const FOCUSABLE =
+    'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+  // The trigger advertises `aria-haspopup="dialog"`, so the open panel must BE a
+  // dialog: a role, an accessible name, and focus moved into it (C6). Focus the
+  // first focusable descendant, else the panel itself (made programmatically
+  // focusable) so a content-only panel still receives focus.
+  const focusInto = (panel) => {
+    const first = panel.querySelector(FOCUSABLE);
+    if (first) {
+      first.focus?.();
+      return;
+    }
+    if (!panel.hasAttribute('tabindex')) panel.setAttribute('tabindex', '-1');
+    panel.focus?.();
+  };
+
+  const place = (trigger, panel) => {
+    const r = trigger.getBoundingClientRect();
+    const pw = panel.offsetWidth;
+    const ph = panel.offsetHeight;
+    const vw = view?.innerWidth ?? 0;
+    const vh = view?.innerHeight ?? 0;
+    let top = r.bottom + GAP;
+    if (top + ph > vh && r.top - GAP - ph >= 0) top = r.top - GAP - ph;
+    let left = r.left;
+    if (vw) left = Math.max(GAP, Math.min(left, vw - pw - GAP));
+    panel.style.top = `${Math.max(GAP, top)}px`;
+    panel.style.left = `${left}px`;
+  };
+
+  const close = () => {
+    if (!openPanel) return;
+    const panel = openPanel;
+    const trigger = openTrigger;
+    // Only steal focus back to the trigger when focus is still inside the panel
+    // (Escape / programmatic re-toggle). An outside-click leaves focus where the
+    // click landed — deliberate intent to move on, per the doc contract.
+    const focusWasInside = panel.contains(document.activeElement);
+    openPanel = openTrigger = null;
+    if (panel.hasAttribute('popover') && typeof panel.hidePopover === 'function') {
+      try {
+        panel.hidePopover();
+      } catch {
+        /* already hidden */
+      }
+    } else {
+      panel.classList.remove('is-open');
+    }
+    if (trigger) trigger.setAttribute('aria-expanded', 'false');
+    if (focusWasInside && trigger?.isConnected) trigger.focus?.();
+  };
+
+  const open = (trigger, panel) => {
+    close();
+    // Live up to the advertised `aria-haspopup="dialog"`: give the panel a
+    // dialog role (unless the author set one) so AT announces it as the promised
+    // dialog rather than a generic group (C6).
+    if (!panel.hasAttribute('role')) panel.setAttribute('role', 'dialog');
+    trigger.setAttribute('aria-controls', panel.id);
+    trigger.setAttribute('aria-expanded', 'true');
+    if (panel.hasAttribute('popover') && typeof panel.showPopover === 'function') {
+      try {
+        panel.showPopover();
+      } catch {
+        panel.classList.add('is-open');
+      }
+    } else {
+      panel.classList.add('is-open');
+    }
+    openPanel = panel;
+    openTrigger = trigger;
+    place(trigger, panel);
+    focusInto(panel);
+  };
+
+  const onClick = (e) => {
+    const trigger = e.target.closest?.('[data-bronto-popover]');
+    if (trigger && host.contains(trigger)) {
+      const panel = byIdInHost(host, trigger.getAttribute('data-bronto-popover'));
+      if (!panel) return;
+      e.preventDefault();
+      if (openPanel === panel) close();
+      else open(trigger, panel);
+      return;
+    }
+    if (openPanel && !openPanel.contains(e.target)) close();
+  };
+  const onKey = (e) => {
+    // close() returns focus to the trigger because focus is inside the panel.
+    if (e.key === 'Escape' && openPanel) close();
+  };
+  const onReflow = () => {
+    if (openPanel && openTrigger) place(openTrigger, openPanel);
+  };
+
+  // Seed resting ARIA on every trigger and keep it in sync when the UA itself
+  // toggles a native popover (light-dismiss / Escape on the `popover` attribute
+  // never routes through close(), so aria-expanded would otherwise go stale).
+  const seedTeardowns = [];
+  const seed = () => {
+    for (const trigger of host.querySelectorAll('[data-bronto-popover]')) {
+      const panel = byIdInHost(host, trigger.getAttribute('data-bronto-popover'));
+      if (!panel) continue;
+      if (!trigger.hasAttribute('aria-haspopup')) trigger.setAttribute('aria-haspopup', 'dialog');
+      trigger.setAttribute('aria-controls', panel.id);
+      if (!trigger.hasAttribute('aria-expanded')) trigger.setAttribute('aria-expanded', 'false');
+      // A dialog with no accessible name is announced as just "dialog". We can't
+      // invent a good name, so warn the author at dev time (C6).
+      const named =
+        panel.hasAttribute('aria-label') ||
+        panel.hasAttribute('aria-labelledby') ||
+        panel.hasAttribute('title');
+      if (!named && typeof console !== 'undefined') {
+        console.warn(
+          `[bronto] initPopover(): panel #${panel.id} has no accessible name — add aria-label or aria-labelledby so it is announced as a named dialog.`,
+        );
+      }
+      if (panel.hasAttribute('popover')) {
+        const onToggle = (e) => {
+          const isOpen = e.newState === 'open';
+          trigger.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+          if (!isOpen && openPanel === panel) openPanel = openTrigger = null;
+        };
+        panel.addEventListener('toggle', onToggle);
+        seedTeardowns.push(() => panel.removeEventListener('toggle', onToggle));
+      }
+    }
+  };
+
+  return bindOnce(host, 'popover', () => {
+    seed();
+    document.addEventListener('click', onClick);
+    document.addEventListener('keydown', onKey);
+    view?.addEventListener('scroll', onReflow, true);
+    view?.addEventListener('resize', onReflow);
+    return () => {
+      for (const t of seedTeardowns.splice(0)) t();
+      document.removeEventListener('click', onClick);
+      document.removeEventListener('keydown', onKey);
+      view?.removeEventListener('scroll', onReflow, true);
+      view?.removeEventListener('resize', onReflow);
+    };
+  });
+}

package/behaviors/spotlight.js

@@ -0,0 +1,52 @@
+import { hasDom, resolveHost, noop, bindOnce, byIdInHost, collectHosts } from './internal.js';
+
+/**
+ * Position a spotlight cutout over a target element. Each
+ * `[data-bronto-spotlight]` is a `.ui-spotlight` overlay; `data-target` is the
+ * id of the element to highlight. The behavior measures the target and sets
+ * `--spot-x/y/w/h` (viewport coordinates) on the overlay, re-placing on
+ * resize/scroll and whenever `data-target` changes.
+ *
+ * Bronto owns only positioning + the visual language. It is NOT a tour engine:
+ * the host decides which target is current, when to advance, and whether to
+ * show/hide the overlay — just update `data-target` (or toggle `hidden`) and
+ * the cutout follows. SSR-safe, idempotent per host; returns a cleanup.
+ */
+export function initSpotlight({ root } = {}) {
+  if (!hasDom()) return noop;
+  const host = resolveHost(root);
+  if (!host) return noop;
+  const spots = collectHosts(host, '[data-bronto-spotlight]');
+  if (!spots.length) return noop;
+
+  const place = () => {
+    for (const spot of spots) {
+      const target = byIdInHost(host, spot.dataset.target);
+      if (!target) continue;
+      const r = target.getBoundingClientRect();
+      spot.style.setProperty('--spot-x', `${r.left}px`);
+      spot.style.setProperty('--spot-y', `${r.top}px`);
+      spot.style.setProperty('--spot-w', `${r.width}px`);
+      spot.style.setProperty('--spot-h', `${r.height}px`);
+    }
+  };
+
+  return bindOnce(host, 'spotlight', () => {
+    place();
+    const view = host.defaultView || host.ownerDocument?.defaultView || null;
+    const MO = view?.MutationObserver;
+    const mo = MO ? new MO(place) : null;
+    if (mo) {
+      for (const spot of spots) {
+        mo.observe(spot, { attributes: true, attributeFilter: ['data-target'] });
+      }
+    }
+    view?.addEventListener('resize', place);
+    view?.addEventListener('scroll', place, true);
+    return () => {
+      mo?.disconnect();
+      view?.removeEventListener('resize', place);
+      view?.removeEventListener('scroll', place, true);
+    };
+  });
+}

package/behaviors/table.js

@@ -0,0 +1,136 @@
+import { hasDom, resolveHost, noop, bindOnce, collectHosts } from './internal.js';
+
+/**
+ * Client-side sortable + selectable data table. Wires
+ * `[data-bronto-sortable]`:
+ *
+ *  - clicking a header's `.ui-table__sort` button sorts the tbody by
+ *    that column. Sortable headers are seeded `aria-sort="none"`; a
+ *    click toggles that header ascending ⇄ descending (first click =
+ *    ascending) and resets the other sortable headers to `none`.
+ *    Numeric columns (`data-sort="num"` or `.is-num` cells) sort
+ *    numerically; everything else, locale string compare. Any
+ *    `.ui-table__empty` sentinel row is kept last after a sort.
+ *  - a `[data-bronto-select-all]` checkbox toggles every
+ *    `[data-bronto-select]` row checkbox and the rows'
+ *    `aria-selected`; toggling a row keeps the header checkbox's
+ *    checked/indeterminate state in sync. Emits `bronto:selectionchange`
+ *    ({ detail: { count } }) on the table.
+ *
+ * SSR-safe, idempotent per table; returns a cleanup function.
+ *
+ * The numeric sort parses each cell as display text (strips non-[0-9.-] chars),
+ * so it is locale-naive — group/decimal separators beyond `.`/`-` are not
+ * interpreted. It is a client-side convenience sorter, not a data grid.
+ */
+export function initTableSort({ root } = {}) {
+  if (!hasDom()) return noop;
+  const host = resolveHost(root);
+  if (!host) return noop;
+  const tables = collectHosts(host, '[data-bronto-sortable]');
+  const cleanups = [];
+
+  for (const table of tables) {
+    const tbody = table.tBodies[0];
+    if (!tbody) continue;
+
+    // Seed the resting `aria-sort="none"` on every sortable header so AT
+    // announces the column as sortable from the start (it was unset until the
+    // first click — C10).
+    for (const sort of table.querySelectorAll('.ui-table__sort')) {
+      const th = sort.closest('th');
+      if (th && !th.hasAttribute('aria-sort')) th.setAttribute('aria-sort', 'none');
+    }
+
+    const colIndex = (th) => [...th.parentElement.children].indexOf(th);
+    const cellText = (row, i) => row.children[i]?.textContent.trim() ?? '';
+
+    const sortBy = (th, numeric) => {
+      const headers = th.closest('tr').querySelectorAll('th');
+      const dir = th.getAttribute('aria-sort') === 'ascending' ? 'descending' : 'ascending';
+      // Reset the OTHER sortable headers to `none` (not removed) so they keep
+      // announcing sortability; only previously-sortable headers carry aria-sort.
+      headers.forEach((h) => {
+        if (h !== th && h.hasAttribute('aria-sort')) h.setAttribute('aria-sort', 'none');
+      });
+      th.setAttribute('aria-sort', dir);
+      const i = colIndex(th);
+      const sign = dir === 'ascending' ? 1 : -1;
+      // Empty/sentinel rows sort out of the data set AND must re-append LAST,
+      // or after a sort they float above the real rows (C29).
+      const emptyRows = [...tbody.rows].filter((r) => r.classList.contains('ui-table__empty'));
+      const rows = [...tbody.rows].filter((r) => !r.classList.contains('ui-table__empty'));
+      rows.sort((a, b) => {
+        const x = cellText(a, i);
+        const y = cellText(b, i);
+        const cmp = numeric
+          ? (parseFloat(x.replace(/[^\d.-]/g, '')) || 0) -
+            (parseFloat(y.replace(/[^\d.-]/g, '')) || 0)
+          : x.localeCompare(y);
+        return cmp * sign;
+      });
+      // Re-parent in document order: sorted data rows, then any empty/sentinel
+      // row last. A single appendChild pass over the existing <tr> nodes (no
+      // markup is created — these are trusted DOM elements being moved).
+      for (const r of [...rows, ...emptyRows]) tbody.appendChild(r);
+    };
+
+    const allBox = table.querySelector('[data-bronto-select-all]');
+    const rowBoxes = () => [...table.querySelectorAll('[data-bronto-select]')];
+    const syncAll = () => {
+      const boxes = rowBoxes();
+      const on = boxes.filter((b) => b.checked).length;
+      if (allBox) {
+        allBox.checked = on > 0 && on === boxes.length;
+        allBox.indeterminate = on > 0 && on < boxes.length;
+      }
+      table.dispatchEvent(
+        new CustomEvent('bronto:selectionchange', { detail: { count: on }, bubbles: true }),
+      );
+    };
+    const markRow = (box) => {
+      const tr = box.closest('tr');
+      if (tr) tr.setAttribute('aria-selected', String(box.checked));
+    };
+
+    const onClick = (e) => {
+      // Only the focusable `.ui-table__sort` button is a sort trigger — it is
+      // keyboard-operable and carries the `::after` sort glyph. The bare
+      // `th[data-sort]` path was mouse-only with no affordance, so it is gone
+      // (C10); `data-sort="num"` is still read from the button or its th.
+      const sorter = e.target.closest('.ui-table__sort');
+      if (sorter && table.contains(sorter)) {
+        const th = sorter.closest('th');
+        const numeric =
+          (sorter.getAttribute('data-sort') || th.getAttribute('data-sort')) === 'num' ||
+          th.classList.contains('is-num');
+        sortBy(th, numeric);
+      }
+    };
+    const onChange = (e) => {
+      const t = e.target;
+      if (t.matches?.('[data-bronto-select-all]')) {
+        rowBoxes().forEach((b) => {
+          b.checked = t.checked;
+          markRow(b);
+        });
+        syncAll();
+      } else if (t.matches?.('[data-bronto-select]')) {
+        markRow(t);
+        syncAll();
+      }
+    };
+
+    const bound = bindOnce(table, 'tableSort', () => {
+      table.addEventListener('click', onClick);
+      table.addEventListener('change', onChange);
+      return () => {
+        table.removeEventListener('click', onClick);
+        table.removeEventListener('change', onChange);
+      };
+    });
+    cleanups.push(bound);
+  }
+
+  return () => cleanups.forEach((fn) => fn());
+}