@luigisbox/luma 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,266 @@
+/* The house design: lives in the dropdown's shadow
+   root, so the host's CSS cannot reach it and ours cannot leak.
+
+   Tokens. Five are the site's, sampled from the page by index.ts (only where
+   they read on our white panel) as --lbx-s-*: font (the input's family), fg,
+   bg, accent (accentFrom), radius (the search field's). The rest are derived.
+   Each is a custom property on :host; `autocomplete.tokens` in the config
+   (a :host rule after this one) or the integration's style-autocomplete.css
+   (`:host { --lbx-line: #d0d0d0; }`) replaces any of them:
+     --lbx-font, --lbx-fg, --lbx-bg, --lbx-accent, --lbx-radius   the site's
+     --lbx-on-accent     text on an accent fill: #fff, or #0a0f12 on a light accent (index.ts)
+     --lbx-muted         fg 66% in bg (secondary text)
+     --lbx-line          fg 11% in bg (rules, outlines)
+     --lbx-soft          fg 4% in bg (the list column, picture tiles)
+     --lbx-tint          accent 10% in bg (pills at rest, selected cards)
+     --lbx-tint-strong   accent 28% in bg (the help box's dashed edge)
+     --lbx-ok            #1f7a35 (stock)
+     --lbx-radius-row    r x 0.6 (rows, cards, buttons)
+     --lbx-radius-tile   r x 0.5 (picture tiles)
+   The --lbx-c-* properties are the high-contrast mode's palette (core/a11y.ts),
+   inherited from the document: unset, every rule keeps its normal value. */
+:host {
+  all: initial;
+  --lbx-font: var(--lbx-s-font, system-ui, sans-serif);
+  --lbx-fg: var(--lbx-s-fg, #1a1a1a);
+  --lbx-bg: var(--lbx-s-bg, #fff);
+  --lbx-accent: var(--lbx-s-accent, #1a1a1a);
+  --lbx-radius: var(--lbx-s-radius, 4px);
+  --lbx-on-accent: var(--lbx-s-on-accent, #fff);
+  --lbx-muted: color-mix(in srgb, var(--lbx-fg) 66%, var(--lbx-bg));
+  --lbx-line: color-mix(in srgb, var(--lbx-fg) 11%, var(--lbx-bg));
+  --lbx-soft: color-mix(in srgb, var(--lbx-fg) 4%, var(--lbx-bg));
+  --lbx-tint: color-mix(in srgb, var(--lbx-accent) 10%, var(--lbx-bg));
+  --lbx-tint-strong: color-mix(in srgb, var(--lbx-accent) 28%, var(--lbx-bg));
+  --lbx-ok: #1f7a35;
+  --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%; }
+/* 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));
+  --c-bg: var(--lbx-c-bg, var(--lbx-bg));
+  --c-muted: var(--lbx-c-muted, var(--lbx-muted));
+  --c-line: var(--lbx-c-line, var(--lbx-line));
+  --c-accent: var(--lbx-c-accent, var(--lbx-accent));
+  --c-fill: var(--lbx-c-sel-bg, var(--lbx-accent));
+  --c-on-fill: var(--lbx-c-sel-fg, var(--lbx-on-accent));
+  --c-ok: var(--lbx-c-fg, var(--lbx-ok));
+  --c-tint: var(--lbx-tint);
+  box-sizing: border-box; font-family: var(--lbx-font); font-size: 14px; line-height: 1.35; color: var(--c-fg);
+}
+.box *, .sheet *, .box *::before, .sheet *::after { box-sizing: border-box; }
+h3, p { margin: 0; font: inherit; }
+a { color: inherit; text-decoration: none; }
+button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
+.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+/* ---- the panel -------------------------------------------------------- */
+.caret { display: block; position: relative; width: 14px; height: 14px; margin: 0 0 -7px var(--lbx-caret, 30px); transform: rotate(45deg); background: var(--c-fill); border-radius: 2px; }
+.panel { position: relative; background: var(--c-bg); border-top: 3px solid var(--c-fill); border-radius: 0 0 var(--lbx-radius) var(--lbx-radius);
+  box-shadow: 0 30px 60px -20px rgb(30 42 51 / .28), 0 2px 8px rgb(30 42 51 / .06); overflow: hidden; }
+.cols { display: flex; max-height: var(--lbx-max-h, 70vh); overflow: auto; }
+.list { flex: none; width: 280px; padding: 20px 16px 16px; background: var(--lbx-soft); display: flex; flex-direction: column; gap: 18px; }
+.only-list .list { width: 100%; }
+.hero-col { flex: none; width: 310px; padding: 20px 24px 24px; border-right: 1px solid var(--c-line); display: flex; flex-direction: column; }
+.prods { flex: 1; min-width: 0; padding: 20px 24px 86px; display: flex; flex-direction: column; }
+.grp { display: flex; flex-direction: column; gap: 2px; }
+.grp h3 { padding: 0 4px 6px; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--c-fg); }
+.hero-col .grp, .prods .grp { gap: 12px; }
+.hero-col .grp { flex: 1; }
+.hero-col .grp h3, .prods .grp h3 { padding: 0; }
+.pills { display: flex; flex-wrap: wrap; gap: 6px; }
+.pby { margin-top: auto; padding: 8px 4px 0; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--c-muted); }
+.logo { width: 14px; height: 14px; flex: none; border-radius: 3px; background: #35c2d6; display: flex; align-items: center; justify-content: center; }
+
+/* Options: every one is the selection the arrow keys and the pointer move. */
+.opt { display: flex; align-items: center; cursor: pointer; color: inherit; position: relative; }
+/* On a selected option's tint the green and the accent are a step darker (towards the text colour): small
+   text such as the stock line can fall under 4.5:1 on an accent tint otherwise. */
+.opt[aria-selected="true"] { --c-muted: var(--lbx-c-sel-fg, var(--lbx-muted)); --c-ok: var(--lbx-c-sel-fg, color-mix(in srgb, var(--lbx-ok) 75%, var(--lbx-fg)));
+  --c-accent: var(--lbx-c-sel-fg, color-mix(in srgb, var(--lbx-accent) 85%, var(--lbx-fg))); }
+/* Query pills: selected, an accent fill. */
+.pill { height: 32px; padding: 0 12px; border-radius: 999px; background: var(--c-tint); color: var(--c-fg); font-size: 14px; white-space: nowrap; max-width: 100%; }
+.pill .t { overflow: hidden; text-overflow: ellipsis; }
+.pill[aria-selected="true"] { background: var(--c-fill); color: var(--c-on-fill); }
+/* List rows: one line; selected, the panel's background with an accent edge (WCAG 1.4.11: not a faint colour alone). */
+.row { min-height: 32px; padding: 4px 8px 4px 4px; gap: 10px; border-radius: var(--lbx-radius-row); font-size: 14px; }
+.row .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.row[aria-selected="true"] { background: var(--lbx-c-sel-bg, var(--c-bg)); color: var(--lbx-c-sel-fg, inherit); box-shadow: inset 3px 0 0 var(--c-fill); }
+/* Products: selected, the tint with an accent ring. */
+.hero[aria-selected="true"], .card[aria-selected="true"], .line[aria-selected="true"], .mhero[aria-selected="true"], .mproduct[aria-selected="true"], .compact[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 2px var(--c-fill); }
+.tile { flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--lbx-radius-tile); background: var(--lbx-soft); overflow: hidden; }
+.tile img, .pic img { width: 100%; height: 100%; object-fit: contain; }
+.stock { display: flex; align-items: center; gap: 6px; font-size: 12px; min-width: 0; }
+.dot { width: 7px; height: 7px; flex: none; border-radius: 999px; background: var(--c-ok); }
+.avail { color: var(--c-ok); font-weight: 700; white-space: nowrap; }
+.cat { color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.prices { display: flex; gap: 6px; align-items: baseline; font-variant-numeric: tabular-nums; }
+.now { font-size: 15px; font-weight: 800; }
+.old { font-size: 12px; color: var(--c-muted); }
+.body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
+.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); }
+.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; }
+.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); }
+.sp { padding: 7px 0; display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--c-line); font-size: 13px; }
+.specs .k { color: var(--c-muted); }
+.specs .v { font-weight: 600; text-align: right; }
+
+/* Product cards (grid, 2 columns) and product rows (list layout). */
+.p-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
+.card { padding: 8px; gap: 14px; border-radius: var(--lbx-radius-row); }
+.card .tile { width: 84px; height: 84px; }
+.card .t { font-size: 14px; font-weight: 700; }
+.p-list { display: flex; flex-direction: column; }
+.line { display: grid; grid-template-columns: 48px minmax(0, 1fr) 110px 90px; gap: 14px; padding: 10px 8px; border-bottom: 1px solid var(--c-line); border-radius: var(--lbx-radius-row); }
+.line .tile { width: 48px; height: 48px; }
+.line .t { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.line .body { gap: 3px; }
+.meta { font-size: 12px; color: var(--c-muted); font-variant-numeric: tabular-nums; }
+.line .prices { justify-content: flex-end; flex-direction: column; align-items: flex-end; gap: 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); }
+.box .all { position: absolute; right: 24px; bottom: 20px; left: 24px; }
+.box.has-list .all { left: 304px; }
+.box.has-hero .all { left: 334px; }
+.box.has-list.has-hero .all { left: 614px; }
+
+/* @lbx-part autocomplete-empty: left out of a build whose integration replaces this template and uses none of its classes (build/vite.mjs) */
+/* ---- no results: a layout of its own -------------------------- */
+.msg-row { padding: 28px 32px 26px; display: flex; gap: 32px; align-items: stretch; }
+.msg { flex: 1; min-width: 0; display: flex; gap: 20px; }
+.ico { width: 56px; height: 56px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--c-tint); color: var(--c-accent); }
+.msg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
+.e-title { font-size: 22px; line-height: 1.3; font-weight: 800; letter-spacing: -.01em; color: var(--c-fg); }
+.e-hint { font-size: 15px; line-height: 1.5; color: var(--c-muted); }
+.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 { 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 { 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; }
+.phone-ico { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 1.5px solid var(--c-accent); color: var(--c-accent); }
+.help-text { display: flex; flex-direction: column; gap: 2px; }
+.help-title { font-size: 14px; color: var(--c-accent); font-weight: 700; }
+.phone { font-size: 22px; font-weight: 800; color: var(--c-accent); letter-spacing: .01em; }
+.help-hours { font-size: 13px; color: var(--c-muted); }
+.strip { padding: 18px 32px 22px; background: var(--lbx-soft); border-top: 1px dashed var(--c-line); display: flex; flex-direction: column; gap: 12px; }
+.strip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
+.strip-head .pby { margin: 0; padding: 0; }
+.note-wrap { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
+.f-title { font-size: 14px; font-weight: 700; color: var(--c-muted); }
+.f-note { font-size: 13px; color: var(--c-muted); }
+.fb { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
+.compact { padding: 8px; gap: 12px; border-radius: var(--lbx-radius-row); background: var(--c-bg); box-shadow: inset 0 0 0 1px var(--c-line); }
+.compact .tile { width: 52px; height: 52px; }
+.compact .body { gap: 3px; }
+.compact .t, .compact .now { font-size: 13px; }
+.compact .now { font-weight: 700; }
+.e-foot { padding: 0 32px 16px; display: flex; justify-content: flex-end; }
+.e-foot .pby { margin: 0; }
+
+/* @lbx-part-end */
+/* @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); }
+.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); }
+/* 17 px: iOS zooms into a field under 16 px. */
+.sh-input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 17px; color: var(--c-fg); padding: 0 4px; }
+.sh-phrases { flex: none; padding: 12px 16px; display: flex; gap: 8px; overflow-x: auto; background: var(--lbx-soft); touch-action: pan-x; }
+.sheet .pill { height: 36px; padding: 0 14px; flex: none; font-size: 15px; }
+.tabs { height: 48px; flex: none; padding: 0 8px; display: flex; overflow-x: auto; border-bottom: 1px solid var(--c-line); touch-action: pan-x; }
+.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; }
+.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); }
+.m-products { gap: 0; }
+.m-products h3 { padding: 16px 16px 4px; font-size: 13px; color: var(--c-muted); }
+.mhero { gap: 14px; align-items: flex-start; padding: 8px; margin: -8px; border-radius: var(--lbx-radius-row); }
+.mhero .tile { width: 120px; height: 120px; }
+.mhero .body { gap: 6px; }
+.mhero .t { font-size: 16px; line-height: 1.3; font-weight: 700; }
+.mhero .stock, .mproduct .stock { font-size: 13px; }
+.mhero .now { font-size: 22px; }
+.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; }
+.mproduct .now { font-size: 16px; }
+.mrow { min-height: 56px; padding: 0 16px; gap: 12px; border-bottom: 1px solid var(--c-line); font-size: 16px; }
+.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; }
+.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; }
+.sheet .msg-row { padding: 28px 20px 20px; flex-direction: column; gap: 20px; }
+.sheet .msg { flex-direction: column; gap: 10px; }
+.sheet .ico { width: 52px; height: 52px; }
+.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 .opt.browse { min-height: 48px; margin: 0 -6px; padding: 0 6px; justify-content: space-between; font-size: 16px; }
+.sheet .browse .chev { display: block; }
+.sheet .help { width: auto; padding: 16px; }
+.sheet .help-text { flex: 1; }
+.sheet .help-title { font-size: 15px; }
+.call { height: 44px; padding: 0 14px; display: flex; align-items: center; gap: 8px; border-radius: var(--lbx-radius-row); border: 1.5px solid var(--c-accent); color: var(--c-accent); font-size: 15px; font-weight: 700; }
+.sheet .strip { padding: 16px 16px 20px; gap: 10px; }
+.sheet .note-wrap { flex-direction: column; gap: 2px; }
+.sheet .fb { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
+.sheet .compact { flex-direction: column; align-items: stretch; gap: 6px; }
+.sheet .compact .tile { width: auto; height: 72px; }
+.sheet .compact .now { font-size: 14px; }
+.sheet .strip .pby { margin: 0; padding-top: 8px; justify-content: center; font-size: 13px; }
+.sheet .e-foot { padding: 0 16px 20px; justify-content: center; }
+
+/* @lbx-part-end */
+/* The sheet's and the panel's own scrolling never scrolls the page behind (where the browser has it). */
+@supports (overscroll-behavior: contain) {
+  .cols, .sheet, .sh-list, .sheet .empty { overscroll-behavior: contain; }
+}
+@supports (scrollbar-width: none) {
+  .sh-phrases, .tabs { scrollbar-width: none; }
+}
+
+/* Windows contrast themes: backgrounds and shadows are the system's, so the
+   selection is drawn in system colours, and the panel keeps its edge. */
+@media (forced-colors: active) {
+  .panel, .sheet { border: 1px solid CanvasText; border-top-width: 3px; }
+  .opt[aria-selected="true"], .tab[aria-selected="true"] { box-shadow: none; outline: 2px solid CanvasText; outline-offset: -2px; }
+  /* Filled in system colours where the browser lets us opt out of forcing
+     (forced-color-adjust is not Baseline): elsewhere the outline marks it. */
+  @supports (forced-color-adjust: none) {
+    .opt[aria-selected="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
+    .opt[aria-selected="true"] * { color: HighlightText; }
+  }
+  .all, .pill, .try, .compact { border: 1px solid CanvasText; }
+}

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

@@ -0,0 +1,61 @@
+import { html, nothing, repeat } from '../../lit';
+import type { AutocompleteScope } from '../../types';
+
+// The house design's panel: an accent
+// bar and a caret under the search field; the list column (query pills, then
+// one titled group per other type in config order, "Powered by Luigi's Box"),
+// the top product, the products beside it, "Show all products". A listbox of
+// options in labelled groups (WAI-ARIA APG combobox): the host's input is the
+// combobox (index.ts), focus stays in it. "Show all products" (a link to the
+// search page, the dropdown's one tab stop: data-lbx-all) is outside the
+// listbox, as is the "No results" layout (autocomplete-empty). On a phone:
+// autocomplete-sheet. No counts anywhere: the API returns none.
+
+export const POWERED = (t: AutocompleteScope['t']) =>
+  html`<span class="pby" aria-hidden="true"><span class="logo"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg></span>${t('poweredBy')}</span>`;
+export const ARROW = html`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"></path></svg>`;
+
+/** A titled group of options: its heading names it. */
+export const group = (id: string, label: string, body: unknown, cls = '') =>
+  html`<div class=${`grp ${cls}`} role="group" data-lbx-part="ac-section" aria-labelledby=${`lbx-ac-g-${id}`}>
+    <h3 role="presentation" data-lbx-part="ac-title" id=${`lbx-ac-g-${id}`}>${label}</h3>${body}
+  </div>`;
+
+export const showAll = (s: AutocompleteScope) =>
+  s.allHref
+    ? html`<a class="all" data-lbx-part="ac-all" data-lbx-all href=${s.allHref} @click=${(e: MouseEvent) => !(e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) && (e.preventDefault(), s.submitAll())}>${s.t('showAllProducts')}${ARROW}</a>`
+    : 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');
+  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;
+  const prods = s.products.length > 0 || !!s.hero;
+  const cls = `box${list ? ' has-list' : ''}${s.hero ? ' has-hero' : ''}${prods ? ' has-products' : ''}${list && !prods ? ' only-list' : ''}`;
+  return html`
+    <div class=${cls} data-lbx-part="ac-panel">
+      <span class="caret" aria-hidden="true"></span>
+      <div class="panel">
+        ${s.state !== 'results'
+          ? s.include('autocomplete-empty')
+          : html`<div class="cols" role="listbox" id="lbx-ac-listbox" aria-label=${s.t('label')}>
+                ${list
+                  ? html`<div class="list">
+                      ${s.phrases.length ? group('query', s.t('phrases'), html`<div class="pills">${repeat(s.phrases, key, (p) => opt(p, 'pill'))}</div>`) : nothing}
+                      ${s.lists.map((g) => group(g.kind, g.label, repeat(g.rows, key, (row) => opt(row, 'row'))))}
+                      ${POWERED(s.t)}
+                    </div>`
+                  : nothing}
+                ${s.hero ? html`<div class="hero-col">${group('hero', s.t('topProduct'), opt(s.hero, 'hero'), `v-${s.heroVariant}`)}</div>` : nothing}
+                ${s.products.length
+                  ? html`<div class="prods">${group('products', s.t('products'), html`<div class=${s.productLayout === 'list' ? 'p-list' : 'p-grid'}>${repeat(s.products, key, (p) => opt(p, s.productLayout === 'list' ? 'line' : 'card'))}</div>`)}</div>`
+                  : prods
+                    ? html`<div class="prods"></div>`
+                    : nothing}
+              </div>
+              ${prods ? showAll(s) : nothing}`}
+      </div>
+    </div>
+  `;
+};

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

@@ -0,0 +1,53 @@
+import { html, nothing } from '../../lit';
+import type { AutocompleteScope } from '../../types';
+import { POWERED, group } from './template-autocomplete-box';
+import { GLASS } from './template-autocomplete-result-default';
+
+// "No results" in the house design: a layout of its own, so it
+// never passes for results (no pills, columns, top product or "Show all").
+// The message, phrases to try (handed to the site's search), links to
+// browse, the optional help box (`autocomplete.help.phone` set), then the
+// fallback products apart, on a quiet strip that says they are not results
+// for this search. The chips, links and cards are options (the arrow keys:
+// chips, links, cards), in listboxes; the help box's phone link is not.
+
+export default (s: AutocompleteScope) => {
+  const { tries, browse, fallback, help } = s.empty;
+  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
+          ? 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>
+              <span class="help-text"><span class="help-title">${help.title}</span><a class="phone" href=${`tel:${help.tel}`}>${help.phone}</a>${help.hours ? html`<span class="help-hours">${help.hours}</span>` : nothing}</span>`}
+      </div>`
+    : nothing;
+  return html`
+    <div class="empty" data-lbx-part="ac-empty">
+      <div class="msg-row">
+        <div class="msg">
+          <span class="ico" aria-hidden="true">${GLASS(26)}</span>
+          <div class="msg-body">
+            <p class="e-title">${s.t('empty', { query: s.query })}</p>
+            <p class="e-hint">${s.t('emptyHint')}</p>
+            ${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}
+                </div>`
+              : nothing}
+          </div>
+        </div>
+        ${helpBox}
+      </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="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}
+          </div>`
+        : html`<div class="e-foot">${POWERED(s.t)}</div>`}
+    </div>
+  `;
+};

