@ponchia/ui 0.6.7 → 0.6.9

package/behaviors/connectors.js

@@ -2,6 +2,80 @@ import { hasDom, resolveHost, noop, bindOnce, byIdInHost, collectHosts } from '.
 import { connectRects, arrowHead, dotMark } from '../connectors/index.js';
 
 const SVGNS = 'http://www.w3.org/2000/svg';
+const NORMALIZED_PATH_LENGTH = '1';
+const END_DOT_RADIUS = 3;
+const END_ARROW_SIZE = 8;
+
+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;
+};
+
+const upsertConnectorPart = (svg, selector, className) => {
+  let part = svg.querySelector(selector);
+  if (part) return part;
+  part = document.createElementNS(SVGNS, 'path');
+  part.setAttribute('class', className);
+  svg.appendChild(part);
+  return part;
+};
+
+const syncDrawPathLength = (svg, path) => {
+  // pathLength normalises the draw animation, but it would also reframe a
+  // dashed line's user-unit dasharray — so only set it for draw connectors.
+  if (svg.classList.contains('ui-connector--draw')) {
+    path.setAttribute('pathLength', NORMALIZED_PATH_LENGTH);
+  } else {
+    path.removeAttribute('pathLength');
+  }
+};
+
+const syncConnectorEnd = (svg, end, angle) => {
+  const kind = svg.dataset.end || 'arrow';
+  const cap = svg.querySelector('.ui-connector__end');
+  if (kind === 'none') {
+    cap?.remove();
+    return;
+  }
+  const next = cap || upsertConnectorPart(svg, '.ui-connector__end', 'ui-connector__end');
+  next.setAttribute(
+    'd',
+    kind === 'dot' ? dotMark(end, END_DOT_RADIUS) : arrowHead(end, angle, END_ARROW_SIZE),
+  );
+};
 
 /**
  * Draw + keep leader lines in sync. Each `[data-bronto-connector]` is an
@@ -22,58 +96,79 @@ 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,
       });
-      let path = svg.querySelector('.ui-connector__path');
-      if (!path) {
-        path = document.createElementNS(SVGNS, 'path');
-        path.setAttribute('class', 'ui-connector__path');
-        svg.appendChild(path);
-      }
+      const path = upsertConnectorPart(svg, '.ui-connector__path', 'ui-connector__path');
       path.setAttribute('d', d);
-      // pathLength="1" normalises the draw animation, but it would also reframe
-      // a dashed line's user-unit dasharray — so only set it for draw connectors.
-      if (svg.classList.contains('ui-connector--draw')) path.setAttribute('pathLength', '1');
-      else path.removeAttribute('pathLength');
-
-      const kind = svg.dataset.end || 'arrow';
-      let cap = svg.querySelector('.ui-connector__end');
-      if (kind === 'none') {
-        cap?.remove();
-        continue;
-      }
-      if (!cap) {
-        cap = document.createElementNS(SVGNS, 'path');
-        cap.setAttribute('class', 'ui-connector__end');
-        svg.appendChild(cap);
-      }
-      cap.setAttribute('d', kind === 'dot' ? dotMark(end, 3) : arrowHead(end, angle, 8));
+      syncDrawPathLength(svg, path);
+      syncConnectorEnd(svg, end, angle);
     }
   };
 
   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 +188,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":"AAiMA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,8CAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA2D3C"}