@ponchia/ui 0.5.0 → 0.6.0

package/behaviors/table.js

@@ -1,14 +1,16 @@
-import { hasDom, noop, bindOnce } from './internal.js';
+import { hasDom, resolveHost, noop, bindOnce, collectHosts } from './internal.js';
 
 /**
  * Client-side sortable + selectable data table. Wires
  * `[data-bronto-sortable]`:
  *
- *  - clicking a header's `.ui-table__sort` (or a `th[data-sort]`)
- *    sorts the tbody by that column, cycling `aria-sort`
- *    none → ascending → descending and clearing the other headers.
+ *  - clicking a header's `.ui-table__sort` button sorts the tbody by
+ *    that column. Sortable headers are seeded `aria-sort="none"`; a
+ *    click toggles that header ascending ⇄ descending (first click =
+ *    ascending) and resets the other sortable headers to `none`.
  *    Numeric columns (`data-sort="num"` or `.is-num` cells) sort
- *    numerically; everything else, locale string compare.
+ *    numerically; everything else, locale string compare. Any
+ *    `.ui-table__empty` sentinel row is kept last after a sort.
  *  - a `[data-bronto-select-all]` checkbox toggles every
  *    `[data-bronto-select]` row checkbox and the rows'
  *    `aria-selected`; toggling a row keeps the header checkbox's
@@ -16,29 +18,47 @@ import { hasDom, noop, bindOnce } from './internal.js';
  *    ({ detail: { count } }) on the table.
  *
  * SSR-safe, idempotent per table; returns a cleanup function.
+ *
+ * The numeric sort parses each cell as display text (strips non-[0-9.-] chars),
+ * so it is locale-naive — group/decimal separators beyond `.`/`-` are not
+ * interpreted. It is a client-side convenience sorter, not a data grid.
  */
 export function initTableSort({ root } = {}) {
   if (!hasDom()) return noop;
-  const host = root || document;
-  const tables = [];
-  if (host !== document && host.matches?.('[data-bronto-sortable]')) tables.push(host);
-  tables.push(...(host.querySelectorAll?.('[data-bronto-sortable]') ?? []));
+  const host = resolveHost(root);
+  if (!host) return noop;
+  const tables = collectHosts(host, '[data-bronto-sortable]');
   const cleanups = [];
 
   for (const table of tables) {
     const tbody = table.tBodies[0];
     if (!tbody) continue;
 
+    // Seed the resting `aria-sort="none"` on every sortable header so AT
+    // 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')) {
+      const th = sort.closest('th');
+      if (th && !th.hasAttribute('aria-sort')) th.setAttribute('aria-sort', 'none');
+    }
+
     const colIndex = (th) => [...th.parentElement.children].indexOf(th);
     const cellText = (row, i) => row.children[i]?.textContent.trim() ?? '';
 
     const sortBy = (th, numeric) => {
       const headers = th.closest('tr').querySelectorAll('th');
       const dir = th.getAttribute('aria-sort') === 'ascending' ? 'descending' : 'ascending';
-      headers.forEach((h) => h.removeAttribute('aria-sort'));
+      // Reset the OTHER sortable headers to `none` (not removed) so they keep
+      // announcing sortability; only previously-sortable headers carry aria-sort.
+      headers.forEach((h) => {
+        if (h !== th && h.hasAttribute('aria-sort')) h.setAttribute('aria-sort', 'none');
+      });
       th.setAttribute('aria-sort', dir);
       const i = colIndex(th);
       const sign = dir === 'ascending' ? 1 : -1;
+      // Empty/sentinel rows sort out of the data set AND must re-append LAST,
+      // or after a sort they float above the real rows (C29).
+      const emptyRows = [...tbody.rows].filter((r) => r.classList.contains('ui-table__empty'));
       const rows = [...tbody.rows].filter((r) => !r.classList.contains('ui-table__empty'));
       rows.sort((a, b) => {
         const x = cellText(a, i);
@@ -49,7 +69,10 @@ export function initTableSort({ root } = {}) {
           : x.localeCompare(y);
         return cmp * sign;
       });
-      rows.forEach((r) => tbody.appendChild(r));
+      // 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);
     };
 
     const allBox = table.querySelector('[data-bronto-select-all]');
@@ -71,7 +94,11 @@ export function initTableSort({ root } = {}) {
     };
 
     const onClick = (e) => {
-      const sorter = e.target.closest('.ui-table__sort, th[data-sort]');
+      // Only the focusable `.ui-table__sort` button is a sort trigger — it is
+      // keyboard-operable and carries the `::after` sort glyph. The bare
+      // `th[data-sort]` path was mouse-only with no affordance, so it is gone
+      // (C10); `data-sort="num"` is still read from the button or its th.
+      const sorter = e.target.closest('.ui-table__sort');
       if (sorter && table.contains(sorter)) {
         const th = sorter.closest('th');
         const numeric =

package/behaviors/tabs.js

@@ -1,9 +1,4 @@
-import { hasDom, noop, bindOnce } from './internal.js';
-
-// Module-global so tab ids stay unique across *every* initTabs() call.
-// A per-call counter makes separate islands/roots all mint `bronto-tab-1`,
-// which collides aria-controls/aria-labelledby across the document.
-let tabUid = 0;
+import { hasDom, resolveHost, noop, bindOnce, nextFieldUid, collectHosts } from './internal.js';
 
 /**
  * Wire `[data-bronto-tabs]` groups for full keyboard a11y. The framework
@@ -22,13 +17,10 @@ let tabUid = 0;
  */
 export function initTabs({ root } = {}) {
   if (!hasDom()) return noop;
-  const host = root || document;
+  const host = resolveHost(root);
+  if (!host) return noop;
   const cleanups = [];
-  // querySelectorAll only matches descendants, so a `root` that *is* a
-  // tab group would be skipped — include it explicitly.
-  const groups = [];
-  if (host !== document && host.matches?.('[data-bronto-tabs]')) groups.push(host);
-  groups.push(...host.querySelectorAll('[data-bronto-tabs]'));
+  const groups = collectHosts(host, '[data-bronto-tabs]');
   for (const group of groups) {
     // Own group only — a tab/panel inside a nested [data-bronto-tabs]
     // belongs to that inner group, not this one.
@@ -44,7 +36,7 @@ export function initTabs({ root } = {}) {
     for (const t of tabs) {
       const p = panels.find((x) => x.dataset.panel === t.dataset.tab);
       if (!p) continue;
-      const n = ++tabUid;
+      const n = nextFieldUid();
       if (!t.id) t.id = `bronto-tab-${n}`;
       if (!p.id) p.id = `bronto-tabpanel-${n}`;
       t.setAttribute('aria-controls', p.id);
@@ -59,9 +51,17 @@ export function initTabs({ root } = {}) {
         t.setAttribute('aria-selected', String(on));
         t.tabIndex = on ? 0 : -1;
       }
+      // Only retarget panels when this tab actually controls one. A panel-less
+      // tab must NOT hide every panel — leave the prior panel visible (C30).
+      if (!panels.some((p) => p.dataset.panel === tab.dataset.tab)) return;
       for (const p of panels) {
         p.setAttribute('role', 'tabpanel');
-        p.hidden = p.dataset.panel !== tab.dataset.tab;
+        const shown = p.dataset.panel === tab.dataset.tab;
+        p.hidden = !shown;
+        // APG: a tabpanel is focusable so keyboard users can reach a text-only
+        // panel; hidden panels drop out of the tab order (C30).
+        if (shown) p.tabIndex = 0;
+        else p.removeAttribute('tabindex');
       }
     };
     const onClick = (e) => {

package/behaviors/theme.js

@@ -1,4 +1,4 @@
-import { hasDom, noop, bindOnce } from './internal.js';
+import { hasDom, resolveHost, noop, bindOnce } from './internal.js';
 
 const THEMES = ['light', 'dark'];
 
@@ -9,7 +9,8 @@ const THEMES = ['light', 'dark'];
  */
 export function applyStoredTheme({ storageKey = 'bronto-theme', root } = {}) {
   if (!hasDom()) return;
-  const el = root || document.documentElement;
+  const el = resolveHost(root, document.documentElement);
+  if (!el) return;
   let stored = null;
   try {
     stored = localStorage.getItem(storageKey);
@@ -33,7 +34,8 @@ export function applyStoredTheme({ storageKey = 'bronto-theme', root } = {}) {
  */
 export function initThemeToggle({ storageKey = 'bronto-theme', root } = {}) {
   if (!hasDom()) return noop;
-  const host = root || document;
+  const host = resolveHost(root);
+  if (!host) return noop;
   const docEl = document.documentElement;
 
   const prefersDark = () =>

package/behaviors/toast.js

@@ -1,5 +1,11 @@
 import { hasDom, noop } from './internal.js';
 
+// The tones that have a `.ui-toast--*` rule. The TS type already unions these,
+// but a plain-JS / LLM caller can pass any string — and an unknown tone built a
+// `.ui-toast--error` class that matches no CSS, yielding a silent neutral toast.
+// Validate so an unknown tone degrades to neutral *and warns*, never lies. (C16)
+const TOAST_TONES = new Set(['accent', 'success', 'warning', 'danger', 'info']);
+
 // First-toast deferral queue. The very first toast on a brand-new stack
 // is appended next frame so AT observes the empty aria-live region
 // before its first child. Any further toasts created *before* that frame
@@ -43,7 +49,13 @@ function enqueueToast(place, freshStack) {
 
 function toastElement(message, { tone, title }) {
   const el = document.createElement('div');
-  el.className = tone ? `ui-toast ui-toast--${tone}` : 'ui-toast';
+  const validTone = tone && TOAST_TONES.has(tone) ? tone : null;
+  if (tone && !validTone && typeof console !== 'undefined') {
+    console.warn(
+      `[bronto] toast(): unknown tone "${tone}" — expected ${[...TOAST_TONES].join('/')}. Rendering neutral.`,
+    );
+  }
+  el.className = validTone ? `ui-toast ui-toast--${validTone}` : 'ui-toast';
   // No per-item role: the stack itself is the live region; a nested
   // live region risks double announcement in some SRs.
   if (title) {