@ponchia/ui 0.6.7 → 0.6.8

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/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.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;
   }

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"}

package/behaviors/modal.js

@@ -1,4 +1,56 @@
-import { hasDom, resolveHost, noop, bindOnce, collectHosts, focusInto } from './internal.js';
+import {
+  hasDom,
+  resolveHost,
+  noop,
+  bindOnce,
+  collectHosts,
+  focusInto,
+  closestSafe,
+} from './internal.js';
+
+function insideOpenPopover(target, modal) {
+  const classPanel = closestSafe(target, '.ui-popover.is-open');
+  if (classPanel && modal.contains(classPanel)) return true;
+
+  const nativePanel = closestSafe(target, '[popover]');
+  if (!nativePanel || !modal.contains(nativePanel)) return false;
+  try {
+    return nativePanel.matches(':popover-open');
+  } catch {
+    return false;
+  }
+}
+
+const activeModals = [];
+
+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 pushActiveModal = (modal) => {
+  const index = activeModals.indexOf(modal);
+  if (index !== -1) activeModals.splice(index, 1);
+  activeModals.push(modal);
+};
+
+const removeActiveModal = (modal) => {
+  const index = activeModals.indexOf(modal);
+  if (index !== -1) activeModals.splice(index, 1);
+};
 
 /**
  * @typedef {object} ModalCloseDetail
@@ -45,22 +97,6 @@ export function initModal({ root } = {}) {
     let opener = null;
     let inerted = [];
 
-    // A controlled modal must announce AS a modal dialog, not a generic group —
-    // parity with initPopover. Apply a dialog role + aria-modal (unless the
-    // author set a role), and dev-warn on a missing accessible name since we
-    // can't invent a good one. (component audit C13.)
-    if (!modal.hasAttribute('role')) modal.setAttribute('role', 'dialog');
-    if (!modal.hasAttribute('aria-modal')) modal.setAttribute('aria-modal', 'true');
-    const named =
-      modal.hasAttribute('aria-label') ||
-      modal.hasAttribute('aria-labelledby') ||
-      modal.hasAttribute('title');
-    if (!named && typeof console !== 'undefined') {
-      console.warn(
-        `[bronto] initModal(): a [data-bronto-modal] has no accessible name — add aria-label or aria-labelledby so it is announced as a named dialog.`,
-      );
-    }
-
     // Inert every sibling at each ancestor level up to <body>: the rest of the
     // page becomes non-focusable/non-interactive while the modal subtree stays
     // live. Skip already-inert nodes so release() can't un-inert something the
@@ -68,6 +104,7 @@ export function initModal({ root } = {}) {
     const trap = () => {
       if (opener) return; // already trapped
       opener = document.activeElement;
+      pushActiveModal(modal);
       let el = modal;
       while (el && el.parentElement && el !== document.body) {
         for (const sib of el.parentElement.children) {
@@ -83,6 +120,7 @@ export function initModal({ root } = {}) {
 
     const release = () => {
       if (!opener) return;
+      removeActiveModal(modal);
       for (const el of inerted) el.inert = false;
       inerted = [];
       const back = opener;
@@ -94,6 +132,8 @@ export function initModal({ root } = {}) {
 
     const onKey = (e) => {
       if (e.key === 'Escape' && opener) {
+        if (activeModals.at(-1) !== modal) return;
+        if (insideOpenPopover(e.target, modal)) return;
         modal.dispatchEvent(
           new CustomEvent('bronto:modal:close', {
             detail: { reason: 'escape' },
@@ -104,10 +144,27 @@ export function initModal({ root } = {}) {
       }
     };
 
-    const observer = typeof MutationObserver === 'function' ? new MutationObserver(sync) : null;
-
     cleanups.push(
       bindOnce(modal, 'modal', () => {
+        const attrs = snapshotAttrs(modal, ['role', 'aria-modal', 'tabindex']);
+
+        // A controlled modal must announce AS a modal dialog, not a generic group —
+        // parity with initPopover. Apply a dialog role + aria-modal (unless the
+        // author set a role), and dev-warn on a missing accessible name since we
+        // can't invent a good one. (component audit C13.)
+        if (!modal.hasAttribute('role')) modal.setAttribute('role', 'dialog');
+        if (!modal.hasAttribute('aria-modal')) modal.setAttribute('aria-modal', 'true');
+        const named =
+          modal.hasAttribute('aria-label') ||
+          modal.hasAttribute('aria-labelledby') ||
+          modal.hasAttribute('title');
+        if (!named && typeof console !== 'undefined') {
+          console.warn(
+            `[bronto] initModal(): a [data-bronto-modal] has no accessible name — add aria-label or aria-labelledby so it is announced as a named dialog.`,
+          );
+        }
+
+        const observer = typeof MutationObserver === 'function' ? new MutationObserver(sync) : null;
         observer?.observe(modal, { attributes: true, attributeFilter: ['class'] });
         document.addEventListener('keydown', onKey, true);
         if (modal.classList.contains('is-open')) trap(); // already open at init
@@ -115,6 +172,7 @@ export function initModal({ root } = {}) {
           observer?.disconnect();
           document.removeEventListener('keydown', onKey, true);
           release();
+          restoreAttrs(modal, attrs);
         };
       }),
     );

package/behaviors/popover.d.ts

@@ -2,9 +2,10 @@
  * 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
+ * overflow the viewport, with its inline edge clamped on-screen and tall
+ * panels constrained to scroll inside the viewport — 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

package/behaviors/popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["popover.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,uCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAwJ3C"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["popover.js"],"names":[],"mappings":"AAuCA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,uCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAkM3C"}

package/behaviors/popover.js

@@ -1,12 +1,50 @@
-import { hasDom, resolveHost, noop, bindOnce, byIdInHost, focusInto } from './internal.js';
+import {
+  hasDom,
+  resolveHost,
+  noop,
+  bindOnce,
+  byIdInHost,
+  focusInto,
+  collectHosts,
+  closestSafe,
+} from './internal.js';
+
+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 snapshotStyle = (el, names) => {
+  const styles = {};
+  for (const name of names) styles[name] = el.style[name];
+  return styles;
+};
+
+const restoreStyle = (el, styles) => {
+  for (const [name, value] of Object.entries(styles)) el.style[name] = value;
+};
 
 /**
  * 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
+ * overflow the viewport, with its inline edge clamped on-screen and tall
+ * panels constrained to scroll inside the viewport — 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
@@ -34,6 +72,27 @@ export function initPopover({ root } = {}) {
   const GAP = 8;
   let openPanel = null;
   let openTrigger = null;
+  const triggerStates = new Map();
+  const panelStates = new Map();
+
+  const rememberTrigger = (trigger) => {
+    if (!triggerStates.has(trigger)) {
+      triggerStates.set(
+        trigger,
+        snapshotAttrs(trigger, ['aria-haspopup', 'aria-controls', 'aria-expanded']),
+      );
+    }
+  };
+
+  const rememberPanel = (panel) => {
+    if (!panelStates.has(panel)) {
+      panelStates.set(panel, {
+        attrs: snapshotAttrs(panel, ['role', 'tabindex']),
+        open: panel.classList.contains('is-open'),
+        style: snapshotStyle(panel, ['maxBlockSize', 'top', 'left']),
+      });
+    }
+  };
 
   // 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) — see the
@@ -41,12 +100,20 @@ export function initPopover({ root } = {}) {
 
   const place = (trigger, panel) => {
     const r = trigger.getBoundingClientRect();
+    panel.style.maxBlockSize = 'none';
     const pw = panel.offsetWidth;
-    const ph = panel.offsetHeight;
+    const ph = Math.max(panel.offsetHeight, panel.scrollHeight);
     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;
+    const maxHeight = Math.max(0, vh - GAP * 2);
+    const below = Math.max(0, vh - r.bottom - GAP * 2);
+    const above = Math.max(0, r.top - GAP * 2);
+    const placeAbove = ph > below && above > below;
+    const available = placeAbove ? above : below;
+    const height = Math.min(ph, available || maxHeight);
+    panel.style.maxBlockSize = `${height}px`;
+    let top = placeAbove ? r.top - GAP - height : r.bottom + GAP;
+    if (vh) top = Math.max(GAP, Math.min(top, vh - height - GAP));
     let left = r.left;
     if (vw) left = Math.max(GAP, Math.min(left, vw - pw - GAP));
     panel.style.top = `${Math.max(GAP, top)}px`;
@@ -77,6 +144,8 @@ export function initPopover({ root } = {}) {
 
   const open = (trigger, panel) => {
     close();
+    rememberTrigger(trigger);
+    rememberPanel(panel);
     // 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).
@@ -99,7 +168,7 @@ export function initPopover({ root } = {}) {
   };
 
   const onClick = (e) => {
-    const trigger = e.target.closest?.('[data-bronto-popover]');
+    const trigger = closestSafe(e.target, '[data-bronto-popover]');
     if (trigger && host.contains(trigger)) {
       const panel = byIdInHost(host, trigger.getAttribute('data-bronto-popover'));
       if (!panel) return;
@@ -133,9 +202,11 @@ export function initPopover({ root } = {}) {
   // never routes through close(), so aria-expanded would otherwise go stale).
   const seedTeardowns = [];
   const seed = () => {
-    for (const trigger of host.querySelectorAll('[data-bronto-popover]')) {
+    for (const trigger of collectHosts(host, '[data-bronto-popover]')) {
       const panel = byIdInHost(host, trigger.getAttribute('data-bronto-popover'));
       if (!panel) continue;
+      rememberTrigger(trigger);
+      rememberPanel(panel);
       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');
@@ -169,7 +240,16 @@ export function initPopover({ root } = {}) {
     view?.addEventListener('scroll', onReflow, true);
     view?.addEventListener('resize', onReflow);
     return () => {
+      close();
       for (const t of seedTeardowns.splice(0)) t();
+      for (const [trigger, attrs] of triggerStates) restoreAttrs(trigger, attrs);
+      triggerStates.clear();
+      for (const [panel, state] of panelStates) {
+        restoreAttrs(panel, state.attrs);
+        panel.classList.toggle('is-open', state.open);
+        restoreStyle(panel, state.style);
+      }
+      panelStates.clear();
       document.removeEventListener('click', onClick);
       document.removeEventListener('keydown', onKey);
       view?.removeEventListener('scroll', onReflow, true);

package/behaviors/sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sources.d.ts","sourceRoot":"","sources":["sources.js"],"names":[],"mappings":"AA2CA;;;;;;;;;;;GAWG;AACH,uCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAwG3C;;;;;QAjJa,MAAM;;;;cACN,OAAO;;;;YACP,OAAO"}
+{"version":3,"file":"sources.d.ts","sourceRoot":"","sources":["sources.js"],"names":[],"mappings":"AA4CA;;;;;;;;;;;GAWG;AACH,uCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAmH3C;;;;;QA5Ja,MAAM;;;;cACN,OAAO;;;;YACP,OAAO"}