npm - @ponchia/ui - Versions diffs - 0.6.0 → 0.6.4 - Mend

@ponchia/ui 0.6.0 → 0.6.4

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

package/CHANGELOG.md +82 -4
package/README.md +1 -1
package/annotations/index.d.ts.map +1 -1
package/annotations/index.js +36 -33
package/behaviors/carousel.d.ts +28 -0
package/behaviors/carousel.d.ts.map +1 -0
package/behaviors/carousel.js +3 -0
package/behaviors/combobox.d.ts +40 -0
package/behaviors/combobox.d.ts.map +1 -0
package/behaviors/combobox.js +71 -20
package/behaviors/command.d.ts +41 -0
package/behaviors/command.d.ts.map +1 -0
package/behaviors/command.js +9 -0
package/behaviors/connectors.d.ts +17 -0
package/behaviors/connectors.d.ts.map +1 -0
package/behaviors/connectors.js +3 -0
package/behaviors/crosshair.d.ts +42 -0
package/behaviors/crosshair.d.ts.map +1 -0
package/behaviors/crosshair.js +19 -1
package/behaviors/dialog.d.ts +20 -0
package/behaviors/dialog.d.ts.map +1 -0
package/behaviors/dialog.js +3 -0
package/behaviors/disclosure.d.ts +10 -0
package/behaviors/disclosure.d.ts.map +1 -0
package/behaviors/disclosure.js +3 -0
package/behaviors/dismissible.d.ts +10 -0
package/behaviors/dismissible.d.ts.map +1 -0
package/behaviors/dismissible.js +3 -0
package/behaviors/forms.d.ts +27 -0
package/behaviors/forms.d.ts.map +1 -0
package/behaviors/forms.js +18 -5
package/behaviors/glyph.d.ts +21 -0
package/behaviors/glyph.d.ts.map +1 -0
package/behaviors/glyph.js +82 -4
package/behaviors/index.d.ts +31 -237
package/behaviors/index.d.ts.map +1 -0
package/behaviors/index.js +17 -0
package/behaviors/inert.d.ts +20 -0
package/behaviors/inert.d.ts.map +1 -0
package/behaviors/inert.js +46 -0
package/behaviors/internal.d.ts +25 -0
package/behaviors/internal.d.ts.map +1 -0
package/behaviors/internal.js +30 -1
package/behaviors/legend.d.ts +35 -0
package/behaviors/legend.d.ts.map +1 -0
package/behaviors/legend.js +9 -0
package/behaviors/menu.d.ts +16 -0
package/behaviors/menu.d.ts.map +1 -0
package/behaviors/menu.js +3 -0
package/behaviors/modal.d.ts +41 -0
package/behaviors/modal.d.ts.map +1 -0
package/behaviors/modal.js +124 -0
package/behaviors/popover.d.ts +28 -0
package/behaviors/popover.d.ts.map +1 -0
package/behaviors/popover.js +17 -17
package/behaviors/spotlight.d.ts +17 -0
package/behaviors/spotlight.d.ts.map +1 -0
package/behaviors/spotlight.js +3 -0
package/behaviors/table.d.ts +36 -0
package/behaviors/table.d.ts.map +1 -0
package/behaviors/table.js +48 -8
package/behaviors/tabs.d.ts +20 -0
package/behaviors/tabs.d.ts.map +1 -0
package/behaviors/tabs.js +3 -0
package/behaviors/theme.d.ts +54 -0
package/behaviors/theme.d.ts.map +1 -0
package/behaviors/theme.js +17 -0
package/behaviors/toast.d.ts +49 -0
package/behaviors/toast.d.ts.map +1 -0
package/behaviors/toast.js +34 -2
package/classes/classes.json +747 -15
package/classes/index.d.ts +118 -3
package/classes/index.js +264 -66
package/connectors/index.d.ts +12 -0
package/connectors/index.d.ts.map +1 -1
package/connectors/index.js +23 -2
package/css/app.css +26 -0
package/css/bullet.css +108 -0
package/css/code.css +98 -0
package/css/content.css +15 -2
package/css/crosshair.css +7 -7
package/css/diff.css +153 -0
package/css/disclosure.css +18 -4
package/css/dots.css +246 -9
package/css/feedback.css +39 -7
package/css/forms.css +71 -3
package/css/legend.css +5 -2
package/css/motion.css +79 -14
package/css/overlay.css +59 -2
package/css/primitives.css +67 -8
package/css/report.css +43 -4
package/css/sidenote.css +67 -0
package/css/skins.css +9 -0
package/css/spark.css +76 -0
package/css/table.css +16 -3
package/css/term.css +110 -0
package/css/textref.css +63 -0
package/css/toc.css +91 -0
package/css/tokens.css +14 -1
package/css/tree.css +134 -0
package/dist/bronto.css +1 -1
package/dist/css/analytical.css +1 -1
package/dist/css/app.css +1 -1
package/dist/css/bullet.css +1 -0
package/dist/css/code.css +1 -0
package/dist/css/content.css +1 -1
package/dist/css/crosshair.css +1 -1
package/dist/css/diff.css +1 -0
package/dist/css/disclosure.css +1 -1
package/dist/css/dots.css +1 -1
package/dist/css/feedback.css +1 -1
package/dist/css/forms.css +1 -1
package/dist/css/legend.css +1 -1
package/dist/css/motion.css +1 -1
package/dist/css/overlay.css +1 -1
package/dist/css/primitives.css +1 -1
package/dist/css/report.css +1 -1
package/dist/css/sidenote.css +1 -0
package/dist/css/skins.css +1 -1
package/dist/css/spark.css +1 -0
package/dist/css/table.css +1 -1
package/dist/css/term.css +1 -0
package/dist/css/textref.css +1 -0
package/dist/css/toc.css +1 -0
package/dist/css/tokens.css +1 -1
package/dist/css/tree.css +1 -0
package/docs/annotations.md +39 -0
package/docs/architecture.md +2 -3
package/docs/bullet.md +78 -0
package/docs/code.md +76 -0
package/docs/d2.md +4 -3
package/docs/diff.md +146 -0
package/docs/dots.md +146 -0
package/docs/glyphs.md +114 -0
package/docs/legends.md +8 -4
package/docs/mermaid.md +21 -4
package/docs/reference.md +168 -8
package/docs/reporting.md +49 -17
package/docs/sidenote.md +64 -0
package/docs/spark.md +78 -0
package/docs/stability.md +1 -0
package/docs/term.md +81 -0
package/docs/textref.md +78 -0
package/docs/theming.md +44 -5
package/docs/toc.md +83 -0
package/docs/tree.md +74 -0
package/docs/usage.md +264 -23
package/docs/vega.md +22 -3
package/glyphs/glyphs.d.ts +61 -0
package/glyphs/glyphs.js +600 -31
package/llms.txt +169 -15
package/package.json +51 -7
package/qwik/index.d.ts +4 -2
package/qwik/index.d.ts.map +1 -1
package/qwik/index.js +10 -0
package/react/index.d.ts +4 -2
package/react/index.d.ts.map +1 -1
package/react/index.js +6 -0
package/solid/index.d.ts +6 -2
package/solid/index.d.ts.map +1 -1
package/solid/index.js +6 -0
package/tokens/skins.js +22 -9

