@ponchia/ui 0.6.8 → 0.6.10

package/behaviors/glyph.js

@@ -8,6 +8,16 @@ function restoreAttr(el, name, prev) {
   else el.setAttribute(name, prev);
 }
 
+function restoreStyleProp(el, name, prev) {
+  if (prev) el.style.setProperty(name, prev);
+  else el.style.removeProperty(name);
+}
+
+function cleanupEmptyClassAndStyle(el) {
+  if (el.getAttribute('class') === '') el.removeAttribute('class');
+  if (el.getAttribute('style') === '') el.removeAttribute('style');
+}
+
 function rememberCleanup(el, cleanups, cleanup) {
   let done = false;
   const wrapped = () => {
@@ -27,6 +37,151 @@ function cssLen(v) {
   return v && /^[\w.%+\-*/()\s,]+$/.test(v) ? v : '';
 }
 
+function applyGlyphA11y(el, label) {
+  if (label) {
+    el.setAttribute('role', 'img');
+    el.setAttribute('aria-label', label);
+    el.removeAttribute('aria-hidden');
+  } else {
+    el.setAttribute('aria-hidden', 'true');
+  }
+}
+
+function expandMaskGlyph(el, name, label, cleanups) {
+  if (el.classList.contains('ui-icon') && el.style.getPropertyValue('--icon-mask')) return;
+  const mask = glyphMask(name);
+  if (!mask) return; // 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 hadAriaHidden = el.getAttribute('aria-hidden');
+  const hadRole = el.getAttribute('role');
+  const hadAriaLabel = el.getAttribute('aria-label');
+  const size = cssLen(el.getAttribute('data-bronto-glyph-size'));
+
+  el.classList.add('ui-icon');
+  el.style.setProperty('--icon-mask', mask);
+  if (size) el.style.setProperty('--icon-size', size);
+  applyGlyphA11y(el, label);
+
+  rememberCleanup(el, cleanups, () => {
+    if (!hadIcon) el.classList.remove('ui-icon');
+    restoreStyleProp(el, '--icon-mask', hadMask);
+    restoreStyleProp(el, '--icon-size', hadSize);
+    restoreAttr(el, 'aria-hidden', hadAriaHidden);
+    restoreAttr(el, 'role', hadRole);
+    restoreAttr(el, 'aria-label', hadAriaLabel);
+    cleanupEmptyClassAndStyle(el);
+  });
+}
+
+function glyphAnimClass(animAttr) {
+  if (animAttr === 'reveal') return 'ui-dotmatrix--reveal';
+  if (animAttr === 'pulse') return 'ui-dotmatrix--pulse';
+  return null;
+}
+
+function authoredDotSize(el) {
+  return (
+    el.style.getPropertyValue('--dotmatrix-dot') ||
+    (typeof getComputedStyle === 'function'
+      ? getComputedStyle(el).getPropertyValue('--dotmatrix-dot').trim()
+      : '')
+  );
+}
+
+function applyDefaultDotScale(el, solid, hadGap) {
+  const setDefaultDot = !authoredDotSize(el);
+  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;
+    }
+  }
+  return { setDefaultDot, setDefaultGap };
+}
+
+function dotCellClass(cell) {
+  if (!cell.on) return 'ui-dotmatrix__cell';
+  if (cell.tone === 'hot') return 'ui-dotmatrix__cell ui-dotmatrix__cell--hot';
+  if (cell.tone === 'accent') return 'ui-dotmatrix__cell ui-dotmatrix__cell--accent';
+  return 'ui-dotmatrix__cell';
+}
+
+function appendGlyphCells(el, cells, { solid, animAttr }) {
+  const frag = document.createDocumentFragment();
+  cells.forEach((cell, i) => {
+    const span = document.createElement('span');
+    span.className = dotCellClass(cell);
+    if (!cell.on && solid) span.style.background = 'transparent'; // glyph-only
+    if (animAttr === 'reveal') span.style.setProperty('--i', String(i)); // scan stagger
+    frag.appendChild(span);
+  });
+  el.appendChild(frag);
+}
+
+function expandCellGlyph(el, name, label, cleanups) {
+  // 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')) return; // already expanded
+  const cells = glyphCells(name);
+  if (!cells.length) return; // unknown glyph — leave the placeholder as-is
+
+  // `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');
+  // `data-bronto-glyph-anim="reveal|pulse"` → decorative animation (the DOM
+  // counterpart to renderGlyph's `anim`; reduced-motion-safe via CSS).
+  const animAttr = el.getAttribute('data-bronto-glyph-anim');
+  const animClass = glyphAnimClass(animAttr);
+  const hadAnimClass = animClass ? el.classList.contains(animClass) : false;
+  const hadMatrix = el.classList.contains('ui-dotmatrix');
+  const hadCols = el.style.getPropertyValue('--dotmatrix-cols');
+  const hadRadius = el.style.getPropertyValue('--dotmatrix-dot-radius');
+  const hadGap = el.style.getPropertyValue('--dotmatrix-gap');
+  const hadAriaHidden = el.getAttribute('aria-hidden');
+  const hadRole = el.getAttribute('role');
+  const hadAriaLabel = el.getAttribute('aria-label');
+
+  el.classList.add('ui-dotmatrix');
+  if (animClass) el.classList.add(animClass);
+  el.style.setProperty('--dotmatrix-cols', String(GLYPH_SIZE));
+  if (solid) {
+    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.
+  const defaults = applyDefaultDotScale(el, solid, hadGap);
+  applyGlyphA11y(el, label);
+  appendGlyphCells(el, cells, { solid, animAttr });
+
+  rememberCleanup(el, cleanups, () => {
+    el.querySelectorAll(':scope > .ui-dotmatrix__cell').forEach((n) => n.remove());
+    if (!hadMatrix) el.classList.remove('ui-dotmatrix');
+    if (animClass && !hadAnimClass) el.classList.remove(animClass);
+    if (solid) {
+      restoreStyleProp(el, '--dotmatrix-dot-radius', hadRadius);
+      restoreStyleProp(el, '--dotmatrix-gap', hadGap);
+    }
+    if (defaults.setDefaultDot) el.style.removeProperty('--dotmatrix-dot');
+    if (defaults.setDefaultGap) el.style.removeProperty('--dotmatrix-gap');
+    restoreStyleProp(el, '--dotmatrix-cols', hadCols);
+    restoreAttr(el, 'aria-hidden', hadAriaHidden);
+    restoreAttr(el, 'role', hadRole);
+    restoreAttr(el, 'aria-label', hadAriaLabel);
+    cleanupEmptyClassAndStyle(el);
+  });
+}
+
 /**
  * Expand `[data-bronto-glyph="name"]` placeholders into a `.ui-dotmatrix`
  * grid of GLYPH_SIZE² cells — the DOM counterpart to renderGlyph() from
@@ -60,141 +215,11 @@ export function initDotGlyph({ root } = {}) {
 
     // 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');
-      }
-
-      rememberCleanup(el, cleanups, () => {
-        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');
-      });
+      expandMaskGlyph(el, name, label, cleanups);
       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(name);
-    if (!cells.length) continue; // unknown glyph — leave the placeholder as-is
-    // `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');
-    // `data-bronto-glyph-anim="reveal|pulse"` → decorative animation (the DOM
-    // counterpart to renderGlyph's `anim`; reduced-motion-safe via CSS).
-    const animAttr = el.getAttribute('data-bronto-glyph-anim');
-    const animClass =
-      animAttr === 'reveal'
-        ? 'ui-dotmatrix--reveal'
-        : animAttr === 'pulse'
-          ? 'ui-dotmatrix--pulse'
-          : null;
-    const hadAnimClass = animClass ? el.classList.contains(animClass) : false;
-    const hadMatrix = el.classList.contains('ui-dotmatrix');
-    const hadCols = el.style.getPropertyValue('--dotmatrix-cols');
-    const hadRadius = el.style.getPropertyValue('--dotmatrix-dot-radius');
-    const hadGap = el.style.getPropertyValue('--dotmatrix-gap');
-    const hadAriaHidden = el.getAttribute('aria-hidden');
-    const hadRole = el.getAttribute('role');
-    const hadAriaLabel = el.getAttribute('aria-label');
-
-    el.classList.add('ui-dotmatrix');
-    if (animClass) el.classList.add(animClass);
-    el.style.setProperty('--dotmatrix-cols', String(GLYPH_SIZE));
-    if (solid) {
-      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);
-      el.removeAttribute('aria-hidden'); // a labelled img must not also be hidden
-    } else {
-      el.setAttribute('aria-hidden', 'true');
-    }
-
-    const frag = document.createDocumentFragment();
-    cells.forEach((c, i) => {
-      const span = document.createElement('span');
-      span.className = !c.on
-        ? 'ui-dotmatrix__cell'
-        : c.tone === 'hot'
-          ? 'ui-dotmatrix__cell ui-dotmatrix__cell--hot'
-          : c.tone === 'accent'
-            ? 'ui-dotmatrix__cell ui-dotmatrix__cell--accent'
-            : 'ui-dotmatrix__cell';
-      if (!c.on && solid) span.style.background = 'transparent'; // glyph-only
-      if (animAttr === 'reveal') span.style.setProperty('--i', String(i)); // scan stagger
-      frag.appendChild(span);
-    });
-    el.appendChild(frag);
-
-    rememberCleanup(el, cleanups, () => {
-      el.querySelectorAll(':scope > .ui-dotmatrix__cell').forEach((n) => n.remove());
-      if (!hadMatrix) el.classList.remove('ui-dotmatrix');
-      if (animClass && !hadAnimClass) el.classList.remove(animClass);
-      if (solid) {
-        if (hadRadius) el.style.setProperty('--dotmatrix-dot-radius', hadRadius);
-        else el.style.removeProperty('--dotmatrix-dot-radius');
-        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);
-      restoreAttr(el, 'role', hadRole);
-      restoreAttr(el, 'aria-label', hadAriaLabel);
-      // Don't leave behind empty class=""/style="" we ourselves created.
-      if (el.getAttribute('class') === '') el.removeAttribute('class');
-      if (el.getAttribute('style') === '') el.removeAttribute('style');
-    });
+    expandCellGlyph(el, name, label, cleanups);
   }
 
   return () => cleanups.forEach((fn) => fn());

package/behaviors/inert.d.ts

@@ -11,7 +11,7 @@
  *
  * Wire once near the root, like {@link applyStoredTheme}. Capturing listeners
  * intercept activation before any component handler (tabs, pagination, menus)
- * sees it. (component audit C4.)
+ * sees it.
  *
  * @param {import('./internal.js').DelegateOpts} [opts]
  * @returns {import('./internal.js').Cleanup}

package/behaviors/inert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inert.d.ts","sourceRoot":"","sources":["inert.js"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AACH,6CAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAyB3C"}
+{"version":3,"file":"inert.d.ts","sourceRoot":"","sources":["inert.js"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AACH,6CAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA0B3C"}

package/behaviors/inert.js

@@ -15,7 +15,7 @@ const DISABLED = '[aria-disabled="true"]';
  *
  * Wire once near the root, like {@link applyStoredTheme}. Capturing listeners
  * intercept activation before any component handler (tabs, pagination, menus)
- * sees it. (component audit C4.)
+ * sees it.
  *
  * @param {import('./internal.js').DelegateOpts} [opts]
  * @returns {import('./internal.js').Cleanup}

package/behaviors/internal.js

@@ -121,7 +121,7 @@ export function scrollIntoViewSafe(el, opts = { block: 'nearest' }) {
 // by the modal and popover focus paths (a dialog/modal must move focus into
 // itself on open). Focus the first focusable descendant, else make the
 // container programmatically focusable and focus it, so a content-only
-// panel/modal still receives focus. (code-quality audit Q4.)
+// panel/modal still receives focus.
 const FOCUSABLE =
   'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 
@@ -138,7 +138,7 @@ export function focusInto(container) {
 // Wrap an index by `delta` within [0, len), the roving keyboard math shared by
 // the combobox and command listboxes (a -1 `cur` lands on the first/last as
 // before). Only this core is shared — the surrounding setActive/filter/group
-// logic diverges between the two for real reasons. (code-quality audit Q12.)
+// logic diverges between the two for real reasons.
 export function wrapIndex(cur, delta, len) {
   let next = cur + delta;
   if (next < 0) next = len - 1;

package/behaviors/modal.js

@@ -151,7 +151,7 @@ export function initModal({ root } = {}) {
         // A controlled modal must announce AS a modal dialog, not a generic group —
         // parity with initPopover. Apply a dialog role + aria-modal (unless the
         // author set a role), and dev-warn on a missing accessible name since we
-        // can't invent a good one. (component audit C13.)
+        // can't invent a good one.
         if (!modal.hasAttribute('role')) modal.setAttribute('role', 'dialog');
         if (!modal.hasAttribute('aria-modal')) modal.setAttribute('aria-modal', 'true');
         const named =

package/behaviors/popover.js

@@ -94,9 +94,9 @@ export function initPopover({ root } = {}) {
     }
   };
 
-  // The trigger advertises `aria-haspopup="dialog"`, so the open panel must BE a
-  // dialog: a role, an accessible name, and focus moved into it (C6) — see the
-  // shared `focusInto` in internal.js.
+  // The trigger advertises `aria-haspopup="dialog"`, so the open panel must be
+  // a dialog: a role, an accessible name, and focus moved into it. See the
+  // shared `focusInto` helper in internal.js.
 
   const place = (trigger, panel) => {
     const r = trigger.getBoundingClientRect();
@@ -148,7 +148,7 @@ export function initPopover({ root } = {}) {
     rememberPanel(panel);
     // Live up to the advertised `aria-haspopup="dialog"`: give the panel a
     // dialog role (unless the author set one) so AT announces it as the promised
-    // dialog rather than a generic group (C6).
+    // dialog rather than a generic group.
     if (!panel.hasAttribute('role')) panel.setAttribute('role', 'dialog');
     trigger.setAttribute('aria-controls', panel.id);
     trigger.setAttribute('aria-expanded', 'true');
@@ -211,7 +211,7 @@ export function initPopover({ root } = {}) {
       trigger.setAttribute('aria-controls', panel.id);
       if (!trigger.hasAttribute('aria-expanded')) trigger.setAttribute('aria-expanded', 'false');
       // A dialog with no accessible name is announced as just "dialog". We can't
-      // invent a good name, so warn the author at dev time (C6).
+      // invent a good name, so warn the author at dev time.
       const named =
         panel.hasAttribute('aria-label') ||
         panel.hasAttribute('aria-labelledby') ||

package/behaviors/table.d.ts

@@ -27,7 +27,7 @@
  * canonical number in a `data-sort-value` attribute on the cell. That escape
  * hatch wins over the parsed text and accepts either a dot ("3.5") or a single
  * decimal comma ("3,5"). It is a client-side convenience sorter, not a data
- * grid. (component audit C3/C5.)
+ * grid.
  *
  * @param {import('./internal.js').DelegateOpts} [opts]
  * @returns {import('./internal.js').Cleanup}

package/behaviors/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["table.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,yCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAyO3C"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["table.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,yCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAwO3C"}

package/behaviors/table.js

@@ -29,7 +29,7 @@ import { hasDom, resolveHost, noop, bindOnce, collectHosts, closestSafe } from '
  * canonical number in a `data-sort-value` attribute on the cell. That escape
  * hatch wins over the parsed text and accepts either a dot ("3.5") or a single
  * decimal comma ("3,5"). It is a client-side convenience sorter, not a data
- * grid. (component audit C3/C5.)
+ * grid.
  *
  * @param {import('./internal.js').DelegateOpts} [opts]
  * @returns {import('./internal.js').Cleanup}
@@ -98,8 +98,7 @@ export function initTableSort({ root } = {}) {
     };
     const seedSorters = () => {
       // 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).
+      // announces the column as sortable from the start.
       for (const sort of table.querySelectorAll('.ui-table__sort')) {
         rememberSorterState(sort);
         if (sort.tagName === 'BUTTON' && !sort.hasAttribute('type')) sort.type = 'button';
@@ -139,7 +138,7 @@ export function initTableSort({ root } = {}) {
     // authoritative escape hatch; otherwise normalize the display text so the
     // sign survives (U+2212 / en-em dashes → minus, accounting parens →
     // negative) and `,` grouping is dropped. Returns 0 for unparseable cells so
-    // they cluster rather than scatter. (component audit C3.)
+    // they cluster rather than scatter.
     const cellNum = (row, i) => {
       const cell = row.children[i];
       const explicit = cell?.getAttribute?.('data-sort-value');
@@ -181,8 +180,8 @@ export function initTableSort({ root } = {}) {
       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).
+      // Empty/sentinel rows sort out of the data set and must re-append last,
+      // or after a sort they float above the real rows.
       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) => {
@@ -222,8 +221,8 @@ export function initTableSort({ root } = {}) {
     const onClick = (e) => {
       // 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.
+      // `th[data-sort]` path was mouse-only with no affordance, so it is gone;
+      // `data-sort="num"` is still read from the button or its th.
       const sorter = closestSafe(e.target, '.ui-table__sort');
       if (sorter && table.contains(sorter)) {
         rememberSorterState(sorter);

package/behaviors/tabs.js

@@ -103,14 +103,14 @@ export function initTabs({ root } = {}) {
         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).
+      // tab must not hide every panel; leave the prior panel visible.
       if (!panels.some((p) => p.dataset.panel === tab.dataset.tab)) return;
       for (const p of panels) {
         p.setAttribute('role', 'tabpanel');
         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).
+        // panel; hidden panels drop out of the tab order.
         if (shown) p.tabIndex = 0;
         else p.removeAttribute('tabindex');
       }

package/behaviors/toast.js

@@ -3,7 +3,7 @@ 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)
+// Validate so an unknown tone degrades to neutral *and warns*, never lies.
 const TOAST_TONES = new Set(['accent', 'success', 'warning', 'danger', 'info']);
 
 // First-toast deferral queue. The very first toast on a brand-new stack
@@ -29,7 +29,7 @@ function toastStack(isAssertive) {
       stack.setAttribute('role', 'alert');
       // The assertive region carries one error at a time and must be read whole;
       // aria-atomic ensures the full toast (title + message) announces, not just
-      // the diff. (component audit C38.)
+      // the changed fragment.
       stack.setAttribute('aria-atomic', 'true');
     }
     document.body.appendChild(stack);
@@ -67,7 +67,7 @@ function toastElement(message, { tone, title }) {
   // aria-atomic so a *titled* toast announces title + message as one unit, not
   // disjointly — and unlike aria-atomic on the polite STACK (which would re-read
   // every resident toast on each new one), scoping it to the toast keeps sibling
-  // toasts out of the announcement. (component audit C23.)
+  // toasts out of the announcement.
   el.setAttribute('aria-atomic', 'true');
   if (title) {
     const t = document.createElement('p');
@@ -183,8 +183,8 @@ export function toast(message, { tone, title, duration = 4000, assertive, closab
   // `closable`. The button carries no text node (glyph is a CSS
   // ::before) so the toast's announced/textContent stays the message.
   // Explicitly opting OUT of the close button on a sticky toast strands it with
-  // no in-UI dismissal — warn that the caller must retain and call the returned
-  // dismiss fn. (component audit C37.)
+  // no in-UI dismissal; warn that the caller must retain and call the returned
+  // dismiss function.
   if (duration === 0 && closable === false && typeof console !== 'undefined') {
     console.warn(
       '[bronto] toast(): duration:0 + closable:false has no in-UI dismissal — keep the returned dismiss() and call it yourself, or set closable:true.',

package/classes/classes.json

@@ -1,8 +1,8 @@
 {
   "$comment": "@ponchia/ui class vocabulary as language-neutral data — validate emitted markup without executing the ESM cls map or parsing the .d.ts. Generated from classes/index.js — do not edit by hand; run `npm run classes:json:build`. Drift-checked in CI. `groups[].base` is null for a parts-only namespace (no standalone base class — do NOT emit it). A modifier whose name contains `__` (e.g. `ui-spark__bar--pos`) attaches to THAT part, not the base host. `states` is the author-applied `is-*` hooks (runtime/behavior-managed hooks are excluded); `behaviorAttributes` are the `data-bronto-*` wiring hooks the optional behaviors delegate on; `requiredAria` is the role/aria a generator must emit per component. `states` + `customProperties` are documented in docs/reference.md and ship outside `cls` by design.",
   "counts": {
-    "classes": 634,
-    "groups": 177
+    "classes": 644,
+    "groups": 179
   },
   "groups": {
     "ui-accordion": {
@@ -1081,6 +1081,13 @@
         "ui-segmented__option"
       ]
     },
+    "ui-segmented-buttons": {
+      "base": "ui-segmented-buttons",
+      "modifiers": [],
+      "parts": [
+        "ui-segmented-buttons__button"
+      ]
+    },
     "ui-sel": {
       "base": "ui-sel",
       "modifiers": [
@@ -1437,6 +1444,20 @@
       "modifiers": [],
       "parts": []
     },
+    "ui-toolstrip": {
+      "base": "ui-toolstrip",
+      "modifiers": [
+        "ui-toolstrip--compact",
+        "ui-toolstrip--floating"
+      ],
+      "parts": [
+        "ui-toolstrip__actions",
+        "ui-toolstrip__brand",
+        "ui-toolstrip__context",
+        "ui-toolstrip__group",
+        "ui-toolstrip__search"
+      ]
+    },
     "ui-tooltip": {
       "base": "ui-tooltip",
       "modifiers": [],
@@ -1964,6 +1985,8 @@
     "ui-scroll-reveal",
     "ui-search",
     "ui-segmented",
+    "ui-segmented-buttons",
+    "ui-segmented-buttons__button",
     "ui-segmented__option",
     "ui-sel",
     "ui-sel--maybe",
@@ -2100,6 +2123,14 @@
     "ui-tool-call__name",
     "ui-tool-call__status",
     "ui-tool-log",
+    "ui-toolstrip",
+    "ui-toolstrip--compact",
+    "ui-toolstrip--floating",
+    "ui-toolstrip__actions",
+    "ui-toolstrip__brand",
+    "ui-toolstrip__context",
+    "ui-toolstrip__group",
+    "ui-toolstrip__search",
     "ui-tooltip",
     "ui-tooltip__bubble",
     "ui-tour-note",

package/classes/index.d.ts

@@ -574,6 +574,16 @@ export declare const cls: {
   readonly inspector: 'ui-inspector';
   readonly inspectorHead: 'ui-inspector__head';
   readonly inspectorBody: 'ui-inspector__body';
+  readonly toolstrip: 'ui-toolstrip';
+  readonly toolstripFloating: 'ui-toolstrip--floating';
+  readonly toolstripCompact: 'ui-toolstrip--compact';
+  readonly toolstripBrand: 'ui-toolstrip__brand';
+  readonly toolstripContext: 'ui-toolstrip__context';
+  readonly toolstripGroup: 'ui-toolstrip__group';
+  readonly toolstripActions: 'ui-toolstrip__actions';
+  readonly toolstripSearch: 'ui-toolstrip__search';
+  readonly segmentedButtons: 'ui-segmented-buttons';
+  readonly segmentedButtonsButton: 'ui-segmented-buttons__button';
   readonly property: 'ui-property';
   readonly propertyLabel: 'ui-property__label';
   readonly propertyValue: 'ui-property__value';