@ponchia/ui 0.6.9 → 0.6.11

package/behaviors/carousel.js

@@ -43,6 +43,43 @@ const renderedStatusIndex = (status) => {
   return Number.isInteger(value) ? value - 1 : -1;
 };
 
+const rectRight = (rect) => rect.right ?? rect.left + rect.width;
+const rectBottom = (rect) => rect.bottom ?? rect.top + rect.height;
+
+function intersectionRatioInViewport(viewportRect, slideRect) {
+  if (!slideRect.width || !slideRect.height) return 0;
+  const left = Math.max(viewportRect.left, slideRect.left);
+  const right = Math.min(rectRight(viewportRect), rectRight(slideRect));
+  const top = Math.max(viewportRect.top, slideRect.top);
+  const bottom = Math.min(rectBottom(viewportRect), rectBottom(slideRect));
+  const width = Math.max(0, right - left);
+  const height = Math.max(0, bottom - top);
+  return (width * height) / (slideRect.width * slideRect.height);
+}
+
+function measuredCarouselIndex(viewport, slides) {
+  const viewportRect = viewport.getBoundingClientRect();
+  if (!viewportRect.width || !viewportRect.height) return -1;
+  let bestIndex = -1;
+  let bestRatio = 0;
+  for (const [i, slide] of slides.entries()) {
+    const ratio = intersectionRatioInViewport(viewportRect, slide.getBoundingClientRect());
+    if (ratio > bestRatio) {
+      bestIndex = i;
+      bestRatio = ratio;
+    }
+  }
+  return bestRatio >= 0.6 ? bestIndex : -1;
+}
+
+function bestCarouselEntry(entries) {
+  let best = null;
+  for (const ent of entries) {
+    if (ent.isIntersecting && (!best || ent.intersectionRatio > best.intersectionRatio)) best = ent;
+  }
+  return best;
+}
+
 const snapshotCarouselState = ({ viewport, slides, status, prevBtn, nextBtn, thumbs }) => ({
   viewport: snapshotNode(viewport),
   slides: slides.map((slide) => snapshotNode(slide)),
@@ -61,11 +98,38 @@ function setDefaultButtonType(button) {
   if (button?.tagName === 'BUTTON' && !button.hasAttribute('type')) button.type = 'button';
 }
 
-function applyCarouselA11y({ box, viewport, slides, status, prevBtn, nextBtn, thumbs, n }) {
+const carouselRoleDescription = (box, viewport, roleDescription) =>
+  viewport.getAttribute('data-bronto-carousel-roledescription') ||
+  box.getAttribute('data-bronto-carousel-roledescription') ||
+  roleDescription ||
+  'carousel';
+
+const carouselSlideRoleDescription = (box, viewport, slide) =>
+  slide.getAttribute('data-bronto-carousel-slide-roledescription') ||
+  viewport.getAttribute('data-bronto-carousel-slide-roledescription') ||
+  box.getAttribute('data-bronto-carousel-slide-roledescription') ||
+  'slide';
+
+function applyCarouselA11y({
+  box,
+  viewport,
+  slides,
+  status,
+  prevBtn,
+  nextBtn,
+  thumbs,
+  n,
+  roleDescription,
+}) {
   // ARIA scaffolding — pragmatic carousel semantics (not the full APG
   // tablist), the same restraint initMenu takes.
   viewport.setAttribute('role', 'group');
-  viewport.setAttribute('aria-roledescription', 'carousel');
+  if (!viewport.hasAttribute('aria-roledescription')) {
+    viewport.setAttribute(
+      'aria-roledescription',
+      carouselRoleDescription(box, viewport, roleDescription),
+    );
+  }
   if (!viewport.hasAttribute('aria-label')) {
     viewport.setAttribute(
       'aria-label',
@@ -75,7 +139,12 @@ function applyCarouselA11y({ box, viewport, slides, status, prevBtn, nextBtn, th
   if (!viewport.hasAttribute('tabindex')) viewport.tabIndex = 0;
   slides.forEach((slide, i) => {
     slide.setAttribute('role', 'group');
-    slide.setAttribute('aria-roledescription', 'slide');
+    if (!slide.hasAttribute('aria-roledescription')) {
+      slide.setAttribute(
+        'aria-roledescription',
+        carouselSlideRoleDescription(box, viewport, slide),
+      );
+    }
     if (!slide.hasAttribute('aria-label')) slide.setAttribute('aria-label', `${i + 1} of ${n}`);
   });
   if (status) status.setAttribute('aria-live', 'polite');
@@ -100,11 +169,26 @@ function bindCarouselLifecycle({
   io,
   holdProgrammatic,
   clearProgrammaticTimer,
+  onUserScrollStart,
+  roleDescription,
 }) {
   const state = snapshotCarouselState({ viewport, slides, status, prevBtn, nextBtn, thumbs });
-  applyCarouselA11y({ box, viewport, slides, status, prevBtn, nextBtn, thumbs, n });
+  applyCarouselA11y({
+    box,
+    viewport,
+    slides,
+    status,
+    prevBtn,
+    nextBtn,
+    thumbs,
+    n,
+    roleDescription,
+  });
   render();
   viewport.addEventListener('keydown', onKey);
+  viewport.addEventListener('pointerdown', onUserScrollStart);
+  viewport.addEventListener('touchstart', onUserScrollStart, { passive: true });
+  viewport.addEventListener('wheel', onUserScrollStart, { passive: true });
   box.addEventListener('click', onClick);
   // Observe inside the add callback so observe/disconnect pair with the
   // binding lifecycle: a re-init tears down the prior binding (which
@@ -116,6 +200,9 @@ function bindCarouselLifecycle({
   }
   return () => {
     viewport.removeEventListener('keydown', onKey);
+    viewport.removeEventListener('pointerdown', onUserScrollStart);
+    viewport.removeEventListener('touchstart', onUserScrollStart);
+    viewport.removeEventListener('wheel', onUserScrollStart);
     box.removeEventListener('click', onClick);
     io?.disconnect();
     clearProgrammaticTimer();
@@ -135,7 +222,9 @@ function bindCarouselLifecycle({
  * `[data-bronto-carousel-prev]` / `[data-bronto-carousel-next]` controls,
  * a `.ui-carousel__thumbs` list of `.ui-carousel__thumb` buttons, and a
  * `.ui-carousel__status` counter slot. Add `data-bronto-carousel-loop` to
- * wrap at the ends, `data-bronto-carousel-label` to name the region.
+ * wrap at the ends, `data-bronto-carousel-label` to name the region, and
+ * `data-bronto-carousel-roledescription` to localize the default
+ * `aria-roledescription` when the viewport does not already carry one.
  *
  * A full-screen **lightbox** is the same markup inside a native
  * `<dialog class="ui-lightbox">` opened by {@link initDialog}: the
@@ -146,10 +235,10 @@ function bindCarouselLifecycle({
  * (button, key, thumbnail, or swipe). SSR-safe, idempotent per carousel;
  * returns a cleanup function.
  *
- * @param {import('./internal.js').DelegateOpts} [opts]
+ * @param {import('./internal.js').DelegateOpts & { roleDescription?: string }} [opts]
  * @returns {import('./internal.js').Cleanup}
  */
-export function initCarousel({ root } = {}) {
+export function initCarousel({ root, roleDescription } = {}) {
   if (!hasDom()) return noop;
   const host = resolveHost(root);
   if (!host) return noop;
@@ -181,16 +270,48 @@ export function initCarousel({ root } = {}) {
     // While a button/keyboard nav is smooth-scrolling, the IntersectionObserver
     // would observe the intermediate slides crossing its threshold and re-fire
     // `bronto:change` for each — a feedback burst on a single Home→End jump.
-    // This flag makes the IO drive the index on *user* swipes only; a timeout
-    // (not the patchy `scrollend` event) releases it once the scroll settles.
+    // Instant/reduced-motion scrolls settle synchronously, so only smooth
+    // programmatic scrolls hold IO updates; scrollend releases early when present.
     let programmatic = false;
     let progTimer = null;
+    let clearScrollEnd = null;
+    let ignoredProgrammaticEntry = null;
+    let userScrolledDuringProgrammatic = false;
+    const releaseProgrammatic = ({ replay = true } = {}) => {
+      const replayIgnored = replay && userScrolledDuringProgrammatic && ignoredProgrammaticEntry;
+      programmatic = false;
+      if (progTimer) clearTimeout(progTimer);
+      progTimer = null;
+      clearScrollEnd?.();
+      clearScrollEnd = null;
+      userScrolledDuringProgrammatic = false;
+      const ignored = ignoredProgrammaticEntry;
+      ignoredProgrammaticEntry = null;
+      if (replayIgnored) {
+        const measured = measuredCarouselIndex(viewport, slides);
+        if (measured >= 0) syncToIndex(measured);
+        else syncFromEntry(ignored);
+      }
+    };
+    const shouldHoldProgrammatic = () => {
+      const view = viewport.ownerDocument?.defaultView;
+      if (view?.matchMedia?.('(prefers-reduced-motion: reduce)').matches) return false;
+      return view?.getComputedStyle?.(viewport).scrollBehavior === 'smooth';
+    };
     const holdProgrammatic = () => {
+      if (!shouldHoldProgrammatic()) {
+        releaseProgrammatic({ replay: false });
+        return;
+      }
       programmatic = true;
+      ignoredProgrammaticEntry = null;
+      userScrolledDuringProgrammatic = false;
       if (progTimer) clearTimeout(progTimer);
-      progTimer = setTimeout(() => {
-        programmatic = false;
-      }, 500);
+      clearScrollEnd?.();
+      const onScrollEnd = () => releaseProgrammatic();
+      viewport.addEventListener('scrollend', onScrollEnd, { once: true });
+      clearScrollEnd = () => viewport.removeEventListener('scrollend', onScrollEnd);
+      progTimer = setTimeout(releaseProgrammatic, 500);
       progTimer?.unref?.(); // don't keep a Node test process alive
     };
 
@@ -209,6 +330,22 @@ export function initCarousel({ root } = {}) {
 
     const reveal = (el) => scrollIntoViewSafe(el, { block: 'nearest', inline: 'center' });
 
+    const syncToIndex = (i) => {
+      if (i < 0 || i === index) return;
+      index = i;
+      render();
+      reveal(thumbs[index]);
+      emit();
+    };
+
+    const syncFromEntry = (entry) => syncToIndex(slides.indexOf(entry.target));
+
+    const onUserScrollStart = () => {
+      if (programmatic) userScrolledDuringProgrammatic = true;
+    };
+
+    const clearProgrammaticHold = () => releaseProgrammatic({ replay: false });
+
     const goTo = (i, { emitChange = true } = {}) => {
       const next = loop ? (i + n) % n : Math.max(0, Math.min(n - 1, i));
       const changed = next !== index;
@@ -254,20 +391,13 @@ export function initCarousel({ root } = {}) {
     if (typeof IntersectionObserver === 'function') {
       io = new IntersectionObserver(
         (entries) => {
-          if (programmatic) return; // ignore the echo of a button/key-driven scroll
-          let best = null;
-          for (const ent of entries) {
-            if (ent.isIntersecting && (!best || ent.intersectionRatio > best.intersectionRatio))
-              best = ent;
-          }
+          const best = bestCarouselEntry(entries);
           if (!best) return;
-          const i = slides.indexOf(best.target);
-          if (i >= 0 && i !== index) {
-            index = i;
-            render();
-            reveal(thumbs[index]);
-            emit();
+          if (programmatic) {
+            ignoredProgrammaticEntry = best;
+            return; // ignore the echo of a button/key-driven scroll until release
           }
+          syncFromEntry(best);
         },
         { root: viewport, threshold: 0.6 },
       );
@@ -288,9 +418,9 @@ export function initCarousel({ root } = {}) {
         onClick,
         io,
         holdProgrammatic,
-        clearProgrammaticTimer: () => {
-          if (progTimer) clearTimeout(progTimer);
-        },
+        clearProgrammaticTimer: clearProgrammaticHold,
+        onUserScrollStart,
+        roleDescription,
       }),
     );
     cleanups.push(bound);

package/behaviors/combobox.d.ts

@@ -15,7 +15,7 @@
  * optional `data-value`). An optional `.ui-combobox__empty` (hidden at rest)
  * shows when nothing matches. The behavior owns ids, `aria-expanded`,
  * `aria-controls`, `aria-activedescendant`, roving active option,
- * type-to-filter, full keyboard (Down/Up/Home/End/Enter/Escape/Tab),
+ * type-to-filter, keyboard list navigation (Down/Up/Enter/Escape/Tab),
  * pointer select, and outside-click close. On select the **visible input shows
  * the option's text label**, while the emitted `bronto:change` CustomEvent
  * carries the option's `data-value` code: `{ detail: { value, label } }` (value

package/behaviors/combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["combobox.js"],"names":[],"mappings":"AAmIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CA6O3C"}
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["combobox.js"],"names":[],"mappings":"AAkKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAqO3C"}

package/behaviors/combobox.js

@@ -12,6 +12,23 @@ import {
 
 const COMBOBOX_OPTION_SELECTOR = '[role="option"], .ui-combobox__option';
 
+const localeOf = (el) => {
+  const locale =
+    closestSafe(el, '[lang]')?.getAttribute('lang')?.trim() ||
+    el?.ownerDocument?.documentElement?.getAttribute('lang')?.trim();
+  return locale || undefined;
+};
+
+const lowerForSearch = (value, locale) => {
+  const text = String(value ?? '');
+  if (!locale) return text.toLowerCase();
+  try {
+    return text.toLocaleLowerCase(locale);
+  } catch {
+    return text.toLowerCase();
+  }
+};
+
 const snapshotAttrs = (el, names) => {
   const out = {};
   for (const name of names) {
@@ -30,14 +47,26 @@ const restoreAttrs = (el, attrs) => {
   }
 };
 
+const labelFromIdRefs = (input) => {
+  const refs = input.getAttribute('aria-labelledby')?.trim();
+  if (!refs) return '';
+  const doc = input.ownerDocument;
+  return refs
+    .split(/\s+/)
+    .map((id) => doc.getElementById(id)?.textContent?.trim())
+    .filter(Boolean)
+    .join(' ')
+    .trim();
+};
+
 const inputLabel = (input) =>
-  input.getAttribute('aria-label') || input.labels?.[0]?.textContent?.trim();
+  labelFromIdRefs(input) ||
+  input.getAttribute('aria-label')?.trim() ||
+  (input.labels ? [...input.labels].map((label) => label.textContent?.trim()).join(' ') : '') ||
+  input.getAttribute('title')?.trim() ||
+  '';
 
-const inputHasAccessibleName = (input) =>
-  input.hasAttribute('aria-label') ||
-  input.hasAttribute('aria-labelledby') ||
-  !!input.labels?.length ||
-  input.hasAttribute('title');
+const inputHasAccessibleName = (input) => !!inputLabel(input);
 
 function mirrorListboxLabel(input, list) {
   if (list.hasAttribute('aria-label') || list.hasAttribute('aria-labelledby')) return;
@@ -83,6 +112,8 @@ function bindComboboxLifecycle({
   onDocClick,
   resetActive,
 }) {
+  const doc = box.ownerDocument;
+  if (!doc) return noop;
   const state = rememberState();
   const listId = assignListId();
   syncOptions();
@@ -114,7 +145,7 @@ function bindComboboxLifecycle({
   input.addEventListener('input', onInput);
   input.addEventListener('keydown', onKey);
   list.addEventListener('click', onOptionClick);
-  document.addEventListener('click', onDocClick);
+  doc.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);
@@ -123,7 +154,7 @@ function bindComboboxLifecycle({
     input.removeEventListener('input', onInput);
     input.removeEventListener('keydown', onKey);
     list.removeEventListener('click', onOptionClick);
-    document.removeEventListener('click', onDocClick);
+    doc.removeEventListener('click', onDocClick);
     restoreState(state);
     resetActive();
   };
@@ -146,7 +177,7 @@ function bindComboboxLifecycle({
  * optional `data-value`). An optional `.ui-combobox__empty` (hidden at rest)
  * shows when nothing matches. The behavior owns ids, `aria-expanded`,
  * `aria-controls`, `aria-activedescendant`, roving active option,
- * type-to-filter, full keyboard (Down/Up/Home/End/Enter/Escape/Tab),
+ * type-to-filter, keyboard list navigation (Down/Up/Enter/Escape/Tab),
  * pointer select, and outside-click close. On select the **visible input shows
  * the option's text label**, while the emitted `bronto:change` CustomEvent
  * carries the option's `data-value` code: `{ detail: { value, label } }` (value
@@ -181,6 +212,8 @@ export function initCombobox({ root } = {}) {
     const empty = box.querySelector('.ui-combobox__empty');
     const optionStates = new WeakMap();
     let listId = '';
+    const optionIdBase = `bronto-cb-opt-${nextFieldUid()}`;
+    const locale = localeOf(box);
 
     const rememberOptionState = (option) => {
       if (optionStates.has(option)) return;
@@ -202,7 +235,7 @@ export function initCombobox({ root } = {}) {
       ]),
       list: {
         hidden: list.hidden,
-        attrs: snapshotAttrs(list, ['id', 'role', 'aria-label']),
+        attrs: snapshotAttrs(list, ['id', 'role', 'aria-label', 'aria-labelledby']),
       },
       empty: empty
         ? {
@@ -238,7 +271,7 @@ export function initCombobox({ root } = {}) {
       options = [...list.querySelectorAll(COMBOBOX_OPTION_SELECTOR)];
       options.forEach((o, i) => {
         rememberOptionState(o);
-        if (!o.id) o.id = `${listId}-opt-${i}`;
+        if (!o.id) o.id = `${optionIdBase}-${i}`;
         o.setAttribute('role', 'option');
       });
     };
@@ -270,10 +303,10 @@ export function initCombobox({ root } = {}) {
     };
 
     const filter = () => {
-      const q = input.value.trim().toLowerCase();
+      const q = lowerForSearch(input.value.trim(), locale);
       let any = false;
       for (const o of options) {
-        const match = !q || o.textContent.toLowerCase().includes(q);
+        const match = !q || lowerForSearch(o.textContent, locale).includes(q);
         o.hidden = !match;
         if (match) any = true;
       }
@@ -313,14 +346,6 @@ export function initCombobox({ root } = {}) {
       active = options.indexOf(vis[next]);
       setActive(options[active]);
     };
-    const activateEdge = (which) => {
-      if (list.hidden) return false;
-      const v = visible();
-      if (!v.length) return true;
-      active = options.indexOf(which === 'first' ? v[0] : v[v.length - 1]);
-      setActive(options[active]);
-      return true;
-    };
     const selectActive = () => {
       if (list.hidden || active < 0 || options[active].hidden) return false;
       select(options[active]);
@@ -356,8 +381,6 @@ export function initCombobox({ root } = {}) {
         move(-1);
         return true;
       },
-      Home: () => activateEdge('first'),
-      End: () => activateEdge('last'),
       Enter: () => selectActive(),
       Escape: () => closeIfOpen(),
       Tab: () => {

package/behaviors/command.d.ts

@@ -16,7 +16,7 @@
  * `data-value`), interleaved with `.ui-command__group` labels and an optional
  * `.ui-command__empty`. The behavior owns ids, `role=combobox/listbox/option`,
  * `aria-activedescendant`, a roving active item, substring filtering (hiding
- * empty groups), full keyboard (Down/Up/Home/End/Enter/Escape), and pointer
+ * empty groups), keyboard list navigation (Down/Up/Enter/Escape), and pointer
  * select. It emits `bronto:command:select` ({ detail: { value, label } }) on
  * choose and `bronto:command:close` on Escape. SSR-safe, idempotent per
  * instance; returns a cleanup function.

package/behaviors/command.d.ts.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["command.js"],"names":[],"mappings":"AA6BA;;;;GAIG;AAEH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,uCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAiP3C;;;;;WA3Qa,MAAM;;;;WACN,MAAM"}

package/behaviors/command.js

@@ -10,6 +10,23 @@ import {
   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 lowerForSearch = (value, locale) => {
+  const text = String(value ?? '');
+  if (!locale) return text.toLowerCase();
+  try {
+    return text.toLocaleLowerCase(locale);
+  } catch {
+    return text.toLowerCase();
+  }
+};
+
 /**
  * @typedef {object} CommandSelectDetail
  * @property {string} value The chosen command's value.
@@ -29,7 +46,7 @@ import {
  * `data-value`), interleaved with `.ui-command__group` labels and an optional
  * `.ui-command__empty`. The behavior owns ids, `role=combobox/listbox/option`,
  * `aria-activedescendant`, a roving active item, substring filtering (hiding
- * empty groups), full keyboard (Down/Up/Home/End/Enter/Escape), and pointer
+ * empty groups), keyboard list navigation (Down/Up/Enter/Escape), and pointer
  * select. It emits `bronto:command:select` ({ detail: { value, label } }) on
  * choose and `bronto:command:close` on Escape. SSR-safe, idempotent per
  * instance; returns a cleanup function.
@@ -65,6 +82,31 @@ export function initCommand({ root } = {}) {
     }
   };
 
+  const firstTextNode = (el) => {
+    for (const node of el.childNodes) {
+      if (node.nodeType === 3 && node.nodeValue.trim()) return node;
+      if (node.nodeType === 1) {
+        const child = firstTextNode(node);
+        if (child) return child;
+      }
+    }
+    return null;
+  };
+
+  const refreshLiveText = (el) => {
+    const node = firstTextNode(el);
+    if (!node) return;
+    const text = node.nodeValue;
+    node.nodeValue = '';
+    node.nodeValue = text;
+  };
+
+  const prepareEmptyState = (el) => {
+    if (!el) return;
+    el.setAttribute('role', 'status');
+    el.setAttribute('aria-live', 'polite');
+  };
+
   for (const box of palettes) {
     const input = box.querySelector('.ui-command__input, input');
     const list = box.querySelector('.ui-command__list, [role="listbox"]');
@@ -72,6 +114,7 @@ export function initCommand({ root } = {}) {
     const empty = box.querySelector('.ui-command__empty');
     const items = [...list.querySelectorAll('.ui-command__item, [role="option"]')];
     const groups = [...list.querySelectorAll('.ui-command__group')];
+    const locale = localeOf(box);
 
     const rememberState = () => ({
       input: snapshotAttrs(input, [
@@ -83,7 +126,12 @@ export function initCommand({ root } = {}) {
         'autocomplete',
       ]),
       list: snapshotAttrs(list, ['id', 'role']),
-      empty: empty ? { hidden: empty.hidden } : null,
+      empty: empty
+        ? {
+            hidden: empty.hidden,
+            attrs: snapshotAttrs(empty, ['role', 'aria-live']),
+          }
+        : null,
       groups: groups.map((g) => ({
         el: g,
         hidden: g.hidden,
@@ -100,7 +148,10 @@ export function initCommand({ root } = {}) {
     const restoreState = (state) => {
       restoreAttrs(input, state.input);
       restoreAttrs(list, state.list);
-      if (empty && state.empty) empty.hidden = state.empty.hidden;
+      if (empty && state.empty) {
+        empty.hidden = state.empty.hidden;
+        restoreAttrs(empty, state.empty.attrs);
+      }
       for (const group of state.groups) {
         group.el.hidden = group.hidden;
         restoreAttrs(group.el, group.attrs);
@@ -146,15 +197,18 @@ export function initCommand({ root } = {}) {
     };
 
     const filter = () => {
-      const q = input.value.trim().toLowerCase();
+      const q = lowerForSearch(input.value.trim(), locale);
       let any = false;
       for (const it of items) {
-        const match = !q || it.textContent.toLowerCase().includes(q);
+        const match = !q || lowerForSearch(it.textContent, locale).includes(q);
         it.hidden = !match;
         if (match) any = true;
       }
       syncGroups();
-      if (empty) empty.hidden = any;
+      if (empty) {
+        empty.hidden = any;
+        if (!any) refreshLiveText(empty);
+      }
       const vis = visible();
       setActive(vis[0] || null);
     };
@@ -191,22 +245,6 @@ export function initCommand({ root } = {}) {
           e.preventDefault();
           move(-1);
           break;
-        case 'Home': {
-          const v = visible();
-          if (v.length) {
-            setActive(v[0]);
-            e.preventDefault();
-          }
-          break;
-        }
-        case 'End': {
-          const v = visible();
-          if (v.length) {
-            setActive(v[v.length - 1]);
-            e.preventDefault();
-          }
-          break;
-        }
         case 'Enter':
           if (active >= 0 && !items[active].hidden) {
             choose(items[active]);
@@ -228,12 +266,14 @@ export function initCommand({ root } = {}) {
     const bound = bindOnce(box, 'command', () => {
       const state = rememberState();
       const listId = list.id || (list.id = `bronto-cmd-${nextFieldUid()}`);
+      const optionIdBase = `bronto-cmd-opt-${nextFieldUid()}`;
       items.forEach((it, i) => {
-        if (!it.id) it.id = `${listId}-opt-${i}`;
+        if (!it.id) it.id = `${optionIdBase}-${i}`;
         it.setAttribute('role', 'option');
       });
       groups.forEach((g) => g.setAttribute('role', 'presentation'));
       list.setAttribute('role', 'listbox');
+      prepareEmptyState(empty);
       input.setAttribute('role', 'combobox');
       input.setAttribute('aria-controls', listId);
       input.setAttribute('aria-autocomplete', 'list');

package/behaviors/connectors.d.ts.map

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