@magicx-eng/ai-autocomplete-vanilla 0.51.2 → 0.53.0

package/README.md

@@ -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. |

package/dist/index.d.mts

@@ -94,6 +94,14 @@ interface Suggestion {
      * nothing about how the options are answered.
      */
     smart_suggestion?: boolean;
+    /**
+     * The joining word or two typed before a date or date range picker's answer
+     * ("from" before "Nov 17"). Typed as plain text, so the completed param still
+     * holds only the answer. A suggestion answered from its options carries its
+     * joining words in their text instead. Absent on servers that send none,
+     * which then answer exactly as before.
+     */
+    lead_in?: string;
 }
 interface InputItem {
     parameter: string;
@@ -2392,12 +2400,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

@@ -94,6 +94,14 @@ interface Suggestion {
      * nothing about how the options are answered.
      */
     smart_suggestion?: boolean;
+    /**
+     * The joining word or two typed before a date or date range picker's answer
+     * ("from" before "Nov 17"). Typed as plain text, so the completed param still
+     * holds only the answer. A suggestion answered from its options carries its
+     * joining words in their text instead. Absent on servers that send none,
+     * which then answer exactly as before.
+     */
+    lead_in?: string;
 }
 interface InputItem {
     parameter: string;
@@ -2392,12 +2400,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