package/src/widgets/autocomplete/template-autocomplete-result-default.ts

@@ -0,0 +1,82 @@
+import { html, ifDefined, nothing } from '../../lit';
+import type { AutocompleteResultScope, Result } from '../../types';
+
+// One option of the house design, drawn
+// as `as` says: a query pill, a list row, the top product, a product card
+// or row, the phone sheet's rows, a "No results" chip, link or fallback card. Every option is
+// one link (a query suggestion has no href: its text goes to the site's
+// search) and never a tab stop; the pointer over it moves the selection.
+// Every product field is optional: what a result lacks is not drawn. No add
+// to cart, no counts.
+
+export const CHEVRON = html`<svg class="chev" 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"><path d="m9 6 6 6-6 6"></path></svg>`;
+export const GLASS = (size = 14) =>
+  html`<svg class="glass" width=${size} height=${size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg>`;
+
+export default (s: AutocompleteResultScope) => {
+  const { r, i, active, choose, hover, unhover, price, field, t, as = 'row' } = s;
+  // A square picture box (its size from the option's class: no inline style, which a strict CSP refuses).
+  const pic = (size: number) => html`<span class="tile">${r.c.image ? html`<img data-lbx-part="image" src=${r.c.image} alt="" width=${size} height=${size} decoding="async" />` : nothing}</span>`;
+  const stock = (rr: Result, cat = true) => {
+    const a = field(rr, 'availability');
+    const c = cat ? field(rr, 'category') : '';
+    return a || c
+      ? html`<span class="stock">${a ? html`<span class="dot"></span><span class="avail">${a}</span>` : nothing}${c ? html`<span class="cat">${a ? '· ' : ''}${c}</span>` : nothing}</span>`
+      : nothing;
+  };
+  // A number is formatted (`price`, the site's currency); a text (a computed
+  // attribute in the shop's own format, `productFields.price`) is shown as it is.
+  const money = (v: unknown) => (typeof v === 'number' || /^\s*\d+(?:\.\d+)?\s*$/.test(String(v)) ? price(v) : String(v));
+  const now = field(r, 'price') || r.c.price;
+  const old = field(r, 'oldPrice');
+  const prices = (cls: string) =>
+    now || old
+      ? html`<span class=${cls}>${old ? html`<s class="old" data-lbx-part="old-price"><span class="sr">${t('was')} </span>${money(old)}</s>` : nothing}${now ? html`<span class="now" data-lbx-part="price">${money(now)}</span>` : nothing}</span>`
+      : nothing;
+  const title = (cls: string) => html`<span class=${cls} data-lbx-part="title">${r.c.title}</span>`;
+  let body: unknown;
+  switch (as) {
+    case 'pill':
+      body = title('t');
+      break;
+    case 'try':
+      body = html`${GLASS()}${title('t')}`;
+      break;
+    case 'browse':
+      body = html`<span class="t" data-lbx-part="title">${r.c.title}</span>${CHEVRON}`;
+      break;
+    case 'hero': {
+      const badge = field(r, 'badge');
+      const specs = s.heroVariant === 'spec' ? s.specs(r) : [];
+      body = html`<span class="pic">${r.c.image ? html`<img data-lbx-part="image" src=${r.c.image} alt="" decoding="async" />` : nothing}${badge ? html`<span class="badge" data-lbx-part="badge">${badge}</span>` : nothing}</span>
+        ${title('t')}
+        ${specs.length ? html`<span class="specs">${specs.map((x) => html`<span class="sp"><span class="k">${x.label}</span><span class="v">${x.value}</span></span>`)}</span>` : nothing}
+        ${stock(r)} ${prices('prices')}`;
+      break;
+    }
+    case 'card':
+      body = html`${pic(84)}<span class="body">${title('t')}${stock(r)}${prices('prices')}</span>`;
+      break;
+    case 'line': {
+      const meta = field(r, 'meta');
+      body = html`${pic(48)}<span class="body">${title('t')}${meta ? html`<span class="meta">${meta}</span>` : nothing}</span>${stock(r, false)}${prices('prices')}`;
+      break;
+    }
+    case 'mhero':
+      body = html`${pic(120)}<span class="body">${title('t')}${stock(r)}${prices('prices')}</span>`;
+      break;
+    case 'mproduct':
+      body = html`${pic(72)}<span class="body">${title('t')}${stock(r)}${prices('prices')}</span>`;
+      break;
+    case 'mrow':
+      body = html`${title('t')}${CHEVRON}`;
+      break;
+    case 'compact':
+      body = html`${pic(52)}<span class="body"><span class="t" data-lbx-part="title">${r.c.title}</span>${prices('prices')}</span>`;
+      break;
+    default: // 'row'
+      body = title('t');
+  }
+  return html`<a class=${`opt ${as}`} data-lbx-part="ac-row" role="option" tabindex="-1" id=${`lbx-ac-${i}`} aria-selected=${i === active ? 'true' : 'false'}
+    href=${ifDefined(r.type === 'query' ? undefined : r.c.url || undefined)} @click=${(e: Event) => (e.preventDefault(), choose(i))} @pointerenter=${(e: PointerEvent) => hover(i, e)} @pointerleave=${(e: PointerEvent) => unhover(i, e)}>${body}</a>`;
+};

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

