@magicx-eng/ai-autocomplete-vanilla 0.21.0 → 0.23.0

package/README.md

@@ -734,6 +734,10 @@ Constructor callbacks (`onSubmit`, `onChange`, etc.) are registered once at cons
 
 Styles are auto-injected at runtime (Tier 1 and Tier 2). No CSS import needed. The component ships built-in light and dark defaults.
 
+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).
+
 ### Shadow DOM
 
 Mount the container inside a shadow root and the widget works there — the stylesheet is injected into that root rather than `document.head`, and the caret is read from the root that owns the editor:
@@ -755,7 +759,7 @@ This is the way to embed the widget in a page whose CSS you don't control. In th
 
 ### CSS Variables
 
-Override these on the container element. All built-in defaults use `:where()` (zero specificity) — your overrides always win without `!important`.
+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`.
 
 | Variable | Default (light) | Default (dark) | Description |
 |---|---|---|---|
@@ -792,7 +796,7 @@ Override these on the container element. All built-in defaults use `:where()` (z
 | `--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-color` | `--aia-option-color` | `--aia-option-color` | Glyph color of the no-image placeholder tile. |
+| `--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. |
 | `--aia-product-price-color` | `--aia-option-color-selected` | `--aia-option-color-selected` | Product price text. |
 | `--aia-product-vendor-color` | `--aia-option-color` | `--aia-option-color` | Product vendor line. |
@@ -837,6 +841,7 @@ For styling beyond the CSS variables, target these stable `data-aia-*` attribute
 
 | Attribute | Element |
 |---|---|
+| `[data-aia-input-wrapper]` | Wrapper around the editor area and the submit button — one of the two roots the SDK isolates from page CSS (the dropdown is the other) |
 | `[data-aia-editor]` | Editor area wrapping the contentEditable + inline pill list |
 | `[data-aia-input]` | The contentEditable `<div>` that owns typed text and bold completed params. Replaces the previous `[data-aia-textarea]` selector. |
 | `[data-aia-pill-list-container]` | Inline sibling of the editor that holds unfilled-suggestion pills |
@@ -858,7 +863,7 @@ For styling beyond the CSS variables, target these stable `data-aia-*` attribute
 | `[data-aia-product]` | Each product card |
 | `[data-aia-product-placeholder]` | Media tile of a card whose product has no image |
 
-Completed params render as inline `<strong>` elements inside the editor. Override their weight with `[data-aia-input] strong { font-weight: 700; }` (the built-in style uses `:where()` so any consumer selector wins without `!important`).
+Completed params render as inline `<strong>` elements inside the editor. Override their weight with `[data-aia-input] strong { font-weight: 700; }` — a selector that names the editor wins without `!important`, while a bare `strong { … }` page rule is kept out by the isolation reset.
 
 The vanilla core also exposes stable BEM class names (`magicx-aia-*`); both can be used.