@ponchia/ui 0.6.7 → 0.6.9

package/behaviors/combobox.js

@@ -7,8 +7,128 @@ import {
   scrollIntoViewSafe,
   wrapIndex,
   collectHosts,
+  closestSafe,
 } from './internal.js';
 
+const COMBOBOX_OPTION_SELECTOR = '[role="option"], .ui-combobox__option';
+
+const snapshotAttrs = (el, names) => {
+  const out = {};
+  for (const name of names) {
+    out[name] = {
+      had: el.hasAttribute(name),
+      value: el.getAttribute(name),
+    };
+  }
+  return out;
+};
+
+const restoreAttrs = (el, attrs) => {
+  for (const [name, attr] of Object.entries(attrs)) {
+    if (attr.had) el.setAttribute(name, attr.value);
+    else el.removeAttribute(name);
+  }
+};
+
+const inputLabel = (input) =>
+  input.getAttribute('aria-label') || input.labels?.[0]?.textContent?.trim();
+
+const inputHasAccessibleName = (input) =>
+  input.hasAttribute('aria-label') ||
+  input.hasAttribute('aria-labelledby') ||
+  !!input.labels?.length ||
+  input.hasAttribute('title');
+
+function mirrorListboxLabel(input, list) {
+  if (list.hasAttribute('aria-label') || list.hasAttribute('aria-labelledby')) return;
+  const name = inputLabel(input);
+  if (name) list.setAttribute('aria-label', name);
+}
+
+function warnNamelessCombobox(input) {
+  if (inputHasAccessibleName(input) || typeof console === 'undefined') return;
+  console.warn(
+    '[bronto] initCombobox(): the combobox input has no accessible name — add a <label>, aria-label, or aria-labelledby (a placeholder is not enough).',
+  );
+}
+
+function prepareEmptyState(empty) {
+  if (!empty) return;
+  empty.hidden = true;
+  if (!empty.hasAttribute('role')) empty.setAttribute('role', 'status');
+}
+
+function liveOptionObserver(box, list, relist) {
+  if (!box.hasAttribute('data-bronto-combobox-live')) return null;
+  if (typeof MutationObserver !== 'function') return null;
+  const observer = new MutationObserver(relist);
+  observer.observe(list, { childList: true, subtree: true });
+  return observer;
+}
+
+function bindComboboxLifecycle({
+  box,
+  input,
+  list,
+  empty,
+  rememberState,
+  restoreState,
+  assignListId,
+  syncOptions,
+  close,
+  relist,
+  onInput,
+  onKey,
+  onOptionClick,
+  onDocClick,
+  resetActive,
+}) {
+  const state = rememberState();
+  const listId = assignListId();
+  syncOptions();
+  list.setAttribute('role', 'listbox');
+  // Give the listbox its own accessible name (a bare role=listbox is unnamed
+  // to a screen reader) by mirroring the input's real name.
+  // The placeholder is deliberately NOT in this chain: the input warning below
+  // already rejects a placeholder as an inadequate name, so papering the
+  // listbox over with it would contradict that. If there is no real name, the
+  // listbox stays unnamed and the warning is the signal.
+  mirrorListboxLabel(input, list);
+  // A `role="combobox"` with no accessible name is a silent AT failure. A
+  // placeholder is not a robust name (it can vanish and is ignored by some
+  // AT), so warn unless there is a real label/aria-label/aria-labelledby/title
+  // We cannot invent a good name, hence a dev-time warning, not a guess.
+  warnNamelessCombobox(input);
+  input.setAttribute('role', 'combobox');
+  input.setAttribute('aria-controls', listId);
+  input.setAttribute('aria-autocomplete', 'list');
+  input.setAttribute('aria-expanded', 'false');
+  input.setAttribute('autocomplete', 'off');
+  // Hide the empty-state at rest: it must only appear once a filter yields no
+  // matches, never on an idle combobox. Without this an author who omits
+  // `hidden` on `.ui-combobox__empty` ships a box that reads "No matches"
+  // before the user has typed anything. Make it a status live region so its
+  // appearance is announced.
+  prepareEmptyState(empty);
+  close();
+  input.addEventListener('input', onInput);
+  input.addEventListener('keydown', onKey);
+  list.addEventListener('click', onOptionClick);
+  document.addEventListener('click', onDocClick);
+  // Opt-in: keep options in sync with a list mutated after init (async /
+  // remote results). Off by default so the common static case stays free.
+  const observer = liveOptionObserver(box, list, relist);
+  return () => {
+    observer?.disconnect();
+    input.removeEventListener('input', onInput);
+    input.removeEventListener('keydown', onKey);
+    list.removeEventListener('click', onOptionClick);
+    document.removeEventListener('click', onDocClick);
+    restoreState(state);
+    resetActive();
+  };
+}
+
 /**
  * Editable combobox with a filtered listbox popup, implementing the
  * WAI-ARIA APG combobox pattern (the widget the framework most lacked
@@ -59,59 +179,69 @@ export function initCombobox({ root } = {}) {
     const list = box.querySelector('[role="listbox"], .ui-combobox__list');
     if (!input || !list) continue;
     const empty = box.querySelector('.ui-combobox__empty');
-    const listId = list.id || (list.id = `bronto-cb-list-${nextFieldUid()}`);
+    const optionStates = new WeakMap();
+    let listId = '';
+
+    const rememberOptionState = (option) => {
+      if (optionStates.has(option)) return;
+      optionStates.set(option, {
+        hidden: option.hidden,
+        active: option.classList.contains('is-active'),
+        attrs: snapshotAttrs(option, ['id', 'role', 'aria-selected']),
+      });
+    };
+
+    const rememberState = () => ({
+      input: snapshotAttrs(input, [
+        'role',
+        'aria-controls',
+        'aria-autocomplete',
+        'aria-expanded',
+        'aria-activedescendant',
+        'autocomplete',
+      ]),
+      list: {
+        hidden: list.hidden,
+        attrs: snapshotAttrs(list, ['id', 'role', 'aria-label']),
+      },
+      empty: empty
+        ? {
+            hidden: empty.hidden,
+            attrs: snapshotAttrs(empty, ['role']),
+          }
+        : null,
+      options: optionStates,
+    });
+
+    const restoreState = (state) => {
+      restoreAttrs(input, state.input);
+      list.hidden = state.list.hidden;
+      restoreAttrs(list, state.list.attrs);
+      if (empty && state.empty) {
+        empty.hidden = state.empty.hidden;
+        restoreAttrs(empty, state.empty.attrs);
+      }
+      for (const option of options) {
+        const optionState = state.options.get(option);
+        if (!optionState) continue;
+        option.hidden = optionState.hidden;
+        option.classList.toggle('is-active', optionState.active);
+        restoreAttrs(option, optionState.attrs);
+      }
+    };
+
     // Re-readable so the opt-in MutationObserver (`data-bronto-combobox-live`)
     // can pick up async/replaced option nodes without a full re-init. `visible`,
     // `filter`, `move`, etc. close over this binding, so reassigning it is enough.
     let options = [];
     const syncOptions = () => {
-      options = [...list.querySelectorAll('[role="option"], .ui-combobox__option')];
+      options = [...list.querySelectorAll(COMBOBOX_OPTION_SELECTOR)];
       options.forEach((o, i) => {
+        rememberOptionState(o);
         if (!o.id) o.id = `${listId}-opt-${i}`;
         o.setAttribute('role', 'option');
       });
     };
-    syncOptions();
-    list.setAttribute('role', 'listbox');
-    // Give the listbox its own accessible name (a bare role=listbox is unnamed
-    // to a screen reader) by mirroring the input's REAL name. (a11y review C30.)
-    // The placeholder is deliberately NOT in this chain: the input warning below
-    // already rejects a placeholder as an inadequate name, so papering the
-    // listbox over with it would contradict that — if there's no real name the
-    // listbox stays unnamed and the warning is the signal. (component audit C28.)
-    if (!list.hasAttribute('aria-label') && !list.hasAttribute('aria-labelledby')) {
-      const name = input.getAttribute('aria-label') || input.labels?.[0]?.textContent?.trim();
-      if (name) list.setAttribute('aria-label', name);
-    }
-    // A `role="combobox"` with no accessible name is a silent AT failure. A
-    // placeholder is not a robust name (it can vanish and is ignored by some
-    // AT), so warn unless there is a real label/aria-label/aria-labelledby/title
-    // (C7). We can't invent a good name, hence a dev-time warning, not a guess.
-    const inputNamed =
-      input.hasAttribute('aria-label') ||
-      input.hasAttribute('aria-labelledby') ||
-      !!input.labels?.length ||
-      input.hasAttribute('title');
-    if (!inputNamed && typeof console !== 'undefined') {
-      console.warn(
-        '[bronto] initCombobox(): the combobox input has no accessible name — add a <label>, aria-label, or aria-labelledby (a placeholder is not enough).',
-      );
-    }
-    input.setAttribute('role', 'combobox');
-    input.setAttribute('aria-controls', listId);
-    input.setAttribute('aria-autocomplete', 'list');
-    input.setAttribute('aria-expanded', 'false');
-    input.setAttribute('autocomplete', 'off');
-    list.hidden = true;
-    // Hide the empty-state at rest: it must only appear once a filter yields no
-    // matches, never on an idle combobox. Without this an author who omits
-    // `hidden` on `.ui-combobox__empty` ships a box that reads "No matches"
-    // before the user has typed anything. (component audit C10.) Make it a
-    // status live region so its appearance is announced. (component audit C38.)
-    if (empty) {
-      empty.hidden = true;
-      if (!empty.hasAttribute('role')) empty.setAttribute('role', 'status');
-    }
 
     let active = -1;
     const visible = () => options.filter((o) => !o.hidden);
@@ -161,7 +291,6 @@ export function initCombobox({ root } = {}) {
       // Show the human LABEL in the input; emit the `data-value` CODE in the
       // event. The natural pattern is code in `data-value`, label in the text —
       // putting the code in the visible input silently shows the user a raw code.
-      // (component audit C10.)
       const label = opt.textContent.trim();
       const value = opt.dataset.value ?? label;
       input.value = label;
@@ -214,62 +343,61 @@ export function initCombobox({ root } = {}) {
 
     const onInput = () => filter();
     const onKey = (e) => {
-      switch (e.key) {
-        case 'ArrowDown':
-          e.preventDefault();
-          list.hidden ? filter() : move(1);
-          break;
-        case 'ArrowUp':
-          e.preventDefault();
-          move(-1);
-          break;
-        case 'Home':
-          if (activateEdge('first')) e.preventDefault();
-          break;
-        case 'End':
-          if (activateEdge('last')) e.preventDefault();
-          break;
-        case 'Enter':
-          if (selectActive()) e.preventDefault();
-          break;
-        case 'Escape':
-          if (closeIfOpen()) e.preventDefault();
-          break;
-        case 'Tab':
-          close();
-          break;
-        default:
-          break;
-      }
+      const handled = keyHandlers[e.key]?.();
+      if (handled) e.preventDefault();
+    };
+    const keyHandlers = {
+      ArrowDown: () => {
+        if (list.hidden) filter();
+        else move(1);
+        return true;
+      },
+      ArrowUp: () => {
+        move(-1);
+        return true;
+      },
+      Home: () => activateEdge('first'),
+      End: () => activateEdge('last'),
+      Enter: () => selectActive(),
+      Escape: () => closeIfOpen(),
+      Tab: () => {
+        close();
+        return false;
+      },
     };
     const onOptionClick = (e) => {
-      const opt = e.target.closest('[role="option"], .ui-combobox__option');
+      const opt = closestSafe(e.target, COMBOBOX_OPTION_SELECTOR);
       if (opt) select(opt);
     };
     const onDocClick = (e) => {
       if (!box.contains(e.target)) close();
     };
+    const assignListId = () => {
+      listId = list.id || (list.id = `bronto-cb-list-${nextFieldUid()}`);
+      return listId;
+    };
 
-    const bound = bindOnce(box, 'combobox', () => {
-      input.addEventListener('input', onInput);
-      input.addEventListener('keydown', onKey);
-      list.addEventListener('click', onOptionClick);
-      document.addEventListener('click', onDocClick);
-      // Opt-in: keep options in sync with a list mutated after init (async /
-      // remote results). Off by default so the common static case stays free.
-      const observer =
-        box.hasAttribute('data-bronto-combobox-live') && typeof MutationObserver === 'function'
-          ? new MutationObserver(relist)
-          : null;
-      observer?.observe(list, { childList: true, subtree: true });
-      return () => {
-        observer?.disconnect();
-        input.removeEventListener('input', onInput);
-        input.removeEventListener('keydown', onKey);
-        list.removeEventListener('click', onOptionClick);
-        document.removeEventListener('click', onDocClick);
-      };
-    });
+    const bound = bindOnce(box, 'combobox', () =>
+      bindComboboxLifecycle({
+        box,
+        input,
+        list,
+        empty,
+        rememberState,
+        restoreState,
+        assignListId,
+        syncOptions,
+        close,
+        relist,
+        onInput,
+        onKey,
+        onOptionClick,
+        onDocClick,
+        resetActive: () => {
+          active = -1;
+        },
+      }),
+    );
     cleanups.push(bound);
   }
 

package/behaviors/command.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["command.js"],"names":[],"mappings":"AAWA;;;;GAIG;AAEH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,uCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA+J3C;;;;;WAzLa,MAAM;;;;WACN,MAAM"}
+{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["command.js"],"names":[],"mappings":"AAYA;;;;GAIG;AAEH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,uCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA0N3C;;;;;WApPa,MAAM;;;;WACN,MAAM"}

package/behaviors/command.js

@@ -7,6 +7,7 @@ import {
   collectHosts,
   scrollIntoViewSafe,
   wrapIndex,
+  closestSafe,
 } from './internal.js';
 
 /**
@@ -46,6 +47,24 @@ export function initCommand({ root } = {}) {
   const palettes = collectHosts(host, '[data-bronto-command]');
   const cleanups = [];
 
+  const snapshotAttrs = (el, names) => {
+    const out = {};
+    for (const name of names) {
+      out[name] = {
+        had: el.hasAttribute(name),
+        value: el.getAttribute(name),
+      };
+    }
+    return out;
+  };
+
+  const restoreAttrs = (el, attrs) => {
+    for (const [name, attr] of Object.entries(attrs)) {
+      if (attr.had) el.setAttribute(name, attr.value);
+      else el.removeAttribute(name);
+    }
+  };
+
   for (const box of palettes) {
     const input = box.querySelector('.ui-command__input, input');
     const list = box.querySelector('.ui-command__list, [role="listbox"]');
@@ -54,18 +73,44 @@ export function initCommand({ root } = {}) {
     const items = [...list.querySelectorAll('.ui-command__item, [role="option"]')];
     const groups = [...list.querySelectorAll('.ui-command__group')];
 
-    const listId = list.id || (list.id = `bronto-cmd-${nextFieldUid()}`);
-    items.forEach((it, i) => {
-      if (!it.id) it.id = `${listId}-opt-${i}`;
-      it.setAttribute('role', 'option');
+    const rememberState = () => ({
+      input: snapshotAttrs(input, [
+        'role',
+        'aria-controls',
+        'aria-autocomplete',
+        'aria-expanded',
+        'aria-activedescendant',
+        'autocomplete',
+      ]),
+      list: snapshotAttrs(list, ['id', 'role']),
+      empty: empty ? { hidden: empty.hidden } : null,
+      groups: groups.map((g) => ({
+        el: g,
+        hidden: g.hidden,
+        attrs: snapshotAttrs(g, ['role']),
+      })),
+      items: items.map((it) => ({
+        el: it,
+        hidden: it.hidden,
+        active: it.classList.contains('is-active'),
+        attrs: snapshotAttrs(it, ['id', 'role', 'aria-selected']),
+      })),
     });
-    groups.forEach((g) => g.setAttribute('role', 'presentation'));
-    list.setAttribute('role', 'listbox');
-    input.setAttribute('role', 'combobox');
-    input.setAttribute('aria-controls', listId);
-    input.setAttribute('aria-autocomplete', 'list');
-    input.setAttribute('aria-expanded', 'true');
-    input.setAttribute('autocomplete', 'off');
+
+    const restoreState = (state) => {
+      restoreAttrs(input, state.input);
+      restoreAttrs(list, state.list);
+      if (empty && state.empty) empty.hidden = state.empty.hidden;
+      for (const group of state.groups) {
+        group.el.hidden = group.hidden;
+        restoreAttrs(group.el, group.attrs);
+      }
+      for (const item of state.items) {
+        item.el.hidden = item.hidden;
+        item.el.classList.toggle('is-active', item.active);
+        restoreAttrs(item.el, item.attrs);
+      }
+    };
 
     let active = -1;
     const visible = () => items.filter((it) => !it.hidden);
@@ -176,22 +221,37 @@ export function initCommand({ root } = {}) {
       }
     };
     const onClick = (e) => {
-      const item = e.target.closest('.ui-command__item, [role="option"]');
+      const item = closestSafe(e.target, '.ui-command__item, [role="option"]');
       if (item && list.contains(item)) choose(item);
     };
 
     const bound = bindOnce(box, 'command', () => {
+      const state = rememberState();
+      const listId = list.id || (list.id = `bronto-cmd-${nextFieldUid()}`);
+      items.forEach((it, i) => {
+        if (!it.id) it.id = `${listId}-opt-${i}`;
+        it.setAttribute('role', 'option');
+      });
+      groups.forEach((g) => g.setAttribute('role', 'presentation'));
+      list.setAttribute('role', 'listbox');
+      input.setAttribute('role', 'combobox');
+      input.setAttribute('aria-controls', listId);
+      input.setAttribute('aria-autocomplete', 'list');
+      input.setAttribute('aria-expanded', 'true');
+      input.setAttribute('autocomplete', 'off');
       input.addEventListener('input', onInput);
       input.addEventListener('keydown', onKey);
       list.addEventListener('click', onClick);
+      // Seed the initial active item (first visible).
+      filter();
       return () => {
         input.removeEventListener('input', onInput);
         input.removeEventListener('keydown', onKey);
         list.removeEventListener('click', onClick);
+        restoreState(state);
+        active = -1;
       };
     });
-    // Seed the initial active item (first visible).
-    filter();
     cleanups.push(bound);
   }
 

package/behaviors/connectors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"connectors.d.ts","sourceRoot":"","sources":["connectors.js"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;GAcG;AACH,0CAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA+E3C"}
+{"version":3,"file":"connectors.d.ts","sourceRoot":"","sources":["connectors.js"],"names":[],"mappings":"AA+EA;;;;;;;;;;;;;;GAcG;AACH,0CAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAwG3C"}