@ponchia/ui 0.6.6 → 0.6.8

package/behaviors/disclosure.js

@@ -1,4 +1,14 @@
-import { hasDom, resolveHost, noop, bindOnce, byIdInHost } from './internal.js';
+import { hasDom, resolveHost, noop, bindOnce, byIdInHost, closestSafe } from './internal.js';
+
+const snapshotAttr = (el, name) => ({
+  had: el.hasAttribute(name),
+  value: el.getAttribute(name),
+});
+
+const restoreAttr = (el, name, state) => {
+  if (state.had) el.setAttribute(name, state.value);
+  else el.removeAttribute(name);
+};
 
 /**
  * Disclosure: a `[data-bronto-disclosure]` trigger toggles the element
@@ -12,18 +22,38 @@ export function initDisclosure({ root } = {}) {
   if (!hasDom()) return noop;
   const host = resolveHost(root);
   if (!host) return noop;
+  const triggerStates = new Map();
+  const panelStates = new Map();
+
+  const remember = (trigger, panel) => {
+    if (!triggerStates.has(trigger)) {
+      triggerStates.set(trigger, snapshotAttr(trigger, 'aria-expanded'));
+    }
+    if (!panelStates.has(panel)) {
+      panelStates.set(panel, snapshotAttr(panel, 'hidden'));
+    }
+  };
+
   const onClick = (e) => {
-    const trigger = e.target.closest('[data-bronto-disclosure]');
+    const trigger = closestSafe(e.target, '[data-bronto-disclosure]');
     if (!trigger || !host.contains(trigger)) return;
     const id = trigger.getAttribute('aria-controls');
     const panel = byIdInHost(host, id);
     if (!panel) return;
+    e.preventDefault();
+    remember(trigger, panel);
     const open = trigger.getAttribute('aria-expanded') === 'true';
     trigger.setAttribute('aria-expanded', String(!open));
     panel.hidden = open;
   };
   return bindOnce(host, 'disclosure', () => {
     host.addEventListener('click', onClick);
-    return () => host.removeEventListener('click', onClick);
+    return () => {
+      host.removeEventListener('click', onClick);
+      for (const [trigger, state] of triggerStates) restoreAttr(trigger, 'aria-expanded', state);
+      triggerStates.clear();
+      for (const [panel, state] of panelStates) restoreAttr(panel, 'hidden', state);
+      panelStates.clear();
+    };
   });
 }

package/behaviors/dismissible.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dismissible.d.ts","sourceRoot":"","sources":["dismissible.js"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,uCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAmB3C"}
+{"version":3,"file":"dismissible.d.ts","sourceRoot":"","sources":["dismissible.js"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,uCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAoB3C"}

package/behaviors/dismissible.js

@@ -13,11 +13,12 @@ export function dismissible({ root } = {}) {
   const host = resolveHost(root);
   if (!host) return noop;
   const onClick = (e) => {
-    const btn = e.target.closest('[data-bronto-dismiss]');
+    const btn = closestSafe(e.target, '[data-bronto-dismiss]');
     if (!btn || !host.contains(btn)) return;
     const sel = btn.getAttribute('data-bronto-dismiss');
-    const target = sel ? closestSafe(btn, sel) : btn.closest('[data-bronto-dismissible]');
+    const target = sel ? closestSafe(btn, sel) : closestSafe(btn, '[data-bronto-dismissible]');
     if (!target) return;
+    e.preventDefault();
     const ev = new CustomEvent('bronto:dismiss', { bubbles: true, cancelable: true });
     if (target.dispatchEvent(ev)) target.remove();
   };

package/behaviors/forms.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"forms.d.ts","sourceRoot":"","sources":["forms.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,8CAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA6K3C"}
+{"version":3,"file":"forms.d.ts","sourceRoot":"","sources":["forms.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,8CAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAsP3C"}

package/behaviors/forms.js

@@ -29,6 +29,59 @@ export function initFormValidation({ root } = {}) {
   if (!hasDom()) return noop;
   const host = resolveHost(root);
   if (!host) return noop;
+  let priorNoValidate = new Map();
+  let controlState = new Map();
+  let slotState = new Map();
+  let summaryState = new Map();
+
+  const suppressNativeValidation = (form) => {
+    if (!priorNoValidate.has(form)) priorNoValidate.set(form, form.noValidate);
+    form.noValidate = true;
+  };
+
+  const snapshotAttrs = (el, names) => {
+    const out = {};
+    for (const name of names) {
+      out[name] = {
+        had: el.hasAttribute(name),
+        value: el.getAttribute(name),
+      };
+    }
+    return out;
+  };
+
+  const restoreAttrs = (el, attrs) => {
+    for (const [name, attr] of Object.entries(attrs)) {
+      if (attr.had) el.setAttribute(name, attr.value);
+      else el.removeAttribute(name);
+    }
+  };
+
+  const rememberControl = (control) => {
+    if (!controlState.has(control)) {
+      controlState.set(control, snapshotAttrs(control, ['aria-invalid', 'aria-describedby', 'id']));
+    }
+  };
+
+  const rememberSlot = (slot) => {
+    if (!slotState.has(slot)) {
+      slotState.set(slot, {
+        attrs: snapshotAttrs(slot, ['id']),
+        text: slot.textContent,
+        hadErrorClass: slot.classList.contains('ui-hint--error'),
+      });
+    }
+  };
+
+  const rememberSummary = (summary) => {
+    if (!summaryState.has(summary)) {
+      summaryState.set(summary, {
+        attrs: snapshotAttrs(summary, ['role', 'tabindex']),
+        children: [...summary.childNodes],
+        hidden: summary.hidden,
+      });
+    }
+  };
 
   const ensureId = (el, prefix) => {
     if (!el.id) el.id = `${prefix}-${nextFieldUid()}`;
@@ -69,8 +122,10 @@ export function initFormValidation({ root } = {}) {
 
   const validateField = (control) => {
     if (!control.willValidate) return true;
+    rememberControl(control);
     const ok = control.validity.valid;
     const slot = slotFor(control);
+    if (slot) rememberSlot(slot);
     // Decide the slot TYPE by the `[data-bronto-error]` attribute, NOT the
     // `.ui-hint` class: the canonical markup is `<p class="ui-hint"
     // data-bronto-error>`, which carries BOTH. Keying off `.ui-hint` sent that
@@ -118,6 +173,7 @@ export function initFormValidation({ root } = {}) {
   const refreshSummary = (form, invalid) => {
     const summary = form.querySelector('[data-bronto-error-summary]');
     if (!summary) return;
+    rememberSummary(summary);
     if (!invalid.length) {
       summary.hidden = true;
       summary.replaceChildren();
@@ -150,7 +206,7 @@ export function initFormValidation({ root } = {}) {
   const onSubmit = (e) => {
     const form = e.target.closest?.('[data-bronto-validate]');
     if (!form) return;
-    form.noValidate = true;
+    suppressNativeValidation(form);
     const invalid = controlsOf(form).filter((c) => !validateField(c));
     refreshSummary(form, invalid);
     if (invalid.length) {
@@ -165,7 +221,7 @@ export function initFormValidation({ root } = {}) {
     if (!control.willValidate) return;
     const form = control.closest?.('[data-bronto-validate]');
     if (!form) return;
-    form.noValidate = true;
+    suppressNativeValidation(form);
     validateField(control);
     const summary = form.querySelector('[data-bronto-error-summary]');
     if (summary && !summary.hidden)
@@ -183,10 +239,12 @@ export function initFormValidation({ root } = {}) {
     // summary — contradicting the documented contract. (Forms added
     // after init are still covered by the in-handler set.)
     const forms = collectHosts(host, '[data-bronto-validate]');
-    const priorNoValidate = new Map();
+    priorNoValidate = new Map();
+    controlState = new Map();
+    slotState = new Map();
+    summaryState = new Map();
     for (const f of forms) {
-      priorNoValidate.set(f, f.noValidate);
-      f.noValidate = true;
+      suppressNativeValidation(f);
     }
     host.addEventListener('submit', onSubmit, true);
     host.addEventListener('focusout', onBlur);
@@ -194,6 +252,21 @@ export function initFormValidation({ root } = {}) {
       host.removeEventListener('submit', onSubmit, true);
       host.removeEventListener('focusout', onBlur);
       for (const [f, v] of priorNoValidate) f.noValidate = v;
+      priorNoValidate.clear();
+      for (const [summary, state] of summaryState) {
+        summary.replaceChildren(...state.children);
+        summary.hidden = state.hidden;
+        restoreAttrs(summary, state.attrs);
+      }
+      summaryState.clear();
+      for (const [slot, state] of slotState) {
+        slot.textContent = state.text;
+        slot.classList.toggle('ui-hint--error', state.hadErrorClass);
+        restoreAttrs(slot, state.attrs);
+      }
+      slotState.clear();
+      for (const [control, attrs] of controlState) restoreAttrs(control, attrs);
+      controlState.clear();
     };
   });
 }

package/behaviors/glyph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"glyph.d.ts","sourceRoot":"","sources":["glyph.js"],"names":[],"mappings":"AAeA;;;;;;;;;;;;;;;;;;GAkBG;AACH,wCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAyJ3C"}
+{"version":3,"file":"glyph.d.ts","sourceRoot":"","sources":["glyph.js"],"names":[],"mappings":"AA6BA;;;;;;;;;;;;;;;;;;GAkBG;AACH,wCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA0J3C"}

package/behaviors/glyph.js

@@ -1,11 +1,25 @@
 import { hasDom, resolveHost, noop, collectHosts } from './internal.js';
 import { GLYPH_SIZE, glyphCells, glyphMask } from '../glyphs/glyphs.js';
 
+const GLYPH_CLEANUP = Symbol('bronto-glyph-cleanup');
+
 function restoreAttr(el, name, prev) {
   if (prev === null) el.removeAttribute(name);
   else el.setAttribute(name, prev);
 }
 
+function rememberCleanup(el, cleanups, cleanup) {
+  let done = false;
+  const wrapped = () => {
+    if (done) return;
+    done = true;
+    cleanup();
+    if (el[GLYPH_CLEANUP] === wrapped) delete el[GLYPH_CLEANUP];
+  };
+  el[GLYPH_CLEANUP] = wrapped;
+  cleanups.push(wrapped);
+}
+
 // `dot`/`gap`/`size` land in inline CSS, so allow only length/calc syntax —
 // drop anything with a `;`/`{` that could open a second declaration (mirrors
 // glyphs.js cssLen). Used for the mask path's --icon-size.
@@ -40,6 +54,7 @@ export function initDotGlyph({ root } = {}) {
   const cleanups = [];
 
   for (const el of els) {
+    el[GLYPH_CLEANUP]?.();
     const name = el.getAttribute('data-bronto-glyph');
     const label = el.getAttribute('data-bronto-glyph-label');
 
@@ -67,7 +82,7 @@ export function initDotGlyph({ root } = {}) {
         el.setAttribute('aria-hidden', 'true');
       }
 
-      cleanups.push(() => {
+      rememberCleanup(el, cleanups, () => {
         if (!hadIcon) el.classList.remove('ui-icon');
         if (hadMask) el.style.setProperty('--icon-mask', hadMask);
         else el.style.removeProperty('--icon-mask');
@@ -159,7 +174,7 @@ export function initDotGlyph({ root } = {}) {
     });
     el.appendChild(frag);
 
-    cleanups.push(() => {
+    rememberCleanup(el, cleanups, () => {
       el.querySelectorAll(':scope > .ui-dotmatrix__cell').forEach((n) => n.remove());
       if (!hadMatrix) el.classList.remove('ui-dotmatrix');
       if (animClass && !hadAnimClass) el.classList.remove(animClass);

package/behaviors/index.d.ts

@@ -18,6 +18,7 @@ export { initSpotlight } from "./spotlight.js";
 export { initCrosshair } from "./crosshair.js";
 export { initCommand } from "./command.js";
 export { initSources } from "./sources.js";
+export { initSplitter } from "./splitter.js";
 export type Cleanup = import("./internal.js").Cleanup;
 export type DelegateOpts = import("./internal.js").DelegateOpts;
 export type ThemeStorageOpts = import("./theme.js").ThemeStorageOpts;
@@ -29,5 +30,6 @@ export type LegendToggleDetail = import("./legend.js").LegendToggleDetail;
 export type CrosshairMoveDetail = import("./crosshair.js").CrosshairMoveDetail;
 export type CommandSelectDetail = import("./command.js").CommandSelectDetail;
 export type SourceFocusDetail = import("./sources.js").SourceFocusDetail;
+export type SplitterResizeDetail = import("./splitter.js").SplitterResizeDetail;
 export { applyStoredTheme, initThemeToggle } from "./theme.js";
 //# sourceMappingURL=index.d.ts.map

package/behaviors/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;sBAmBa,OAAO,eAAe,EAAE,OAAO;2BAC/B,OAAO,eAAe,EAAE,YAAY;+BACpC,OAAO,YAAY,EAAE,gBAAgB;6BACrC,OAAO,YAAY,EAAE,cAAc;gCACnC,OAAO,YAAY,EAAE,iBAAiB;wBACtC,OAAO,YAAY,EAAE,SAAS;+BAC9B,OAAO,YAAY,EAAE,gBAAgB;iCACrC,OAAO,aAAa,EAAE,kBAAkB;kCACxC,OAAO,gBAAgB,EAAE,mBAAmB;kCAC5C,OAAO,cAAc,EAAE,mBAAmB;gCAC1C,OAAO,cAAc,EAAE,iBAAiB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;sBAmBa,OAAO,eAAe,EAAE,OAAO;2BAC/B,OAAO,eAAe,EAAE,YAAY;+BACpC,OAAO,YAAY,EAAE,gBAAgB;6BACrC,OAAO,YAAY,EAAE,cAAc;gCACnC,OAAO,YAAY,EAAE,iBAAiB;wBACtC,OAAO,YAAY,EAAE,SAAS;+BAC9B,OAAO,YAAY,EAAE,gBAAgB;iCACrC,OAAO,aAAa,EAAE,kBAAkB;kCACxC,OAAO,gBAAgB,EAAE,mBAAmB;kCAC5C,OAAO,cAAc,EAAE,mBAAmB;gCAC1C,OAAO,cAAc,EAAE,iBAAiB;mCACxC,OAAO,eAAe,EAAE,oBAAoB"}

package/behaviors/index.js

@@ -28,6 +28,7 @@
  * @typedef {import('./crosshair.js').CrosshairMoveDetail} CrosshairMoveDetail
  * @typedef {import('./command.js').CommandSelectDetail} CommandSelectDetail
  * @typedef {import('./sources.js').SourceFocusDetail} SourceFocusDetail
+ * @typedef {import('./splitter.js').SplitterResizeDetail} SplitterResizeDetail
  */
 export { applyStoredTheme, initThemeToggle } from './theme.js';
 export { dismissible } from './dismissible.js';
