@ponchia/ui 0.6.6 → 0.6.8

package/behaviors/spotlight.js

@@ -1,5 +1,25 @@
 import { hasDom, resolveHost, noop, bindOnce, byIdInHost, collectHosts } from './internal.js';
 
+const SPOT_PROPS = ['--spot-x', '--spot-y', '--spot-w', '--spot-h'];
+
+const snapshotSpotProps = (spot) =>
+  Object.fromEntries(
+    SPOT_PROPS.map((name) => [
+      name,
+      {
+        value: spot.style.getPropertyValue(name),
+        priority: spot.style.getPropertyPriority(name),
+      },
+    ]),
+  );
+
+const restoreSpotProps = (spot, props) => {
+  for (const [name, prop] of Object.entries(props)) {
+    if (prop.value) spot.style.setProperty(name, prop.value, prop.priority);
+    else spot.style.removeProperty(name);
+  }
+};
+
 /**
  * Position a spotlight cutout over a target element. Each
  * `[data-bronto-spotlight]` is a `.ui-spotlight` overlay; `data-target` is the
@@ -19,10 +39,9 @@ export function initSpotlight({ root } = {}) {
   if (!hasDom()) return noop;
   const host = resolveHost(root);
   if (!host) return noop;
-  const spots = collectHosts(host, '[data-bronto-spotlight]');
-  if (!spots.length) return noop;
 
   const place = () => {
+    const spots = collectHosts(host, '[data-bronto-spotlight]');
     for (const spot of spots) {
       const target = byIdInHost(host, spot.dataset.target);
       if (!target) continue;
@@ -35,6 +54,12 @@ export function initSpotlight({ root } = {}) {
   };
 
   return bindOnce(host, 'spotlight', () => {
+    const spots = collectHosts(host, '[data-bronto-spotlight]');
+    if (!spots.length) return noop;
+    const states = spots.map((spot) => ({
+      spot,
+      props: snapshotSpotProps(spot),
+    }));
     place();
     const view = host.defaultView || host.ownerDocument?.defaultView || null;
     const MO = view?.MutationObserver;
@@ -50,6 +75,7 @@ export function initSpotlight({ root } = {}) {
       mo?.disconnect();
       view?.removeEventListener('resize', place);
       view?.removeEventListener('scroll', place, true);
+      for (const state of states) restoreSpotProps(state.spot, state.props);
     };
   });
 }

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,CA6I3C"}
+{"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,CAyO3C"}

package/behaviors/table.js

@@ -1,4 +1,4 @@
-import { hasDom, resolveHost, noop, bindOnce, collectHosts } from './internal.js';
+import { hasDom, resolveHost, noop, bindOnce, collectHosts, closestSafe } from './internal.js';
 
 /**
  * Client-side sortable + selectable data table. Wires
@@ -41,17 +41,97 @@ export function initTableSort({ root } = {}) {
   const tables = collectHosts(host, '[data-bronto-sortable]');
   const cleanups = [];
 
+  const snapshotAttrs = (el, names) => {
+    const out = {};
+    for (const name of names) {
+      out[name] = {
+        had: el.hasAttribute(name),
+        value: el.getAttribute(name),
+      };
+    }
+    return out;
+  };
+
+  const restoreAttrs = (el, attrs) => {
+    for (const [name, attr] of Object.entries(attrs)) {
+      if (attr.had) el.setAttribute(name, attr.value);
+      else el.removeAttribute(name);
+    }
+  };
+
   for (const table of tables) {
     const tbody = table.tBodies[0];
     if (!tbody) continue;
 
-    // Seed the resting `aria-sort="none"` on every sortable header so AT
-    // announces the column as sortable from the start (it was unset until the
-    // first click — C10).
-    for (const sort of table.querySelectorAll('.ui-table__sort')) {
-      const th = sort.closest('th');
-      if (th && !th.hasAttribute('aria-sort')) th.setAttribute('aria-sort', 'none');
-    }
+    const headerStates = new WeakMap();
+    const headers = [];
+    const sortStates = new WeakMap();
+    const sorters = [];
+    const rowStates = new WeakMap();
+    const rows = [];
+    const checkboxStates = new WeakMap();
+    const checkboxes = [];
+
+    const rememberHeaderState = (th) => {
+      if (!th || headerStates.has(th)) return;
+      headerStates.set(th, snapshotAttrs(th, ['aria-sort']));
+      headers.push(th);
+    };
+    const rememberSorterState = (sorter) => {
+      if (!sorter || sortStates.has(sorter)) return;
+      sortStates.set(sorter, snapshotAttrs(sorter, ['type']));
+      sorters.push(sorter);
+    };
+    const rememberRowState = (row) => {
+      if (!row || rowStates.has(row)) return;
+      rowStates.set(row, snapshotAttrs(row, ['aria-selected']));
+      rows.push(row);
+    };
+    const rememberCheckboxState = (box) => {
+      if (!box || checkboxStates.has(box)) return;
+      checkboxStates.set(box, {
+        checked: box.checked,
+        indeterminate: box.indeterminate,
+      });
+      checkboxes.push(box);
+      rememberRowState(box.closest?.('tr'));
+    };
+    const seedSorters = () => {
+      // Seed the resting `aria-sort="none"` on every sortable header so AT
+      // announces the column as sortable from the start (it was unset until the
+      // first click — C10).
+      for (const sort of table.querySelectorAll('.ui-table__sort')) {
+        rememberSorterState(sort);
+        if (sort.tagName === 'BUTTON' && !sort.hasAttribute('type')) sort.type = 'button';
+        const th = sort.closest('th');
+        rememberHeaderState(th);
+        if (th && !th.hasAttribute('aria-sort')) th.setAttribute('aria-sort', 'none');
+      }
+    };
+    const rememberTableState = () => {
+      const rowOrder = [...tbody.rows];
+      rowOrder.forEach(rememberRowState);
+      seedSorters();
+      const allBox = table.querySelector('[data-bronto-select-all]');
+      rememberCheckboxState(allBox);
+      table.querySelectorAll('[data-bronto-select]').forEach(rememberCheckboxState);
+      return { rowOrder };
+    };
+    const restoreTableState = (state) => {
+      for (const sorter of sorters) restoreAttrs(sorter, sortStates.get(sorter));
+      for (const th of headers) restoreAttrs(th, headerStates.get(th));
+      for (const row of rows) restoreAttrs(row, rowStates.get(row));
+      for (const box of checkboxes) {
+        const boxState = checkboxStates.get(box);
+        if (!boxState) continue;
+        box.checked = boxState.checked;
+        box.indeterminate = boxState.indeterminate;
+      }
+      const ordered = state.rowOrder.filter((row) => row.parentElement === tbody);
+      const orderedSet = new Set(ordered);
+      const extras = [...tbody.rows].filter((row) => !orderedSet.has(row));
+      tbody.append(...ordered, ...extras);
+    };
 
     const colIndex = (th) => [...th.parentElement.children].indexOf(th);
     const cellText = (row, i) => row.children[i]?.textContent.trim() ?? '';
@@ -94,8 +174,10 @@ export function initTableSort({ root } = {}) {
       // Reset the OTHER sortable headers to `none` (not removed) so they keep
       // announcing sortability; only previously-sortable headers carry aria-sort.
       headers.forEach((h) => {
+        rememberHeaderState(h);
         if (h !== th && h.hasAttribute('aria-sort')) h.setAttribute('aria-sort', 'none');
       });
+      rememberHeaderState(th);
       th.setAttribute('aria-sort', dir);
       const i = colIndex(th);
       const sign = dir === 'ascending' ? 1 : -1;
@@ -110,9 +192,8 @@ export function initTableSort({ root } = {}) {
         return cmp * sign;
       });
       // Re-parent in document order: sorted data rows, then any empty/sentinel
-      // row last. A single appendChild pass over the existing <tr> nodes (no
-      // markup is created — these are trusted DOM elements being moved).
-      for (const r of [...rows, ...emptyRows]) tbody.appendChild(r);
+      // row last. These are existing <tr> nodes being moved; no markup is parsed.
+      tbody.append(...rows, ...emptyRows);
     };
 
     const allBox = table.querySelector('[data-bronto-select-all]');
@@ -121,6 +202,7 @@ export function initTableSort({ root } = {}) {
       const boxes = rowBoxes();
       const on = boxes.filter((b) => b.checked).length;
       if (allBox) {
+        rememberCheckboxState(allBox);
         allBox.checked = on > 0 && on === boxes.length;
         allBox.indeterminate = on > 0 && on < boxes.length;
       }
@@ -129,8 +211,12 @@ export function initTableSort({ root } = {}) {
       );
     };
     const markRow = (box) => {
+      rememberCheckboxState(box);
       const tr = box.closest('tr');
-      if (tr) tr.setAttribute('aria-selected', String(box.checked));
+      if (tr) {
+        rememberRowState(tr);
+        tr.setAttribute('aria-selected', String(box.checked));
+      }
     };
 
     const onClick = (e) => {
@@ -138,8 +224,9 @@ export function initTableSort({ root } = {}) {
       // keyboard-operable and carries the `::after` sort glyph. The bare
       // `th[data-sort]` path was mouse-only with no affordance, so it is gone
       // (C10); `data-sort="num"` is still read from the button or its th.
-      const sorter = e.target.closest('.ui-table__sort');
+      const sorter = closestSafe(e.target, '.ui-table__sort');
       if (sorter && table.contains(sorter)) {
+        rememberSorterState(sorter);
         const th = sorter.closest('th');
         const numeric =
           (sorter.getAttribute('data-sort') || th.getAttribute('data-sort')) === 'num' ||
@@ -150,23 +237,28 @@ export function initTableSort({ root } = {}) {
     const onChange = (e) => {
       const t = e.target;
       if (t.matches?.('[data-bronto-select-all]')) {
+        rememberCheckboxState(t);
         rowBoxes().forEach((b) => {
+          rememberCheckboxState(b);
           b.checked = t.checked;
           markRow(b);
         });
         syncAll();
       } else if (t.matches?.('[data-bronto-select]')) {
+        rememberCheckboxState(t);
         markRow(t);
         syncAll();
       }
     };
 
     const bound = bindOnce(table, 'tableSort', () => {
+      const state = rememberTableState();
       table.addEventListener('click', onClick);
       table.addEventListener('change', onChange);
       return () => {
         table.removeEventListener('click', onClick);
         table.removeEventListener('change', onChange);
+        restoreTableState(state);
       };
     });
     cleanups.push(bound);

package/behaviors/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AACH,oCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAuF3C"}
+{"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"}

package/behaviors/tabs.js

@@ -1,4 +1,12 @@
-import { hasDom, resolveHost, noop, bindOnce, nextFieldUid, collectHosts } from './internal.js';
+import {
+  hasDom,
+  resolveHost,
+  noop,
+  bindOnce,
+  nextFieldUid,
+  collectHosts,
+  closestSafe,
+} from './internal.js';
 
 /**
  * Wire `[data-bronto-tabs]` groups for full keyboard a11y. The framework
@@ -24,6 +32,23 @@ export function initTabs({ root } = {}) {
   if (!host) return noop;
   const cleanups = [];
   const groups = collectHosts(host, '[data-bronto-tabs]');
+  const snapshotAttrs = (el, names) => {
+    const out = {};
+    for (const name of names) {
+      out[name] = {
+        had: el.hasAttribute(name),
+        value: el.getAttribute(name),
+      };
+    }
+    return out;
+  };
+  const restoreAttrs = (el, attrs) => {
+    for (const [name, attr] of Object.entries(attrs)) {
+      if (attr.had) el.setAttribute(name, attr.value);
+      else el.removeAttribute(name);
+    }
+  };
+
   for (const group of groups) {
     // Own group only — a tab/panel inside a nested [data-bronto-tabs]
     // belongs to that inner group, not this one.
@@ -31,20 +56,43 @@ export function initTabs({ root } = {}) {
     const tabs = [...group.querySelectorAll('.ui-tab')].filter(owned);
     const panels = [...group.querySelectorAll('.ui-tabs__panel')].filter(owned);
     if (!tabs.length) continue;
-    const list = group.querySelector('.ui-tabs__list');
-    if (list) list.setAttribute('role', 'tablist');
-
-    // APG: bind each tab to its panel (aria-controls) and back
-    // (aria-labelledby), minting stable ids only where absent.
-    for (const t of tabs) {
-      const p = panels.find((x) => x.dataset.panel === t.dataset.tab);
-      if (!p) continue;
-      const n = nextFieldUid();
-      if (!t.id) t.id = `bronto-tab-${n}`;
-      if (!p.id) p.id = `bronto-tabpanel-${n}`;
-      t.setAttribute('aria-controls', p.id);
-      p.setAttribute('aria-labelledby', t.id);
-    }
+    const list = [...group.querySelectorAll('.ui-tabs__list')].find(owned);
+    const rememberState = () => ({
+      list: list ? snapshotAttrs(list, ['role']) : null,
+      tabs: new Map(
+        tabs.map((tab) => [
+          tab,
+          {
+            active: tab.classList.contains('is-active'),
+            attrs: snapshotAttrs(tab, ['id', 'role', 'aria-selected', 'aria-controls', 'tabindex']),
+          },
+        ]),
+      ),
+      panels: new Map(
+        panels.map((panel) => [
+          panel,
+          {
+            hidden: panel.hidden,
+            attrs: snapshotAttrs(panel, ['id', 'role', 'aria-labelledby', 'tabindex']),
+          },
+        ]),
+      ),
+    });
+    const restoreState = (state) => {
+      if (list && state.list) restoreAttrs(list, state.list);
+      for (const tab of tabs) {
+        const tabState = state.tabs.get(tab);
+        if (!tabState) continue;
+        tab.classList.toggle('is-active', tabState.active);
+        restoreAttrs(tab, tabState.attrs);
+      }
+      for (const panel of panels) {
+        const panelState = state.panels.get(panel);
+        if (!panelState) continue;
+        panel.hidden = panelState.hidden;
+        restoreAttrs(panel, panelState.attrs);
+      }
+    };
 
     const select = (tab) => {
       for (const t of tabs) {
@@ -70,14 +118,15 @@ export function initTabs({ root } = {}) {
     const onClick = (e) => {
       // `tabs` is filtered to this group, so membership (not mere DOM
       // containment) is what isolates nested [data-bronto-tabs] groups.
-      const tab = e.target.closest('.ui-tab');
+      const tab = closestSafe(e.target, '.ui-tab');
       if (tab && tabs.includes(tab)) {
+        e.preventDefault();
         select(tab);
         tab.focus();
       }
     };
     const onKey = (e) => {
-      const i = tabs.indexOf(e.target.closest('.ui-tab'));
+      const i = tabs.indexOf(closestSafe(e.target, '.ui-tab'));
       if (i < 0) return;
       let n = i;
       if (e.key === 'ArrowRight' || e.key === 'ArrowDown') n = (i + 1) % tabs.length;
@@ -90,14 +139,29 @@ export function initTabs({ root } = {}) {
       select(tabs[n]);
       tabs[n].focus();
     };
-    select(tabs.find((t) => t.classList.contains('is-active')) || tabs[0]);
     cleanups.push(
       bindOnce(group, 'tabs', () => {
+        const state = rememberState();
+        if (list) list.setAttribute('role', 'tablist');
+
+        // APG: bind each tab to its panel (aria-controls) and back
+        // (aria-labelledby), minting stable ids only where absent.
+        for (const t of tabs) {
+          const p = panels.find((x) => x.dataset.panel === t.dataset.tab);
+          if (!p) continue;
+          const n = nextFieldUid();
+          if (!t.id) t.id = `bronto-tab-${n}`;
+          if (!p.id) p.id = `bronto-tabpanel-${n}`;
+          t.setAttribute('aria-controls', p.id);
+          p.setAttribute('aria-labelledby', t.id);
+        }
+        select(tabs.find((t) => t.classList.contains('is-active')) || tabs[0]);
         group.addEventListener('click', onClick);
         group.addEventListener('keydown', onKey);
         return () => {
           group.removeEventListener('click', onClick);
           group.removeEventListener('keydown', onKey);
+          restoreState(state);
         };
       }),
     );

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,CAmD3C;;;;;;;;;;6BA5FY,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":"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"}

package/behaviors/theme.js

@@ -1,4 +1,4 @@
-import { hasDom, resolveHost, noop, bindOnce } from './internal.js';
+import { hasDom, resolveHost, noop, bindOnce, collectHosts, closestSafe } from './internal.js';
 
 const THEMES = ['light', 'dark'];
 
@@ -53,7 +53,18 @@ export function initThemeToggle({ storageKey = 'bronto-theme', root } = {}) {
   if (!hasDom()) return noop;
   const host = resolveHost(root);
   if (!host) return noop;
-  const docEl = document.documentElement;
+  const doc = host.nodeType === 9 ? host : host.ownerDocument || document;
+  const docEl = doc.documentElement;
+  const toggleStates = new Map();
+
+  const rememberToggle = (el) => {
+    if (!toggleStates.has(el)) {
+      toggleStates.set(el, {
+        had: el.hasAttribute('aria-pressed'),
+        value: el.getAttribute('aria-pressed'),
+      });
+    }
+  };
 
   const prefersDark = () =>
     typeof matchMedia === 'function' && matchMedia('(prefers-color-scheme: dark)').matches;
@@ -66,7 +77,8 @@ export function initThemeToggle({ storageKey = 'bronto-theme', root } = {}) {
 
   const reflect = () => {
     const c = current();
-    host.querySelectorAll('[data-bronto-theme-toggle]').forEach((el) => {
+    collectHosts(host, '[data-bronto-theme-toggle]').forEach((el) => {
+      rememberToggle(el);
       const forced = el.getAttribute('data-bronto-theme-toggle');
       // A forced control is "pressed" when its theme is the active one;
       // a plain toggle reflects whether dark is active.
@@ -76,8 +88,9 @@ export function initThemeToggle({ storageKey = 'bronto-theme', root } = {}) {
   };
 
   const onClick = (e) => {
-    const trigger = e.target.closest('[data-bronto-theme-toggle]');
+    const trigger = closestSafe(e.target, '[data-bronto-theme-toggle]');
     if (!trigger || !host.contains(trigger)) return;
+    e.preventDefault();
     const forced = trigger.getAttribute('data-bronto-theme-toggle');
     const next = THEMES.includes(forced) ? forced : current() === 'dark' ? 'light' : 'dark';
     docEl.setAttribute('data-theme', next);
@@ -92,10 +105,17 @@ export function initThemeToggle({ storageKey = 'bronto-theme', root } = {}) {
     );
   };
 
-  applyStoredTheme({ storageKey });
+  applyStoredTheme({ storageKey, root: docEl });
   reflect();
   return bindOnce(host, 'themeToggle', () => {
     host.addEventListener('click', onClick);
-    return () => host.removeEventListener('click', onClick);
+    return () => {
+      host.removeEventListener('click', onClick);
+      for (const [el, state] of toggleStates) {
+        if (state.had) el.setAttribute('aria-pressed', state.value);
+        else el.removeAttribute('aria-pressed');
+      }
+      toggleStates.clear();
+    };
   });
 }