package/behaviors/crosshair.js CHANGED Viewed

@@ -1,5 +1,13 @@
 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
  * `[data-bronto-crosshair]` is the plot; it contains a `.ui-crosshair` overlay.
@@ -11,6 +19,9 @@ import { hasDom, resolveHost, noop, bindOnce, collectHosts } 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;
@@ -28,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 ADDED Viewed

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

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

package/behaviors/dialog.js CHANGED Viewed

@@ -14,6 +14,9 @@ import { hasDom, resolveHost, 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;

package/behaviors/disclosure.d.ts ADDED Viewed

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

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

package/behaviors/disclosure.js CHANGED Viewed

@@ -4,6 +4,9 @@ import { hasDom, resolveHost, noop, bindOnce, byIdInHost } from './internal.js';
  * 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 } = {}) {
   if (!hasDom()) return noop;

package/behaviors/dismissible.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+/**
+ * Click on `[data-bronto-dismiss]` removes the nearest ancestor matching
+ * `[data-bronto-dismissible]` (or the selector given as the attribute
+ * value). Emits a cancelable `bronto:dismiss` event first.
+ *
+ * @param {import('./internal.js').DelegateOpts} [opts]
+ * @returns {import('./internal.js').Cleanup}
+ */
+export function dismissible({ root }?: import("./internal.js").DelegateOpts): import("./internal.js").Cleanup;
+//# sourceMappingURL=dismissible.d.ts.map

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

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

package/behaviors/dismissible.js CHANGED Viewed

@@ -4,6 +4,9 @@ import { hasDom, resolveHost, noop, bindOnce, closestSafe } from './internal.js'
  * Click on `[data-bronto-dismiss]` removes the nearest ancestor matching
  * `[data-bronto-dismissible]` (or the selector given as the attribute
  * value). Emits a cancelable `bronto:dismiss` event first.
+ *
+ * @param {import('./internal.js').DelegateOpts} [opts]
+ * @returns {import('./internal.js').Cleanup}
  */
 export function dismissible({ root } = {}) {
   if (!hasDom()) return noop;

package/behaviors/forms.d.ts ADDED Viewed

@@ -0,0 +1,27 @@
+/**
+ * Accessible form validation glue for `<form data-bronto-validate>`.
+ * Progressive enhancement over the native Constraint Validation API —
+ * the framework already ships the `[aria-invalid]` / `.ui-hint--error`
+ * styling; this wires the a11y plumbing every consumer would otherwise
+ * re-implement (and usually get wrong):
+ *
+ *  - suppresses the native error bubbles (`form.noValidate`),
+ *  - on blur and on submit sets `aria-invalid` and writes the browser's
+ *    `validationMessage` into the field's error slot
+ *    (`[data-bronto-error]` inside the `.ui-field`, falling back to a
+ *    `.ui-hint`), linked via `aria-describedby`. When it falls back to a
+ *    `.ui-hint` the original help text is snapshotted and restored once the
+ *    field is valid again (so the error does not eat the help permanently); a
+ *    dedicated empty `[data-bronto-error]` node is still the recommended slot,
+ *  - on an invalid submit, fills the form's
+ *    `[data-bronto-error-summary]` (a `.ui-error-summary`) with
+ *    in-page links to each bad field, focuses it, and blocks submit.
+ *
+ * Pure enhancement: with JS off the form still submits and the browser
+ * validates natively. SSR-safe, idempotent; returns a cleanup function.
+ *
+ * @param {import('./internal.js').DelegateOpts} [opts]
+ * @returns {import('./internal.js').Cleanup}
+ */
+export function initFormValidation({ root }?: import("./internal.js").DelegateOpts): import("./internal.js").Cleanup;
+//# sourceMappingURL=forms.d.ts.map

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

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

package/behaviors/forms.js CHANGED Viewed

@@ -21,6 +21,9 @@ import { hasDom, resolveHost, noop, bindOnce, nextFieldUid, collectHosts } from
  *
  * Pure enhancement: with JS off the form still submits and the browser
  * validates natively. SSR-safe, idempotent; returns a cleanup function.
+ *
+ * @param {import('./internal.js').DelegateOpts} [opts]
+ * @returns {import('./internal.js').Cleanup}
  */
 export function initFormValidation({ root } = {}) {
   if (!hasDom()) return noop;
@@ -68,16 +71,26 @@ export function initFormValidation({ root } = {}) {
     if (!control.willValidate) return true;
     const ok = control.validity.valid;
     const slot = slotFor(control);
-    const isHint = slot?.classList.contains('ui-hint');
+    // Decide the slot TYPE by the `[data-bronto-error]` attribute, NOT the
+    // `.ui-hint` class: the canonical markup is `<p class="ui-hint"
+    // data-bronto-error>`, which carries BOTH. Keying off `.ui-hint` sent that
+    // dedicated error node down the help-hint branch, which never unlink()s — so
+    // the field kept a dangling aria-describedby to an empty error node after it
+    // was fixed (component-audit C6). Only a *borrowed* plain `.ui-hint` (a help
+    // slot with no dedicated error node) snapshots/restores its help text and
+    // stays linked in the valid state.
+    const dedicated = !!slot?.matches?.('[data-bronto-error]');
+    const hasHintClass = !!slot?.classList.contains('ui-hint');
+    const borrowedHint = hasHintClass && !dedicated;
     if (ok) {
       control.removeAttribute('aria-invalid');
       if (slot) {
-        if (isHint) {
+        if (hasHintClass) slot.classList.remove('ui-hint--error');
+        if (borrowedHint) {
           // Restore the snapshotted help text (or clear if there was none); a
           // help-bearing hint stays linked via aria-describedby (it describes
           // the field in the valid state too).
           slot.textContent = hintHelp.get(slot) ?? '';
-          slot.classList.remove('ui-hint--error');
         } else {
           // Dedicated error node: clear it and drop the now-stale describedby
           // so AT doesn't announce an empty error association.
@@ -88,9 +101,9 @@ export function initFormValidation({ root } = {}) {
     } else {
       control.setAttribute('aria-invalid', 'true');
       if (slot) {
-        if (isHint && !hintHelp.has(slot)) hintHelp.set(slot, slot.textContent);
+        if (borrowedHint && !hintHelp.has(slot)) hintHelp.set(slot, slot.textContent);
         slot.textContent = control.validationMessage;
-        if (isHint) slot.classList.add('ui-hint--error');
+        if (hasHintClass) slot.classList.add('ui-hint--error');
         link(control, slot);
       }
     }

package/behaviors/glyph.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+/**
+ * Expand `[data-bronto-glyph="name"]` placeholders into a `.ui-dotmatrix`
+ * grid of GLYPH_SIZE² cells — the DOM counterpart to renderGlyph() from
+ * `@ponchia/ui/glyphs`, for when you'd rather drop a placeholder than inline
+ * the markup. Decorative by default (`aria-hidden`); add
+ * `data-bronto-glyph-label` to expose it as `role="img"`. An unknown glyph
+ * name is left untouched. Idempotent (skips an already-expanded host); the
+ * returned cleanup removes the cells and restores the original attributes.
+ *
+ * `data-bronto-glyph-render="mask"` takes the cheap one-node path instead:
+ * the host becomes a single `.ui-icon` masked by the glyph (no GLYPH_SIZE²
+ * cells), inheriting `currentColor` and scaling with the text — the DOM
+ * counterpart to renderGlyph's `render: 'mask'`, for an icon in every table
+ * row where 256 cells per glyph is too heavy. `data-bronto-glyph-size` sets
+ * `--icon-size`. The cell-mode attributes (solid/anim) don't apply.
+ *
+ * @param {import('./internal.js').DelegateOpts} [opts]
+ * @returns {import('./internal.js').Cleanup}
+ */
+export function initDotGlyph({ root }?: import("./internal.js").DelegateOpts): import("./internal.js").Cleanup;
+//# sourceMappingURL=glyph.d.ts.map

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

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

package/behaviors/glyph.js CHANGED Viewed

@@ -1,11 +1,18 @@
 import { hasDom, resolveHost, noop, collectHosts } from './internal.js';
-import { GLYPH_SIZE, glyphCells } from '../glyphs/glyphs.js';
+import { GLYPH_SIZE, glyphCells, glyphMask } from '../glyphs/glyphs.js';
 function restoreAttr(el, name, prev) {
   if (prev === null) el.removeAttribute(name);
   else el.setAttribute(name, prev);
 }
+// `dot`/`gap`/`size` land in inline CSS, so allow only length/calc syntax —
+// drop anything with a `;`/`{` that could open a second declaration (mirrors
+// glyphs.js cssLen). Used for the mask path's --icon-size.
+function cssLen(v) {
+  return v && /^[\w.%+\-*/()\s,]+$/.test(v) ? v : '';
+}
 /**
  * Expand `[data-bronto-glyph="name"]` placeholders into a `.ui-dotmatrix`
  * grid of GLYPH_SIZE² cells — the DOM counterpart to renderGlyph() from
@@ -14,6 +21,16 @@ function restoreAttr(el, name, prev) {
  * `data-bronto-glyph-label` to expose it as `role="img"`. An unknown glyph
  * name is left untouched. Idempotent (skips an already-expanded host); the
  * returned cleanup removes the cells and restores the original attributes.
+ *
+ * `data-bronto-glyph-render="mask"` takes the cheap one-node path instead:
+ * the host becomes a single `.ui-icon` masked by the glyph (no GLYPH_SIZE²
+ * cells), inheriting `currentColor` and scaling with the text — the DOM
+ * counterpart to renderGlyph's `render: 'mask'`, for an icon in every table
+ * row where 256 cells per glyph is too heavy. `data-bronto-glyph-size` sets
+ * `--icon-size`. The cell-mode attributes (solid/anim) don't apply.
+ *
+ * @param {import('./internal.js').DelegateOpts} [opts]
+ * @returns {import('./internal.js').Cleanup}
  */
 export function initDotGlyph({ root } = {}) {
   if (!hasDom()) return noop;
@@ -23,14 +40,54 @@ export function initDotGlyph({ root } = {}) {
   const cleanups = [];
   for (const el of els) {
+    const name = el.getAttribute('data-bronto-glyph');
+    const label = el.getAttribute('data-bronto-glyph-label');
+    // One-node mask path — the icon-at-scale counterpart to the 256-cell grid.
+    if (el.getAttribute('data-bronto-glyph-render') === 'mask') {
+      if (el.classList.contains('ui-icon') && el.style.getPropertyValue('--icon-mask')) continue;
+      const mask = glyphMask(name);
+      if (!mask) continue; // unknown glyph — leave the placeholder as-is
+      const hadIcon = el.classList.contains('ui-icon');
+      const hadMask = el.style.getPropertyValue('--icon-mask');
+      const hadSize = el.style.getPropertyValue('--icon-size');
+      const hadAriaHiddenM = el.getAttribute('aria-hidden');
+      const hadRoleM = el.getAttribute('role');
+      const hadAriaLabelM = el.getAttribute('aria-label');
+      const sizeM = cssLen(el.getAttribute('data-bronto-glyph-size'));
+      el.classList.add('ui-icon');
+      el.style.setProperty('--icon-mask', mask);
+      if (sizeM) el.style.setProperty('--icon-size', sizeM);
+      if (label) {
+        el.setAttribute('role', 'img');
+        el.setAttribute('aria-label', label);
+        el.removeAttribute('aria-hidden');
+      } else {
+        el.setAttribute('aria-hidden', 'true');
+      }
+      cleanups.push(() => {
+        if (!hadIcon) el.classList.remove('ui-icon');
+        if (hadMask) el.style.setProperty('--icon-mask', hadMask);
+        else el.style.removeProperty('--icon-mask');
+        if (sizeM && !hadSize) el.style.removeProperty('--icon-size');
+        else if (hadSize) el.style.setProperty('--icon-size', hadSize);
+        restoreAttr(el, 'aria-hidden', hadAriaHiddenM);
+        restoreAttr(el, 'role', hadRoleM);
+        restoreAttr(el, 'aria-label', hadAriaLabelM);
+        if (el.getAttribute('class') === '') el.removeAttribute('class');
+        if (el.getAttribute('style') === '') el.removeAttribute('style');
+      });
+      continue;
+    }
     // Scope to DIRECT-child cells (the ones we append) — so a placeholder that
     // legitimately nests its own .ui-dotmatrix is neither mis-read as already
     // expanded here nor have its inner cells removed by cleanup below.
     if (el.querySelector(':scope > .ui-dotmatrix__cell')) continue; // already expanded
-    const cells = glyphCells(el.getAttribute('data-bronto-glyph'));
+    const cells = glyphCells(name);
     if (!cells.length) continue; // unknown glyph — leave the placeholder as-is
-    const label = el.getAttribute('data-bronto-glyph-label');
     // `data-bronto-glyph-solid` → square, gapless pixel glyph (legible small),
     // the DOM counterpart to renderGlyph's `solid` option. Implies glyph-only.
     const solid = el.hasAttribute('data-bronto-glyph-solid');
@@ -59,6 +116,25 @@ export function initDotGlyph({ root } = {}) {
       el.style.setProperty('--dotmatrix-dot-radius', '0');
       el.style.setProperty('--dotmatrix-gap', '0');
     }
+    // Without a track size the grid cells default to `1fr`, so the 16×16 matrix
+    // balloons to fill its container (full-bleed) — asymmetric with the mask
+    // path's safe 1em. If the author set no `--dotmatrix-dot` (inline OR via the
+    // cascade), default it to an intrinsic icon scale so a forgotten size
+    // degrades to ~icon, not full-bleed. (component audit C9.)
+    const authoredDot =
+      el.style.getPropertyValue('--dotmatrix-dot') ||
+      (typeof getComputedStyle === 'function'
+        ? getComputedStyle(el).getPropertyValue('--dotmatrix-dot').trim()
+        : '');
+    const setDefaultDot = !authoredDot;
+    let setDefaultGap = false;
+    if (setDefaultDot) {
+      el.style.setProperty('--dotmatrix-dot', '0.08em');
+      if (!solid && !hadGap) {
+        el.style.setProperty('--dotmatrix-gap', '0.02em'); // tight, so it reads as one glyph
+        setDefaultGap = true;
+      }
+    }
     if (label) {
       el.setAttribute('role', 'img');
       el.setAttribute('aria-label', label);
@@ -93,6 +169,8 @@ export function initDotGlyph({ root } = {}) {
         if (hadGap) el.style.setProperty('--dotmatrix-gap', hadGap);
         else el.style.removeProperty('--dotmatrix-gap');
       }
+      if (setDefaultDot) el.style.removeProperty('--dotmatrix-dot');
+      if (setDefaultGap) el.style.removeProperty('--dotmatrix-gap');
       if (hadCols) el.style.setProperty('--dotmatrix-cols', hadCols);
       else el.style.removeProperty('--dotmatrix-cols');
       restoreAttr(el, 'aria-hidden', hadAriaHidden);

package/behaviors/index.d.ts CHANGED Viewed

@@ -1,237 +1,31 @@
-/** @ponchia/ui — optional, framework-agnostic behaviors. */
-/** Cleanup function returned by every initializer. */
-export type Cleanup = () => void;
-export interface ThemeStorageOpts {
-  /** localStorage key for the persisted theme. Default: "bronto-theme". */
-  storageKey?: string;
-}
-export interface ApplyThemeOpts extends ThemeStorageOpts {
-  /** Element to set `data-theme` on. Default: <html>. */
-  root?: Element;
-}
-export interface DelegateOpts {
-  /** Event-delegation root; also scopes which controls are queried. Default: document. */
-  root?: Document | Element;
-}
-/** `bronto:themechange` CustomEvent detail. */
-export interface ThemeChangeDetail {
-  theme: 'light' | 'dark';
-}
-/** Apply the persisted theme to <html data-theme>. Call before paint. */
-export declare function applyStoredTheme(opts?: ApplyThemeOpts): void;
-/**
- * Wire `[data-bronto-theme-toggle]` controls. Theme is always applied to
- * <html>; `root` only scopes delegation/queried controls. Dispatches
- * `bronto:themechange` on <html>. Returns a cleanup function.
- */
-export declare function initThemeToggle(opts?: ThemeStorageOpts & DelegateOpts): Cleanup;
-/** Wire `[data-bronto-dismiss]` controls. Returns a cleanup function. */
-export declare function dismissible(opts?: DelegateOpts): Cleanup;
-/** Wire `[data-bronto-disclosure]` triggers. Returns a cleanup function. */
-export declare function initDisclosure(opts?: DelegateOpts): Cleanup;
-/**
- * Close affordances (Escape, outside-click, close-on-activate) for a
- * native `<details data-bronto-menu>` dropdown holding a `.ui-menu`.
- * Not a full ARIA menu by design. Returns a cleanup function.
- */
-export declare function initMenu(opts?: DelegateOpts): Cleanup;
-/**
- * Accessible validation glue for `<form data-bronto-validate>`:
- * progressive enhancement over the Constraint Validation API. Sets
- * `aria-invalid`, writes `validationMessage` into the field's
- * `[data-bronto-error]` / `.ui-hint` slot (linked via
- * `aria-describedby`), and on invalid submit fills the form's
- * `[data-bronto-error-summary]` with focusable links and blocks submit.
- * Works without JS (native validation). Returns a cleanup function.
- */
-export declare function initFormValidation(opts?: DelegateOpts): Cleanup;
-/**
- * Editable combobox with a filtered listbox popup (WAI-ARIA APG
- * pattern), dependency-free and CSS-anchored. Wires
- * `[data-bronto-combobox]` (input `role=combobox` +
- * `.ui-combobox__list` of `role=option`): ids, `aria-expanded` /
- * `aria-controls` / `aria-activedescendant`, type-to-filter, full
- * keyboard, pointer select, outside-click close. Emits `bronto:change`
- * ({ detail: { value } }) on selection. SSR-safe, idempotent per
- * instance. Returns a cleanup function.
- */
-export declare function initCombobox(opts?: DelegateOpts): Cleanup;
-/**
- * Collision-aware popover, dependency-free. A `[data-bronto-popover]`
- * trigger toggles the `.ui-popover` panel it names; the panel flips
- * above when it would overflow the viewport and its inline edge is
- * clamped on-screen. Uses the native top layer when the panel has
- * `popover` and the Popover API exists, else an `.is-open` class.
- * Manages `aria-expanded`/`aria-controls`, Escape + outside-click
- * close, scroll/resize reposition. Returns a cleanup function.
- */
-export declare function initPopover(opts?: DelegateOpts): Cleanup;
-/**
- * Client-side sortable + selectable data table for
- * `[data-bronto-sortable]`. Header `.ui-table__sort` / `th[data-sort]`
- * cycles `aria-sort` and reorders the tbody (numeric- or
- * locale-string-aware); `[data-bronto-select-all]` toggles
- * `[data-bronto-select]` rows + `aria-selected` with synced
- * checked/indeterminate state. Emits `bronto:selectionchange`
- * ({ detail: { count } }). SSR-safe, idempotent per table. Returns a
- * cleanup function.
- */
-export declare function initTableSort(opts?: DelegateOpts): Cleanup;
-/**
- * Wire `[data-bronto-tabs]` groups with the WAI-ARIA Tabs keyboard
- * pattern (roving tabindex, Arrow/Home/End, aria-selected, panel sync).
- * Returns a cleanup function.
- */
-export declare function initTabs(opts?: DelegateOpts): Cleanup;
-/**
- * Wire native <dialog> open/close glue: `[data-bronto-open="id"]`,
- * `[data-bronto-close]`, and backdrop light-dismiss for dialogs marked
- * `[data-bronto-dialog-light]`. `root` scopes delegated controls; dialog ids
- * resolve root-first, then document-wide for body/portal-mounted overlays.
- * Returns a cleanup function.
- */
-export declare function initDialog(opts?: DelegateOpts): Cleanup;
-/**
- * Image carousel / gallery built on CSS scroll-snap (touch/trackpad swipe
- * is the browser's). Wires `[data-bronto-carousel]`: prev/next
- * (`[data-bronto-carousel-prev|next]`), keyboard (Arrow/Home/End on the
- * focused `.ui-carousel__viewport`), a `.ui-carousel__thumb` strip with
- * `aria-current` sync, the `.ui-carousel__status` counter, and ARIA. Keeps
- * a JS index in sync with the scroll position both ways (via
- * IntersectionObserver where available). `data-bronto-carousel-loop` wraps
- * at the ends; `data-bronto-carousel-label` names the region. A
- * full-screen lightbox is the same markup inside a native
- * `<dialog class="ui-lightbox">` opened by `initDialog` (focus-trap/Escape
- * come from the dialog). Emits `bronto:change` ({ detail: { index } }).
- * SSR-safe, idempotent per carousel. Returns a cleanup function.
- */
-export declare function initCarousel(opts?: DelegateOpts): Cleanup;
-export interface ToastOpts {
-  /** Status tone — maps to `ui-toast--<tone>`. */
-  tone?: 'accent' | 'success' | 'warning' | 'danger' | 'info';
-  /** Optional uppercase label rendered above the message. */
-  title?: string;
-  /** Auto-dismiss delay in ms. 0 keeps it until dismissed. Default: 4000. */
-  duration?: number;
-  /**
-   * Route to the assertive live region so AT interrupts immediately.
-   * Defaults to `true` when `tone === 'danger'`.
-   */
-  assertive?: boolean;
-  /** Render a dismiss button on the toast. */
-  closable?: boolean;
-}
-/**
- * Push a transient toast into a shared, body-anchored stack. Returns a
- * function that dismisses it early. No-op (returns noop) without a DOM.
- */
-export declare function toast(message: string, opts?: ToastOpts): Cleanup;
-/**
- * Expand `[data-bronto-glyph="name"]` placeholders into a `.ui-dotmatrix`
- * grid of cells — the DOM counterpart to `renderGlyph` from
- * `@ponchia/ui/glyphs`. Decorative by default (`aria-hidden`); add
- * `data-bronto-glyph-label` to expose it as `role="img"`. Unknown glyph names
- * are left untouched. SSR-safe, idempotent (skips an already-expanded host).
- * Returns a cleanup that removes the cells and restores the original
- * attributes.
- */
-export declare function initDotGlyph(opts?: DelegateOpts): Cleanup;
-/** `bronto:legend:toggle` CustomEvent detail. `series` is the entry's
- *  `data-series`, or its 0-based index when unset. `active` is the new state
- *  (`true` ⇒ series shown). */
-export interface LegendToggleDetail {
-  series: string | number;
-  active: boolean;
-}
-/**
- * Wire `[data-bronto-legend]` interactive legends. Each `.ui-legend__item` is a
- * `<button aria-pressed>`; activating it flips `aria-pressed`, toggles
- * `.is-inactive`, and dispatches `bronto:legend:toggle`
- * ({@link LegendToggleDetail}) on the legend. Bronto owns the control + its
- * state only — the host hides its own series and owns any `aria-live`
- * announcement (`aria-pressed="true"` ⇒ series shown). SSR-safe, idempotent per
- * host. Returns a cleanup function.
- */
-export declare function initLegend(opts?: DelegateOpts): Cleanup;
-/**
- * Draw + keep leader lines in sync. Each `[data-bronto-connector]` is a
- * `.ui-connector` SVG overlaying a positioned container; `data-from`/`data-to`
- * are the ids of the elements to connect (with optional `data-shape`,
- * `data-from-side`/`data-to-side`, `data-end`). Computes geometry via the
- * `@ponchia/ui/connectors` helpers and redraws on resize/scroll. Bronto owns no
- * layout. SSR-safe, idempotent per host; returns a cleanup that disconnects
- * observers/listeners. Re-run after adding/removing connectors.
- */
-export declare function initConnectors(opts?: DelegateOpts): Cleanup;
-/**
- * Position a spotlight cutout over a target. Each `[data-bronto-spotlight]` is a
- * `.ui-spotlight` overlay; `data-target` is the id of the element to highlight.
- * Sets `--spot-x/y/w/h` and re-places on resize/scroll and when `data-target`
- * changes. NOT a tour engine — the host owns step order/advancing/visibility.
- * SSR-safe, idempotent per host; returns a cleanup function.
- */
-export declare function initSpotlight(opts?: DelegateOpts): Cleanup;
-/** `bronto:crosshair:move` CustomEvent detail — pointer position over the plot
- *  in pixels and as 0..1 fractions. Bronto reports where; mapping to data is
- *  the host's. */
-export interface CrosshairMoveDetail {
-  x: number;
-  y: number;
-  fx: number;
-  fy: number;
-}
-/**
- * Track the pointer over `[data-bronto-crosshair]` plots and drive a contained
- * `.ui-crosshair` overlay: sets `--crosshair-x/y` (px), marks `.is-active`, and
- * dispatches `bronto:crosshair:move` ({@link CrosshairMoveDetail}) /
- * `bronto:crosshair:leave`. Reports the pointer position only — it does not find
- * the nearest datum or map pixels to data. SSR-safe, idempotent per plot;
- * returns a cleanup function.
- */
-export declare function initCrosshair(opts?: DelegateOpts): Cleanup;
-/** `bronto:command:select` CustomEvent detail — the chosen command's value and
- *  visible label. The host executes it; Bronto only filters and navigates. */
-export interface CommandSelectDetail {
-  value: string;
-  label: string;
-}
-/**
- * Filter + keyboard-navigate a DOM-authored command list inside
- * `[data-bronto-command]` (the `.ui-command` shell). 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. Emits
- * `bronto:command:select` ({@link CommandSelectDetail}) on choose and
- * `bronto:command:close` on Escape; the host owns the action registry, routing,
- * and execution. No global Cmd/Ctrl+K. SSR-safe, idempotent per instance;
- * returns a cleanup function.
- */
-export declare function initCommand(opts?: DelegateOpts): Cleanup;
+export { dismissible } from "./dismissible.js";
+export { initDisabledGuard } from "./inert.js";
+export { initTabs } from "./tabs.js";
+export { initDialog } from "./dialog.js";
+export { initModal } from "./modal.js";
+export { toast } from "./toast.js";
+export { initDisclosure } from "./disclosure.js";
+export { initMenu } from "./menu.js";
+export { initFormValidation } from "./forms.js";
+export { initCombobox } from "./combobox.js";
+export { initPopover } from "./popover.js";
+export { initTableSort } from "./table.js";
+export { initCarousel } from "./carousel.js";
+export { initDotGlyph } from "./glyph.js";
+export { initLegend } from "./legend.js";
+export { initConnectors } from "./connectors.js";
+export { initSpotlight } from "./spotlight.js";
+export { initCrosshair } from "./crosshair.js";
+export { initCommand } from "./command.js";
+export type Cleanup = import("./internal.js").Cleanup;
+export type DelegateOpts = import("./internal.js").DelegateOpts;
+export type ThemeStorageOpts = import("./theme.js").ThemeStorageOpts;
+export type ApplyThemeOpts = import("./theme.js").ApplyThemeOpts;
+export type ThemeChangeDetail = import("./theme.js").ThemeChangeDetail;
+export type ToastOpts = import("./toast.js").ToastOpts;
+export type ModalCloseDetail = import("./modal.js").ModalCloseDetail;
+export type LegendToggleDetail = import("./legend.js").LegendToggleDetail;
+export type CrosshairMoveDetail = import("./crosshair.js").CrosshairMoveDetail;
+export type CommandSelectDetail = import("./command.js").CommandSelectDetail;
+export { applyStoredTheme, initThemeToggle } from "./theme.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;sBAmBa,OAAO,eAAe,EAAE,OAAO;2BAC/B,OAAO,eAAe,EAAE,YAAY;+BACpC,OAAO,YAAY,EAAE,gBAAgB;6BACrC,OAAO,YAAY,EAAE,cAAc;gCACnC,OAAO,YAAY,EAAE,iBAAiB;wBACtC,OAAO,YAAY,EAAE,SAAS;+BAC9B,OAAO,YAAY,EAAE,gBAAgB;iCACrC,OAAO,aAAa,EAAE,kBAAkB;kCACxC,OAAO,gBAAgB,EAAE,mBAAmB;kCAC5C,OAAO,cAAc,EAAE,mBAAmB"}