@magicx-eng/ai-autocomplete-vanilla 0.51.1 → 0.52.0

package/README.md

@@ -642,7 +642,7 @@ unsub();
 
 > **Option icons.** An option may carry an icon: `icon_svg` is inline SVG markup and `icon` its name. The built-in dropdown draws the SVG before the option's text, in the text color, and hides it while the row shows its loading skeleton. When rendering options yourself, pass `icon_svg` through the exported `sanitizeOptionIconSvg` before inserting it — it reduces the markup to plain vector drawing and returns `null` for anything else — and use `optionLabel(option)` for the text — it is the option's `text` alone; `icon` is the icon's name and is never shown as text, even when `icon_svg` is missing or fails to draw. A picked option's `icon` / `icon_svg` are copied onto its completed parameter, and the chip in the input draws the glyph before its text. Both surfaces can be switched off: `showOptionIcons: false` renders option rows as text only and `showChipIcons: false` renders chips as text only; either way the icon element is omitted rather than hidden.
 
-> **Option pictures and counts.** An option may also carry `image_url` — a picture of the best-matching catalog item offering it — and `item_count`, how many items offer it (each is present only when the server includes it; when it includes counts, the options also arrive ordered by them, most items first; a starting state carries pictures but no counts). The built-in dropdown draws the picture as a square thumbnail before the option's text (in place of its `icon_svg`, so a row never leads with two visuals) and the count as a muted label at the row's trailing edge (`"12 items"`); a skeleton row keeps the tile's placeholder fill and hides the count. Icons and pictures are all-or-nothing per list: if any tappable option would draw neither, no row draws one, so a list never mixes rows with and without a leading visual (non-tappable rows don't count). A custom dropdown can apply the same rule with the exported `optionsShowLeadingVisuals(options, showIcons, showImages)`. The unit word after the number is a token: set `--aia-option-count-unit: "sneakers"` to name what is being counted, `--aia-option-count-unit-one: "sneaker"` for a count of 1 (it falls back to the plural token), or `--aia-option-count-unit: ""` for the number alone. When rendering options yourself, pass `image_url` through the exported `optionImageSrc` before using it as an `<img src>` — it returns the URL only when it is `http(s)` and `null` otherwise — and `formatOptionCount(option.item_count)` gives the number the built-in rows print (`null` when there is no count); `optionCountLabel(count, unit?)` appends a unit for a dropdown that prints the word itself (`"item"` / `"items"` by default; one word, a `{ one, other }` pair, or `""` for none). Both surfaces can be switched off: `showOptionImages: false` renders rows without pictures (an option's icon then draws instead) and `showOptionCounts: false` hides the counts. A picked option's `image_url` is copied onto its completed parameter too, and the chip in the input draws it as a small rounded tile before its text, in place of the icon; `showChipImages: false` renders chips without pictures (the icon then draws instead). The tile is sized by `--aia-option-image-size` (40px), rounded by `--aia-option-image-radius` (12px), spaced by `--aia-option-image-gap` (12px) and filled by `--aia-option-image-bg` (default: `--aia-skeleton-bg`) while its picture loads; in a grid with pictures, an icon row draws its glyph at `--aia-option-tile-icon-size` (1.5em) so it holds the picture column; the count reads `--aia-option-count-font-size` (12px), `--aia-option-count-color` and `--aia-option-count-opacity` (0.6); the chip's tile reads `--aia-chip-image-size` (1.25em of the chip's font), `--aia-chip-image-radius` (4px) and `--aia-chip-image-bg` (default: `--aia-skeleton-bg`).
+> **Option pictures and counts.** An option may also carry `image_url` — a picture of the best-matching catalog item offering it — and `item_count`, how many items offer it (each is present only when the server includes it; when it includes counts, the options also arrive ordered by them, most items first; a starting state carries pictures but no counts). The built-in dropdown draws the picture as a square thumbnail before the option's text (in place of its `icon_svg`, so a row never leads with two visuals) and the count as a muted label at the row's trailing edge (`"12 items"`); a skeleton row keeps the tile's placeholder fill and hides the count. Icons and pictures are all-or-nothing per list: if any tappable option would draw neither, no row draws one, so a list never mixes rows with and without a leading visual (non-tappable rows don't count). A custom dropdown can apply the same rule with the exported `optionsShowLeadingVisuals(options, showIcons, showImages)`. The unit word after the number is a token: set `--aia-option-count-unit: "sneakers"` to name what is being counted, `--aia-option-count-unit-one: "sneaker"` for a count of 1 (it falls back to the plural token), or `--aia-option-count-unit: ""` for the number alone. When rendering options yourself, pass `image_url` through the exported `optionImageSrc` before using it as an `<img src>` — it returns the URL only when it is `http(s)` and `null` otherwise — and `formatOptionCount(option.item_count)` gives the number the built-in rows print (`null` when there is no count); `optionCountLabel(count, unit?)` appends a unit for a dropdown that prints the word itself (`"item"` / `"items"` by default; one word, a `{ one, other }` pair, or `""` for none). Both surfaces can be switched off: `showOptionImages: false` renders rows without pictures (an option's icon then draws instead) and `showOptionCounts: false` hides the counts. A picked option's `image_url` is copied onto its completed parameter too, and the chip in the input draws it as a small rounded tile before its text, in place of the icon; `showChipImages: false` renders chips without pictures (the icon then draws instead). The tile is sized by `--aia-option-image-size` (40px), rounded by `--aia-option-image-radius` (12px), spaced by `--aia-option-image-gap` (12px) and filled by `--aia-option-image-bg` (default: `--aia-skeleton-bg`) as a placeholder until its picture loads (and on skeleton rows, or if the picture fails); a loaded picture is scaled to fit rather than cropped and sits on the dropdown's background, and one narrower than the tile is rounded on its own corners by `--aia-option-picture-radius` (6px); in a grid with pictures, an icon row draws its glyph at `--aia-option-tile-icon-size` (1.5em) so it holds the picture column; the count reads `--aia-option-count-font-size` (12px), `--aia-option-count-color` and `--aia-option-count-opacity` (0.6); the chip's tile reads `--aia-chip-image-size` (1.25em of the chip's font), `--aia-chip-image-radius` (4px) and `--aia-chip-image-bg` (default: `--aia-skeleton-bg`), the placeholder fill shown until the picture loads; a loaded picture narrower than the tile narrows it to the picture's own width, so the radius rounds the picture.
 
 > **Parameter names under options.** An option that completes the word being typed (the server's `traditional_autocomplete` suggestion) can read the same as an option of another parameter, so the built-in dropdown draws the name of the parameter it answers under its text, muted and smaller (`Flavor`, `Subcategory`); the SDK sets it as `parameterLabel` from the option's `parameter`, and a skeleton row hides it. It reads `--aia-option-parameter-font-size` (12px), `--aia-option-parameter-color` and `--aia-option-parameter-opacity` (0.6).
 
@@ -877,6 +877,15 @@ This is the way to embed the widget in a page whose CSS you don't control. In th
 
 Override these on the container element. The variables are declared with `:where()` (zero specificity), so a value you set on the container always wins without `!important`.
 
+The full input also accepts `--aia-input-radius` and `--aia-written-text-font-weight` on its container or an ancestor. Omit them to retain the default `10px` radius and `300` weight; changing `mode` does not reset these overrides. In dropdown-only integrations, style your own input directly.
+
+```css
+.my-search {
+  --aia-input-radius: 0;
+  --aia-written-text-font-weight: 500;
+}
+```
+
 | Variable | Default (light) | Default (dark) | Description |
 |---|---|---|---|
 | `--aia-font-family` | `inherit` | `inherit` | Font used by the library. Defaults to `inherit` so the library picks up your page's font automatically. Set this to pin a specific font on the library without changing the surrounding page. |
@@ -889,12 +898,14 @@ Override these on the container element. The variables are declared with `:where
 | `--aia-option-font-size` | `19px` | `19px` | Option font size |
 | `--aia-written-text-color` | `#000000` | `#ffffff` | Input text |
 | `--aia-written-text-font-size` | `19px` | `19px` | Input text font size |
+| `--aia-written-text-font-weight` | `300` | `300` | Written text weight in the full input. Completed chips keep their own typography. |
 | `--aia-caret-color` | `--aia-written-text-color` | `--aia-written-text-color` | Editor caret color. Override independently of input text color. |
 | `--aia-submit-bg` | `#000000` | `#ffffff` | Submit button background. Solid + full-opacity at rest, even when the input is empty/disabled. |
 | `--aia-submit-color` | `#ffffff` | `#000000` | Submit button arrow color |
 | `--aia-submit-bg-disabled` | `--aia-submit-bg` | `--aia-submit-bg` | Submit background when disabled (empty input). Defaults to the enabled background so themed colors aren't washed out. Set this for a faded rest state. |
 | `--aia-submit-color-disabled` | `--aia-submit-color` | `--aia-submit-color` | Submit arrow color when disabled. Defaults to the enabled color. |
 | `--aia-border` | `rgba(17, 24, 39, 0.14)` | `#505050` | Input container border color |
+| `--aia-input-radius` | `10px` | `10px` | Full input corner radius. Set `0` for square corners. |
 | `--aia-shadow` | `none` | `none` | Input container elevation (box-shadow). Flat by default; set it to add one |
 | `--aia-dropdown-offset` | `13px` | `13px` | Gap between the input box and the dropdown (the dropdown's margin toward the input). |
 | `--aia-content-inset-left` | `16px` | `16px` | Left inset of the SDK's content: the input wrapper's left padding, and the line the dropdown's content (parameter label, option text, product strip) starts on. Set it when you pad the field to clear a leading icon of your own, so the dropdown's content stays aligned under the typed text. Practical minimum is `10px` (the option text's own inset); both surfaces floor it there. |
@@ -907,9 +918,10 @@ Override these on the container element. The variables are declared with `:where
 | `--aia-product-gap` | `8px` | `8px` | Gap between product cards. |
 | `--aia-product-bg` | `transparent` | `transparent` | Product card background. |
 | `--aia-product-bg-active` | `--aia-option-bg` | `--aia-option-bg` | Product card background on hover. |
-| `--aia-product-media-bg` | `--aia-skeleton-bg` | `--aia-skeleton-bg` | Fill behind product images and both fallback tiles (placeholder pictogram or title initial), used when an image URL is missing, blank or fails to load. |
+| `--aia-product-media-bg` | `--aia-skeleton-bg` | `--aia-skeleton-bg` | Placeholder fill of the product tile: shown until the photo loads, and behind both fallback tiles (placeholder pictogram or title initial) used when an image URL is missing, blank or fails to load. Once a photo loads the tile is transparent. |
 | `--aia-scroll-arrow-color` | `--aia-option-color` | `--aia-option-color` | Chevron color of the arrow (`--aia-scroll-arrow-color-hover` on hover). |
 | `--aia-placeholder-fade` | `120ms` | `120ms` | Fade-out of the outgoing placeholder phrase when the starting-state placeholder changes (the incoming one types itself in). |
+| `--aia-product-image-radius` | `8px` | `8px` | Corner radius of a product photo narrower than its square tile (a tall one), which is scaled to fit rather than cropped. A photo that fills the tile takes the tile's own 8px corners. |
 | `--aia-product-placeholder-image` | storefront pictogram | storefront pictogram | The pictogram used by `productImageFallback: "image"` (the default) when an image URL is missing, blank or fails to load. Defaults to a two-tone storefront inlined as a data URI. Set any `url(...)` to swap it; it is centered and contained over `--aia-product-media-bg`. Does not affect `"initial"` tiles. |
 | `--aia-product-title-color` | `--aia-option-color-selected` | `--aia-option-color-selected` | Product title text. Follows the option colors by default, so theming the panel moves suggestions and products together. |
 | `--aia-product-price-color` | `--aia-option-color-selected` | `--aia-option-color-selected` | Product price text. |

package/dist/index.d.mts

@@ -2392,12 +2392,17 @@ declare function productImageSrc(url: string | null | undefined): string | undef
  * viewport by default, iOS Safari never resizes the layout one), so
  * `innerHeight` alone would never see the keyboard.
  *
- * Once a panel is fitted it stays fitted until it closes. Fitted and unfitted
- * look the same whenever everything fits — the only difference is whether a
- * long option list scrolls on its own or with the rest — so there is no
- * reason to measure the unfitted height again (which would mean undoing the
- * layout, and the shopper's scroll position with it). Each opening decides
- * afresh.
+ * A fitted panel goes back to the normal layout as soon as that layout fits
+ * again: a window enlarged or zoomed out, the keyboard closed, the page
+ * scrolled, a shorter question. The two layouts are not interchangeable even
+ * when the space is there: fitting lifts the options grid's row cap, so a
+ * long option list is drawn in full and pushes the product strip below the
+ * fold (2026-11-04, a dashboard preview zoomed out to 50% kept its fitted
+ * panel and the strip was out of sight). Measuring the normal layout means
+ * dropping the attribute for one synchronous read — nothing paints in
+ * between — and restoring the stack's scroll if the panel stays fitted. That
+ * height depends on the content, not the space, so it is measured once per
+ * content and only compared on the scroll and resize frames that follow.
  *
  * The DOM differs per package, so like the scroll arrow the behaviour lives in
  * this one controller: each package hands it its dropdown element and a way

package/dist/index.d.ts

@@ -2392,12 +2392,17 @@ declare function productImageSrc(url: string | null | undefined): string | undef
  * viewport by default, iOS Safari never resizes the layout one), so
  * `innerHeight` alone would never see the keyboard.
  *
- * Once a panel is fitted it stays fitted until it closes. Fitted and unfitted
- * look the same whenever everything fits — the only difference is whether a
- * long option list scrolls on its own or with the rest — so there is no
- * reason to measure the unfitted height again (which would mean undoing the
- * layout, and the shopper's scroll position with it). Each opening decides
- * afresh.
+ * A fitted panel goes back to the normal layout as soon as that layout fits
+ * again: a window enlarged or zoomed out, the keyboard closed, the page
+ * scrolled, a shorter question. The two layouts are not interchangeable even
+ * when the space is there: fitting lifts the options grid's row cap, so a
+ * long option list is drawn in full and pushes the product strip below the
+ * fold (2026-11-04, a dashboard preview zoomed out to 50% kept its fitted
+ * panel and the strip was out of sight). Measuring the normal layout means
+ * dropping the attribute for one synchronous read — nothing paints in
+ * between — and restoring the stack's scroll if the panel stays fitted. That
+ * height depends on the content, not the space, so it is measured once per
+ * content and only compared on the scroll and resize frames that follow.
  *
  * The DOM differs per package, so like the scroll arrow the behaviour lives in
  * this one controller: each package hands it its dropdown element and a way