@ponchia/ui 0.6.10 → 0.6.11

package/behaviors/connectors.js

@@ -1,4 +1,4 @@
-import { hasDom, resolveHost, noop, bindOnce, byIdInHost, collectHosts } from './internal.js';
+import { hasDom, resolveHost, noop, bindOnce, collectHosts } from './internal.js';
 import { connectRects, arrowHead, dotMark } from '../connectors/index.js';
 
 const SVGNS = 'http://www.w3.org/2000/svg';
@@ -77,6 +77,46 @@ const syncConnectorEnd = (svg, end, angle) => {
   );
 };
 
+const CONNECTOR_SHAPES = ['straight', 'elbow', 'curve'];
+const CONNECTOR_SIDES = ['top', 'right', 'bottom', 'left', 'center'];
+const CONNECTOR_SHAPE_VALUES = new Set(CONNECTOR_SHAPES);
+const CONNECTOR_SIDE_VALUES = new Set(CONNECTOR_SIDES);
+
+const clearConnectorParts = (svg) => {
+  svg.querySelector('.ui-connector__path')?.remove();
+  svg.querySelector('.ui-connector__end')?.remove();
+};
+
+const invalidConnectorOptionDetails = (svg) => {
+  const details = [];
+  const shape = svg.dataset.shape;
+  if (shape && !CONNECTOR_SHAPE_VALUES.has(shape)) {
+    details.push(`data-shape="${shape}" (allowed: ${CONNECTOR_SHAPES.join('/')})`);
+  }
+  const fromSide = svg.dataset.fromSide;
+  if (fromSide && !CONNECTOR_SIDE_VALUES.has(fromSide)) {
+    details.push(`data-from-side="${fromSide}" (allowed: ${CONNECTOR_SIDES.join('/')})`);
+  }
+  const toSide = svg.dataset.toSide;
+  if (toSide && !CONNECTOR_SIDE_VALUES.has(toSide)) {
+    details.push(`data-to-side="${toSide}" (allowed: ${CONNECTOR_SIDES.join('/')})`);
+  }
+  return details;
+};
+
+const warnInvalidConnectorOptions = (svg, warnedInvalidOptions) => {
+  const details = invalidConnectorOptionDetails(svg);
+  if (!details.length || typeof console === 'undefined') return;
+  const signature = details.join('|');
+  if (warnedInvalidOptions.get(svg) === signature) return;
+  warnedInvalidOptions.set(svg, signature);
+  console.warn(
+    `[bronto] initConnectors(): invalid connector option ${details.join(
+      ', ',
+    )} - skipping connector.`,
+  );
+};
+
 /**
  * Draw + keep leader lines in sync. Each `[data-bronto-connector]` is an
  * `.ui-connector` SVG overlaying a positioned container; `data-from`/`data-to`
@@ -137,12 +177,29 @@ export function initConnectors({ root } = {}) {
     }
   };
 
-  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 warnedInvalidOptions = new WeakMap();
+  const endpointInHost = (el) => host.nodeType === 9 || host.contains(el);
+  const endpointStillInHost = (el) => host.contains?.(el) ?? endpointInHost(el);
+  const cacheEndpoint = (endpoints, el) => {
+    if (el?.id && !endpoints.has(el.id) && endpointInHost(el)) endpoints.set(el.id, el);
+  };
+  const endpointCache = () => {
+    const endpoints = new Map();
+    if (host.nodeType !== 9) cacheEndpoint(endpoints, host);
+    for (const el of host.querySelectorAll?.('[id]') || []) cacheEndpoint(endpoints, el);
+    return endpoints;
+  };
+  const endpointById = (endpoints, id) => {
+    if (!id) return null;
+    const el = endpoints.get(id) || null;
+    return el && endpointStillInHost(el) ? el : null;
+  };
+
+  const measureConnector = (endpoints, svg) => {
+    const from = endpointById(endpoints, svg.dataset.from);
+    const to = endpointById(endpoints, svg.dataset.to);
+    if (!from || !to) return { svg, skipped: true };
+    try {
       const {
         d,
         to: end,
@@ -154,40 +211,90 @@ export function initConnectors({ root } = {}) {
         fromSide: svg.dataset.fromSide || undefined,
         toSide: svg.dataset.toSide || undefined,
       });
+      return { svg, d, end, angle };
+    } catch {
+      return { svg, invalid: true };
+    }
+  };
+
+  const draw = (endpoints, connectors) => {
+    const measurements = connectors.map((svg) => measureConnector(endpoints, svg));
+    for (const result of measurements) {
+      const { svg } = result;
+      if (result.skipped || result.invalid) {
+        clearConnectorParts(svg);
+        if (result.invalid) warnInvalidConnectorOptions(svg, warnedInvalidOptions);
+        continue;
+      }
       const path = upsertConnectorPart(svg, '.ui-connector__path', 'ui-connector__path');
-      path.setAttribute('d', d);
+      path.setAttribute('d', result.d);
       syncDrawPathLength(svg, path);
-      syncConnectorEnd(svg, end, angle);
+      syncConnectorEnd(svg, result.end, result.angle);
     }
   };
 
+  const observeEndpoint = (ro, el) => {
+    if (el && endpointStillInHost(el)) ro.observe(el);
+  };
+
   return bindOnce(host, 'connectors', () => {
     const connectors = collectHosts(host, '[data-bronto-connector]');
     if (!connectors.length) return noop;
+    const endpoints = endpointCache();
     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 raf =
+      view?.requestAnimationFrame?.bind(view) || globalThis.requestAnimationFrame?.bind(globalThis);
+    const caf =
+      view?.cancelAnimationFrame?.bind(view) || globalThis.cancelAnimationFrame?.bind(globalThis);
+    let frame = null;
+    let framePending = false;
+    let stopped = false;
+
+    const drawNow = () => {
+      if (!stopped) draw(endpoints, connectors);
+    };
+    const scheduleDraw = () => {
+      if (stopped || framePending) return;
+      if (!raf) {
+        drawNow();
+        return;
+      }
+      framePending = true;
+      frame = raf(() => {
+        framePending = false;
+        frame = null;
+        drawNow();
+      });
+    };
+    const cancelScheduledDraw = () => {
+      if (framePending && caf) caf(frame);
+      framePending = false;
+      frame = null;
+    };
+
+    drawNow();
     const RO = view?.ResizeObserver;
-    const ro = RO ? new RO(draw) : null;
+    const ro = RO ? new RO(scheduleDraw) : null;
     if (ro) {
       for (const svg of connectors) {
         if (svg.parentElement) ro.observe(svg.parentElement);
-        const f = byIdInHost(host, svg.dataset.from);
-        const t = byIdInHost(host, svg.dataset.to);
-        if (f) ro.observe(f);
-        if (t) ro.observe(t);
+        observeEndpoint(ro, endpointById(endpoints, svg.dataset.from));
+        observeEndpoint(ro, endpointById(endpoints, svg.dataset.to));
       }
     }
-    view?.addEventListener('resize', draw);
-    view?.addEventListener('scroll', draw, true);
+    view?.addEventListener('resize', scheduleDraw);
+    view?.addEventListener('scroll', scheduleDraw, true);
     return () => {
+      stopped = true;
+      cancelScheduledDraw();
       ro?.disconnect();
-      view?.removeEventListener('resize', draw);
-      view?.removeEventListener('scroll', draw, true);
+      view?.removeEventListener('resize', scheduleDraw);
+      view?.removeEventListener('scroll', scheduleDraw, 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,CAiG3C;;;;;OApHa,MAAM;;;;OACN,MAAM;;;;QACN,MAAM;;;;QACN,MAAM"}
+{"version":3,"file":"crosshair.d.ts","sourceRoot":"","sources":["crosshair.js"],"names":[],"mappings":"AAIA;;;;;;GAMG;AAEH;;;;;;;;;;;;;;GAcG;AACH,yCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA8J3C;;;;;OAjLa,MAAM;;;;OACN,MAAM;;;;QACN,MAAM;;;;QACN,MAAM"}

package/behaviors/crosshair.js

@@ -1,5 +1,7 @@
 import { hasDom, resolveHost, noop, bindOnce, collectHosts } from './internal.js';
 
+const rectRight = (rect) => rect.right ?? rect.left + rect.width;
+
 /**
  * @typedef {object} CrosshairMoveDetail
  * @property {number} x Pointer x within the plot, in pixels.
@@ -34,6 +36,56 @@ export function initCrosshair({ root } = {}) {
   for (const plot of plots) {
     const overlay = plot.querySelector('.ui-crosshair');
     let overlayState = null;
+    let geometry = null;
+    let active = overlay?.classList.contains('is-active') ?? false;
+    let writtenX = null;
+    let writtenY = null;
+    let writtenInline = overlay?.dataset.readoutInline ?? null;
+    let writtenBlock = overlay?.dataset.readoutBlock ?? null;
+    const view = plot.ownerDocument?.defaultView || null;
+    const invalidateGeometry = () => {
+      geometry = null;
+    };
+    const readGeometry = () => {
+      const overlayRect = overlay.getBoundingClientRect();
+      const r =
+        overlayRect.width && overlayRect.height ? overlayRect : plot.getBoundingClientRect();
+      if (!r.width || !r.height) return null;
+      geometry = {
+        left: r.left,
+        right: rectRight(r),
+        top: r.top,
+        width: r.width,
+        height: r.height,
+        rtl: view?.getComputedStyle?.(overlay).direction === 'rtl',
+      };
+      return geometry;
+    };
+    const currentGeometry = () => geometry || readGeometry();
+    const writeOverlay = (y, logicalX, inline, block) => {
+      const xValue = `${logicalX}px`;
+      const yValue = `${y}px`;
+      if (writtenX !== xValue) {
+        overlay.style.setProperty('--crosshair-x', xValue);
+        writtenX = xValue;
+      }
+      if (writtenY !== yValue) {
+        overlay.style.setProperty('--crosshair-y', yValue);
+        writtenY = yValue;
+      }
+      if (writtenInline !== inline) {
+        overlay.dataset.readoutInline = inline;
+        writtenInline = inline;
+      }
+      if (writtenBlock !== block) {
+        overlay.dataset.readoutBlock = block;
+        writtenBlock = block;
+      }
+      if (!active) {
+        overlay.classList.add('is-active');
+        active = true;
+      }
+    };
     const rememberOverlay = () => {
       if (!overlay || overlayState) return;
       overlayState = {
@@ -71,13 +123,19 @@ export function initCrosshair({ root } = {}) {
       else overlay.style.removeProperty('--crosshair-y');
       restoreData('data-readout-inline', overlayState.inline);
       restoreData('data-readout-block', overlayState.block);
+      active = overlayState.active;
+      writtenX = overlayState.x.value || null;
+      writtenY = overlayState.y.value || null;
+      writtenInline = overlayState.inline.had ? overlayState.inline.value : null;
+      writtenBlock = overlayState.block.had ? overlayState.block.value : null;
+      invalidateGeometry();
       overlayState = null;
     };
     const onMove = (e) => {
       if (!overlay) return;
       rememberOverlay();
-      const r = plot.getBoundingClientRect();
-      if (!r.width || !r.height) return;
+      const r = currentGeometry();
+      if (!r) return;
       const x = e.clientX - r.left;
       const y = e.clientY - r.top;
       // The CSS positions the vertical rule / readout with a *logical* inset
@@ -86,12 +144,12 @@ export function initCrosshair({ root } = {}) {
       // Emitting the physical x instead made the RTL rule land off-plot. The
       // public `detail.x`/`fx` stay physical-from-left so host scale-mapping
       // keeps one stable coordinate space regardless of direction.
-      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');
+      writeOverlay(
+        y,
+        r.rtl ? r.right - e.clientX : x,
+        x / r.width > 0.5 ? 'before' : 'after',
+        y / r.height > 0.5 ? 'above' : 'below',
+      );
       plot.dispatchEvent(
         new CustomEvent('bronto:crosshair:move', {
           bubbles: true,
@@ -102,6 +160,7 @@ export function initCrosshair({ root } = {}) {
     const onLeave = () => {
       if (!overlay) return;
       overlay.classList.remove('is-active');
+      active = false;
       plot.dispatchEvent(new CustomEvent('bronto:crosshair:leave', { bubbles: true }));
     };
     cleanups.push(
@@ -109,9 +168,13 @@ export function initCrosshair({ root } = {}) {
         if (!overlay) return noop;
         plot.addEventListener('pointermove', onMove);
         plot.addEventListener('pointerleave', onLeave);
+        view?.addEventListener('resize', invalidateGeometry);
+        view?.addEventListener('scroll', invalidateGeometry, true);
         return () => {
           plot.removeEventListener('pointermove', onMove);
           plot.removeEventListener('pointerleave', onLeave);
+          view?.removeEventListener('resize', invalidateGeometry);
+          view?.removeEventListener('scroll', invalidateGeometry, true);
           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,CA+E3C"}
+{"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,CAgG3C"}

package/behaviors/dialog.js

@@ -22,7 +22,9 @@ export function initDialog({ root } = {}) {
   if (!hasDom()) return noop;
   const host = resolveHost(root);
   if (!host) return noop;
-  const managedDialogs = new WeakSet();
+  const doc = host.nodeType === 9 ? host : host.ownerDocument;
+  if (!doc) return noop;
+  const managedDialogs = new Set();
   const focusRestorers = new Map();
   const canManageDialog = (dlg, origin) => host.contains(origin) || managedDialogs.has(dlg);
 
@@ -33,9 +35,11 @@ export function initDialog({ root } = {}) {
     if (previous) {
       dlg.removeEventListener('close', previous);
       focusRestorers.delete(dlg);
+      managedDialogs.delete(dlg);
     }
     const restoreFocus = () => {
       focusRestorers.delete(dlg);
+      managedDialogs.delete(dlg);
       if (opener.isConnected && typeof opener.focus === 'function') opener.focus();
     };
     try {
@@ -86,13 +90,26 @@ export function initDialog({ root } = {}) {
     if (lightDismiss(target)) e.preventDefault();
   };
   return bindOnce(host, 'dialog', () => {
-    document.addEventListener('click', onClick);
+    doc.addEventListener('click', onClick);
     return () => {
-      document.removeEventListener('click', onClick);
+      doc.removeEventListener('click', onClick);
       for (const [dlg, restoreFocus] of focusRestorers) {
+        // Only pull focus back to the opener when it is currently INSIDE this
+        // dialog — closing would otherwise strand it on <body>. If the app has
+        // already moved focus elsewhere, leave it where it is.
+        const focusInside = dlg.contains(doc.activeElement);
         dlg.removeEventListener('close', restoreFocus);
+        if (dlg.open) {
+          try {
+            dlg.close();
+          } catch {
+            /* already closed */
+          }
+        }
+        if (focusInside) restoreFocus();
       }
       focusRestorers.clear();
