@ponchia/ui 0.6.10 → 0.6.12

package/behaviors/popover.js

@@ -68,13 +68,59 @@ export function initPopover({ root } = {}) {
   if (!hasDom()) return noop;
   const host = resolveHost(root);
   if (!host) return noop;
-  const view = document.defaultView;
+  const doc = host.nodeType === 9 ? host : host.ownerDocument;
+  if (!doc) return noop;
+  const view = doc.defaultView;
   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(
@@ -121,13 +167,14 @@ export function initPopover({ root } = {}) {
   };
 
   const close = () => {
+    cancelPendingFocus();
     if (!openPanel) return;
     const panel = openPanel;
     const trigger = openTrigger;
     // Only steal focus back to the trigger when focus is still inside the panel
     // (Escape / programmatic re-toggle). An outside-click leaves focus where the
     // click landed — deliberate intent to move on, per the doc contract.
-    const focusWasInside = panel.contains(document.activeElement);
+    const focusWasInside = panel.contains(doc.activeElement);
     openPanel = openTrigger = null;
     if (panel.hasAttribute('popover') && typeof panel.hidePopover === 'function') {
       try {
@@ -164,7 +211,7 @@ export function initPopover({ root } = {}) {
     openPanel = panel;
     openTrigger = trigger;
     place(trigger, panel);
-    focusInto(panel);
+    focusWhenInteractive(panel);
   };
 
   const onClick = (e) => {
@@ -225,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));
@@ -235,8 +285,8 @@ export function initPopover({ root } = {}) {
 
   return bindOnce(host, 'popover', () => {
     seed();
-    document.addEventListener('click', onClick);
-    document.addEventListener('keydown', onKey);
+    doc.addEventListener('click', onClick);
+    doc.addEventListener('keydown', onKey);
     view?.addEventListener('scroll', onReflow, true);
     view?.addEventListener('resize', onReflow);
     return () => {
@@ -250,8 +300,8 @@ export function initPopover({ root } = {}) {
         restoreStyle(panel, state.style);
       }
       panelStates.clear();
-      document.removeEventListener('click', onClick);
-      document.removeEventListener('keydown', onKey);
+      doc.removeEventListener('click', onClick);
+      doc.removeEventListener('keydown', onKey);
       view?.removeEventListener('scroll', onReflow, true);
       view?.removeEventListener('resize', onReflow);
     };

package/behaviors/sources.d.ts.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"sources.d.ts","sourceRoot":"","sources":["sources.js"],"names":[],"mappings":"AAqDA;;;;;;;;;;;GAWG;AACH,uCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA+H3C;;;;;QAlLa,MAAM;;;;cACN,OAAO;;;;YACP,OAAO"}

package/behaviors/sources.js

@@ -3,7 +3,6 @@ import {
   resolveHost,
   noop,
   bindOnce,
-  byIdInHost,
   collectHosts,
   scrollIntoViewSafe,
   closestSafe,
@@ -42,6 +41,16 @@ function sourcePreview(source) {
   return [title, meta, excerpt].filter(Boolean).join(' — ');
 }
 
+function idMapFor(island) {
+  const ids = new Map();
+  const add = (el) => {
+    if (el?.id && !ids.has(el.id)) ids.set(el.id, el);
+  };
+  add(island);
+  for (const el of island.querySelectorAll?.('[id]') || []) add(el);
+  return ids;
+}
+
 /**
  * Source/citation affordances for the `sources.css` trust layer. The behavior
  * is deliberately small: within each `[data-bronto-sources]` island it resolves
@@ -66,11 +75,23 @@ export function initSources({ root } = {}) {
     const timers = new Set();
     const seeded = [];
     const activeSources = new Set();
+    const sourcesById = idMapFor(island);
+    const previewBySource = new WeakMap();
 
     const targetFor = (ref) => {
       const id = sourceId(ref);
       if (!id) return null;
-      return byIdInHost(island, id);
+      const source = sourcesById.get(id) || null;
+      return source && island.contains(source) ? source : null;
+    };
+
+    const previewFor = (source) => {
+      let preview = previewBySource.get(source);
+      if (preview === undefined) {
+        preview = sourcePreview(source);
+        previewBySource.set(source, preview);
+      }
+      return preview;
     };
 
     const seed = () => {
@@ -81,7 +102,7 @@ export function initSources({ root } = {}) {
         const describedBy = ref.getAttribute('aria-describedby') || '';
         const describedIds = describedBy.split(/\s+/).filter(Boolean);
         const title = ref.getAttribute('title');
-        const preview = sourcePreview(source);
+        const preview = previewFor(source);
         const prior = {
           ref,
           describedBy,

package/behaviors/splitter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"splitter.d.ts","sourceRoot":"","sources":["splitter.js"],"names":[],"mappings":"AAwNA;;;;;;;;;;;;;GAaG;AACH,wCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAU3C;;;;;WAlOa,MAAM;;;;iBACN,UAAU,GAAG,YAAY"}
+{"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"}

package/behaviors/splitter.js

@@ -14,7 +14,16 @@ const LARGE_STEP = 10;
  * @property {'vertical' | 'horizontal'} orientation Splitter orientation.
  */
 
+const NUMBER_RE = /^[-+]?(?:(?:\d+\.?\d*)|\.\d+)(?:e[-+]?\d+)?$/i;
+
 const num = (v, fallback) => {
+  const value = String(v ?? '').trim();
+  if (!NUMBER_RE.test(value)) return fallback;
+  const n = Number(value);
+  return Number.isFinite(n) ? n : fallback;
+};
+
+const cssNum = (v, fallback) => {
   const n = Number.parseFloat(String(v ?? '').trim());
   return Number.isFinite(n) ? n : fallback;
 };
@@ -26,7 +35,7 @@ const clamp = (v, min, max) => Math.min(max, Math.max(min, v));
 const readCssValue = (splitter) => splitter.style.getPropertyValue('--splitter-pos');
 
 const readOrientation = (splitter, handle) => {
-  const data = splitter.getAttribute('data-bronto-splitter');
+  const data = splitter.getAttribute('data-bronto-splitter')?.trim();
   if (data === 'horizontal' || data === 'vertical') return data;
   if (splitter.classList.contains('ui-splitter--horizontal')) return 'horizontal';
   if (splitter.classList.contains('ui-splitter--vertical')) return 'vertical';
@@ -87,13 +96,25 @@ function wireSplitter(splitter) {
     ]);
     const splitterPos = snapshotStyleProp(splitter, '--splitter-pos');
     const orientation = readOrientation(splitter, handle);
-    const min = num(handle.getAttribute('aria-valuemin'), DEFAULT_MIN);
-    const max = Math.max(min, num(handle.getAttribute('aria-valuemax'), DEFAULT_MAX));
+    const minAttr = handle.getAttribute('aria-valuemin');
+    const maxAttr = handle.getAttribute('aria-valuemax');
+    const min = num(minAttr, DEFAULT_MIN);
+    const max = Math.max(min, num(maxAttr, DEFAULT_MAX));
     let value = clamp(
-      num(handle.getAttribute('aria-valuenow'), num(readCssValue(splitter), DEFAULT_VALUE)),
+      num(handle.getAttribute('aria-valuenow'), cssNum(readCssValue(splitter), DEFAULT_VALUE)),
       min,
       max,
     );
+    const syncRangeAttr = (name, authored, normalized) => {
+      const parsed = num(authored, Number.NaN);
+      if (
+        authored === null ||
+        !Number.isFinite(parsed) ||
+        String(authored).trim() !== fmt(normalized)
+      ) {
+        handle.setAttribute(name, fmt(normalized));
+      }
+    };
     let activePointer = null;
 
     const apply = (next, { emit = true } = {}) => {
@@ -108,8 +129,8 @@ function wireSplitter(splitter) {
     if (!handle.hasAttribute('tabindex')) handle.tabIndex = 0;
     if (!handle.hasAttribute('aria-orientation'))
       handle.setAttribute('aria-orientation', orientation);
-    if (!handle.hasAttribute('aria-valuemin')) handle.setAttribute('aria-valuemin', fmt(min));
-    if (!handle.hasAttribute('aria-valuemax')) handle.setAttribute('aria-valuemax', fmt(max));
+    syncRangeAttr('aria-valuemin', minAttr, min);
+    syncRangeAttr('aria-valuemax', maxAttr, max);
     apply(value, { emit: false });
 
     const fromPointer = (event) => {

package/behaviors/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["table.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,yCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAwO3C"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["table.js"],"names":[],"mappings":"AAqBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,yCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA0P3C"}

package/behaviors/table.js

@@ -1,5 +1,24 @@
 import { hasDom, resolveHost, noop, bindOnce, collectHosts, closestSafe } from './internal.js';
 
+const localeOf = (el) => {
+  const locale =
+    closestSafe(el, '[lang]')?.getAttribute('lang')?.trim() ||
+    el?.ownerDocument?.documentElement?.getAttribute('lang')?.trim();
+  return locale || undefined;
+};
+
+const textComparatorFor = (el) => {
+  const options = { sensitivity: 'base', numeric: false };
+  if (typeof Intl === 'undefined' || typeof Intl.Collator !== 'function') {
+    return (a, b) => a.localeCompare(b);
+  }
+  try {
+    return new Intl.Collator(localeOf(el), options).compare;
+  } catch {
+    return new Intl.Collator(undefined, options).compare;
+  }
+};
+
 /**
  * Client-side sortable + selectable data table. Wires
  * `[data-bronto-sortable]`:
@@ -71,6 +90,8 @@ export function initTableSort({ root } = {}) {
     const rows = [];
     const checkboxStates = new WeakMap();
     const checkboxes = [];
+    const misplacedSorters = new WeakSet();
+    const compareText = textComparatorFor(table);
 
     const rememberHeaderState = (th) => {
       if (!th || headerStates.has(th)) return;
@@ -134,6 +155,15 @@ export function initTableSort({ root } = {}) {
 
     const colIndex = (th) => [...th.parentElement.children].indexOf(th);
     const cellText = (row, i) => row.children[i]?.textContent.trim() ?? '';
+    const warnMisplacedSorter = (sorter) => {
+      if (misplacedSorters.has(sorter)) return;
+      misplacedSorters.add(sorter);
+      if (typeof console !== 'undefined') {
+        console.warn(
+          '[bronto] initTableSort(): .ui-table__sort must be placed inside a <th>; ignoring this sorter.',
+        );
+      }
+    };
     // Numeric value of a cell for sorting. A `data-sort-value` attribute is the
     // authoritative escape hatch; otherwise normalize the display text so the
     // sign survives (U+2212 / en-em dashes → minus, accounting parens →
@@ -143,7 +173,7 @@ export function initTableSort({ root } = {}) {
       const cell = row.children[i];
       const explicit = cell?.getAttribute?.('data-sort-value');
       if (explicit != null && explicit.trim() !== '') {
-        const raw = explicit.trim();
+        const raw = explicit.trim().replace(/[−–—]/g, '-');
         let v = Number(raw);
         // The escape hatch must actually handle the case the doc names it for: a
         // European decimal comma. `Number("3,5")` is NaN, which silently fell
@@ -184,15 +214,18 @@ export function initTableSort({ root } = {}) {
       // or after a sort they float above the real rows.
       const emptyRows = [...tbody.rows].filter((r) => r.classList.contains('ui-table__empty'));
       const rows = [...tbody.rows].filter((r) => !r.classList.contains('ui-table__empty'));
-      rows.sort((a, b) => {
-        const cmp = numeric
-          ? cellNum(a, i) - cellNum(b, i)
-          : cellText(a, i).localeCompare(cellText(b, i));
-        return cmp * sign;
+      const keyedRows = rows.map((row, index) => ({
+        row,
+        index,
+        key: numeric ? cellNum(row, i) : cellText(row, i),
+      }));
+      keyedRows.sort((a, b) => {
+        const cmp = numeric ? a.key - b.key : compareText(a.key, b.key);
+        return cmp === 0 ? a.index - b.index : cmp * sign;
       });
       // Re-parent in document order: sorted data rows, then any empty/sentinel
       // row last. These are existing <tr> nodes being moved; no markup is parsed.
-      tbody.append(...rows, ...emptyRows);
+      tbody.append(...keyedRows.map(({ row }) => row), ...emptyRows);
     };
 
     const allBox = table.querySelector('[data-bronto-select-all]');
@@ -227,6 +260,10 @@ export function initTableSort({ root } = {}) {
       if (sorter && table.contains(sorter)) {
         rememberSorterState(sorter);
         const th = sorter.closest('th');
+        if (!th) {
+          warnMisplacedSorter(sorter);
+          return;
+        }
         const numeric =
           (sorter.getAttribute('data-sort') || th.getAttribute('data-sort')) === 'num' ||
           th.classList.contains('is-num');

package/behaviors/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.js"],"names":[],"mappings":"AAUA;;;;;;;;;;;;;;;;;GAiBG;AACH,oCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA+I3C"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.js"],"names":[],"mappings":"AAUA;;;;;;;;;;;;;;;;;GAiBG;AACH,oCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAoL3C"}

package/behaviors/tabs.js

@@ -57,6 +57,17 @@ export function initTabs({ root } = {}) {
     const panels = [...group.querySelectorAll('.ui-tabs__panel')].filter(owned);
     if (!tabs.length) continue;
     const list = [...group.querySelectorAll('.ui-tabs__list')].find(owned);
+    const isNativeDisabled = (tab) => {
+      try {
+        if (tab.matches?.(':disabled')) return true;
+      } catch {
+        /* fall through to the native property */
+      }
+      return Boolean('disabled' in tab && tab.disabled);
+    };
+    const isReachable = (tab) => !tab.hidden && !isNativeDisabled(tab);
+    const isAriaDisabled = (tab) => tab.getAttribute('aria-disabled') === 'true';
+    const reachableTabs = () => tabs.filter(isReachable);
     const rememberState = () => ({
       list: list ? snapshotAttrs(list, ['role']) : null,
       tabs: new Map(
@@ -94,17 +105,31 @@ export function initTabs({ root } = {}) {
       }
     };
 
-    const select = (tab) => {
+    let selectedTab = null;
+    const syncTabs = (selected, tabStop) => {
       for (const t of tabs) {
-        const on = t === tab;
+        const on = t === selected;
         t.classList.toggle('is-active', on);
         t.setAttribute('role', 'tab');
         t.setAttribute('aria-selected', String(on));
-        t.tabIndex = on ? 0 : -1;
+        t.tabIndex = t === tabStop ? 0 : -1;
       }
+    };
+    const moveTabStop = (tab) => {
+      const candidates = reachableTabs();
+      const next = candidates.includes(tab) ? tab : candidates[0] || null;
+      if (!next) return false;
+      syncTabs(selectedTab, next);
+      return true;
+    };
+    const select = (tab) => {
+      const candidates = reachableTabs();
+      if (!candidates.includes(tab) || isAriaDisabled(tab)) return false;
+      selectedTab = tab;
+      syncTabs(tab, tab);
       // Only retarget panels when this tab actually controls one. A panel-less
       // tab must not hide every panel; leave the prior panel visible.
-      if (!panels.some((p) => p.dataset.panel === tab.dataset.tab)) return;
+      if (!panels.some((p) => p.dataset.panel === tab.dataset.tab)) return true;
       for (const p of panels) {
         p.setAttribute('role', 'tabpanel');
         const shown = p.dataset.panel === tab.dataset.tab;
@@ -114,6 +139,7 @@ export function initTabs({ root } = {}) {
         if (shown) p.tabIndex = 0;
         else p.removeAttribute('tabindex');
       }
+      return true;
     };
     const onClick = (e) => {
       // `tabs` is filtered to this group, so membership (not mere DOM
@@ -121,23 +147,28 @@ export function initTabs({ root } = {}) {
       const tab = closestSafe(e.target, '.ui-tab');
       if (tab && tabs.includes(tab)) {
         e.preventDefault();
-        select(tab);
-        tab.focus();
+        const handled = select(tab) || moveTabStop(tab);
+        if (handled) tab.focus();
       }
     };
     const onKey = (e) => {
-      const i = tabs.indexOf(closestSafe(e.target, '.ui-tab'));
+      const candidates = reachableTabs();
+      const i = candidates.indexOf(closestSafe(e.target, '.ui-tab'));
       if (i < 0) return;
+      const orientation =
+        list?.getAttribute('aria-orientation') === 'vertical' ? 'vertical' : 'horizontal';
+      const nextKey = orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';
+      const prevKey = orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';
       let n = i;
-      if (e.key === 'ArrowRight' || e.key === 'ArrowDown') n = (i + 1) % tabs.length;
-      else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp')
-        n = (i - 1 + tabs.length) % tabs.length;
+      if (e.key === nextKey) n = (i + 1) % candidates.length;
+      else if (e.key === prevKey) n = (i - 1 + candidates.length) % candidates.length;
       else if (e.key === 'Home') n = 0;
-      else if (e.key === 'End') n = tabs.length - 1;
+      else if (e.key === 'End') n = candidates.length - 1;
       else return;
       e.preventDefault();
-      select(tabs[n]);
-      tabs[n].focus();
+      const next = candidates[n];
+      if (!select(next)) moveTabStop(next);
+      next.focus();
     };
     cleanups.push(
       bindOnce(group, 'tabs', () => {
@@ -155,7 +186,13 @@ export function initTabs({ root } = {}) {
           t.setAttribute('aria-controls', p.id);
           p.setAttribute('aria-labelledby', t.id);
         }
-        select(tabs.find((t) => t.classList.contains('is-active')) || tabs[0]);
+        const candidates = reachableTabs();
+        const initial =
+          candidates.find((t) => t.classList.contains('is-active') && !isAriaDisabled(t)) ||
+          candidates.find((t) => !isAriaDisabled(t)) ||
+          candidates[0];
+        if (initial && !select(initial)) moveTabStop(initial);
+        else if (!initial) syncTabs(null, null);
         group.addEventListener('click', onClick);
         group.addEventListener('keydown', onKey);
         return () => {

package/behaviors/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["theme.js"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH;;;;;;;GAOG;AACH,wDAHW,cAAc,GACZ,IAAI,CAahB;AAED;;;;;;;;;;;;;;GAcG;AACH,uDAHW,gBAAgB,GAAG,OAAO,eAAe,EAAE,YAAY,GACrD,OAAO,eAAe,EAAE,OAAO,CAuE3C;;;;;;;;;;6BAhHY,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;;;;;;;;;;;;;;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"}

package/behaviors/theme.js

@@ -1,6 +1,25 @@
 import { hasDom, resolveHost, noop, bindOnce, collectHosts, closestSafe } from './internal.js';
 
 const THEMES = ['light', 'dark'];
+const DARK_SCHEME_QUERY = '(prefers-color-scheme: dark)';
+
+const colorSchemeQuery = () =>
+  typeof matchMedia === 'function' ? matchMedia(DARK_SCHEME_QUERY) : null;
+
+function onColorSchemeChange(query, listener) {
+  if (
+    typeof query?.addEventListener === 'function' &&
+    typeof query.removeEventListener === 'function'
+  ) {
+    query.addEventListener('change', listener);
+    return () => query.removeEventListener('change', listener);
+  }
+  if (typeof query?.addListener === 'function' && typeof query.removeListener === 'function') {
+    query.addListener(listener);
+    return () => query.removeListener(listener);
+  }
+  return null;
+}
 
 /**
  * @typedef {object} ThemeStorageOpts
@@ -66,8 +85,12 @@ export function initThemeToggle({ storageKey = 'bronto-theme', root } = {}) {
     }
   };
 
-  const prefersDark = () =>
-    typeof matchMedia === 'function' && matchMedia('(prefers-color-scheme: dark)').matches;
+  let schemeQuery = null;
+  let removeSchemeListener = noop;
+
+  const hasExplicitTheme = () => THEMES.includes(docEl.getAttribute('data-theme'));
+
+  const prefersDark = () => (schemeQuery || colorSchemeQuery())?.matches === true;
 
   const current = () => {
     const attr = docEl.getAttribute('data-theme');
@@ -87,6 +110,38 @@ export function initThemeToggle({ storageKey = 'bronto-theme', root } = {}) {
     });
   };
 
+  const clearSchemeListener = () => {
+    removeSchemeListener();
+    removeSchemeListener = noop;
+    schemeQuery = null;
+  };
+
+  const syncSchemeListener = () => {
+    if (hasExplicitTheme()) {
+      clearSchemeListener();
+      return;
+    }
+    if (schemeQuery) return;
+    const query = colorSchemeQuery();
+    const cleanup = onColorSchemeChange(query, onSchemeChange);
+    if (!cleanup) return;
+    schemeQuery = query;
+    removeSchemeListener = cleanup;
+  };
+
+  function onSchemeChange() {
+    if (hasExplicitTheme()) {
+      clearSchemeListener();
+      return;
+    }
+    reflect();
+  }
+
+  const onThemeChange = () => {
+    reflect();
+    syncSchemeListener();
+  };
+
   const onClick = (e) => {
     const trigger = closestSafe(e.target, '[data-bronto-theme-toggle]');
     if (!trigger || !host.contains(trigger)) return;
@@ -94,6 +149,7 @@ export function initThemeToggle({ storageKey = 'bronto-theme', root } = {}) {
     const forced = trigger.getAttribute('data-bronto-theme-toggle');
     const next = THEMES.includes(forced) ? forced : current() === 'dark' ? 'light' : 'dark';
     docEl.setAttribute('data-theme', next);
+    clearSchemeListener();
     try {
       localStorage.setItem(storageKey, next);
     } catch {
@@ -105,12 +161,16 @@ export function initThemeToggle({ storageKey = 'bronto-theme', root } = {}) {
     );
   };
 
-  applyStoredTheme({ storageKey, root: docEl });
-  reflect();
   return bindOnce(host, 'themeToggle', () => {
+    applyStoredTheme({ storageKey, root: docEl });
+    reflect();
+    syncSchemeListener();
+    docEl.addEventListener('bronto:themechange', onThemeChange);
     host.addEventListener('click', onClick);
     return () => {
+      docEl.removeEventListener('bronto:themechange', onThemeChange);
       host.removeEventListener('click', onClick);
+      clearSchemeListener();
       for (const [el, state] of toggleStates) {
         if (state.had) el.setAttribute('aria-pressed', state.value);
         else el.removeAttribute('aria-pressed');

package/behaviors/toast.d.ts

@@ -5,6 +5,7 @@
  * @property {number} [duration] Auto-dismiss delay in ms. `0` keeps it until dismissed. Default: `4000`.
  * @property {boolean} [assertive] Route to the assertive live region so AT interrupts immediately. Defaults to `true` when `tone === 'danger'`.
  * @property {boolean} [closable] Render a dismiss button on the toast.
+ * @property {string} [dismissLabel] Accessible label for the generated dismiss button. Default: `Dismiss`.
  */
 /**
  * Push a transient toast into a shared, screen-anchored stack. The stack
@@ -23,7 +24,7 @@
  * @param {ToastOpts} [opts]
  * @returns {import('./internal.js').Cleanup}
  */
-export function toast(message: string, { tone, title, duration, assertive, closable }?: ToastOpts): import("./internal.js").Cleanup;
+export function toast(message: string, { tone, title, duration, assertive, closable, dismissLabel }?: ToastOpts): import("./internal.js").Cleanup;
 export type ToastOpts = {
     /**
      * Status tone — maps to `ui-toast--<tone>`.
@@ -45,5 +46,9 @@ export type ToastOpts = {
      * Render a dismiss button on the toast.
      */
     closable?: boolean | undefined;
+    /**
+     * Accessible label for the generated dismiss button. Default: `Dismiss`.
+     */
+    dismissLabel?: string | undefined;
 };
 //# sourceMappingURL=toast.d.ts.map

package/behaviors/toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["toast.js"],"names":[],"mappings":"AA2HA;;;;;;;GAOG;AAEH;;;;;;;;;;;;;;;;GAgBG;AACH,+BAJW,MAAM,mDACN,SAAS,GACP,OAAO,eAAe,EAAE,OAAO,CAgD3C"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["toast.js"],"names":[],"mappings":"AAwJA;;;;;;;;GAQG;AAEH;;;;;;;;;;;;;;;;GAgBG;AACH,+BAJW,MAAM,iEACN,SAAS,GACP,OAAO,eAAe,EAAE,OAAO,CAsD3C"}