@magicx-eng/ai-autocomplete-react 0.19.0 → 0.21.0

package/README.md

@@ -721,9 +721,13 @@ Tier 2 consumers who build their own submit payload get the raw skips from the h
 
 Styles are auto-injected at runtime — no CSS import needed. Built-in light and dark defaults apply automatically based on `mode`.
 
+Every class name the package emits is namespaced — `aia-*` for its own (hashed CSS-module) classes and the layout primitives, `magicx-aia-*` for the classes it shares with the vanilla core — 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. Use the `--aia-*` variables and `data-aia-*` selector hooks below for overrides.
+
+**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.
+
 ### CSS Variables
 
-Override on the container (via `className`). All defaults use `:where()` (zero specificity) — your overrides always win.
+Override on the container (via `className`). The variables are declared with `:where()` (zero specificity), so a value you set on the container always wins.
 
 | Variable | Light | Dark | Description |
 |---|---|---|---|
@@ -760,7 +764,7 @@ Override on the container (via `className`). All defaults use `:where()` (zero s
 | `--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. |
@@ -800,6 +804,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 Tier 1 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 |
@@ -821,7 +826,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.
 
 ```css
 /* Solid (non-glass) dropdown */