@ponchia/ui 0.6.11 → 0.7.0

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,25 @@ 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.
+ *
+ * SSR-safe, idempotent per modal; returns a cleanup function.
  *
- * 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.
+ * @deprecated Use a native `<dialog>` with `initDialog()`. This controlled
+ * non-dialog path remains compatible in 0.7 and is scheduled for removal no
+ * earlier than 0.8 because no real consumer adopted it.
  *
  * @param {import('./internal.js').DelegateOpts} [opts]
  * @returns {import('./internal.js').Cleanup}
@@ -97,74 +306,19 @@ export function initModal({ root } = {}) {
     const doc = modal.ownerDocument;
     if (!doc) continue;
     const view = doc.defaultView;
-    const isNativeDialog = modal.localName === 'dialog';
-    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 = doc.activeElement;
-      pushActiveModal(modal);
-      let el = modal;
-      while (el && el.parentElement && el !== doc.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 = () => {
-      if (modal.classList.contains('is-open')) {
-        if (!isNativeDialog) modal.hidden = false;
-        trap();
-        return;
-      }
-      release();
-      if (!isNativeDialog) modal.hidden = true;
-    };
-
-    const onKey = (e) => {
-      if (e.key === 'Escape' && opener) {
-        if (activeModals.at(-1) !== modal) return;
-        if (insideOpenPopover(e.target, modal)) return;
-        const ModalCloseEvent = view?.CustomEvent ?? CustomEvent;
-        modal.dispatchEvent(
-          new ModalCloseEvent('bronto:modal:close', {
-            detail: { reason: 'escape' },
-            bubbles: true,
-            cancelable: true,
-          }),
-        );
-      }
-    };
-
     cleanups.push(
       bindOnce(modal, 'modal', () => {
         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 =
@@ -177,17 +331,38 @@ export function initModal({ root } = {}) {
           );
         }
 
-        const Observer =
-          view?.MutationObserver ??
-          (typeof MutationObserver === 'function' ? MutationObserver : null);
-        const observer = Observer ? new Observer(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'] });
+        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);
-        sync();
+
         return () => {
           observer?.disconnect();
           doc.removeEventListener('keydown', onKey, true);
-          release();
+          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,CAoM3C"}
+{"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"}

package/behaviors/popover.js

@@ -74,9 +74,53 @@ export function initPopover({ root } = {}) {
   const GAP = 8;
   let openPanel = null;
   let openTrigger = null;
+  let pendingFocusObserver = null;
   const triggerStates = new Map();
   const panelStates = new Map();
 
+  const cancelPendingFocus = () => {
+    pendingFocusObserver?.disconnect();
+    pendingFocusObserver = null;
+  };
+
+  const focusWhenInteractive = (panel) => {
+    cancelPendingFocus();
+    if (!panel.inert) {
+      focusInto(panel);
+      return;
+    }
+
+    // A panel portaled out of a controlled modal starts in the trapped
+    // background. Wait for initModal to admit that specific panel instead of
+    // guessing how many microtasks its MutationObserver reconciliation needs.
+    const Observer = view?.MutationObserver;
+    if (!Observer) {
+      queueMicrotask(() => {
+        if (openPanel === panel && !panel.inert) focusInto(panel);
+      });
+      return;
+    }
+    const focusIfReady = () => {
+      if (openPanel !== panel) {
+        cancelPendingFocus();
+        return;
+      }
+      if (panel.inert) return;
+      cancelPendingFocus();
+      focusInto(panel);
+    };
+    pendingFocusObserver = new Observer(focusIfReady);
+    pendingFocusObserver.observe(panel, { attributes: true, attributeFilter: ['inert'] });
+    // Some DOM implementations model `inert` as a property without reflecting
+    // its attribute, so no observer record is delivered. Cover that test-DOM
+    // path across the modal reconciler's queued microtask; real browsers still
+    // use the attribute observer as the source of truth.
+    queueMicrotask(() => {
+      focusIfReady();
+      if (openPanel === panel && panel.inert) queueMicrotask(focusIfReady);
+    });
+  };
+
   const rememberTrigger = (trigger) => {
     if (!triggerStates.has(trigger)) {
       triggerStates.set(
@@ -123,6 +167,7 @@ export function initPopover({ root } = {}) {
   };
 
   const close = () => {
+    cancelPendingFocus();
     if (!openPanel) return;
     const panel = openPanel;
     const trigger = openTrigger;
@@ -166,7 +211,7 @@ export function initPopover({ root } = {}) {
     openPanel = panel;
     openTrigger = trigger;
     place(trigger, panel);
-    focusInto(panel);
+    focusWhenInteractive(panel);
   };
 
   const onClick = (e) => {
@@ -227,7 +272,10 @@ export function initPopover({ root } = {}) {
         const onToggle = (e) => {
           const isOpen = e.newState === 'open';
           trigger.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
-          if (!isOpen && openPanel === panel) openPanel = openTrigger = null;
+          if (!isOpen && openPanel === panel) {
+            cancelPendingFocus();
+            openPanel = openTrigger = null;
+          }
         };
         panel.addEventListener('toggle', onToggle);
         seedTeardowns.push(() => panel.removeEventListener('toggle', onToggle));

package/behaviors/splitter.d.ts

@@ -4,6 +4,8 @@
  * (`role="separator"`). The behavior keeps `--splitter-pos` and
  * `aria-valuenow` in sync for keyboard and pointer resizing, then dispatches
  * `bronto:splitter:resize` with `{ value, orientation }`.
+ * Buttons inside the splitter may set `data-bronto-splitter-adjust="-10"` or
+ * `"10"` to provide the required single-pointer, non-drag resize path.
  *
  * Bronto owns the control affordance only. The host owns pane content,
  * persistence, min/max policy, collapse behavior, and any saved layout state.

package/behaviors/splitter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"splitter.d.ts","sourceRoot":"","sources":["splitter.js"],"names":[],"mappings":"AA6OA;;;;;;;;;;;;;GAaG;AACH,wCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAU3C;;;;;WAvPa,MAAM;;;;iBACN,UAAU,GAAG,YAAY"}
+{"version":3,"file":"splitter.d.ts","sourceRoot":"","sources":["splitter.js"],"names":[],"mappings":"AAyPA;;;;;;;;;;;;;;;GAeG;AACH,wCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAU3C;;;;;WApQa,MAAM;;;;iBACN,UAAU,GAAG,YAAY"}

package/behaviors/splitter.js

@@ -1,7 +1,8 @@
-import { hasDom, resolveHost, noop, bindOnce, collectHosts } from './internal.js';
+import { hasDom, resolveHost, noop, bindOnce, collectHosts, closestSafe } from './internal.js';
 
 const SELECTOR = '[data-bronto-splitter]';
 const HANDLE_SELECTOR = '.ui-splitter__handle';
+const ADJUST_SELECTOR = '[data-bronto-splitter-adjust]';
 const DEFAULT_MIN = 20;
 const DEFAULT_MAX = 80;
 const DEFAULT_VALUE = 50;
@@ -218,11 +219,22 @@ function wireSplitter(splitter) {
       splitter.ownerDocument.addEventListener('pointercancel', onPointerUp);
     };
 
+    const onClick = (event) => {
+      const control = closestSafe(event.target, ADJUST_SELECTOR);
+      if (!control || control.closest(SELECTOR) !== splitter) return;
+      const delta = num(control.getAttribute('data-bronto-splitter-adjust'), Number.NaN);
+      if (!Number.isFinite(delta) || delta === 0) return;
+      event.preventDefault();
+      apply(value + delta);
+    };
+
     handle.addEventListener('keydown', onKeydown);
     handle.addEventListener('pointerdown', onPointerDown);
+    splitter.addEventListener('click', onClick);
     return () => {
       handle.removeEventListener('keydown', onKeydown);
       handle.removeEventListener('pointerdown', onPointerDown);
+      splitter.removeEventListener('click', onClick);
       splitter.ownerDocument.removeEventListener('pointermove', onPointerMove);
       splitter.ownerDocument.removeEventListener('pointerup', onPointerUp);
       splitter.ownerDocument.removeEventListener('pointercancel', onPointerUp);
@@ -241,6 +253,8 @@ function wireSplitter(splitter) {
  * (`role="separator"`). The behavior keeps `--splitter-pos` and
  * `aria-valuenow` in sync for keyboard and pointer resizing, then dispatches
  * `bronto:splitter:resize` with `{ value, orientation }`.
+ * Buttons inside the splitter may set `data-bronto-splitter-adjust="-10"` or
+ * `"10"` to provide the required single-pointer, non-drag resize path.
  *
  * Bronto owns the control affordance only. The host owns pane content,
  * persistence, min/max policy, collapse behavior, and any saved layout state.

package/behaviors/theme.d.ts

@@ -22,8 +22,9 @@ export function applyStoredTheme({ storageKey, root }?: ApplyThemeOpts): void;
  * persists to localStorage, and **always** sets `data-theme` on <html>
  * (a theme is document-global). State is reflected via `aria-pressed`
  * and a `bronto:themechange` CustomEvent ({ detail: { theme } }) is
- * dispatched on <html> so consumers can sync their own UI without
- * racing the click handler. A control may set
+ * dispatched on <html> for both explicit changes and OS preference changes,
+ * so consumers can sync their own UI without racing the click/media handler.
+ * A control may set
  * `data-bronto-theme-toggle="dark"` to force a specific theme.
  *
  * `root` scopes event delegation and which controls are queried/reflected

package/behaviors/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["theme.js"],"names":[],"mappings":"AAuBA;;;;;;;;;GASG;AAEH;;;;;;;GAOG;AACH,wDAHW,cAAc,GACZ,IAAI,CAahB;AAED;;;;;;;;;;;;;;GAcG;AACH,uDAHW,gBAAgB,GAAG,OAAO,eAAe,EAAE,YAAY,GACrD,OAAO,eAAe,EAAE,OAAO,CAgH3C;;;;;;;;;;6BAzJY,gBAAgB,GAAG;IAAE,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE;;;;;WAIpC,OAAO,GAAG,MAAM"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["theme.js"],"names":[],"mappings":"AAuBA;;;;;;;;;GASG;AAEH;;;;;;;GAOG;AACH,wDAHW,cAAc,GACZ,IAAI,CAahB;AAED;;;;;;;;;;;;;;;GAeG;AACH,uDAHW,gBAAgB,GAAG,OAAO,eAAe,EAAE,YAAY,GACrD,OAAO,eAAe,EAAE,OAAO,CAmH3C;;;;;;;;;;6BA7JY,gBAAgB,GAAG;IAAE,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE;;;;;WAIpC,OAAO,GAAG,MAAM"}

package/behaviors/theme.js

@@ -58,8 +58,9 @@ export function applyStoredTheme({ storageKey = 'bronto-theme', root } = {}) {
  * persists to localStorage, and **always** sets `data-theme` on <html>
  * (a theme is document-global). State is reflected via `aria-pressed`
  * and a `bronto:themechange` CustomEvent ({ detail: { theme } }) is
- * dispatched on <html> so consumers can sync their own UI without
- * racing the click handler. A control may set
+ * dispatched on <html> for both explicit changes and OS preference changes,
+ * so consumers can sync their own UI without racing the click/media handler.
+ * A control may set
  * `data-bronto-theme-toggle="dark"` to force a specific theme.
  *
  * `root` scopes event delegation and which controls are queried/reflected
@@ -98,6 +99,11 @@ export function initThemeToggle({ storageKey = 'bronto-theme', root } = {}) {
     return prefersDark() ? 'dark' : 'light';
   };
 
+  const emitThemeChange = (theme) => {
+    const ThemeEvent = doc.defaultView?.CustomEvent ?? CustomEvent;
+    docEl.dispatchEvent(new ThemeEvent('bronto:themechange', { detail: { theme }, bubbles: true }));
+  };
+
   const reflect = () => {
     const c = current();
     collectHosts(host, '[data-bronto-theme-toggle]').forEach((el) => {
@@ -134,7 +140,7 @@ export function initThemeToggle({ storageKey = 'bronto-theme', root } = {}) {
       clearSchemeListener();
       return;
     }
-    reflect();
+    emitThemeChange(current());
   }
 
   const onThemeChange = () => {
@@ -156,9 +162,7 @@ export function initThemeToggle({ storageKey = 'bronto-theme', root } = {}) {
       /* storage blocked — theme still applies for this session */
     }
     reflect();
-    docEl.dispatchEvent(
-      new CustomEvent('bronto:themechange', { detail: { theme: next }, bubbles: true }),
-    );
+    emitThemeChange(next);
   };
 
   return bindOnce(host, 'themeToggle', () => {