@algolia/wizard 0.103.0-rc.217.756 → 0.103.0-rc.217.760

package/dist/main.js

@@ -2467,7 +2467,7 @@ async function ensureApplication(resumeAppId) {
 // package.json
 var package_default = {
   name: "@algolia/wizard",
-  version: "0.103.0-rc.217.756",
+  version: "0.103.0-rc.217.760",
   description: "Magically implement Algolia functionality in your codebase",
   type: "module",
   engines: {
@@ -6568,7 +6568,8 @@ var validationOutputSchema = z29.object({
   summary: z29.string(),
   sufficient: z29.boolean(),
   additionalInstructions: z29.string().optional(),
-  unrelatedFailure: z29.string().optional()
+  unrelatedFailure: z29.string().optional(),
+  styleOnly: z29.boolean().optional()
 });
 var MAX_IMPLEMENT_VALIDATION_ATTEMPTS = 3;
 var INGESTION_MAX_STEPS = 96;
@@ -6855,7 +6856,8 @@ function validationInstructions(input) {
     "Confirm the input has a persistent accessible name; widget-provided combobox, popup, and item relationships and keyboard behavior are preserved; and loading, empty, and error status text is perceivable to assistive technology.",
     "Inspect the CSS that actually applies to the generated DOM. Confirm the results panel and the element drawing the input frame have non-transparent surfaces, the input frame is distinguishable from its surrounding background in every supported theme, text meets 4.5:1 contrast, meaningful boundaries and focus indicators meet 3:1, and no state relies on color alone.",
     "Confirm the search experience reflows without horizontal page scrolling at 320 CSS pixels, keeps its panel on-screen, preserves visible focus, and respects reduced-motion preferences for any added animation.",
-    "If the project imports an InstantSearch theme and overrides its palette, confirm that the palette overrides (--ais-*-rgb) win over the theme: they must use a higher specificity than the theme, for example `:root:root`, and for a dark mode `:root:root.dark` or `:root:root[data-theme=dark]`, because the theme sets its own blue in `:root` and in `:root[data-theme=dark], .dark`. `:root:root` alone ties with `:root[data-theme=dark]`. If an override can lose to the theme, set sufficient=false, because the search icon and focus ring then show the theme blue instead of the app accent color.",
+    "If the project imports an InstantSearch theme, confirm that the project sets the theme palette to the app colors in each theme that the app supports: --ais-primary-color-rgb to the app accent color, and --ais-background-color-rgb, --ais-text-color-rgb, and --ais-border-color-rgb to the app surface, text, and border colors. If the project keeps the theme defaults, set sufficient=false, because the search icon, focus ring, and active item then show the theme blue, and the panel shows the theme surface instead of the app surface. A match between the light and dark themes of the widget and the page is not enough. The theme colors .ais-Highlight-highlighted and .ais-Snippet-highlighted with a fixed blue that the palette does not change: if the results show either class and the project does not restyle it, set sufficient=false.",
+    "Then confirm that the palette overrides (--ais-*-rgb) win over the theme: they must use a higher specificity than the theme, for example `:root:root`, and for a dark mode `:root:root.dark` or `:root:root[data-theme=dark]`, because the theme sets its own blue in `:root` and in `:root[data-theme=dark], .dark`. `:root:root` alone ties with `:root[data-theme=dark]`. If an override can lose to the theme, set sufficient=false, because the search icon and focus ring then show the theme blue instead of the app accent color.",
     "Find how the app selects each theme it supports (a class or attribute on an ancestor, a prefers-color-scheme media query, or a theme that exists only in code). Confirm that the search input and results panel take their colors from the active app theme through that same switch. A search widget whose colors do not match the page theme, for example a light panel on a dark page, is a failure: set sufficient=false.",
     "When the project has a package.json, confirm that the theme CSS of the search widget (for InstantSearch, a theme from instantsearch.css) is imported once from a legal global-CSS entry for that framework (Next.js Pages Router: pages/_app; Next.js App Router: root layout; otherwise the app global stylesheet or a component module when allowed). If it is installed but not imported, or imported from a Next.js component file, set sufficient=false.",
     "Confirm that the search component is reachable from and fits the corresponding content task at every supported breakpoint; require app-wide reachability only when the search scope is genuinely app-wide.",
@@ -6869,10 +6871,11 @@ function validationInstructions(input) {
     "Always call reportStatus with status=success after validation, even when sufficient=false.",
     "Set sufficient=false if the input's computed accessible name is empty or generic, including when aria-labelledby references a missing or empty element; a placeholder does not count as the label.",
     'Exception: the InstantSearch Autocomplete widget (react-instantsearch or instantsearch.js) names its input "Submit" through its generated label (the input has aria-labelledby pointing at that label), and no widget option changes it. Accept that name when the widget is used unmodified, and do not ask for an aria-label, inputProps, or a label wrapper: do not set sufficient=false for it, and do not request a headless rebuild or DOM patch.',
-    "Set sufficient=true when the search bar is unique and structurally complete and no placement or accessibility violation was found.",
-    "Set sufficient=false when a required placement or accessibility property is observed to fail, the implementation is incomplete, or checks have implementation-caused failures; include concrete additionalInstructions for the next pass.",
+    "Set sufficient=true when the search bar is unique and structurally complete and no placement, accessibility, or theme-color violation was found.",
+    "Set sufficient=false when a required placement, accessibility, or theme-color property is observed to fail, the implementation is incomplete, or checks have implementation-caused failures; include concrete additionalInstructions for the next pass.",
     "You can only read source files. If a required property can be checked in the source, check it there. If it can be established only in a browser (rendered contrast, keyboard behavior, 320-pixel reflow, live-region status, computed accessible name), set sufficient=true when the source shows no violation. Never request devtools, a screenshot, or a contrast tool, and never repeat a finding that an earlier pass already fixed.",
     "If a check fails only in untouched code, set unrelatedFailure to a concise failure description.",
+    "Set styleOnly=true when sufficient=false and every finding is one of these: the theme palette defaults remain, a palette override loses to the theme, or the highlight classes keep the theme blue. If any other finding exists, for example a light panel on a dark page, do not set styleOnly.",
     "Keep the summary to one short sentence. Put the details in additionalInstructions."
   ];
 }
@@ -7688,10 +7691,16 @@ ${detail}` : ""}`
           }
         }
       }
