@luigisbox/luma 0.4.0 → 0.6.0

package/src/widgets/autocomplete/index.ts

@@ -16,7 +16,9 @@
 
 import { borrow, liveRegion, useContrast } from '../../core/a11y';
 import { luminanceOf, readable } from '../../core/color';
+import { defaultSubmitter, formDataOf } from '../../core/default-button';
 import { onOwnBack } from '../../core/entries';
+import { AC_HOOKS, ANALYTICS, QUERY_URL } from '../../core/features';
 import { mark, reportError } from '../../core/health';
 import { modalOf } from '../../core/own';
 import { byName, view } from '../../core/templates';
@@ -64,6 +66,12 @@ const GRID_MAX = 6;
 export const SHEET_MEDIA = '(max-width: 600px), (hover: none) and (max-height: 500px)';
 /** The sheet's visible height below which its top product is drawn smaller (the keyboard up): more of the list shows. */
 const SHEET_SHORT = 480;
+/** How far (px, vertically) a finger moves in the sheet's list before it is a swipe, not a tap: the keyboard goes away. */
+const SWIPE = 10;
+/** A move this far (px), then the browser taking the gesture over (pointercancel), is a swipe too; less is a finger's jitter. */
+const SWIPE_START = 4;
+/** How long (ms) after the browser took a finger's gesture over a scroll of the list is still that finger's. */
+const SWIPE_SCROLL_MS = 200;
 
 /** A computed colour that paints nothing (`rgba(0, 0, 0, 0)`, `transparent`, `color(srgb 0 0 0 / 0)`). */
 const clear = (c: string) => !c || c === 'transparent' || /(?:,|\/)\s*0(?:\.0*)?\)$/.test(c);
@@ -255,7 +263,12 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
   let want = '';
   /** Scrolled lists in the dropdown (the panel's columns, the sheet's list): back to their top for a new result set. */
   const scrolled = new Set<Element>();
+  /** A finger down in the sheet's list (a swipe through it puts the keyboard away: ensureHost); `ours`: the list's next scroll is our reset. */
+  let swipe: { list: Element; x: number; y: number; moved: boolean; cancelled?: number; ours?: boolean } | null = null;
   const toTop = () => {
+    // Our scroll, not the finger's: a finger at rest on the list is no swipe, the same finger's drag
+    // after it still is. Review (PR 26): a new result set's reset put the keyboard away.
+    if (swipe && scrolled.has(swipe.list)) swipe.ours = true;
     for (const el of scrolled) if (el.isConnected) el.scrollTop = 0;
     scrolled.clear();
   };
@@ -341,13 +354,15 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
     const intoMirror = (e: Event) => sheet && e.composedPath()[0] === mirror;
     box.addEventListener('pointerdown', (e) => e.pointerType !== 'touch' && !intoMirror(e) && e.preventDefault());
     box.addEventListener('mousedown', (e) => !intoMirror(e) && e.preventDefault());
-    // A middle click opens a suggestion in a new tab (no choose()): a click too (core/tiles.ts).
-    box.addEventListener('auxclick', (e) => {
-      if ((e as MouseEvent).button !== 1) return;
-      const a = (e.composedPath()[0] as Element | null)?.closest?.('a[href]') as HTMLAnchorElement | null;
-      const i = a ? items.findIndex((r) => r.type !== 'query' && !!r.c.url && new URL(r.c.url, location.href).href === a.href) : -1;
-      if (i >= 0) track(i);
-    });
+    // A middle click opens a suggestion in a new tab (no choose()): a click too
+    // (core/tiles.ts), announced for analytics only (core/features.ts ANALYTICS).
+    if (ANALYTICS)
+      box.addEventListener('auxclick', (e) => {
+        if ((e as MouseEvent).button !== 1) return;
+        const a = (e.composedPath()[0] as Element | null)?.closest?.('a[href]') as HTMLAnchorElement | null;
+        const i = a ? items.findIndex((r) => r.type !== 'query' && !!r.c.url && new URL(r.c.url, location.href).href === a.href) : -1;
+        if (i >= 0) track(i);
+      });
     // "Show all products" has focus (Tab from the input): Shift+Tab goes back
     // to the input, Escape closes and goes back, Tab moves on as from the
     // input (focus put back on it, the browser's own Tab then leaves it: the
