@ponchia/ui 0.6.10 → 0.6.12

package/behaviors/glyph.js

@@ -30,11 +30,62 @@ function rememberCleanup(el, cleanups, cleanup) {
   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.
+const CSS_LENGTH_UNITS =
+  '(?:px|r?em|ch|ex|cap|ic|lh|rlh|vw|vh|vi|vb|vmin|vmax|' +
+  'svw|svh|svi|svb|svmin|svmax|lvw|lvh|lvi|lvb|lvmin|lvmax|' +
+  'dvw|dvh|dvi|dvb|dvmin|dvmax|cm|mm|q|in|pc|pt|%)';
+const CSS_NUMBER = '[-+]?(?:\\d*\\.\\d+|\\d+)';
+const CSS_LENGTH_RE = new RegExp(`^(?:0|${CSS_NUMBER}${CSS_LENGTH_UNITS})$`, 'i');
+const CSS_CALC_VALUE_RE = new RegExp(`^${CSS_NUMBER}(?:${CSS_LENGTH_UNITS})?`, 'i');
+
+function isCalcLength(expr) {
+  let rest = expr.trim();
+  let depth = 0;
+  let sawLength = false;
+  let expectValue = true;
+
+  while (rest) {
+    if (expectValue) {
+      if (rest[0] === '(') {
+        depth += 1;
+        rest = rest.slice(1).trim();
+        continue;
+      }
+      const token = rest.match(CSS_CALC_VALUE_RE)?.[0];
+      if (!token) return false;
+      if (CSS_LENGTH_RE.test(token)) sawLength = true;
+      rest = rest.slice(token.length).trim();
+      expectValue = false;
+      continue;
+    }
+
+    if (rest[0] === ')') {
+      depth -= 1;
+      if (depth < 0) return false;
+      rest = rest.slice(1).trim();
+      continue;
+    }
+
+    const op = rest.match(/^[+\-*/]/)?.[0];
+    if (!op) return false;
+    rest = rest.slice(op.length).trim();
+    expectValue = true;
+  }
+
+  if (!sawLength) return false;
+  if (expectValue) return false;
+  return depth === 0;
+}
+
+// `size` lands in inline CSS, so accept only concrete CSS lengths or calc()
+// expressions (mirrors glyphs.js cssLen). Used for the mask path's --icon-size.
 function cssLen(v) {
-  return v && /^[\w.%+\-*/()\s,]+$/.test(v) ? v : '';
+  const value = String(v ?? '').trim();
+  if (CSS_LENGTH_RE.test(value)) return value;
+  if (value.toLowerCase().startsWith('calc(') && value.endsWith(')')) {
+    return isCalcLength(value.slice(5, -1)) ? value : '';
+  }
+  return '';
 }
 
 function applyGlyphA11y(el, label) {
@@ -214,7 +265,7 @@ export function initDotGlyph({ root } = {}) {
     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.getAttribute('data-bronto-glyph-render')?.trim() === 'mask') {
       expandMaskGlyph(el, name, label, cleanups);
       continue;
     }

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,yDAOC;AAMD,8DAIC;AAID;;SAMC;AAUD,gDAQC;AAMD,+DAKC;AAlIM,6BAAqB;AAErB,kCAAoD;AAyCpD,uCAAqC;;;;;sBArD/B,MAAM,IAAI"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["internal.js"],"names":[],"mappings":"AAiDA,iEAIC;AAeD,sEAaC;AAED,oDAUC;AAED,yDAOC;AAMD,8DAIC;AAID;;SAMC;AAkDD,gDAUC;AAMD,+DAKC;AAjLM,6BAAqB;AAErB,kCAAoD;AAyCpD,uCAAqC;;;;;sBArD/B,MAAM,IAAI"}

package/behaviors/internal.js

@@ -70,7 +70,10 @@ export function bindOnce(target, key, add) {
   const reg = target[BOUND] || (target[BOUND] = Object.create(null));
   if (reg[key]) reg[key]();
   const remove = add();
+  let done = false;
   const cleanup = () => {
+    if (done) return;
+    done = true;
     remove();
     if (reg[key] === cleanup) delete reg[key];
   };
@@ -80,11 +83,13 @@ export function bindOnce(target, key, add) {
 
 export function byIdInHost(host, id) {
   if (!id) return null;
-  if (host === document) return document.getElementById(id);
+  const doc = host.nodeType === 9 ? host : host.ownerDocument;
+  if (host === doc) return doc.getElementById(id);
   if (host.id === id) return host;
   return (
     Array.from(host.querySelectorAll?.('[id]') || []).find((el) => el.id === id) ||
-    document.getElementById(id)
+    doc?.getElementById(id) ||
+    null
   );
 }
 
@@ -122,11 +127,53 @@ export function scrollIntoViewSafe(el, opts = { block: 'nearest' }) {
 // 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.
-const FOCUSABLE =
-  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+const FOCUSABLE = 'a[href], button, input, select, textarea, [tabindex]';
+
+function isInsideDisabledFieldset(el) {
+  return Boolean(el.closest?.('fieldset[disabled]'));
+}
+
+function isRendered(el) {
+  try {
+    if (
+      typeof el.checkVisibility === 'function' &&
+      !el.checkVisibility({ checkVisibilityCSS: true, visibilityProperty: true })
+    ) {
+      return false;
+    }
+  } catch {
+    /* fall through to conservative checks */
+  }
+
+  const view = el.ownerDocument?.defaultView;
+  const style = view?.getComputedStyle?.(el);
+  if (style?.display === 'none') return false;
+  if (style?.visibility === 'hidden' || style?.visibility === 'collapse') return false;
+
+  const docHasLayout = Boolean(el.ownerDocument?.documentElement?.getClientRects?.().length);
+  if (
+    docHasLayout &&
+    'offsetParent' in el &&
+    el.offsetParent === null &&
+    el.getClientRects?.().length === 0
+  ) {
+    return false;
+  }
+  return true;
+}
+
+function isFocusableCandidate(el) {
+  if (el.closest?.('[hidden], [inert]')) return false;
+  if ('disabled' in el && el.disabled) return false;
+  if (isInsideDisabledFieldset(el)) return false;
+  if (el.tabIndex < 0) return false;
+  return isRendered(el);
+}
 
 export function focusInto(container) {
-  const first = container.querySelector(FOCUSABLE);
+  const first = Array.from(container.querySelectorAll?.(FOCUSABLE) || []).find(
+    isFocusableCandidate,
+  );
   if (first) {
     first.focus?.();
     return;

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,CAwC3C"}
+{"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,CAyC3C"}

package/behaviors/menu.js

@@ -18,7 +18,8 @@ export function initMenu({ root } = {}) {
   if (!hasDom()) return noop;
   const host = resolveHost(root);
   if (!host) return noop;
-  const doc = host.nodeType === 9 ? host : host.ownerDocument || document;
+  const doc = host.nodeType === 9 ? host : host.ownerDocument;
+  if (!doc) return noop;
   const openMenus = () => collectHosts(host, '[data-bronto-menu][open]');
   const shut = (menu) => {
     if (!menu || !menu.open) return;

package/behaviors/modal.d.ts

@@ -12,21 +12,21 @@
  *
  * Mark the overlay `[data-bronto-modal]` (opt-in). On bind it gives the modal a
  * `role="dialog"` + `aria-modal="true"` (unless the author set a role) and
- * dev-warns when it has no accessible name, so it announces as a named modal
- * dialog — parity with `initPopover`. The behavior watches its
- * `class` for `is-open`: on open it remembers the focused element, moves focus
- * into the modal (first focusable, else the panel itself), and **traps focus by
- * marking every sibling at each ancestor level `inert`** so the rest of the page
- * is non-focusable and non-interactive — the modern, robust trap. On close it
- * un-inerts exactly what it inerted and returns focus to the opener. Bronto owns
- * focus only: the **consumer still owns open/close state** (the `is-open`
- * class). Escape dispatches a cancelable `bronto:modal:close`
+ * dev-warns when it has no accessible name. While open, a document-level stack
+ * reconciler keeps only the top controlled modal interactive, marks the rest of
+ * the page `inert`, admits an open popover owned by the top modal even when the
+ * panel is portaled elsewhere, and applies the trap to background nodes added
+ * after open. Nested and sibling portal modals therefore share one ownership
+ * model instead of independently inverting each other's `inert` state.
+ *
+ * Bronto owns focus only: the **consumer still owns open/close state** (the
+ * `is-open` class). Escape dispatches a cancelable `bronto:modal:close`
  * ({@link ModalCloseDetail}) on the modal so the consumer can drop `is-open` in
- * response; the behavior never changes visibility itself.
+ * response; the behavior never changes visibility itself. Closing a parent
+ * modal temporarily suspends any still-`is-open` controlled descendants; they
+ * resume at the top of the stack if the parent reopens.
  *
- * Best suited to a body-/portal-level overlay (the documented `.is-open` use
- * case); a deeply-nested modal still gets focus-into, focus-return, and the
- * Escape signal. SSR-safe, idempotent per modal; returns a cleanup function.
+ * SSR-safe, idempotent per modal; returns a cleanup function.
  *
  * @param {import('./internal.js').DelegateOpts} [opts]
  * @returns {import('./internal.js').Cleanup}

package/behaviors/modal.d.ts.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["modal.js"],"names":[],"mappings":"AAmQA;;;GAGG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA6E3C;;;;;YA3Ga,QAAQ"}

package/behaviors/modal.js

@@ -3,25 +3,13 @@ import {
   resolveHost,
   noop,
   bindOnce,
+  byIdInHost,
   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 states = new WeakMap();
 
 const snapshotAttrs = (el, names) => {
   const attrs = {};
@@ -41,16 +29,233 @@ const restoreAttrs = (el, attrs) => {
   }
 };
 
-const pushActiveModal = (modal) => {
-  const index = activeModals.indexOf(modal);
-  if (index !== -1) activeModals.splice(index, 1);
-  activeModals.push(modal);
-};
+function modalState(doc) {
+  let state = states.get(doc);
+  if (state) return state;
+  state = {
+    doc,
+    records: new Set(),
+    byModal: new Map(),
+    ownedInert: new Set(),
+    pendingOverlays: new Set(),
+    observer: null,
+    observing: false,
+    sequence: 0,
+    scheduled: false,
+    top: null,
+  };
+  states.set(doc, state);
+  return state;
+}
 
-const removeActiveModal = (modal) => {
-  const index = activeModals.indexOf(modal);
-  if (index !== -1) activeModals.splice(index, 1);
-};
+function isEffectivelyActive(record, state) {
+  if (!record.active || !record.modal.isConnected) return false;
+  for (let node = record.modal.parentElement; node; node = node.parentElement) {
+    const ancestor = state.byModal.get(node);
+    if (ancestor && (!ancestor.active || !ancestor.modal.isConnected)) return false;
+  }
+  return true;
+}
+
+function activeTop(state) {
+  let top = null;
+  for (const record of state.records) {
+    if (!isEffectivelyActive(record, state)) continue;
+    if (!top || top.modal.contains(record.modal)) {
+      top = record;
+      continue;
+    }
+    if (!record.modal.contains(top.modal) && record.openedAt > top.openedAt) top = record;
+  }
+  return top;
+}
+
+function popoverIsOpen(panel, state) {
+  if (state.pendingOverlays.has(panel) || panel.classList.contains('is-open')) return true;
+  try {
+    return panel.matches(':popover-open');
+  } catch {
+    return false;
+  }
+}
+
+function modalOwnsPopover(modal, panel) {
+  if (modal.contains(panel)) return true;
+  if (!panel.id) return false;
+  return collectHosts(modal, '[data-bronto-popover]').some(
+    (trigger) => trigger.getAttribute('data-bronto-popover') === panel.id,
+  );
+}
+
+function liveRoots(state, top) {
+  const roots = new Set([top.modal]);
+  for (const trigger of collectHosts(top.modal, '[data-bronto-popover]')) {
+    const panel = byIdInHost(top.modal, trigger.getAttribute('data-bronto-popover'));
+    if (panel && popoverIsOpen(panel, state)) roots.add(panel);
+  }
+  for (const panel of state.pendingOverlays) {
+    if (modalOwnsPopover(top.modal, panel)) roots.add(panel);
+  }
+  return roots;
+}
+
+function desiredInert(state, top) {
+  const body = state.doc.body;
+  if (!body || !top) return new Set();
+  const roots = liveRoots(state, top);
+  const livePath = new Set([body]);
+  for (const root of roots) {
+    for (let node = root; node && node !== body; node = node.parentElement) {
+      livePath.add(node);
+    }
+  }
+
+  const desired = new Set();
+  for (const parent of livePath) {
+    if (roots.has(parent)) continue;
+    for (const child of parent.children || []) {
+      if (!livePath.has(child)) desired.add(child);
+    }
+  }
+  return desired;
+}
+
+function reconcileInert(state) {
+  const previousTop = state.top;
+  const nextTop = activeTop(state);
+  const desired = desiredInert(state, nextTop);
+
+  for (const element of [...state.ownedInert]) {
+    if (desired.has(element)) {
+      if (!element.inert) element.inert = true;
+      continue;
+    }
+    element.inert = false;
+    state.ownedInert.delete(element);
+  }
+  for (const element of desired) {
+    if (state.ownedInert.has(element) || element.inert) continue;
+    element.inert = true;
+    state.ownedInert.add(element);
+  }
+  state.top = nextTop;
+  return { previousTop, nextTop };
+}
+
+function scheduleReconcile(state) {
+  if (state.scheduled) return;
+  state.scheduled = true;
+  queueMicrotask(() => {
+    state.scheduled = false;
+    reconcileInert(state);
+  });
+}
+
+function ensureDocumentObserver(state) {
+  if (state.observing) return;
+  state.observing = true;
+  const view = state.doc.defaultView;
+  const Observer = view?.MutationObserver;
+  if (Observer && state.doc.body) {
+    state.observer = new Observer((mutations) => {
+      const relevant = mutations.some(
+        (mutation) =>
+          mutation.type === 'childList' || mutation.target.matches?.('.ui-popover, [popover]'),
+      );
+      if (relevant && state.top) scheduleReconcile(state);
+    });
+    state.observer.observe(state.doc.body, {
+      attributes: true,
+      attributeFilter: ['class'],
+      childList: true,
+      subtree: true,
+    });
+  }
+
+  state.onBeforeToggle = (event) => {
+    const panel = event.target;
+    if (!panel?.matches?.('[popover]')) return;
+    if (event.newState === 'open') state.pendingOverlays.add(panel);
+    else state.pendingOverlays.delete(panel);
+    reconcileInert(state);
+  };
+  state.onToggle = (event) => {
+    state.pendingOverlays.delete(event.target);
+    scheduleReconcile(state);
+  };
+  state.doc.addEventListener('beforetoggle', state.onBeforeToggle, true);
+  state.doc.addEventListener('toggle', state.onToggle, true);
+}
+
+function releaseDocumentState(state) {
+  if (state.records.size) return;
+  state.observer?.disconnect();
+  state.observer = null;
+  state.observing = false;
+  state.doc.removeEventListener('beforetoggle', state.onBeforeToggle, true);
+  state.doc.removeEventListener('toggle', state.onToggle, true);
+  state.pendingOverlays.clear();
+  reconcileInert(state);
+  states.delete(state.doc);
+}
+
+function restoreAfterClose(record, nextTop) {
+  const back = record.opener;
+  record.opener = null;
+  if (nextTop) {
+    if (back?.isConnected && nextTop.modal.contains(back)) back.focus?.();
+    else focusInto(nextTop.modal);
+    return;
+  }
+  if (back?.isConnected && typeof back.focus === 'function') back.focus();
+}
+
+function syncRecord(record) {
+  const { modal, state } = record;
+  const nextActive = modal.classList.contains('is-open');
+  if (nextActive === record.active) {
+    if (!record.isNativeDialog) modal.hidden = !nextActive;
+    scheduleReconcile(state);
+    return;
+  }
+
+  const oldTop = state.top ?? activeTop(state);
+  record.active = nextActive;
+  if (nextActive) {
+    record.opener = state.doc.activeElement;
+    record.openedAt = ++state.sequence;
+    if (!record.isNativeDialog) modal.hidden = false;
+    const { nextTop } = reconcileInert(state);
+    if (nextTop && (nextTop === record || modal.contains(nextTop.modal))) {
+      focusInto(nextTop.modal);
+    }
+    return;
+  }
+
+  if (!record.isNativeDialog) modal.hidden = true;
+  const closedOwnedTop = oldTop && (oldTop === record || modal.contains(oldTop.modal));
+  const { nextTop } = reconcileInert(state);
+  if (closedOwnedTop) restoreAfterClose(record, nextTop);
+  else record.opener = null;
+}
+
+function unregisterRecord(record) {
+  const { state, modal } = record;
+  const oldTop = state.top ?? activeTop(state);
+  const removedOwnedTop = oldTop && (oldTop === record || modal.contains(oldTop.modal));
+  record.active = false;
+  state.records.delete(record);
+  state.byModal.delete(modal);
+  const { nextTop } = reconcileInert(state);
+  if (removedOwnedTop) restoreAfterClose(record, nextTop);
+  else record.opener = null;
+  releaseDocumentState(state);
+}
+
+function targetIsOwnedPopover(target, modal, state) {
+  const panel = closestSafe(target, '.ui-popover, [popover]');
+  return Boolean(panel && popoverIsOpen(panel, state) && modalOwnsPopover(modal, panel));
+}
 
 /**
  * @typedef {object} ModalCloseDetail
@@ -67,21 +272,21 @@ const removeActiveModal = (modal) => {
  *
  * Mark the overlay `[data-bronto-modal]` (opt-in). On bind it gives the modal a
  * `role="dialog"` + `aria-modal="true"` (unless the author set a role) and
- * dev-warns when it has no accessible name, so it announces as a named modal
- * dialog — parity with `initPopover`. The behavior watches its
- * `class` for `is-open`: on open it remembers the focused element, moves focus
- * into the modal (first focusable, else the panel itself), and **traps focus by
- * marking every sibling at each ancestor level `inert`** so the rest of the page
- * is non-focusable and non-interactive — the modern, robust trap. On close it
- * un-inerts exactly what it inerted and returns focus to the opener. Bronto owns
- * focus only: the **consumer still owns open/close state** (the `is-open`
- * class). Escape dispatches a cancelable `bronto:modal:close`
+ * dev-warns when it has no accessible name. While open, a document-level stack
+ * reconciler keeps only the top controlled modal interactive, marks the rest of
+ * the page `inert`, admits an open popover owned by the top modal even when the
+ * panel is portaled elsewhere, and applies the trap to background nodes added
+ * after open. Nested and sibling portal modals therefore share one ownership
+ * model instead of independently inverting each other's `inert` state.
+ *
+ * Bronto owns focus only: the **consumer still owns open/close state** (the
+ * `is-open` class). Escape dispatches a cancelable `bronto:modal:close`
  * ({@link ModalCloseDetail}) on the modal so the consumer can drop `is-open` in
- * response; the behavior never changes visibility itself.
+ * response; the behavior never changes visibility itself. Closing a parent
+ * modal temporarily suspends any still-`is-open` controlled descendants; they
+ * resume at the top of the stack if the parent reopens.
  *
- * Best suited to a body-/portal-level overlay (the documented `.is-open` use
- * case); a deeply-nested modal still gets focus-into, focus-return, and the
- * Escape signal. SSR-safe, idempotent per modal; returns a cleanup function.
+ * SSR-safe, idempotent per modal; returns a cleanup function.
  *
  * @param {import('./internal.js').DelegateOpts} [opts]
  * @returns {import('./internal.js').Cleanup}
@@ -94,64 +299,22 @@ export function initModal({ root } = {}) {
   const cleanups = [];
 
   for (const modal of modals) {
-    let opener = null;
-    let inerted = [];
-
-    // 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
-    // app inerted for its own reasons.
-    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) {
-          if (sib !== el && !sib.inert) {
-            sib.inert = true;
-            inerted.push(sib);
-          }
-        }
-        el = el.parentElement;
-      }
-      focusInto(modal);
-    };
-
-    const release = () => {
-      if (!opener) return;
-      removeActiveModal(modal);
-      for (const el of inerted) el.inert = false;
-      inerted = [];
-      const back = opener;
-      opener = null;
-      if (back?.isConnected && typeof back.focus === 'function') back.focus();
-    };
-
-    const sync = () => (modal.classList.contains('is-open') ? trap() : release());
-
-    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' },
-            bubbles: true,
-            cancelable: true,
-          }),
-        );
-      }
-    };
-
+    const doc = modal.ownerDocument;
+    if (!doc) continue;
+    const view = doc.defaultView;
     cleanups.push(
       bindOnce(modal, 'modal', () => {
-        const attrs = snapshotAttrs(modal, ['role', 'aria-modal', 'tabindex']);
+        const attrs = snapshotAttrs(modal, ['role', 'aria-modal', 'tabindex', 'hidden']);
+        const state = modalState(doc);
+        const record = {
+          active: modal.classList.contains('is-open'),
+          isNativeDialog: modal.localName === 'dialog',
+          modal,
+          openedAt: 0,
+          opener: null,
+          state,
+        };
 
-        // 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.
         if (!modal.hasAttribute('role')) modal.setAttribute('role', 'dialog');
         if (!modal.hasAttribute('aria-modal')) modal.setAttribute('aria-modal', 'true');
         const named =
@@ -164,14 +327,38 @@ export function initModal({ root } = {}) {
           );
         }
 
-        const observer = typeof MutationObserver === 'function' ? new MutationObserver(sync) : null;
+        if (record.active) {
+          record.opener = doc.activeElement;
+          record.openedAt = ++state.sequence;
+        }
+        if (!record.isNativeDialog) modal.hidden = !record.active;
+        state.records.add(record);
+        state.byModal.set(modal, record);
+        ensureDocumentObserver(state);
+        reconcileInert(state);
+        if (state.top === record) focusInto(modal);
+
+        const Observer = view?.MutationObserver;
+        const observer = Observer ? new Observer(() => syncRecord(record)) : null;
         observer?.observe(modal, { attributes: true, attributeFilter: ['class'] });
-        document.addEventListener('keydown', onKey, true);
-        if (modal.classList.contains('is-open')) trap(); // already open at init
+        const onKey = (event) => {
+          if (event.key !== 'Escape' || state.top !== record) return;
+          if (targetIsOwnedPopover(event.target, modal, state)) return;
+          const ModalCloseEvent = view?.CustomEvent ?? CustomEvent;
+          modal.dispatchEvent(
+            new ModalCloseEvent('bronto:modal:close', {
+              detail: { reason: 'escape' },
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        };
+        doc.addEventListener('keydown', onKey, true);
+
         return () => {
           observer?.disconnect();
-          document.removeEventListener('keydown', onKey, true);
-          release();
+          doc.removeEventListener('keydown', onKey, true);
+          unregisterRecord(record);
           restoreAttrs(modal, attrs);
         };
       }),

package/behaviors/popover.d.ts.map

@@ -1 +1 @@
-{"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"}
+{"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,CAoP3C"}