@ponchia/ui 0.6.6 → 0.6.8

package/behaviors/combobox.js

@@ -7,6 +7,7 @@ import {
   scrollIntoViewSafe,
   wrapIndex,
   collectHosts,
+  closestSafe,
 } from './internal.js';
 
 /**
@@ -54,12 +55,80 @@ export function initCombobox({ root } = {}) {
   const boxes = collectHosts(host, '[data-bronto-combobox]');
   const cleanups = [];
 
+  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);
+    }
+  };
+
   for (const box of boxes) {
     const input = box.querySelector('[role="combobox"], .ui-combobox__input');
     const list = box.querySelector('[role="listbox"], .ui-combobox__list');
     if (!input || !list) continue;
     const empty = box.querySelector('.ui-combobox__empty');
-    const listId = list.id || (list.id = `bronto-cb-list-${nextFieldUid()}`);
+    const optionStates = new WeakMap();
+    let listId = '';
+
+    const rememberOptionState = (option) => {
+      if (optionStates.has(option)) return;
+      optionStates.set(option, {
+        hidden: option.hidden,
+        active: option.classList.contains('is-active'),
+        attrs: snapshotAttrs(option, ['id', 'role', 'aria-selected']),
+      });
+    };
+
+    const rememberState = () => ({
+      input: snapshotAttrs(input, [
+        'role',
+        'aria-controls',
+        'aria-autocomplete',
+        'aria-expanded',
+        'aria-activedescendant',
+        'autocomplete',
+      ]),
+      list: {
+        hidden: list.hidden,
+        attrs: snapshotAttrs(list, ['id', 'role', 'aria-label']),
+      },
+      empty: empty
+        ? {
+            hidden: empty.hidden,
+            attrs: snapshotAttrs(empty, ['role']),
+          }
+        : null,
+      options: optionStates,
+    });
+
+    const restoreState = (state) => {
+      restoreAttrs(input, state.input);
+      list.hidden = state.list.hidden;
+      restoreAttrs(list, state.list.attrs);
+      if (empty && state.empty) {
+        empty.hidden = state.empty.hidden;
+        restoreAttrs(empty, state.empty.attrs);
+      }
+      for (const option of options) {
+        const optionState = state.options.get(option);
+        if (!optionState) continue;
+        option.hidden = optionState.hidden;
+        option.classList.toggle('is-active', optionState.active);
+        restoreAttrs(option, optionState.attrs);
+      }
+    };
+
     // Re-readable so the opt-in MutationObserver (`data-bronto-combobox-live`)
     // can pick up async/replaced option nodes without a full re-init. `visible`,
     // `filter`, `move`, etc. close over this binding, so reassigning it is enough.
@@ -67,51 +136,11 @@ export function initCombobox({ root } = {}) {
     const syncOptions = () => {
       options = [...list.querySelectorAll('[role="option"], .ui-combobox__option')];
       options.forEach((o, i) => {
+        rememberOptionState(o);
         if (!o.id) o.id = `${listId}-opt-${i}`;
         o.setAttribute('role', 'option');
       });
     };
-    syncOptions();
-    list.setAttribute('role', 'listbox');
-    // Give the listbox its own accessible name (a bare role=listbox is unnamed
-    // to a screen reader) by mirroring the input's REAL name. (a11y review C30.)
-    // The placeholder is deliberately NOT in this chain: the input warning below
-    // already rejects a placeholder as an inadequate name, so papering the
-    // listbox over with it would contradict that — if there's no real name the
-    // listbox stays unnamed and the warning is the signal. (component audit C28.)
-    if (!list.hasAttribute('aria-label') && !list.hasAttribute('aria-labelledby')) {
-      const name = input.getAttribute('aria-label') || input.labels?.[0]?.textContent?.trim();
-      if (name) list.setAttribute('aria-label', name);
-    }
-    // A `role="combobox"` with no accessible name is a silent AT failure. A
-    // placeholder is not a robust name (it can vanish and is ignored by some
-    // AT), so warn unless there is a real label/aria-label/aria-labelledby/title
-    // (C7). We can't invent a good name, hence a dev-time warning, not a guess.
-    const inputNamed =
-      input.hasAttribute('aria-label') ||
-      input.hasAttribute('aria-labelledby') ||
-      !!input.labels?.length ||
-      input.hasAttribute('title');
-    if (!inputNamed && typeof console !== 'undefined') {
-      console.warn(
-        '[bronto] initCombobox(): the combobox input has no accessible name — add a <label>, aria-label, or aria-labelledby (a placeholder is not enough).',
-      );
-    }
-    input.setAttribute('role', 'combobox');
-    input.setAttribute('aria-controls', listId);
-    input.setAttribute('aria-autocomplete', 'list');
-    input.setAttribute('aria-expanded', 'false');
-    input.setAttribute('autocomplete', 'off');
-    list.hidden = true;
-    // Hide the empty-state at rest: it must only appear once a filter yields no
-    // matches, never on an idle combobox. Without this an author who omits
-    // `hidden` on `.ui-combobox__empty` ships a box that reads "No matches"
-    // before the user has typed anything. (component audit C10.) Make it a
-    // status live region so its appearance is announced. (component audit C38.)
-    if (empty) {
-      empty.hidden = true;
-      if (!empty.hasAttribute('role')) empty.setAttribute('role', 'status');
-    }
 
     let active = -1;
     const visible = () => options.filter((o) => !o.hidden);
@@ -243,7 +272,7 @@ export function initCombobox({ root } = {}) {
       }
     };
     const onOptionClick = (e) => {
-      const opt = e.target.closest('[role="option"], .ui-combobox__option');
+      const opt = closestSafe(e.target, '[role="option"], .ui-combobox__option');
       if (opt) select(opt);
     };
     const onDocClick = (e) => {
@@ -251,6 +280,49 @@ export function initCombobox({ root } = {}) {
     };
 
     const bound = bindOnce(box, 'combobox', () => {
+      const state = rememberState();
+      listId = list.id || (list.id = `bronto-cb-list-${nextFieldUid()}`);
+      syncOptions();
+      list.setAttribute('role', 'listbox');
+      // Give the listbox its own accessible name (a bare role=listbox is unnamed
+      // to a screen reader) by mirroring the input's REAL name. (a11y review C30.)
+      // The placeholder is deliberately NOT in this chain: the input warning below
+      // already rejects a placeholder as an inadequate name, so papering the
+      // listbox over with it would contradict that — if there's no real name the
+      // listbox stays unnamed and the warning is the signal. (component audit C28.)
+      if (!list.hasAttribute('aria-label') && !list.hasAttribute('aria-labelledby')) {
+        const name = input.getAttribute('aria-label') || input.labels?.[0]?.textContent?.trim();
+        if (name) list.setAttribute('aria-label', name);
+      }
+      // A `role="combobox"` with no accessible name is a silent AT failure. A
+      // placeholder is not a robust name (it can vanish and is ignored by some
+      // AT), so warn unless there is a real label/aria-label/aria-labelledby/title
+      // (C7). We can't invent a good name, hence a dev-time warning, not a guess.
+      const inputNamed =
+        input.hasAttribute('aria-label') ||
+        input.hasAttribute('aria-labelledby') ||
+        !!input.labels?.length ||
+        input.hasAttribute('title');
+      if (!inputNamed && typeof console !== 'undefined') {
+        console.warn(
+          '[bronto] initCombobox(): the combobox input has no accessible name — add a <label>, aria-label, or aria-labelledby (a placeholder is not enough).',
+        );
+      }
+      input.setAttribute('role', 'combobox');
+      input.setAttribute('aria-controls', listId);
+      input.setAttribute('aria-autocomplete', 'list');
+      input.setAttribute('aria-expanded', 'false');
+      input.setAttribute('autocomplete', 'off');
+      // Hide the empty-state at rest: it must only appear once a filter yields no
+      // matches, never on an idle combobox. Without this an author who omits
+      // `hidden` on `.ui-combobox__empty` ships a box that reads "No matches"
+      // before the user has typed anything. (component audit C10.) Make it a
+      // status live region so its appearance is announced. (component audit C38.)
+      if (empty) {
+        empty.hidden = true;
+        if (!empty.hasAttribute('role')) empty.setAttribute('role', 'status');
+      }
+      close();
       input.addEventListener('input', onInput);
       input.addEventListener('keydown', onKey);
       list.addEventListener('click', onOptionClick);
@@ -268,6 +340,8 @@ export function initCombobox({ root } = {}) {
         input.removeEventListener('keydown', onKey);
         list.removeEventListener('click', onOptionClick);
         document.removeEventListener('click', onDocClick);
+        restoreState(state);
+        active = -1;
       };
     });
     cleanups.push(bound);

package/behaviors/command.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["command.js"],"names":[],"mappings":"AAWA;;;;GAIG;AAEH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,uCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA+J3C;;;;;WAzLa,MAAM;;;;WACN,MAAM"}
+{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["command.js"],"names":[],"mappings":"AAYA;;;;GAIG;AAEH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,uCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA0N3C;;;;;WApPa,MAAM;;;;WACN,MAAM"}

package/behaviors/command.js

@@ -7,6 +7,7 @@ import {
   collectHosts,
   scrollIntoViewSafe,
   wrapIndex,
+  closestSafe,
 } from './internal.js';
 
 /**
@@ -46,6 +47,24 @@ export function initCommand({ root } = {}) {
   const palettes = collectHosts(host, '[data-bronto-command]');
   const cleanups = [];
 
+  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);
+    }
+  };
+
   for (const box of palettes) {
     const input = box.querySelector('.ui-command__input, input');
     const list = box.querySelector('.ui-command__list, [role="listbox"]');
@@ -54,18 +73,44 @@ export function initCommand({ root } = {}) {
     const items = [...list.querySelectorAll('.ui-command__item, [role="option"]')];
     const groups = [...list.querySelectorAll('.ui-command__group')];
 
-    const listId = list.id || (list.id = `bronto-cmd-${nextFieldUid()}`);
-    items.forEach((it, i) => {
-      if (!it.id) it.id = `${listId}-opt-${i}`;
-      it.setAttribute('role', 'option');
+    const rememberState = () => ({
+      input: snapshotAttrs(input, [
+        'role',
+        'aria-controls',
+        'aria-autocomplete',
+        'aria-expanded',
+        'aria-activedescendant',
+        'autocomplete',
+      ]),
+      list: snapshotAttrs(list, ['id', 'role']),
+      empty: empty ? { hidden: empty.hidden } : null,
+      groups: groups.map((g) => ({
+        el: g,
+        hidden: g.hidden,
+        attrs: snapshotAttrs(g, ['role']),
+      })),
+      items: items.map((it) => ({
+        el: it,
+        hidden: it.hidden,
+        active: it.classList.contains('is-active'),
+        attrs: snapshotAttrs(it, ['id', 'role', 'aria-selected']),
+      })),
     });
-    groups.forEach((g) => g.setAttribute('role', 'presentation'));
-    list.setAttribute('role', 'listbox');
-    input.setAttribute('role', 'combobox');
-    input.setAttribute('aria-controls', listId);
-    input.setAttribute('aria-autocomplete', 'list');
-    input.setAttribute('aria-expanded', 'true');
-    input.setAttribute('autocomplete', 'off');
+
+    const restoreState = (state) => {
+      restoreAttrs(input, state.input);
+      restoreAttrs(list, state.list);
+      if (empty && state.empty) empty.hidden = state.empty.hidden;
+      for (const group of state.groups) {
+        group.el.hidden = group.hidden;
+        restoreAttrs(group.el, group.attrs);
+      }
+      for (const item of state.items) {
+        item.el.hidden = item.hidden;
+        item.el.classList.toggle('is-active', item.active);
+        restoreAttrs(item.el, item.attrs);
+      }
+    };
 
     let active = -1;
     const visible = () => items.filter((it) => !it.hidden);
@@ -176,22 +221,37 @@ export function initCommand({ root } = {}) {
       }
     };
     const onClick = (e) => {
-      const item = e.target.closest('.ui-command__item, [role="option"]');
+      const item = closestSafe(e.target, '.ui-command__item, [role="option"]');
       if (item && list.contains(item)) choose(item);
     };
 
     const bound = bindOnce(box, 'command', () => {
+      const state = rememberState();
+      const listId = list.id || (list.id = `bronto-cmd-${nextFieldUid()}`);
+      items.forEach((it, i) => {
+        if (!it.id) it.id = `${listId}-opt-${i}`;
+        it.setAttribute('role', 'option');
+      });
+      groups.forEach((g) => g.setAttribute('role', 'presentation'));
+      list.setAttribute('role', 'listbox');
+      input.setAttribute('role', 'combobox');
+      input.setAttribute('aria-controls', listId);
+      input.setAttribute('aria-autocomplete', 'list');
+      input.setAttribute('aria-expanded', 'true');
+      input.setAttribute('autocomplete', 'off');
       input.addEventListener('input', onInput);
       input.addEventListener('keydown', onKey);
       list.addEventListener('click', onClick);
+      // Seed the initial active item (first visible).
+      filter();
       return () => {
         input.removeEventListener('input', onInput);
         input.removeEventListener('keydown', onKey);
         list.removeEventListener('click', onClick);
+        restoreState(state);
+        active = -1;
       };
     });
-    // Seed the initial active item (first visible).
-    filter();
     cleanups.push(bound);
   }
 

package/behaviors/connectors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"connectors.d.ts","sourceRoot":"","sources":["connectors.js"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;GAcG;AACH,0CAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA+E3C"}
+{"version":3,"file":"connectors.d.ts","sourceRoot":"","sources":["connectors.js"],"names":[],"mappings":"AA2CA;;;;;;;;;;;;;;GAcG;AACH,0CAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA4H3C"}

package/behaviors/connectors.js

@@ -3,6 +3,44 @@ import { connectRects, arrowHead, dotMark } from '../connectors/index.js';
 
 const SVGNS = 'http://www.w3.org/2000/svg';
 
+const snapshotAttrs = (el) =>
+  Array.from(el.attributes, ({ name, value }) => ({
+    name,
+    value,
+  }));
+
+const restoreAttrs = (el, attrs) => {
+  for (const { name } of Array.from(el.attributes)) el.removeAttribute(name);
+  for (const { name, value } of attrs) el.setAttribute(name, value);
+};
+
+const snapshotPart = (svg, selector) => {
+  const node = svg.querySelector(selector);
+  if (!node) return { node: null };
+  return {
+    node,
+    attrs: snapshotAttrs(node),
+    parent: node.parentNode,
+    nextSibling: node.nextSibling,
+    textContent: node.textContent,
+  };
+};
+
+const restorePart = (svg, selector, state) => {
+  if (!state.node) {
+    svg.querySelector(selector)?.remove();
+    return;
+  }
+
+  const parent = state.parent || svg;
+  if (state.node.parentNode !== parent) {
+    const before = state.nextSibling?.parentNode === parent ? state.nextSibling : null;
+    parent.insertBefore(state.node, before);
+  }
+  restoreAttrs(state.node, state.attrs);
+  state.node.textContent = state.textContent;
+};
+
 /**
  * Draw + keep leader lines in sync. Each `[data-bronto-connector]` is an
  * `.ui-connector` SVG overlaying a positioned container; `data-from`/`data-to`
@@ -22,26 +60,60 @@ export function initConnectors({ root } = {}) {
   if (!hasDom()) return noop;
   const host = resolveHost(root);
   if (!host) return noop;
-  const connectors = collectHosts(host, '[data-bronto-connector]');
-  if (!connectors.length) return noop;
+
+  const fallbackRect = (svg, el) => {
+    const origin = svg.getBoundingClientRect();
+    const r = el.getBoundingClientRect();
+    const scaleX = origin.width ? (svg.clientWidth || origin.width) / origin.width : 1;
+    const scaleY = origin.height ? (svg.clientHeight || origin.height) / origin.height : 1;
+    return {
+      x: (r.left - origin.left) * scaleX,
+      y: (r.top - origin.top) * scaleY,
+      width: r.width * scaleX,
+      height: r.height * scaleY,
+    };
+  };
+
+  const rectInSvg = (svg, el) => {
+    const r = el.getBoundingClientRect();
+    const matrix = svg.getScreenCTM?.();
+    const view = svg.ownerDocument?.defaultView;
+    const Point = view?.DOMPoint;
+    if (!matrix || !Point) return fallbackRect(svg, el);
+
+    try {
+      const inverse = matrix.inverse();
+      const corners = [
+        new Point(r.left, r.top),
+        new Point(r.right, r.top),
+        new Point(r.right, r.bottom),
+        new Point(r.left, r.bottom),
+      ].map((point) => point.matrixTransform(inverse));
+      const xs = corners.map((point) => point.x);
+      const ys = corners.map((point) => point.y);
+      const left = Math.min(...xs);
+      const right = Math.max(...xs);
+      const top = Math.min(...ys);
+      const bottom = Math.max(...ys);
+      return { x: left, y: top, width: right - left, height: bottom - top };
+    } catch {
+      return fallbackRect(svg, el);
+    }
+  };
 
   const draw = () => {
+    const connectors = collectHosts(host, '[data-bronto-connector]');
     for (const svg of connectors) {
       const from = byIdInHost(host, svg.dataset.from);
       const to = byIdInHost(host, svg.dataset.to);
       if (!from || !to) continue;
-      const o = svg.getBoundingClientRect();
-      const rel = (el) => {
-        const r = el.getBoundingClientRect();
-        return { x: r.left - o.left, y: r.top - o.top, width: r.width, height: r.height };
-      };
       const {
         d,
         to: end,
         angle,
       } = connectRects({
-        fromRect: rel(from),
-        toRect: rel(to),
+        fromRect: rectInSvg(svg, from),
+        toRect: rectInSvg(svg, to),
         shape: svg.dataset.shape || 'straight',
         fromSide: svg.dataset.fromSide || undefined,
         toSide: svg.dataset.toSide || undefined,
@@ -74,6 +146,13 @@ export function initConnectors({ root } = {}) {
   };
 
   return bindOnce(host, 'connectors', () => {
+    const connectors = collectHosts(host, '[data-bronto-connector]');
+    if (!connectors.length) return noop;
+    const states = connectors.map((svg) => ({
+      svg,
+      path: snapshotPart(svg, '.ui-connector__path'),
+      end: snapshotPart(svg, '.ui-connector__end'),
+    }));
     draw();
     const view = host.defaultView || host.ownerDocument?.defaultView || null;
     const RO = view?.ResizeObserver;
@@ -93,6 +172,10 @@ export function initConnectors({ root } = {}) {
       ro?.disconnect();
       view?.removeEventListener('resize', draw);
       view?.removeEventListener('scroll', draw, true);
+      for (const state of states) {
+        restorePart(state.svg, '.ui-connector__path', state.path);
+        restorePart(state.svg, '.ui-connector__end', state.end);
+      }
     };
   });
 }

package/behaviors/crosshair.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"crosshair.d.ts","sourceRoot":"","sources":["crosshair.js"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH;;;;;;;;;;;;;;GAcG;AACH,yCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAmD3C;;;;;OAtEa,MAAM;;;;OACN,MAAM;;;;QACN,MAAM;;;;QACN,MAAM"}
+{"version":3,"file":"crosshair.d.ts","sourceRoot":"","sources":["crosshair.js"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH;;;;;;;;;;;;;;GAcG;AACH,yCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAiG3C;;;;;OApHa,MAAM;;;;OACN,MAAM;;;;QACN,MAAM;;;;QACN,MAAM"}

package/behaviors/crosshair.js

@@ -33,8 +33,49 @@ export function initCrosshair({ root } = {}) {
   const cleanups = [];
   for (const plot of plots) {
     const overlay = plot.querySelector('.ui-crosshair');
-    if (!overlay) continue;
+    let overlayState = null;
+    const rememberOverlay = () => {
+      if (!overlay || overlayState) return;
+      overlayState = {
+        active: overlay.classList.contains('is-active'),
+        x: {
+          value: overlay.style.getPropertyValue('--crosshair-x'),
+          priority: overlay.style.getPropertyPriority('--crosshair-x'),
+        },
+        y: {
+          value: overlay.style.getPropertyValue('--crosshair-y'),
+          priority: overlay.style.getPropertyPriority('--crosshair-y'),
+        },
+        inline: {
+          had: overlay.hasAttribute('data-readout-inline'),
+          value: overlay.getAttribute('data-readout-inline'),
+        },
+        block: {
+          had: overlay.hasAttribute('data-readout-block'),
+          value: overlay.getAttribute('data-readout-block'),
+        },
+      };
+    };
+    const restoreData = (name, state) => {
+      if (state.had) overlay.setAttribute(name, state.value);
+      else overlay.removeAttribute(name);
+    };
+    const restoreOverlay = () => {
+      if (!overlay || !overlayState) return;
+      overlay.classList.toggle('is-active', overlayState.active);
+      if (overlayState.x.value)
+        overlay.style.setProperty('--crosshair-x', overlayState.x.value, overlayState.x.priority);
+      else overlay.style.removeProperty('--crosshair-x');
+      if (overlayState.y.value)
+        overlay.style.setProperty('--crosshair-y', overlayState.y.value, overlayState.y.priority);
+      else overlay.style.removeProperty('--crosshair-y');
+      restoreData('data-readout-inline', overlayState.inline);
+      restoreData('data-readout-block', overlayState.block);
+      overlayState = null;
+    };
     const onMove = (e) => {
+      if (!overlay) return;
+      rememberOverlay();
       const r = plot.getBoundingClientRect();
       if (!r.width || !r.height) return;
       const x = e.clientX - r.left;
@@ -48,6 +89,8 @@ export function initCrosshair({ root } = {}) {
       const rtl = getComputedStyle(plot).direction === 'rtl';
       overlay.style.setProperty('--crosshair-x', `${rtl ? r.right - e.clientX : x}px`);
       overlay.style.setProperty('--crosshair-y', `${y}px`);
+      overlay.dataset.readoutInline = x / r.width > 0.5 ? 'before' : 'after';
+      overlay.dataset.readoutBlock = y / r.height > 0.5 ? 'above' : 'below';
       overlay.classList.add('is-active');
       plot.dispatchEvent(
         new CustomEvent('bronto:crosshair:move', {
@@ -57,16 +100,19 @@ export function initCrosshair({ root } = {}) {
       );
     };
     const onLeave = () => {
+      if (!overlay) return;
       overlay.classList.remove('is-active');
       plot.dispatchEvent(new CustomEvent('bronto:crosshair:leave', { bubbles: true }));
     };
     cleanups.push(
       bindOnce(plot, 'crosshair', () => {
+        if (!overlay) return noop;
         plot.addEventListener('pointermove', onMove);
         plot.addEventListener('pointerleave', onLeave);
         return () => {
           plot.removeEventListener('pointermove', onMove);
           plot.removeEventListener('pointerleave', onLeave);
+          restoreOverlay();
         };
       }),
     );

package/behaviors/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["dialog.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AACH,sCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA0D3C"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["dialog.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AACH,sCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA+E3C"}

package/behaviors/dialog.js

@@ -23,25 +23,37 @@ export function initDialog({ root } = {}) {
   const host = resolveHost(root);
   if (!host) return noop;
   const managedDialogs = new WeakSet();
+  const focusRestorers = new Map();
   const canManageDialog = (dlg, origin) => host.contains(origin) || managedDialogs.has(dlg);
 
   const openFrom = (opener) => {
     const dlg = byIdInHost(host, opener.getAttribute('data-bronto-open'));
-    if (!dlg || typeof dlg.showModal !== 'function' || dlg.open) return;
+    if (!dlg || typeof dlg.showModal !== 'function' || dlg.open) return false;
+    const previous = focusRestorers.get(dlg);
+    if (previous) {
+      dlg.removeEventListener('close', previous);
+      focusRestorers.delete(dlg);
+    }
+    const restoreFocus = () => {
+      focusRestorers.delete(dlg);
+      if (opener.isConnected && typeof opener.focus === 'function') opener.focus();
+    };
+    try {
+      dlg.showModal();
+    } catch {
+      return false;
+    }
     managedDialogs.add(dlg);
-    dlg.addEventListener(
-      'close',
-      () => {
-        if (opener.isConnected && typeof opener.focus === 'function') opener.focus();
-      },
-      { once: true },
-    );
-    dlg.showModal();
+    focusRestorers.set(dlg, restoreFocus);
+    dlg.addEventListener('close', restoreFocus, { once: true });
+    return true;
   };
 
   const closeFrom = (closer) => {
     const dlg = closer.closest('dialog');
-    if (dlg && dlg.open && canManageDialog(dlg, closer)) dlg.close();
+    if (!dlg || !dlg.open || !canManageDialog(dlg, closer)) return false;
+    dlg.close();
+    return true;
   };
 
   const lightDismiss = (dlg) => {
@@ -52,26 +64,35 @@ export function initDialog({ root } = {}) {
       canManageDialog(dlg, dlg)
     ) {
       dlg.close();
+      return true;
     }
+    return false;
   };
 
   const onClick = (e) => {
-    const opener = e.target.closest('[data-bronto-open]');
+    const target = e.target;
+    const opener = target?.closest?.('[data-bronto-open]');
     if (opener && host.contains(opener)) {
-      openFrom(opener);
+      if (openFrom(opener)) e.preventDefault();
       return;
     }
-    const closer = e.target.closest('[data-bronto-close]');
+    const closer = target?.closest?.('[data-bronto-close]');
     if (closer) {
-      closeFrom(closer);
+      if (closeFrom(closer)) e.preventDefault();
       return;
     }
     // Light-dismiss: a click whose target is the <dialog> itself is the
     // backdrop (content sits in child elements).
-    lightDismiss(e.target);
+    if (lightDismiss(target)) e.preventDefault();
   };
   return bindOnce(host, 'dialog', () => {
     document.addEventListener('click', onClick);
-    return () => document.removeEventListener('click', onClick);
+    return () => {
+      document.removeEventListener('click', onClick);
+      for (const [dlg, restoreFocus] of focusRestorers) {
+        dlg.removeEventListener('close', restoreFocus);
+      }
+      focusRestorers.clear();
+    };
   });
 }

package/behaviors/disclosure.d.ts.map

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