@@ -359,8 +374,9 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
       if (!inOverlay(el) || e.ctrlKey || e.metaKey) return;
       if (sheet) {
         if (e.key === 'Escape') {
-          e.preventDefault();
-          e.stopPropagation();
+          // A whole gesture, as from the input: focus is on the sheet after a swipe (or on its buttons),
+          // and its keyup reached the host's handlers. Review (PR 26).
+          consume(e);
           leave('back');
         } else if ((e.key === 'ArrowLeft' || e.key === 'ArrowRight') && el.getAttribute?.('role') === 'tab') {
           e.preventDefault();
@@ -396,6 +412,61 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
         if (!(el instanceof Element)) return;
         if (el.scrollTop > 0) scrolled.add(el);
         else scrolled.delete(el);
+        if (swipe?.list === el && swipe.ours) swipe.ours = false;
+        else if (swipe?.list === el && (!swipe.cancelled || performance.now() - swipe.cancelled < SWIPE_SCROLL_MS)) putKeyboardAway();
+      },
+      { capture: true, passive: true },
+    );
+    // A swipe through the sheet's list (or its no-results column) puts the
+    // keyboard away, the sheet stays: it grows to the whole screen (position),
+    // and a tap on its input brings the keyboard back. Only a drag: a tap on a
+    // row, a tab or "Show all" keeps the keyboard and is not swallowed; the
+    // pill band's sideways drag is not the list. Focus goes to the sheet
+    // (tabindex -1), not <body>: Escape and Tab still work from a hardware
+    // keyboard. Bug (iOS 26 Safari): with the keyboard up, its bar and the
+    // address bar above it, the sheet kept half the screen.
+    const putKeyboardAway = () => {
+      swipe = null;
+      if (!mirror || focused() !== mirror) return;
+      const panel = mirror.closest<HTMLElement>('.sheet[tabindex]');
+      if (panel) panel.focus({ preventScroll: true });
+      else mirror.blur(); // an integration's own sheet template
+    };
+    const finger = (e: PointerEvent) => e.pointerType === 'touch' && e.isPrimary;
+    box.addEventListener(
+      'pointerdown',
+      (ev) => {
+        const e = ev as PointerEvent;
+        swipe = null;
+        if (!sheet || !finger(e)) return;
+        const list = e.composedPath().find((x) => x instanceof Element && x.matches('.sh-list, .sheet .empty')) as Element | undefined;
+        if (list) swipe = { list, x: e.clientX, y: e.clientY, moved: false };
+      },
+      { capture: true, passive: true },
+    );
+    box.addEventListener(
+      'pointermove',
+      (ev) => {
+        const e = ev as PointerEvent;
+        if (!swipe || !finger(e)) return;
+        const dy = Math.abs(e.clientY - swipe.y);
+        if (dy <= Math.abs(e.clientX - swipe.x)) return;
+        if (dy > SWIPE) putKeyboardAway();
+        else if (dy >= SWIPE_START) swipe.moved = true;
+      },
+      { capture: true, passive: true },
+    );
+    box.addEventListener('pointerup', (e) => finger(e as PointerEvent) && (swipe = null), { capture: true, passive: true });
+    // The browser took the gesture over to scroll: after a first move (iOS
+    // Safari: a pull at the list's top, 10 px, then pointercancel), a swipe;
+    // without one, a swipe if the list scrolls right after (a flick), not a
+    // long press (a link's preview: no scroll; a later scroll is ours, toTop).
+    box.addEventListener(
+      'pointercancel',
+      (e) => {
+        if (!swipe || !finger(e as PointerEvent)) return;
+        if (swipe.moved) putKeyboardAway();
+        else swipe.cancelled = performance.now();
       },
       { capture: true, passive: true },
     );
@@ -461,24 +532,44 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
    * before this task's writes (an opening: read after showing the popover,
    * it forced a layout).
    */
