@luigisbox/luma 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -5,6 +5,40 @@ before 1.0, a minor version may break the integration API.
 
 ## Unreleased
 
+## 0.6.0 — 2026-10-20
+
+### Changed
+
+- Phone sheet: a swipe through the results puts the keyboard away. The sheet
+  stays open and grows to the full screen. A tap on its input brings the
+  keyboard back.
+- Phone sheet: no tab bar when only one type has results.
+- Phone sheet: "Show all products" is at the end of the list, no longer a bar
+  pinned above the keyboard.
+- Phone sheet: the list (and the no-results column) runs on behind Safari's
+  floating bars and the keyboard, down to the bottom of the screen. Its end
+  scrolls clear of them.
+- Staged filter drawer (`facetsApply: 'staged'`): the held selection is
+  fetched in the background once the changes pause, so the apply button
+  shows the results without waiting. The results still change only on
+  apply. Off with `_global.prefetchFilters: false`, Save-Data or 2G.
+- Staged filter drawer: apply marks the swap. The old list fades out, the
+  new products fade in, and a status at the top of the listing says
+  "Filters applied · 9 products" for 2.5 s. Translation key
+  `search.applied`; CSS variables `--lbx-applied-bg`, `--lbx-applied-fg`,
+  `--lbx-applied-top`, `--lbx-applied-offset`, or
+  `[data-lbx-applied-cue]::part(pill)`;
+  `data-lbx-applied` on the listing meanwhile.
+
+### Fixed
+
+- Autocomplete "No results": `emptyState` phrases and browse links keep their
+  config text and URL when `computedAttributes` override `title` or `url`.
+  Before, a browse link could have no URL, and a tap on it did nothing.
+- Autocomplete, phone sheet, no results: each "browse" link is one row again,
+  its chevron at the right, not on a line under the title. The links' wrapper
+  is now `.e-links` (was `.browse`, the class each link also has).
+
 ## 0.5.0 — 2026-10-19
 
 Upgrading from 0.4.0: read **Changed** first.

package/README.md

