@ponchia/ui 0.6.7 → 0.6.8

package/behaviors/sources.js

@@ -6,6 +6,7 @@ import {
   byIdInHost,
   collectHosts,
   scrollIntoViewSafe,
+  closestSafe,
 } from './internal.js';
 
 /**
@@ -64,6 +65,7 @@ export function initSources({ root } = {}) {
   for (const island of islands) {
     const timers = new Set();
     const seeded = [];
+    const activeSources = new Set();
 
     const targetFor = (ref) => {
       const id = sourceId(ref);
@@ -101,17 +103,25 @@ export function initSources({ root } = {}) {
       }
     };
 
+    const clearGeneratedActive = () => {
+      for (const source of activeSources) source.classList.remove(ACTIVE);
+      activeSources.clear();
+    };
+
     const focusSource = (ref, source) => {
       for (const card of island.querySelectorAll(`.${ACTIVE}`)) card.classList.remove(ACTIVE);
+      clearGeneratedActive();
       for (const timer of timers) clearTimeout(timer);
       timers.clear();
 
       source.classList.add(ACTIVE);
+      activeSources.add(source);
       source.focus?.({ preventScroll: true });
       scrollIntoViewSafe(source);
 
       const timer = setTimeout(() => {
         source.classList.remove(ACTIVE);
+        activeSources.delete(source);
         timers.delete(timer);
       }, 1600);
       timers.add(timer);
@@ -125,7 +135,7 @@ export function initSources({ root } = {}) {
     };
 
     const onClick = (e) => {
-      const ref = e.target.closest?.(REF_SELECTOR);
+      const ref = closestSafe(e.target, REF_SELECTOR);
       if (!ref || !island.contains(ref)) return;
       const source = targetFor(ref);
       if (!source) return;
@@ -134,12 +144,14 @@ export function initSources({ root } = {}) {
     };
 
     const cleanup = bindOnce(island, 'sources', () => {
+      const activeState = Array.from(island.querySelectorAll(`.${ACTIVE}`));
       seed();
       island.addEventListener('click', onClick);
       return () => {
         island.removeEventListener('click', onClick);
         for (const timer of timers) clearTimeout(timer);
         timers.clear();
+        clearGeneratedActive();
         for (const item of seeded.splice(0)) {
           if (item.hadDescribedBy) item.ref.setAttribute('aria-describedby', item.describedBy);
           else item.ref.removeAttribute('aria-describedby');
@@ -147,7 +159,7 @@ export function initSources({ root } = {}) {
           else item.ref.removeAttribute('title');
           if (item.source && item.hadTabindex === false) item.source.removeAttribute('tabindex');
         }
-        for (const card of island.querySelectorAll(`.${ACTIVE}`)) card.classList.remove(ACTIVE);
+        for (const source of activeState) source.classList.add(ACTIVE);
       };
     });
 

package/behaviors/splitter.d.ts.map

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

package/behaviors/splitter.js

@@ -44,122 +44,159 @@ const dispatchResize = (splitter, detail) => {
   );
 };
 
+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);
+  }
+};
+
+const snapshotStyleProp = (el, name) => ({
+  value: el.style.getPropertyValue(name),
+  priority: el.style.getPropertyPriority(name),
+});
+
+const restoreStyleProp = (el, name, prop) => {
+  if (prop.value) el.style.setProperty(name, prop.value, prop.priority);
+  else el.style.removeProperty(name);
+};
+
 function wireSplitter(splitter) {
   const handle = splitter.querySelector(HANDLE_SELECTOR);
   if (!handle) return noop;
 
-  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));
-  let value = clamp(
-    num(handle.getAttribute('aria-valuenow'), num(readCssValue(splitter), DEFAULT_VALUE)),
-    min,
-    max,
-  );
-  let activePointer = null;
-
-  const apply = (next, { emit = true } = {}) => {
-    value = clamp(next, min, max);
-    const label = fmt(value);
-    splitter.style.setProperty('--splitter-pos', `${label}%`);
-    handle.setAttribute('aria-valuenow', label);
-    if (emit) dispatchResize(splitter, { value, orientation });
-  };
-
-  if (!handle.hasAttribute('role')) handle.setAttribute('role', 'separator');
-  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));
-  apply(value, { emit: false });
-
-  const fromPointer = (event) => {
-    const rect = splitter.getBoundingClientRect();
-    const size = orientation === 'horizontal' ? rect.height : rect.width;
-    if (!size) return value;
-    if (orientation === 'horizontal') {
-      return ((event.clientY - rect.top) / size) * 100;
-    }
-    const view = getView(splitter);
-    const dir = view?.getComputedStyle?.(splitter).direction;
-    const x = dir === 'rtl' ? rect.right - event.clientX : event.clientX - rect.left;
-    return (x / size) * 100;
-  };
-
-  const capturePointer = (pointerId) => {
-    if (pointerId === undefined || pointerId === null) return;
-    try {
-      handle.setPointerCapture?.(pointerId);
-    } catch {
-      /* Pointer capture is an affordance; drag still works through document listeners. */
-    }
-  };
-
-  const releasePointer = (pointerId = activePointer) => {
-    if (pointerId === undefined || pointerId === null) return;
-    try {
-      if (!handle.hasPointerCapture || handle.hasPointerCapture(pointerId)) {
-        handle.releasePointerCapture?.(pointerId);
+  return bindOnce(splitter, 'splitter', () => {
+    const handleAttrs = snapshotAttrs(handle, [
+      'role',
+      'tabindex',
+      'aria-orientation',
+      'aria-valuemin',
+      'aria-valuemax',
+      'aria-valuenow',
+    ]);
+    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));
+    let value = clamp(
+      num(handle.getAttribute('aria-valuenow'), num(readCssValue(splitter), DEFAULT_VALUE)),
+      min,
+      max,
+    );
+    let activePointer = null;
+
+    const apply = (next, { emit = true } = {}) => {
+      value = clamp(next, min, max);
+      const label = fmt(value);
+      splitter.style.setProperty('--splitter-pos', `${label}%`);
+      handle.setAttribute('aria-valuenow', label);
+      if (emit) dispatchResize(splitter, { value, orientation });
+    };
+
+    if (!handle.hasAttribute('role')) handle.setAttribute('role', 'separator');
+    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));
+    apply(value, { emit: false });
+
+    const fromPointer = (event) => {
+      const rect = splitter.getBoundingClientRect();
+      const size = orientation === 'horizontal' ? rect.height : rect.width;
+      if (!size) return value;
+      if (orientation === 'horizontal') {
+        return ((event.clientY - rect.top) / size) * 100;
+      }
+      const view = getView(splitter);
+      const dir = view?.getComputedStyle?.(splitter).direction;
+      const x = dir === 'rtl' ? rect.right - event.clientX : event.clientX - rect.left;
+      return (x / size) * 100;
+    };
+
+    const capturePointer = (pointerId) => {
+      if (pointerId === undefined || pointerId === null) return;
+      try {
+        handle.setPointerCapture?.(pointerId);
+      } catch {
+        /* Pointer capture is an affordance; drag still works through document listeners. */
       }
-    } catch {
-      /* The element may have been removed or capture may already be gone. */
-    }
-  };
-
-  const onKeydown = (event) => {
-    let next = value;
-    if (event.key === 'Home') next = min;
-    else if (event.key === 'End') next = max;
-    else if (event.key === 'PageUp') next += LARGE_STEP;
-    else if (event.key === 'PageDown') next -= LARGE_STEP;
-    else if (event.key === 'ArrowRight' || event.key === 'ArrowDown')
-      next += event.shiftKey ? LARGE_STEP : STEP;
-    else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp')
-      next -= event.shiftKey ? LARGE_STEP : STEP;
-    else return;
-    event.preventDefault();
-    apply(next);
-  };
-
-  const onPointerMove = (event) => {
-    if (
-      activePointer !== null &&
-      event.pointerId !== undefined &&
-      event.pointerId !== activePointer
-    )
-      return;
-    apply(fromPointer(event));
-  };
-
-  const onPointerUp = (event) => {
-    if (
-      activePointer !== null &&
-      event.pointerId !== undefined &&
-      event.pointerId !== activePointer
-    )
-      return;
-    releasePointer(event.pointerId);
-    activePointer = null;
-    handle.classList.remove('is-active');
-    splitter.ownerDocument.removeEventListener('pointermove', onPointerMove);
-    splitter.ownerDocument.removeEventListener('pointerup', onPointerUp);
-    splitter.ownerDocument.removeEventListener('pointercancel', onPointerUp);
-  };
-
-  const onPointerDown = (event) => {
-    if (event.button !== undefined && event.button !== 0) return;
-    event.preventDefault();
-    activePointer = event.pointerId ?? null;
-    capturePointer(activePointer);
-    handle.classList.add('is-active');
-    apply(fromPointer(event));
-    splitter.ownerDocument.addEventListener('pointermove', onPointerMove);
-    splitter.ownerDocument.addEventListener('pointerup', onPointerUp);
-    splitter.ownerDocument.addEventListener('pointercancel', onPointerUp);
-  };
+    };
+
+    const releasePointer = (pointerId = activePointer) => {
+      if (pointerId === undefined || pointerId === null) return;
+      try {
+        if (!handle.hasPointerCapture || handle.hasPointerCapture(pointerId)) {
+          handle.releasePointerCapture?.(pointerId);
+        }
+      } catch {
+        /* The element may have been removed or capture may already be gone. */
+      }
+    };
+
+    const onKeydown = (event) => {
+      let next = value;
+      if (event.key === 'Home') next = min;
+      else if (event.key === 'End') next = max;
+      else if (event.key === 'PageUp') next += LARGE_STEP;
+      else if (event.key === 'PageDown') next -= LARGE_STEP;
+      else if (event.key === 'ArrowRight' || event.key === 'ArrowDown')
+        next += event.shiftKey ? LARGE_STEP : STEP;
+      else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp')
+        next -= event.shiftKey ? LARGE_STEP : STEP;
+      else return;
+      event.preventDefault();
+      apply(next);
+    };
+
+    const onPointerMove = (event) => {
+      if (
+        activePointer !== null &&
+        event.pointerId !== undefined &&
+        event.pointerId !== activePointer
+      )
+        return;
+      apply(fromPointer(event));
+    };
+
+    const onPointerUp = (event) => {
+      if (
+        activePointer !== null &&
+        event.pointerId !== undefined &&
+        event.pointerId !== activePointer
+      )
+        return;
+      releasePointer(event.pointerId);
+      activePointer = null;
+      handle.classList.remove('is-active');
+      splitter.ownerDocument.removeEventListener('pointermove', onPointerMove);
+      splitter.ownerDocument.removeEventListener('pointerup', onPointerUp);
+      splitter.ownerDocument.removeEventListener('pointercancel', onPointerUp);
+    };
+
+    const onPointerDown = (event) => {
+      if (event.button !== undefined && event.button !== 0) return;
+      event.preventDefault();
+      activePointer = event.pointerId ?? null;
+      capturePointer(activePointer);
+      handle.classList.add('is-active');
+      apply(fromPointer(event));
+      splitter.ownerDocument.addEventListener('pointermove', onPointerMove);
+      splitter.ownerDocument.addEventListener('pointerup', onPointerUp);
+      splitter.ownerDocument.addEventListener('pointercancel', onPointerUp);
+    };
 
-  return bindOnce(splitter, 'splitter', () => {
     handle.addEventListener('keydown', onKeydown);
     handle.addEventListener('pointerdown', onPointerDown);
     return () => {
@@ -171,6 +208,8 @@ function wireSplitter(splitter) {
       releasePointer();
       handle.classList.remove('is-active');
       activePointer = null;
+      restoreAttrs(handle, handleAttrs);
+      restoreStyleProp(splitter, '--splitter-pos', splitterPos);
     };
   });
 }

package/behaviors/spotlight.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spotlight.d.ts","sourceRoot":"","sources":["spotlight.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AACH,yCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAuC3C"}
+{"version":3,"file":"spotlight.d.ts","sourceRoot":"","sources":["spotlight.js"],"names":[],"mappings":"AAsBA;;;;;;;;;;;;;;GAcG;AACH,yCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA6C3C"}

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,18 +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')) {
-      if (sort.tagName === 'BUTTON' && !sort.hasAttribute('type')) sort.type = 'button';
-      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() ?? '';
@@ -95,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;
@@ -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"}