@ponchia/ui 0.6.7 → 0.6.9

package/behaviors/glyph.js

@@ -1,11 +1,35 @@
 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 restoreStyleProp(el, name, prev) {
+  if (prev) el.style.setProperty(name, prev);
+  else el.style.removeProperty(name);
+}
+
+function cleanupEmptyClassAndStyle(el) {
+  if (el.getAttribute('class') === '') el.removeAttribute('class');
+  if (el.getAttribute('style') === '') el.removeAttribute('style');
+}
+
+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.
@@ -13,6 +37,151 @@ function cssLen(v) {
   return v && /^[\w.%+\-*/()\s,]+$/.test(v) ? v : '';
 }
 
+function applyGlyphA11y(el, label) {
+  if (label) {
+    el.setAttribute('role', 'img');
+    el.setAttribute('aria-label', label);
+    el.removeAttribute('aria-hidden');
+  } else {
+    el.setAttribute('aria-hidden', 'true');
+  }
+}
+
+function expandMaskGlyph(el, name, label, cleanups) {
+  if (el.classList.contains('ui-icon') && el.style.getPropertyValue('--icon-mask')) return;
+  const mask = glyphMask(name);
+  if (!mask) return; // unknown glyph — leave the placeholder as-is
+
+  const hadIcon = el.classList.contains('ui-icon');
+  const hadMask = el.style.getPropertyValue('--icon-mask');
+  const hadSize = el.style.getPropertyValue('--icon-size');
+  const hadAriaHidden = el.getAttribute('aria-hidden');
+  const hadRole = el.getAttribute('role');
+  const hadAriaLabel = el.getAttribute('aria-label');
+  const size = cssLen(el.getAttribute('data-bronto-glyph-size'));
+
+  el.classList.add('ui-icon');
+  el.style.setProperty('--icon-mask', mask);
+  if (size) el.style.setProperty('--icon-size', size);
+  applyGlyphA11y(el, label);
+
+  rememberCleanup(el, cleanups, () => {
+    if (!hadIcon) el.classList.remove('ui-icon');
+    restoreStyleProp(el, '--icon-mask', hadMask);
+    restoreStyleProp(el, '--icon-size', hadSize);
+    restoreAttr(el, 'aria-hidden', hadAriaHidden);
+    restoreAttr(el, 'role', hadRole);
+    restoreAttr(el, 'aria-label', hadAriaLabel);
+    cleanupEmptyClassAndStyle(el);
+  });
+}
+
+function glyphAnimClass(animAttr) {
+  if (animAttr === 'reveal') return 'ui-dotmatrix--reveal';
+  if (animAttr === 'pulse') return 'ui-dotmatrix--pulse';
+  return null;
+}
+
+function authoredDotSize(el) {
+  return (
+    el.style.getPropertyValue('--dotmatrix-dot') ||
+    (typeof getComputedStyle === 'function'
+      ? getComputedStyle(el).getPropertyValue('--dotmatrix-dot').trim()
+      : '')
+  );
+}
+
+function applyDefaultDotScale(el, solid, hadGap) {
+  const setDefaultDot = !authoredDotSize(el);
+  let setDefaultGap = false;
+  if (setDefaultDot) {
+    el.style.setProperty('--dotmatrix-dot', '0.08em');
+    if (!solid && !hadGap) {
+      el.style.setProperty('--dotmatrix-gap', '0.02em'); // tight, so it reads as one glyph
+      setDefaultGap = true;
+    }
+  }
+  return { setDefaultDot, setDefaultGap };
+}
+
+function dotCellClass(cell) {
+  if (!cell.on) return 'ui-dotmatrix__cell';
+  if (cell.tone === 'hot') return 'ui-dotmatrix__cell ui-dotmatrix__cell--hot';
+  if (cell.tone === 'accent') return 'ui-dotmatrix__cell ui-dotmatrix__cell--accent';
+  return 'ui-dotmatrix__cell';
+}
+
+function appendGlyphCells(el, cells, { solid, animAttr }) {
+  const frag = document.createDocumentFragment();
+  cells.forEach((cell, i) => {
+    const span = document.createElement('span');
+    span.className = dotCellClass(cell);
+    if (!cell.on && solid) span.style.background = 'transparent'; // glyph-only
+    if (animAttr === 'reveal') span.style.setProperty('--i', String(i)); // scan stagger
+    frag.appendChild(span);
+  });
+  el.appendChild(frag);
+}
+
+function expandCellGlyph(el, name, label, cleanups) {
+  // Scope to DIRECT-child cells (the ones we append) — so a placeholder that
+  // legitimately nests its own .ui-dotmatrix is neither mis-read as already
+  // expanded here nor have its inner cells removed by cleanup below.
+  if (el.querySelector(':scope > .ui-dotmatrix__cell')) return; // already expanded
+  const cells = glyphCells(name);
+  if (!cells.length) return; // unknown glyph — leave the placeholder as-is
+
+  // `data-bronto-glyph-solid` → square, gapless pixel glyph (legible small),
+  // the DOM counterpart to renderGlyph's `solid` option. Implies glyph-only.
+  const solid = el.hasAttribute('data-bronto-glyph-solid');
+  // `data-bronto-glyph-anim="reveal|pulse"` → decorative animation (the DOM
+  // counterpart to renderGlyph's `anim`; reduced-motion-safe via CSS).
+  const animAttr = el.getAttribute('data-bronto-glyph-anim');
+  const animClass = glyphAnimClass(animAttr);
+  const hadAnimClass = animClass ? el.classList.contains(animClass) : false;
+  const hadMatrix = el.classList.contains('ui-dotmatrix');
+  const hadCols = el.style.getPropertyValue('--dotmatrix-cols');
+  const hadRadius = el.style.getPropertyValue('--dotmatrix-dot-radius');
+  const hadGap = el.style.getPropertyValue('--dotmatrix-gap');
+  const hadAriaHidden = el.getAttribute('aria-hidden');
+  const hadRole = el.getAttribute('role');
+  const hadAriaLabel = el.getAttribute('aria-label');
+
+  el.classList.add('ui-dotmatrix');
+  if (animClass) el.classList.add(animClass);
+  el.style.setProperty('--dotmatrix-cols', String(GLYPH_SIZE));
+  if (solid) {
+    el.style.setProperty('--dotmatrix-dot-radius', '0');
+    el.style.setProperty('--dotmatrix-gap', '0');
+  }
+
+  // Without a track size the grid cells default to `1fr`, so the 16×16 matrix
+  // balloons to fill its container (full-bleed) — asymmetric with the mask
+  // path's safe 1em. If the author set no `--dotmatrix-dot` (inline OR via the
+  // cascade), default it to an intrinsic icon scale so a forgotten size
+  // degrades to ~icon, not full-bleed.
+  const defaults = applyDefaultDotScale(el, solid, hadGap);
+  applyGlyphA11y(el, label);
+  appendGlyphCells(el, cells, { solid, animAttr });
+
+  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);
+    if (solid) {
+      restoreStyleProp(el, '--dotmatrix-dot-radius', hadRadius);
+      restoreStyleProp(el, '--dotmatrix-gap', hadGap);
+    }
+    if (defaults.setDefaultDot) el.style.removeProperty('--dotmatrix-dot');
+    if (defaults.setDefaultGap) el.style.removeProperty('--dotmatrix-gap');
+    restoreStyleProp(el, '--dotmatrix-cols', hadCols);
+    restoreAttr(el, 'aria-hidden', hadAriaHidden);
+    restoreAttr(el, 'role', hadRole);
+    restoreAttr(el, 'aria-label', hadAriaLabel);
+    cleanupEmptyClassAndStyle(el);
+  });
+}
+
 /**
  * Expand `[data-bronto-glyph="name"]` placeholders into a `.ui-dotmatrix`
  * grid of GLYPH_SIZE² cells — the DOM counterpart to renderGlyph() from
@@ -40,146 +209,17 @@ 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');
 
     // One-node mask path — the icon-at-scale counterpart to the 256-cell grid.
     if (el.getAttribute('data-bronto-glyph-render') === 'mask') {
-      if (el.classList.contains('ui-icon') && el.style.getPropertyValue('--icon-mask')) continue;
-      const mask = glyphMask(name);
-      if (!mask) continue; // unknown glyph — leave the placeholder as-is
-      const hadIcon = el.classList.contains('ui-icon');
-      const hadMask = el.style.getPropertyValue('--icon-mask');
-      const hadSize = el.style.getPropertyValue('--icon-size');
-      const hadAriaHiddenM = el.getAttribute('aria-hidden');
-      const hadRoleM = el.getAttribute('role');
-      const hadAriaLabelM = el.getAttribute('aria-label');
-      const sizeM = cssLen(el.getAttribute('data-bronto-glyph-size'));
-
-      el.classList.add('ui-icon');
-      el.style.setProperty('--icon-mask', mask);
-      if (sizeM) el.style.setProperty('--icon-size', sizeM);
-      if (label) {
-        el.setAttribute('role', 'img');
-        el.setAttribute('aria-label', label);
-        el.removeAttribute('aria-hidden');
-      } else {
-        el.setAttribute('aria-hidden', 'true');
-      }
-
-      cleanups.push(() => {
-        if (!hadIcon) el.classList.remove('ui-icon');
-        if (hadMask) el.style.setProperty('--icon-mask', hadMask);
-        else el.style.removeProperty('--icon-mask');
-        if (sizeM && !hadSize) el.style.removeProperty('--icon-size');
-        else if (hadSize) el.style.setProperty('--icon-size', hadSize);
-        restoreAttr(el, 'aria-hidden', hadAriaHiddenM);
-        restoreAttr(el, 'role', hadRoleM);
-        restoreAttr(el, 'aria-label', hadAriaLabelM);
-        if (el.getAttribute('class') === '') el.removeAttribute('class');
-        if (el.getAttribute('style') === '') el.removeAttribute('style');
-      });
+      expandMaskGlyph(el, name, label, cleanups);
       continue;
     }
 
-    // Scope to DIRECT-child cells (the ones we append) — so a placeholder that
-    // legitimately nests its own .ui-dotmatrix is neither mis-read as already
-    // expanded here nor have its inner cells removed by cleanup below.
-    if (el.querySelector(':scope > .ui-dotmatrix__cell')) continue; // already expanded
-    const cells = glyphCells(name);
-    if (!cells.length) continue; // unknown glyph — leave the placeholder as-is
-    // `data-bronto-glyph-solid` → square, gapless pixel glyph (legible small),
-    // the DOM counterpart to renderGlyph's `solid` option. Implies glyph-only.
-    const solid = el.hasAttribute('data-bronto-glyph-solid');
-    // `data-bronto-glyph-anim="reveal|pulse"` → decorative animation (the DOM
-    // counterpart to renderGlyph's `anim`; reduced-motion-safe via CSS).
-    const animAttr = el.getAttribute('data-bronto-glyph-anim');
-    const animClass =
-      animAttr === 'reveal'
-        ? 'ui-dotmatrix--reveal'
-        : animAttr === 'pulse'
-          ? 'ui-dotmatrix--pulse'
-          : null;
-    const hadAnimClass = animClass ? el.classList.contains(animClass) : false;
-    const hadMatrix = el.classList.contains('ui-dotmatrix');
-    const hadCols = el.style.getPropertyValue('--dotmatrix-cols');
-    const hadRadius = el.style.getPropertyValue('--dotmatrix-dot-radius');
-    const hadGap = el.style.getPropertyValue('--dotmatrix-gap');
-    const hadAriaHidden = el.getAttribute('aria-hidden');
-    const hadRole = el.getAttribute('role');
-    const hadAriaLabel = el.getAttribute('aria-label');
-
-    el.classList.add('ui-dotmatrix');
-    if (animClass) el.classList.add(animClass);
-    el.style.setProperty('--dotmatrix-cols', String(GLYPH_SIZE));
-    if (solid) {
-      el.style.setProperty('--dotmatrix-dot-radius', '0');
-      el.style.setProperty('--dotmatrix-gap', '0');
-    }
-    // Without a track size the grid cells default to `1fr`, so the 16×16 matrix
-    // balloons to fill its container (full-bleed) — asymmetric with the mask
-    // path's safe 1em. If the author set no `--dotmatrix-dot` (inline OR via the
-    // cascade), default it to an intrinsic icon scale so a forgotten size
-    // degrades to ~icon, not full-bleed. (component audit C9.)
-    const authoredDot =
-      el.style.getPropertyValue('--dotmatrix-dot') ||
-      (typeof getComputedStyle === 'function'
-        ? getComputedStyle(el).getPropertyValue('--dotmatrix-dot').trim()
-        : '');
-    const setDefaultDot = !authoredDot;
-    let setDefaultGap = false;
-    if (setDefaultDot) {
-      el.style.setProperty('--dotmatrix-dot', '0.08em');
-      if (!solid && !hadGap) {
-        el.style.setProperty('--dotmatrix-gap', '0.02em'); // tight, so it reads as one glyph
-        setDefaultGap = true;
-      }
-    }
-    if (label) {
-      el.setAttribute('role', 'img');
-      el.setAttribute('aria-label', label);
-      el.removeAttribute('aria-hidden'); // a labelled img must not also be hidden
-    } else {
-      el.setAttribute('aria-hidden', 'true');
-    }
-
-    const frag = document.createDocumentFragment();
-    cells.forEach((c, i) => {
-      const span = document.createElement('span');
-      span.className = !c.on
-        ? 'ui-dotmatrix__cell'
-        : c.tone === 'hot'
-          ? 'ui-dotmatrix__cell ui-dotmatrix__cell--hot'
-          : c.tone === 'accent'
-            ? 'ui-dotmatrix__cell ui-dotmatrix__cell--accent'
-            : 'ui-dotmatrix__cell';
-      if (!c.on && solid) span.style.background = 'transparent'; // glyph-only
-      if (animAttr === 'reveal') span.style.setProperty('--i', String(i)); // scan stagger
-      frag.appendChild(span);
-    });
-    el.appendChild(frag);
-
-    cleanups.push(() => {
-      el.querySelectorAll(':scope > .ui-dotmatrix__cell').forEach((n) => n.remove());
-      if (!hadMatrix) el.classList.remove('ui-dotmatrix');
-      if (animClass && !hadAnimClass) el.classList.remove(animClass);
-      if (solid) {
-        if (hadRadius) el.style.setProperty('--dotmatrix-dot-radius', hadRadius);
-        else el.style.removeProperty('--dotmatrix-dot-radius');
-        if (hadGap) el.style.setProperty('--dotmatrix-gap', hadGap);
-        else el.style.removeProperty('--dotmatrix-gap');
-      }
-      if (setDefaultDot) el.style.removeProperty('--dotmatrix-dot');
-      if (setDefaultGap) el.style.removeProperty('--dotmatrix-gap');
-      if (hadCols) el.style.setProperty('--dotmatrix-cols', hadCols);
-      else el.style.removeProperty('--dotmatrix-cols');
-      restoreAttr(el, 'aria-hidden', hadAriaHidden);
-      restoreAttr(el, 'role', hadRole);
-      restoreAttr(el, 'aria-label', hadAriaLabel);
-      // Don't leave behind empty class=""/style="" we ourselves created.
-      if (el.getAttribute('class') === '') el.removeAttribute('class');
-      if (el.getAttribute('style') === '') el.removeAttribute('style');
-    });
+    expandCellGlyph(el, name, label, cleanups);
   }
 
   return () => cleanups.forEach((fn) => fn());

package/behaviors/inert.d.ts

@@ -11,7 +11,7 @@
  *
  * Wire once near the root, like {@link applyStoredTheme}. Capturing listeners
  * intercept activation before any component handler (tabs, pagination, menus)
- * sees it. (component audit C4.)
+ * sees it.
  *
  * @param {import('./internal.js').DelegateOpts} [opts]
  * @returns {import('./internal.js').Cleanup}

package/behaviors/inert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inert.d.ts","sourceRoot":"","sources":["inert.js"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AACH,6CAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAyB3C"}
+{"version":3,"file":"inert.d.ts","sourceRoot":"","sources":["inert.js"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AACH,6CAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA0B3C"}

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"]';
 
@@ -15,7 +15,7 @@ const DISABLED = '[aria-disabled="true"]';
  *
  * Wire once near the root, like {@link applyStoredTheme}. Capturing listeners
  * intercept activation before any component handler (tabs, pagination, menus)
- * sees it. (component audit C4.)
+ * sees it.
  *
  * @param {import('./internal.js').DelegateOpts} [opts]
  * @returns {import('./internal.js').Cleanup}
@@ -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.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["internal.js"],"names":[],"mappings":"AAiDA,iEAIC;AAeD,sEAUC;AAED,oDAQC;AAED,yDAMC;AAMD,8DAIC;AAID;;SAMC;AAUD,gDAQC;AAMD,+DAKC;AAjIM,6BAAqB;AAErB,kCAAoD;AAyCpD,uCAAqC;;;;;sBArD/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

@@ -90,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;
   }
@@ -120,7 +121,7 @@ export function scrollIntoViewSafe(el, opts = { block: 'nearest' }) {
 // by the modal and popover focus paths (a dialog/modal must move focus into
 // itself on open). Focus the first focusable descendant, else make the
 // container programmatically focusable and focus it, so a content-only
-// panel/modal still receives focus. (code-quality audit Q4.)
+// panel/modal still receives focus.
 const FOCUSABLE =
   'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 
@@ -137,7 +138,7 @@ export function focusInto(container) {
 // 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.)
+// logic diverges between the two for real reasons.
 export function wrapIndex(cur, delta, len) {
   let next = cur + delta;
   if (next < 0) next = len - 1;

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,CAmF3C;;;;;YAvGa,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,6 +30,26 @@ 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 legendFor = (item) => {
     if (!item || !host.contains(item)) return;
@@ -37,11 +59,11 @@ export function initLegend({ root } = {}) {
   };
   const toggle = (item) => {
     const legend = legendFor(item);
-    if (!legend) return;
+    if (!legend) return false;
     // The contract requires a real `<button>` (keyboard-operable, focusable). A
     // 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;
+    if (!isButton(item)) return false;
     const active = item.getAttribute('aria-pressed') !== 'false';
     const next = !active;
     item.setAttribute('aria-pressed', String(next));
@@ -57,25 +79,33 @@ export function initLegend({ root } = {}) {
         detail: { series: item.dataset.series ?? items.indexOf(item), active: next },
       }),
     );
+    return true;
   };
   const onClick = (e) => {
-    toggle(e.target.closest('.ui-legend__item'));
+    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 = e.target.closest('.ui-legend__item');
+    const item = closestSafe(e.target, '.ui-legend__item');
     if (!item || item.tagName === 'BUTTON' || item.getAttribute('role') !== 'button') return;
     e.preventDefault();
-    toggle(item);
+    if (toggle(item)) handledEvents.add(e);
   };
   return bindOnce(host, 'legend', () => {
     // Normalize role=button entries and warn once per unsupported non-button
     // item present at bind. A real <button> remains the recommended markup.
-    const legends = [...(host.querySelectorAll?.('[data-bronto-legend]') ?? [])];
+    const legends = collectHosts(host, '[data-bronto-legend]');
+    const itemStates = [];
     for (const legend of legends) {
-      for (const el of legend.querySelectorAll('.ui-legend__item')) {
-        if (el.closest('[data-bronto-legend]') !== legend) continue;
-        if (el.tagName === 'BUTTON' && !el.hasAttribute('type')) el.type = 'button';
+      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' &&
@@ -87,9 +117,7 @@ export function initLegend({ root } = {}) {
     }
     if (typeof console !== 'undefined') {
       for (const legend of legends) {
-        const stray = [...legend.querySelectorAll('.ui-legend__item')].some(
-          (el) => el.closest('[data-bronto-legend]') === legend && !isButton(el),
-        );
+        const stray = directItems(legend).some((el) => !isButton(el));
         if (stray) {
           console.warn(
             '[bronto] initLegend(): interactive legend entries must be <button> or role="button" — unsupported .ui-legend__item controls are ignored.',
@@ -103,6 +131,10 @@ export function initLegend({ root } = {}) {
     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"}