@luigisbox/luma 0.5.0 → 0.7.0

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';
@@ -66,6 +66,12 @@ const GRID_MAX = 6;
 export const SHEET_MEDIA = '(max-width: 600px), (hover: none) and (max-height: 500px)';
 /** The sheet's visible height below which its top product is drawn smaller (the keyboard up): more of the list shows. */
 const SHEET_SHORT = 480;
+/** How far (px, vertically) a finger moves in the sheet's list before it is a swipe, not a tap: the keyboard goes away. */
+const SWIPE = 10;
+/** A move this far (px), then the browser taking the gesture over (pointercancel), is a swipe too; less is a finger's jitter. */
+const SWIPE_START = 4;
+/** How long (ms) after the browser took a finger's gesture over a scroll of the list is still that finger's. */
+const SWIPE_SCROLL_MS = 200;
 
 /** A computed colour that paints nothing (`rgba(0, 0, 0, 0)`, `transparent`, `color(srgb 0 0 0 / 0)`). */
 const clear = (c: string) => !c || c === 'transparent' || /(?:,|\/)\s*0(?:\.0*)?\)$/.test(c);
@@ -257,7 +263,13 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
   let want = '';
   /** Scrolled lists in the dropdown (the panel's columns, the sheet's list): back to their top for a new result set. */
   const scrolled = new Set<Element>();
+  /** A finger down in the sheet's list (a swipe through it puts the keyboard away: ensureHost); `ours`: the list's next scroll is our reset. */
+  let swipe: { list: Element; x: number; y: number; moved: boolean; cancelled?: number; ours?: boolean } | null = null;
   const toTop = () => {
+    // Our scroll, not the finger's: a finger at rest on the list is no swipe, the same finger's drag
+    // after it still is. Review (PR 26): a new result set's reset put the keyboard away.
+    // 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();
   };
@@ -292,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[]) => {
@@ -323,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
@@ -363,8 +382,9 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
       if (!inOverlay(el) || e.ctrlKey || e.metaKey) return;
       if (sheet) {
         if (e.key === 'Escape') {
-          e.preventDefault();
-          e.stopPropagation();
+          // A whole gesture, as from the input: focus is on the sheet after a swipe (or on its buttons),
+          // and its keyup reached the host's handlers. Review (PR 26).
+          consume(e);
           leave('back');
         } else if ((e.key === 'ArrowLeft' || e.key === 'ArrowRight') && el.getAttribute?.('role') === 'tab') {
           e.preventDefault();
@@ -400,6 +420,66 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
         if (!(el instanceof Element)) return;
         if (el.scrollTop > 0) scrolled.add(el);
         else scrolled.delete(el);
+        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 },
+    );
+    // A swipe through the sheet's list (or its no-results column) puts the
+    // keyboard away, the sheet stays: it grows to the whole screen (position),
+    // and a tap on its input brings the keyboard back. Only a drag: a tap on a
+    // row, a tab or "Show all" keeps the keyboard and is not swallowed; the
+    // pill band's sideways drag is not the list. Focus goes to the sheet
+    // (tabindex -1), not <body>: Escape and Tab still work from a hardware
+    // keyboard. Bug (iOS 26 Safari): with the keyboard up, its bar and the
+    // address bar above it, the sheet kept half the screen. 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]') ?? (LIGHT_FULL_SCREEN && light ? host : null);
+      if (panel) panel.focus({ preventScroll: true });
+      else mirror.blur(); // an integration's own sheet template
+    };
+    const finger = (e: PointerEvent) => e.pointerType === 'touch' && e.isPrimary;
+    box.addEventListener(
+      'pointerdown',
+      (ev) => {
+        const e = ev as PointerEvent;
+        swipe = null;
+        if (!sheet || !finger(e)) return;
+        const 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 },
+    );
+    box.addEventListener(
+      'pointermove',
+      (ev) => {
+        const e = ev as PointerEvent;
+        if (!swipe || !finger(e)) return;
+        const dy = Math.abs(e.clientY - swipe.y);
+        if (dy <= Math.abs(e.clientX - swipe.x)) return;
+        if (dy > SWIPE) putKeyboardAway();
+        else if (dy >= SWIPE_START) swipe.moved = true;
+      },
+      { capture: true, passive: true },
+    );
+    box.addEventListener('pointerup', (e) => finger(e as PointerEvent) && (swipe = null), { capture: true, passive: true });
+    // The browser took the gesture over to scroll: after a first move (iOS
+    // Safari: a pull at the list's top, 10 px, then pointercancel), a swipe;
+    // without one, a swipe if the list scrolls right after (a flick), not a
+    // long press (a link's preview: no scroll; a later scroll is ours, toTop).
+    box.addEventListener(
+      'pointercancel',
+      (e) => {
+        if (!swipe || !finger(e as PointerEvent)) return;
+        if (swipe.moved) putKeyboardAway();
+        else swipe.cancelled = performance.now();
       },
       { capture: true, passive: true },
     );
