npm - @ponchia/ui - Versions diffs - 0.6.7 → 0.6.9 - Mend

@ponchia/ui 0.6.7 → 0.6.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (111) hide show

package/CHANGELOG.md +129 -4
package/README.md +4 -4
package/annotations/index.d.ts.map +1 -1
package/annotations/index.js +26 -9
package/behaviors/carousel.d.ts.map +1 -1
package/behaviors/carousel.js +145 -49
package/behaviors/combobox.d.ts.map +1 -1
package/behaviors/combobox.js +220 -92
package/behaviors/command.d.ts.map +1 -1
package/behaviors/command.js +74 -14
package/behaviors/connectors.d.ts.map +1 -1
package/behaviors/connectors.js +131 -32
package/behaviors/crosshair.d.ts.map +1 -1
package/behaviors/crosshair.js +47 -1
package/behaviors/dialog.d.ts.map +1 -1
package/behaviors/dialog.js +24 -9
package/behaviors/disclosure.d.ts.map +1 -1
package/behaviors/disclosure.js +33 -3
package/behaviors/dismissible.d.ts.map +1 -1
package/behaviors/dismissible.js +3 -2
package/behaviors/forms.d.ts.map +1 -1
package/behaviors/forms.js +211 -140
package/behaviors/glyph.d.ts.map +1 -1
package/behaviors/glyph.js +172 -132
package/behaviors/inert.d.ts +1 -1
package/behaviors/inert.d.ts.map +1 -1
package/behaviors/inert.js +4 -3
package/behaviors/internal.d.ts.map +1 -1
package/behaviors/internal.js +4 -3
package/behaviors/legend.d.ts +0 -5
package/behaviors/legend.d.ts.map +1 -1
package/behaviors/legend.js +45 -13
package/behaviors/menu.d.ts.map +1 -1
package/behaviors/menu.js +13 -8
package/behaviors/modal.d.ts.map +1 -1
package/behaviors/modal.js +77 -19
package/behaviors/popover.d.ts +4 -3
package/behaviors/popover.d.ts.map +1 -1
package/behaviors/popover.js +94 -14
package/behaviors/sources.d.ts.map +1 -1
package/behaviors/sources.js +14 -2
package/behaviors/splitter.d.ts.map +1 -1
package/behaviors/splitter.js +149 -110
package/behaviors/spotlight.d.ts.map +1 -1
package/behaviors/spotlight.js +28 -2
package/behaviors/table.d.ts +1 -1
package/behaviors/table.d.ts.map +1 -1
package/behaviors/table.js +108 -17
package/behaviors/tabs.d.ts.map +1 -1
package/behaviors/tabs.js +84 -20
package/behaviors/theme.d.ts.map +1 -1
package/behaviors/theme.js +25 -5
package/behaviors/toast.js +5 -5
package/classes/index.d.ts +15 -2
package/classes/index.js +48 -35
package/connectors/index.d.ts +41 -8
package/connectors/index.d.ts.map +1 -1
package/connectors/index.js +74 -19
package/css/annotations.css +12 -0
package/css/app.css +3 -4
package/css/base.css +1 -1
package/css/content.css +3 -3
package/css/crosshair.css +27 -2
package/css/disclosure.css +3 -3
package/css/dots.css +4 -4
package/css/feedback.css +8 -37
package/css/forms.css +9 -12
package/css/legend.css +1 -1
package/css/marks.css +1 -1
package/css/motion.css +6 -6
package/css/navigation.css +12 -0
package/css/overlay.css +5 -7
package/css/primitives.css +14 -16
package/css/sidenote.css +2 -2
package/css/table.css +2 -2
package/css/tokens.css +16 -0
package/dist/bronto.css +1 -1
package/dist/css/analytical.css +1 -1
package/dist/css/annotations.css +1 -1
package/dist/css/crosshair.css +1 -1
package/dist/css/feedback.css +1 -1
package/dist/css/navigation.css +1 -1
package/dist/css/report-kit.css +1 -1
package/dist/css/tokens.css +1 -1
package/docs/adr/0001-color-system.md +3 -2
package/docs/annotations.md +21 -1
package/docs/architecture.md +74 -13
package/docs/command.md +4 -1
package/docs/connectors.md +16 -0
package/docs/crosshair.md +1 -1
package/docs/dots.md +4 -1
package/docs/glyphs.md +11 -0
package/docs/interop/react-flow.md +89 -0
package/docs/migrations/0.2-to-0.3.md +1 -1
package/docs/package-contract.md +7 -5
package/docs/reporting.md +23 -12
package/docs/stability.md +85 -9
package/docs/theming.md +2 -2
package/docs/usage.md +16 -2
package/docs/vega.md +4 -4
package/glyphs/glyphs.js +43 -33
package/llms.txt +19 -8
package/package.json +23 -4
package/schemas/report-claims.v1.schema.json +1 -1
package/svelte/index.d.ts +71 -45
package/svelte/index.d.ts.map +1 -1
package/svelte/index.js +29 -2
package/tokens/index.js +2 -2
package/vue/index.d.ts +42 -5
package/vue/index.d.ts.map +1 -1
package/vue/index.js +32 -1

