@algolia/wizard 0.83.0 → 0.84.0-rc.202.644

package/docs/algolia-sdk/instantsearch-setup-js.md

@@ -97,14 +97,13 @@ The widget owns its combobox/grid/row relationships, active-option announcements
 keyboard behavior. Keep its generated roles and accessible names intact; never patch its
 DOM or add competing ARIA.
 
-The widget renders the input and its label itself. Keep that association intact, and
-verify that the generated label names the indexed content (`Search products`, not just
-`Search`). A placeholder is only a hint, and the accessible name of a surrounding
-`<search>` landmark does not name the input. If the installed widget exposes no supported
-way to make its generated label content-specific, use its documented connector or
-headless API to render an associated visible or visually-hidden label while preserving
-the widget's generated input props and keyboard behavior; never patch its DOM after
-rendering.
+The widget renders the input and its label itself. Keep that association intact. The
+generated label names the input `Submit`, and no widget option changes that name (checked
+on `instantsearch.js` 4.118.1). Accept this known widget limitation: do not replace the
+widget with `connectAutocomplete` or another headless build, never patch its DOM, and do
+not search the package source for a label option. Name the generic label in your summary.
+A placeholder is only a hint, and the accessible name of a surrounding `<search>` landmark
+does not name the input, but set both as described below.
 
 Use a content-specific placeholder, put the container in the app's existing named search
 landmark or a `<search aria-label="Product search">`, and preserve any visible search
@@ -146,13 +145,21 @@ Palette lives in `--ais-*` custom properties on `:root` as **RGB triplets consum
 `rgba()`**, override with triplets only:
 
 ```css
-:root {
+:root:root {
   --ais-background-color-rgb: 24, 24, 27; /* not #18181b */
   --ais-text-color-rgb: 244, 244, 245;
   --ais-primary-color-rgb: 129, 140, 248;
 }
 ```
 
+`--ais-primary-color-rgb` colors the search icon, the focus ring, and the active item, so set it
+to the app's accent color. The theme sets its own blue in `:root` and in its dark block
+(`:root[data-theme=dark], .dark`), and a theme imported from a component loads after the app's
+global stylesheet. An override with the same specificity therefore loses. Repeat `:root` (as
+above). When the app has a dark mode, also override the dark values with `:root:root.dark` for
+a dark class or `:root:root[data-theme=dark]` for a `data-theme` attribute: `:root:root` alone
+ties with `:root[data-theme=dark]`. The override then wins whatever the import order. Then check that the search icon has the app's accent color, not the theme blue.
+
 Everything else is plain CSS against the widget's classes, or `cssClasses` /
 `indices[].cssClasses` to add your own names to the same elements. Who owns what:
 

package/docs/algolia-sdk/instantsearch-setup-react.md

@@ -89,14 +89,13 @@ The widget owns its combobox/grid/row relationships, active-option announcements
 keyboard behavior. Keep its generated roles and accessible names intact; never patch its
 DOM or add competing ARIA.
 
-The widget renders the input and its label itself. Keep that association intact, and
-verify that the generated label names the indexed content (`Search products`, not just
-`Search`). A placeholder is only a hint, and the accessible name of a surrounding
-`<search>` landmark does not name the input. If the installed widget exposes no supported
-way to make its generated label content-specific, use its documented connector or
-headless API to render an associated visible or visually-hidden label while preserving
-the widget's generated input props and keyboard behavior; never patch its DOM after
-rendering.
+The widget renders the input and its label itself. Keep that association intact. The
+generated label names the input `Submit`, and no widget option changes that name (checked
+on `react-instantsearch` 7.50.1). Accept this known widget limitation: do not replace the
+widget with `useAutocomplete` or another headless build, never patch its DOM, and do not
+search the package source for a label option. Name the generic label in your summary. A
+placeholder is only a hint, and the accessible name of a surrounding `<search>` landmark
+does not name the input, but set both as described below.
 
 Use a content-specific placeholder, put the widget in the app's existing named search
 landmark or a `<search aria-label="Product search">`, and preserve any visible search
@@ -138,13 +137,21 @@ Palette lives in `--ais-*` custom properties on `:root` as **RGB triplets consum
 `rgba()`**, override with triplets only:
 
 ```css
-:root {
+:root:root {
   --ais-background-color-rgb: 24, 24, 27; /* not #18181b */
   --ais-text-color-rgb: 244, 244, 245;
   --ais-primary-color-rgb: 129, 140, 248;
 }
 ```
 
+`--ais-primary-color-rgb` colors the search icon, the focus ring, and the active item, so set it
+to the app's accent color. The theme sets its own blue in `:root` and in its dark block
+(`:root[data-theme=dark], .dark`), and a theme imported from a component loads after the app's
+global stylesheet. An override with the same specificity therefore loses. Repeat `:root` (as
+above). When the app has a dark mode, also override the dark values with `:root:root.dark` for
+a dark class or `:root:root[data-theme=dark]` for a `data-theme` attribute: `:root:root` alone
+ties with `:root[data-theme=dark]`. The override then wins whatever the import order. Then check that the search icon has the app's accent color, not the theme blue.
+
 Everything else is plain CSS against the widget's classes, or the `classNames` /
 `indices[].classNames` props to add your own names to the same elements. Who owns what:
 
@@ -198,8 +205,8 @@ Use `insights={true}` and nothing else. The middleware loads `search-insights` f
 jsDelivr CDN itself; do not install the package, pass `insightsClient`, or declare
 `window.aa`.
 
-Only if the project has a Content-Security-Policy blocking jsDelivr (the CDN script then
-cannot load): install `search-insights` from npm and pass its default export as
+Search the project for a Content-Security-Policy first. If it has one (it blocks jsDelivr,
+so the CDN script cannot load, and it also blocks the Algolia API): install `search-insights` from npm and pass its default export as
 `insightsClient`:
 
 ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@algolia/wizard",
-  "version": "0.83.0",
+  "version": "0.84.0-rc.202.644",
   "description": "Magically implement Algolia functionality in your codebase",
   "type": "module",
   "engines": {