@luigisbox/luma 0.3.0 → 0.5.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';
@@ -341,13 +343,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
@@ -591,12 +595,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 +609,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 +749,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);
@@ -847,7 +855,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 +964,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 '';
     }
@@ -1214,7 +1243,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 +1283,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 +1313,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 +1573,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/listing/element.ts

@@ -13,14 +13,16 @@
 // (lit SSR) instead of rebuilding it, so nothing is fetched or repainted on
 // load. From then on the listing is client-side as usual.
 
-import { borrow, contrastToggle, liveRegion, useContrast } from '../../core/a11y';
+import { borrow, liveRegion, useContrast } from '../../core/a11y';
 import { activateByKey, byKeyboard, focusables, trapTab } from '../../core/a11y-keys';
+import { CONTENT_VISIBILITY, DRAWER, DROPDOWN, MENU, NAMED_FADE, NAMED_PRECONNECT_IMAGES, NAMED_PREFETCH_FILTERS, NAMED_PREFETCH_NEXT_PAGE, NAMED_PRELOAD, NAMED_RESTORE_ON_BACK, ON_RENDER, SEARCH, SSR } from '../../core/features';
 import { mark, reportError } from '../../core/health';
 import { claim } from '../../core/reconciler';
 import { afterLayout, rememberHeight } from '../../core/hold';
 import { hasPrefetch, observe, peekPrefetch, peekProducts, productsChannel, putPrefetch, takePrefetch, typicalMs, type Prefetch } from '../../core/prefetch';
 // Through the support chunk, which every widget loads with its own (src/main.ts load()).
-import { firstRowCount, firstRowImages, imageHelpers, imageOf, preloadImages, settleImages, warmImages } from '../../core/support';
+import { preloadImages } from '../../core/image-preload';
+import { firstRowCount, firstRowImages, imageHelpers, imageOf, settleImages, warmImages } from '../../core/support';
 import { view } from '../../core/templates';
 import { afterFrame, isPromise } from '../../core/scheduler';
 import { onUrlChange } from '../../core/sense';
@@ -31,13 +33,14 @@ import { canon, pageKey, writeUrl } from '../../core/url';
 import { lru } from '../../core/storage';
 import type { WidgetContext } from '../../main';
 import type { Link } from '../../types';
-import { facetFields, handsBack, nextState, stateOf, type Query, type Route, type UiState } from './state';
+import { facetFields, handsBack, nextState, queryKey, stateOf, type Query, type Route, type UiState } from './state';
+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 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, writeStash, type Stash } from './stash';
+import { dropStash, peekStash, readStash, removeStash, writeStash, type Stash } from './stash';
 import { adoptScroll, holdScroll, keepViewport, leavingLink, nearEnd, preconnectImages, releaseScroll, restoreScroll, scrollSpot } from './instant';
 import { watch } from '../../core/tiles';
 
@@ -88,7 +91,7 @@ const sameUrl = (u: unknown, href: string) => {
     return false;
   }
 };
-const keyOf = (q: Query) => JSON.stringify([q.q, q.scope, q.filters, q.flags, q.sort]);
+const keyOf = queryKey;
 
 type Hydrate = (v: unknown, c: HTMLElement | ShadowRoot) => void;
 
@@ -100,7 +103,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
   useContrast();
   const query = (q: Query, signal?: AbortSignal, pre?: Page, onProducts?: (r: ListingResult) => void) => {
     const t0 = performance.now();
-    const p = listingQuery(ctx.api, ctx.global, cfg, route, q, signal, pre, onProducts, quickChannel(route.id));
+    const p = listingQuery(ctx.api, ctx.global, cfg, route, q, signal, pre, onProducts, SEARCH ? quickChannel(route.id) : undefined);
     // A whole listing (not a first page fetched already): how long a fresh one takes here.
     if (!pre) p.then((r) => !r.partial && observe(performance.now() - t0), () => {});
     return p;
@@ -158,7 +161,11 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
   };
   // Filter clicks that render at once (./intent.ts): first pages fetched on intent, by their request.
   const early = firstPages();
