@ponchia/ui 0.6.9 → 0.6.11

package/behaviors/glyph.js

@@ -30,11 +30,62 @@ function rememberCleanup(el, cleanups, cleanup) {
   cleanups.push(wrapped);
 }
 
-// `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.
+const CSS_LENGTH_UNITS =
+  '(?:px|r?em|ch|ex|cap|ic|lh|rlh|vw|vh|vi|vb|vmin|vmax|' +
+  'svw|svh|svi|svb|svmin|svmax|lvw|lvh|lvi|lvb|lvmin|lvmax|' +
+  'dvw|dvh|dvi|dvb|dvmin|dvmax|cm|mm|q|in|pc|pt|%)';
+const CSS_NUMBER = '[-+]?(?:\\d*\\.\\d+|\\d+)';
+const CSS_LENGTH_RE = new RegExp(`^(?:0|${CSS_NUMBER}${CSS_LENGTH_UNITS})$`, 'i');
+const CSS_CALC_VALUE_RE = new RegExp(`^${CSS_NUMBER}(?:${CSS_LENGTH_UNITS})?`, 'i');
+
+function isCalcLength(expr) {
+  let rest = expr.trim();
+  let depth = 0;
+  let sawLength = false;
+  let expectValue = true;
+
+  while (rest) {
+    if (expectValue) {
+      if (rest[0] === '(') {
+        depth += 1;
+        rest = rest.slice(1).trim();
+        continue;
+      }
+      const token = rest.match(CSS_CALC_VALUE_RE)?.[0];
+      if (!token) return false;
+      if (CSS_LENGTH_RE.test(token)) sawLength = true;
+      rest = rest.slice(token.length).trim();
+      expectValue = false;
+      continue;
+    }
+
+    if (rest[0] === ')') {
+      depth -= 1;
+      if (depth < 0) return false;
+      rest = rest.slice(1).trim();
+      continue;
+    }
+
+    const op = rest.match(/^[+\-*/]/)?.[0];
+    if (!op) return false;
+    rest = rest.slice(op.length).trim();
+    expectValue = true;
+  }
+
+  if (!sawLength) return false;
+  if (expectValue) return false;
+  return depth === 0;
+}
+
+// `size` lands in inline CSS, so accept only concrete CSS lengths or calc()
+// expressions (mirrors glyphs.js cssLen). Used for the mask path's --icon-size.
 function cssLen(v) {
-  return v && /^[\w.%+\-*/()\s,]+$/.test(v) ? v : '';
+  const value = String(v ?? '').trim();
+  if (CSS_LENGTH_RE.test(value)) return value;
+  if (value.toLowerCase().startsWith('calc(') && value.endsWith(')')) {
+    return isCalcLength(value.slice(5, -1)) ? value : '';
+  }
+  return '';
 }
 
 function applyGlyphA11y(el, label) {
@@ -214,7 +265,7 @@ export function initDotGlyph({ root } = {}) {
     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.getAttribute('data-bronto-glyph-render')?.trim() === 'mask') {
       expandMaskGlyph(el, name, label, cleanups);
       continue;
     }

package/behaviors/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["internal.js"],"names":[],"mappings":"AAiDA,iEAIC;AAeD,sEAUC;AAED,oDAQC;AAED,yDAOC;AAMD,8DAIC;AAID;;SAMC;AAUD,gDAQC;AAMD,+DAKC;AAlIM,6BAAqB;AAErB,kCAAoD;AAyCpD,uCAAqC;;;;;sBArD/B,MAAM,IAAI"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["internal.js"],"names":[],"mappings":"AAiDA,iEAIC;AAeD,sEAaC;AAED,oDAUC;AAED,yDAOC;AAMD,8DAIC;AAID;;SAMC;AAkDD,gDAUC;AAMD,+DAKC;AAjLM,6BAAqB;AAErB,kCAAoD;AAyCpD,uCAAqC;;;;;sBArD/B,MAAM,IAAI"}

package/behaviors/internal.js

