@luigisbox/luma 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -5,6 +5,39 @@ before 1.0, a minor version may break the integration API.
 
 ## Unreleased
 
+## 0.7.0 — 2026-10-29
+
+### Added
+
+- `variants: { fields }` on a listing (search, plp; plp inherits it): each
+  result gets its variant group as `r.variants` (`siblings`, `total`) from
+  Luigi's Box. One request per page of results, never waited for: the
+  tiles are drawn again when it arrives. Off by default, built only where
+  a folder's `_config.ts` sets it.
+- Light-DOM autocomplete full screen on a phone: `autocomplete.fullScreen`
+  (`true`, or a media query such as `'(max-width: 767px)'`). A tap on the
+  site's input opens it over the whole screen, with the integration's own
+  markup and CSS. Its template renders its own input, marked
+  `data-lbx-full-screen-input`, and gets `fullScreen`, `state`, `tabs`,
+  `value`, `back()` and `clear()`. Its CSS places it, keyed on
+  `[data-lbx-full-screen]`, with `--lbx-top` and `--lbx-cover` from Luma.
+  Off by default.
+
+### Changed
+
+- The listing reads the result set's key from `request_key` (`guid` is its
+  deprecated name).
+- Autocomplete templates: `sheet` is now `fullScreen`, and the full-screen
+  input's marker `data-lbx-sheet-input` (in an `autocomplete-sheet`
+  override) is now `data-lbx-full-screen-input`. Rename both in templates
+  copied from 0.6.0.
+
+### Fixed
+
+- Full-screen autocomplete on a phone: focus leaving it for the page behind
+  (Tab past its last control, iOS's next-field arrow) closes it. Focus was
+  left on a control it hid.
+
 ## 0.6.0 — 2026-10-20
 
 ### Changed

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.7.0) may change the
+> **Pre-release.** Until 1.0, a minor version (0.8.0) may change the
 > integration API (config keys, template scope, the build); a patch version
-> (0.6.1) only fixes. Depend on `^0.6.0` to take fixes without breaking
+> (0.7.1) only fixes. Depend on `^0.7.0` to take fixes without breaking
 > changes. [`CHANGELOG.md`](CHANGELOG.md) says what each version changed.
 
 ## Core principles
@@ -391,6 +391,59 @@ export default ({ r, i, img, price }: SearchResultScope) => html`
   and twice.
 - **Pagination** is "show more" only: templates get `results`, `more` and
   `showMore`; there are no numbered pages.
+- **Variant groups** (`variants`, a listing's config, off by default): where
+  the surface collapses a product's variants into one result (one tile for a
+  shoe in eight sizes), `r.variants` holds the group's other products
+  (`siblings`, as results, at most 100) and its size with this one
+  (`total`). Luma asks Luigi's Box for them once per page of results, as
+  soon as the page is here, and draws the tiles again when they arrive: a
+  tile shows without them first (`r.variants` is undefined), and stays so if
+  the request fails; a listing restored on Back has them at once. Keep the
+  tile's box the same with and without them (a reserved row, an overlay, or
+  shown on hover and focus, `:hover, :focus-within`), or the rows below move
+  when they arrive; draw them inside the tile's own markup, not a different
+  template branch. `fields` names what each sibling carries; keep it to what
+  the tile shows.
+
+  ```ts
+  // integration/search/_config.ts (plp inherits it): the product's own size in `fields` too
+  export default { /* … */ fields: ['@title', 'web_url', 'size'], variants: { fields: ['size'] } };
+  // integration/_global/_init.ts: the sizes in stock, the product's and its siblings'
+  export default (config) => {
+    config._global.computedAttributes = {
+      ...config._global.computedAttributes,
+      sizes: (r) => [...new Set([r.a.size, ...(r.variants?.siblings ?? []).map((s) => s.a.size)].flat().filter(Boolean))],
+    };
+  };
+  ```
+- **A light-DOM autocomplete full screen on a phone**
+  (`autocomplete.dom: 'light'` with `fullScreen: true`, or a media query of
+  the site's own: `fullScreen: '(max-width: 767px)'`): a tap on the site's
+  input opens the autocomplete over the whole screen instead of a dropdown
+  under the input, and `autocomplete-box` gets `fullScreen: true`
+  (`state: 'idle'` until a phrase is long enough). The template renders its
+  own input, marked `data-lbx-full-screen-input` (`.value=${s.value}`): Luma
+  moves the focus into it and makes what is typed there the query and the
+  site's input's value. `back()` closes it (as Escape and the browser's
+  Back do) and `clear()` empties its input; `tabs` are one per type with
+  results. Keep the input one element in every state (not drawn anew for
+  results), and the tabs `role="tab"` siblings in their `role="tablist"`:
+  the arrow keys move between them. The arrow keys go through the options
+  it shows (the open tab's, whether the others are not drawn or hidden by
+  its CSS). While it is open the dropdown carries `data-lbx-full-screen` (a
+  phone in landscape too), and the integration's CSS places it full screen
+  there: `[data-lbx-full-screen] { inset: 0; top: var(--lbx-top, 0px) }`
+  (Luma sets `--lbx-top` to the visual viewport's top, which iOS moves when
+  it pans the page for the keyboard, and `--lbx-cover` to what Safari's
+  bars and the keyboard cover of its bottom: end the scrolling list with
+  that much space and give it `scroll-padding-bottom: var(--lbx-cover, 0px)`,
+  so its last options are not hidden). Focus leaving it for the page it
+  covers closes it. Without `fullScreen`, a light-DOM dropdown on a phone
+  stays a dropdown. The build includes this 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-full-screen-input`. The house
+  design is always full screen on a phone; its templates get the same
+  `fullScreen`.
 - **No results under filters**: the scope still holds the selected groups,
   their `chips` and `clear`. A template that leaves the facets out when
   `total` is 0 must keep them (or at least `clear`) while `chips.length` is
@@ -411,7 +464,9 @@ On by default unless noted; each falls back to what the page would do anyway.
 `emptyValues`, `prerenderWhileTyping` and `contentVisibility`, off by
 default, are in the build only where a file of the integration's repository
 (a script or `.html` file, not in `node_modules`, `dist` or a hidden folder) names them, as `_config.ts` or `_init.ts` does when
-it sets them; a switch on by default that no file names is built as on.
+it sets them; `variants` only where a folder's `_config.ts` sets it (set it
+there, not in `_init.ts`); a switch on by default that no file names is
+built as on.
 
 | Config | What it does | Turn it off when |
 |---|---|---|