-  const prefetchFilters = ctx.global.prefetchFilters !== false;
+  const prefetchFilters = (NAMED_PREFETCH_FILTERS ? ctx.global.prefetchFilters !== false : true);
+  // The high-contrast toggle (`_global.contrastToggle`, off by default): its
+  // own chunk (lbx-contrast), asked for now where it is on, so a site without
+  // 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 earlyKey = (q: Query) => {
     const r = firstRequest(ctx.global, cfg, route, q);
@@ -190,7 +197,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       return false;
     }
   };
-  if (document.querySelector(`${route.tag}[data-lbx-ssr]`)) adopt();
+  if (SSR && document.querySelector(`${route.tag}[data-lbx-ssr]`)) adopt();
 
   // A result stashed for this page load (./stash.ts): the query typed on the
   // previous page, or the listing as the shopper left it (Back). Seeded like a
@@ -199,7 +206,11 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
   /** The page's templates prepared ahead (`rehearse`), once. */
   let rehearsed = false;
   if (!seeded.size) {
-    stashed = readStash(route.id, location.href);
+    // A typed query's stash is under the query: this page's, as the search
+    // route reads it (sync for search; a category's lookup is not asked here).
+    const here = new URL(location.href);
+    const resolved = route.id === 'search' && route.accepts(here) ? route.resolve(here) : null;
+    stashed = readStash(route.id, location.href, resolved instanceof Promise ? null : resolved);
     if (stashed?.sr) adoptScroll();
     // Too old to render from: where the shopper was only (the results are asked for as on any load).
     if (stashed?.stale) mark(`${route.id} back: stash too old, its scroll only`);
@@ -209,12 +220,12 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       mark(`${route.id} from stash (${stashed.kind}, ${stashed.result.hits.length} hits)`);
       // A prerendered page reads (and drops) it in a copy of sessionStorage; at
       // its activation the opener's storage, still holding it, comes back: used once.
-      const at = location.href;
-      if (stashed.kind === 'spec' && (document as any).prerendering) document.addEventListener('prerenderingchange', () => dropStash(at), { once: true });
+      const key = specKey(route.id, stashed.query.q ?? '');
+      if (stashed.kind === 'spec' && (document as any).prerendering) document.addEventListener('prerenderingchange', () => removeStash(key), { once: true });
     }
   }
-  const restoreOn = cfg.restoreOnBack !== false;
-  const skipOut = cfg.contentVisibility === true;
+  const restoreOn = (NAMED_RESTORE_ON_BACK ? cfg.restoreOnBack !== false : true);
+  const skipOut = CONTENT_VISIBILITY ? cfg.contentVisibility === true : false;
 
   // The request for the URL we loaded on starts now, before the element exists.
   const bootUrl = new URL(location.href);
@@ -235,7 +246,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
   // usually arrives while the chunk's templates, the fonts or the anchor are
   // still on their way. A server-rendered page has them in its HTML (the server renderer).
   const imgs = ctx.global.images ?? {};