+  /** What Safari's bars and the keyboard cover of the sheet (px, --lbx-cover), -1 while it is not open. */
+  let cover = -1;
+  /** A clamp of the scrolled lists is queued (one for a keyboard going down, not one per frame of it). */
+  let clamping = false;
   const position = (frame = false, m?: ReturnType<typeof measure>) => {
     if (!open || !input) return;
     const s = host!.style;
     if (sheet) {
-      // Full screen: its content in what shows of the page (the visual
-      // viewport, above the on-screen keyboard), so the sticky "Show all"
-      // sits above the keys. The host reaches on down to the layout
-      // viewport's bottom, painted (openSheet): iOS 26 Safari ends the visual
-      // viewport above its floating address bar, and between the two the
-      // page showed through, see-through bars over it.
+      // Full screen from the top of what shows of the page (the visual
+      // viewport) down to the layout viewport's bottom: iOS 26 Safari ends
+      // the visual viewport above its floating bars (the address pill, with
+      // the keyboard up its form bar too), and the list runs on behind them,
+      // seen through their glass, as the legacy autocomplete's does. What
+      // they and the keyboard cover (--lbx-cover) ends the list as space, so
+      // its last row and "Show all" scroll clear of them. Bug (iOS 26/27):
+      // the list stopped above the bars, a blank strip down to the keys.
       const vv = window.visualViewport;
       const top = Math.round(vv?.offsetTop ?? 0);
       const h = Math.round(vv?.height ?? innerHeight);
+      const full = Math.max(h, innerHeight - top);
       s.top = `${top}px`;
       s.left = `${Math.round(vv?.offsetLeft ?? 0)}px`;
       s.width = `${Math.round(vv?.width ?? innerWidth)}px`;
-      s.height = `${Math.max(h, innerHeight - top)}px`;
-      s.setProperty('--lbx-vh', `${h}px`);
+      s.height = `${full}px`;
+      if (full - h !== cover) {
+        // Less covered (the keyboard going down): the end space shrinks, and iOS WebKit kept a list
+        // scrolled into it there, its rows stuck above a blank strip, not scrollable back (iOS 27
+        // Simulator). Its offset back within the list, read a frame later.
+        if (full - h < cover && !clamping) {
+          clamping = true;
+          afterFrame(() => {
+            clamping = false;
+            scrolled.forEach((el) => el.scrollTop > el.scrollHeight - el.clientHeight && (el.scrollTop = Math.max(0, el.scrollHeight - el.clientHeight)));
+          });
+        }
+        cover = full - h;
+        s.setProperty('--lbx-cover', `${cover}px`);
+      }
       host!.toggleAttribute('data-lbx-short', h < SHEET_SHORT);
       raf = requestAnimationFrame(() => position(true));
       return;
@@ -591,12 +682,12 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
       host!.showPopover();
       open = true;
       aria?.set('aria-expanded', 'true');
-      hook('onOpen', ac.onOpen);
+      if (AC_HOOKS) hook('onOpen', ac.onOpen);
       cancelAnimationFrame(raf);
       // A hook may move the field (a storefront's opens its search strip, the
       // input lower): placed from where it is now, not from `m`, read before
       // it (otherwise the dropdown opens at the old place, then jumps).
-      position(false, ac.onOpen ? undefined : m);
+      position(false, AC_HOOKS && ac.onOpen ? undefined : m);
     }
   };
 
@@ -605,11 +696,15 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
    * the focus's frame has rendered (layout clean then), ahead of the first
    * opening: read at the opening, after the page and our render had changed,
    * they forced a style and layout into the task that shows the results.