-      if (validation.sufficient && (!validation.unrelatedFailure || finalAttempt)) {
+      const styleFindingsRemain = finalAttempt && !validation.sufficient && validation.styleOnly === true;
+      if (validation.sufficient && (!validation.unrelatedFailure || finalAttempt) || styleFindingsRemain) {
         if (validation.unrelatedFailure) {
           summaries.push("Validation: Unrelated check failures remain.");
         }
+        if (styleFindingsRemain) {
+          summaries.push(
+            `Validation: Style issues remain: ${briefSummary(validation.additionalInstructions ?? validation.summary)}`
+          );
+        }
         ctx.setUserInput("implementation", "success");
         trackComponentGenerated(true, attempt);
         break;
@@ -10136,7 +10145,7 @@ async function resetProjectState() {
 // package.json with { type: 'json' }
 var package_default2 = {
   name: "@algolia/wizard",
-  version: "0.103.0-rc.217.756",
+  version: "0.103.0-rc.217.760",
   description: "Magically implement Algolia functionality in your codebase",
   type: "module",
   engines: {

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

@@ -178,6 +178,10 @@ above). When the app has a dark mode, also override the dark values with `:root:
 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.
 
+The `components.Highlight` and `components.Snippet` marks (`.ais-Highlight-highlighted`,
+`.ais-Snippet-highlighted`) use a fixed blue that the palette does not change. Restyle them
+with the app's accent color or a bold weight in the text color.
+
 **Follow the app's theme switch.** The theme switches palette only through `:root[data-theme=dark], .dark`,
 so find how the app selects each theme and set the `--ais-*-rgb` values through the same switch:
 

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

@@ -171,6 +171,10 @@ above). When the app has a dark mode, also override the dark values with `:root:
 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.
 
+The `<Highlight>` and `<Snippet>` marks (`.ais-Highlight-highlighted`, `.ais-Snippet-highlighted`)
+use a fixed blue that the palette does not change. Restyle them with the app's accent color or
+a bold weight in the text color.
+
 **Follow the app's theme switch.** The theme switches palette only through `:root[data-theme=dark], .dark`,
 so find how the app selects each theme and set the `--ais-*-rgb` values through the same switch:
 

package/package.json

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