+      managedDialogs.clear();
     };
   });
 }

package/behaviors/disclosure.d.ts.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"disclosure.d.ts","sourceRoot":"","sources":["disclosure.js"],"names":[],"mappings":"AA+BA;;;;;;;GAOG;AACH,0CAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAkD3C"}

package/behaviors/disclosure.js

@@ -1,4 +1,15 @@
-import { hasDom, resolveHost, noop, bindOnce, byIdInHost, closestSafe } from './internal.js';
+import {
+  hasDom,
+  resolveHost,
+  noop,
+  bindOnce,
+  byIdInHost,
+  closestSafe,
+  collectHosts,
+} from './internal.js';
+
+const handledDisclosureEvents = new WeakSet();
+const warnedMissingTargets = new WeakSet();
 
 const snapshotAttr = (el, name) => ({
   had: el.hasAttribute(name),
@@ -10,6 +21,14 @@ const restoreAttr = (el, name, state) => {
   else el.removeAttribute(name);
 };
 
+const warnMissingTarget = (trigger, id) => {
+  if (warnedMissingTargets.has(trigger) || typeof console === 'undefined') return;
+  warnedMissingTargets.add(trigger);
+  console.warn(
+    `[bronto] initDisclosure(): no panel found for aria-controls="${id || ''}" - disclosure trigger stays inert.`,
+  );
+};
+
 /**
  * Disclosure: a `[data-bronto-disclosure]` trigger toggles the element
  * referenced by its `aria-controls` id, keeping `aria-expanded` and the
@@ -35,16 +54,26 @@ export function initDisclosure({ root } = {}) {
   };
 
   const onClick = (e) => {
+    if (handledDisclosureEvents.has(e)) return;
     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;
+    if (!panel) {
+      warnMissingTarget(trigger, id);
+      return;
+    }
+    handledDisclosureEvents.add(e);
     e.preventDefault();
-    remember(trigger, panel);
-    const open = trigger.getAttribute('aria-expanded') === 'true';
-    trigger.setAttribute('aria-expanded', String(!open));
-    panel.hidden = open;
+    const nextOpen = panel.hidden;
+    const triggers = collectHosts(host, '[data-bronto-disclosure]').filter(
+      (el) => el.getAttribute('aria-controls') === id,
+    );
+    for (const el of triggers) {
+      remember(el, panel);
+      el.setAttribute('aria-expanded', String(nextOpen));
+    }
+    panel.hidden = !nextOpen;
   };
   return bindOnce(host, 'disclosure', () => {
     host.addEventListener('click', onClick);

package/behaviors/dismissible.js

@@ -15,7 +15,7 @@ export function dismissible({ root } = {}) {
   const onClick = (e) => {
     const btn = closestSafe(e.target, '[data-bronto-dismiss]');
     if (!btn || !host.contains(btn)) return;
-    const sel = btn.getAttribute('data-bronto-dismiss');
+    const sel = btn.getAttribute('data-bronto-dismiss')?.trim();
     const target = sel ? closestSafe(btn, sel) : closestSafe(btn, '[data-bronto-dismissible]');
     if (!target) return;
     e.preventDefault();

package/behaviors/forms.d.ts

@@ -1,3 +1,12 @@
+/**
+ * @typedef {object} FormValidationOpts
+ * @property {Document | Element | null} [root]
+ *   Event-delegation root; default: `document`.
+ * @property {string} [summaryTitle]
+ *   Localized validation-summary title. A summary/form
+ *   `data-bronto-error-summary-title` attribute overrides it, and an authored
+ *   `.ui-error-summary__title` child is preserved.
+ */
 /**
  * Accessible form validation glue for `<form data-bronto-validate>`.
  * Progressive enhancement over the native Constraint Validation API —
@@ -20,8 +29,20 @@
  * Pure enhancement: with JS off the form still submits and the browser
  * validates natively. SSR-safe, idempotent; returns a cleanup function.
  *
- * @param {import('./internal.js').DelegateOpts} [opts]
+ * @param {FormValidationOpts} [opts]
  * @returns {import('./internal.js').Cleanup}
  */
-export function initFormValidation({ root }?: import("./internal.js").DelegateOpts): import("./internal.js").Cleanup;
+export function initFormValidation({ root, summaryTitle }?: FormValidationOpts): import("./internal.js").Cleanup;
+export type FormValidationOpts = {
+    /**
+     * Event-delegation root; default: `document`.
+     */
+    root?: Document | Element | null | undefined;
+    /**
+     * Localized validation-summary title. A summary/form
+     * `data-bronto-error-summary-title` attribute overrides it, and an authored
+     * `.ui-error-summary__title` child is preserved.
+     */
+    summaryTitle?: string | undefined;
+};
 //# sourceMappingURL=forms.d.ts.map

package/behaviors/forms.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"forms.d.ts","sourceRoot":"","sources":["forms.js"],"names":[],"mappings":"AAiMA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,8CAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA2D3C"}
+{"version":3,"file":"forms.d.ts","sourceRoot":"","sources":["forms.js"],"names":[],"mappings":"AA8QA;;;;;;;;GAQG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,4DAHW,kBAAkB,GAChB,OAAO,eAAe,EAAE,OAAO,CA4D3C"}

package/behaviors/forms.js

@@ -59,6 +59,7 @@ function rememberSummary(summary, state) {
       attrs: snapshotAttrs(summary, ['role', 'tabindex']),
       children: [...summary.childNodes],
       hidden: summary.hidden,
+      title: summary.querySelector('.ui-error-summary__title')?.cloneNode(true) ?? null,
     });
   }
 }
