@ponchia/ui 0.6.5 → 0.6.7

package/behaviors/legend.js

@@ -29,14 +29,18 @@ export function initLegend({ root } = {}) {
   const host = resolveHost(root);
   if (!host) return noop;
   const isButton = (el) => el.tagName === 'BUTTON' || el.getAttribute('role') === 'button';
-  const onClick = (e) => {
-    const item = e.target.closest('.ui-legend__item');
+  const legendFor = (item) => {
     if (!item || !host.contains(item)) return;
     const legend = item.closest('[data-bronto-legend]');
     if (!legend || !host.contains(legend)) return;
+    return legend;
+  };
+  const toggle = (item) => {
+    const legend = legendFor(item);
+    if (!legend) return;
     // The contract requires a real `<button>` (keyboard-operable, focusable). A
-    // non-button item is mouse-only — refuse to toggle it rather than ship a
-    // pointer-only control (WCAG 2.1.1 — C11). The author is warned at bind.
+    // non-button item is mouse-only unless role=button is keyboard-normalized
+    // below — refuse anything else rather than ship a pointer-only control.
     if (!isButton(item)) return;
     const active = item.getAttribute('aria-pressed') !== 'false';
     const next = !active;
@@ -54,23 +58,51 @@ export function initLegend({ root } = {}) {
       }),
     );
   };
+  const onClick = (e) => {
+    toggle(e.target.closest('.ui-legend__item'));
+  };
+  const onKey = (e) => {
+    if (e.key !== 'Enter' && e.key !== ' ') return;
+    const item = e.target.closest('.ui-legend__item');
+    if (!item || item.tagName === 'BUTTON' || item.getAttribute('role') !== 'button') return;
+    e.preventDefault();
+    toggle(item);
+  };
   return bindOnce(host, 'legend', () => {
-    // Warn once per non-button item present at bind: it gets cursor:pointer from
-    // the CSS but is neither focusable nor keyboard-operable (C11).
+    // Normalize role=button entries and warn once per unsupported non-button
+    // item present at bind. A real <button> remains the recommended markup.
+    const legends = [...(host.querySelectorAll?.('[data-bronto-legend]') ?? [])];
+    for (const legend of legends) {
+      for (const el of legend.querySelectorAll('.ui-legend__item')) {
+        if (el.closest('[data-bronto-legend]') !== legend) continue;
+        if (el.tagName === 'BUTTON' && !el.hasAttribute('type')) el.type = 'button';
+        if (
+          el.tagName !== 'BUTTON' &&
+          el.getAttribute('role') === 'button' &&
+          !el.hasAttribute('tabindex')
+        ) {
+          el.tabIndex = 0;
+        }
+      }
+    }
     if (typeof console !== 'undefined') {
-      for (const legend of host.querySelectorAll?.('[data-bronto-legend]') ?? []) {
+      for (const legend of legends) {
         const stray = [...legend.querySelectorAll('.ui-legend__item')].some(
           (el) => el.closest('[data-bronto-legend]') === legend && !isButton(el),
         );
         if (stray) {
           console.warn(
-            '[bronto] initLegend(): interactive legend entries must be <button> (or role="button") to be keyboard-operable — a non-button .ui-legend__item is ignored.',
+            '[bronto] initLegend(): interactive legend entries must be <button> or role="button" — unsupported .ui-legend__item controls are ignored.',
           );
           break;
         }
       }
     }
     host.addEventListener('click', onClick);
-    return () => host.removeEventListener('click', onClick);
+    host.addEventListener('keydown', onKey);
+    return () => {
+      host.removeEventListener('click', onClick);
+      host.removeEventListener('keydown', onKey);
+    };
   });
 }

package/behaviors/splitter.d.ts

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

@@ -0,0 +1 @@
+{"version":3,"file":"splitter.d.ts","sourceRoot":"","sources":["splitter.js"],"names":[],"mappings":"AAiLA;;;;;;;;;;;;;GAaG;AACH,wCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAU3C;;;;;WA3La,MAAM;;;;iBACN,UAAU,GAAG,YAAY"}

package/behaviors/splitter.js

@@ -0,0 +1,200 @@
+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,
+    }),
+  );
+};
+
+function wireSplitter(splitter) {
+  const handle = splitter.querySelector(HANDLE_SELECTOR);
+  if (!handle) return noop;
+
+  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);
+  };
+
+  return bindOnce(splitter, 'splitter', () => {
+    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;
+    };
+  });
+}
+
+/**
+ * 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/table.js

@@ -49,6 +49,7 @@ export function initTableSort({ root } = {}) {
     // announces the column as sortable from the start (it was unset until the
     // first click — C10).
     for (const sort of table.querySelectorAll('.ui-table__sort')) {
+      if (sort.tagName === 'BUTTON' && !sort.hasAttribute('type')) sort.type = 'button';
       const th = sort.closest('th');
       if (th && !th.hasAttribute('aria-sort')) th.setAttribute('aria-sort', 'none');
     }
@@ -110,9 +111,8 @@ export function initTableSort({ root } = {}) {
         return cmp * sign;
       });
       // Re-parent in document order: sorted data rows, then any empty/sentinel
-      // row last. A single appendChild pass over the existing <tr> nodes (no
-      // markup is created — these are trusted DOM elements being moved).
-      for (const r of [...rows, ...emptyRows]) tbody.appendChild(r);
+      // row last. These are existing <tr> nodes being moved; no markup is parsed.
+      tbody.append(...rows, ...emptyRows);
     };
 
     const allBox = table.querySelector('[data-bronto-select-all]');

package/behaviors/theme.js

@@ -1,4 +1,4 @@
-import { hasDom, resolveHost, noop, bindOnce } from './internal.js';
+import { hasDom, resolveHost, noop, bindOnce, collectHosts } from './internal.js';
 
 const THEMES = ['light', 'dark'];
 
@@ -66,7 +66,7 @@ export function initThemeToggle({ storageKey = 'bronto-theme', root } = {}) {
 
   const reflect = () => {
     const c = current();
-    host.querySelectorAll('[data-bronto-theme-toggle]').forEach((el) => {
+    collectHosts(host, '[data-bronto-theme-toggle]').forEach((el) => {
       const forced = el.getAttribute('data-bronto-theme-toggle');
       // A forced control is "pressed" when its theme is the active one;
       // a plain toggle reflects whether dark is active.