npm - @ponchia/ui - Versions diffs - 0.6.6 → 0.6.8 - Mend

@ponchia/ui 0.6.6 → 0.6.8

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 (160) hide show

package/CHANGELOG.md +175 -6
package/README.md +38 -25
package/annotations/index.d.ts.map +1 -1
package/annotations/index.js +21 -3
package/behaviors/carousel.d.ts.map +1 -1
package/behaviors/carousel.js +91 -32
package/behaviors/combobox.d.ts.map +1 -1
package/behaviors/combobox.js +117 -43
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 +92 -9
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 +37 -16
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 +78 -5
package/behaviors/glyph.d.ts.map +1 -1
package/behaviors/glyph.js +17 -2
package/behaviors/index.d.ts +2 -0
package/behaviors/index.d.ts.map +1 -1
package/behaviors/index.js +2 -0
package/behaviors/inert.js +3 -2
package/behaviors/internal.d.ts +2 -1
package/behaviors/internal.d.ts.map +1 -1
package/behaviors/internal.js +25 -4
package/behaviors/legend.d.ts +0 -5
package/behaviors/legend.d.ts.map +1 -1
package/behaviors/legend.js +78 -14
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 +89 -9
package/behaviors/sources.d.ts.map +1 -1
package/behaviors/sources.js +14 -2
package/behaviors/splitter.d.ts +26 -0
package/behaviors/splitter.d.ts.map +1 -0
package/behaviors/splitter.js +239 -0
package/behaviors/spotlight.d.ts.map +1 -1
package/behaviors/spotlight.js +28 -2
package/behaviors/table.d.ts.map +1 -1
package/behaviors/table.js +105 -13
package/behaviors/tabs.d.ts.map +1 -1
package/behaviors/tabs.js +82 -18
package/behaviors/theme.d.ts.map +1 -1
package/behaviors/theme.js +26 -6
package/classes/classes.json +230 -4
package/classes/index.d.ts +64 -3
package/classes/index.js +56 -2
package/classes/vscode.css-custom-data.json +1 -1
package/connectors/index.d.ts +39 -6
package/connectors/index.d.ts.map +1 -1
package/connectors/index.js +67 -9
package/css/analytical.css +3 -1
package/css/annotations.css +12 -0
package/css/app.css +4 -4
package/css/clamp.css +92 -0
package/css/crosshair.css +27 -2
package/css/feedback.css +2 -30
package/css/figure.css +102 -0
package/css/highlights.css +50 -0
package/css/interval.css +90 -0
package/css/navigation.css +12 -0
package/css/primitives.css +2 -3
package/css/report-kit.css +38 -0
package/css/report.css +23 -4
package/css/sidenote.css +12 -2
package/css/site.css +2 -1
package/css/sources.css +5 -0
package/css/state.css +120 -1
package/css/table.css +4 -0
package/css/tokens.css +25 -9
package/css/workbench.css +101 -8
package/dist/bronto.css +1 -1
package/dist/css/analytical.css +1 -1
package/dist/css/annotations.css +1 -1
package/dist/css/app.css +1 -1
package/dist/css/clamp.css +1 -0
package/dist/css/crosshair.css +1 -1
package/dist/css/feedback.css +1 -1
package/dist/css/figure.css +1 -0
package/dist/css/highlights.css +1 -0
package/dist/css/interval.css +1 -0
package/dist/css/navigation.css +1 -1
package/dist/css/primitives.css +1 -1
package/dist/css/report-kit.css +1 -0
package/dist/css/report.css +1 -1
package/dist/css/sidenote.css +1 -1
package/dist/css/site.css +1 -1
package/dist/css/sources.css +1 -1
package/dist/css/state.css +1 -1
package/dist/css/table.css +1 -1
package/dist/css/tokens.css +1 -1
package/dist/css/workbench.css +1 -1
package/docs/adr/0001-color-system.md +3 -2
package/docs/adr/0002-scope-and-2026-baseline.md +1 -1
package/docs/annotations.md +12 -1
package/docs/architecture.md +105 -48
package/docs/clamp.md +49 -0
package/docs/command.md +4 -1
package/docs/connectors.md +16 -0
package/docs/contrast.md +34 -24
package/docs/crosshair.md +1 -1
package/docs/d2.md +37 -0
package/docs/dots.md +4 -1
package/docs/figure.md +71 -0
package/docs/frontier-primitives.md +25 -24
package/docs/glyphs.md +11 -0
package/docs/highlights.md +52 -0
package/docs/interop/tailwind.md +148 -0
package/docs/interval.md +55 -0
package/docs/legends.md +3 -2
package/docs/mermaid.md +6 -0
package/docs/migrations/0.2-to-0.3.md +80 -0
package/docs/migrations/0.3-to-0.4.md +48 -0
package/docs/migrations/0.4-to-0.5.md +96 -0
package/docs/migrations/0.5-to-0.6.md +82 -0
package/docs/package-contract.md +44 -6
package/docs/reference.md +78 -5
package/docs/reporting.md +126 -60
package/docs/sidenote.md +7 -1
package/docs/sources.md +1 -1
package/docs/stability.md +23 -5
package/docs/state.md +67 -10
package/docs/theming.md +12 -4
package/docs/usage.md +47 -13
package/docs/vega.md +4 -4
package/docs/workbench.md +59 -18
package/llms.txt +89 -16
package/package.json +82 -6
package/qwik/index.d.ts +1 -0
package/qwik/index.d.ts.map +1 -1
package/qwik/index.js +26 -21
package/react/index.d.ts +1 -0
package/react/index.d.ts.map +1 -1
package/react/index.js +4 -1
package/schemas/report-claims.v1.schema.json +137 -0
package/solid/index.d.ts +2 -0
package/solid/index.d.ts.map +1 -1
package/solid/index.js +3 -0
package/svelte/index.d.ts +114 -0
package/svelte/index.d.ts.map +1 -0
package/svelte/index.js +193 -0
package/tailwind.css +87 -0
package/tokens/figma.variables.json +2241 -0
package/tokens/index.js +1 -1
package/tokens/index.json +2 -2
package/tokens/resolved.json +3 -3
package/tokens/tokens.dtcg.json +1 -1
package/vue/index.d.ts +116 -0
package/vue/index.d.ts.map +1 -0
package/vue/index.js +228 -0

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. (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.`,
+          );
+        }
+        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,6 +72,27 @@ 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
@@ -41,12 +100,20 @@ export function initPopover({ root } = {}) {
   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,6 +144,8 @@ 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).
@@ -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,9 +202,11 @@ 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');
@@ -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 ADDED Viewed

@@ -0,0 +1,26 @@
+/**
+ * Wire focusable ARIA splitters. Each `[data-bronto-splitter]` host contains
+ * two `.ui-splitter__pane` elements separated by one `.ui-splitter__handle`
+ * (`role="separator"`). The behavior keeps `--splitter-pos` and
+ * `aria-valuenow` in sync for keyboard and pointer resizing, then dispatches
+ * `bronto:splitter:resize` with `{ value, orientation }`.
+ *
+ * Bronto owns the control affordance only. The host owns pane content,
+ * persistence, min/max policy, collapse behavior, and any saved layout state.
+ * SSR-safe and idempotent per splitter; returns a cleanup function.
+ *
+ * @param {import('./internal.js').DelegateOpts} [opts]
+ * @returns {import('./internal.js').Cleanup}
+ */
+export function initSplitter({ root }?: import("./internal.js").DelegateOpts): import("./internal.js").Cleanup;
+export type SplitterResizeDetail = {
+    /**
+     * The first pane size as a 0..100 percentage.
+     */
+    value: number;
+    /**
+     * Splitter orientation.
+     */
+    orientation: "vertical" | "horizontal";
+};
+//# sourceMappingURL=splitter.d.ts.map

package/behaviors/splitter.d.ts.map ADDED Viewed

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

package/behaviors/splitter.js ADDED Viewed

@@ -0,0 +1,239 @@
+import { hasDom, resolveHost, noop, bindOnce, collectHosts } from './internal.js';
+const SELECTOR = '[data-bronto-splitter]';
+const HANDLE_SELECTOR = '.ui-splitter__handle';
+const DEFAULT_MIN = 20;
+const DEFAULT_MAX = 80;
+const DEFAULT_VALUE = 50;
+const STEP = 2;
+const LARGE_STEP = 10;
+/**
+ * @typedef {object} SplitterResizeDetail
+ * @property {number} value The first pane size as a 0..100 percentage.
+ * @property {'vertical' | 'horizontal'} orientation Splitter orientation.
+ */
+const num = (v, fallback) => {
+  const n = Number.parseFloat(String(v ?? '').trim());
+  return Number.isFinite(n) ? n : fallback;
+};
+const fmt = (v) => String(Math.round(v * 10) / 10);
+const clamp = (v, min, max) => Math.min(max, Math.max(min, v));
+const readCssValue = (splitter) => splitter.style.getPropertyValue('--splitter-pos');
+const readOrientation = (splitter, handle) => {
+  const data = splitter.getAttribute('data-bronto-splitter');
+  if (data === 'horizontal' || data === 'vertical') return data;
+  if (splitter.classList.contains('ui-splitter--horizontal')) return 'horizontal';
+  if (splitter.classList.contains('ui-splitter--vertical')) return 'vertical';
+  return handle.getAttribute('aria-orientation') === 'horizontal' ? 'horizontal' : 'vertical';
+};
+const getView = (el) => el.ownerDocument?.defaultView || null;
+const dispatchResize = (splitter, detail) => {
+  splitter.dispatchEvent(
+    new CustomEvent('bronto:splitter:resize', {
+      bubbles: true,
+      detail,
+    }),
+  );
+};
+const snapshotAttrs = (el, names) => {
+  const out = {};
+  for (const name of names) {
+    out[name] = {
+      had: el.hasAttribute(name),
+      value: el.getAttribute(name),
+    };
+  }
+  return out;
+};
+const restoreAttrs = (el, attrs) => {
+  for (const [name, attr] of Object.entries(attrs)) {
+    if (attr.had) el.setAttribute(name, attr.value);
+    else el.removeAttribute(name);
+  }
+};
+const snapshotStyleProp = (el, name) => ({
+  value: el.style.getPropertyValue(name),
+  priority: el.style.getPropertyPriority(name),
+});
+const restoreStyleProp = (el, name, prop) => {
+  if (prop.value) el.style.setProperty(name, prop.value, prop.priority);
+  else el.style.removeProperty(name);
+};
+function wireSplitter(splitter) {
+  const handle = splitter.querySelector(HANDLE_SELECTOR);
+  if (!handle) return noop;
+  return bindOnce(splitter, 'splitter', () => {
+    const handleAttrs = snapshotAttrs(handle, [
+      'role',
+      'tabindex',
+      'aria-orientation',
+      'aria-valuemin',
+      'aria-valuemax',
+      'aria-valuenow',
+    ]);
+    const splitterPos = snapshotStyleProp(splitter, '--splitter-pos');
+    const orientation = readOrientation(splitter, handle);
+    const min = num(handle.getAttribute('aria-valuemin'), DEFAULT_MIN);
+    const max = Math.max(min, num(handle.getAttribute('aria-valuemax'), DEFAULT_MAX));
+    let value = clamp(
+      num(handle.getAttribute('aria-valuenow'), num(readCssValue(splitter), DEFAULT_VALUE)),
+      min,
+      max,
+    );
+    let activePointer = null;
+    const apply = (next, { emit = true } = {}) => {
+      value = clamp(next, min, max);
+      const label = fmt(value);
+      splitter.style.setProperty('--splitter-pos', `${label}%`);
+      handle.setAttribute('aria-valuenow', label);
+      if (emit) dispatchResize(splitter, { value, orientation });
+    };
+    if (!handle.hasAttribute('role')) handle.setAttribute('role', 'separator');
+    if (!handle.hasAttribute('tabindex')) handle.tabIndex = 0;
+    if (!handle.hasAttribute('aria-orientation'))
+      handle.setAttribute('aria-orientation', orientation);
+    if (!handle.hasAttribute('aria-valuemin')) handle.setAttribute('aria-valuemin', fmt(min));
+    if (!handle.hasAttribute('aria-valuemax')) handle.setAttribute('aria-valuemax', fmt(max));
+    apply(value, { emit: false });
+    const fromPointer = (event) => {
+      const rect = splitter.getBoundingClientRect();
+      const size = orientation === 'horizontal' ? rect.height : rect.width;
+      if (!size) return value;
+      if (orientation === 'horizontal') {
+        return ((event.clientY - rect.top) / size) * 100;
+      }
+      const view = getView(splitter);
+      const dir = view?.getComputedStyle?.(splitter).direction;
+      const x = dir === 'rtl' ? rect.right - event.clientX : event.clientX - rect.left;
+      return (x / size) * 100;
+    };
+    const capturePointer = (pointerId) => {
+      if (pointerId === undefined || pointerId === null) return;
+      try {
+        handle.setPointerCapture?.(pointerId);
+      } catch {
+        /* Pointer capture is an affordance; drag still works through document listeners. */
+      }
+    };
+    const releasePointer = (pointerId = activePointer) => {
+      if (pointerId === undefined || pointerId === null) return;
+      try {
+        if (!handle.hasPointerCapture || handle.hasPointerCapture(pointerId)) {
+          handle.releasePointerCapture?.(pointerId);
+        }
+      } catch {
+        /* The element may have been removed or capture may already be gone. */
+      }
+    };
+    const onKeydown = (event) => {
+      let next = value;
+      if (event.key === 'Home') next = min;
+      else if (event.key === 'End') next = max;
+      else if (event.key === 'PageUp') next += LARGE_STEP;
+      else if (event.key === 'PageDown') next -= LARGE_STEP;
+      else if (event.key === 'ArrowRight' || event.key === 'ArrowDown')
+        next += event.shiftKey ? LARGE_STEP : STEP;
+      else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp')
+        next -= event.shiftKey ? LARGE_STEP : STEP;
+      else return;
+      event.preventDefault();
+      apply(next);
+    };
+    const onPointerMove = (event) => {
+      if (
+        activePointer !== null &&
+        event.pointerId !== undefined &&
+        event.pointerId !== activePointer
+      )
+        return;
+      apply(fromPointer(event));
+    };
+    const onPointerUp = (event) => {
+      if (
+        activePointer !== null &&
+        event.pointerId !== undefined &&
+        event.pointerId !== activePointer
+      )
+        return;
+      releasePointer(event.pointerId);
+      activePointer = null;
+      handle.classList.remove('is-active');
+      splitter.ownerDocument.removeEventListener('pointermove', onPointerMove);
+      splitter.ownerDocument.removeEventListener('pointerup', onPointerUp);
+      splitter.ownerDocument.removeEventListener('pointercancel', onPointerUp);
+    };
+    const onPointerDown = (event) => {
+      if (event.button !== undefined && event.button !== 0) return;
+      event.preventDefault();
+      activePointer = event.pointerId ?? null;
+      capturePointer(activePointer);
+      handle.classList.add('is-active');
+      apply(fromPointer(event));
+      splitter.ownerDocument.addEventListener('pointermove', onPointerMove);
+      splitter.ownerDocument.addEventListener('pointerup', onPointerUp);
+      splitter.ownerDocument.addEventListener('pointercancel', onPointerUp);
+    };
+    handle.addEventListener('keydown', onKeydown);
+    handle.addEventListener('pointerdown', onPointerDown);
+    return () => {
+      handle.removeEventListener('keydown', onKeydown);
+      handle.removeEventListener('pointerdown', onPointerDown);
+      splitter.ownerDocument.removeEventListener('pointermove', onPointerMove);
+      splitter.ownerDocument.removeEventListener('pointerup', onPointerUp);
+      splitter.ownerDocument.removeEventListener('pointercancel', onPointerUp);
+      releasePointer();
+      handle.classList.remove('is-active');
+      activePointer = null;
+      restoreAttrs(handle, handleAttrs);
+      restoreStyleProp(splitter, '--splitter-pos', splitterPos);
+    };
+  });
+}
+/**
+ * Wire focusable ARIA splitters. Each `[data-bronto-splitter]` host contains
+ * two `.ui-splitter__pane` elements separated by one `.ui-splitter__handle`
+ * (`role="separator"`). The behavior keeps `--splitter-pos` and
+ * `aria-valuenow` in sync for keyboard and pointer resizing, then dispatches
+ * `bronto:splitter:resize` with `{ value, orientation }`.
+ *
+ * Bronto owns the control affordance only. The host owns pane content,
+ * persistence, min/max policy, collapse behavior, and any saved layout state.
+ * SSR-safe and idempotent per splitter; returns a cleanup function.
+ *
+ * @param {import('./internal.js').DelegateOpts} [opts]
+ * @returns {import('./internal.js').Cleanup}
+ */
+export function initSplitter({ root } = {}) {
+  if (!hasDom()) return noop;
+  const host = resolveHost(root);
+  if (!host) return noop;
+  const splitters = collectHosts(host, SELECTOR);
+  if (!splitters.length) return noop;
+  const cleanups = splitters.map(wireSplitter).filter(Boolean);
+  return () => cleanups.forEach((fn) => fn());
+}

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

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