@luigisbox/luma 0.2.0 → 0.3.0

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.3.0) may change the
+> **Pre-release.** Until 1.0, a minor version (0.4.0) may change the
 > integration API (config keys, template scope, the build); a patch version
-> (0.2.1) only fixes. Depend on `^0.2.0` to take fixes without breaking
+> (0.3.1) only fixes. Depend on `^0.3.0` to take fixes without breaking
 > changes.
 
 ## Core principles
@@ -331,6 +331,11 @@ export default ({ r, i, img, price }: SearchResultScope) => html`
   `_global.images` (srcset, sizes, the eager first row, placeholders).
 - **Pagination** is "show more" only: templates get `results`, `more` and
   `showMore`; there are no numbered pages.
+- **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
+  not 0: otherwise, where no drawer or chips show elsewhere, Back is the
+  shopper's only way to undo the filter.
 - **Translations** are JSON dictionaries per locale (`src/locales/<locale>.json`,
   `{name}` placeholders, plural forms by `Intl.PluralRules` category); only the
   site's locale is loaded. Override keys in `_translations.ts`, keyed by locale:
@@ -348,7 +353,7 @@ On by default unless noted; each falls back to what the page would do anyway.
 |---|---|---|
 | `search.inPlaceQuery` | a new query on the search page renders in place, without a page load | the host's page-view analytics or server-rendered parts of the search page must follow every query |
 | `search.prefetchWhileTyping` | the search result is fetched once the typed phrase settles, so Enter shows it at once | |
-| `restoreOnBack` | Back from a product restores the listing and the followed tile's position | |
+| `restoreOnBack` | Back from a product restores the listing (every page shown) and the followed tile's position, as does the page loaded again within a minute of following a link (a reload, a link whose server redirects back to it); Luma turns the browser's own scroll restoration (`history.scrollRestoration`) off for the listing's history entry until it has placed the page, unless the site set it | |
 | `prefetchNextPage` | "show more" is fetched as the shopper nears the end | |
 | `contentVisibility` (opt-in) | tiles out of view skip style, layout and paint, each at its own measured size: a long list's re-render about halves | keep it off where a tile draws outside its box (a hover panel, a badge hanging out) or holds a `position: fixed` element |
 | `_global.prefetchFilters` | a filter, sort or chip is fetched on hover, touch or focus | |

package/docs/ACCESSIBILITY.md

@@ -106,8 +106,13 @@ guessed alt text, and forced colours and the OS setting are honoured.
   they are not results; the help box's phone link is a plain link. "Show all
   products" is a real link (`href`: the
   search page the site's form would submit to) and the open dropdown's one
-  tab stop: Tab from the input reaches it, Shift+Tab goes back, Escape closes
-  and goes back, Tab moves on to the page's next control after the input.
+  tab stop: Tab from the input reaches it (the options' selection cleared:
+  one thing lit), Shift+Tab goes back, Escape closes and goes back, Tab moves
+  on to the page's next control after the input. It is also the arrow keys'
+  last stop after the options (Arrow Up from the input reaches it first),
+  lit as when focused and referenced as the active descendant (it is in the
+  combobox's popup; in our shadow root, said by the status region instead),
+  Enter its search; focus stays in the input.
 - **Status messages**: "Suggestions: N" or "No results for “…”", in a polite
   `role="status"` region inside the dropdown, once typing pauses (700 ms), and
   only when it changes within an opening (not per keystroke).
@@ -123,7 +128,7 @@ guessed alt text, and forced colours and the OS setting are honoured.
   never a faint colour alone: an accent fill (pills), or the tint with an
   accent ring (cards) or edge (rows). Tokens an integration sets
   (`autocomplete.tokens`, its CSS) are its own to keep at 4.5:1 (`yarn luma a11y`).
-- **The phone sheet** (house design, viewport up to 600 px): its own input is
+- **The phone sheet** (house design, viewport up to 600 px, or a short touch screen: a phone in landscape): its own input is
   the combobox (`aria-controls` the listboxes on screen,
   `aria-activedescendant` the selected option: the same shadow root); the
   site's input is left as it was. The back button is named "Close search",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luigisbox/luma",
-  "version": "0.2.0",
+  "version": "0.3.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/core/entries.ts

@@ -16,10 +16,14 @@ export const isOwnEntry = (href: string) => own.has(canon(href));
 
 /**
  * A history entry of ours that only stands for something open (the
- * autocomplete's phone sheet): Back closes it, and no router of the host's
- * hears that popstate (the URL is the same). `back` returns true when the
- * popstate was that entry's (set by the widget that pushed it).
+ * autocomplete's phone sheet, the listing's staged filter drawer): Back
+ * closes it, and no router of the host's hears that popstate (the URL is the
+ * same). Each handler returns true when the popstate was its entry's (set by
+ * the widget that pushed it). Returns the removal.
  */
-let back: (() => boolean) | null = null;
-export const onOwnBack = (f: () => boolean) => void (back = f);
-export const ownBack = () => !!back?.();
+const backs = new Set<() => boolean>();
+export const onOwnBack = (f: () => boolean) => (backs.add(f), () => void backs.delete(f));
+export const ownBack = () => {
+  for (const f of backs) if (f()) return true;
+  return false;
+};

package/src/core/stash.ts

@@ -17,21 +17,41 @@ export const navigation = () => {
   }
 };
 
+/**
+ * A listing left for another page, loaded again within this long by a reload
+ * or a navigation from itself (a server round trip: a "compare" or "add to
+ * cart" link that redirects back to the page it came from): the listing as
+ * left, as for Back.
+ */
+export const ROUND_TRIP_MS = 60e3;
+
+/** The page loaded from itself: its referrer is this page (a redirect back keeps the referrer of the page that started it). */
+const fromItself = () => {
+  try {
+    return !!document.referrer && pageKey(document.referrer) === pageKey(location.href);
+  } catch {
+    return false;
+  }
+};
+
 /**
  * Which load a stash kind is for: a typed query's page by a navigation (or a
  * prerender of it, `prerender` from its start through its activation), a
- * listing left for a product by back/forward.
+ * listing left for a product by back/forward, or by a reload or a navigation
+ * from itself within ROUND_TRIP_MS of leaving (`at`: when it was written).
  */
-export const stashFits = (kind: string) => {
+export const stashFits = (kind: string, at = 0) => {
   const t = navigation().type;
-  return kind === 'back' ? t === 'back_forward' : t === 'navigate' || t === 'prerender';
+  if (kind !== 'back') return t === 'navigate' || t === 'prerender';
+  if (t === 'back_forward') return true;
+  return Date.now() - at < ROUND_TRIP_MS && (t === 'reload' || (t === 'navigate' && fromItself()));
 };
 
 /** A stash this load will likely use (the listing checks it fully). Reads only the start of the entry. */
 export const hasStash = (href: string) => {
   try {
     const head = sessionStorage.getItem(stashKey(href))?.slice(0, 60);
-    return !!head && stashFits(head.includes('"kind":"back"') ? 'back' : 'spec');
+    return !!head && stashFits(head.includes('"kind":"back"') ? 'back' : 'spec', Number(/"at":(\d+)/.exec(head)?.[1]) || 0);
   } catch {
     return false;
   }

package/src/types.ts

@@ -245,8 +245,17 @@ export interface AutocompleteConfigType extends AppConfig<AutocompleteConfigType
    * `'input'`: always the input. At least 360 px wide; on a phone (below
    * 480 px) a field spanning most of the screen exactly, else the screen's
    * width.
-   */
-  alignTo?: 'input' | string;
+   *
+   * An object sets the field and, for the house panel (`dom: 'shadow'`), the
+   * page's content column it stays within: `{ field?: 'input' | string;
+   * column?: 'viewport' | string }`. `column`: a selector (the field's
+   * nearest ancestor matching it, else the first element matching it), or
+   * `'viewport'` (the screen less 24 px each side). By default the panel
+   * stays within the field's outermost ancestor that is at least 1000 px
+   * wide and narrower than the screen (a centred page container), else the
+   * screen.
+   */
+  alignTo?: 'input' | string | { field?: 'input' | string; column?: 'viewport' | string };
   /** _init.ts hooks, for sites whose own code reacts to their dropdown opening, closing or a pick. */
   onOpen?: () => void;
   /** Why it closed: a pick, Enter / Escape in the input, focus leaving, a press outside, a route change, … */

package/src/widgets/autocomplete/index.ts

@@ -47,10 +47,23 @@ const PANEL_MAX = 1200;
 const PANEL_LIST = 560;
 const PANEL_GUTTER = 24;
 const PANEL_WIDE = 1000;
+/** A content column inset at least this far from the screen's edges is the page's (its edges hold, inside the gutter too); nearer, it is the screen's width. */
+const COLUMN_INSET = 8;
+/** `active` on "Show all products" (`data-lbx-all`): the arrow keys' last stop in the dropdown, after the options. */
+const ALL = -2;
+/** The id an option, or "Show all products", is referenced by (aria-activedescendant). */
+const idOf = (i: number) => (i === ALL ? 'lbx-ac-all' : `lbx-ac-${i}`);
 /** Products beside the top product on the panel (2 x 3). */
 const GRID_MAX = 6;
-/** Phones (the viewport up to this width): the house design is a full-screen sheet. */
-const SHEET_MEDIA = '(max-width: 600px)';
+/**
+ * Phones: the house design is a full-screen sheet. A narrow viewport, or a
+ * touch screen (no hover, as the entry tells one) that is short: a phone in
+ * landscape (844 x 390) got the desktop panel, most of it under the
+ * on-screen keyboard. A tablet (768 px and taller) keeps the panel.
+ */
+export const SHEET_MEDIA = '(max-width: 600px), (hover: none) and (max-height: 500px)';
+/** The sheet's visible height below which its top product is drawn smaller (the keyboard up): more of the list shows. */
+const SHEET_SHORT = 480;
 
 /** A computed colour that paints nothing (`rgba(0, 0, 0, 0)`, `transparent`, `color(srgb 0 0 0 / 0)`). */
 const clear = (c: string) => !c || c === 'transparent' || /(?:,|\/)\s*0(?:\.0*)?\)$/.test(c);
@@ -129,14 +142,58 @@ export const dropdownBox = (r: { left: number; right: number; width: number }, v
  * for a batch without products), centred under the field, kept 24 px from
  * the screen's edges; its caret under the field's left edge + 30 px (inside
  * the panel's corners). `wide`: the top product has its own column.
+ * `col`: the page's content column (`columnOf`): the panel also kept within
+ * its left and right edges (no wider than it), as the page's own content is;
+ * an edge of it inset from the screen's holds inside the gutter too (a
+ * column 20 px from the edges: the panel at 20, not 24), one at the screen's
+ * edge (less than COLUMN_INSET) leaves the gutter.
  */
-export const panelBox = (r: { left: number; width: number }, vw: number, listOnly = false) => {
-  const width = Math.max(0, Math.min(listOnly ? PANEL_LIST : PANEL_MAX, vw - 2 * PANEL_GUTTER));
-  const left = Math.max(PANEL_GUTTER, Math.min(r.left + r.width / 2 - width / 2, vw - PANEL_GUTTER - width));
+export const panelBox = (r: { left: number; width: number }, vw: number, listOnly = false, col?: { left: number; right: number } | null) => {
+  const lo = col && col.left >= COLUMN_INSET ? col.left : PANEL_GUTTER;
+  const hi = col && col.right <= vw - COLUMN_INSET ? col.right : vw - PANEL_GUTTER;
+  const width = Math.max(0, Math.min(listOnly ? PANEL_LIST : PANEL_MAX, hi - lo));
+  const left = Math.max(lo, Math.min(r.left + r.width / 2 - width / 2, hi - width));
   const caret = Math.max(16, Math.min(r.left + 30 - left, width - 30));
   return { left, width, caret, wide: width >= PANEL_WIDE };
 };
 
+/** `alignTo`'s parts: the field (a string: that alone) and the content column. */
+const alignOf = (a: AutocompleteConfigType['alignTo']) => (typeof a === 'object' && a ? a : { field: a, column: undefined });
+
+/**
+ * The page's content column the house panel stays within (`alignTo.column`),
+ * read once per opening with the field:
+ * - `'viewport'`: none (the screen, less the gutter);
+ * - a selector: the field's nearest ancestor matching it, else the first
+ *   element on the page matching it (a header and a content column side by
+ *   side), else none;
+ * - by default, the outermost ancestor of the field that is inset from both
+ *   of the screen's edges (COLUMN_INSET) and at least PANEL_WIDE wide (or the
+ *   screen less the gutters, on a narrower one): a storefront's centred
+ *   `max-width` container (the shop's logo and cart at its edges), also
+ *   where it nearly fills a 1024 px screen. A narrower box is a part of the
+ *   header, not the page's column.
+ */
+export const columnOf = (field: Element, column?: string): Element | null => {
+  if (column === 'viewport') return null;
+  if (column) {
+    try {
+      for (let el = up(field); el; el = up(el)) if (el.matches(column)) return el;
+      return document.querySelector(column);
+    } catch {
+      return null; // not a selector
+    }
+  }
+  const vw = document.documentElement.clientWidth;
+  let found: Element | null = null;
+  const min = Math.min(PANEL_WIDE, vw - 2 * PANEL_GUTTER);
+  for (let el = up(field); el && el !== document.body && el !== document.documentElement; el = up(el)) {
+    const b = el.getBoundingClientRect();
+    if (b.width >= min && b.left >= COLUMN_INSET && b.right <= vw - COLUMN_INSET) found = el;
+  }
+  return found;
+};
+
 /** The house tokens a config may set (`autocomplete.tokens`), as their custom properties. */
 const TOKEN_PROPS: Record<string, string> = {
   font: 'font',
@@ -187,6 +244,7 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
   /** The arrow keys' order over `items` (the house design's reading order: pills, lists, the top product, products). */
   let order: number[] = [];
   let lastQuery = '';
+  /** The arrow keys' selection: an option of `items`, -1 none (the input), ALL "Show all products". */
   let active = -1;
   let open = false;
   let raf = 0;
@@ -195,6 +253,12 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
   let quietFocus = false;
   /** The phrase the dropdown is for (normalised input), '' while closed by the visitor or below minChars. */
   let want = '';
+  /** Scrolled lists in the dropdown (the panel's columns, the sheet's list): back to their top for a new result set. */
+  const scrolled = new Set<Element>();
+  const toTop = () => {
+    for (const el of scrolled) if (el.isConnected) el.scrollTop = 0;
+    scrolled.clear();
+  };
   /** Per type, what the dropdown shows. */
   const shown = new Map<string, Result[]>();
   /** The house panel: wide enough for the top product's column; a batch without products (the list alone, narrower). */
@@ -206,6 +270,8 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
   let tab = '';
   let entry = false;
   let afterBack: (() => void) | null = null;
+  /** What the site's input held when the sheet opened: put back when the sheet is cancelled (its back button, Escape, Back). */
+  let before = '';
   // Accessibility (docs/ACCESSIBILITY.md, "Autocomplete"): the host's input is
   // the combobox. Its ARIA is borrowed while it has focus and put back when
   // focus leaves it; the result count is announced politely, once typing pauses.
@@ -319,6 +385,20 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
         backToInput();
       }
     });
+    // Which of its lists the shopper scrolled (read in their own scroll
+    // event, layout clean): a new result set starts at their top (toTop).
+    // Bug: a list scrolled down for "fiets" drew "fiets slot" scrolled down,
+    // the top product out of sight.
+    box.addEventListener(
+      'scroll',
+      (e) => {
+        const el = e.composedPath()[0];
+        if (!(el instanceof Element)) return;
+        if (el.scrollTop > 0) scrolled.add(el);
+        else scrolled.delete(el);
+      },
+      { capture: true, passive: true },
+    );
     // Focus leaving the dropdown for anywhere but the input: closed, as when
     // it leaves the input. Not the sheet: it covers the page, and its input
     // lets go whenever the shopper puts the keyboard away to read.
@@ -357,6 +437,14 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
 
   /** What the dropdown lines up with for this opening (`alignTo`): the visible search field, else the input. */
   let field: Element | null = null;
+  /** The page's content column the house panel stays within, for this opening (`alignTo.column`; none: the screen). */
+  let column: Element | null = null;
+  const align = alignOf(ac.alignTo);
+  /** The field and the content column, read once per opening (styles and boxes, before our writes). */
+  const lineUp = (i: HTMLInputElement) => {
+    field = fieldOf(i, align.field);
+    column = light ? null : columnOf(field, align.column);
+  };
 
   /** Where the field is (null: hidden), read before anything of ours is written in the task. */
   const measure = () => {
@@ -364,7 +452,8 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
     // checkVisibility: not in Safari before 17.4.
     if (!input.isConnected || input.getBoundingClientRect().width === 0 || (input.checkVisibility && !input.checkVisibility({ checkVisibilityCSS: true }))) return null;
     const at = (field?.isConnected ? field : input).getBoundingClientRect();
-    return { r: at.width ? at : input.getBoundingClientRect(), vw: document.documentElement.clientWidth };
+    const col = column?.isConnected ? column.getBoundingClientRect() : null;
+    return { r: at.width ? at : input.getBoundingClientRect(), vw: document.documentElement.clientWidth, col: col?.width ? col : null };
   };
   /**
    * Where the dropdown is, every frame while open; `frame`: from the frame
@@ -376,26 +465,34 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
     if (!open || !input) return;
     const s = host!.style;
     if (sheet) {
-      // Full screen: what shows of the page (the visual viewport, above the
-      // on-screen keyboard), so the sticky "Show all" sits above the keys.
+      // Full screen: its content in what shows of the page (the visual
+      // viewport, above the on-screen keyboard), so the sticky "Show all"
+      // sits above the keys. The host reaches on down to the layout
+      // viewport's bottom, painted (openSheet): iOS 26 Safari ends the visual
+      // viewport above its floating address bar, and between the two the
+      // page showed through, see-through bars over it.
       const vv = window.visualViewport;
-      s.top = `${Math.round(vv?.offsetTop ?? 0)}px`;
+      const top = Math.round(vv?.offsetTop ?? 0);
+      const h = Math.round(vv?.height ?? innerHeight);
+      s.top = `${top}px`;
       s.left = `${Math.round(vv?.offsetLeft ?? 0)}px`;
       s.width = `${Math.round(vv?.width ?? innerWidth)}px`;
-      s.height = `${Math.round(vv?.height ?? innerHeight)}px`;
+      s.height = `${Math.max(h, innerHeight - top)}px`;
+      s.setProperty('--lbx-vh', `${h}px`);
+      host!.toggleAttribute('data-lbx-short', h < SHEET_SHORT);
       raf = requestAnimationFrame(() => position(true));
       return;
     }
     const got = m === undefined ? measure() : m;
     if (!got) return close('hidden');
-    const { r, vw } = got;
+    const { r, vw, col } = got;
     s.top = `${Math.round(r.bottom + 4)}px`;
     if (light) {
       const { left, width } = dropdownBox(r, vw);
       s.left = `${Math.round(left)}px`;
       s.width = `${Math.round(width)}px`;
     } else {
-      const p = panelBox(r, vw, listOnly);
+      const p = panelBox(r, vw, listOnly, col);
       s.left = `${Math.round(p.left)}px`;
       s.width = `${Math.round(p.width)}px`;
       s.setProperty('--lbx-caret', `${Math.round(p.caret)}px`);
@@ -458,7 +555,9 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
    *   (not for a row the pointer is over: `say` false).
    */
   const markActive = (say = true) => {
-    const row = active >= 0 ? (box.getRootNode() as Document | ShadowRoot).getElementById(`lbx-ac-${active}`) : null;
+    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);
     if (sheet && mirror) {
       if (row) mirror.setAttribute('aria-activedescendant', row.id);
       else mirror.removeAttribute('aria-activedescendant');
@@ -480,7 +579,7 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
       // The field and the site's colours: read after the focus's frame (prepare), else now.
       // Reads first (the field, where it is, the colours), then our writes.
       const fresh = prepared !== input;
-      if (fresh) field = fieldOf(input!, ac.alignTo);
+      if (fresh) lineUp(input!);
       const m = measure();
       if (fresh && !light) sampleTokens(input!, field!);
       prepared = null;
@@ -511,8 +610,8 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
   const prepare = (i: HTMLInputElement) =>
     afterFrame(() => {
       if (open || input !== i || !i.isConnected || sheet) return;
-      field = fieldOf(i, ac.alignTo);
-      if (!light) sampleTokens(i, field);
+      lineUp(i);
+      if (!light) sampleTokens(i, field!);
       prepared = i;
       place(); // after the reads: it dirties the page's style
       rehearse();
@@ -593,7 +692,7 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
             st.setProperty('visibility', 'hidden');
             st.top = '0px';
             st.left = '0px';
-            st.width = `${Math.round(panelBox(m.r, m.vw).width)}px`;
+            st.width = `${Math.round(panelBox(m.r, m.vw, false, m.col).width)}px`;
             st.setProperty('display', 'block', 'important');
           }
         }
@@ -630,8 +729,15 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
     if (!open) {
       sheet = true;
       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))';
+      // 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).
+      if (mirror) mirror.value = i.value;
       host!.style.setProperty('display', 'block', 'important');
       host!.showPopover();
       open = true;
@@ -648,11 +754,15 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
     }
     if (mirror) {
       mirror.focus();
-      // The caret or selection the site's input has (where a tap put it, all
-      // of it after a Tab): typing goes on as it would have there.
+      // The caret or selection the site's input has (all of it after a Tab):
+      // typing goes on as it would have there. A caret at its start is a tap's
+      // focus not yet placed (Chromium places it after the focus): the end.
+      // Bug: a tap on "helm" then "fietstas" typed "fietstashelm".
       const end = mirror.value.length;
+      let [from, to] = [Math.min(i.selectionStart ?? end, end), Math.min(i.selectionEnd ?? end, end)];
+      if (!from && !to) from = to = end;
       try {
-        mirror.setSelectionRange(Math.min(i.selectionStart ?? end, end), Math.min(i.selectionEnd ?? end, end));
+        mirror.setSelectionRange(from, to);
       } catch {}
     }
     query(mirror?.value ?? i.value);
@@ -723,8 +833,15 @@ 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';
+      host!.style.removeProperty('--lbx-vh');
+      host!.removeAttribute('data-lbx-short');
       mirror?.blur();
       if (focused() === input) input?.blur();
+      // Cancelled: the site's input as it was (what the page still shows
+      // results for). Bug: the sheet's back arrow left "helmfietstas" in the
+      // site's input over a page of results for "helm".
+      if (reason === 'back' && input && input.value !== before) setValue(input, before);
     }
     aria?.set('aria-expanded', 'false');
     aria?.set('aria-activedescendant', null);
@@ -768,7 +885,7 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
         : sheet
           ? [...phrases, ...(tab === PRODUCT ? products : byType(tab))].map((x) => x.i)
           : [...phrases, ...lists.flatMap((g) => g.rows), ...(wide && hero ? [hero] : []), ...grid].map((x) => x.i);
-    if (active >= 0 && !order.includes(active)) active = -1;
+    if ((active >= 0 && !order.includes(active)) || (active === ALL && sheet)) active = -1;
     const phoneNumber = t('help.phone');
     const help = phoneNumber && phoneNumber !== 'help.phone' ? { title: t('help.title'), phone: phoneNumber, tel: phoneNumber.replace(/[^\d+]/g, ''), hours: t('help.hours').replace(/^help\.hours$/, '') } : null;
     const value = (drawnValue = mirror?.value ?? input?.value ?? '');
@@ -793,7 +910,7 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
       lists,
       hero: sheet || wide ? hero : null,
       products: grid,
-      tabs: kinds.map((kind) => ({ kind, label: t(`types.${kind}`), selected: kind === tab, select: () => ((tab = kind), active >= 0 && (active = -1), render(), markActive()) })),
+      tabs: kinds.map((kind) => ({ kind, label: t(`types.${kind}`), selected: kind === tab, select: () => ((tab = kind), active >= 0 && (active = -1), toTop(), render(), markActive()) })),
       tab,
       empty: { tries, browse, fallback, help },
       hover,
@@ -827,6 +944,10 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
       },
       back: () => leave('back'),
     });
+    // "Show all products" as the arrow keys' selection: lit as when it has the focus (its CSS: [data-lbx-active]).
+    const all = box.querySelector('[data-lbx-all]');
+    if (all && all.hasAttribute('data-lbx-active') !== (active === ALL)) all.toggleAttribute('data-lbx-active', active === ALL);
+    if (active === ALL && !all) active = -1;
   };
 
   /**
@@ -1069,6 +1190,7 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
     active = sel ? items.findIndex((r) => r.type === sel.type && r.id === sel.id) : -1;
     lastQuery = q;
     listOnly = results.length > 0 && !results.some((r) => r.type === PRODUCT);
+    toTop();
     // The sheet takes what arrives while its input has let go (the keyboard put away to read).
     if (!sheet && focused() !== input) return;
     // The first opening with an onOpen (the site's own code: one storefront opens its
@@ -1108,14 +1230,18 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
   const typed = () => {
     const i = input;
     if (!i || !mirror || i.value === mirror.value) return;
+    setValue(i, mirror.value);
+  };
+  /** A value into the site's input as typing would put it (an `input` event), which ours ignores. */
+  function setValue(i: HTMLInputElement, value: string) {
     suppressInput = true;
     try {
-      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(i, mirror.value);
+      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(i, value);
       i.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
     } finally {
       suppressInput = false;
     }
-  };
+  }
   const handToHost = (from: HTMLInputElement, q: string) => {
     // A host that re-rendered its header meanwhile: its input as it is now.
     const i = from.isConnected ? from : (document.querySelector(selector) as HTMLInputElement | null) ?? from;
@@ -1154,19 +1280,24 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
     }
   }
 
-  /** The arrow keys: the next option in `order`, or back to the input (-1) past either end. */
+  /**
+   * The arrow keys: the next option in `order`, then "Show all products" (the
+   * dropdown's, not the sheet's), then back to the input (-1); Arrow Up the
+   * other way round.
+   */
   const step = (by: 1 | -1) => {
-    const n = order.length + 1; // positions: -1 (back in input) .. order.length-1
-    const at = order.indexOf(active);
+    const stops = !sheet && allLink() ? [...order, ALL] : order;
+    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;
-    active = next < 0 ? -1 : order[next];
+    active = next < 0 ? -1 : stops[next];
     byPointer = false;
     render();
     // Into view once the frame with it has rendered (layout clean then): in
     // the key's task, right after our render, it forced a style and layout of
     // the page (most of typing's forced layout; the key's response waited).
     const row = markActive();
-    if (row) afterFrame(() => row.isConnected && row.id === `lbx-ac-${active}` && row.scrollIntoView({ block: 'nearest' }));
+    if (row) afterFrame(() => row.isConnected && row.id === idOf(active) && row.scrollIntoView({ block: 'nearest' }));
   };
   /** The pointer over an option: the same selection the arrow keys move. A
    *  touch is not a hover (a tap's pointerenter would leave the row lit). */
@@ -1214,6 +1345,21 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
       if (!mirror.value !== !drawnValue) render();
       return;
     }
+    // Typed into the site's input while the sheet has the focus: keys the
+    // phone sent during the hand-off (the tap focused the site's input, the
+    // sheet's took over in that task). Carried into the sheet's input. Bug:
+    // letters typed within a few ms of the tap were lost (the next one typed
+    // into the sheet wrote its value over theirs).
+    if (sheet && mirror && input && target === input && !suppressInput) {
+      if (input.value === mirror.value) return;
+      mirror.value = input.value;
+      try {
+        mirror.setSelectionRange(mirror.value.length, mirror.value.length);
+      } catch {}
+      query(mirror.value);
+      if (!mirror.value !== !drawnValue) render();
+      return;
+    }
     // Not one being typed into: a value set for the visitor (search/in-place.ts
     // on back/forward) asks for nothing; a focus later asks for what it holds.
     if (suppressInput || !matches(target) || target !== focused()) return;
@@ -1325,7 +1471,10 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
       consume(e); // also keeps the host's hidden suggestion list from moving
       step(e.key === 'ArrowDown' ? 1 : -1);
     } else if (e.key === 'Enter') {
-      if (active >= 0) {
+      if (active === ALL) {
+        consume(e);
+        submitAll();
+      } else if (active >= 0) {
         consume(e); // our selection wins over the host's Enter handler
         choose(active);
       } else if (sheet) {
@@ -1344,6 +1493,12 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
       const all = allLink();
       if (!all) return;
       consume(e);
+      // The one thing lit: the options' selection goes (its focus ring shows where Tab went).
+      if (active !== -1) {
+        active = -1;
+        render();
+        markActive(false);
+      }
       all.focus();
     }
   });
@@ -1379,7 +1534,7 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
     close('navigate');
   });
 
-  hook('onReady', ac.onReady, { close: () => (sheet ? leave('api') : close('api')), reposition: () => (cancelAnimationFrame(raf), input && (field = fieldOf(input, ac.alignTo)), position()) });
+  hook('onReady', ac.onReady, { close: () => (sheet ? leave('api') : close('api')), reposition: () => (cancelAnimationFrame(raf), input && lineUp(input), position()) });
 
   // The interaction that loaded us has already happened: pick it up.
   const now = focused();

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

@@ -36,8 +36,9 @@
   --lbx-radius-row: calc(var(--lbx-radius) * .6);
   --lbx-radius-tile: calc(var(--lbx-radius) * .5);
 }
-/* The render root: the sheet fills the host (sized to the visual viewport); the panel is as tall as it is. */
-.lbx-root { height: 100%; }
+/* The render root: the sheet is the visual viewport's height (--lbx-vh, index.ts; the host reaches on
+   below it, painted); the panel is as tall as it is. */
+.lbx-root { height: var(--lbx-vh, 100%); }
 /* What the rules read: the tokens, or the high-contrast palette while it is on. */
 .box, .sheet {
   --c-fg: var(--lbx-c-fg, var(--lbx-fg));
@@ -105,14 +106,15 @@ button { font: inherit; color: inherit; background: none; border: 0; padding: 0;
 .clamp, .card .t, .mproduct .t, .compact .t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
 
 /* The top product: the whole card is the option. */
-.hero { flex: 1; flex-direction: column; align-items: stretch; gap: 12px; padding: 10px; margin: -10px; border-radius: var(--lbx-radius-row); }
+.hero { flex: 1; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; padding: 10px; margin: -10px; border-radius: var(--lbx-radius-row); }
 .pic { position: relative; height: 230px; display: flex; align-items: center; justify-content: center; border-radius: var(--lbx-radius-tile); background: var(--lbx-soft); overflow: hidden; }
 .v-spec .pic { height: 120px; }
 .badge { position: absolute; top: 10px; left: 10px; height: 24px; padding: 0 10px; display: flex; align-items: center; border-radius: 999px; background: var(--c-fill); color: var(--c-on-fill); font-size: 12px; font-weight: 700; }
 .hero .t { font-size: 17px; font-weight: 700; }
 .hero .stock { font-size: 13px; gap: 8px; }
 .hero .dot { width: 8px; height: 8px; }
-.hero .prices { margin-top: auto; flex-direction: column-reverse; align-items: flex-start; gap: 0; }
+/* Under the title, not at the column's foot; the old price first, as on the cards. */
+.hero .prices { margin-top: 4px; align-items: baseline; gap: 8px; }
 .hero .now { font-size: 26px; letter-spacing: -.01em; }
 .hero .old { font-size: 13px; }
 .specs { display: flex; flex-direction: column; border-top: 1px solid var(--c-line); }
@@ -136,7 +138,7 @@ button { font: inherit; color: inherit; background: none; border: 0; padding: 0;
 /* "Show all products": the PRODUCTS column's foot, outlined; filled when focused or hovered. Outside the listbox. */
 .all { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: var(--lbx-radius-row); box-shadow: inset 0 0 0 1.5px var(--c-fill);
   color: var(--c-accent); font-size: 15px; font-weight: 700; background: var(--c-bg); cursor: pointer; }
-.all:hover, .all:focus-visible { background: var(--c-fill); color: var(--c-on-fill); }
+.all:hover, .all:focus-visible, .all[data-lbx-active] { background: var(--c-fill); color: var(--c-on-fill); }
 .box .all { position: absolute; right: 24px; bottom: 20px; left: 24px; }
 .box.has-list .all { left: 304px; }
 .box.has-hero .all { left: 334px; }
@@ -208,6 +210,10 @@ button { font: inherit; color: inherit; background: none; border: 0; padding: 0;
 .mhero .t { font-size: 16px; line-height: 1.3; font-weight: 700; }
 .mhero .stock, .mproduct .stock { font-size: 13px; }
 .mhero .now { font-size: 22px; }
+/* The keyboard up (a short sheet): a smaller top product, more of the list in view. */
+:host([data-lbx-short]) .mhero .tile { width: 72px; height: 72px; }
+:host([data-lbx-short]) .m-hero { padding: 12px 16px; gap: 8px; }
+:host([data-lbx-short]) .mhero .now { font-size: 18px; }
 .mproduct { padding: 12px 16px; gap: 14px; border-bottom: 1px solid var(--c-line); }
 .mproduct .tile { width: 72px; height: 72px; }
 .mproduct .t { font-size: 15px; font-weight: 700; }