@@ -0,0 +1,74 @@
+import { html, nothing, repeat } from '../../lit';
+import type { AutocompleteScope } from '../../types';
+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.
+// Its input is the combobox (index.ts): it controls both listboxes and
+// points at the selected option (aria-activedescendant, set by index.ts).
+
+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 key = (row: { r: any; i: number }) => `${row.i}:${row.r.id}`;
+  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);
+  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;
+  const controls = (
+    results
+      ? [s.phrases.length && 'lbx-ac-phrases', s.tabs.length && 'lbx-ac-listbox']
+      : s.state === 'empty'
+        ? [(e.tries.length || e.browse.length) && 'lbx-ac-listbox', e.fallback.length && 'lbx-ac-fallback']
+        : []
+  )
+    .filter(Boolean)
+    .join(' ');
+  return html`
+    <div class="sheet" data-lbx-part="ac-panel">
+      <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" 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
+          ? html`<button type="button" class="icon clear" aria-label=${s.t('clear')} @click=${() => s.clear()}><span class="x"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"></path></svg></span></button>`
+          : nothing}
+      </div>
+      ${s.state === 'empty'
+        ? s.include('autocomplete-empty')
+        : results
+          ? html`
+              ${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
+                ? html`<div class="tabs" role="tablist" aria-label=${s.t('tabs')}>
+                    ${s.tabs.map(
+                      (x) =>
+                        html`<button type="button" role="tab" class="tab" id=${`lbx-ac-tab-${x.kind}`} aria-selected=${x.selected ? 'true' : 'false'} aria-controls="lbx-ac-panel" tabindex=${x.selected ? '0' : '-1'} @click=${() => x.select()}>${x.label}</button>`,
+                    )}
+                  </div>`
+                : nothing}
+              <div class="sh-list" role="tabpanel" id="lbx-ac-panel" aria-labelledby=${open ? `lbx-ac-tab-${open.kind}` : nothing}>
+                ${s.tabs.length
+                  ? html`<div role="listbox" id="lbx-ac-listbox" aria-label=${s.t('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}
+                ${POWERED(s.t)}
+              </div>
+              ${s.hero ? html`<div class="sh-foot">${showAll(s)}</div>` : nothing}`
+          : nothing}
+    </div>
+  `;
+};