@@ -10,9 +10,9 @@ This package is what an integration is built with. Each integration lives in
 its own repository and depends on `@luigisbox/luma`
 ([Integration repository](#integration-repository)).
 
-> **Pre-release.** Until 1.0, a minor version (0.6.0) may change the
+> **Pre-release.** Until 1.0, a minor version (0.7.0) may change the
 > integration API (config keys, template scope, the build); a patch version
-> (0.5.1) only fixes. Depend on `^0.5.0` to take fixes without breaking
+> (0.6.1) only fixes. Depend on `^0.6.0` to take fixes without breaking
 > changes. [`CHANGELOG.md`](CHANGELOG.md) says what each version changed.
 
 ## Core principles
@@ -422,7 +422,7 @@ it sets them; a switch on by default that no file names is built as on.
 | `restoreOnBack` | Back from a product restores the listing (every page shown) and the followed tile's position, as does the page loaded again within a minute of following a link (a reload, a link whose server redirects back to it); Luma turns the browser's own scroll restoration (`history.scrollRestoration`) off for the listing's history entry until it has placed the page, unless the site set it | |
 | `prefetchNextPage` | "show more" is fetched as the shopper nears the end | |
 | `contentVisibility` (opt-in) | tiles out of view skip style, layout and paint, each at its own measured size: a long list's re-render about halves | keep it off where a tile draws outside its box (a hover panel, a badge hanging out) or holds a `position: fixed` element |
-| `_global.prefetchFilters` | a filter, sort or chip is fetched on hover, touch or focus | |
+| `_global.prefetchFilters` | a filter, sort or chip is fetched on hover, touch or focus; in a drawer with `facetsApply: 'staged'`, the selection it holds is fetched once the changes pause, so its apply button shows the results without waiting | |
 | `_global.speculation` | product pages are prerendered on hover (`'prerender'`, `'prefetch'`, `false`) | the site's server or its product-page scripts can't take a render per unfollowed hover |
 
 ### Analytics

package/build/vite.mjs

@@ -91,6 +91,8 @@ export const chunkOf = (id) => {
   if (/\/src\/core\/(reconciler|recommenders)\.ts$/.test(id)) return 'lbx-place';
   // The listing's high-contrast toggle: only a site that turns it on loads it (widgets/listing/element.ts).
   if (/\/src\/core\/contrast-toggle\.ts$/.test(id)) return 'lbx-contrast';
+  // An Apply's cue in a staged drawer: asked for when such a drawer opens (widgets/listing/element.ts).
+  if (/\/src\/widgets\/listing\/applied\.ts$/.test(id)) return 'lbx-applied';
   // The search page's own: not in lbx-listing, which a category page loads too
   // (2.1 kB gzip it never ran).
   if (/\/src\/widgets\/search\/index\.ts$/.test(id)) return 'lbx-search';

package/docs/ACCESSIBILITY.md

@@ -134,7 +134,11 @@ guessed alt text, and forced colours and the OS setting are honoured.
   `aria-activedescendant` the selected option: the same shadow root); the
   site's input is left as it was. The back button is named "Close search",
   the clear button "Clear"; the type tabs are a `tablist` (arrow keys move
-  between them); Tab is the browser's; targets are 44 px; Escape and the
+  between them), shown for two types or more (one type: no tabs, its
+  listbox named by the type, "Products"); a finger's vertical swipe
+  through the list puts the on-screen keyboard away: focus moves from the
+  input to the sheet (`tabindex="-1"`), Escape still closes it, a tap on the
+  input brings the keyboard back; Tab is the browser's; targets are 44 px; Escape and the
   browser's Back close it.
 - **Forced colours**: the selection in `Highlight`/`HighlightText` with an
   outline, the panel (and the sheet) keep a `CanvasText` border, pills,
@@ -180,6 +184,18 @@ guessed alt text, and forced colours and the OS setting are honoured.
   focus staying on the control. With `facetsApply: 'staged'` its
   changes wait for `[data-lbx-drawer="apply"]`; closing it otherwise discards
   them (the scope's `pending` says whether there is anything to apply).
+  Apply's result is said in Luma's status region as "Filters applied" and
+  the count (translation `search.applied`, WCAG 4.1.3), and shown for 2.5 s
+  in a pill at the listing's top with the same words (hidden from assistive
+  technology: it repeats the status region; white on dark, at least 10:1
+  over any page behind it; opaque in the high-contrast mode and in forced
+  colours, with a border there; taps go through it; it wraps rather than
+  cuts its words at 320 px or 200% text, and follows a larger default font
+  size; it moves no content). While the applied results load, the
+  old list is dimmed as a busy one is: not at all in the high-contrast
+  mode, to 60% in forced colours. The new tiles fade in; they also rise
+  unless reduced motion is asked for. The pill may overlap the top of the
+  drawer's opener, where focus returns, for its 2.5 s; it never hides it.
   The build includes the drawer only where a file of the integration's
   repository (a script or `.html` file, not in `node_modules`, `dist` or a hidden folder) has `data-lbx-drawer` (written
   literally, as in a template).
@@ -213,7 +229,8 @@ guessed alt text, and forced colours and the OS setting are honoured.
 - Built-in templates: the pager is a native "Show more" button with a
   "Showing N of M" line (no numbered pages); tile pictures are decorative
   (`alt=""`: the link reads as its title and price once); targets of at least
-  24 px; no fade under reduced motion; tiles reflow to one column at 320 px.
+  24 px; no fade under reduced motion (except a staged drawer's Apply: its
+  new tiles fade in, without rising); tiles reflow to one column at 320 px.
 
 ### Recommenders (`widgets/recommender/`)
 
@@ -232,7 +249,9 @@ guessed alt text, and forced colours and the OS setting are honoured.
   reset cannot remove it there).
 - **Reduced motion**: the hold's loading bar stands still, the listing's
   dim while a re-render loads comes without its fade and the new results
-  without their fade-in, no smooth scrolling of ours.
+  without their fade-in, no smooth scrolling of ours. One exception: after
+  a staged drawer's Apply the new tiles still fade in (opacity only, nothing
+  moves), so the swap the shopper confirmed is seen.
 - `.lbx-sr-only`: a class for text that only screen readers read (e.g. "Was"
   before an old price), defined for every widget and in server-rendered CSS.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luigisbox/luma",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "type": "module",
   "description": "Luma: Luigi's Box frontend integrations (autocomplete, search, category listings, recommenders) on the Luigi's Box AI API. Pre-release.",
   "license": "SEE LICENSE IN LICENSE.md",

package/src/locales/cs.json