@@ -50,3 +51,4 @@ export { initSpotlight } from './spotlight.js';
 export { initCrosshair } from './crosshair.js';
 export { initCommand } from './command.js';
 export { initSources } from './sources.js';
+export { initSplitter } from './splitter.js';

package/behaviors/inert.js

@@ -1,4 +1,4 @@
-import { hasDom, resolveHost, noop, bindOnce } from './internal.js';
+import { hasDom, resolveHost, noop, bindOnce, closestSafe } from './internal.js';
 
 const DISABLED = '[aria-disabled="true"]';
 
@@ -25,9 +25,10 @@ export function initDisabledGuard({ root } = {}) {
   const host = resolveHost(root);
   if (!host) return noop;
   const block = (e) => {
-    const el = e.target.closest?.(DISABLED);
+    const el = closestSafe(e.target, DISABLED);
     if (el && host.contains(el)) {
       e.preventDefault();
+      e.stopImmediatePropagation?.();
       e.stopPropagation();
     }
   };

package/behaviors/internal.d.ts

@@ -19,7 +19,8 @@ export type Cleanup = () => void;
 export type DelegateOpts = {
     /**
      * Event-delegation root; also scopes which controls are queried. Default: `document`.
+     * `null` means a scope was requested but is not ready yet, so the behavior no-ops.
      */
-    root?: Document | Element | undefined;
+    root?: Document | Element | null | undefined;
 };
 //# sourceMappingURL=internal.d.ts.map

package/behaviors/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["internal.js"],"names":[],"mappings":"AA8BA,iEAGC;AAeD,sEAUC;AAED,oDAQC;AAED,yDAMC;AAMD,8DAIC;AAID;;SAMC;AAUD,gDAQC;AAMD,+DAKC;AA9GM,6BAAqB;AAErB,kCAAoD;AAsBpD,uCAAqC;;;;;sBAjC/B,MAAM,IAAI"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["internal.js"],"names":[],"mappings":"AAiDA,iEAIC;AAeD,sEAUC;AAED,oDAQC;AAED,yDAOC;AAMD,8DAIC;AAID;;SAMC;AAUD,gDAQC;AAMD,+DAKC;AAlIM,6BAAqB;AAErB,kCAAoD;AAyCpD,uCAAqC;;;;;sBArD/B,MAAM,IAAI"}

