@magicx-eng/ai-autocomplete-vanilla 0.23.1 → 0.23.3

package/README.md

@@ -736,7 +736,7 @@ Styles are auto-injected at runtime (Tier 1 and Tier 2). No CSS import needed. T
 
 Every class name the core emits is namespaced — `magicx-aia-*` (plus the bare `magicx-aia` root) and `aia-*` for the layout primitives — so nothing it renders can match a `.container`, `.pill` or `.dropdown` rule in your own stylesheet, and none of its rules can reach your elements.
 
-**Page CSS stops at the widget's edge.** Everything inside the input wrapper (`[data-aia-input-wrapper]`) and the dropdown (`[data-aia-dropdown]`) is reset to browser defaults before the SDK's own styles apply, so element and universal rules in your stylesheet — `button { … }`, `a { … }`, `* { … }`, a CSS reset, a framework's preflight — never reach it, and inherited typography adjustments from the page (line-height, letter-spacing, text-transform, text-align, …) are pinned at those two roots. Font family, size, weight and text colour still inherit from your page; a submit button you provide is left to your own stylesheet; and nothing the SDK ships styles elements outside its own subtree. The reset sits at specificity (0,0,5), below any rule that names a class, attribute or id — your overrides on the `data-aia-*` hooks work exactly as before, and so does a page rule like `.sidebar button { … }`, which names a class: scope rules like that to your own markup. For complete isolation, including rules like that, mount the widget in a shadow root — see [Shadow DOM](#shadow-dom).
+**Page CSS stops at the widget's edge.** Everything inside the input wrapper (`[data-aia-input-wrapper]`) and the dropdown (`[data-aia-dropdown]`) is reset to browser defaults before the SDK's own styles apply, so element and universal rules in your stylesheet — `button { … }`, `a { … }`, `* { … }`, a CSS reset, a framework's preflight — never reach it, and inherited typography adjustments from the page (line-height, letter-spacing, text-transform, text-align, …) are pinned at those two roots. Font family, size, weight and text colour still inherit from your page; a submit button you provide is left to your own stylesheet; and nothing the SDK ships styles elements outside its own subtree. The SDK's inline icons are covered too: a page's `svg { display: block; max-width: 100%; margin: … }` or `svg { width: 100%; fill: currentColor }` leaves the submit arrow, the scroll chevron and the option icons as drawn. The reset sits at specificity (0,0,5), below any rule that names a class, attribute or id — your overrides on the `data-aia-*` hooks work exactly as before, and so does a page rule like `.sidebar button { … }`, which names a class: scope rules like that to your own markup. For complete isolation, including rules like that, mount the widget in a shadow root — see [Shadow DOM](#shadow-dom).
 
 ### Shadow DOM
 
@@ -791,10 +791,7 @@ Override these on the container element. The variables are declared with `:where
 | `--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 the product image, and of the placeholder tile when a product has no image. |
-| `--aia-scroll-arrow-bg` | `--aia-surface` | `--aia-surface` | Fill of the "more below" arrow — the round button that fades in at the bottom of the option list while there is more to scroll to, and out while it scrolls. |
 | `--aia-scroll-arrow-color` | `--aia-option-color` | `--aia-option-color` | Chevron color of the arrow (`--aia-scroll-arrow-color-hover` on hover). |
-| `--aia-scroll-arrow-border` | `--aia-dropdown-border` | `--aia-dropdown-border` | Hairline around the arrow. |
-| `--aia-scroll-arrow-shadow` | `0 2px 8px rgba(0,0,0,0.12)` | `0 2px 8px rgba(0,0,0,0.12)` | Elevation of the arrow. |
 | `--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-placeholder-image` | storefront pictogram | storefront pictogram | The image drawn on the placeholder tile when a product has no `imageUrl`: a two-tone storefront pictogram, inlined as a data URI. Set it to any `url(...)` to swap the pictogram; it is drawn centered and contained inside the tile, over `--aia-product-media-bg`. |
 | `--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. |

package/dist/index.d.mts

@@ -1656,10 +1656,11 @@ declare function renderEditableContent(args: RenderEditableArgs): void;
 /**
  * The "more below" arrow for the options grid.
  *
- * When the option list is taller than its scroll box, a small round button
- * with a down chevron sits at the bottom-centre of the list and scrolls it a
- * page on click. It never moves — every appearance is an opacity fade in
- * place, SCROLL_ARROW_FADE_MS long (the stylesheets own the curve):
+ * When the option list is taller than its scroll box, a bare down chevron
+ * sits at the bottom-centre of the list and scrolls it a page on click. It
+ * never travels with the scroll — every appearance is an opacity fade in
+ * place, SCROLL_ARROW_FADE_MS long, and its only motion is the stylesheets'
+ * slow idle bob of a few pixels (the stylesheets own both curves):
  *
  * - At rest with more below (the list just opened, or scrolling has stopped
  *   short of the end), it fades in.
@@ -1668,9 +1669,10 @@ declare function renderEditableContent(args: RenderEditableArgs): void;
  * - Once scrolling has been quiet for SCROLL_ARROW_SCROLL_IDLE_MS it fades
  *   back in — unless the list is now at its bottom, where it stays out.
  *
- * Earlier versions rose from behind the footer and slid or shrank away; each
- * read as the disc travelling with the scroll (2026-09-03/04), hence the
- * fade-only rule. The stylesheets key everything off one attribute,
+ * Earlier versions were a white disc that rose from behind the footer and
+ * slid or shrank away; each read as the disc travelling with the scroll
+ * (2026-09-03/04), hence the fade-only rule, and on 2026-09-05 the disc was
+ * dropped for a plain chevron. The stylesheets key everything off one attribute,
  * `data-aia-visible`: present → opacity 1, absent → opacity 0, both
  * transitioned.
  *

package/dist/index.d.ts

@@ -1656,10 +1656,11 @@ declare function renderEditableContent(args: RenderEditableArgs): void;
 /**
  * The "more below" arrow for the options grid.
  *
- * When the option list is taller than its scroll box, a small round button
- * with a down chevron sits at the bottom-centre of the list and scrolls it a
- * page on click. It never moves — every appearance is an opacity fade in
- * place, SCROLL_ARROW_FADE_MS long (the stylesheets own the curve):
+ * When the option list is taller than its scroll box, a bare down chevron
+ * sits at the bottom-centre of the list and scrolls it a page on click. It
+ * never travels with the scroll — every appearance is an opacity fade in
+ * place, SCROLL_ARROW_FADE_MS long, and its only motion is the stylesheets'
+ * slow idle bob of a few pixels (the stylesheets own both curves):
  *
  * - At rest with more below (the list just opened, or scrolling has stopped
  *   short of the end), it fades in.
@@ -1668,9 +1669,10 @@ declare function renderEditableContent(args: RenderEditableArgs): void;
  * - Once scrolling has been quiet for SCROLL_ARROW_SCROLL_IDLE_MS it fades
  *   back in — unless the list is now at its bottom, where it stays out.
  *
- * Earlier versions rose from behind the footer and slid or shrank away; each
- * read as the disc travelling with the scroll (2026-09-03/04), hence the
- * fade-only rule. The stylesheets key everything off one attribute,
+ * Earlier versions were a white disc that rose from behind the footer and
+ * slid or shrank away; each read as the disc travelling with the scroll
+ * (2026-09-03/04), hence the fade-only rule, and on 2026-09-05 the disc was
+ * dropped for a plain chevron. The stylesheets key everything off one attribute,
  * `data-aia-visible`: present → opacity 1, absent → opacity 0, both
  * transitioned.
  *