@ponchia/ui 0.5.0 → 0.6.3

package/behaviors/carousel.js

@@ -1,4 +1,11 @@
-import { hasDom, noop, bindOnce } from './internal.js';
+import {
+  hasDom,
+  resolveHost,
+  noop,
+  bindOnce,
+  scrollIntoViewSafe,
+  collectHosts,
+} from './internal.js';
 
 /**
  * Image carousel / gallery, built on CSS scroll-snap so touch + trackpad
@@ -22,13 +29,15 @@ import { hasDom, noop, bindOnce } from './internal.js';
  * Emits `bronto:change` ({ detail: { index } }) on every index change
  * (button, key, thumbnail, or swipe). SSR-safe, idempotent per carousel;
  * returns a cleanup function.
+ *
+ * @param {import('./internal.js').DelegateOpts} [opts]
+ * @returns {import('./internal.js').Cleanup}
  */
 export function initCarousel({ root } = {}) {
   if (!hasDom()) return noop;
-  const host = root || document;
-  const boxes = [];
-  if (host !== document && host.matches?.('[data-bronto-carousel]')) boxes.push(host);
-  boxes.push(...(host.querySelectorAll?.('[data-bronto-carousel]') ?? []));
+  const host = resolveHost(root);
+  if (!host) return noop;
+  const boxes = collectHosts(host, '[data-bronto-carousel]');
   const cleanups = [];
 
   for (const box of boxes) {
@@ -103,16 +112,7 @@ export function initCarousel({ root } = {}) {
     const emit = () =>
       box.dispatchEvent(new CustomEvent('bronto:change', { detail: { index }, bubbles: true }));
 
-    // jsdom (and any layout-less env) has no scrollIntoView; it's a pure
-    // affordance, so never let it break index/aria sync — same guard as
-    // initCombobox.
-    const reveal = (el) => {
-      try {
-        el?.scrollIntoView({ block: 'nearest', inline: 'center' });
-      } catch {
-        /* no layout — ignore */
-      }
-    };
+    const reveal = (el) => scrollIntoViewSafe(el, { block: 'nearest', inline: 'center' });
 
     const goTo = (i, { emitChange = true } = {}) => {
       const next = loop ? (i + n) % n : Math.max(0, Math.min(n - 1, i));
@@ -176,13 +176,17 @@ export function initCarousel({ root } = {}) {
         },
         { root: viewport, threshold: 0.6 },
       );
-      slides.forEach((s) => io.observe(s));
     }
 
     render();
     const bound = bindOnce(box, 'carousel', () => {
       viewport.addEventListener('keydown', onKey);
       box.addEventListener('click', onClick);
+      // Observe inside the add callback so observe/disconnect pair with the
+      // binding lifecycle: a re-init tears down the prior binding (which
+      // disconnects the old observer) before this starts, so two observers
+      // never watch the same slides — even for one tick.
+      slides.forEach((s) => io?.observe(s));
       return () => {
         viewport.removeEventListener('keydown', onKey);
         box.removeEventListener('click', onClick);

package/behaviors/combobox.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Editable combobox with a filtered listbox popup, implementing the
+ * WAI-ARIA APG combobox pattern (the widget the framework most lacked
+ * and consumers most often build badly). Dependency-free, no
+ * positioning library — the list is CSS-anchored under the input.
+ *
+ * The input MUST have an accessible name — a `<label>`, `aria-label`, or
+ * `aria-labelledby` (a placeholder does not count). A nameless `role="combobox"`
+ * is a silent screen-reader failure, so the behavior warns at dev time when it
+ * finds one, and mirrors the input's name onto the listbox.
+ *
+ * Markup: `[data-bronto-combobox]` wrapping an `<input role="combobox">`
+ * (`.ui-combobox__input`) and a `<ul role="listbox">`
+ * (`.ui-combobox__list`) of `<li role="option">` (`.ui-combobox__option`,
+ * optional `data-value`). An optional `.ui-combobox__empty` (hidden at rest)
+ * shows when nothing matches. The behavior owns ids, `aria-expanded`,
+ * `aria-controls`, `aria-activedescendant`, roving active option,
+ * type-to-filter, full keyboard (Down/Up/Home/End/Enter/Escape/Tab),
+ * pointer select, and outside-click close. On select the **visible input shows
+ * the option's text label**, while the emitted `bronto:change` CustomEvent
+ * carries the option's `data-value` code: `{ detail: { value, label } }` (value
+ * falls back to the label when there is no `data-value`). SSR-safe, idempotent
+ * per instance; returns a cleanup function.
+ *
+ * Single-select APG deviations (intentional, for a filtering text combobox):
+ * ArrowDown on a CLOSED list opens + filters rather than pre-activating the
+ * first option, and Tab closes the list without committing the merely-highlighted
+ * option (only Enter/click commits). Both are safe for single-select.
+ *
+ * Options are read from the DOM at init; if you replace the listbox contents
+ * (e.g. async/remote results), either re-run initCombobox, or add
+ * `data-bronto-combobox-live` to the `[data-bronto-combobox]` host so a
+ * MutationObserver re-reads the options in place (opt-in — off by default so
+ * the common static case stays observer-free).
+ *
+ * @param {import('./internal.js').DelegateOpts} [opts]
+ * @returns {import('./internal.js').Cleanup}
+ */
+export function initCombobox({ root }?: import("./internal.js").DelegateOpts): import("./internal.js").Cleanup;
+//# sourceMappingURL=combobox.d.ts.map

package/behaviors/combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["combobox.js"],"names":[],"mappings":"AAWA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAqO3C"}

package/behaviors/combobox.js

@@ -1,4 +1,13 @@
-import { hasDom, noop, bindOnce, nextFieldUid } from './internal.js';
+import {
+  hasDom,
+  resolveHost,
+  noop,
+  bindOnce,
+  nextFieldUid,
+  scrollIntoViewSafe,
+  wrapIndex,
+  collectHosts,
+} from './internal.js';
 
 /**
  * Editable combobox with a filtered listbox popup, implementing the
@@ -6,23 +15,43 @@ import { hasDom, noop, bindOnce, nextFieldUid } from './internal.js';
  * and consumers most often build badly). Dependency-free, no
  * positioning library — the list is CSS-anchored under the input.
  *
+ * The input MUST have an accessible name — a `<label>`, `aria-label`, or
+ * `aria-labelledby` (a placeholder does not count). A nameless `role="combobox"`
+ * is a silent screen-reader failure, so the behavior warns at dev time when it
+ * finds one, and mirrors the input's name onto the listbox.
+ *
  * Markup: `[data-bronto-combobox]` wrapping an `<input role="combobox">`
  * (`.ui-combobox__input`) and a `<ul role="listbox">`
  * (`.ui-combobox__list`) of `<li role="option">` (`.ui-combobox__option`,
- * optional `data-value`). An optional `.ui-combobox__empty` shows when
- * nothing matches. The behavior owns ids, `aria-expanded`,
+ * optional `data-value`). An optional `.ui-combobox__empty` (hidden at rest)
+ * shows when nothing matches. The behavior owns ids, `aria-expanded`,
  * `aria-controls`, `aria-activedescendant`, roving active option,
  * type-to-filter, full keyboard (Down/Up/Home/End/Enter/Escape/Tab),
- * pointer select, and outside-click close; it emits a `bronto:change`
- * CustomEvent ({ detail: { value } }) on selection. SSR-safe,
- * idempotent per instance; returns a cleanup function.
+ * pointer select, and outside-click close. On select the **visible input shows
+ * the option's text label**, while the emitted `bronto:change` CustomEvent
+ * carries the option's `data-value` code: `{ detail: { value, label } }` (value
+ * falls back to the label when there is no `data-value`). SSR-safe, idempotent
+ * per instance; returns a cleanup function.
+ *
+ * Single-select APG deviations (intentional, for a filtering text combobox):
+ * ArrowDown on a CLOSED list opens + filters rather than pre-activating the
+ * first option, and Tab closes the list without committing the merely-highlighted
+ * option (only Enter/click commits). Both are safe for single-select.
+ *
+ * Options are read from the DOM at init; if you replace the listbox contents
+ * (e.g. async/remote results), either re-run initCombobox, or add
+ * `data-bronto-combobox-live` to the `[data-bronto-combobox]` host so a
+ * MutationObserver re-reads the options in place (opt-in — off by default so
+ * the common static case stays observer-free).
+ *
+ * @param {import('./internal.js').DelegateOpts} [opts]
+ * @returns {import('./internal.js').Cleanup}
  */
 export function initCombobox({ root } = {}) {
   if (!hasDom()) return noop;
-  const host = root || document;
-  const boxes = [];
-  if (host !== document && host.matches?.('[data-bronto-combobox]')) boxes.push(host);
-  boxes.push(...(host.querySelectorAll?.('[data-bronto-combobox]') ?? []));
+  const host = resolveHost(root);
+  if (!host) return noop;
+  const boxes = collectHosts(host, '[data-bronto-combobox]');
   const cleanups = [];
 
   for (const box of boxes) {
@@ -30,20 +59,59 @@ export function initCombobox({ root } = {}) {
     const list = box.querySelector('[role="listbox"], .ui-combobox__list');
     if (!input || !list) continue;
     const empty = box.querySelector('.ui-combobox__empty');
-    const options = [...list.querySelectorAll('[role="option"], .ui-combobox__option')];
-
     const listId = list.id || (list.id = `bronto-cb-list-${nextFieldUid()}`);
-    options.forEach((o, i) => {
-      if (!o.id) o.id = `${listId}-opt-${i}`;
-      o.setAttribute('role', 'option');
-    });
+    // Re-readable so the opt-in MutationObserver (`data-bronto-combobox-live`)
+    // can pick up async/replaced option nodes without a full re-init. `visible`,
+    // `filter`, `move`, etc. close over this binding, so reassigning it is enough.
+    let options = [];
+    const syncOptions = () => {
+      options = [...list.querySelectorAll('[role="option"], .ui-combobox__option')];
+      options.forEach((o, i) => {
+        if (!o.id) o.id = `${listId}-opt-${i}`;
+        o.setAttribute('role', 'option');
+      });
+    };
+    syncOptions();
     list.setAttribute('role', 'listbox');
+    // Give the listbox its own accessible name (a bare role=listbox is unnamed
+    // to a screen reader) by mirroring the input's REAL name. (a11y review C30.)
+    // The placeholder is deliberately NOT in this chain: the input warning below
+    // already rejects a placeholder as an inadequate name, so papering the
+    // listbox over with it would contradict that — if there's no real name the
+    // listbox stays unnamed and the warning is the signal. (component audit C28.)
+    if (!list.hasAttribute('aria-label') && !list.hasAttribute('aria-labelledby')) {
+      const name = input.getAttribute('aria-label') || input.labels?.[0]?.textContent?.trim();
+      if (name) list.setAttribute('aria-label', name);
+    }
+    // A `role="combobox"` with no accessible name is a silent AT failure. A
+    // placeholder is not a robust name (it can vanish and is ignored by some
+    // AT), so warn unless there is a real label/aria-label/aria-labelledby/title
+    // (C7). We can't invent a good name, hence a dev-time warning, not a guess.
+    const inputNamed =
+      input.hasAttribute('aria-label') ||
+      input.hasAttribute('aria-labelledby') ||
+      !!input.labels?.length ||
+      input.hasAttribute('title');
+    if (!inputNamed && typeof console !== 'undefined') {
+      console.warn(
+        '[bronto] initCombobox(): the combobox input has no accessible name — add a <label>, aria-label, or aria-labelledby (a placeholder is not enough).',
+      );
+    }
     input.setAttribute('role', 'combobox');
     input.setAttribute('aria-controls', listId);
     input.setAttribute('aria-autocomplete', 'list');
     input.setAttribute('aria-expanded', 'false');
     input.setAttribute('autocomplete', 'off');
     list.hidden = true;
+    // Hide the empty-state at rest: it must only appear once a filter yields no
+    // matches, never on an idle combobox. Without this an author who omits
+    // `hidden` on `.ui-combobox__empty` ships a box that reads "No matches"
+    // before the user has typed anything. (component audit C10.) Make it a
+    // status live region so its appearance is announced. (component audit C38.)
+    if (empty) {
+      empty.hidden = true;
+      if (!empty.hasAttribute('role')) empty.setAttribute('role', 'status');
+    }
 
     let active = -1;
     const visible = () => options.filter((o) => !o.hidden);
@@ -53,13 +121,7 @@ export function initCombobox({ root } = {}) {
       if (opt) {
         opt.classList.add('is-active');
         input.setAttribute('aria-activedescendant', opt.id);
-        // jsdom's scrollIntoView throws "Not implemented"; it is a
-        // pure affordance, so never let it break keyboard nav.
-        try {
-          opt.scrollIntoView({ block: 'nearest' });
-        } catch {
-          /* non-DOM/headless environment — ignore */
-        }
+        scrollIntoViewSafe(opt);
       } else {
         input.removeAttribute('aria-activedescendant');
       }
@@ -96,13 +158,19 @@ export function initCombobox({ root } = {}) {
     };
 
     const select = (opt) => {
-      input.value = opt.dataset.value ?? opt.textContent.trim();
+      // Show the human LABEL in the input; emit the `data-value` CODE in the
+      // event. The natural pattern is code in `data-value`, label in the text —
+      // putting the code in the visible input silently shows the user a raw code.
+      // (component audit C10.)
+      const label = opt.textContent.trim();
+      const value = opt.dataset.value ?? label;
+      input.value = label;
       options.forEach((o) => o.setAttribute('aria-selected', String(o === opt)));
       close();
       input.focus();
       box.dispatchEvent(
         new CustomEvent('bronto:change', {
-          detail: { value: input.value },
+          detail: { value, label },
           bubbles: true,
         }),
       );
@@ -112,10 +180,7 @@ export function initCombobox({ root } = {}) {
       const vis = visible();
       if (!vis.length) return;
       open();
-      const curIdx = vis.indexOf(options[active]);
-      let next = curIdx + delta;
-      if (next < 0) next = vis.length - 1;
-      if (next >= vis.length) next = 0;
+      const next = wrapIndex(vis.indexOf(options[active]), delta, vis.length);
       active = options.indexOf(vis[next]);
       setActive(options[active]);
     };
@@ -138,6 +203,15 @@ export function initCombobox({ root } = {}) {
       return true;
     };
 
+    // Live re-sync after the option nodes change under us. The active option may
+    // be gone, so drop it; re-filter against the current input only while open.
+    const relist = () => {
+      syncOptions();
+      active = -1;
+      setActive(null);
+      if (!list.hidden) filter();
+    };
+
     const onInput = () => filter();
     const onKey = (e) => {
       switch (e.key) {
@@ -181,7 +255,15 @@ export function initCombobox({ root } = {}) {
       input.addEventListener('keydown', onKey);
       list.addEventListener('click', onOptionClick);
       document.addEventListener('click', onDocClick);
+      // Opt-in: keep options in sync with a list mutated after init (async /
+      // remote results). Off by default so the common static case stays free.
+      const observer =
+        box.hasAttribute('data-bronto-combobox-live') && typeof MutationObserver === 'function'
+          ? new MutationObserver(relist)
+          : null;
+      observer?.observe(list, { childList: true, subtree: true });
       return () => {
+        observer?.disconnect();
         input.removeEventListener('input', onInput);
         input.removeEventListener('keydown', onKey);
         list.removeEventListener('click', onOptionClick);

package/behaviors/command.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @typedef {object} CommandSelectDetail
+ * @property {string} value The chosen command's value.
+ * @property {string} label The chosen command's visible label.
+ */
+/**
+ * Command palette — filter + keyboard-navigate a DOM-authored command list.
+ * The CSS shell (`.ui-command`) is opt-in; this wires the listbox behavior the
+ * shell needs. Bronto filters and navigates; the HOST owns the action registry,
+ * permission checks, routing, async effects, and command execution (it listens
+ * for `bronto:command:select`). There is no global Cmd/Ctrl+K — open the palette
+ * yourself (e.g. a `<dialog>` via `initDialog`).
+ *
+ * Markup: `[data-bronto-command]` wrapping an `<input>` (`.ui-command__input`)
+ * and a list (`.ui-command__list`) of `.ui-command__item` rows (optional
+ * `data-value`), interleaved with `.ui-command__group` labels and an optional
+ * `.ui-command__empty`. The behavior owns ids, `role=combobox/listbox/option`,
+ * `aria-activedescendant`, a roving active item, substring filtering (hiding
+ * empty groups), full keyboard (Down/Up/Home/End/Enter/Escape), and pointer
+ * select. It emits `bronto:command:select` ({ detail: { value, label } }) on
+ * choose and `bronto:command:close` on Escape. SSR-safe, idempotent per
+ * instance; returns a cleanup function.
+ *
+ * Items are read from the DOM at init; re-run initCommand after replacing the
+ * command list so filtering/navigation see the current nodes.
+ *
+ * @param {import('./internal.js').DelegateOpts} [opts]
+ * @returns {import('./internal.js').Cleanup}
+ */
+export function initCommand({ root }?: import("./internal.js").DelegateOpts): import("./internal.js").Cleanup;
+export type CommandSelectDetail = {
+    /**
+     * The chosen command's value.
+     */
+    value: string;
+    /**
+     * The chosen command's visible label.
+     */
+    label: string;
+};
+//# sourceMappingURL=command.d.ts.map

package/behaviors/command.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["command.js"],"names":[],"mappings":"AAWA;;;;GAIG;AAEH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,uCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA+J3C;;;;;WAzLa,MAAM;;;;WACN,MAAM"}

package/behaviors/command.js

@@ -1,4 +1,19 @@
-import { hasDom, noop, bindOnce, nextFieldUid } from './internal.js';
+import {
+  hasDom,
+  resolveHost,
+  noop,
+  bindOnce,
+  nextFieldUid,
+  collectHosts,
+  scrollIntoViewSafe,
+  wrapIndex,
+} from './internal.js';
+
+/**
+ * @typedef {object} CommandSelectDetail
+ * @property {string} value The chosen command's value.
+ * @property {string} label The chosen command's visible label.
+ */
 
 /**
  * Command palette — filter + keyboard-navigate a DOM-authored command list.
@@ -17,13 +32,18 @@ import { hasDom, noop, bindOnce, nextFieldUid } from './internal.js';
  * select. It emits `bronto:command:select` ({ detail: { value, label } }) on
  * choose and `bronto:command:close` on Escape. SSR-safe, idempotent per
  * instance; returns a cleanup function.
+ *
+ * Items are read from the DOM at init; re-run initCommand after replacing the
+ * command list so filtering/navigation see the current nodes.
+ *
+ * @param {import('./internal.js').DelegateOpts} [opts]
+ * @returns {import('./internal.js').Cleanup}
  */
 export function initCommand({ root } = {}) {
   if (!hasDom()) return noop;
-  const host = root || document;
-  const palettes = [];
-  if (host !== document && host.matches?.('[data-bronto-command]')) palettes.push(host);
-  palettes.push(...(host.querySelectorAll?.('[data-bronto-command]') ?? []));
+  const host = resolveHost(root);
+  if (!host) return noop;
+  const palettes = collectHosts(host, '[data-bronto-command]');
   const cleanups = [];
 
   for (const box of palettes) {
@@ -58,11 +78,7 @@ export function initCommand({ root } = {}) {
       if (item) {
         active = items.indexOf(item);
         input.setAttribute('aria-activedescendant', item.id);
-        try {
-          item.scrollIntoView({ block: 'nearest' });
-        } catch {
-          /* headless — scrollIntoView is a pure affordance */
-        }
+        scrollIntoViewSafe(item);
       } else {
         active = -1;
         input.removeAttribute('aria-activedescendant');
@@ -101,11 +117,7 @@ export function initCommand({ root } = {}) {
     const move = (delta) => {
       const vis = visible();
       if (!vis.length) return;
-      const cur = vis.indexOf(items[active]);
-      let next = cur + delta;
-      if (next < 0) next = vis.length - 1;
-      if (next >= vis.length) next = 0;
-      setActive(vis[next]);
+      setActive(vis[wrapIndex(vis.indexOf(items[active]), delta, vis.length)]);
     };
 
     const choose = (item) => {

package/behaviors/connectors.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Draw + keep leader lines in sync. Each `[data-bronto-connector]` is an
+ * `.ui-connector` SVG overlaying a positioned container; `data-from`/`data-to`
+ * are the ids of the elements to connect. Optional `data-shape`
+ * (`straight`|`elbow`|`curve`), `data-from-side`/`data-to-side`
+ * (`top`|`right`|`bottom`|`left`|`center`), and `data-end` (`arrow`|`dot`|`none`).
+ *
+ * Bronto computes the geometry (the pure `@ponchia/ui/connectors` helpers) and
+ * sets the path; it owns no layout. Redraws on resize/scroll via a
+ * ResizeObserver + listeners. SSR-safe, idempotent per host; returns a cleanup
+ * that disconnects everything. Re-run after adding/removing connectors.
+ *
+ * @param {import('./internal.js').DelegateOpts} [opts]
+ * @returns {import('./internal.js').Cleanup}
+ */
+export function initConnectors({ root }?: import("./internal.js").DelegateOpts): import("./internal.js").Cleanup;
+//# sourceMappingURL=connectors.d.ts.map

package/behaviors/connectors.d.ts.map

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

package/behaviors/connectors.js

@@ -1,4 +1,4 @@
-import { hasDom, noop, bindOnce, byIdInHost } from './internal.js';
+import { hasDom, resolveHost, noop, bindOnce, byIdInHost, collectHosts } from './internal.js';
 import { connectRects, arrowHead, dotMark } from '../connectors/index.js';
 
 const SVGNS = 'http://www.w3.org/2000/svg';
@@ -14,13 +14,15 @@ const SVGNS = 'http://www.w3.org/2000/svg';
  * sets the path; it owns no layout. Redraws on resize/scroll via a
  * ResizeObserver + listeners. SSR-safe, idempotent per host; returns a cleanup
  * that disconnects everything. Re-run after adding/removing connectors.
+ *
+ * @param {import('./internal.js').DelegateOpts} [opts]
+ * @returns {import('./internal.js').Cleanup}
  */
 export function initConnectors({ root } = {}) {
   if (!hasDom()) return noop;
-  const host = root || document;
-  const connectors = [];
-  if (host !== document && host.matches?.('[data-bronto-connector]')) connectors.push(host);
-  connectors.push(...host.querySelectorAll('[data-bronto-connector]'));
+  const host = resolveHost(root);
+  if (!host) return noop;
+  const connectors = collectHosts(host, '[data-bronto-connector]');
   if (!connectors.length) return noop;
 
   const draw = () => {

package/behaviors/crosshair.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @typedef {object} CrosshairMoveDetail
+ * @property {number} x Pointer x within the plot, in pixels.
+ * @property {number} y Pointer y within the plot, in pixels.
+ * @property {number} fx Pointer x as a 0..1 fraction of the plot width.
+ * @property {number} fy Pointer y as a 0..1 fraction of the plot height.
+ */
+/**
+ * Track the pointer over a plot and drive a crosshair. Each
+ * `[data-bronto-crosshair]` is the plot; it contains a `.ui-crosshair` overlay.
+ * On pointer move the behavior sets `--crosshair-x/y` (pixels within the plot)
+ * on the overlay, marks it `.is-active`, and dispatches
+ * `bronto:crosshair:move` with `{ x, y, fx, fy }` (px + 0..1 fractions);
+ * `bronto:crosshair:leave` on exit.
+ *
+ * Bronto reports WHERE the pointer is — it does not find the nearest datum or
+ * map pixels to data values (that needs the host's scales). SSR-safe,
+ * idempotent per plot; returns a cleanup function.
+ *
+ * @param {import('./internal.js').DelegateOpts} [opts]
+ * @returns {import('./internal.js').Cleanup}
+ */
+export function initCrosshair({ root }?: import("./internal.js").DelegateOpts): import("./internal.js").Cleanup;
+export type CrosshairMoveDetail = {
+    /**
+     * Pointer x within the plot, in pixels.
+     */
+    x: number;
+    /**
+     * Pointer y within the plot, in pixels.
+     */
+    y: number;
+    /**
+     * Pointer x as a 0..1 fraction of the plot width.
+     */
+    fx: number;
+    /**
+     * Pointer y as a 0..1 fraction of the plot height.
+     */
+    fy: number;
+};
+//# sourceMappingURL=crosshair.d.ts.map

package/behaviors/crosshair.d.ts.map

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

package/behaviors/crosshair.js

@@ -1,4 +1,12 @@
-import { hasDom, noop, bindOnce } from './internal.js';
+import { hasDom, resolveHost, noop, bindOnce, collectHosts } from './internal.js';
+
+/**
+ * @typedef {object} CrosshairMoveDetail
+ * @property {number} x Pointer x within the plot, in pixels.
+ * @property {number} y Pointer y within the plot, in pixels.
+ * @property {number} fx Pointer x as a 0..1 fraction of the plot width.
+ * @property {number} fy Pointer y as a 0..1 fraction of the plot height.
+ */
 
 /**
  * Track the pointer over a plot and drive a crosshair. Each
@@ -11,13 +19,15 @@ import { hasDom, noop, bindOnce } from './internal.js';
  * Bronto reports WHERE the pointer is — it does not find the nearest datum or
  * map pixels to data values (that needs the host's scales). SSR-safe,
  * idempotent per plot; returns a cleanup function.
+ *
+ * @param {import('./internal.js').DelegateOpts} [opts]
+ * @returns {import('./internal.js').Cleanup}
  */
 export function initCrosshair({ root } = {}) {
   if (!hasDom()) return noop;
-  const host = root || document;
-  const plots = [];
-  if (host !== document && host.matches?.('[data-bronto-crosshair]')) plots.push(host);
-  plots.push(...host.querySelectorAll('[data-bronto-crosshair]'));
+  const host = resolveHost(root);
+  if (!host) return noop;
+  const plots = collectHosts(host, '[data-bronto-crosshair]');
   if (!plots.length) return noop;
 
   const cleanups = [];
@@ -29,7 +39,14 @@ export function initCrosshair({ root } = {}) {
       if (!r.width || !r.height) return;
       const x = e.clientX - r.left;
       const y = e.clientY - r.top;
-      overlay.style.setProperty('--crosshair-x', `${x}px`);
+      // The CSS positions the vertical rule / readout with a *logical* inset
+      // (inset-inline-start), so --crosshair-x must be the distance from the
+      // inline-start edge — the physical left in LTR, the physical right in RTL.
+      // 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.classList.add('is-active');
       plot.dispatchEvent(

package/behaviors/dialog.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Wire native <dialog> open/close glue (the one bit <dialog> can't do
+ * declaratively). Click `[data-bronto-open="dialogId"]` calls
+ * `showModal()` on `#dialogId`; click `[data-bronto-close]` closes the
+ * nearest enclosing <dialog>. Clicking the backdrop of a dialog that has
+ * `[data-bronto-dialog-light]` closes it too. On open the trigger is
+ * remembered and focus is returned to it on *every* close path (Esc,
+ * close button, backdrop light-dismiss, programmatic) via the native
+ * `close` event, so keyboard/SR users are never dropped at `<body>`.
+ * SSR-safe and idempotent; returns cleanup.
+ *
+ * `root` scopes delegated triggers (default `document`). Controlled targets are
+ * resolved root-first, then document-wide, so scoped islands win duplicate-id
+ * conflicts without breaking body/portal-mounted overlays.
+ *
+ * @param {import('./internal.js').DelegateOpts} [opts]
+ * @returns {import('./internal.js').Cleanup}
+ */
+export function initDialog({ root }?: import("./internal.js").DelegateOpts): import("./internal.js").Cleanup;
+//# sourceMappingURL=dialog.d.ts.map

package/behaviors/dialog.d.ts.map

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

package/behaviors/dialog.js

@@ -1,4 +1,4 @@
-import { hasDom, noop, bindOnce, byIdInHost } from './internal.js';
+import { hasDom, resolveHost, noop, bindOnce, byIdInHost } from './internal.js';
 
 /**
  * Wire native <dialog> open/close glue (the one bit <dialog> can't do
@@ -14,10 +14,14 @@ import { hasDom, noop, bindOnce, byIdInHost } from './internal.js';
  * `root` scopes delegated triggers (default `document`). Controlled targets are
  * resolved root-first, then document-wide, so scoped islands win duplicate-id
  * conflicts without breaking body/portal-mounted overlays.
+ *
+ * @param {import('./internal.js').DelegateOpts} [opts]
+ * @returns {import('./internal.js').Cleanup}
  */
 export function initDialog({ root } = {}) {
   if (!hasDom()) return noop;
-  const host = root || document;
+  const host = resolveHost(root);
+  if (!host) return noop;
   const managedDialogs = new WeakSet();
   const canManageDialog = (dlg, origin) => host.contains(origin) || managedDialogs.has(dlg);
 

package/behaviors/disclosure.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Disclosure: a `[data-bronto-disclosure]` trigger toggles the element
+ * referenced by its `aria-controls` id, keeping `aria-expanded` and the
+ * panel's `hidden` attribute in sync.
+ *
+ * @param {import('./internal.js').DelegateOpts} [opts]
+ * @returns {import('./internal.js').Cleanup}
+ */
+export function initDisclosure({ root }?: import("./internal.js").DelegateOpts): import("./internal.js").Cleanup;
+//# sourceMappingURL=disclosure.d.ts.map

package/behaviors/disclosure.d.ts.map

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