@@ -53,6 +53,7 @@
     "label": "Výsledky vyhledávání",
     "shown": "Zobrazeno {shown} z {total}",
     "drawer": "Filtry",
+    "applied": "Filtry použity · {results}",
     "removeFilter": "Odebrat filtr: {label}",
     "chosen": "Vybrané filtry",
     "clearAll": "Zrušit vše",

package/src/locales/de.json

@@ -51,6 +51,7 @@
     "label": "Suchergebnisse",
     "shown": "{shown} von {total} angezeigt",
     "drawer": "Filter",
+    "applied": "Filter angewendet · {results}",
     "removeFilter": "Filter entfernen: {label}",
     "chosen": "Ausgewählte Filter",
     "clearAll": "Alle entfernen",

package/src/locales/en.json

@@ -51,6 +51,7 @@
     "label": "Search results",
     "shown": "Showing {shown} of {total}",
     "drawer": "Filters",
+    "applied": "Filters applied · {results}",
     "removeFilter": "Remove filter: {label}",
     "chosen": "Selected filters",
     "clearAll": "Clear all",

package/src/types.ts

@@ -80,7 +80,9 @@ export interface GlobalConfigType {
    * Two in flight, the latest intent wins; 20 per category or query; none
    * offline, with Save-Data or on 2G; range sliders never. A hover that is
    * not followed costs one search request (no render, no hook, no analytics
-   * event). Default true.
+   * event). In a drawer that stages (`facetsApply`), the selection it holds
+   * is fetched the same way once the changes pause, for its apply button.
+   * Default true.
    */
   prefetchFilters?: boolean;
   /**
@@ -333,10 +335,22 @@ export interface ListingConfigType {
    * How a change inside the open filter drawer (`[data-lbx-drawer-panel]`,
    * opened by `[data-lbx-drawer="open"]`) applies. 'instant' (default): at
    * once, as in a sidebar. 'staged': held in the drawer (it shows the pending
-   * selection, the scope's `pending` is true, nothing is fetched) until its
-   * apply button (`[data-lbx-drawer="apply"]`) commits them in one request
-   * and one history entry; closing it otherwise (`[data-lbx-drawer="close"]`,
-   * Escape) discards them. Per viewport min-width, e.g. `{ "0": "staged",
+   * selection, the scope's `pending` is true, the results behind it do not
+   * change) until its apply button (`[data-lbx-drawer="apply"]`) commits them
+   * in one request and one history entry; closing it otherwise
+   * (`[data-lbx-drawer="close"]`, Escape) discards them. Once the changes
+   * pause, the held selection's results are fetched in the background
+   * (unless `_global.prefetchFilters` is false, with Save-Data or on 2G),
+   * so Apply shows them without waiting; nothing is shown and `onRender`
+   * does not run before Apply. Apply's swap is marked: the old list fades
+   * out, the new tiles come in, and a status at the listing's top says what
+   * was applied ("Filters applied · 9 products", translation
+   * `search.applied`) for 2.5 s, in `[data-lbx-applied-cue]`'s shadow root
+   * (out of reach of the site's resets; themed with `--lbx-applied-bg`,
+   * `--lbx-applied-fg`, `--lbx-applied-top` for a sticky header's height,
+   * `--lbx-applied-offset` to sit below a heading at the listing's top, or
+   * restyled with `[data-lbx-applied-cue]::part(pill)`), with
+   * `data-lbx-applied` on the listing meanwhile for the site's own CSS. Per viewport min-width, e.g. `{ "0": "staged",
    * "768": "instant" }` (staged on phones). Outside an open drawer every
    * change is instant.
    */

package/src/widgets/autocomplete/index.ts

@@ -66,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);
@@ -257,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();
   };
@@ -363,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();
@@ -400,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 },
     );
@@ -465,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;
@@ -842,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();
@@ -1094,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' })),
     ];
   };
 

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());
+  };
+};

package/src/widgets/listing/element.ts