@@ -141,12 +142,60 @@ function controlsOf(form) {
   );
 }
 
+function textOf(el) {
+  return el?.textContent?.replace(/\s+/g, ' ').trim() || '';
+}
+
+function fieldsetLegend(control, field) {
+  return (
+    textOf(field?.querySelector('legend')) ||
+    textOf(control.closest('fieldset')?.querySelector('legend'))
+  );
+}
+
+function labelledbyText(control) {
+  const doc = control.ownerDocument || document;
+  return (control.getAttribute('aria-labelledby') || '')
+    .split(/\s+/)
+    .map((id) => textOf(doc.getElementById(id)))
+    .filter(Boolean)
+    .join(' ');
+}
+
+function labelsText(control) {
+  return control.labels
+    ? [...control.labels]
+        .map((label) => textOf(label))
+        .filter(Boolean)
+        .join(' ')
+    : '';
+}
+
+function controlLabel(control) {
+  const field = control.closest('.ui-field');
+  // A radio's accessible name is its group legend when present.
+  if (control.type === 'radio') {
+    const groupLegend = fieldsetLegend(control, field);
+    if (groupLegend) return groupLegend;
+  }
+  return (
+    labelledbyText(control) ||
+    control.getAttribute('aria-label')?.trim() ||
+    labelsText(control) ||
+    textOf(field?.querySelector('label, .ui-label')) ||
+    fieldsetLegend(control, field) ||
+    (control.getAttribute('name') || control.name || '').trim()
+  );
+}
+
 function summaryItem(control) {
   const id = ensureId(control, 'bronto-field');
   const li = document.createElement('li');
   const a = document.createElement('a');
+  const label = controlLabel(control);
+  const message = control.validationMessage;
   a.href = `#${id}`;
-  a.textContent = control.validationMessage;
+  a.textContent = label ? `${label}: ${message}` : message;
   a.addEventListener('click', (e) => {
     e.preventDefault();
     control.focus();
@@ -155,7 +204,37 @@ function summaryItem(control) {
   return li;
 }
 
-function refreshSummary(form, invalid, state) {
+function summaryControls(form, invalid) {
+  const radioNames = new Set();
+  const controls = [];
+  for (const control of invalid) {
+    if (control.form === form && control.type === 'radio' && control.name) {
+      if (radioNames.has(control.name)) continue;
+      radioNames.add(control.name);
+    }
+    controls.push(control);
+  }
+  return controls;
+}
+
+function nonEmpty(value) {
+  return typeof value === 'string' ? value.trim() : '';
+}
+
+function summaryTitleNode(form, summary, state, fallbackTitle) {
+  const authored = state.summaryState.get(summary)?.title;
+  if (authored) return authored.cloneNode(true);
+  const title = document.createElement('p');
+  title.className = 'ui-error-summary__title';
+  title.textContent =
+    nonEmpty(summary.getAttribute('data-bronto-error-summary-title')) ||
+    nonEmpty(form.getAttribute('data-bronto-error-summary-title')) ||
+    nonEmpty(fallbackTitle) ||
+    'There is a problem';
+  return title;
+}
+
+function refreshSummary(form, invalid, state, summaryTitle) {
   const summary = form.querySelector('[data-bronto-error-summary]');
   if (!summary) return;
   rememberSummary(summary, state);
@@ -164,12 +243,10 @@ function refreshSummary(form, invalid, state) {
     summary.replaceChildren();
     return;
   }
-  const title = document.createElement('p');
-  title.className = 'ui-error-summary__title';
-  title.textContent = 'There is a problem';
+  const title = summaryTitleNode(form, summary, state, summaryTitle);
   const list = document.createElement('ul');
   list.className = 'ui-error-summary__list';
-  list.append(...invalid.map(summaryItem));
+  list.append(...summaryControls(form, invalid).map(summaryItem));
   summary.replaceChildren(title, list);
   summary.setAttribute('role', 'alert');
   summary.tabIndex = -1;
@@ -191,6 +268,16 @@ function restoreValidationState(state) {
   for (const [control, attrs] of state.controlState) restoreAttrs(control, attrs);
 }
 
+/**
+ * @typedef {object} FormValidationOpts
+ * @property {Document | Element | null} [root]
+ *   Event-delegation root; default: `document`.
+ * @property {string} [summaryTitle]
+ *   Localized validation-summary title. A summary/form
+ *   `data-bronto-error-summary-title` attribute overrides it, and an authored
+ *   `.ui-error-summary__title` child is preserved.
+ */
+
 /**
  * Accessible form validation glue for `<form data-bronto-validate>`.
  * Progressive enhancement over the native Constraint Validation API —
@@ -213,10 +300,10 @@ function restoreValidationState(state) {
  * Pure enhancement: with JS off the form still submits and the browser
  * validates natively. SSR-safe, idempotent; returns a cleanup function.
  *
- * @param {import('./internal.js').DelegateOpts} [opts]
+ * @param {FormValidationOpts} [opts]
  * @returns {import('./internal.js').Cleanup}
  */
-export function initFormValidation({ root } = {}) {
+export function initFormValidation({ root, summaryTitle } = {}) {
   if (!hasDom()) return noop;
   const host = resolveHost(root);
   if (!host) return noop;
@@ -227,7 +314,7 @@ export function initFormValidation({ root } = {}) {
     if (!form) return;
     suppressNativeValidation(form, state);
     const invalid = controlsOf(form).filter((control) => !validateField(control, state));
-    refreshSummary(form, invalid, state);
+    refreshSummary(form, invalid, state, summaryTitle);
     if (invalid.length) {
       event.preventDefault();
       const summary = form.querySelector('[data-bronto-error-summary]');
@@ -248,6 +335,7 @@ export function initFormValidation({ root } = {}) {
         form,
         controlsOf(form).filter((candidate) => !candidate.validity.valid),
         state,
+        summaryTitle,
       );
     }
   };

package/behaviors/glyph.d.ts.map

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