@@ -422,6 +477,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 |
+| `variants: { fields }` (opt-in) | each tile's result gets its variant group (`r.variants`, "Templates" above): one request to Luigi's Box per page of results, never waited for | the surface does not collapse variants (every group is a group of one) |
 | `_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 |
 

package/build/vite.mjs

@@ -562,11 +562,12 @@ export const featureDefines = (integrationDir) => {
     __LBX_HOST_STYLES__: has((d) => d.some((f) => existsSync(resolve(integrationDir, f, 'style-host.css')))),
     __LBX_TRANSLATIONS__: has((d) => d.some((f) => existsSync(resolve(integrationDir, f, '_translations.ts')))),
     __LBX_INITS__: has((d) => d.some((f) => existsSync(resolve(integrationDir, f, '_init.ts')))),
-    // Only an integration's templates make a cart button, a filter drawer or a menu (Luma's own have none).
+    // Only an integration's templates make a cart button, a filter drawer, a menu or a light-DOM phone sheet's input (Luma's own have none; its house sheet is not light DOM).
     __LBX_CART__: has(() => inFiles('data-lbx-cart')),
     __LBX_DRAWER__: has(() => inFiles('data-lbx-drawer')),
     __LBX_MENU__: has(() => inFiles('data-lbx-menu')),
     __LBX_DROPDOWN__: has(() => inFiles('data-lbx-dropdown')),
+    __LBX_LIGHT_FULL_SCREEN__: has(() => inFiles('data-lbx-full-screen-input')),
     // Hooks only the integration's code sets (_init.ts, _widget.ts: functions, never in _config.ts).
     __LBX_AC_HOOKS__: has(() => inFiles('onOpen', 'onClose', 'onSelect', 'onReady')),
     __LBX_ON_RENDER__: has(() => inFiles('onRender')),
@@ -577,6 +578,8 @@ export const featureDefines = (integrationDir) => {
     __LBX_EMPTY_VALUES__: has(() => inFiles('emptyValues')),
     __LBX_PRERENDER_TYPING__: has(() => inFiles('prerenderWhileTyping', 'pageWhileTyping')),
     __LBX_CONTENT_VISIBILITY__: has(() => inFiles('contentVisibility')),
+    // A listing's variant groups: the key in a folder's _config.ts (the word alone is common: a catalog field, a comment).
+    __LBX_VARIANTS__: has((d) => d.some((f) => /\bvariants\b["']?\s*[:,}]/.test(existsSync(resolve(integrationDir, f, '_config.ts')) ? readFileSync(resolve(integrationDir, f, '_config.ts'), 'utf8') : ''))),
     // Options on by default: one no file names is on.
     ...Object.fromEntries(ON_BY_DEFAULT.map((k) => [`__LBX_NAMED_${k.replace(/[A-Z]/g, (c) => `_${c}`).toUpperCase()}__`, has(() => inFiles(k))])),
   };

package/docs/ACCESSIBILITY.md

@@ -139,7 +139,13 @@ guessed alt text, and forced colours and the OS setting are honoured.
   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.
+  browser's Back close it, and so does focus leaving it for the page it
+  covers (Tab past its last control, Shift+Tab from its first, iOS's
+  next-field arrow): it is never left on a control the sheet hides (2.4.11).
+  A light-DOM integration's full-screen autocomplete (`fullScreen`) gets the same focus, keys,
+  `aria-activedescendant` on its input and Back; a swipe moves the focus to
+  the host (`tabindex="-1"`, `role="group"` named as the input); its roles,
+  names and targets are its template's (§5).
 - **Forced colours**: the selection in `Highlight`/`HighlightText` with an
   outline, the panel (and the sheet) keep a `CanvasText` border, pills,
   chips and "Show all products" an outline.
@@ -164,6 +170,10 @@ guessed alt text, and forced colours and the OS setting are honoured.
   link marked `tabindex="-1"`); a render that removed the focused control (a
   chip, the last "show more") moves it to the region, not `<body>`. A mouse
   click keeps focus where it is.
+- **Variant groups landing** (`variants`): the tiles are drawn again, in
+  steps, with nothing announced and `aria-busy` untouched (the results did
+  not change); focus stays where it is, and in a tile whose template drew
+  other markup with its group, goes to the region, not `<body>`.
 - **Menus** (`[data-lbx-menu]` with `[data-lbx-toggle]`, the integration's
   markup): `aria-expanded` on the menu's button (the toggle with
   `aria-haspopup`/`aria-expanded`, else the first toggle) in every state;
@@ -330,7 +340,20 @@ drawer. The markup is the integration's, so:
   `aria-selected`, `tabindex="-1"`; sections as `role="group"` named by their
   heading; wrappers in between `role="presentation"`; nothing but options and
   groups inside the listbox (a pointer-only "show all" duplicate of Enter:
-  `aria-hidden="true"`, no tab stop). Decorative pictures `alt=""`.
+  `aria-hidden="true"`, no tab stop). Decorative pictures `alt=""`. Full screen on a
+  phone (`fullScreen`): the input marked `data-lbx-full-screen-input` is the combobox
+  (`role="combobox"`, `aria-autocomplete="list"`, `aria-expanded`,
+  `aria-controls` naming the listbox, a name: `inputLabel`); its back and
+  clear controls are buttons with names (`t('closeSearch')`, `t('clear')`)
+  calling `back()` and `clear()`, 44 px; type tabs a `tablist` of
+  `role="tab"` buttons with `aria-selected` (Luma moves between them with the
+  arrow keys: siblings in the tablist; the arrows go through the options
+  it shows, the open tab's); the input one element in every state
+  (drawn anew, it loses the focus and the keyboard); the input's font at
+  least 16 px (iOS zooms into a smaller one); the scrolling list ends with
+  `var(--lbx-cover)` of space and has it as `scroll-padding-bottom`, so an
+  option the keys bring into view is not under the keyboard or Safari's
+  bars (2.4.11).
 - **Listings**: filter groups as `fieldset` + `legend` (or `role="group"`
   with a name); native checkboxes, or links with `role="checkbox"` and
   `aria-checked` (never `aria-checked` on a plain link); chips named by what
@@ -345,7 +368,11 @@ drawer. The markup is the integration's, so:
   a `role="button"` div (Luma adds the keys) but a `<button>` is better.
 - **Tiles**: one link name (the picture `alt=""` when the title is in the same
   link); a struck-through old price says so (`<span class="lbx-sr-only">Was
-  </span>`), and the current one "Now" next to it.
+  </span>`), and the current one "Now" next to it. A variant group
+  (`r.variants`) is drawn inside the tile's own markup, not a different
+  template branch (focus in the tile stays on its link); shown on hover, it
+  shows on focus too (`:hover, :focus-within`), and sibling links have a
+  name and 24 px targets.
 - **Colour**: text at 4.5:1, states not by colour alone, 24 px targets; adopt
   the high-contrast mode (§4) for the colours your CSS sets.
 - **Don't** add `aria-live` to counts (Luma announces), set `tabindex="0"` on

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luigisbox/luma",
-  "version": "0.6.0",
+  "version": "0.7.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/api/ai.ts

@@ -8,10 +8,10 @@
 // Also runs in Node (the edge render service): there the
 // storefront origin is sent explicitly and nothing touches the DOM.
 
-import { PLP, RECOMMENDER, SEARCH } from '../core/features';
+import { PLP, RECOMMENDER, SEARCH, VARIANTS } from '../core/features';
 import { health } from '../core/health';
 import type { GlobalConfigType } from '../types';
-import type { Api, FacetData, Hit, Page } from '.';
+import type { Api, FacetData, Hit, Page, VariantGroup } from '.';
 import { fetchJson, TIMEOUT_MS, tokensFor, untilAborted, visitorId } from './token';
 
 export { untilAborted };
@@ -78,7 +78,8 @@ export const aiApi = (g: GlobalConfigType, origin?: string): Api => {
         return_fields: r.fields?.length ? r.fields : undefined,
       });
       const j = await post(r.endpoint, { channel_id: g.channelId, surface_id: r.surface }, body, signal);
-      return { hits: j.hits ?? [], total: j.total ?? j.total_approx ?? 0, guid: j.guid, cursor: j.next_page_cursor ?? null, status: j.pagination_status ?? 'exhausted' };
+      // `guid` is the deprecated name of `request_key` (it will change meaning).
+      return { hits: j.hits ?? [], total: j.total ?? j.total_approx ?? 0, guid: j.request_key ?? j.guid, cursor: j.next_page_cursor ?? null, status: j.pagination_status ?? 'exhausted' };
     },
 
     // A listing's and a recommender's (core/features.ts): not in a build without one.
@@ -106,5 +107,13 @@ export const aiApi = (g: GlobalConfigType, origin?: string): Api => {
             )
           ).hits ?? []
       : unbuilt,
+
+    // A listing's `variants` (core/features.ts): not in a build whose integration names none.
+    ...(VARIANTS
+      ? {
+          variants: async (ids: string[], key: string, fields: string[] | undefined, signal?: AbortSignal): Promise<Record<string, VariantGroup>> =>
+            (await post('variants', { channel_id: g.channelId }, compact({ ids, request_key: key, return_fields: fields?.length ? fields : undefined }), signal)).variants ?? {},
+        }
+      : {}),
   };
 };

package/src/api/index.ts