@@ -70,7 +70,10 @@ export function bindOnce(target, key, add) {
   const reg = target[BOUND] || (target[BOUND] = Object.create(null));
   if (reg[key]) reg[key]();
   const remove = add();
+  let done = false;
   const cleanup = () => {
+    if (done) return;
+    done = true;
     remove();
     if (reg[key] === cleanup) delete reg[key];
   };
@@ -80,11 +83,13 @@ export function bindOnce(target, key, add) {
 
 export function byIdInHost(host, id) {
   if (!id) return null;
-  if (host === document) return document.getElementById(id);
+  const doc = host.nodeType === 9 ? host : host.ownerDocument;
+  if (host === doc) return doc.getElementById(id);
   if (host.id === id) return host;
   return (
     Array.from(host.querySelectorAll?.('[id]') || []).find((el) => el.id === id) ||
-    document.getElementById(id)
+    doc?.getElementById(id) ||
+    null
   );
 }
 
@@ -122,11 +127,53 @@ export function scrollIntoViewSafe(el, opts = { block: 'nearest' }) {
 // 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.
-const FOCUSABLE =
-  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+const FOCUSABLE = 'a[href], button, input, select, textarea, [tabindex]';
+
+function isInsideDisabledFieldset(el) {
+  return Boolean(el.closest?.('fieldset[disabled]'));
+}
+
+function isRendered(el) {
+  try {
+    if (
+      typeof el.checkVisibility === 'function' &&
+      !el.checkVisibility({ checkVisibilityCSS: true, visibilityProperty: true })
+    ) {
+      return false;
+    }
+  } catch {
+    /* fall through to conservative checks */
+  }
+
+  const view = el.ownerDocument?.defaultView;
+  const style = view?.getComputedStyle?.(el);
+  if (style?.display === 'none') return false;
+  if (style?.visibility === 'hidden' || style?.visibility === 'collapse') return false;
+
+  const docHasLayout = Boolean(el.ownerDocument?.documentElement?.getClientRects?.().length);
+  if (
+    docHasLayout &&
+    'offsetParent' in el &&
+    el.offsetParent === null &&
+    el.getClientRects?.().length === 0
+  ) {
+    return false;
+  }
+  return true;
+}
+
+function isFocusableCandidate(el) {
+  if (el.closest?.('[hidden], [inert]')) return false;
+  if ('disabled' in el && el.disabled) return false;
+  if (isInsideDisabledFieldset(el)) return false;
+  if (el.tabIndex < 0) return false;
+  return isRendered(el);
+}
 
 export function focusInto(container) {
-  const first = container.querySelector(FOCUSABLE);
+  const first = Array.from(container.querySelectorAll?.(FOCUSABLE) || []).find(
+    isFocusableCandidate,
+  );
   if (first) {
     first.focus?.();
     return;

package/behaviors/menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["menu.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AACH,oCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAwC3C"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["menu.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AACH,oCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAyC3C"}

package/behaviors/menu.js

@@ -18,7 +18,8 @@ export function initMenu({ root } = {}) {
   if (!hasDom()) return noop;
   const host = resolveHost(root);
   if (!host) return noop;
-  const doc = host.nodeType === 9 ? host : host.ownerDocument || document;
+  const doc = host.nodeType === 9 ? host : host.ownerDocument;
+  if (!doc) return noop;
   const openMenus = () => collectHosts(host, '[data-bronto-menu][open]');
   const shut = (menu) => {
     if (!menu || !menu.open) return;

package/behaviors/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["modal.js"],"names":[],"mappings":"AAsDA;;;GAGG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA+F3C;;;;;YA7Ha,QAAQ"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["modal.js"],"names":[],"mappings":"AAsDA;;;GAGG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA+G3C;;;;;YA7Ia,QAAQ"}

package/behaviors/modal.js

@@ -94,6 +94,10 @@ export function initModal({ root } = {}) {
   const cleanups = [];
 
   for (const modal of modals) {
+    const doc = modal.ownerDocument;
+    if (!doc) continue;
+    const view = doc.defaultView;
+    const isNativeDialog = modal.localName === 'dialog';
     let opener = null;
     let inerted = [];
 
@@ -103,10 +107,10 @@ export function initModal({ root } = {}) {
     // app inerted for its own reasons.
     const trap = () => {
       if (opener) return; // already trapped
-      opener = document.activeElement;
+      opener = doc.activeElement;
       pushActiveModal(modal);
       let el = modal;
-      while (el && el.parentElement && el !== document.body) {
+      while (el && el.parentElement && el !== doc.body) {
         for (const sib of el.parentElement.children) {
           if (sib !== el && !sib.inert) {
             sib.inert = true;
@@ -128,14 +132,23 @@ export function initModal({ root } = {}) {
       if (back?.isConnected && typeof back.focus === 'function') back.focus();
     };
 
-    const sync = () => (modal.classList.contains('is-open') ? trap() : release());
+    const sync = () => {
+      if (modal.classList.contains('is-open')) {
+        if (!isNativeDialog) modal.hidden = false;
+        trap();
+        return;
+      }
+      release();
+      if (!isNativeDialog) modal.hidden = true;
+    };
 
     const onKey = (e) => {
       if (e.key === 'Escape' && opener) {
         if (activeModals.at(-1) !== modal) return;
         if (insideOpenPopover(e.target, modal)) return;
+        const ModalCloseEvent = view?.CustomEvent ?? CustomEvent;
         modal.dispatchEvent(
-          new CustomEvent('bronto:modal:close', {
+          new ModalCloseEvent('bronto:modal:close', {
             detail: { reason: 'escape' },
             bubbles: true,
             cancelable: true,
@@ -146,7 +159,7 @@ export function initModal({ root } = {}) {
 
     cleanups.push(
       bindOnce(modal, 'modal', () => {
-        const attrs = snapshotAttrs(modal, ['role', 'aria-modal', 'tabindex']);
+        const attrs = snapshotAttrs(modal, ['role', 'aria-modal', 'tabindex', 'hidden']);
 
         // A controlled modal must announce AS a modal dialog, not a generic group —
         // parity with initPopover. Apply a dialog role + aria-modal (unless the
@@ -164,13 +177,16 @@ export function initModal({ root } = {}) {
           );
         }
 
-        const observer = typeof MutationObserver === 'function' ? new MutationObserver(sync) : null;
+        const Observer =
+          view?.MutationObserver ??
+          (typeof MutationObserver === 'function' ? MutationObserver : null);
+        const observer = Observer ? new Observer(sync) : null;
         observer?.observe(modal, { attributes: true, attributeFilter: ['class'] });
-        document.addEventListener('keydown', onKey, true);
-        if (modal.classList.contains('is-open')) trap(); // already open at init
+        doc.addEventListener('keydown', onKey, true);
+        sync();
         return () => {
           observer?.disconnect();
-          document.removeEventListener('keydown', onKey, true);
+          doc.removeEventListener('keydown', onKey, true);
           release();
           restoreAttrs(modal, attrs);
         };

package/behaviors/popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["popover.js"],"names":[],"mappings":"AAuCA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,uCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAkM3C"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["popover.js"],"names":[],"mappings":"AAuCA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,uCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAoM3C"}

package/behaviors/popover.js

@@ -68,7 +68,9 @@ export function initPopover({ root } = {}) {
   if (!hasDom()) return noop;
   const host = resolveHost(root);
   if (!host) return noop;
-  const view = document.defaultView;
+  const doc = host.nodeType === 9 ? host : host.ownerDocument;
+  if (!doc) return noop;
+  const view = doc.defaultView;
   const GAP = 8;
   let openPanel = null;
   let openTrigger = null;
@@ -127,7 +129,7 @@ export function initPopover({ root } = {}) {
     // Only steal focus back to the trigger when focus is still inside the panel
     // (Escape / programmatic re-toggle). An outside-click leaves focus where the
     // click landed — deliberate intent to move on, per the doc contract.
-    const focusWasInside = panel.contains(document.activeElement);
+    const focusWasInside = panel.contains(doc.activeElement);
     openPanel = openTrigger = null;
     if (panel.hasAttribute('popover') && typeof panel.hidePopover === 'function') {
       try {
@@ -235,8 +237,8 @@ export function initPopover({ root } = {}) {
 
   return bindOnce(host, 'popover', () => {
     seed();
-    document.addEventListener('click', onClick);
-    document.addEventListener('keydown', onKey);
+    doc.addEventListener('click', onClick);
+    doc.addEventListener('keydown', onKey);
     view?.addEventListener('scroll', onReflow, true);
     view?.addEventListener('resize', onReflow);
     return () => {
@@ -250,8 +252,8 @@ export function initPopover({ root } = {}) {
         restoreStyle(panel, state.style);
       }
       panelStates.clear();
-      document.removeEventListener('click', onClick);
-      document.removeEventListener('keydown', onKey);
+      doc.removeEventListener('click', onClick);
+      doc.removeEventListener('keydown', onKey);
       view?.removeEventListener('scroll', onReflow, true);
       view?.removeEventListener('resize', onReflow);
     };

package/behaviors/sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sources.d.ts","sourceRoot":"","sources":["sources.js"],"names":[],"mappings":"AA4CA;;;;;;;;;;;GAWG;AACH,uCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAmH3C;;;;;QA5Ja,MAAM;;;;cACN,OAAO;;;;YACP,OAAO"}
+{"version":3,"file":"sources.d.ts","sourceRoot":"","sources":["sources.js"],"names":[],"mappings":"AAqDA;;;;;;;;;;;GAWG;AACH,uCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA+H3C;;;;;QAlLa,MAAM;;;;cACN,OAAO;;;;YACP,OAAO"}

package/behaviors/sources.js

@@ -3,7 +3,6 @@ import {
   resolveHost,
   noop,
   bindOnce,
-  byIdInHost,
   collectHosts,
   scrollIntoViewSafe,
   closestSafe,
@@ -42,6 +41,16 @@ function sourcePreview(source) {
   return [title, meta, excerpt].filter(Boolean).join(' — ');
 }
 
+function idMapFor(island) {
+  const ids = new Map();
+  const add = (el) => {
+    if (el?.id && !ids.has(el.id)) ids.set(el.id, el);
+  };
+  add(island);
+  for (const el of island.querySelectorAll?.('[id]') || []) add(el);
+  return ids;
+}
+
 /**
  * Source/citation affordances for the `sources.css` trust layer. The behavior
  * is deliberately small: within each `[data-bronto-sources]` island it resolves
@@ -66,11 +75,23 @@ export function initSources({ root } = {}) {
     const timers = new Set();
     const seeded = [];
     const activeSources = new Set();
+    const sourcesById = idMapFor(island);
+    const previewBySource = new WeakMap();
 
     const targetFor = (ref) => {
       const id = sourceId(ref);
       if (!id) return null;
-      return byIdInHost(island, id);
+      const source = sourcesById.get(id) || null;
+      return source && island.contains(source) ? source : null;
+    };
+
+    const previewFor = (source) => {
+      let preview = previewBySource.get(source);
+      if (preview === undefined) {
+        preview = sourcePreview(source);
+        previewBySource.set(source, preview);
+      }
+      return preview;
     };
 
     const seed = () => {
@@ -81,7 +102,7 @@ export function initSources({ root } = {}) {
         const describedBy = ref.getAttribute('aria-describedby') || '';
         const describedIds = describedBy.split(/\s+/).filter(Boolean);
         const title = ref.getAttribute('title');
-        const preview = sourcePreview(source);
+        const preview = previewFor(source);
         const prior = {
           ref,
           describedBy,

package/behaviors/splitter.d.ts.map

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

package/behaviors/splitter.js

@@ -14,7 +14,16 @@ const LARGE_STEP = 10;
  * @property {'vertical' | 'horizontal'} orientation Splitter orientation.
  */
 
+const NUMBER_RE = /^[-+]?(?:(?:\d+\.?\d*)|\.\d+)(?:e[-+]?\d+)?$/i;
+
 const num = (v, fallback) => {
+  const value = String(v ?? '').trim();
+  if (!NUMBER_RE.test(value)) return fallback;
+  const n = Number(value);
+  return Number.isFinite(n) ? n : fallback;
+};
+
+const cssNum = (v, fallback) => {
   const n = Number.parseFloat(String(v ?? '').trim());
   return Number.isFinite(n) ? n : fallback;
 };
@@ -26,7 +35,7 @@ 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');
+  const data = splitter.getAttribute('data-bronto-splitter')?.trim();
   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';
@@ -87,13 +96,25 @@ function wireSplitter(splitter) {
     ]);
     const splitterPos = snapshotStyleProp(splitter, '--splitter-pos');
     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));
+    const minAttr = handle.getAttribute('aria-valuemin');
+    const maxAttr = handle.getAttribute('aria-valuemax');
+    const min = num(minAttr, DEFAULT_MIN);
+    const max = Math.max(min, num(maxAttr, DEFAULT_MAX));
     let value = clamp(
-      num(handle.getAttribute('aria-valuenow'), num(readCssValue(splitter), DEFAULT_VALUE)),
+      num(handle.getAttribute('aria-valuenow'), cssNum(readCssValue(splitter), DEFAULT_VALUE)),
       min,
       max,
     );
+    const syncRangeAttr = (name, authored, normalized) => {
+      const parsed = num(authored, Number.NaN);
+      if (
+        authored === null ||
+        !Number.isFinite(parsed) ||
+        String(authored).trim() !== fmt(normalized)
+      ) {
+        handle.setAttribute(name, fmt(normalized));
+      }
+    };
     let activePointer = null;
 
     const apply = (next, { emit = true } = {}) => {
@@ -108,8 +129,8 @@ function wireSplitter(splitter) {
     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));
+    syncRangeAttr('aria-valuemin', minAttr, min);
+    syncRangeAttr('aria-valuemax', maxAttr, max);
     apply(value, { emit: false });
 
     const fromPointer = (event) => {

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,CAwO3C"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["table.js"],"names":[],"mappings":"AAqBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,yCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA0P3C"}

package/behaviors/table.js

@@ -1,5 +1,24 @@
 import { hasDom, resolveHost, noop, bindOnce, collectHosts, closestSafe } from './internal.js';
 
+const localeOf = (el) => {
+  const locale =
+    closestSafe(el, '[lang]')?.getAttribute('lang')?.trim() ||
+    el?.ownerDocument?.documentElement?.getAttribute('lang')?.trim();
+  return locale || undefined;
+};
+
+const textComparatorFor = (el) => {
+  const options = { sensitivity: 'base', numeric: false };
+  if (typeof Intl === 'undefined' || typeof Intl.Collator !== 'function') {
+    return (a, b) => a.localeCompare(b);
+  }
+  try {
+    return new Intl.Collator(localeOf(el), options).compare;
+  } catch {
+    return new Intl.Collator(undefined, options).compare;
+  }
+};
+
 /**
  * Client-side sortable + selectable data table. Wires
  * `[data-bronto-sortable]`:
@@ -71,6 +90,8 @@ export function initTableSort({ root } = {}) {
     const rows = [];
     const checkboxStates = new WeakMap();
     const checkboxes = [];
+    const misplacedSorters = new WeakSet();
+    const compareText = textComparatorFor(table);
 
     const rememberHeaderState = (th) => {
       if (!th || headerStates.has(th)) return;
@@ -134,6 +155,15 @@ export function initTableSort({ root } = {}) {
 
     const colIndex = (th) => [...th.parentElement.children].indexOf(th);
     const cellText = (row, i) => row.children[i]?.textContent.trim() ?? '';
+    const warnMisplacedSorter = (sorter) => {
+      if (misplacedSorters.has(sorter)) return;
+      misplacedSorters.add(sorter);
+      if (typeof console !== 'undefined') {
+        console.warn(
+          '[bronto] initTableSort(): .ui-table__sort must be placed inside a <th>; ignoring this sorter.',
+        );
+      }
+    };
     // Numeric value of a cell for sorting. A `data-sort-value` attribute is the
     // authoritative escape hatch; otherwise normalize the display text so the
     // sign survives (U+2212 / en-em dashes → minus, accounting parens →
@@ -143,7 +173,7 @@ export function initTableSort({ root } = {}) {
       const cell = row.children[i];
       const explicit = cell?.getAttribute?.('data-sort-value');
       if (explicit != null && explicit.trim() !== '') {
-        const raw = explicit.trim();
+        const raw = explicit.trim().replace(/[−–—]/g, '-');
         let v = Number(raw);
         // The escape hatch must actually handle the case the doc names it for: a
         // European decimal comma. `Number("3,5")` is NaN, which silently fell
@@ -184,15 +214,18 @@ export function initTableSort({ root } = {}) {
       // 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) => {
-        const cmp = numeric
-          ? cellNum(a, i) - cellNum(b, i)
-          : cellText(a, i).localeCompare(cellText(b, i));
-        return cmp * sign;
+      const keyedRows = rows.map((row, index) => ({
+        row,
+        index,
+        key: numeric ? cellNum(row, i) : cellText(row, i),
+      }));
+      keyedRows.sort((a, b) => {
+        const cmp = numeric ? a.key - b.key : compareText(a.key, b.key);
+        return cmp === 0 ? a.index - b.index : cmp * sign;
       });
       // Re-parent in document order: sorted data rows, then any empty/sentinel
       // row last. These are existing <tr> nodes being moved; no markup is parsed.
-      tbody.append(...rows, ...emptyRows);
+      tbody.append(...keyedRows.map(({ row }) => row), ...emptyRows);
     };
 
     const allBox = table.querySelector('[data-bronto-select-all]');
@@ -227,6 +260,10 @@ export function initTableSort({ root } = {}) {
       if (sorter && table.contains(sorter)) {
         rememberSorterState(sorter);
         const th = sorter.closest('th');
+        if (!th) {
+          warnMisplacedSorter(sorter);
+          return;
+        }
         const numeric =
           (sorter.getAttribute('data-sort') || th.getAttribute('data-sort')) === 'num' ||
           th.classList.contains('is-num');

package/behaviors/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.js"],"names":[],"mappings":"AAUA;;;;;;;;;;;;;;;;;GAiBG;AACH,oCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA+I3C"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.js"],"names":[],"mappings":"AAUA;;;;;;;;;;;;;;;;;GAiBG;AACH,oCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAoL3C"}

package/behaviors/tabs.js

@@ -57,6 +57,17 @@ export function initTabs({ root } = {}) {
     const panels = [...group.querySelectorAll('.ui-tabs__panel')].filter(owned);
     if (!tabs.length) continue;
     const list = [...group.querySelectorAll('.ui-tabs__list')].find(owned);
+    const isNativeDisabled = (tab) => {
+      try {
+        if (tab.matches?.(':disabled')) return true;
+      } catch {
+        /* fall through to the native property */
+      }
+      return Boolean('disabled' in tab && tab.disabled);
+    };
+    const isReachable = (tab) => !tab.hidden && !isNativeDisabled(tab);
+    const isAriaDisabled = (tab) => tab.getAttribute('aria-disabled') === 'true';
+    const reachableTabs = () => tabs.filter(isReachable);
     const rememberState = () => ({
       list: list ? snapshotAttrs(list, ['role']) : null,
       tabs: new Map(
@@ -94,17 +105,31 @@ export function initTabs({ root } = {}) {
       }
     };
 
-    const select = (tab) => {
+    let selectedTab = null;
+    const syncTabs = (selected, tabStop) => {
       for (const t of tabs) {
-        const on = t === tab;
+        const on = t === selected;
         t.classList.toggle('is-active', on);
         t.setAttribute('role', 'tab');
         t.setAttribute('aria-selected', String(on));
-        t.tabIndex = on ? 0 : -1;
+        t.tabIndex = t === tabStop ? 0 : -1;
       }
+    };
+    const moveTabStop = (tab) => {
+      const candidates = reachableTabs();
+      const next = candidates.includes(tab) ? tab : candidates[0] || null;
+      if (!next) return false;
+      syncTabs(selectedTab, next);
+      return true;
+    };
+    const select = (tab) => {
+      const candidates = reachableTabs();
+      if (!candidates.includes(tab) || isAriaDisabled(tab)) return false;
+      selectedTab = tab;
+      syncTabs(tab, tab);
       // Only retarget panels when this tab actually controls one. A panel-less
       // tab must not hide every panel; leave the prior panel visible.
-      if (!panels.some((p) => p.dataset.panel === tab.dataset.tab)) return;
+      if (!panels.some((p) => p.dataset.panel === tab.dataset.tab)) return true;
       for (const p of panels) {
         p.setAttribute('role', 'tabpanel');
         const shown = p.dataset.panel === tab.dataset.tab;
@@ -114,6 +139,7 @@ export function initTabs({ root } = {}) {
         if (shown) p.tabIndex = 0;
         else p.removeAttribute('tabindex');
       }
+      return true;
     };
     const onClick = (e) => {
       // `tabs` is filtered to this group, so membership (not mere DOM
@@ -121,23 +147,28 @@ export function initTabs({ root } = {}) {
       const tab = closestSafe(e.target, '.ui-tab');
       if (tab && tabs.includes(tab)) {
         e.preventDefault();
-        select(tab);
-        tab.focus();
+        const handled = select(tab) || moveTabStop(tab);
+        if (handled) tab.focus();
       }
     };
     const onKey = (e) => {
-      const i = tabs.indexOf(closestSafe(e.target, '.ui-tab'));
+      const candidates = reachableTabs();
+      const i = candidates.indexOf(closestSafe(e.target, '.ui-tab'));
       if (i < 0) return;
+      const orientation =
+        list?.getAttribute('aria-orientation') === 'vertical' ? 'vertical' : 'horizontal';
+      const nextKey = orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';
+      const prevKey = orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';
       let n = i;
-      if (e.key === 'ArrowRight' || e.key === 'ArrowDown') n = (i + 1) % tabs.length;
-      else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp')
-        n = (i - 1 + tabs.length) % tabs.length;
+      if (e.key === nextKey) n = (i + 1) % candidates.length;
+      else if (e.key === prevKey) n = (i - 1 + candidates.length) % candidates.length;
       else if (e.key === 'Home') n = 0;
-      else if (e.key === 'End') n = tabs.length - 1;
+      else if (e.key === 'End') n = candidates.length - 1;
       else return;
       e.preventDefault();
-      select(tabs[n]);
-      tabs[n].focus();
+      const next = candidates[n];
+      if (!select(next)) moveTabStop(next);
+      next.focus();
     };
     cleanups.push(
       bindOnce(group, 'tabs', () => {
@@ -155,7 +186,13 @@ export function initTabs({ root } = {}) {
           t.setAttribute('aria-controls', p.id);
           p.setAttribute('aria-labelledby', t.id);
         }
-        select(tabs.find((t) => t.classList.contains('is-active')) || tabs[0]);
+        const candidates = reachableTabs();
+        const initial =
+          candidates.find((t) => t.classList.contains('is-active') && !isAriaDisabled(t)) ||
+          candidates.find((t) => !isAriaDisabled(t)) ||
+          candidates[0];
+        if (initial && !select(initial)) moveTabStop(initial);
+        else if (!initial) syncTabs(null, null);
         group.addEventListener('click', onClick);
         group.addEventListener('keydown', onKey);
         return () => {