package/behaviors/modal.js CHANGED Viewed

@@ -1,4 +1,56 @@
-import { hasDom, resolveHost, noop, bindOnce, collectHosts, focusInto } from './internal.js';
+import {
+  hasDom,
+  resolveHost,
+  noop,
+  bindOnce,
+  collectHosts,
+  focusInto,
+  closestSafe,
+} from './internal.js';
+function insideOpenPopover(target, modal) {
+  const classPanel = closestSafe(target, '.ui-popover.is-open');
+  if (classPanel && modal.contains(classPanel)) return true;
+  const nativePanel = closestSafe(target, '[popover]');
+  if (!nativePanel || !modal.contains(nativePanel)) return false;
+  try {
+    return nativePanel.matches(':popover-open');
+  } catch {
+    return false;
+  }
+}
+const activeModals = [];
+const snapshotAttrs = (el, names) => {
+  const attrs = {};
+  for (const name of names) {
+    attrs[name] = {
+      had: el.hasAttribute(name),
+      value: el.getAttribute(name),
+    };
+  }
+  return attrs;
+};
+const restoreAttrs = (el, attrs) => {
+  for (const [name, state] of Object.entries(attrs)) {
+    if (state.had) el.setAttribute(name, state.value);
+    else el.removeAttribute(name);
+  }
+};
+const pushActiveModal = (modal) => {
+  const index = activeModals.indexOf(modal);
+  if (index !== -1) activeModals.splice(index, 1);
+  activeModals.push(modal);
+};
+const removeActiveModal = (modal) => {
+  const index = activeModals.indexOf(modal);
+  if (index !== -1) activeModals.splice(index, 1);
+};
 /**
  * @typedef {object} ModalCloseDetail
@@ -45,22 +97,6 @@ export function initModal({ root } = {}) {
     let opener = null;
     let inerted = [];
-    // A controlled modal must announce AS a modal dialog, not a generic group —
-    // parity with initPopover. Apply a dialog role + aria-modal (unless the
-    // author set a role), and dev-warn on a missing accessible name since we
-    // can't invent a good one. (component audit C13.)
-    if (!modal.hasAttribute('role')) modal.setAttribute('role', 'dialog');
-    if (!modal.hasAttribute('aria-modal')) modal.setAttribute('aria-modal', 'true');
-    const named =
-      modal.hasAttribute('aria-label') ||
-      modal.hasAttribute('aria-labelledby') ||
-      modal.hasAttribute('title');
-    if (!named && typeof console !== 'undefined') {
-      console.warn(
-        `[bronto] initModal(): a [data-bronto-modal] has no accessible name — add aria-label or aria-labelledby so it is announced as a named dialog.`,
-      );
-    }
     // Inert every sibling at each ancestor level up to <body>: the rest of the
     // page becomes non-focusable/non-interactive while the modal subtree stays
     // live. Skip already-inert nodes so release() can't un-inert something the
@@ -68,6 +104,7 @@ export function initModal({ root } = {}) {
     const trap = () => {
       if (opener) return; // already trapped
       opener = document.activeElement;
+      pushActiveModal(modal);
       let el = modal;
       while (el && el.parentElement && el !== document.body) {
         for (const sib of el.parentElement.children) {
@@ -83,6 +120,7 @@ export function initModal({ root } = {}) {
     const release = () => {
       if (!opener) return;
+      removeActiveModal(modal);
       for (const el of inerted) el.inert = false;
       inerted = [];
       const back = opener;
@@ -94,6 +132,8 @@ export function initModal({ root } = {}) {
     const onKey = (e) => {
       if (e.key === 'Escape' && opener) {
+        if (activeModals.at(-1) !== modal) return;
+        if (insideOpenPopover(e.target, modal)) return;
         modal.dispatchEvent(
           new CustomEvent('bronto:modal:close', {
             detail: { reason: 'escape' },
@@ -104,10 +144,27 @@ export function initModal({ root } = {}) {
       }
     };
-    const observer = typeof MutationObserver === 'function' ? new MutationObserver(sync) : null;
     cleanups.push(
       bindOnce(modal, 'modal', () => {
+        const attrs = snapshotAttrs(modal, ['role', 'aria-modal', 'tabindex']);
+        // A controlled modal must announce AS a modal dialog, not a generic group —
+        // parity with initPopover. Apply a dialog role + aria-modal (unless the
+        // author set a role), and dev-warn on a missing accessible name since we
+        // can't invent a good one.
+        if (!modal.hasAttribute('role')) modal.setAttribute('role', 'dialog');
+        if (!modal.hasAttribute('aria-modal')) modal.setAttribute('aria-modal', 'true');
+        const named =
+          modal.hasAttribute('aria-label') ||
+          modal.hasAttribute('aria-labelledby') ||
+          modal.hasAttribute('title');
+        if (!named && typeof console !== 'undefined') {
+          console.warn(
+            `[bronto] initModal(): a [data-bronto-modal] has no accessible name — add aria-label or aria-labelledby so it is announced as a named dialog.`,
+          );
+        }
+        const observer = typeof MutationObserver === 'function' ? new MutationObserver(sync) : null;
         observer?.observe(modal, { attributes: true, attributeFilter: ['class'] });
         document.addEventListener('keydown', onKey, true);
         if (modal.classList.contains('is-open')) trap(); // already open at init
@@ -115,6 +172,7 @@ export function initModal({ root } = {}) {
           observer?.disconnect();
           document.removeEventListener('keydown', onKey, true);
           release();
+          restoreAttrs(modal, attrs);
         };
       }),
     );

package/behaviors/popover.d.ts CHANGED Viewed

@@ -2,9 +2,10 @@
  * Collision-aware popover, dependency-free. A `[data-bronto-popover]`
  * trigger toggles the `.ui-popover` panel whose id it names. The panel
  * is placed under the trigger and **flips above** when it would
- * overflow the viewport, with its inline edge clamped on-screen — the
- * thing the CSS-only tooltip can't do near edges / inside scroll
- * containers. If the panel has the native `popover` attribute and the
+ * overflow the viewport, with its inline edge clamped on-screen and tall
+ * panels constrained to scroll inside the viewport — the thing the CSS-only
+ * tooltip can't do near edges / inside scroll containers. If the panel has
+ * the native `popover` attribute and the
  * Popover API is available it is shown in the top layer (never
  * clipped); otherwise an `.is-open` class is toggled. Manages
  * `aria-expanded` / `aria-controls`, closes on Escape and outside

package/behaviors/popover.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["popover.js"],"names":[],"mappings":"~~AAEA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG~~;AACH,uCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,~~CAwJ3C~~"}
1	+ {"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["popover.js"],"names":[],"mappings":"AAuCA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,uCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAkM3C"}

package/behaviors/popover.js CHANGED Viewed

@@ -1,12 +1,50 @@
-import { hasDom, resolveHost, noop, bindOnce, byIdInHost, focusInto } from './internal.js';
+import {
+  hasDom,
+  resolveHost,
+  noop,
+  bindOnce,
+  byIdInHost,
+  focusInto,
+  collectHosts,
+  closestSafe,
+} from './internal.js';
+const snapshotAttrs = (el, names) => {
+  const attrs = {};
+  for (const name of names) {
+    attrs[name] = {
+      had: el.hasAttribute(name),
+      value: el.getAttribute(name),
+    };
+  }
+  return attrs;
+};
+const restoreAttrs = (el, attrs) => {
+  for (const [name, state] of Object.entries(attrs)) {
+    if (state.had) el.setAttribute(name, state.value);
+    else el.removeAttribute(name);
+  }
+};
+const snapshotStyle = (el, names) => {
+  const styles = {};
+  for (const name of names) styles[name] = el.style[name];
+  return styles;
+};
+const restoreStyle = (el, styles) => {
+  for (const [name, value] of Object.entries(styles)) el.style[name] = value;
+};
 /**
  * Collision-aware popover, dependency-free. A `[data-bronto-popover]`
  * trigger toggles the `.ui-popover` panel whose id it names. The panel
  * is placed under the trigger and **flips above** when it would
- * overflow the viewport, with its inline edge clamped on-screen — the
- * thing the CSS-only tooltip can't do near edges / inside scroll
- * containers. If the panel has the native `popover` attribute and the
+ * overflow the viewport, with its inline edge clamped on-screen and tall
+ * panels constrained to scroll inside the viewport — the thing the CSS-only
+ * tooltip can't do near edges / inside scroll containers. If the panel has
+ * the native `popover` attribute and the
  * Popover API is available it is shown in the top layer (never
  * clipped); otherwise an `.is-open` class is toggled. Manages
  * `aria-expanded` / `aria-controls`, closes on Escape and outside
@@ -34,19 +72,48 @@ export function initPopover({ root } = {}) {
   const GAP = 8;
   let openPanel = null;
   let openTrigger = null;
+  const triggerStates = new Map();
+  const panelStates = new Map();
+  const rememberTrigger = (trigger) => {
+    if (!triggerStates.has(trigger)) {
+      triggerStates.set(
+        trigger,
+        snapshotAttrs(trigger, ['aria-haspopup', 'aria-controls', 'aria-expanded']),
+      );
+    }
+  };
+  const rememberPanel = (panel) => {
+    if (!panelStates.has(panel)) {
+      panelStates.set(panel, {
+        attrs: snapshotAttrs(panel, ['role', 'tabindex']),
+        open: panel.classList.contains('is-open'),
+        style: snapshotStyle(panel, ['maxBlockSize', 'top', 'left']),
+      });
+    }
+  };
-  // The trigger advertises `aria-haspopup="dialog"`, so the open panel must BE a
-  // dialog: a role, an accessible name, and focus moved into it (C6) — see the
-  // shared `focusInto` in internal.js.
+  // The trigger advertises `aria-haspopup="dialog"`, so the open panel must be
+  // a dialog: a role, an accessible name, and focus moved into it. See the
+  // shared `focusInto` helper in internal.js.
   const place = (trigger, panel) => {
     const r = trigger.getBoundingClientRect();
+    panel.style.maxBlockSize = 'none';
     const pw = panel.offsetWidth;
-    const ph = panel.offsetHeight;
+    const ph = Math.max(panel.offsetHeight, panel.scrollHeight);
     const vw = view?.innerWidth ?? 0;
     const vh = view?.innerHeight ?? 0;
-    let top = r.bottom + GAP;
-    if (top + ph > vh && r.top - GAP - ph >= 0) top = r.top - GAP - ph;
+    const maxHeight = Math.max(0, vh - GAP * 2);
+    const below = Math.max(0, vh - r.bottom - GAP * 2);
+    const above = Math.max(0, r.top - GAP * 2);
+    const placeAbove = ph > below && above > below;
+    const available = placeAbove ? above : below;
+    const height = Math.min(ph, available || maxHeight);
+    panel.style.maxBlockSize = `${height}px`;
+    let top = placeAbove ? r.top - GAP - height : r.bottom + GAP;
+    if (vh) top = Math.max(GAP, Math.min(top, vh - height - GAP));
     let left = r.left;
     if (vw) left = Math.max(GAP, Math.min(left, vw - pw - GAP));
     panel.style.top = `${Math.max(GAP, top)}px`;
@@ -77,9 +144,11 @@ export function initPopover({ root } = {}) {
   const open = (trigger, panel) => {
     close();
+    rememberTrigger(trigger);
+    rememberPanel(panel);
     // Live up to the advertised `aria-haspopup="dialog"`: give the panel a
     // dialog role (unless the author set one) so AT announces it as the promised
-    // dialog rather than a generic group (C6).
+    // dialog rather than a generic group.
     if (!panel.hasAttribute('role')) panel.setAttribute('role', 'dialog');
     trigger.setAttribute('aria-controls', panel.id);
     trigger.setAttribute('aria-expanded', 'true');
@@ -99,7 +168,7 @@ export function initPopover({ root } = {}) {
   };
   const onClick = (e) => {
-    const trigger = e.target.closest?.('[data-bronto-popover]');
+    const trigger = closestSafe(e.target, '[data-bronto-popover]');
     if (trigger && host.contains(trigger)) {
       const panel = byIdInHost(host, trigger.getAttribute('data-bronto-popover'));
       if (!panel) return;
@@ -133,14 +202,16 @@ export function initPopover({ root } = {}) {
   // never routes through close(), so aria-expanded would otherwise go stale).
   const seedTeardowns = [];
   const seed = () => {
-    for (const trigger of host.querySelectorAll('[data-bronto-popover]')) {
+    for (const trigger of collectHosts(host, '[data-bronto-popover]')) {
       const panel = byIdInHost(host, trigger.getAttribute('data-bronto-popover'));
       if (!panel) continue;
+      rememberTrigger(trigger);
+      rememberPanel(panel);
       if (!trigger.hasAttribute('aria-haspopup')) trigger.setAttribute('aria-haspopup', 'dialog');
       trigger.setAttribute('aria-controls', panel.id);
       if (!trigger.hasAttribute('aria-expanded')) trigger.setAttribute('aria-expanded', 'false');
       // A dialog with no accessible name is announced as just "dialog". We can't
-      // invent a good name, so warn the author at dev time (C6).
+      // invent a good name, so warn the author at dev time.
       const named =
         panel.hasAttribute('aria-label') ||
         panel.hasAttribute('aria-labelledby') ||
@@ -169,7 +240,16 @@ export function initPopover({ root } = {}) {
     view?.addEventListener('scroll', onReflow, true);
     view?.addEventListener('resize', onReflow);
     return () => {
+      close();
       for (const t of seedTeardowns.splice(0)) t();
+      for (const [trigger, attrs] of triggerStates) restoreAttrs(trigger, attrs);
+      triggerStates.clear();
+      for (const [panel, state] of panelStates) {
+        restoreAttrs(panel, state.attrs);
+        panel.classList.toggle('is-open', state.open);
+        restoreStyle(panel, state.style);
+      }
+      panelStates.clear();
       document.removeEventListener('click', onClick);
       document.removeEventListener('keydown', onKey);
       view?.removeEventListener('scroll', onReflow, true);

package/behaviors/sources.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sources.d.ts","sourceRoot":"","sources":["sources.js"],"names":[],"mappings":"~~AA2CA~~;;;;;;;;;;;GAWG;AACH,uCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,~~CAwG3C~~;;;;;~~QAjJa~~,MAAM;;;;cACN,OAAO;;;;YACP,OAAO"}
1	+ {"version":3,"file":"sources.d.ts","sourceRoot":"","sources":["sources.js"],"names":[],"mappings":"AA4CA;;;;;;;;;;;GAWG;AACH,uCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAmH3C;;;;;QA5Ja,MAAM;;;;cACN,OAAO;;;;YACP,OAAO"}

package/behaviors/sources.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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"}