package/behaviors/internal.js

@@ -9,16 +9,34 @@
  *   behavior's listeners/observers.
  *
  * @typedef {object} DelegateOpts
- * @property {Document | Element} [root]
+ * @property {Document | Element | null} [root]
  *   Event-delegation root; also scopes which controls are queried. Default: `document`.
+ *   `null` means a scope was requested but is not ready yet, so the behavior no-ops.
  */
 
 export const noop = () => {};
 
 export const hasDom = () => typeof document !== 'undefined';
 
+function isDelegationHost(value) {
+  if (!value || typeof value !== 'object') return false;
+  if (value.nodeType === 9) {
+    return (
+      typeof value.addEventListener === 'function' && typeof value.querySelectorAll === 'function'
+    );
+  }
+  if (value.nodeType === 1) {
+    return (
+      typeof value.addEventListener === 'function' &&
+      typeof value.matches === 'function' &&
+      typeof value.querySelectorAll === 'function'
+    );
+  }
+  return false;
+}
+
 // 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
+// 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.
@@ -26,11 +44,13 @@ export const hasDom = () => typeof document !== 'undefined';
 //     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.
+//   • root is anything else → no-op; the public contract is Document | Element.
 // 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;
+  if (root === undefined) return isDelegationHost(fallback) ? fallback : null;
+  return isDelegationHost(root) ? root : null;
 }
 
 // Monotonic counter for auto-minted field / list ids, shared across