-  const preloadOn = imgs.preload !== false;
+  const preloadOn = (NAMED_PRELOAD ? imgs.preload !== false : true);
   const warm = imgs.warm ?? 0;
   const preloadRow = (res: ListingResult | null | undefined) => {
     if (res?.hits.length) preloadImages(firstRowImages(imgs, res.hits.map(ctx.result)));
@@ -398,19 +409,30 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
     };
 
     connectedCallback() {
-      onQuickLanded(route.id, (r) => this.quickIn(r));
+      // The quick types landed in a result shown without them (where they do
+      // not sit above the products): drawn now, into the render in steps if it
+      // is still going on. No hook, no announcement: the same result. A
+      // search page's only (core/features.ts): here, not a method, so a build
+      // without search/ leaves it out.
+      if (SEARCH)
+        onQuickLanded(route.id, (r) => {
+          if (this.stepping?.hits === r.hits) return void this.stepping.again();
+          if (this.last !== r) return; // not shown (yet): a render of it shows them
+          mark(`${route.id} quick types after the products`);
+          this.redraw();
+        });
       // Not in the constructor: an element the parser creates after our class
       // is defined (an async include) is constructed before its attributes are set.
       if (this.ssr == null) {
         // Every server element is checked against its own state (a later visit's page is another page).
-        this.ssr = this.hasAttribute('data-lbx-ssr') && adopt();
+        this.ssr = SSR ? this.hasAttribute('data-lbx-ssr') && adopt() : false;
         // Ours from now on, before it drops its marker (the reconciler keeps it).
         if (this.ssr) claim(route.id, this);
         // Server markup whose state we cannot use (another URL: a param the page
         // stripped, another host name): ours replaces it once it has rendered.
         // A parser-created element (an async bundle ran first) is still getting
         // its children: kept once they are all there (sync() awaits that).
-        else if (this.hasAttribute('data-lbx-ssr')) {
+        else if (SSR && this.hasAttribute('data-lbx-ssr')) {
           claim(route.id, this);
           const keep = () => void (this.server = [...this.childNodes]);
           if (document.readyState === 'loading') this.cleared = new Promise<void>((r) => document.addEventListener('DOMContentLoaded', () => (keep(), r()), { once: true }));
@@ -427,20 +449,23 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       if (!this.hasAttribute('tabindex')) this.tabIndex = -1;
       // Moved on within this document (an SPA's navigation): its scroll is the host's again.
       this.unsub = onUrlChange(() => (releaseScroll(), this.urlMoved(), this.resync()));
-      this.unBack ??= onOwnBack(this.onBack);
+      // The drawer's own history entry: only where a template has a drawer (core/features.ts DRAWER).
+      if (DRAWER) this.unBack ??= onOwnBack(this.onBack);
       // Product clicks and add-to-carts on our tiles: the framework's, never a template's (core/tiles.ts).
       watch(this, { list: `lbx_${route.id}`, global: ctx.global, results: () => this.last?.hits.map(ctx.result) ?? [] });
       this.addEventListener('click', this.onClick);
       this.addEventListener('keydown', this.onKey);
       this.addEventListener('focusout', this.onFocusOut);
-      document.addEventListener('click', this.onOutside, true);
-      document.addEventListener('pointerdown', this.onOutside, true);
+      if (MENU || DROPDOWN) {
+        document.addEventListener('click', this.onOutside, true);
+        document.addEventListener('pointerdown', this.onOutside, true);
+      }
       addEventListener('pagehide', this.onPageHide);
       addEventListener('pageshow', this.onPageShow);
       addEventListener('scroll', this.onScroll, { passive: true });
       if (prefetchFilters) this.intent ??= watchIntent(this, (el) => this.onIntent(el));
       // Put back by a host re-render with its drawer open: still watched.
-      if (this.hasAttribute('data-drawer-open') && !this.unwatchApply) this.watchApply();
+      if (DRAWER && this.hasAttribute('data-drawer-open') && !this.unwatchApply) this.watchApply();
       // Microtask: runs before paint (no empty frame) but outside the
       // reconciler's placement pass.
       queueMicrotask(() => this.resync());
@@ -454,8 +479,10 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       this.removeEventListener('click', this.onClick);
       this.removeEventListener('keydown', this.onKey);
       this.removeEventListener('focusout', this.onFocusOut);
-      document.removeEventListener('click', this.onOutside, true);
-      document.removeEventListener('pointerdown', this.onOutside, true);
+      if (MENU || DROPDOWN) {
+        document.removeEventListener('click', this.onOutside, true);
+        document.removeEventListener('pointerdown', this.onOutside, true);
+      }
       removeEventListener('pagehide', this.onPageHide);
       removeEventListener('pageshow', this.onPageShow);
       removeEventListener('scroll', this.onScroll);
@@ -487,7 +514,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       // A menu in the host's markup (their dropdown classes): [data-lbx-toggle]
       // opens/closes its [data-lbx-menu] ancestor by a data-lbx-open attribute
       // (the integration's CSS maps it onto their open state).
-      const tg = target.closest?.('[data-lbx-toggle]');
+      const tg = MENU ? target.closest?.('[data-lbx-toggle]') : null;
       if (tg && this.contains(tg)) {
         e.preventDefault();
         // Ours alone: host code delegating on the same (their) dropdown classes must not toggle it too.
@@ -497,7 +524,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
         if (menu) setMenu(menu, !menu.hasAttribute('data-lbx-open'), byKeyboard(e));
         return;
       }
-      const d = target.closest?.('[data-lbx-drawer]');
+      const d = DRAWER ? target.closest?.('[data-lbx-drawer]') : null;
       if (!d || !this.contains(d)) {
         // A link to another page (a product): remembered for Back.
         const away = restoreOn && leavingLink(e, this);
@@ -547,7 +574,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       if (this.href) this.scrolls.set(this.href, this.y);
       const y = this.scrolls.get(href);
       this.restoreY = y == null ? null : { href, y };
-      if (this.hasAttribute('data-drawer-open') && !this.drawerBack) this.setDrawer(false);
+      if (DRAWER && this.hasAttribute('data-drawer-open') && !this.drawerBack) this.setDrawer(false);
     }
 
     /**
@@ -567,7 +594,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
 
     /** Changes go to the drawer's held state instead of the URL: it is open, where it stages. */
     private staging() {
-      return this.stagedMode && this.hasAttribute('data-drawer-open');
+      return DRAWER ? this.stagedMode && this.hasAttribute('data-drawer-open') : false;
     }
 
     /**
@@ -577,6 +604,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
      * middle, the count and the first tiles above the viewport.
      */
     private applyStaged(from?: HTMLElement) {
+      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);
@@ -610,6 +638,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
      * takes the entry back first, then runs `then`.
      */
     private setDrawer(open: boolean, from?: HTMLElement, then?: () => void) {
+      if (!DRAWER) return;
       const was = this.hasAttribute('data-drawer-open');
       this.toggleAttribute('data-drawer-open', open);
       for (const b of this.querySelectorAll('[data-lbx-drawer="open"]')) b.setAttribute('aria-expanded', String(open));
@@ -675,6 +704,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
      * is safer than applying: the shopper never pressed Apply.
      */
     private watchApply() {
+      if (!DRAWER) return;
       const v = cfg.facetsApply;
       if (!v || typeof v !== 'object' || typeof matchMedia !== 'function') return;
       const mode = atWidth(v, 'instant', viewport);
@@ -693,14 +723,14 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
      */
     private onKey = (e: KeyboardEvent) => {
       const target = e.target as Element;
-      const menu = target.closest?.('[data-lbx-menu][data-lbx-open]');
+      const menu = MENU ? target.closest?.('[data-lbx-menu][data-lbx-open]') : null;
       if (e.key === 'Escape') {
         if (menu && this.contains(menu)) {
           e.preventDefault();
           e.stopPropagation(); // ours, not a host modal's
           setMenu(menu, false);
           triggerOf(menu)?.focus();
-        } else if (this.hasAttribute('data-drawer-open')) {
+        } else if (DRAWER && this.hasAttribute('data-drawer-open')) {
           e.preventDefault();
           e.stopPropagation();
           this.setDrawer(false);
@@ -716,7 +746,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
         items[next].focus();
         return;
       }
-      if (e.key === 'Tab' && this.hasAttribute('data-drawer-open')) {
+      if (DRAWER && e.key === 'Tab' && this.hasAttribute('data-drawer-open')) {
         const panel = this.querySelector('[data-lbx-drawer-panel]');
         if (panel) trapTab(e, panel);
         return;
@@ -726,7 +756,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
 
     /** Focus leaving an open menu (Tab past it) closes it. */
     private onFocusOut = (e: FocusEvent) => {
-      const menu = (e.target as Element).closest?.('[data-lbx-menu][data-lbx-open]');
+      const menu = MENU ? (e.target as Element).closest?.('[data-lbx-menu][data-lbx-open]') : null;
       if (menu && !(e.relatedTarget && menu.contains(e.relatedTarget as Node))) setMenu(menu, false);
     };
 
@@ -737,12 +767,12 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
         root.setAttribute('data-lbx-a11y', '');
         const live = liveRegion();
         root.append(live.el);
-        if (ctx.global.contrastToggle) root.append(contrastToggle(t('contrast')));
+        toggle?.then((m) => root.append(m.contrastToggle(t('contrast'))), (e) => reportError(`${route.id} contrast toggle`, e));
         this.a11y = { root, live };
       }
       if (this.firstChild !== this.a11y.root) this.prepend(this.a11y.root);
-      for (const m of this.querySelectorAll('[data-lbx-menu]')) setMenu(m, m.hasAttribute('data-lbx-open'));
-      for (const b of this.querySelectorAll('[data-lbx-drawer="open"]')) b.setAttribute('aria-expanded', String(this.hasAttribute('data-drawer-open')));
+      if (MENU) for (const m of this.querySelectorAll('[data-lbx-menu]')) setMenu(m, m.hasAttribute('data-lbx-open'));
+      if (DRAWER) for (const b of this.querySelectorAll('[data-lbx-drawer="open"]')) b.setAttribute('aria-expanded', String(this.hasAttribute('data-drawer-open')));
       const was = this.focusWas;
       this.focusWas = null;
       const tile = this.moreByKey ? this.querySelector('[data-lbx-list]')?.children[this.shownBefore] : null;
@@ -770,8 +800,8 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
      * not clickable (a heading, the page's background), only the pointer events.
      */
     private onOutside = (e: Event) => {
-      for (const d of this.querySelectorAll('details[data-lbx-dropdown][open]')) if (!d.contains(e.target as Node)) d.removeAttribute('open');
-      for (const d of this.querySelectorAll('[data-lbx-menu][data-lbx-open]')) if (!d.contains(e.target as Node)) setMenu(d, false);
+      if (DROPDOWN) for (const d of this.querySelectorAll('details[data-lbx-dropdown][open]')) if (!d.contains(e.target as Node)) d.removeAttribute('open');
+      if (MENU) for (const d of this.querySelectorAll('[data-lbx-menu][data-lbx-open]')) if (!d.contains(e.target as Node)) setMenu(d, false);
     };
 
     /**
@@ -930,7 +960,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       // A host re-render may destroy and re-create us for the same URL: render
       // synchronously from cache so the replacement never shows an empty frame.
       const hit = cache.get(key);
-      if (hit && this.ssr && !this.hydrateWith) {
+      if (SSR && hit && this.ssr && !this.hydrateWith) {
         // Hydrate complete markup only: a parser-created element connects before its children are parsed.
         if (document.readyState === 'loading') await new Promise((r) => document.addEventListener('DOMContentLoaded', r, { once: true }));
         try {
@@ -962,6 +992,9 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       const ek = !pf && prefetchFilters ? earlyKey(q) : null;
       const pre = ek ? early.take(ek) : undefined;
       early.abortInFlight();
+      // Server markup still being parsed (a streamed include): decided out
+      // here, not in the try below (Rollup folds no flag in a try).
+      const serverParsing = SSR ? () => !!this.ssr && document.readyState === 'loading' : () => false;
       try {
         let res: ListingResult;
         let shownEarly = false;
@@ -1013,7 +1046,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
         }
         if (shownEarly) this.quiet = true; // said with the products
         // Server markup still being parsed (a streamed include): render once it is complete.
-        if (this.ssr && document.readyState === 'loading') {
+        if (serverParsing()) {
           await new Promise((r) => document.addEventListener('DOMContentLoaded', r, { once: true }));
           if (this.href !== href) return;
         }
@@ -1070,7 +1103,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
 
     /** Images a render put in that are there already (cached, persisted tiles) lose their placeholder now: no flash, no fade. */
     private images() {
-      settleImages(this, imgs.fade !== false);
+      settleImages(this, (NAMED_FADE ? imgs.fade !== false : true));
     }
 
     /** Render anew, dropping the state lit keeps on the container (or it reuses it and paints nothing). */
@@ -1155,11 +1188,11 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       this.ahead = null;
       if (skipOut) this.sizeTiles();
       // Not while prerendered: a next page of a page nobody may open is a request for nothing.
-      if (cfg.prefetchNextPage !== false && hasMore(res)) {
+      if ((NAMED_PREFETCH_NEXT_PAGE ? cfg.prefetchNextPage !== false : true) && hasMore(res)) {
         const href = this.href;
         whenShown(() => this.href === href && !this.ahead && (this.ahead = nearEnd(this, () => this.prefetchNext(q, res))));
       }
-      if (res.hits[0] && ctx.global.preconnectImages !== false) preconnectImages(ctx.result(res.hits[0]).c.image);
+      if (res.hits[0] && (NAMED_PRECONNECT_IMAGES ? ctx.global.preconnectImages !== false : true)) preconnectImages(ctx.result(res.hits[0]).c.image);
     }
 
     /**
@@ -1349,18 +1382,6 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       }, 600);
     }
 
-    /**
-     * The quick types landed in a result shown without them (where they do
-     * not sit above the products): drawn now, into the render in steps if it
-     * is still going on. No hook, no announcement: the same result.
-     */
-    private quickIn(r: ListingResult) {
-      if (this.stepping?.hits === r.hits) return void this.stepping.again();
-      if (this.last !== r) return; // not shown (yet): a render of it shows them
-      mark(`${route.id} quick types after the products`);
-      this.redraw();
-    }
-
     /** The last render's data again with the current view state: no fetch, no announcement, focus where it is. */
     private redraw() {
       const q = this.lastQ;
@@ -1388,8 +1409,8 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
           if (!link || m.button > 0 || m.metaKey || m.ctrlKey || m.shiftKey || m.altKey) return; // new tab etc.: the browser's
           e.preventDefault();
           const at = e.currentTarget as Element | null;
-          at?.closest('details[data-lbx-dropdown]')?.removeAttribute('open');
-          const menu = at?.closest('[data-lbx-menu]');
+          if (DROPDOWN) at?.closest('details[data-lbx-dropdown]')?.removeAttribute('open');
+          const menu = MENU ? at?.closest('[data-lbx-menu]') : null;
           if (menu) {
             setMenu(menu, false);
             // Its item had focus: back to the menu's button, not lost with the closed menu.
@@ -1468,11 +1489,11 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       this.drawn = data;
       // Server markup that is not hydrated (no cached result for it: its facets
       // were missing) is replaced, not rendered after.
-      if (this.ssr && !this.hydrateWith) {
+      if (SSR && this.ssr && !this.hydrateWith) {
         this.ssr = false;
         this.server ??= [...this.childNodes];
       }
-      if (this.ssr && this.hydrateWith) {
+      if (SSR && this.ssr && this.hydrateWith) {
         this.ssr = false;
         const markup = [...this.childNodes];
         try {
@@ -1605,6 +1626,8 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
             if (!res.pending) this.setBusy(false); // the products alone: busy until their facets
             return this.finish(q, res, url, total, fonts, shown);
           }
+          // The next step after a frame (afterFrame: a task soon where frames are stalled; each step's
+          // wait was 500 ms then, five steps 2.5 s of nothing shown, 2026-10-19).
           afterFrame(() => this.renders === n && this.href === href && this.guarded(() => step(false)));
         };
         // The scope and the first step in one task were 17-18 ms on a production storefront at 4x: apart when they would not fit.
@@ -1796,7 +1819,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       // yet: the hook (titles, and often the site's analytics) runs when it
       // is shown, never for a prerender the shopper does not open.
       // The products alone (`pending`): the hook once the facets are there too, once a visit.
-      if (!res.pending)
+      if (ON_RENDER && !res.pending)
         whenShown(() => {
           try {
             cfg.onRender?.(info);

package/src/widgets/listing/query.ts

@@ -2,6 +2,7 @@
 // (a search page's request starts before any widget chunk), the listing
 // element and the edge render service share it.
 
+import { SEARCH } from '../../core/features';
 import { isPromise } from '../../core/scheduler';
 import type { Api, FacetData, FilterNode, Hit, ListingRequest, Page, Sort } from '../../api';
 import type { GlobalConfigType, ListingConfigType, SearchConfigType } from '../../types';
@@ -9,6 +10,7 @@ import { facetFields, type Query, type Route } from './state';
 import { lru } from '../../core/storage';
 import { reportError } from '../../core/health';
 import { MAX_PAGE } from '../../core/routes';
+import { EMPTY_VALUES } from '../../core/features';
 
 const num = (s: string | undefined) => (s === undefined || s === '' ? null : Number(s));
 /** A range filter value `min|max` (either end may be empty). */
@@ -184,7 +186,8 @@ export const listingQuery = async (api: Api, g: GlobalConfigType, cfg: ListingCo
   }
   const req = (omit?: string, size = cfg.size): ListingRequest => listingRequest(g, cfg, route, q, omit, size, asValues);
   const quickKey = JSON.stringify([cfg.surface, q.q]);
-  const wantsQuick = route.endpoint === 'search' && !!q.q && !!cfg.quick?.length;
+  // Quick types are a search page's (no search/ folder: none, core/features.ts).
+  const wantsQuick = SEARCH ? route.endpoint === 'search' && !!q.q && !!cfg.quick?.length : false;
   const quick =
     wantsQuick && cfg.quick
       ? quickMemo.get(quickKey) ?? remember(quickKey, (() => {
@@ -255,7 +258,7 @@ export const listingQuery = async (api: Api, g: GlobalConfigType, cfg: ListingCo
       ? facetsOf().catch((e) => ((partial = true), (e as Error)?.name === 'AbortError' || reportError('facets', e), {}))
       : {};
   // Optional too: without them no value shows as empty.
-  const all = cfg.emptyValues && narrowed ? allOf().catch(() => undefined) : undefined;
+  const all = EMPTY_VALUES && cfg.emptyValues && narrowed ? allOf().catch(() => undefined) : undefined;
   // The products now, the facets when they come: a request (theirs needs
   // this result set's guid) the shopper would otherwise wait for.
   const early: ListingResult | null =
@@ -265,7 +268,7 @@ export const listingQuery = async (api: Api, g: GlobalConfigType, cfg: ListingCo
   if (early) onProducts!(early);
   // Not waited for (onQuick): the facets alone hold the result.
   const [facetData, quickHits, facetsAll] = await Promise.all([facets, onQuick ? quickNow ?? LATE : soon(quick), all]);
-  if (cfg.emptyValues && !narrowed && !partial && Object.keys(facetData).length) unfiltered.set(allKey, Promise.resolve(facetData));
+  if (EMPTY_VALUES && cfg.emptyValues && !narrowed && !partial && Object.keys(facetData).length) unfiltered.set(allKey, Promise.resolve(facetData));
   // Shown early without them and not where they may come late: they come
   // with a later render, not this one (above the grid, they would push it down).
   const late = quickHits === LATE || (!onQuick && !!early && !Object.keys(early.quick).length && quickHits !== early.quick);