@@ -26,7 +26,7 @@ export interface Page {
   hits: Hit[];
   /** Exact when known, else the API's approximation. */
   total: number;
-  /** Identifies the result set; /facets takes it. */
+  /** Identifies the result set (the API's `request_key`); /facets and /variants take it. */
   guid: string;
   /** Cursor of the next page; null when there is none (see status). */
   cursor: string | null;
@@ -68,11 +68,21 @@ export interface RecoRequest {
   fields?: string[];
 }
 
+/** A product's variant group (/variants): the other members, and the group's size with the product. */
+export interface VariantGroup {
+  /** The other members of the group, by `@id`; at most 100. */
+  siblings: Hit[];
+  /** The group's size, the product included (0: not in the catalog). */
+  total: number;
+}
+
 export interface Api {
   search(r: ListingRequest, signal?: AbortSignal): Promise<Page>;
   /** Facets of a result set (its guid): values, no counts. */
   facets(guid: string, facets: { field: string; size?: number }[], signal?: AbortSignal): Promise<Record<string, FacetData>>;
   recommend(r: RecoRequest, signal?: AbortSignal): Promise<Hit[]>;
+  /** The variant groups of products of a result set (its key: `guid`), by `@id`: at most 200 ids. Built only for a listing's `variants`. */
+  variants?(ids: string[], key: string, fields: string[] | undefined, signal?: AbortSignal): Promise<Record<string, VariantGroup>>;
   /** Mint the browser token now, so the first request does not wait for it. */
   warm(): void;
 }

package/src/core/features.ts

@@ -18,6 +18,7 @@ declare const __LBX_CART__: boolean | undefined;
 declare const __LBX_DRAWER__: boolean | undefined;
 declare const __LBX_MENU__: boolean | undefined;
 declare const __LBX_DROPDOWN__: boolean | undefined;
+declare const __LBX_LIGHT_FULL_SCREEN__: boolean | undefined;
 declare const __LBX_AC_HOOKS__: boolean | undefined;
 declare const __LBX_ON_RENDER__: boolean | undefined;
 declare const __LBX_READ_QUERY__: boolean | undefined;
@@ -29,6 +30,7 @@ declare const __LBX_INITS__: boolean | undefined;
 declare const __LBX_EMPTY_VALUES__: boolean | undefined;
 declare const __LBX_PRERENDER_TYPING__: boolean | undefined;
 declare const __LBX_CONTENT_VISIBILITY__: boolean | undefined;
+declare const __LBX_VARIANTS__: boolean | undefined;
 declare const __LBX_NAMED_PRECONNECT_IMAGES__: boolean | undefined;
 declare const __LBX_NAMED_PREFETCH_FILTERS__: boolean | undefined;
 declare const __LBX_NAMED_PRELOAD__: boolean | undefined;
@@ -60,6 +62,8 @@ export const DRAWER = typeof __LBX_DRAWER__ === 'boolean' ? __LBX_DRAWER__ : tru
 export const MENU = typeof __LBX_MENU__ === 'boolean' ? __LBX_MENU__ : true;
 /** `data-lbx-dropdown` in any file of the integration: `<details>` menus in the listing's markup, closed from outside. */
 export const DROPDOWN = typeof __LBX_DROPDOWN__ === 'boolean' ? __LBX_DROPDOWN__ : true;
+/** `data-lbx-full-screen-input` in any file of the integration: a light-DOM autocomplete's own phone sheet (widgets/autocomplete, `fullScreen`). */
+export const LIGHT_FULL_SCREEN = typeof __LBX_LIGHT_FULL_SCREEN__ === 'boolean' ? __LBX_LIGHT_FULL_SCREEN__ : true;
 /** The autocomplete's `onOpen`, `onClose`, `onSelect`, `onReady` named in the integration's code. */
 export const AC_HOOKS = typeof __LBX_AC_HOOKS__ === 'boolean' ? __LBX_AC_HOOKS__ : true;
 /** A listing's `onRender` named in the integration's code. */
@@ -81,10 +85,13 @@ export const INITS = typeof __LBX_INITS__ === 'boolean' ? __LBX_INITS__ : true;
  * or code setting them): a key no file names keeps its default, as only
  * code naming it can change it. `emptyValues`, `prerenderWhileTyping` (or
  * `pageWhileTyping`: prerendering the search page typed for), `contentVisibility`.
+ * `variants` (a listing's products' variant groups, widgets/listing/variants.ts):
+ * the key in a folder's _config.ts only (the word alone is common).
  */
 export const EMPTY_VALUES = typeof __LBX_EMPTY_VALUES__ === 'boolean' ? __LBX_EMPTY_VALUES__ : true;
 export const PRERENDER_TYPING = typeof __LBX_PRERENDER_TYPING__ === 'boolean' ? __LBX_PRERENDER_TYPING__ : true;
 export const CONTENT_VISIBILITY = typeof __LBX_CONTENT_VISIBILITY__ === 'boolean' ? __LBX_CONTENT_VISIBILITY__ : true;
+export const VARIANTS = typeof __LBX_VARIANTS__ === 'boolean' ? __LBX_VARIANTS__ : true;
 /**
  * Server-rendered listings (Luigi's Box's server-side includes): adopting
  * and hydrating the server's markup. Declared, not found in the folders:

package/src/core/integration.ts

@@ -5,7 +5,7 @@
 // templates, translations and helpers the bundle would.
 
 import type { LumaApi, LumaConfigType, LumaInitType } from '../types';
-import { AUTOCOMPLETE, HOST_STYLES, INITS, PLP, RECOMMENDER, SEARCH, TRANSLATIONS } from './features';
+import { AUTOCOMPLETE, HOST_STYLES, INITS, PLP, RECOMMENDER, SEARCH, TRANSLATIONS, VARIANTS } from './features';
 
 export type Lazy<T> = Record<string, () => Promise<T>>;
 
@@ -106,9 +106,14 @@ export const loadConfig = async (files: Pick<IntegrationFiles, 'configs' | 'init
   if (config._global.disabled || !config._global.publishableKey || !config._global.channelId) return null;
   const apps = [AUTOCOMPLETE ? config.autocomplete : null, SEARCH ? config.search : null, PLP ? config.plp : null, ...(RECOMMENDER ? Object.values(config.recommenders ?? {}) : [])];
   if (INITS) for (const app of apps) if (app && !app.disabled && app.initialize && (await (app.initialize as any)(app, Luma)) === false) app.disabled = true;
+  // `variants` comes into a build from a folder's _config.ts only (build/vite.mjs
+  // featureDefines): set by an _init.ts, a build would leave it out unsaid.
+  if (import.meta.env.DEV && (config.search?.variants || config.plp?.variants) && !Object.values(files.configs).some((v: any) => v && typeof v === 'object' && 'variants' in v))
+    console.error("[lbx] variants: set it in a folder's _config.ts; a build leaves it out otherwise");
   // Anything a category page does not set is the search page's.
   const plp = PLP ? config.plp : null;
-  if (plp) for (const k of LISTING) if (plp[k] == null && config.search?.[k] != null) (plp as any)[k] = config.search[k];
+  // `variants` only where the integration names it (core/features.ts): not a key of every entry.
+  if (plp) for (const k of VARIANTS ? [...LISTING, 'variants' as const] : LISTING) if (plp[k] == null && config.search?.[k] != null) (plp as any)[k] = config.search[k];
   if (SEARCH || PLP) for (const l of [config.search, config.plp]) if (l && l.reserveSelector == null && l.anchor) l.reserveSelector = [l.anchor].flat()[0];
   return config;
 };

package/src/types.ts

@@ -16,6 +16,14 @@ export interface Result {
   type: string;
   a: Hit;
   c: Record<string, any>;
+  /**
+   * A listing's `variants`: the other products of this one's variant group
+   * (collapsed into it by the surface), as results (`siblings`, by `@id`, at
+   * most 100), and the group's size with this one (`total`). Undefined until
+   * Luigi's Box has answered (the tile is drawn again then), on the server,
+   * and outside listings.
+   */
+  variants?: { siblings: Result[]; total: number };
 }
 
 /**
@@ -237,6 +245,23 @@ export interface AutocompleteConfigType extends AppConfig<AutocompleteConfigType
   dom?: 'shadow' | 'light';
   hostClass?: string;
   hostId?: string;
+  /**
+   * `dom: 'light'`: the autocomplete full screen on a phone, with the
+   * integration's own markup. `true` where the house design is full screen
+   * (a viewport up to 600 px, or a short touch screen), or a media query of
+   * the site's own (`'(max-width: 767px)'`). There, focus or a tap on the
+   * site's input opens it with what the input holds (templates get
+   * `fullScreen: true`, `state: 'idle'` until a phrase is long enough); the
+   * template renders its own input, marked `data-lbx-full-screen-input`,
+   * which takes the focus and is the combobox there.
+   * The integration's CSS places it, keyed on `[data-lbx-full-screen]` while open
+   * (`inset: 0; top: var(--lbx-top, 0px)`): Luma sets no box on it, only `--lbx-top` (the
+   * visual viewport's top) and `--lbx-cover` (what Safari's bars and the
+   * keyboard cover of its bottom: the list's end space and
+   * `scroll-padding-bottom`). Off by default: a light-DOM dropdown
+   * on a phone stays a dropdown. The house design is always full screen there.
+   */
+  fullScreen?: boolean | string;
   /**
    * What the dropdown lines up with (its left edge and width, just below it).
    * By default the visible search field: the input when it draws its own
@@ -297,6 +322,21 @@ export interface ListingConfigType {
   sorts: string[];
   /** return_fields for the tiles (default: the surface's). */
   fields?: string[];