+   * Not once focus has left the input: putting the dropdown in the page
+   * borrows its ARIA, which focus leaving had put back (Shift+Tab back and
+   * Tab on within a frame left role=combobox on their input: WebKit on a slow
+   * machine, 2026-10-15).
    */
   let prepared: HTMLInputElement | null = null;
   const prepare = (i: HTMLInputElement) =>
     afterFrame(() => {
-      if (open || input !== i || !i.isConnected || sheet) return;
+      if (open || input !== i || !i.isConnected || sheet || focused() !== i) return;
       lineUp(i);
       if (!light) sampleTokens(i, field!);
       prepared = i;
@@ -741,7 +836,7 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
       host!.style.setProperty('display', 'block', 'important');
       host!.showPopover();
       open = true;
-      hook('onOpen', ac.onOpen);
+      if (AC_HOOKS) hook('onOpen', ac.onOpen);
       setCss('ac:sheet', ':root { overflow: hidden !important; }');
       try {
         history.pushState(null, '', location.href);
@@ -834,7 +929,8 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
       setCss('ac:sheet', null);
       host!.style.height = '';
       host!.style.background = 'transparent';
-      host!.style.removeProperty('--lbx-vh');
+      host!.style.removeProperty('--lbx-cover');
+      cover = -1;
       host!.removeAttribute('data-lbx-short');
       mirror?.blur();
       if (focused() === input) input?.blur();
@@ -847,7 +943,7 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
     aria?.set('aria-activedescendant', null);
     live.clear();
     said = '';
-    hook('onClose', ac.onClose, reason);
+    if (AC_HOOKS) hook('onClose', ac.onClose, reason);
   };
 
   /** The sheet input's value the last render drew (its clear button). */
@@ -956,16 +1052,37 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
    * target only: its click still hands the query to the host (submitViaHost).
    * `value`: the phrase instead of the input's (the phone sheet's own input).
    */
+  // Where the site's server redirects the form to the phrase's page (search.queryUrl): that page,
+  // same origin and http(s) as the form's (as every other use of the hook checks), else the form's.
+  // Decided outside searchHref's try (a flag in a try block is never folded: build/vite.mjs).
+  const pageOf = QUERY_URL
+    ? (q: string, u: URL) => {
+        if (!q || !ctx.queryUrl) return u.href;
+        try {
+          const to = ctx.queryUrl(q, new URL(u.href));
+          if (to === '') return u.href;
+          const r = new URL(to, location.href);
+          return (r.protocol === 'https:' || r.protocol === 'http:') && r.origin === location.origin ? r.href : u.href;
+        } catch (e) {
+          reportError('search queryUrl', e);
+          return u.href;
+        }
+      }
+    : null;
   const searchHref = (i: HTMLInputElement | null, value?: string) => {
     const f = i?.form;
     if (!f || (f.getAttribute('method') || 'get').trim().toLowerCase() !== 'get') return '';
     try {
       const u = new URL(f.getAttribute('action')?.trim() || location.href, document.baseURI);
       const p = new URLSearchParams();
-      for (const [k, v] of new FormData(f)) if (typeof v === 'string') p.append(k, v);
+      // With the form's default button, as Enter submits (its name=value, or an
+      // image button's x and y): the URL the result and the page were fetched
+      // ahead for (widgets/search/form-url.ts reads the same, core/default-button.ts).
+      for (const [k, v] of formDataOf(f, defaultSubmitter(f))) if (typeof v === 'string') p.append(k, v);
       if (value !== undefined && i!.name) p.set(i!.name, value);
       u.search = p.toString();
-      return u.protocol === 'https:' || u.protocol === 'http:' ? u.href : '';
+      if (u.protocol !== 'https:' && u.protocol !== 'http:') return '';
+      return pageOf ? pageOf((value ?? i!.value).trim(), u) : u.href;
     } catch {
       return '';
     }
@@ -1065,11 +1182,17 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
   };
   /** The "No results" layout's options: phrases to try, links to browse, fallback products. */
   const emptyOptions = (fallback: Result[]) => {
-    const tag = (r: Result, kind: string) => Object.assign(r, { __empty: kind });
+    // Luma's own options, not catalog hits: their text and link are the
+    // config's, whatever the integration computes for its catalog's.
+    const own = (hit: { '@id': string; '@type': string; '@title': string; url?: string }, kind: string) => {
+      const r = ctx.result(hit);
+      Object.defineProperties(r.c, { title: { value: hit['@title'] }, url: { value: safeUrl(hit.url) } });
+      return Object.assign(r, { __empty: kind });
+    };
     return [
-      ...(empty.tryQueries ?? []).filter((q) => typeof q === 'string' && q.trim()).map((q) => tag(ctx.result({ '@id': `try/${q}`, '@type': 'query', '@title': q }), 'try')),
-      ...(empty.browse ?? []).filter((b) => b && safeUrl(b.url)).map((b) => tag(ctx.result({ '@id': `browse/${b.url}`, '@type': 'browse', '@title': b.title, url: b.url }), 'browse')),
-      ...fallback.map((r) => tag({ ...r }, 'fallback')),
+      ...(empty.tryQueries ?? []).filter((q) => typeof q === 'string' && q.trim()).map((q) => own({ '@id': `try/${q}`, '@type': 'query', '@title': q }, 'try')),
+      ...(empty.browse ?? []).filter((b) => b && safeUrl(b.url)).map((b) => own({ '@id': `browse/${b.url}`, '@type': 'browse', '@title': b.title ?? '', url: b.url }, 'browse')),
+      ...fallback.map((r) => ({ ...r, __empty: 'fallback' })),
     ];
   };
 
@@ -1214,7 +1337,7 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
   /** Hand a query to the host so its own router/form performs navigation. */
   const submitViaHost = (q: string) => {
     const i = input!;
-    hook('onSelect', ac.onSelect, null);
+    if (AC_HOOKS) hook('onSelect', ac.onSelect, null);
     // Paint our close first; the host's router render then runs in its own task.
     if (sheet) return leave('select', () => handToHost(i, q));
     close('select');
@@ -1254,7 +1377,17 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
     const opts = { key: 'Enter', code: 'Enter', keyCode: 13, which: 13, bubbles: true, cancelable: true, composed: true } as KeyboardEventInit;
     const notCancelled = i.dispatchEvent(new KeyboardEvent('keydown', opts));
     i.dispatchEvent(new KeyboardEvent('keyup', opts));
-    if (notCancelled && i.form) i.form.requestSubmit();
+    // As Enter would: with the form's default button (its name=value, formaction), so
+    // the page loads at the URL the result and the document were fetched ahead for
+    // (instant-search.spec 'a search button with a name', on a phone: here, not an Enter).
+    if (notCancelled && i.form) {
+      const f = i.form;
+      try {
+        f.requestSubmit(defaultSubmitter(f) ?? undefined);
+      } catch {
+        f.requestSubmit(); // a button the engine refuses as a submitter (none of this form)
+      }
+    }
   };
 
   /**
@@ -1274,8 +1407,8 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
     if (r.type === 'query') submitViaHost(plain(r.c.title));
     else if (safeUrl(r.c.url)) {
       const url = safeUrl(r.c.url);
-      track(idx);
-      hook('onSelect', ac.onSelect, (r as any).__empty ? null : r);
+      if (ANALYTICS) track(idx);
+      if (AC_HOOKS) hook('onSelect', ac.onSelect, (r as any).__empty ? null : r);
       leave('select', () => location.assign(url));
     }
   }
@@ -1534,7 +1667,7 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
     close('navigate');
   });
 
-  hook('onReady', ac.onReady, { close: () => (sheet ? leave('api') : close('api')), reposition: () => (cancelAnimationFrame(raf), input && lineUp(input), position()) });
+  if (AC_HOOKS) hook('onReady', ac.onReady, { close: () => (sheet ? leave('api') : close('api')), reposition: () => (cancelAnimationFrame(raf), input && lineUp(input), position()) });
 
   // The interaction that loaded us has already happened: pick it up.
   const now = focused();

package/src/widgets/autocomplete/style-autocomplete.css

@@ -36,9 +36,9 @@
   --lbx-radius-row: calc(var(--lbx-radius) * .6);
   --lbx-radius-tile: calc(var(--lbx-radius) * .5);
 }
-/* The render root: the sheet is the visual viewport's height (--lbx-vh, index.ts; the host reaches on
-   below it, painted); the panel is as tall as it is. */
-.lbx-root { height: var(--lbx-vh, 100%); }
+/* The render root: the sheet is the host's height (from the visual viewport's top to the layout
+   viewport's bottom, index.ts); the panel is as tall as it is. */
+.lbx-root { height: 100%; }
 /* What the rules read: the tokens, or the high-contrast palette while it is on. */
 .box, .sheet {
   --c-fg: var(--lbx-c-fg, var(--lbx-fg));
@@ -155,12 +155,12 @@ button { font: inherit; color: inherit; background: none; border: 0; padding: 0;
 .e-opts { margin-top: 10px; display: flex; flex-direction: column; gap: 12px; }
 .grp.inline { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
 .grp.inline h3 { padding: 0; margin-right: 4px; font-size: 14px; }
-.tries, .browse { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
+.tries, .e-links { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
 .tries { gap: 8px; }
 .try { height: 34px; padding: 0 14px; gap: 6px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--c-line); font-size: 14px; font-weight: 700; }
 .try .glass { color: var(--c-accent); }
 .try[aria-selected="true"] { background: var(--lbx-c-sel-bg, var(--c-tint)); color: var(--lbx-c-sel-fg, inherit); box-shadow: inset 0 0 0 1.5px var(--c-fill); }
-.browse .chev { display: none; }
+.opt.browse .chev { display: none; }
 .opt.browse { padding: 2px 6px; margin: 0 -6px; border-radius: var(--lbx-radius-row); color: var(--c-accent); font-weight: 700; font-size: 14px; }
 .opt.browse[aria-selected="true"] { background: var(--lbx-c-sel-bg, var(--c-tint)); text-decoration: underline; text-underline-offset: 3px; }
 .help { width: 300px; flex: none; padding: 18px 20px; border-radius: var(--lbx-radius-row); border: 1.5px dashed var(--lbx-tint-strong); display: flex; gap: 14px; align-items: center; }
@@ -188,6 +188,8 @@ button { font: inherit; color: inherit; background: none; border: 0; padding: 0;
 /* @lbx-part autocomplete-sheet: left out of a build whose integration replaces this template and uses none of its classes (build/vite.mjs) */
 /* ---- the phone sheet --------------------------------------------------- */
 .sheet { height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--c-bg); border-top: 3px solid var(--c-fill); }
+/* Focused from code only (tabindex -1: a swipe puts the keyboard away, index.ts): the whole screen, no ring. */
+.sheet:focus { outline: none; }
 .sh-head { height: 60px; flex: none; padding: 0 8px 0 4px; display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--c-line); touch-action: none; }
 .icon { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--lbx-radius-row); }
 .x { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--lbx-soft); }
@@ -199,6 +201,12 @@ button { font: inherit; color: inherit; background: none; border: 0; padding: 0;
 .tab { flex: none; padding: 0 14px; font-size: 15px; color: var(--c-muted); white-space: nowrap; }
 .tab[aria-selected="true"] { color: var(--c-fg); font-weight: 700; box-shadow: inset 0 -3px 0 var(--c-fill); }
 .sh-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; touch-action: pan-y; }
+/* What Safari's floating bars and the keyboard cover (--lbx-cover, index.ts): the list (and the
+   no-results column) runs on behind them, its end scrolls clear of them (as space; a row brought into
+   view by the keys or by focus too). A tap on what shows through the bars is Safari's, as on the
+   legacy autocomplete. */
+.sh-list, .sheet .empty { scroll-padding-bottom: var(--lbx-cover, 0px); }
+.sh-list::after, .sheet .empty::after { content: ""; flex: none; height: var(--lbx-cover, 0px); }
 .sh-list .pby { margin: 0; padding: 20px 16px 24px; justify-content: center; font-size: 13px; }
 .m-hero { padding: 16px; gap: 12px; border-bottom: 1px solid var(--c-line); }
 .m-hero h3 { padding: 0; font-size: 13px; color: var(--c-muted); }
@@ -222,7 +230,7 @@ button { font: inherit; color: inherit; background: none; border: 0; padding: 0;
 .mrow .t { flex: 1; min-width: 0; }
 .mrow .chev, .opt.browse .chev { flex: none; color: var(--c-muted); }
 .mrow[aria-selected="true"] { background: var(--lbx-c-sel-bg, var(--c-tint)); color: var(--lbx-c-sel-fg, inherit); box-shadow: inset 3px 0 0 var(--c-fill); }
-.sh-foot { flex: none; padding: 10px 16px 14px; border-top: 1px solid var(--c-line); background: var(--c-bg); touch-action: none; }
+.sh-foot { flex: none; padding: 16px 16px 0; }
 .sheet .all { height: 48px; font-size: 16px; background: var(--c-fill); color: var(--c-on-fill); box-shadow: none; }
 /* No results on the phone: one column, its own scroll. */
 .sheet .empty { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; touch-action: pan-y; }
@@ -232,9 +240,9 @@ button { font: inherit; color: inherit; background: none; border: 0; padding: 0;
 .sheet .e-title { font-size: 21px; }
 .sheet .grp.inline { flex-direction: column; align-items: stretch; }
 .sheet .try { height: 40px; font-size: 15px; }
-.sheet .browse { flex-direction: column; align-items: stretch; gap: 0; }
+.sheet .e-links { flex-direction: column; align-items: stretch; gap: 0; }
 .sheet .opt.browse { min-height: 48px; margin: 0 -6px; padding: 0 6px; justify-content: space-between; font-size: 16px; }
-.sheet .browse .chev { display: block; }
+.sheet .opt.browse .chev { display: block; }
 .sheet .help { width: auto; padding: 16px; }
 .sheet .help-text { flex: 1; }
 .sheet .help-title { font-size: 15px; }

package/src/widgets/autocomplete/template-autocomplete-empty.ts

@@ -34,7 +34,7 @@ export default (s: AutocompleteScope) => {
             ${tries.length || browse.length
               ? html`<div class="e-opts" role="listbox" id="lbx-ac-listbox" aria-label=${s.t('label')}>
                   ${tries.length ? group('try', s.t('tryLabel'), html`<div class="tries">${tries.map((x) => opt(x, 'try'))}</div>`, 'inline') : nothing}
-                  ${browse.length ? group('browse', s.t('browseLabel'), html`<div class="browse">${browse.map((x) => opt(x, 'browse'))}</div>`, 'inline') : nothing}
+                  ${browse.length ? group('browse', s.t('browseLabel'), html`<div class="e-links">${browse.map((x) => opt(x, 'browse'))}</div>`, 'inline') : nothing}
                 </div>`
               : nothing}
           </div>

package/src/widgets/autocomplete/template-autocomplete-sheet.ts

@@ -4,9 +4,11 @@ import { POWERED, group, showAll } from './template-autocomplete-box';
 
 // The house design on a phone: a full-screen sheet. Its header
 // (back, its own input, clear), the query pills on one sideways-scrolling
-// band, a tab per type with results (products first; no counts), the open
-// tab's options (the top product, then product rows; or 56 px rows), and
-// "Show all products" in a bar that stays above the on-screen keyboard.
+// band, a tab per type with results (products first; no counts; no tab bar
+// for a lone type: 48 px of a short sheet, and the options say what they
+// are), the open tab's options (the top product, then product rows; or 56 px rows), and
+// "Show all products" at the end of the list (below the fold with the keyboard
+// up: the list gets the room; a swipe puts the keyboard away, index.ts).
 // Its input is the combobox (index.ts): it controls both listboxes and
 // points at the selected option (aria-activedescendant, set by index.ts).
 
@@ -16,6 +18,8 @@ export default (s: AutocompleteScope) => {
   const results = s.state === 'results';
   const onProducts = !!s.hero && s.tabs.find((x) => x.selected)?.kind === s.hero.r.type;
   const open = s.tabs.find((x) => x.selected);
+  // A lone type: no tab bar, no tabpanel; its listbox is named by the type ("Products").
+  const tabbed = s.tabs.length > 1;
   const rows = open && !onProducts ? (s.lists.find((g) => g.kind === open.kind)?.rows ?? []) : [];
   // What the input controls: the listboxes on screen.
   const e = s.empty;
@@ -29,7 +33,7 @@ export default (s: AutocompleteScope) => {
     .filter(Boolean)
     .join(' ');
   return html`
-    <div class="sheet" data-lbx-part="ac-panel">
+    <div class="sheet" data-lbx-part="ac-panel" role="group" aria-label=${s.inputLabel} tabindex="-1">
       <div class="sh-head">
         <button type="button" class="icon back" aria-label=${s.t('closeSearch')} @click=${() => s.back()}>
           <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5M11 6l-6 6 6 6"></path></svg>
@@ -48,7 +52,7 @@ export default (s: AutocompleteScope) => {
               ${s.phrases.length
                 ? html`<div class="sh-phrases" role="listbox" id="lbx-ac-phrases" aria-label=${s.t('phrases')}>${repeat(s.phrases, key, (p) => opt(p, 'pill'))}</div>`
                 : nothing}
-              ${s.tabs.length
+              ${tabbed
                 ? html`<div class="tabs" role="tablist" aria-label=${s.t('tabs')}>
                     ${s.tabs.map(
                       (x) =>
@@ -56,18 +60,18 @@ export default (s: AutocompleteScope) => {
                     )}
                   </div>`
                 : nothing}
-              <div class="sh-list" role="tabpanel" id="lbx-ac-panel" aria-labelledby=${open ? `lbx-ac-tab-${open.kind}` : nothing}>
+              <div class="sh-list" role=${tabbed ? 'tabpanel' : nothing} id="lbx-ac-panel" aria-labelledby=${tabbed ? `lbx-ac-tab-${open!.kind}` : nothing}>
                 ${s.tabs.length
-                  ? html`<div role="listbox" id="lbx-ac-listbox" aria-label=${s.t('label')}>
+                  ? html`<div role="listbox" id="lbx-ac-listbox" aria-label=${tabbed ? s.t('label') : open!.label}>
                       ${onProducts
                         ? html`${group('hero', s.t('topProduct'), opt(s.hero!, 'mhero'), 'm-hero')}
                             ${s.products.length ? group('products', s.t('products'), repeat(s.products, key, (p) => opt(p, 'mproduct')), 'm-products') : nothing}`
                         : repeat(rows, key, (row) => opt(row, 'mrow'))}
                     </div>`
                   : nothing}
+                ${s.hero ? html`<div class="sh-foot">${showAll(s)}</div>` : nothing}
                 ${POWERED(s.t)}
-              </div>
-              ${s.hero ? html`<div class="sh-foot">${showAll(s)}</div>` : nothing}`
+              </div>`
           : nothing}
     </div>
   `;

package/src/widgets/listing/applied.ts

@@ -0,0 +1,87 @@
+// Apply in a staged drawer, marked (element.ts swapIn): a change the shopper
+// confirmed with the drawer closing over the list must read as one. On an
+// iPhone the quiet fade of a prefetched result read as a flicker: had the
+// filters been taken? (2026-10-19) The list it replaces dims at the tap
+// (`data-lbx-swap`, as busy's dim: `--lbx-c-dim` holds it in the contrast
+// mode), the new tiles come in, and a status at the listing's top says what
+// was applied. Its own chunk (lbx-applied), asked for when a drawer opens
+// where it stages: a listing page that never applies one does not load it.
+import { cspNonce, layered, setCss } from '../../core/styles';
+
+const SWAP_MS = 300;
+export const CSS =
+  ':is(lbx-search,lbx-plp)[data-lbx-swap] [data-lbx-list]{opacity:var(--lbx-c-dim,.15)}' +
+  '@media (forced-colors:active){:is(lbx-search,lbx-plp)[data-lbx-swap] [data-lbx-list]{opacity:.6}}' +
+  // The contrast mode (core/a11y.ts): the pill opaque, nothing of the page through it.
+  ':root[data-lbx-contrast="more"] [data-lbx-applied-cue]{--lbx-applied-opaque:1}' +
+  '@media (prefers-contrast:more){:root:not([data-lbx-contrast="off"]) [data-lbx-applied-cue]{--lbx-applied-opaque:1}}';
+// The pill is the one element with Luma's own look in the site's light
+// DOM: a site's reset (`div,span{margin:0;padding:0}`, unlayered, so
+// above Luma's layered CSS) took its padding and centring (a production storefront,
+// 2026-10-19). Its wrapper's layout is its inline style (`!important`, as the
+// status region's); the pill is in the wrapper's shadow root, with its own
+// sheet. A site restyles it through `::part(pill)` or the `--lbx-applied-*`
+// properties, which inherit into it.
+// Sticky, 0 px high, the pill out of flow: margins collapse through it, nothing moves (a flex wrapper moved the list 16 px).
+// What else a site's rule on `div` could set and break: clipped (overflow), given height (min-height: the list moves), narrowed (float, width).
+export const WRAP =
+  'display:block!important;position:sticky!important;top:var(--lbx-applied-top,8px)!important;z-index:3!important;height:0!important;min-height:0!important;max-height:none!important;' +
+  'width:auto!important;max-width:none!important;float:none!important;margin:0!important;padding:0!important;border:0!important;overflow:visible!important;transform:none!important;filter:none!important;' +
+  'opacity:1!important;visibility:visible!important;contain:none!important;pointer-events:none!important';
+export const PILL =
+  // Wraps (a long query, a long language) rather than cut: its words are shown nowhere else. A tap goes through it
+  // (all:initial put pointer-events back: it took taps on what it overlaps). Its font the site's; its size at least the reader's default's 15/16.
+  // `--lbx-applied-offset`: below the listing's top by this much (a template whose heading sits there).
+  '.p{all:initial;display:block;position:absolute;top:var(--lbx-applied-offset,0px);left:0;right:0;box-sizing:border-box;width:fit-content;max-width:calc(100% - 16px);margin:0 auto;padding:8px 16px;border-radius:18px;pointer-events:none;' +
+  'background:var(--lbx-applied-bg,#1d2433);color:var(--lbx-applied-fg,#fff);font-family:inherit;font-size:max(15px,.9375rem);font-weight:500;line-height:1.3;text-align:center;overflow-wrap:anywhere;box-shadow:0 2px 12px rgb(0 0 0/.25)}' +
+  // A little of the page through it, blurred (white text at least 10:1 over any page behind); opaque in the contrast mode (--lbx-applied-opaque).
+  '@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){.p{background:var(--lbx-applied-bg,rgb(29 36 51/calc(.88 + .12 * var(--lbx-applied-opaque,0))));' +
+  '-webkit-backdrop-filter:blur(calc(8px - 8px * var(--lbx-applied-opaque,0)));backdrop-filter:blur(calc(8px - 8px * var(--lbx-applied-opaque,0)))}}' +
+  '@media (forced-colors:active){.p{border:1px solid CanvasText;background:Canvas;color:CanvasText}}';
+let sheet: CSSStyleSheet | null = null;
+
+/** Its styles, before the first Apply (the drawer's opening restyles the page anyway). */
+export const prepare = () => setCss('listing-applied', layered(CSS));
+
+/**
+ * The applied state's first tiles come in (rising row after row, only fading
+ * under reduced motion), and the status's pill goes after `after` (Luma's
+ * status region, which says the same words: the pill is hidden from
+ * assistive technology). Returns what takes the pill away (faded, or at once).
+ */
+export const swapIn = (host: HTMLElement, tiles: Element[], say: string, after: Element | null, reduce: boolean) => {
+  tiles.forEach((el, i) =>
+    el.animate(reduce ? [{ opacity: 0 }, { opacity: 1 }] : [{ opacity: 0, transform: 'translateY(12px)' }, { opacity: 1, transform: 'none' }], {
+      duration: SWAP_MS,
+      delay: reduce ? 0 : Math.min(i, 7) * 35,
+      easing: 'cubic-bezier(.2,0,0,1)',
+      fill: 'backwards',
+    }),
+  );
+  const el = document.createElement('div');
+  el.setAttribute('data-lbx-applied-cue', '');
+  el.setAttribute('aria-hidden', 'true');
+  el.style.cssText = WRAP;
+  const root = el.attachShadow({ mode: 'open' });
+  // Safari before 16.4 has no constructed sheets (its constructor throws): a <style>, with the page's nonce.
+  if ('adoptedStyleSheets' in ShadowRoot.prototype) {
+    if (!sheet) (sheet = new CSSStyleSheet()), sheet.replaceSync(PILL);
+    root.adoptedStyleSheets = [sheet];
+  } else {
+    const st = root.appendChild(document.createElement('style'));
+    st.nonce = cspNonce();
+    st.textContent = PILL;
+  }
+  const pill = root.appendChild(document.createElement('span'));
+  pill.className = 'p';
+  pill.setAttribute('part', 'pill');
+  pill.textContent = `✓ ${say}`;
+  if (after) after.after(el);
+  else host.prepend(el);
+  pill.animate([{ opacity: 0 }, { opacity: 1 }], 200);
+  return (fade: boolean) => {
+    if (!fade) return el.remove();
+    // A cancelled animation rejects `finished`: removed either way.
+    pill.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 300, fill: 'forwards' }).finished.then(() => el.remove(), () => el.remove());
+  };
+};