@@ -465,24 +545,51 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
    * before this task's writes (an opening: read after showing the popover,
    * it forced a layout).
    */
+  /** What Safari's bars and the keyboard cover of the sheet (px, --lbx-cover), -1 while it is not open. */
+  let cover = -1;
+  /** A 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>) => {
     if (!open || !input) return;
     const s = host!.style;
     if (sheet) {
-      // Full screen: its content in what shows of the page (the visual
-      // viewport, above the on-screen keyboard), so the sticky "Show all"
-      // sits above the keys. The host reaches on down to the layout
-      // viewport's bottom, painted (openSheet): iOS 26 Safari ends the visual
-      // viewport above its floating address bar, and between the two the
-      // page showed through, see-through bars over it.
+      // Full screen from the top of what shows of the page (the visual
+      // viewport) down to the layout viewport's bottom: iOS 26 Safari ends
+      // the visual viewport above its floating bars (the address pill, with
+      // the keyboard up its form bar too), and the list runs on behind them,
+      // seen through their glass, as the legacy autocomplete's does. What
+      // they and the keyboard cover (--lbx-cover) ends the list as space, so
+      // its last row and "Show all" scroll clear of them. Bug (iOS 26/27):
+      // the list stopped above the bars, a blank strip down to the keys.
+      // 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);
-      s.top = `${top}px`;
-      s.left = `${Math.round(vv?.offsetLeft ?? 0)}px`;
-      s.width = `${Math.round(vv?.width ?? innerWidth)}px`;
-      s.height = `${Math.max(h, innerHeight - top)}px`;
-      s.setProperty('--lbx-vh', `${h}px`);
+      const full = Math.max(h, innerHeight - top);
+      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
+        // Simulator). Its offset back within the list, read a frame later.
+        if (full - h < cover && !clamping) {
+          clamping = true;
+          afterFrame(() => {
+            clamping = false;
+            scrolled.forEach((el) => el.scrollTop > el.scrollHeight - el.clientHeight && (el.scrollTop = Math.max(0, el.scrollHeight - el.clientHeight)));
+          });
+        }
+        cover = full - h;
+        s.setProperty('--lbx-cover', `${cover}px`);
+      }
       host!.toggleAttribute('data-lbx-short', h < SHEET_SHORT);
       raf = requestAnimationFrame(() => position(true));
       return;
@@ -543,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
@@ -561,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');
@@ -724,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.
@@ -739,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).
@@ -758,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();
@@ -803,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;
@@ -841,8 +964,14 @@ 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');
+      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');
       mirror?.blur();
       if (focused() === input) input?.blur();
@@ -858,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`. */
@@ -884,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)
@@ -912,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,
@@ -942,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 = '';
@@ -1094,11 +1226,17 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
   };
   /** The "No results" layout's options: phrases to try, links to browse, fallback products. */
   const emptyOptions = (fallback: Result[]) => {
-    const tag = (r: Result, kind: string) => Object.assign(r, { __empty: kind });
+    // Luma's own options, not catalog hits: their text and link are the
+    // config's, whatever the integration computes for its catalog's.
+    const own = (hit: { '@id': string; '@type': string; '@title': string; url?: string }, kind: string) => {
+      const r = ctx.result(hit);
+      Object.defineProperties(r.c, { title: { value: hit['@title'] }, url: { value: safeUrl(hit.url) } });
+      return Object.assign(r, { __empty: kind });
+    };
     return [
-      ...(empty.tryQueries ?? []).filter((q) => typeof q === 'string' && q.trim()).map((q) => tag(ctx.result({ '@id': `try/${q}`, '@type': 'query', '@title': q }), 'try')),
-      ...(empty.browse ?? []).filter((b) => b && safeUrl(b.url)).map((b) => tag(ctx.result({ '@id': `browse/${b.url}`, '@type': 'browse', '@title': b.title, url: b.url }), 'browse')),
-      ...fallback.map((r) => tag({ ...r }, 'fallback')),
+      ...(empty.tryQueries ?? []).filter((q) => typeof q === 'string' && q.trim()).map((q) => own({ '@id': `try/${q}`, '@type': 'query', '@title': q }, 'try')),
+      ...(empty.browse ?? []).filter((b) => b && safeUrl(b.url)).map((b) => own({ '@id': `browse/${b.url}`, '@type': 'browse', '@title': b.title ?? '', url: b.url }, 'browse')),
+      ...fallback.map((r) => ({ ...r, __empty: 'fallback' })),
     ];
   };
 
@@ -1325,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;
@@ -1445,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/style-autocomplete.css

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

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

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