+  /**
+   * The variant groups of the products shown, for a surface that collapses
+   * them (one result per group: a shoe in eight sizes is one tile): each
+   * tile's result gets the group's other products as `r.variants` (their
+   * `fields`, e.g. the in-stock sizes on hover or focus). Asked from Luigi's
+   * Box once per page of results, as soon as it is here (a page restored on
+   * Back has them with it): the tiles show without them first and are drawn
+   * again when they come, never waited for; without them (an error) they
+   * stay as they are. A tile keeps its box with and without them (a reserved
+   * row, an overlay, on hover or focus): a tile growing when they come moves
+   * the rows below. `fields`: return_fields of the group's products (keep it
+   * to what the tiles show). Off by default; set it in `_config.ts` (the
+   * build includes it only where a folder's `_config.ts` does).
+   */
+  variants?: { fields: string[] };
   /** Always-on filters (e.g. what this storefront may show), AND-ed with the shopper's. */
   baseFilters?: FilterNode;
   /**
@@ -766,11 +806,24 @@ export interface AutocompleteScope extends Helpers {
    * input reaches it (the options stay out of the Tab order).
    */
   allHref: string;
-  // --- The house design (dom: 'shadow'). -------
-  /** 'idle' (the phone sheet before a phrase is long enough), 'results', 'empty' (every type answered nothing). */
+  /** 'idle' (full screen, before a phrase is long enough), 'results', 'empty' (every type answered nothing). */
   state: 'idle' | 'results' | 'empty';
-  /** The phone sheet (full screen, viewport up to 600 px) rather than the panel under the input. */
-  sheet: boolean;
+  /** Full screen on a phone (a light-DOM integration's with the config's `fullScreen`) rather than the dropdown under the input. */
+  fullScreen: boolean;
+  /** Full screen: the tabs, one per type with results (products first); `select()` shows it. The arrow keys go through the open tab's options. */
+  tabs: { kind: string; label: string; selected: boolean; select: () => void }[];
+  /**
+   * Full screen: its own input (`data-lbx-full-screen-input`): its value, placeholder
+   * and name (the site's input's); `clear()` empties it (focus stays in it);
+   * `back()` closes it as Escape and the browser's Back do, the site's
+   * input back to what it held when it opened.
+   */
+  value: string;
+  placeholder: string;
+  inputLabel: string;
+  clear: () => void;
+  back: () => void;
+  // --- The house design (dom: 'shadow'). -------
   /** The panel is at least 1000 px wide: the top product has its own column. */
   wide: boolean;
   /** Query suggestions (pills). */
@@ -781,8 +834,6 @@ export interface AutocompleteScope extends Helpers {
   hero: { r: Result; i: number } | null;
   /** The products after it (at most 6 on the panel). */
   products: { r: Result; i: number }[];
-  /** The phone sheet's tabs: one per type with results (products first); `select()` shows it. */
-  tabs: { kind: string; label: string; selected: boolean; select: () => void }[];
   /** "No results": phrases to try (options), links to browse (options), fallback products (options), the help box. */
   empty: { tries: { r: Result; i: number }[]; browse: { r: Result; i: number }[]; fallback: { r: Result; i: number }[]; help: { title: string; phone: string; tel: string; hours: string } | null };
   /** Pointer over an option: it becomes the selection (the keyboard's too). */
@@ -796,12 +847,6 @@ export interface AutocompleteScope extends Helpers {
   field: (r: Result, name: 'availability' | 'category' | 'oldPrice' | 'meta' | 'price' | 'badge') => string;
   /** The top product's spec rows (`hero.specFields`, at most 4). */
   specs: (r: Result) => { label: string; value: string }[];
-  /** The phone sheet: its input's value, placeholder and name (the site's input's), clearing it, and its back button. */
-  value: string;
-  placeholder: string;
-  inputLabel: string;
-  clear: () => void;
-  back: () => void;
 }
 export interface AutocompleteResultScope extends AutocompleteScope {
   r: Result;

package/src/widgets/autocomplete/index.ts

@@ -18,7 +18,7 @@ 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 { AC_HOOKS, ANALYTICS, LIGHT_FULL_SCREEN, QUERY_URL } from '../../core/features';
 import { mark, reportError } from '../../core/health';
 import { modalOf } from '../../core/own';
 import { byName, view } from '../../core/templates';
@@ -268,7 +268,8 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
   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;
+    // A light-DOM sheet's list is the host: whichever of its elements scrolls.
+    if (swipe && (LIGHT_FULL_SCREEN && light ? [...scrolled].some((el) => swipe!.list.contains(el)) : scrolled.has(swipe.list))) swipe.ours = true;
     for (const el of scrolled) if (el.isConnected) el.scrollTop = 0;
     scrolled.clear();
   };
@@ -303,8 +304,13 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
     }
   };
 
-  /** The house design's phone sheet applies here (shadow DOM, a phone's viewport). */
-  const phone = () => !light && typeof matchMedia === 'function' && matchMedia(SHEET_MEDIA).matches;
+  /**
+   * Where the phone sheet applies (a media query): the house design's on a
+   * phone's viewport; a light-DOM integration's only with `fullScreen` (its own
+   * markup: `true` on a phone's viewport, or its own query), never without.
+   */
+  const sheetMedia = !light ? SHEET_MEDIA : !LIGHT_FULL_SCREEN ? 'not all' : ac.fullScreen === true ? SHEET_MEDIA : ac.fullScreen || 'not all';
+  const phone = () => typeof matchMedia === 'function' && matchMedia(sheetMedia).matches;
 
   /** Our shadow root on `el` with our CSS; the box templates render into. */
   const shadowBox = (el: HTMLElement, ...before: Node[]) => {
@@ -334,7 +340,9 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
       // The UA popover's height: fit-content makes a fixed panel the site pins
       // with top + bottom (a full-height sheet on phones) grow past the screen
       // instead of scrolling. Zero specificity: any site rule still wins.
-      setCss('ac:light', ':where([data-lbx="ac-overlay"]) { height: auto; }');
+      // Its width and margin too: a phone sheet the site pins with `inset: 0`
+      // fills the screen, not fit-content and centred (the dropdown's width is inline).
+      setCss('ac:light', ':where([data-lbx="ac-overlay"]) { height: auto; width: auto; margin: 0; }');
       ctx.styles.forEach((c, i) => setCss(`itg:autocomplete:${i}`, c));
       box = host;
       host.append(live.el); // the templates render after it
@@ -412,8 +420,10 @@ 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();
+        if (!swipe || !(LIGHT_FULL_SCREEN && light ? swipe.list.contains(el) : swipe.list === el)) return;
+        if (swipe.ours) swipe.ours = false;
+        // A light-DOM sheet's sideways band (its tabs) scrolls in it too: only a list that went down.
+        else if ((!LIGHT_FULL_SCREEN || !light || el.scrollTop > 0) && (!swipe.cancelled || performance.now() - swipe.cancelled < SWIPE_SCROLL_MS)) putKeyboardAway();
       },
       { capture: true, passive: true },
     );
@@ -424,11 +434,13 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
     // 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.
+    // address bar above it, the sheet kept half the screen. A light-DOM
+    // sheet: its list is the host (whichever of its elements scrolls), and
+    // focus goes to the host.
     const putKeyboardAway = () => {
       swipe = null;
       if (!mirror || focused() !== mirror) return;
-      const panel = mirror.closest<HTMLElement>('.sheet[tabindex]');
+      const panel = mirror.closest<HTMLElement>('.sheet[tabindex]') ?? (LIGHT_FULL_SCREEN && light ? host : null);
       if (panel) panel.focus({ preventScroll: true });
       else mirror.blur(); // an integration's own sheet template
     };
@@ -439,7 +451,8 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
         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;