@@ -37,7 +37,7 @@ import { facetFields, handsBack, nextState, queryKey, stateOf, type Query, type
 import { specKey } from '../../core/stash';
 import { firstRequest, hasMore, listingMore, listingQuery, type ListingConfig, type ListingResult } from './query';
 import { flowKey, notAbove, onQuickLanded, quickChannel } from './flow';
-import { firstPages, targetOf, thrifty, watchIntent } from './intent';
+import { firstPages, SETTLE_MS, targetOf, thrifty, watchIntent } from './intent';
 import type { Page } from '../../api';
 import { atWidth, CV_CSS, DIM_MS, LOADING_CSS, listingData, ssrStateId, viewport, type ListingView, type SsrState } from './view';
 import { dropStash, peekStash, readStash, removeStash, writeStash, type Stash } from './stash';
@@ -47,6 +47,11 @@ import { watch } from '../../core/tiles';
 /** A re-render answered within DIM_MS (no dim shown) fades its list in from this opacity, over FADE_MS. */
 const FADE_FROM = 0.6;
 const FADE_MS = 150;
+/** An Apply's status (./applied.ts) shows this long; its new tiles come in up to SWAP_TILES (those in view). */
+const APPLIED_MS = 2500;
+const SWAP_TILES = 16;
+/** Reduced motion asked for (read when needed: the setting may change). */
+const reduced = () => typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
 /** A hidden first render in frames: the first STEP tiles, then about BUDGET ms of rendering per frame. */
 const STEP = 4;
 /** Tiles drawn (with the facets) before ours shows, per 900 px of viewport height: two rows of four on a wide screen, four of two on a phone. */
@@ -167,6 +172,17 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
   // it does not download it with every listing.
   const toggle = ctx.global.contrastToggle ? import('../../core/contrast-toggle') : null;
   const visitOf = (q: Query) => JSON.stringify([q.q, q.scope]);
+  const prefetchFailed = (e: unknown) => reportError(`${route.id} filter prefetch`, e);
+  /** What a render says it shows: the count found, or nothing found. */
+  const found = (q: Query, res: ListingResult) => (res.total ? t('results', { count: res.total, query: q.title }) : t('empty', { query: q.title }));
+  // An Apply's cue (./applied.ts, its own chunk): asked for when a drawer opens where it stages.
+  let applied: typeof import('./applied') | null = null;
+  let appliedAsked = false;
+  const askApplied = () => {
+    if (appliedAsked) return;
+    appliedAsked = true;
+    import('./applied').then((m) => (m.prepare(), (applied = m)), (e) => reportError(`${route.id} applied cue`, e));
+  };
   const earlyKey = (q: Query) => {
     const r = firstRequest(ctx.global, cfg, route, q);
     return r && JSON.stringify(r);
@@ -334,6 +350,14 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
      */
     private staged: UiState | null = null;
     private stagedMode = false;
+    /**
+     * The held state fetched in the background (prefetchHeld()): the timer
+     * waiting for the changes to pause, the held state's URL (a query
+     * resolved late is for it only), and the request it started (its key in
+     * `early`), aborted by a newer held state while it is out.
+     */
+    private heldTimer = 0;
+    private heldKey: string | null = null;
     /** Stops watching the `facetsApply` breakpoints of the open drawer (watchApply()). */
     private unwatchApply: (() => void) | null = null;
     /** Renders started: a render in chunks stops when a newer one has started. */
@@ -490,6 +514,10 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       this.ahead?.();
       this.intent?.stop();
       this.intent = null;
+      clearTimeout(this.heldTimer);
+      this.heldTimer = 0;
+      this.endCue();
+      this.removeAttribute('data-lbx-swap');
       this.sized?.ro.disconnect();
       this.sized = null;
       this.unwatchApply?.();
@@ -581,7 +609,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
      * Where the shopper was in each state of the visit left by a change of
      * ours or a traversal (canonical href → scrollY), and the one a traversal
      * goes back to: drawn whole (not in steps) and placed there. Bug (a
-     * bicycle shop's QA round 4, 2026-10-15): Back after a drawer filter
+     * production storefront, 2026-10-15): Back after a drawer filter
      * drew the list in steps, the browser's restored scroll was clamped to
      * the first step's short page, and Chromium's scroll anchoring kept the
      * footer in view as the tiles went in above it.
@@ -607,22 +635,49 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       if (!DRAWER) return;
       const next = this.staged;
       this.staged = null;
-      this.setDrawer(false, from, next ? () => (this.navigate(next), (this.topFor = this.wantedHref), this.toListTop()) : undefined);
+      // Changes not fetched yet (Apply within SETTLE_MS of the last): their
+      // request starts in the next task (the drawer closes first), while the
+      // drawer's entry is taken back, and the navigation joins it.
+      if (next && this.heldTimer) setTimeout(() => this.prefetchHeld(next), 0);
+      // Another state to show: the list it replaces dims now, as the drawer closes (./applied.ts).
+      const cue = (this.applyCue = next && canon(route.write(new URL(location.href), next).href) !== this.href ? { href: '' } : null);
+      this.toggleAttribute('data-lbx-swap', !!cue);
+      this.setDrawer(false, from, next ? () => {
+        this.navigate(next);
+        this.topFor = this.wantedHref;
+        if (cue) cue.href = this.wantedHref ?? '';
+        if (cue && !cue.href) this.removeAttribute('data-lbx-swap'), (this.applyCue = null); // nothing to fetch after all
+        this.toListTop();
+      } : undefined);
     }
 
     /** The state an Apply asked for: its render brings the listing's top into view again (late layout, a smooth scroll cut short). */
     private topFor: string | null = null;
+    /**
+     * An Apply's swap (./applied.ts): the state it asked for ('' until its
+     * navigation; the old list dimmed meanwhile, `data-lbx-swap`); its words
+     * and state while its render puts the new tiles in (swapIn(), from the
+     * step that draws them); then the status shown for the state applied,
+     * what takes it away, and when.
+     */
+    private applyCue: { href: string } | null = null;
+    private swapping: { say: string; href: string } | null = null;
+    private cue: { end: (fade: boolean) => void; href: string; timer: number } | null = null;
+    /** What the applied state's render announces (the status's words). */
+    private appliedSay: string | null = null;
     /** The top of the listing in view when it is above the viewport (smooth, unless reduced motion is asked for). */
     private toListTop() {
       if (!this.isConnected || this.getBoundingClientRect().top >= 0) return;
-      const reduce = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
-      this.scrollIntoView({ block: 'start', behavior: (reduce ? 'instant' : 'smooth') as ScrollBehavior });
+      this.scrollIntoView({ block: 'start', behavior: (reduced() ? 'instant' : 'smooth') as ScrollBehavior });
     }
 
     /** The drawer's held changes dropped: it shows the applied state again. */
     private discardStaged() {
       if (!this.staged) return;
       this.staged = null;
+      // A fetch of what it held, started already, is left to expire (./intent.ts); one not started yet is not.
+      clearTimeout(this.heldTimer);
+      this.heldTimer = 0;
       this.redraw();
     }
 
@@ -647,6 +702,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       if (!open) this.discardStaged();
       if (open && !was) {
         this.stagedMode = atWidth(cfg.facetsApply, 'instant', viewport) === 'staged';
+        if (this.stagedMode) askApplied();
         if (this.stagedMode && !this.drawerEntry)
           try {
             history.pushState(null, '', location.href);
@@ -696,8 +752,8 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
     /**
      * The open drawer closes when the viewport crosses into another
      * `facetsApply` mode (a phone rotated, a window widened): the drawer was a
-     * phone's, and what it held was never confirmed. Regression (a bicycle
-     * shop, `{ 0: 'staged', 992: 'instant' }`, 2026-10-14): a value ticked in
+     * phone's, and what it held was never confirmed. Regression (a production
+     * storefront, `{ 0: 'staged', 992: 'instant' }`, 2026-10-14): a value ticked in
      * the drawer at 820 px stayed ticked in the 992 px sidebar with the
      * results unfiltered and no apply button there, and rotating back showed
      * the full-screen drawer again (`data-drawer-open` had stayed). Dropping
@@ -839,12 +895,18 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       return w;
     }
 
-    /** UI -> URL. The resulting URL change drives sync(). In a drawer that stages: held there, nothing fetched. */
+    /**
+     * UI -> URL. The resulting URL change drives sync(). In a drawer that
+     * stages: held there, its state fetched in the background once the
+     * changes pause (nothing drawn from it until Apply).
+     */
     go(patch: Partial<UiState>) {
       if (!this.current) return;
       this.intent?.cancel(); // a dwell still pending: this click's own state is what is fetched now
       if (this.staging()) {
         this.staged = nextState(this.staged ?? this.wanted ?? stateOf(this.current), this.shown ?? stateOf(this.current), patch);
+        clearTimeout(this.heldTimer);
+        if (DRAWER && prefetchFilters) this.heldTimer = window.setTimeout(() => this.staging() && this.staged && this.prefetchHeld(this.staged), SETTLE_MS);
         return this.redraw();
       }
       this.navigate(nextState(this.wanted ?? stateOf(this.current), this.shown ?? stateOf(this.current), patch));
@@ -1027,7 +1089,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
             this.message = null;
             // Another state of the visit shown (a filter, a sort): its sidebar
             // stays until the new facets come, as from the intent prefetch.
-            // Bug (a bicycle shop's QA round 3, 2026-10-15): drawn with no
+            // Bug (a production storefront, 2026-10-15): drawn with no
             // facets, the sidebar collapsed to one group for ~250 ms and
             // Chromium's scroll anchoring threw the page to its top.
             const last = this.last;
@@ -1099,6 +1161,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       }
       this.images();
       if (tk.state === 'ours') this.watch();
+      if (DRAWER) this.swapIn(); // an Apply's new tiles, if these are they
     }
 
     /** Images a render put in that are there already (cached, persisted tiles) lose their placeholder now: no flash, no fade. */
@@ -1260,25 +1323,89 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
     private onIntent(el: Element) {
       const cur = this.current;
       // In a drawer that stages, a control leads nowhere until Apply: nothing to fetch ahead.
-      if (this.staging()) return;
-      if (!cur || !this.last || this.lastQ !== cur || this.inFlight || this.wanted || tk.state !== 'ours' || thrifty()) return;
+      if (this.staging() || !this.settled(cur)) return;
       // "Show more" (`data-lbx-more`): its next page, from the cursor, as nearing the end does.
-      if (el.matches('[data-lbx-more]')) return this.prefetchNext(cur, this.last);
+      if (el.matches('[data-lbx-more]')) return this.prefetchNext(cur, this.last!);
       const raw = targetOf(el);
       if (!raw) return;
       const url = new URL(raw, location.href);
       if (url.origin !== location.origin || url.pathname !== location.pathname || !route.accepts(url)) return;
+      this.prefetchState(url, 'on intent');
+    }
+
+    /**
+     * What the open staged drawer holds, fetched in the background (its
+     * changes paused for SETTLE_MS, or Apply came first): its first page into
+     * `early`, which Apply's sync() takes, done or in flight. Nothing is drawn
+     * from it, no hook runs, no URL is written: the results change on Apply
+     * only. A newer held state aborts the older one still out; back at the
+     * state shown, nothing is fetched. Limits as on intent (thrifty(), the
+     * visit's cap; none with `prefetchFilters` off: no timer is set).
+     */
+    private prefetchHeld(st: UiState) {
+      if (!DRAWER) return;
+      clearTimeout(this.heldTimer);
+      this.heldTimer = 0;
+      const cur = this.current;
+      if (!this.settled(cur)) return;
+      const why = "of the drawer's held state";
+      // The request this held state starts (or finds cached, or none): the older one still out goes.
+      const keyed = (k: string | null) => {
+        const was = this.heldKey;
+        if (was && was !== k) early.drop(was);
+        this.heldKey = k;
+      };
+      // From a timer: a route hook that throws (fromUrl) must not reach the
+      // site. Nothing is fetched; the drawer keeps what it holds, and Apply
+      // reports the hook's failure as any navigation does.
+      try {
+        const url = route.write(new URL(location.href), st);
+        if (canon(url.href) === this.href) return keyed(null);
+        // The query Apply's sync() will resolve from that URL: the same
+        // request, to the order of the values (a value map puts some in the
+        // site's param, the others in ours, read back first). When the route
+        // has it at hand (memoised), that one. Else the state held, at once
+        // (resolving the URL's slugs may ask the category's values first:
+        // two requests in a row), and once resolved, the URL's own query
+        // supersedes it if its request differs (the same: nothing more).
+        const r = route.resolve(url);
+        if (!isPromise(r)) return this.prefetchState(r, why, keyed);
+        this.prefetchState({ ...cur, ...st }, why, keyed);
+        r.then((q) => void (this.staged === st && this.prefetchState(q, why, keyed))).catch(prefetchFailed);
+      } catch (e) {
+        prefetchFailed(e);
+      }
+    }
+
+    /** A listing of ours to fetch ahead from: the current state shown, nothing pending for it, a connection that allows it. */
+    private settled(cur: Query | null): cur is Query {
+      return !!cur && !!this.last && this.lastQ === cur && !this.inFlight && !this.wanted && tk.state === 'ours' && !thrifty();
+    }
+
+    /**
+     * Another state of this visit (a control's URL, or a held state's
+     * query), not cached: its first page, the request sync() starts with
+     * (`firstRequest`), fetched ahead into `early` and never rendered from
+     * here. `keyed`: told the request's key (null: none) before it starts,
+     * also when there is nothing to start (cached).
+     */
+    private prefetchState(to: URL | Query | null, why: string, keyed?: (k: string | null) => void) {
+      const cur = this.current!;
       const from = this.href;
-      if (canon(url.href) === from) return;
       const then = (q: Query | null) => {
-        if (!q || this.href !== from || this.inFlight || this.wanted || visitOf(q) !== visitOf(cur) || cache.get(keyOf(q))) return;
+        if (!q || this.href !== from || this.inFlight || this.wanted || visitOf(q) !== visitOf(cur)) return;
         const req = firstRequest(ctx.global, cfg, route, q);
+        const k = req && JSON.stringify(req);
+        keyed?.(k);
+        if (!k || cache.get(keyOf(q))) return;
         // Its first images too (`_global.images.warm`, low priority): the click then shows them at once.
         const fetch = (signal: AbortSignal) => ctx.api.search(req!, signal).then((p) => (warm > 0 && warmImages(firstRowImages(imgs, p.hits.slice(0, warm).map(ctx.result), true), warm), p));
-        if (req && early.start(JSON.stringify(req), visitOf(q), fetch)) mark(`${route.id} prefetch on intent`);
+        if (early.start(k, visitOf(q), fetch)) mark(`${route.id} prefetch ${why}`);
       };
-      const r = route.resolve(url);
-      if (isPromise(r)) r.then(then).catch((e) => reportError(`${route.id} filter prefetch`, e));
+      if (!(to instanceof URL)) return then(to);
+      if (canon(to.href) === from) return;
+      const r = route.resolve(to);
+      if (isPromise(r)) r.then(then).catch(prefetchFailed);
       else then(r);
     }
 
@@ -1299,14 +1426,63 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       this.waited = null;
       const was = this.last;
       const quiet = this.quiet;
+      // An Apply's swap (./applied.ts): any render after its navigation ends
+      // it; the applied state's own render, not an error's, says what was
+      // applied, and its first step brings the new tiles in (swapIn()).
+      const href = DRAWER ? canon(url.href) : '';
+      const cue = DRAWER && this.applyCue?.href ? this.applyCue : null;
+      const say = cue && href === cue.href && !this.message ? t('applied', { results: found(q, res) }) : null;
+      if (cue) this.applyCue = null;
+      if (DRAWER && this.cue && this.cue.href !== href) this.endCue();
+      // A render of the same state before the swap's step drew its tiles (the
+      // facets, before a first step a frame late on a phone): it carries the
+      // swap on; it dropped it, and the list stayed dimmed for the visit.
+      if (DRAWER) (this.appliedSay = say), (this.swapping = say && tk.state === 'ours' ? { say, href } : this.swapping?.href === href ? this.swapping : null);
       this.guarded(() => this.draw(q, res, url));
-      if (w && !w.dimmed && was && !quiet && tk.state === 'ours' && !sameHits(res, was)) this.fadeIn();
+      if (DRAWER) (this.appliedSay = null), !this.swapping && this.removeAttribute('data-lbx-swap');
+      if (!say && w && !w.dimmed && was && !quiet && tk.state === 'ours' && !sameHits(res, was)) this.fadeIn();
+    }
+
+    /**
+     * The applied state's tiles are in (the render's first step): the old
+     * list's dim ends, those in view come in, and the status says what was
+     * applied for APPLIED_MS (`data-lbx-applied` on the element meanwhile,
+     * for the site's own cue). Without the cue's chunk (not loaded yet, or
+     * failed), only the dim ends: the status region still says it.
+     */
+    private swapIn() {
+      const s = DRAWER ? this.swapping : null;
+      if (!s) return;
+      this.swapping = null;
+      this.removeAttribute('data-lbx-swap');
+      if (!applied) return;
+      this.endCue();
+      const tiles = [...(this.querySelector('[data-lbx-list]')?.children ?? [])].slice(0, SWAP_TILES);
+      let end: (fade: boolean) => void;
+      try {
+        end = applied.swapIn(this, tiles, s.say, this.a11y?.root ?? null, reduced());
+      } catch (e) {
+        // In the render's step: a failure of the cue costs the cue, never the listing (guarded() would hand it back).
+        return reportError(`${route.id} applied cue`, e);
+      }
+      this.setAttribute('data-lbx-applied', '');
+      this.cue = { end, href: s.href, timer: window.setTimeout(() => this.endCue(true), APPLIED_MS) };
+    }
+
+    /** The status of an Apply taken away: faded out once its time is up, at once when another state renders. */
+    private endCue(fade = false) {
+      const c = DRAWER ? this.cue : null;
+      if (!c) return;
+      this.cue = null;
+      clearTimeout(c.timer);
+      this.removeAttribute('data-lbx-applied');
+      c.end(fade);
     }
 
     /** The list fading in from FADE_FROM (Web Animations: no class to restart, no layout read); not under reduced motion. */
     private fadeIn() {
       const list = this.querySelector('[data-lbx-list]');
-      if (!list || typeof list.animate !== 'function' || matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+      if (!list || typeof list.animate !== 'function' || reduced()) return;
       this.fade?.cancel();
       this.fade = list.animate([{ opacity: FADE_FROM }, { opacity: 1 }], { duration: FADE_MS, easing: 'cubic-bezier(.2,0,0,1)' });
     }
@@ -1318,6 +1494,8 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       } catch (e) {
         reportError(`${route.id} render`, e);
         this.setBusy(false);
+        // An Apply's swap under way: the list handed back is not left dimmed.
+        if (DRAWER) (this.swapping = null), this.removeAttribute('data-lbx-swap');
         // The server's markup is still the page's: back it goes (the takeover keeps a listing that is there).
         if (this.server) {
           delete (this as any)._$litPart$;
@@ -1461,7 +1639,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       const before = this.lastQ;
       const grew = !!before && !!this.last && keyOf(q) === keyOf(before) && res.page > this.last.page && res.guid === this.last.guid;
       this.shownBefore = grew ? (this.last?.hits.length ?? 0) : 0;
-      const said = this.message ?? (grew ? t('shown', { shown: res.hits.length, total: res.total, count: res.total }) : res.total ? t('results', { count: res.total, query: q.title }) : t('empty', { query: q.title }));
+      const said = this.message ?? this.appliedSay ?? (grew ? t('shown', { shown: res.hits.length, total: res.total, count: res.total }) : found(q, res));
       // A quiet render keeps what is still to be said: the facets' render (said
       // with the products) cut short their redraw in steps, before it spoke,
       // and a filter was never announced (found by Luma's accessibility tests on a phone, 2026-10-11).

package/src/widgets/listing/intent.ts

@@ -21,6 +21,12 @@
 // Results are never rendered by the prefetch itself: only a click whose
 // request is the same takes them.
 //
+// A drawer that stages (`facetsApply: 'staged'`) has no intent to watch: its
+// controls lead nowhere until Apply. There the held state itself is fetched
+// once the changes pause for SETTLE_MS (three quick ticks: one request), a
+// newer held state aborting the older one still out; Apply takes it as a
+// click does. Closing the drawer otherwise leaves it to expire.
+//
 // Limits: two in flight (a newer intent aborts the oldest), the state
 // changing aborts those still out (their controls now lead elsewhere), kept
 // TTL_MS, PER_VISIT per category or query, none with Save-Data, offline or on
@@ -36,6 +42,8 @@ import { reportError } from '../../core/health';
 
 /** Hover or focus this long counts as intent (Chrome's speculation rules wait ~200 ms on hover for a whole page; this is one request). */
 export const DWELL_MS = 100;
+/** A staged drawer's changes pause this long before its held state is fetched (element.ts `prefetchHeld`). */
+export const SETTLE_MS = 250;
 const TTL_MS = 30_000;
 /** First pages kept (done or in flight). */
 const KEEP = 6;
@@ -181,6 +189,13 @@ export const firstPages = () => {
       while (m.size > KEEP) m.delete(m.keys().next().value!);
       return true;
     },
+    /** One still out, no longer wanted (a staged drawer's older held state): aborted. A done one stays until it expires. */
+    drop(k: string) {
+      const e = m.get(k);
+      if (!e || e.settled) return;
+      e.ctrl.abort();
+      m.delete(k);
+    },
     /** The state changed: requests still out were for controls that now lead elsewhere. */
     abortInFlight() {
       for (const [k, e] of m)