@@ -70,7 +90,8 @@ export function byIdInHost(host, id) {
 
 export function closestSafe(el, selector) {
   try {
-    return el.closest(selector);
+    const start = el?.nodeType === 1 ? el : el?.parentElement;
+    return start?.closest?.(selector) ?? null;
   } catch {
     return null;
   }

package/behaviors/legend.d.ts

@@ -1,8 +1,3 @@
-/**
- * @typedef {object} LegendToggleDetail
- * @property {string | number} series The entry's `data-series`, or its 0-based index when unset.
- * @property {boolean} active The new state (`true` ⇒ series shown).
- */
 /**
  * Wire `[data-bronto-legend]` interactive legends. Each entry is a
  * `.ui-legend__item` authored as a `<button aria-pressed>`; clicking it (or

package/behaviors/legend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"legend.d.ts","sourceRoot":"","sources":["legend.js"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH;;;;;;;;;;;;;;;;;GAiBG;AACH,sCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAmD3C;;;;;YAvEa,MAAM,GAAG,MAAM;;;;YACf,OAAO"}
+{"version":3,"file":"legend.d.ts","sourceRoot":"","sources":["legend.js"],"names":[],"mappings":"AAUA;;;;;;;;;;;;;;;;;GAiBG;AACH,sCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAiH3C;;;;;YAvIa,MAAM,GAAG,MAAM;;;;YACf,OAAO"}

package/behaviors/legend.js

@@ -1,4 +1,4 @@
-import { hasDom, resolveHost, noop, bindOnce } from './internal.js';
+import { hasDom, resolveHost, noop, bindOnce, collectHosts, closestSafe } from './internal.js';
 
 /**
  * @typedef {object} LegendToggleDetail
@@ -6,6 +6,8 @@ import { hasDom, resolveHost, noop, bindOnce } from './internal.js';
  * @property {boolean} active The new state (`true` ⇒ series shown).
  */
 
+const handledEvents = new WeakSet();
+
 /**
  * Wire `[data-bronto-legend]` interactive legends. Each entry is a
  * `.ui-legend__item` authored as a `<button aria-pressed>`; clicking it (or
@@ -28,16 +30,40 @@ export function initLegend({ root } = {}) {
   if (!hasDom()) return noop;
   const host = resolveHost(root);
   if (!host) return noop;
+  const snapshotAttrs = (el, names) => {
+    const attrs = {};
+    for (const name of names) {
+      attrs[name] = {
+        had: el.hasAttribute(name),
+        value: el.getAttribute(name),
+      };
+    }
+    return attrs;
+  };
+  const restoreAttrs = (el, attrs) => {
+    for (const [name, state] of Object.entries(attrs)) {
+      if (state.had) el.setAttribute(name, state.value);
+      else el.removeAttribute(name);
+    }
+  };
+  const directItems = (legend) =>
+    [...legend.querySelectorAll('.ui-legend__item')].filter(
+      (el) => el.closest('[data-bronto-legend]') === legend,
+    );
   const isButton = (el) => el.tagName === 'BUTTON' || el.getAttribute('role') === 'button';
-  const onClick = (e) => {
-    const item = e.target.closest('.ui-legend__item');
+  const legendFor = (item) => {
     if (!item || !host.contains(item)) return;
     const legend = item.closest('[data-bronto-legend]');
     if (!legend || !host.contains(legend)) return;
+    return legend;
+  };
+  const toggle = (item) => {
+    const legend = legendFor(item);
+    if (!legend) return false;
     // 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;
+    // non-button item is mouse-only unless role=button is keyboard-normalized
+    // below — refuse anything else rather than ship a pointer-only control.
+    if (!isButton(item)) return false;
     const active = item.getAttribute('aria-pressed') !== 'false';
     const next = !active;
     item.setAttribute('aria-pressed', String(next));
@@ -53,24 +79,62 @@ export function initLegend({ root } = {}) {
         detail: { series: item.dataset.series ?? items.indexOf(item), active: next },
       }),
     );
+    return true;
+  };
+  const onClick = (e) => {
+    if (handledEvents.has(e)) return;
+    if (toggle(closestSafe(e.target, '.ui-legend__item'))) handledEvents.add(e);
+  };
+  const onKey = (e) => {
+    if (handledEvents.has(e)) return;
+    if (e.key !== 'Enter' && e.key !== ' ') return;
+    const item = closestSafe(e.target, '.ui-legend__item');
+    if (!item || item.tagName === 'BUTTON' || item.getAttribute('role') !== 'button') return;
+    e.preventDefault();
+    if (toggle(item)) handledEvents.add(e);
   };
   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).
+    // Normalize role=button entries and warn once per unsupported non-button
+    // item present at bind. A real <button> remains the recommended markup.
+    const legends = collectHosts(host, '[data-bronto-legend]');
+    const itemStates = [];
+    for (const legend of legends) {
+      for (const el of directItems(legend)) {
+        itemStates.push({
+          el,
+          attrs: snapshotAttrs(el, ['type', 'tabindex', 'aria-pressed']),
+          inactive: el.classList.contains('is-inactive'),
+        });
+        if (el.tagName === 'BUTTON' && !el.hasAttribute('type')) el.setAttribute('type', 'button');
+        if (
+          el.tagName !== 'BUTTON' &&
+          el.getAttribute('role') === 'button' &&
+          !el.hasAttribute('tabindex')
+        ) {
+          el.tabIndex = 0;
+        }
+      }
+    }
     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),
-        );
+      for (const legend of legends) {
+        const stray = directItems(legend).some((el) => !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.',
+            '[bronto] initLegend(): interactive legend entries must be <button> or role="button" — unsupported .ui-legend__item controls are ignored.',
           );
           break;
         }
       }
     }
     host.addEventListener('click', onClick);
-    return () => host.removeEventListener('click', onClick);
+    host.addEventListener('keydown', onKey);
+    return () => {
+      host.removeEventListener('click', onClick);
+      host.removeEventListener('keydown', onKey);
+      for (const state of itemStates) {
+        restoreAttrs(state.el, state.attrs);
+        state.el.classList.toggle('is-inactive', state.inactive);
+      }
+    };
   });
 }

package/behaviors/menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["menu.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AACH,oCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAmC3C"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["menu.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AACH,oCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAwC3C"}

package/behaviors/menu.js

@@ -1,4 +1,4 @@
-import { hasDom, resolveHost, noop, bindOnce } from './internal.js';
+import { hasDom, resolveHost, noop, bindOnce, closestSafe, collectHosts } from './internal.js';
 
 /**
  * Dropdown-menu close affordances for a native `<details data-bronto-menu>`
@@ -18,32 +18,37 @@ 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 doc = host.nodeType === 9 ? host : host.ownerDocument || document;
+  const openMenus = () => collectHosts(host, '[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]');
+    const target = e.target;
+    const menu = closestSafe(target, '[data-bronto-menu]');
     // Activate an item → close its menu (and return focus to summary).
-    if (menu && e.target.closest('.ui-menu__item')) {
+    if (menu && host.contains(menu) && closestSafe(target, '.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;
+    for (const m of openMenus()) if (!m.contains(target)) m.open = false;
   };
   const onKey = (e) => {
     if (e.key !== 'Escape') return;
-    const menu = e.target.closest?.('[data-bronto-menu][open]') || openMenus()[0];
+    const menu = closestSafe(e.target, '[data-bronto-menu][open]') || openMenus()[0];
+    if (!menu) return;
+    e.preventDefault();
+    e.stopPropagation();
     shut(menu);
   };
   return bindOnce(host, 'menu', () => {
-    host.addEventListener('click', onClick);
+    doc.addEventListener('click', onClick);
     host.addEventListener('keydown', onKey);
     return () => {
-      host.removeEventListener('click', onClick);
+      doc.removeEventListener('click', onClick);
       host.removeEventListener('keydown', onKey);
     };
   });

package/behaviors/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["modal.js"],"names":[],"mappings":"AAEA;;;GAGG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAyF3C;;;;;YAvHa,QAAQ"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["modal.js"],"names":[],"mappings":"AAsDA;;;GAGG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA+F3C;;;;;YA7Ha,QAAQ"}