+        const path = e.composedPath();
+        const list = LIGHT_FULL_SCREEN && light ? (mirror && path.includes(mirror) ? undefined : host!) : (path.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 },
@@ -534,6 +547,8 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
    */
   /** What Safari's bars and the keyboard cover of the sheet (px, --lbx-cover), -1 while it is not open. */
   let cover = -1;
+  /** A light-DOM sheet's top (px, --lbx-top: the visual viewport's), -1 while it is not open. */
+  let sheetTop = -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>) => {
@@ -548,14 +563,19 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
       // 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.
+      // A light-DOM sheet is placed by the integration's CSS (`position:
+      // fixed; inset: 0; top: var(--lbx-top)`): only that top and what is
+      // covered (--lbx-cover) are ours.
       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 = `${full}px`;
+      if (!LIGHT_FULL_SCREEN || !light) {
+        s.top = `${top}px`;
+        s.left = `${Math.round(vv?.offsetLeft ?? 0)}px`;
+        s.width = `${Math.round(vv?.width ?? innerWidth)}px`;
+        s.height = `${full}px`;
+      } else if (top !== sheetTop) s.setProperty('--lbx-top', `${(sheetTop = top)}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
@@ -630,6 +650,8 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
     aria?.restore();
     aria = null;
   };
+  /** Option `i`'s element, in the root the options render into. */
+  const rowOf = (i: number) => (box.getRootNode() as Document | ShadowRoot).getElementById(idOf(i));
   /**
    * The selected row (the screen reader's focus stays on the input). An id
    * reference resolves only in the input's own tree, never across a shadow
@@ -648,7 +670,7 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
   const markActive = (say = true) => {
     const all = active === ALL ? allLink() : null;
     if (all && !all.id) all.id = idOf(ALL);
-    const row = all ?? (active >= 0 ? (box.getRootNode() as Document | ShadowRoot).getElementById(idOf(active)) : null);
+    const row = all ?? (active >= 0 ? rowOf(active) : null);
     if (sheet && mirror) {
       if (row) mirror.setAttribute('aria-activedescendant', row.id);
       else mirror.removeAttribute('aria-activedescendant');
@@ -811,7 +833,8 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
   const idle = (f: () => void) => afterFrame(() => (typeof requestIdleCallback === 'function' ? requestIdleCallback(f, { timeout: 300 }) : setTimeout(f, 0)));
 
   /**
-   * The phone sheet (house design): full screen over the page,
+   * The phone sheet (the house design's, a light-DOM integration's with
+   * `fullScreen`: its markup, placed by its CSS): full screen over the page,
    * opened when the site's input gets focus. Its own input takes the focus
    * at once (in the tap's task: iOS shows its keyboard only for a focus in
    * the gesture) with what the site's input holds; it is the combobox there.
@@ -826,9 +849,20 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
       tab = '';
       before = i.value;
       place();
-      sampleTokens(i, i);
-      // Below the visible part, its background (position).
-      host!.style.background = 'var(--lbx-c-bg, var(--lbx-bg))';
+      if (LIGHT_FULL_SCREEN && light) {
+        // The dropdown's inline box (inset: auto, its top, left and width) would beat the integration's CSS.
+        // Focusable: a swipe's keyboard put away leaves the focus here (putKeyboardAway), named as the house sheet's panel.
+        host!.style.inset = host!.style.width = '';
+        host!.tabIndex = -1;
+        host!.setAttribute('role', 'group');
+        host!.setAttribute('aria-label', labelOf(i));
+        // What its CSS keys on (`[data-lbx-full-screen]`): where the sheet opens is Luma's media query, a phone in landscape too.
+        host!.setAttribute('data-lbx-full-screen', '');
+      } else {
+        sampleTokens(i, i);
+        // Below the visible part, its background (position).
+        host!.style.background = 'var(--lbx-c-bg, var(--lbx-bg))';
+      }
       // What the site's input holds now, not what the sheet's held when it last
       // closed (letters typed into the site's input before the hand-off, a
       // value the site's page set since).
@@ -845,7 +879,7 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
       cancelAnimationFrame(raf);
       position();
       render(); // with what the site's input holds
-      mirror = (box as ShadowRoot | HTMLElement).querySelector<HTMLInputElement>('[data-lbx-sheet-input]');
+      mirror = box.querySelector<HTMLInputElement>('[data-lbx-full-screen-input]');
     }
     if (mirror) {
       mirror.focus();
@@ -890,6 +924,8 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
       then?.();
       return;
     }
+    // Our Back already on its way (a second focus outside, Escape twice): one Back. Review: two left the page in Chromium.
+    if (afterBack) return;
     const done = then ?? (() => {});
     afterBack = done;
     pendingReason = reason;
@@ -928,7 +964,12 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
       entry = false; // left in history (the same URL) unless Back took it
       setCss('ac:sheet', null);
       host!.style.height = '';
-      host!.style.background = 'transparent';
+      if (LIGHT_FULL_SCREEN && light) {
+        host!.style.inset = 'auto'; // the dropdown's again (position sets its top and left)
+        host!.style.removeProperty('--lbx-top');
+        sheetTop = -1;
+        for (const a of ['role', 'aria-label', 'data-lbx-full-screen']) host!.removeAttribute(a);
+      } else host!.style.background = 'transparent';
       host!.style.removeProperty('--lbx-cover');
       cover = -1;
       host!.removeAttribute('data-lbx-short');
@@ -946,6 +987,8 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
     if (AC_HOOKS) hook('onClose', ac.onClose, reason);
   };
 
+  /** The site's input's name: the sheet's input's (and a light-DOM sheet's own, its panel's). */
+  const labelOf = (i: HTMLInputElement | null) => i?.getAttribute('aria-label') || i?.placeholder || t('label');
   /** The sheet input's value the last render drew (its clear button). */
   let drawnValue = '';
   /** Rows as templates get them: the result and its index in `items`. */
@@ -972,7 +1015,8 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
     // The arrow keys' order: pills, the lists in config order, the
     // top product, the products in reading order; in the sheet, the pills and
     // the open tab's options; with no results, phrases to try, links, picks.
-    // A light-DOM integration's own markup keeps the config order.
+    // A light-DOM integration's own markup keeps the config order (its sheet:
+    // of the options its markup shows, read at the key: step).
     const phrases = byType('query');
     order = light
       ? rows.map((x) => x.i)
@@ -1000,7 +1044,7 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
       submitAll: () => submitAll(),
       allHref: searchHref(input, sheet ? (mirror?.value ?? '') : undefined),
       state,
-      sheet,
+      fullScreen: sheet,
       wide,
       phrases,
       lists,
@@ -1030,7 +1074,7 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
           .slice(0, 4),
       value,
       placeholder: input?.placeholder ?? '',
-      inputLabel: input?.getAttribute('aria-label') || input?.placeholder || t('label'),
+      inputLabel: labelOf(input),
       clear: () => {
         if (!mirror) return;
         mirror.value = '';
@@ -1419,7 +1463,11 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
    * other way round.
    */
   const step = (by: 1 | -1) => {
-    const stops = !sheet && allLink() ? [...order, ALL] : order;
+    let stops = !sheet && allLink() ? [...order, ALL] : order;
+    // A light-DOM sheet: the options its markup shows (the open tab's, drawn alone or the others hidden by
+    // its CSS; all of them without tabs), read in response to the key. Review: a template without tabs had
+    // its other types' options out of the arrows' reach (the house sheet's open-tab order).
+    if (LIGHT_FULL_SCREEN && light && sheet) stops = stops.filter((i) => rowOf(i)?.getClientRects().length);
     const n = stops.length + 1; // positions: -1 (back in input) .. stops.length-1
     const at = stops.indexOf(active);
     const next = ((at + by + 1 + n) % n) - 1;
@@ -1539,6 +1587,11 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
   };
 
   const onFocusIn = once<'focusin'>((_, target) => {
+    // Focus gone from the open sheet to the page it covers (Tab past its last
+    // control, Shift+Tab from its first, iOS's next-field arrow): closed, the
+    // focus seen. Review: Tab left it on a hidden control, Escape not heard.
+    // Not the site's input (the tap's hand-off), nor <body> (the keyboard put away).
+    if (sheet && open && target instanceof Element && target !== input && !inOverlay(target)) return leave('blur');
     if (!matches(target) || quietFocus) return;
     engage(target);
   });

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

@@ -27,7 +27,7 @@ export const showAll = (s: AutocompleteScope) =>
     : html`<button type="button" class="all" data-lbx-part="ac-all" data-lbx-all @click=${() => s.submitAll()}>${s.t('showAllProducts')}${ARROW}</button>`;
 
 export default (s: AutocompleteScope) => {
-  if (s.sheet) return s.include('autocomplete-sheet');
+  if (s.fullScreen) return s.include('autocomplete-sheet');
   const opt = (row: { r: any; i: number }, as: string) => s.include('autocomplete-result-default', { r: row.r, i: row.i, as });
   const key = (row: { r: any; i: number }) => `${row.i}:${row.r.id}`;
   const list = s.phrases.length > 0 || s.lists.length > 0;

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

@@ -16,7 +16,7 @@ export default (s: AutocompleteScope) => {
   const opt = (row: { r: any; i: number }, as: string) => s.include('autocomplete-result-default', { r: row.r, i: row.i, as });
   const helpBox = help
     ? html`<div class="help">
-        ${s.sheet
+        ${s.fullScreen
           ? html`<span class="help-text"><span class="help-title">${help.title}</span>${help.hours ? html`<span class="help-hours">${help.hours}</span>` : nothing}</span>
               <a class="call" href=${`tel:${help.tel}`}><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="6" y="2" width="12" height="20" rx="2.5"></rect><path d="M11 18h2"></path></svg>${s.t('call')}<span class="sr"> ${help.phone}</span></a>`
           : html`<span class="phone-ico" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="2" width="12" height="20" rx="2.5"></rect><path d="M11 18h2"></path></svg></span>
@@ -43,9 +43,9 @@ export default (s: AutocompleteScope) => {
       </div>
       ${fallback.length
         ? html`<div class="strip">
-            <div class="strip-head"><span class="note-wrap"><span class="f-title" id="lbx-ac-g-fallback">${s.t('fallbackTitle')}</span><span class="f-note" id="lbx-ac-g-fallback-note">${s.t('fallbackNote')}</span></span>${s.sheet ? nothing : POWERED(s.t)}</div>
+            <div class="strip-head"><span class="note-wrap"><span class="f-title" id="lbx-ac-g-fallback">${s.t('fallbackTitle')}</span><span class="f-note" id="lbx-ac-g-fallback-note">${s.t('fallbackNote')}</span></span>${s.fullScreen ? nothing : POWERED(s.t)}</div>
             <div class="fb" role="listbox" id="lbx-ac-fallback" aria-labelledby="lbx-ac-g-fallback lbx-ac-g-fallback-note">${fallback.map((x) => opt(x, 'compact'))}</div>
-            ${s.sheet ? POWERED(s.t) : nothing}
+            ${s.fullScreen ? POWERED(s.t) : nothing}
           </div>`
         : html`<div class="e-foot">${POWERED(s.t)}</div>`}
     </div>

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

@@ -38,7 +38,7 @@ export default (s: AutocompleteScope) => {
         <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>
         </button>
-        <input class="sh-input" data-lbx-sheet-input type="text" enterkeyhint="search" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false"
+        <input class="sh-input" data-lbx-full-screen-input type="text" enterkeyhint="search" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false"
           role="combobox" aria-autocomplete="list" aria-expanded=${controls ? 'true' : 'false'} aria-controls=${controls || nothing}
           aria-label=${s.inputLabel} placeholder=${s.placeholder} .value=${s.value} />
         ${s.value

package/src/widgets/listing/element.ts

@@ -15,7 +15,7 @@
 
 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 { 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, VARIANTS } from '../../core/features';
 import { mark, reportError } from '../../core/health';
 import { claim } from '../../core/reconciler';
 import { afterLayout, rememberHeight } from '../../core/hold';
@@ -38,11 +38,12 @@ 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, 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 type { Page, VariantGroup } from '../../api';
+import { atWidth, CV_CSS, DIM_MS, LOADING_CSS, listingData, ssrStateId, withGroups, viewport, type ListingView, type SsrState } from './view';
 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';
+import { askVariants, groupsOf, seedGroups, stashGroups } from './variants';
 
 /** 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;
@@ -108,7 +109,8 @@ 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, SEARCH ? quickChannel(route.id) : undefined);
+    // `variants`: the first page's groups asked for as soon as it is here, with its facets' request.
+    const p = listingQuery(ctx.api, ctx.global, cfg, route, q, signal, pre, onProducts, SEARCH ? quickChannel(route.id) : undefined, VARIANTS && cfg.variants ? (f) => void askVariants(ctx.api, cfg, f, signal) : 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;
@@ -233,6 +235,8 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
     else if (stashed) {
       seeded.set(pageKey(location.href), stashed.query);
       cache.set(keyOf(stashed.query), stashed.result);
+      // `variants`: the groups it was left with, drawn with it (nothing asked).
+      if (VARIANTS) seedGroups(stashed.result, stashed.groups);
       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.
@@ -1187,7 +1191,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       this.leftAt = Math.round(scrollY);
       // The browser's own restoration off for this entry: Luma places the page after its render (holdScroll).
       const sr = holdScroll();
-      if (writeStash(location.href, { kind: 'back', route: route.id, query: this.lastQ, result: { ...this.last, quickPending: undefined }, scroll: scrollSpot(this, a), sr })) mark(`${route.id} stashed for back`);
+      if (writeStash(location.href, { kind: 'back', route: route.id, query: this.lastQ, result: { ...this.last, quickPending: undefined }, scroll: scrollSpot(this, a), sr, groups: VARIANTS && cfg.variants ? stashGroups(this.last) : undefined })) mark(`${route.id} stashed for back`);
       else releaseScroll();
     }
 
@@ -1414,6 +1418,8 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       if (res !== this.last || q !== this.lastQ || !hasMore(res) || nextOf.has(res)) return;
       mark(`${route.id} prefetch page ${res.page + 1}`);
       more(q, res).catch(() => {}); // a failed one: the click asks again
+      // `variants`: its products' groups too (more() asks once), so "show more" draws them with its tiles.
+      if (VARIANTS && cfg.variants) more(q, res).then((r) => askVariants(ctx.api, cfg, r, this.ctrl?.signal), () => {});
     }
 
     private render(q: Query, res: ListingResult, url: URL) {
@@ -1579,7 +1585,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       const self = this;
       return {
         ...ctx.helpers,
-        ...listingData(ctx, route, url, q, res, this.message, this.view()),
+        ...listingData(ctx, route, url, q, res, this.message, VARIANTS && cfg.variants ? { ...this.view(), variants: (this.groups$?.res === res ? this.groups$ : (this.groups$ = { res, map: groupsOf(res) })).map } : this.view()),
         facetsOpen: matchMedia('(min-width: 768px)').matches,
         // actions
         go: (link: Link | null) => (e: Event) => {
@@ -1628,6 +1634,9 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
     }
 
     private draw(q: Query, res: ListingResult, url: URL) {
+      // `variants`: the groups of these products, asked for now (those not
+      // asked yet), never waited for: finish() draws them when they land.
+      if (VARIANTS && cfg.variants) askVariants(ctx.api, cfg, res, this.ctrl?.signal);
       // A first render in steps of these same products (shown before their
       // facets): it goes on with the facets, not a render of them all at once.
       if (this.stepping?.hits === res.hits) return this.stepping.take(q, res, url);
@@ -1961,6 +1970,8 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
     }
     /** Tiles in the viewport (an IntersectionObserver), whether the list's last one is above it, the grid's columns (read with layout clean). */
     private seen = new Set<Element>();
+    /** `variants`: the groups the last scope of a result was built with (its map grows in steps as they land: finish()). */
+    declare private groups$: { res: ListingResult; map?: ReadonlyMap<string, VariantGroup> } | undefined;
     private past = false;
     private cols = 1;
     private io: IntersectionObserver | null = null;
@@ -1992,6 +2003,52 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       this.drawn$ = { hits: res.hits, n: res.hits.length };
       this.lastQ = q;
       this.afterA11y();
+      // `variants`: drawn again once the groups of these products asked for
+      // have landed (now: during a render in steps), if they are still shown
+      // (a later render of other products draws its own).
+      if (VARIANTS && cfg.variants)
+        askVariants(ctx.api, cfg, res, this.ctrl?.signal).then(() => {
+          const got = groupsOf(res);
+          const had = this.groups$?.map;
+          if (!got || had === got) return;
+          // In steps, as a shown listing's re-render (each tile whose group
+          // landed runs its template again): the tiles in view first, then
+          // as many a frame as BUDGET holds by what one cost.
+          const tiles = this.querySelector('[data-lbx-list]')?.children;
+          const ids = res.hits.map((h, i) => [tiles && this.seen.has(tiles[i]) ? 0 : 1, h['@id']] as const).filter(([, id]) => got.has(id) && had?.get(id) !== got.get(id)).sort((a, b) => a[0] - b[0]).map(([, id]) => id);
+          const N = res.hits.length;
+          let n = 0;
+          let per = this.tileMs || 3;
+          let frames = 0;
+          const step = () => {
+            if (this.last !== res || this.drawn$?.hits !== res.hits || this.groups$?.res !== res || !this.drawn) return;
+            // STEP tiles first, to measure one (a tile drawn anew with its group
+            // costs what a new tile does: the tiles' cost learnt from a render
+            // in steps was 0.3 ms for 2 ms tiles, one step of all of them); then
+            // as a re-render in steps: as many as BUDGET holds with the tiles
+            // there run again, not even one, a third of the rest.
+            const room = Math.floor((BUDGET - RERUN * per * N) / per);
+            const k = Math.min(ids.length - n, !frames ? STEP : room >= 1 ? room : Math.ceil((ids.length - n) / 3));
+            const map = n + k >= ids.length ? got : new Map([...(this.groups$.map ?? []), ...ids.slice(n, n + k).map((id) => [id, got.get(id)!] as const)]);
+            n += k;
+            this.groups$ = { res, map };
+            // A tile's template may draw other markup with its group: focus in one replaced goes to the region, not the page's start.
+            const at = document.activeElement;
+            this.focusWas = at && at !== this && this.contains(at) ? at : null;
+            const t0 = performance.now();
+            // Only the results change: the scope is not built again (as setUi). A
+            // template throwing on the groups hands the page back, as a render does, and no step follows.
+            this.guarded(() => {
+              this.renderOrRebuild((this.drawn = { ...this.drawn!, results: res.hits.map(withGroups(ctx.result, map)) }));
+              this.afterA11y();
+              per = Math.max(0.5, (performance.now() - t0) / (k + RERUN * (N - k)));
+              frames++;
+              if (n < ids.length) afterFrame(step);
+              else mark(`${route.id} variants in ${frames} frames`);
+            });
+          };
+          step();
+        });
       const info = { route: route.id, query: q.title, total: res.total, shown: res.hits.length, page: res.page, url };
       // A prerendered page (a search typed on the page before) is not seen
       // yet: the hook (titles, and often the site's analytics) runs when it

package/src/widgets/listing/query.ts

@@ -10,7 +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';
+import { EMPTY_VALUES, VARIANTS } 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). */
@@ -156,9 +156,11 @@ export const firstRequest = (g: GlobalConfigType, cfg: ListingConfig, route: Rou
  * need their result set's guid and so a request after them. `onQuick`: the
  * quick types never wait for (where they do not sit above the products):
  * the result comes without them if they are not here yet (`quickPending`),
- * and they land in it later, `onQuick` called with it then.
+ * and they land in it later, `onQuick` called with it then. `onFirst`: the
+ * first page as soon as it is here, with the facets' request (`variants`:
+ * its products' groups are asked for then, not after the facets).
  */
-export const listingQuery = async (api: Api, g: GlobalConfigType, cfg: ListingConfig, route: Route, q: Query, signal?: AbortSignal, pre?: Page, onProducts?: (r: ListingResult) => void, onQuick?: (r: ListingResult) => void): Promise<ListingResult> => {
+export const listingQuery = async (api: Api, g: GlobalConfigType, cfg: ListingConfig, route: Route, q: Query, signal?: AbortSignal, pre?: Page, onProducts?: (r: ListingResult) => void, onQuick?: (r: ListingResult) => void, onFirst?: (p: Page) => void): Promise<ListingResult> => {
   // A range selection over a field that may not be a numeric one (a page's
   // own facet, e.g. a parameter holding its numbers as text): if the API facets
   // it as terms, the range is the values within it, from the values of the
@@ -259,6 +261,8 @@ export const listingQuery = async (api: Api, g: GlobalConfigType, cfg: ListingCo
       : {};
   // Optional too: without them no value shows as empty.
   const all = EMPTY_VALUES && cfg.emptyValues && narrowed ? allOf().catch(() => undefined) : undefined;
+  // Extras after what the listing waits for (its facets' requests are out).
+  if (VARIANTS) onFirst?.(first);
   // 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 =

package/src/widgets/listing/stash.ts

@@ -20,6 +20,7 @@
 
 import { navigation, specKey, STASH, stashFits, stashKey } from '../../core/stash';
 import { pageKey } from '../../core/page';
+import { VARIANTS } from '../../core/features';
 import type { ListingResult } from './query';
 import { queryKey, type Query } from './state';
 import type { Spot } from './instant';
@@ -39,6 +40,8 @@ export interface Stash {
   scroll?: Spot;
   /** back: Luma turned the browser's own scroll restoration off for the entry left (`history.scrollRestoration`): back on once restored. */
   sr?: 1;
+  /** back, `variants`: the groups of the products shown (./variants.ts), drawn with them. Storage: checked when read. */
+  groups?: unknown;
   /** Read only: too old to render from, where the shopper was is all that is used. */
   stale?: true;
 }
@@ -114,9 +117,15 @@ export const removeStash = (key: string) => {
 };
 
 /** Under the page's URL (`back`) or the query (`spec`). false: too big, or storage refused it. */
-export const writeStash = (href: string, s: Omit<Stash, 'v' | 'at'>) => {
+export const writeStash = (href: string, s: Omit<Stash, 'v' | 'at'>) =>
+  // Too big with the products' variant groups (extras): stashed without them rather than not at all.
+  put(href, s) || (VARIANTS ? !!s.groups && put(href, { ...s, groups: undefined }) : false);
+
+const put = (href: string, s: Omit<Stash, 'v' | 'at'>) => {
   try {
-    const json = JSON.stringify({ at: Date.now(), v: 1, kind: s.kind, ttl: s.ttl, route: s.route, query: s.query, result: s.result, scroll: s.scroll, sr: s.sr });
+    // `at` and `kind` first: pruning reads them without parsing the rest.
+    const { kind, ...rest } = s;
+    const json = JSON.stringify({ at: Date.now(), v: 1, kind, ...rest });
     if (json.length > MAX_CHARS) return false;
     const key = s.kind === 'spec' ? specKey(s.route, s.query.q ?? '') : stashKey(href);
     const others = entries(key);

package/src/widgets/listing/variants.ts

@@ -0,0 +1,111 @@
+// `variants` (a listing's config): the variant groups of the products a
+// listing shows, for a surface that collapses each group into one result
+// (/variants). Asked per result set (its request_key, `guid`) for the
+// products not asked yet: a page's as soon as it is here (the first, each
+// "show more", the pages of a Back restore without a stash of them at
+// once), at most MAX_IDS a request. Never waited for: the listing draws its
+// tiles, and again when the groups land (widgets/listing/element.ts).
+
+import type { Api, VariantGroup } from '../../api';
+import { reportError } from '../../core/health';
+import { lru } from '../../core/storage';
+import type { ListingConfig, ListingResult } from './query';
+
+/** /variants takes at most this many ids. */
+const MAX_IDS = 200;
+/** A failed request's products are asked again by a render this much later, not by every render in an outage. */
+const RETRY_MS = 5000;
+
+/** What a request needs of a result: its result set and its products (a page, or the pages loaded). */
+type Products = Pick<ListingResult, 'guid' | 'hits'>;
+
+interface Groups {
+  /** Ids asked for: answered, in flight, or failed less than RETRY_MS ago. */
+  asked: Set<string>;
+  /** The groups answered, by id: a new map whenever some land (a render compares it). */
+  got: ReadonlyMap<string, VariantGroup>;
+  /** Requests in flight. */
+  out: Set<Promise<void>>;
+}
+/** By result set (a request_key names one listing's request: its fields too), for the page's life (as the listing's result cache). */
+const sets = lru<Groups>(30, Infinity);
+const setOf = (guid: string) => {
+  let s = sets.get(guid);
+  if (!s) sets.set(guid, (s = { asked: new Set(), got: new Map(), out: new Set() }));
+  return s;
+};
+/**
+ * A group's shape, from the API or from storage: nothing else is kept, nothing
+ * coerced. Each sibling becomes a result once a template reads it (a hit's
+ * `@id` at least); a total `Number()` would throw on (`{ toString: null }`) is
+ * none. Anything else: no group, the tile as without one.
+ */
+const group = (g: any): VariantGroup | null =>
+  Array.isArray(g?.siblings) && Number.isFinite(g.total) && g.siblings.every((s: any) => typeof s?.['@id'] === 'string') ? { siblings: g.siblings, total: g.total } : null;
+
+/** The groups of `res`'s products answered so far: the same map until more land. */
+export const groupsOf = (res: Products) => sets.get(res.guid)?.got;
+
+/**
+ * Asks for the groups of `res`'s products not asked yet (all asked: no
+ * request). Settles once every request of its result set in flight has, and
+ * never rejects: what landed is in groupsOf(). An aborted request's
+ * products can be asked again at once (a host re-creating the listing
+ * renders it again in the same task), a failed one's (reported) after
+ * RETRY_MS.
+ */
+export const askVariants = (api: Api, cfg: ListingConfig, res: Products, signal?: AbortSignal): Promise<unknown> => {
+  if (!cfg.variants || !res.guid) return Promise.resolve();
+  const s = setOf(res.guid);
+  const ids = signal?.aborted ? [] : res.hits.map((h) => h['@id']).filter((id) => !s.asked.has(id));
+  for (let i = 0; i < ids.length; i += MAX_IDS) {
+    const chunk = ids.slice(i, i + MAX_IDS);
+    for (const id of chunk) s.asked.add(id);
+    const forget = () => chunk.forEach((id) => s.asked.delete(id));
+    signal?.addEventListener('abort', forget, { once: true });
+    const p: Promise<void> = api
+      .variants!(chunk, res.guid, cfg.variants.fields, signal)
+      .then(
+        (got) => {
+          const next = new Map(s.got);
+          for (const id of chunk) {
+            const g = group(got[id]);
+            if (g) next.set(id, g);
+          }
+          s.got = next;
+        },
+        (e) => {
+          if ((e as Error)?.name === 'AbortError') return;
+          reportError('variants', e);
+          setTimeout(forget, RETRY_MS);
+        },
+      )
+      .finally(() => (s.out.delete(p), signal?.removeEventListener('abort', forget)));
+    s.out.add(p);
+  }
+  return Promise.all(s.out);
+};
+
+/** The groups landed of `res`'s products, for its Back stash: the restored page draws them at once. */
+export const stashGroups = (res: Products) => {
+  const got = groupsOf(res);
+  return res.hits.flatMap((h): [string, VariantGroup][] => {
+    const g = got?.get(h['@id']);
+    return g ? [[h['@id'], g]] : [];
+  });
+};
+
+/** A Back stash's groups (storage: each checked) as answered for `res`'s products. */
+export const seedGroups = (res: Products, stashed: unknown) => {
+  if (!res.guid || !Array.isArray(stashed)) return;
+  const s = setOf(res.guid);
+  const ids = new Set(res.hits.map((h) => h['@id']));
+  const next = new Map(s.got);
+  for (const e of stashed) {
+    const g = ids.has(e?.[0]) ? group(e[1]) : null;
+    if (!g) continue;
+    next.set(e[0], g);
+    s.asked.add(e[0]);
+  }
+  s.got = next;
+};

package/src/widgets/listing/view.ts

@@ -9,8 +9,9 @@
 // bundle turns a click on one into a client-side update (`go(patch)`).
 
 import type { WidgetContext } from '../../main';
-import type { Helpers, SearchScope } from '../../types';
-import { SEARCH } from '../../core/features';
+import type { VariantGroup } from '../../api';
+import type { Helpers, Result, SearchScope } from '../../types';
+import { SEARCH, VARIANTS } from '../../core/features';
 import { fold } from '../../core/fold';
 import { navigable } from '../../core/result';
 import { hasMore, parseRange, type ListingConfig, type ListingResult } from './query';
@@ -62,6 +63,8 @@ export interface ListingView {
   searchGroup?: (name: string, text: string) => void;
   /** A range committed (`setRange` of the scope): from–to, `null` an open end. */
   setRange?: (name: string, from: number | null, to: number | null) => void;
+  /** `variants`: the products' variant groups landed so far, by `@id` (./variants.ts). */
+  variants?: ReadonlyMap<string, VariantGroup>;
 }
 
 /** A DOM id for a facet group of a route: `lbx-plp-g-lbx_price` (names may hold ':' or spaces). */
@@ -83,6 +86,34 @@ const resultOf = <R>(make: (h: any) => R) => {
   };
 };
 
+/**
+ * `variants`: a hit's Result with its variant group (`r.variants`), the same
+ * object for the same hit and group: a tile is drawn again when its group
+ * lands, and only then. Its own computed attributes (`r.c`), which may read
+ * the group.
+ */
+const grouped = VARIANTS ? new WeakMap<VariantGroup, { h: object; r: Result }>() : null;
+export const withGroups = (make: (h: any) => Result, groups: ReadonlyMap<string, VariantGroup>) => {
+  const plain = resultOf(make);
+  return (h: Record<string, any>): Result => {
+    const g = groups.get(h['@id']);
+    if (!g) return plain(h);
+    const was = grouped!.get(g);
+    if (was?.h === h) return was.r;
+    const r = make(h);
+    // Its siblings as results once a template reads them (up to 100 a tile, computed attributes each).
+    let siblings: Result[] | undefined;
+    r.variants = {
+      get siblings() {
+        return (siblings ??= g.siblings.map(make));
+      },
+      total: g.total,
+    };
+    grouped!.set(g, { h, r });
+    return r;
+  };
+};
+
 /** A group's search: the text folded (case, diacritics: "size" finds "Size", "creme" "Crème"), as a substring. */
 const matcher = (text: string) => {
   const t = fold(text.trim());
@@ -222,7 +253,7 @@ export const listingData = (ctx: Pick<WidgetContext<ListingConfig>, 'config' | '
     title: q.title,
     showTitle: !!cfg.showTitle,
     total: res.total,
-    results: res.hits.map(resultOf(ctx.result)),
+    results: res.hits.map(VARIANTS && view.variants ? withGroups(ctx.result, view.variants) : resultOf(ctx.result)),
     quick: SEARCH ? Object.fromEntries(Object.entries(res.quick ?? {}).map(([k, hs]) => [k, hs.map(ctx.result).filter(navigable)])) : {},
     facets,
     ranges,

package/src/widgets/search/first.ts

@@ -3,7 +3,8 @@
 // entry: the query code (route, query building, the answer's shaping) is in
 // lbx-nav, which the listing imports anyway, and not on pages without a listing
 // (the API client's requests are in lbx-core, which the listing loads too).
-import { getApi } from '../../api';
+import { getApi, type Page } from '../../api';
+import { VARIANTS } from '../../core/features';
 import type { GlobalConfigType, SearchConfigType } from '../../types';
 import { quickChannel } from '../listing/flow';
 import { listingQuery, type ListingResult } from '../listing/query';
@@ -11,5 +12,12 @@ import { searchRoute } from './route';
 
 export const searchFirst = (g: GlobalConfigType, cfg: SearchConfigType, url: URL, onProducts?: (r: ListingResult) => void) => {
   const route = searchRoute(cfg);
-  return listingQuery(getApi(g), g, cfg as any, route, route.resolve(url) as any, undefined, undefined, onProducts, quickChannel(route.id));
+  const api = getApi(g);
+  // `variants`: the first page's groups with its facets, as the listing's own
+  // request asks them (the listing finds them asked). Imported here, not
+  // statically: its module is lbx-listing's, which lbx-nav (search while
+  // typing on any page, this boot request) must not wait for. Its chunk
+  // failing is the listing's to report, not an unhandled rejection on the site.
+  const ask = VARIANTS && cfg.variants ? (f: Page) => void import('../listing/variants').then((m) => m.askVariants(api, cfg as any, f), () => {}) : undefined;
+  return listingQuery(api, g, cfg as any, route, route.resolve(url) as any, undefined, undefined, onProducts, quickChannel(route.id), ask);
 };