@ponchia/ui 0.6.8 → 0.6.10

package/behaviors/combobox.js

@@ -10,6 +10,125 @@ import {
   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
@@ -55,24 +174,6 @@ export function initCombobox({ root } = {}) {
   const boxes = collectHosts(host, '[data-bronto-combobox]');
   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 boxes) {
     const input = box.querySelector('[role="combobox"], .ui-combobox__input');
     const list = box.querySelector('[role="listbox"], .ui-combobox__list');
@@ -134,7 +235,7 @@ export function initCombobox({ root } = {}) {
     // `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}`;
@@ -190,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;
@@ -243,107 +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 = closestSafe(e.target, '[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 bound = bindOnce(box, 'combobox', () => {
-      const state = rememberState();
+    const assignListId = () => {
       listId = list.id || (list.id = `bronto-cb-list-${nextFieldUid()}`);
-      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');
-      // 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');
-      }
-      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 =
-        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);
-        restoreState(state);
-        active = -1;
-      };
-    });
+      return listId;
+    };
+
+    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/connectors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"connectors.d.ts","sourceRoot":"","sources":["connectors.js"],"names":[],"mappings":"AA2CA;;;;;;;;;;;;;;GAcG;AACH,0CAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA4H3C"}
+{"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"}

package/behaviors/connectors.js

@@ -2,6 +2,9 @@ import { hasDom, resolveHost, noop, bindOnce, byIdInHost, collectHosts } from '.
 import { connectRects, arrowHead, dotMark } from '../connectors/index.js';
 
 const SVGNS = 'http://www.w3.org/2000/svg';
+const NORMALIZED_PATH_LENGTH = '1';
+const END_DOT_RADIUS = 3;
+const END_ARROW_SIZE = 8;
 
 const snapshotAttrs = (el) =>
   Array.from(el.attributes, ({ name, value }) => ({
@@ -41,6 +44,39 @@ const restorePart = (svg, selector, state) => {
   state.node.textContent = state.textContent;
 };
 
+const upsertConnectorPart = (svg, selector, className) => {
+  let part = svg.querySelector(selector);
+  if (part) return part;
+  part = document.createElementNS(SVGNS, 'path');
+  part.setAttribute('class', className);
+  svg.appendChild(part);
+  return part;
+};
+
+const syncDrawPathLength = (svg, path) => {
+  // pathLength normalises the draw animation, but it would also reframe a
+  // dashed line's user-unit dasharray — so only set it for draw connectors.
+  if (svg.classList.contains('ui-connector--draw')) {
+    path.setAttribute('pathLength', NORMALIZED_PATH_LENGTH);
+  } else {
+    path.removeAttribute('pathLength');
+  }
+};
+
+const syncConnectorEnd = (svg, end, angle) => {
+  const kind = svg.dataset.end || 'arrow';
+  const cap = svg.querySelector('.ui-connector__end');
+  if (kind === 'none') {
+    cap?.remove();
+    return;
+  }
+  const next = cap || upsertConnectorPart(svg, '.ui-connector__end', 'ui-connector__end');
+  next.setAttribute(
+    'd',
+    kind === 'dot' ? dotMark(end, END_DOT_RADIUS) : arrowHead(end, angle, END_ARROW_SIZE),
+  );
+};
+
 /**
  * Draw + keep leader lines in sync. Each `[data-bronto-connector]` is an
  * `.ui-connector` SVG overlaying a positioned container; `data-from`/`data-to`
@@ -118,30 +154,10 @@ export function initConnectors({ root } = {}) {
         fromSide: svg.dataset.fromSide || undefined,
         toSide: svg.dataset.toSide || undefined,
       });
-      let path = svg.querySelector('.ui-connector__path');
-      if (!path) {
-        path = document.createElementNS(SVGNS, 'path');
-        path.setAttribute('class', 'ui-connector__path');
-        svg.appendChild(path);
-      }
+      const path = upsertConnectorPart(svg, '.ui-connector__path', 'ui-connector__path');
       path.setAttribute('d', d);
-      // pathLength="1" normalises the draw animation, but it would also reframe
-      // a dashed line's user-unit dasharray — so only set it for draw connectors.
-      if (svg.classList.contains('ui-connector--draw')) path.setAttribute('pathLength', '1');
-      else path.removeAttribute('pathLength');
-
-      const kind = svg.dataset.end || 'arrow';
-      let cap = svg.querySelector('.ui-connector__end');
-      if (kind === 'none') {
-        cap?.remove();
-        continue;
-      }
-      if (!cap) {
-        cap = document.createElementNS(SVGNS, 'path');
-        cap.setAttribute('class', 'ui-connector__end');
-        svg.appendChild(cap);
-      }
-      cap.setAttribute('d', kind === 'dot' ? dotMark(end, 3) : arrowHead(end, angle, 8));
+      syncDrawPathLength(svg, path);
+      syncConnectorEnd(svg, end, angle);
     }
   };
 

package/behaviors/forms.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"forms.d.ts","sourceRoot":"","sources":["forms.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,8CAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAsP3C"}
+{"version":3,"file":"forms.d.ts","sourceRoot":"","sources":["forms.js"],"names":[],"mappings":"AAiMA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,8CAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA2D3C"}