@ponchia/ui 0.6.7 → 0.6.8

package/behaviors/command.js

@@ -7,6 +7,7 @@ import {
   collectHosts,
   scrollIntoViewSafe,
   wrapIndex,
+  closestSafe,
 } from './internal.js';
 
 /**
@@ -46,6 +47,24 @@ export function initCommand({ root } = {}) {
   const palettes = collectHosts(host, '[data-bronto-command]');
   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 box of palettes) {
     const input = box.querySelector('.ui-command__input, input');
     const list = box.querySelector('.ui-command__list, [role="listbox"]');
@@ -54,18 +73,44 @@ export function initCommand({ root } = {}) {
     const items = [...list.querySelectorAll('.ui-command__item, [role="option"]')];
     const groups = [...list.querySelectorAll('.ui-command__group')];
 
-    const listId = list.id || (list.id = `bronto-cmd-${nextFieldUid()}`);
-    items.forEach((it, i) => {
-      if (!it.id) it.id = `${listId}-opt-${i}`;
-      it.setAttribute('role', 'option');
+    const rememberState = () => ({
+      input: snapshotAttrs(input, [
+        'role',
+        'aria-controls',
+        'aria-autocomplete',
+        'aria-expanded',
+        'aria-activedescendant',
+        'autocomplete',
+      ]),
+      list: snapshotAttrs(list, ['id', 'role']),
+      empty: empty ? { hidden: empty.hidden } : null,
+      groups: groups.map((g) => ({
+        el: g,
+        hidden: g.hidden,
+        attrs: snapshotAttrs(g, ['role']),
+      })),
+      items: items.map((it) => ({
+        el: it,
+        hidden: it.hidden,
+        active: it.classList.contains('is-active'),
+        attrs: snapshotAttrs(it, ['id', 'role', 'aria-selected']),
+      })),
     });
-    groups.forEach((g) => g.setAttribute('role', 'presentation'));
-    list.setAttribute('role', 'listbox');
-    input.setAttribute('role', 'combobox');
-    input.setAttribute('aria-controls', listId);
-    input.setAttribute('aria-autocomplete', 'list');
-    input.setAttribute('aria-expanded', 'true');
-    input.setAttribute('autocomplete', 'off');
+
+    const restoreState = (state) => {
+      restoreAttrs(input, state.input);
+      restoreAttrs(list, state.list);
+      if (empty && state.empty) empty.hidden = state.empty.hidden;
+      for (const group of state.groups) {
+        group.el.hidden = group.hidden;
+        restoreAttrs(group.el, group.attrs);
+      }
+      for (const item of state.items) {
+        item.el.hidden = item.hidden;
+        item.el.classList.toggle('is-active', item.active);
+        restoreAttrs(item.el, item.attrs);
+      }
+    };
 
     let active = -1;
     const visible = () => items.filter((it) => !it.hidden);
@@ -176,22 +221,37 @@ export function initCommand({ root } = {}) {
       }
     };
     const onClick = (e) => {
-      const item = e.target.closest('.ui-command__item, [role="option"]');
+      const item = closestSafe(e.target, '.ui-command__item, [role="option"]');
       if (item && list.contains(item)) choose(item);
     };
 
     const bound = bindOnce(box, 'command', () => {
+      const state = rememberState();
+      const listId = list.id || (list.id = `bronto-cmd-${nextFieldUid()}`);
+      items.forEach((it, i) => {
+        if (!it.id) it.id = `${listId}-opt-${i}`;
+        it.setAttribute('role', 'option');
+      });
+      groups.forEach((g) => g.setAttribute('role', 'presentation'));
+      list.setAttribute('role', 'listbox');
+      input.setAttribute('role', 'combobox');
+      input.setAttribute('aria-controls', listId);
+      input.setAttribute('aria-autocomplete', 'list');
+      input.setAttribute('aria-expanded', 'true');
+      input.setAttribute('autocomplete', 'off');
       input.addEventListener('input', onInput);
       input.addEventListener('keydown', onKey);
       list.addEventListener('click', onClick);
+      // Seed the initial active item (first visible).
+      filter();
       return () => {
         input.removeEventListener('input', onInput);
         input.removeEventListener('keydown', onKey);
         list.removeEventListener('click', onClick);
+        restoreState(state);
+        active = -1;
       };
     });
-    // Seed the initial active item (first visible).
-    filter();
     cleanups.push(bound);
   }
 

package/behaviors/connectors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"connectors.d.ts","sourceRoot":"","sources":["connectors.js"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;GAcG;AACH,0CAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA+E3C"}
+{"version":3,"file":"connectors.d.ts","sourceRoot":"","sources":["connectors.js"],"names":[],"mappings":"AA2CA;;;;;;;;;;;;;;GAcG;AACH,0CAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA4H3C"}

package/behaviors/connectors.js

@@ -3,6 +3,44 @@ import { connectRects, arrowHead, dotMark } from '../connectors/index.js';
 
 const SVGNS = 'http://www.w3.org/2000/svg';
 
+const snapshotAttrs = (el) =>
+  Array.from(el.attributes, ({ name, value }) => ({
+    name,
+    value,
+  }));
+
+const restoreAttrs = (el, attrs) => {
+  for (const { name } of Array.from(el.attributes)) el.removeAttribute(name);
+  for (const { name, value } of attrs) el.setAttribute(name, value);
+};
+
+const snapshotPart = (svg, selector) => {
+  const node = svg.querySelector(selector);
+  if (!node) return { node: null };
+  return {
+    node,
+    attrs: snapshotAttrs(node),
+    parent: node.parentNode,
+    nextSibling: node.nextSibling,
+    textContent: node.textContent,
+  };
+};
+
+const restorePart = (svg, selector, state) => {
+  if (!state.node) {
+    svg.querySelector(selector)?.remove();
+    return;
+  }
+
+  const parent = state.parent || svg;
+  if (state.node.parentNode !== parent) {
+    const before = state.nextSibling?.parentNode === parent ? state.nextSibling : null;
+    parent.insertBefore(state.node, before);
+  }
+  restoreAttrs(state.node, state.attrs);
+  state.node.textContent = state.textContent;
+};
+
 /**
  * Draw + keep leader lines in sync. Each `[data-bronto-connector]` is an
  * `.ui-connector` SVG overlaying a positioned container; `data-from`/`data-to`
@@ -22,26 +60,60 @@ export function initConnectors({ root } = {}) {
   if (!hasDom()) return noop;
   const host = resolveHost(root);
   if (!host) return noop;
-  const connectors = collectHosts(host, '[data-bronto-connector]');
-  if (!connectors.length) return noop;
+
+  const fallbackRect = (svg, el) => {
+    const origin = svg.getBoundingClientRect();
+    const r = el.getBoundingClientRect();
+    const scaleX = origin.width ? (svg.clientWidth || origin.width) / origin.width : 1;
+    const scaleY = origin.height ? (svg.clientHeight || origin.height) / origin.height : 1;
+    return {
+      x: (r.left - origin.left) * scaleX,
+      y: (r.top - origin.top) * scaleY,
+      width: r.width * scaleX,
+      height: r.height * scaleY,
+    };
+  };
+
+  const rectInSvg = (svg, el) => {
+    const r = el.getBoundingClientRect();
+    const matrix = svg.getScreenCTM?.();
+    const view = svg.ownerDocument?.defaultView;
+    const Point = view?.DOMPoint;
+    if (!matrix || !Point) return fallbackRect(svg, el);
+
+    try {
+      const inverse = matrix.inverse();
+      const corners = [
+        new Point(r.left, r.top),
+        new Point(r.right, r.top),
+        new Point(r.right, r.bottom),
+        new Point(r.left, r.bottom),
+      ].map((point) => point.matrixTransform(inverse));
+      const xs = corners.map((point) => point.x);
+      const ys = corners.map((point) => point.y);
+      const left = Math.min(...xs);
+      const right = Math.max(...xs);
+      const top = Math.min(...ys);
+      const bottom = Math.max(...ys);
+      return { x: left, y: top, width: right - left, height: bottom - top };
+    } catch {
+      return fallbackRect(svg, el);
+    }
+  };
 
   const draw = () => {
+    const connectors = collectHosts(host, '[data-bronto-connector]');
     for (const svg of connectors) {
       const from = byIdInHost(host, svg.dataset.from);
       const to = byIdInHost(host, svg.dataset.to);
       if (!from || !to) continue;
-      const o = svg.getBoundingClientRect();
-      const rel = (el) => {
-        const r = el.getBoundingClientRect();
-        return { x: r.left - o.left, y: r.top - o.top, width: r.width, height: r.height };
-      };
       const {
         d,
         to: end,
         angle,
       } = connectRects({
-        fromRect: rel(from),
-        toRect: rel(to),
+        fromRect: rectInSvg(svg, from),
+        toRect: rectInSvg(svg, to),
         shape: svg.dataset.shape || 'straight',
         fromSide: svg.dataset.fromSide || undefined,
         toSide: svg.dataset.toSide || undefined,
@@ -74,6 +146,13 @@ export function initConnectors({ root } = {}) {
   };
 
   return bindOnce(host, 'connectors', () => {
+    const connectors = collectHosts(host, '[data-bronto-connector]');
+    if (!connectors.length) return noop;
+    const states = connectors.map((svg) => ({
+      svg,
+      path: snapshotPart(svg, '.ui-connector__path'),
+      end: snapshotPart(svg, '.ui-connector__end'),
+    }));
     draw();
     const view = host.defaultView || host.ownerDocument?.defaultView || null;
     const RO = view?.ResizeObserver;
@@ -93,6 +172,10 @@ export function initConnectors({ root } = {}) {
       ro?.disconnect();
       view?.removeEventListener('resize', draw);
       view?.removeEventListener('scroll', draw, true);
+      for (const state of states) {
+        restorePart(state.svg, '.ui-connector__path', state.path);
+        restorePart(state.svg, '.ui-connector__end', state.end);
+      }
     };
   });
 }

package/behaviors/crosshair.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"crosshair.d.ts","sourceRoot":"","sources":["crosshair.js"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH;;;;;;;;;;;;;;GAcG;AACH,yCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAmD3C;;;;;OAtEa,MAAM;;;;OACN,MAAM;;;;QACN,MAAM;;;;QACN,MAAM"}
+{"version":3,"file":"crosshair.d.ts","sourceRoot":"","sources":["crosshair.js"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH;;;;;;;;;;;;;;GAcG;AACH,yCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAiG3C;;;;;OApHa,MAAM;;;;OACN,MAAM;;;;QACN,MAAM;;;;QACN,MAAM"}

package/behaviors/crosshair.js

@@ -33,8 +33,49 @@ export function initCrosshair({ root } = {}) {
   const cleanups = [];
   for (const plot of plots) {
     const overlay = plot.querySelector('.ui-crosshair');
-    if (!overlay) continue;
+    let overlayState = null;
+    const rememberOverlay = () => {
+      if (!overlay || overlayState) return;
+      overlayState = {
+        active: overlay.classList.contains('is-active'),
+        x: {
+          value: overlay.style.getPropertyValue('--crosshair-x'),
+          priority: overlay.style.getPropertyPriority('--crosshair-x'),
+        },
+        y: {
+          value: overlay.style.getPropertyValue('--crosshair-y'),
+          priority: overlay.style.getPropertyPriority('--crosshair-y'),
+        },
+        inline: {
+          had: overlay.hasAttribute('data-readout-inline'),
+          value: overlay.getAttribute('data-readout-inline'),
+        },
+        block: {
+          had: overlay.hasAttribute('data-readout-block'),
+          value: overlay.getAttribute('data-readout-block'),
+        },
+      };
+    };
+    const restoreData = (name, state) => {
+      if (state.had) overlay.setAttribute(name, state.value);
+      else overlay.removeAttribute(name);
+    };
+    const restoreOverlay = () => {
+      if (!overlay || !overlayState) return;
+      overlay.classList.toggle('is-active', overlayState.active);
+      if (overlayState.x.value)
+        overlay.style.setProperty('--crosshair-x', overlayState.x.value, overlayState.x.priority);
+      else overlay.style.removeProperty('--crosshair-x');
+      if (overlayState.y.value)
+        overlay.style.setProperty('--crosshair-y', overlayState.y.value, overlayState.y.priority);
+      else overlay.style.removeProperty('--crosshair-y');
+      restoreData('data-readout-inline', overlayState.inline);
+      restoreData('data-readout-block', overlayState.block);
+      overlayState = null;
+    };
     const onMove = (e) => {
+      if (!overlay) return;
+      rememberOverlay();
       const r = plot.getBoundingClientRect();
       if (!r.width || !r.height) return;
       const x = e.clientX - r.left;
@@ -48,6 +89,8 @@ export function initCrosshair({ root } = {}) {
       const rtl = getComputedStyle(plot).direction === 'rtl';
       overlay.style.setProperty('--crosshair-x', `${rtl ? r.right - e.clientX : x}px`);
       overlay.style.setProperty('--crosshair-y', `${y}px`);
+      overlay.dataset.readoutInline = x / r.width > 0.5 ? 'before' : 'after';
+      overlay.dataset.readoutBlock = y / r.height > 0.5 ? 'above' : 'below';
       overlay.classList.add('is-active');
       plot.dispatchEvent(
         new CustomEvent('bronto:crosshair:move', {
@@ -57,16 +100,19 @@ export function initCrosshair({ root } = {}) {
       );
     };
     const onLeave = () => {
+      if (!overlay) return;
       overlay.classList.remove('is-active');
       plot.dispatchEvent(new CustomEvent('bronto:crosshair:leave', { bubbles: true }));
     };
     cleanups.push(
       bindOnce(plot, 'crosshair', () => {
+        if (!overlay) return noop;
         plot.addEventListener('pointermove', onMove);
         plot.addEventListener('pointerleave', onLeave);
         return () => {
           plot.removeEventListener('pointermove', onMove);
           plot.removeEventListener('pointerleave', onLeave);
+          restoreOverlay();
         };
       }),
     );

package/behaviors/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["dialog.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AACH,sCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAgE3C"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["dialog.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AACH,sCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA+E3C"}

package/behaviors/dialog.js

@@ -28,20 +28,32 @@ export function initDialog({ root } = {}) {
 
   const openFrom = (opener) => {
     const dlg = byIdInHost(host, opener.getAttribute('data-bronto-open'));
-    if (!dlg || typeof dlg.showModal !== 'function' || dlg.open) return;
-    managedDialogs.add(dlg);
+    if (!dlg || typeof dlg.showModal !== 'function' || dlg.open) return false;
+    const previous = focusRestorers.get(dlg);
+    if (previous) {
+      dlg.removeEventListener('close', previous);
+      focusRestorers.delete(dlg);
+    }
     const restoreFocus = () => {
       focusRestorers.delete(dlg);
       if (opener.isConnected && typeof opener.focus === 'function') opener.focus();
     };
+    try {
+      dlg.showModal();
+    } catch {
+      return false;
+    }
+    managedDialogs.add(dlg);
     focusRestorers.set(dlg, restoreFocus);
     dlg.addEventListener('close', restoreFocus, { once: true });
-    dlg.showModal();
+    return true;
   };
 
   const closeFrom = (closer) => {
     const dlg = closer.closest('dialog');
-    if (dlg && dlg.open && canManageDialog(dlg, closer)) dlg.close();
+    if (!dlg || !dlg.open || !canManageDialog(dlg, closer)) return false;
+    dlg.close();
+    return true;
   };
 
   const lightDismiss = (dlg) => {
@@ -52,23 +64,26 @@ export function initDialog({ root } = {}) {
       canManageDialog(dlg, dlg)
     ) {
       dlg.close();
+      return true;
     }
+    return false;
   };
 
   const onClick = (e) => {
-    const opener = e.target.closest('[data-bronto-open]');
+    const target = e.target;
+    const opener = target?.closest?.('[data-bronto-open]');
     if (opener && host.contains(opener)) {
-      openFrom(opener);
+      if (openFrom(opener)) e.preventDefault();
       return;
     }
-    const closer = e.target.closest('[data-bronto-close]');
+    const closer = target?.closest?.('[data-bronto-close]');
     if (closer) {
-      closeFrom(closer);
+      if (closeFrom(closer)) e.preventDefault();
       return;
     }
     // Light-dismiss: a click whose target is the <dialog> itself is the
     // backdrop (content sits in child elements).
-    lightDismiss(e.target);
+    if (lightDismiss(target)) e.preventDefault();
   };
   return bindOnce(host, 'dialog', () => {
     document.addEventListener('click', onClick);

package/behaviors/disclosure.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"disclosure.d.ts","sourceRoot":"","sources":["disclosure.js"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,0CAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAoB3C"}
+{"version":3,"file":"disclosure.d.ts","sourceRoot":"","sources":["disclosure.js"],"names":[],"mappings":"AAYA;;;;;;;GAOG;AACH,0CAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAwC3C"}

package/behaviors/disclosure.js

@@ -1,4 +1,14 @@
-import { hasDom, resolveHost, noop, bindOnce, byIdInHost } from './internal.js';
+import { hasDom, resolveHost, noop, bindOnce, byIdInHost, closestSafe } from './internal.js';
+
+const snapshotAttr = (el, name) => ({
+  had: el.hasAttribute(name),
+  value: el.getAttribute(name),
+});
+
+const restoreAttr = (el, name, state) => {
+  if (state.had) el.setAttribute(name, state.value);
+  else el.removeAttribute(name);
+};
 
 /**
  * Disclosure: a `[data-bronto-disclosure]` trigger toggles the element
@@ -12,18 +22,38 @@ export function initDisclosure({ root } = {}) {
   if (!hasDom()) return noop;
   const host = resolveHost(root);
   if (!host) return noop;
+  const triggerStates = new Map();
+  const panelStates = new Map();
+
+  const remember = (trigger, panel) => {
+    if (!triggerStates.has(trigger)) {
+      triggerStates.set(trigger, snapshotAttr(trigger, 'aria-expanded'));
+    }
+    if (!panelStates.has(panel)) {
+      panelStates.set(panel, snapshotAttr(panel, 'hidden'));
+    }
+  };
+
   const onClick = (e) => {
-    const trigger = e.target.closest('[data-bronto-disclosure]');
+    const trigger = closestSafe(e.target, '[data-bronto-disclosure]');
     if (!trigger || !host.contains(trigger)) return;
     const id = trigger.getAttribute('aria-controls');
     const panel = byIdInHost(host, id);
     if (!panel) return;
+    e.preventDefault();
+    remember(trigger, panel);
     const open = trigger.getAttribute('aria-expanded') === 'true';
     trigger.setAttribute('aria-expanded', String(!open));
     panel.hidden = open;
   };
   return bindOnce(host, 'disclosure', () => {
     host.addEventListener('click', onClick);
-    return () => host.removeEventListener('click', onClick);
+    return () => {
+      host.removeEventListener('click', onClick);
+      for (const [trigger, state] of triggerStates) restoreAttr(trigger, 'aria-expanded', state);
+      triggerStates.clear();
+      for (const [panel, state] of panelStates) restoreAttr(panel, 'hidden', state);
+      panelStates.clear();
+    };
   });
 }

package/behaviors/dismissible.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dismissible.d.ts","sourceRoot":"","sources":["dismissible.js"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,uCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAmB3C"}
+{"version":3,"file":"dismissible.d.ts","sourceRoot":"","sources":["dismissible.js"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,uCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAoB3C"}

package/behaviors/dismissible.js

@@ -13,11 +13,12 @@ export function dismissible({ root } = {}) {
   const host = resolveHost(root);
   if (!host) return noop;
   const onClick = (e) => {
-    const btn = e.target.closest('[data-bronto-dismiss]');
+    const btn = closestSafe(e.target, '[data-bronto-dismiss]');
     if (!btn || !host.contains(btn)) return;
     const sel = btn.getAttribute('data-bronto-dismiss');
-    const target = sel ? closestSafe(btn, sel) : btn.closest('[data-bronto-dismissible]');
+    const target = sel ? closestSafe(btn, sel) : closestSafe(btn, '[data-bronto-dismissible]');
     if (!target) return;
+    e.preventDefault();
     const ev = new CustomEvent('bronto:dismiss', { bubbles: true, cancelable: true });
     if (target.dispatchEvent(ev)) target.remove();
   };

package/behaviors/forms.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"forms.d.ts","sourceRoot":"","sources":["forms.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,8CAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAmL3C"}
+{"version":3,"file":"forms.d.ts","sourceRoot":"","sources":["forms.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,8CAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAsP3C"}

package/behaviors/forms.js

@@ -30,12 +30,59 @@ export function initFormValidation({ root } = {}) {
   const host = resolveHost(root);
   if (!host) return noop;
   let priorNoValidate = new Map();
+  let controlState = new Map();
+  let slotState = new Map();
+  let summaryState = new Map();
 
   const suppressNativeValidation = (form) => {
     if (!priorNoValidate.has(form)) priorNoValidate.set(form, form.noValidate);
     form.noValidate = true;
   };
 
+  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 rememberControl = (control) => {
+    if (!controlState.has(control)) {
+      controlState.set(control, snapshotAttrs(control, ['aria-invalid', 'aria-describedby', 'id']));
+    }
+  };
+
+  const rememberSlot = (slot) => {
+    if (!slotState.has(slot)) {
+      slotState.set(slot, {
+        attrs: snapshotAttrs(slot, ['id']),
+        text: slot.textContent,
+        hadErrorClass: slot.classList.contains('ui-hint--error'),
+      });
+    }
+  };
+
+  const rememberSummary = (summary) => {
+    if (!summaryState.has(summary)) {
+      summaryState.set(summary, {
+        attrs: snapshotAttrs(summary, ['role', 'tabindex']),
+        children: [...summary.childNodes],
+        hidden: summary.hidden,
+      });
+    }
+  };
+
   const ensureId = (el, prefix) => {
     if (!el.id) el.id = `${prefix}-${nextFieldUid()}`;
     return el.id;
@@ -75,8 +122,10 @@ export function initFormValidation({ root } = {}) {
 
   const validateField = (control) => {
     if (!control.willValidate) return true;
+    rememberControl(control);
     const ok = control.validity.valid;
     const slot = slotFor(control);
+    if (slot) rememberSlot(slot);
     // Decide the slot TYPE by the `[data-bronto-error]` attribute, NOT the
     // `.ui-hint` class: the canonical markup is `<p class="ui-hint"
     // data-bronto-error>`, which carries BOTH. Keying off `.ui-hint` sent that
@@ -124,6 +173,7 @@ export function initFormValidation({ root } = {}) {
   const refreshSummary = (form, invalid) => {
     const summary = form.querySelector('[data-bronto-error-summary]');
     if (!summary) return;
+    rememberSummary(summary);
     if (!invalid.length) {
       summary.hidden = true;
       summary.replaceChildren();
@@ -190,6 +240,9 @@ export function initFormValidation({ root } = {}) {
     // after init are still covered by the in-handler set.)
     const forms = collectHosts(host, '[data-bronto-validate]');
     priorNoValidate = new Map();
+    controlState = new Map();
+    slotState = new Map();
+    summaryState = new Map();
     for (const f of forms) {
       suppressNativeValidation(f);
     }
@@ -200,6 +253,20 @@ export function initFormValidation({ root } = {}) {
       host.removeEventListener('focusout', onBlur);
       for (const [f, v] of priorNoValidate) f.noValidate = v;
       priorNoValidate.clear();
+      for (const [summary, state] of summaryState) {
+        summary.replaceChildren(...state.children);
+        summary.hidden = state.hidden;
+        restoreAttrs(summary, state.attrs);
+      }
+      summaryState.clear();
+      for (const [slot, state] of slotState) {
+        slot.textContent = state.text;
+        slot.classList.toggle('ui-hint--error', state.hadErrorClass);
+        restoreAttrs(slot, state.attrs);
+      }
+      slotState.clear();
+      for (const [control, attrs] of controlState) restoreAttrs(control, attrs);
+      controlState.clear();
     };
   });
 }

package/behaviors/glyph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"glyph.d.ts","sourceRoot":"","sources":["glyph.js"],"names":[],"mappings":"AAeA;;;;;;;;;;;;;;;;;;GAkBG;AACH,wCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAyJ3C"}
+{"version":3,"file":"glyph.d.ts","sourceRoot":"","sources":["glyph.js"],"names":[],"mappings":"AA6BA;;;;;;;;;;;;;;;;;;GAkBG;AACH,wCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA0J3C"}