algolia · FabienMotte · Nov 27, 2025 · Nov 20, 2025 · Nov 24, 2025 · Nov 24, 2025
diff --git a/bundlesize.config.json b/bundlesize.config.json
@@ -66,11 +66,19 @@
     },
     {
       "path": "./packages/instantsearch.css/components/chat.css",
-      "maxSize": "4.75 kB"
+      "maxSize": "5 kB"
     },
     {
       "path": "./packages/instantsearch.css/components/chat-min.css",
-      "maxSize": "4.5 kB"
+      "maxSize": "4.75 kB"
+    },
+    {
+      "path": "./packages/instantsearch.css/components/autocomplete.css",
+      "maxSize": "3.75 kB"
+    },
+    {
+      "path": "./packages/instantsearch.css/components/autocomplete-min.css",
+      "maxSize": "3.50 kB"
     }
   ]
 }
diff --git a/examples/js/getting-started/src/app.css b/examples/js/getting-started/src/app.css
@@ -1,5 +1,5 @@
 :root {
-  --ais-primary-color-rgb: 252, 180, 58;
+  --ais-primary-color-rgb: 200, 130, 10;
 }
 
 .header {

diff --git a/examples/js/query-suggestions/src/app.css b/examples/js/query-suggestions/src/app.css
@@ -1,5 +1,5 @@
 :root {
-  --ais-primary-color-rgb: 252, 180, 58;
+  --ais-primary-color-rgb: 200, 130, 10;
 }
 
 .header {

diff --git a/examples/react/getting-started/src/App.css b/examples/react/getting-started/src/App.css
@@ -1,5 +1,5 @@
 :root {
-  --ais-primary-color-rgb: 142, 67, 231;
+  --ais-primary-color-rgb: 130, 50, 220;
 }
 
 body,

diff --git a/examples/react/query-suggestions/src/App.css b/examples/react/query-suggestions/src/App.css
@@ -1,5 +1,5 @@
 :root {
-  --ais-primary-color-rgb: 142, 67, 231;
+  --ais-primary-color-rgb: 130, 50, 220;
 }
 
 body,

diff --git a/examples/react/query-suggestions/src/App.tsx b/examples/react/query-suggestions/src/App.tsx
@@ -9,6 +9,7 @@ import {
   Pagination,
   RefinementList,
   EXPERIMENTAL_Autocomplete,
+  Chat,
 } from 'react-instantsearch';
 
 import { Panel } from './Panel';
@@ -54,6 +55,7 @@ export function App() {
 
             <div className="search-panel__results">
               <EXPERIMENTAL_Autocomplete
+                showRecent
                 placeholder="Search for products"
                 indices={[
                   {
@@ -91,6 +93,11 @@ export function App() {
               </div>
             </div>
           </div>
+
+          <Chat
+            agentId="7c2f6816-bfdb-46e9-a51f-9cb8e5fc9628"
+            itemComponent={ItemComponent}
+          />
         </InstantSearch>
       </div>
     </div>
@@ -118,3 +125,21 @@ function HitComponent({ hit }: { hit: HitType }) {
     </article>
   );
 }
+
+function ItemComponent({ item }: { item: Hit }) {
+  return (
+    <article className="ais-Carousel-hit">
+      <div className="ais-Carousel-hit-image">
+        <img src={item.image} />
+      </div>
+      <h2 className="ais-Carousel-hit-title">
+        <a
+          href={`/products.html?pid=${item.objectID}`}
+          className="ais-Carousel-hit-link"
+        >
+          {item.name}
+        </a>
+      </h2>
+    </article>
+  );
+}
diff --git a/packages/algolia-experiences/src/__tests__/render.test.ts b/packages/algolia-experiences/src/__tests__/render.test.ts
@@ -297,90 +297,90 @@ describe('configToIndex', () => {
       await wait(100);
 
       expect(element.innerHTML).toMatchInlineSnapshot(`
-      <div>
-        <section class="ais-TrendingItems">
-          <h3 class="ais-TrendingItems-title">
-            Trending items
-          </h3>
-          <div class="ais-Carousel">
-            <button title="Previous"
-                    aria-label="Previous"
-                    hidden
-                    aria-controls="ais-Carousel-0"
-                    class="ais-Carousel-navigation ais-Carousel-navigation--previous"
-            >
-              <svg width="8"
-                   height="16"
-                   viewbox="0 0 8 16"
-                   fill="none"
+        <div>
+          <section class="ais-TrendingItems">
+            <h3 class="ais-TrendingItems-title">
+              Trending items
+            </h3>
+            <div class="ais-Carousel">
+              <button title="Previous"
+                      aria-label="Previous"
+                      hidden
+                      aria-controls="ais-Carousel-0"
+                      class="ais-Carousel-navigation ais-Carousel-navigation--previous"
               >
-                <path fillrule="evenodd"
-                      cliprule="evenodd"
-                      fill="currentColor"
-                      d="M7.13809 0.744078C7.39844 1.06951 7.39844 1.59715 7.13809 1.92259L2.27616 8L7.13809 14.0774C7.39844 14.4028 7.39844 14.9305 7.13809 15.2559C6.87774 15.5814 6.45563 15.5814 6.19528 15.2559L0.861949 8.58926C0.6016 8.26382 0.6016 7.73618 0.861949 7.41074L6.19528 0.744078C6.45563 0.418641 6.87774 0.418641 7.13809 0.744078Z"
+                <svg width="8"
+                     height="16"
+                     viewbox="0 0 8 16"
+                     fill="none"
                 >
-                </path>
-              </svg>
-            </button>
-            <ol class="ais-Carousel-list ais-TrendingItems-list"
-                tabindex="0"
-                id="ais-Carousel-0"
-                aria-roledescription="carousel"
-                aria-label="Items"
-                aria-live="polite"
-            >
-              <li class="ais-Carousel-item ais-TrendingItems-item"
-                  aria-roledescription="slide"
-                  aria-label="1 of 2"
-              >
-                <div class="item-1">
-                  <p>
-                    cols:
-                    <span class="ais-Highlight">
-                    </span>
-                  </p>
-                  <img src
-                       alt="alt value"
+                  <path fillrule="evenodd"
+                        cliprule="evenodd"
+                        fill="currentColor"
+                        d="M7.13809 0.744078C7.39844 1.06951 7.39844 1.59715 7.13809 1.92259L2.27616 8L7.13809 14.0774C7.39844 14.4028 7.39844 14.9305 7.13809 15.2559C6.87774 15.5814 6.45563 15.5814 6.19528 15.2559L0.861949 8.58926C0.6016 8.26382 0.6016 7.73618 0.861949 7.41074L6.19528 0.744078C6.45563 0.418641 6.87774 0.418641 7.13809 0.744078Z"
                   >
-                </div>
-              </li>
-              <li class="ais-Carousel-item ais-TrendingItems-item"
-                  aria-roledescription="slide"
-                  aria-label="2 of 2"
+                  </path>
+                </svg>
+              </button>
+              <ol class="ais-Carousel-list ais-TrendingItems-list"
+                  tabindex="0"
+                  id="ais-Carousel-0"
+                  aria-roledescription="carousel"
+                  aria-label="Items"
+                  aria-live="polite"
               >
-                <div class="item-2">
-                  <p>
-                    cols:
-                    <span class="ais-Highlight">
-                    </span>
-                  </p>
-                  <img src
-                       alt="alt value"
-                  >
-                </div>
-              </li>
-            </ol>
-            <button title="Next"
-                    aria-label="Next"
-                    aria-controls="ais-Carousel-0"
-                    class="ais-Carousel-navigation ais-Carousel-navigation--next"
-            >
-              <svg width="8"
-                   height="16"
-                   viewbox="0 0 8 16"
-                   fill="none"
+                <li class="ais-Carousel-item ais-TrendingItems-item"
+                    aria-roledescription="slide"
+                    aria-label="1 of 2"
+                >
+                  <div class="item-1">
+                    <p>
+                      cols:
+                      <span class="ais-Highlight">
+                      </span>
+                    </p>
+                    <img src
+                         alt="alt value"
+                    >
+                  </div>
+                </li>
+                <li class="ais-Carousel-item ais-TrendingItems-item"
+                    aria-roledescription="slide"
+                    aria-label="2 of 2"
+                >
+                  <div class="item-2">
+                    <p>
+                      cols:
+                      <span class="ais-Highlight">
+                      </span>
+                    </p>
+                    <img src
+                         alt="alt value"
+                    >
+                  </div>
+                </li>
+              </ol>
+              <button title="Next"
+                      aria-label="Next"
+                      aria-controls="ais-Carousel-0"
+                      class="ais-Carousel-navigation ais-Carousel-navigation--next"
               >
-                <path fillrule="evenodd"
-                      cliprule="evenodd"
-                      fill="currentColor"
-                      d="M0.861908 15.2559C0.601559 14.9305 0.601559 14.4028 0.861908 14.0774L5.72384 8L0.861908 1.92259C0.601559 1.59715 0.601559 1.06952 0.861908 0.744079C1.12226 0.418642 1.54437 0.418642 1.80472 0.744079L7.13805 7.41074C7.3984 7.73618 7.3984 8.26382 7.13805 8.58926L1.80472 15.2559C1.54437 15.5814 1.12226 15.5814 0.861908 15.2559Z"
+                <svg width="8"
+                     height="16"
+                     viewbox="0 0 8 16"
+                     fill="none"
                 >
-                </path>
-              </svg>
-            </button>
-          </div>
-        </section>
-      </div>
+                  <path fillrule="evenodd"
+                        cliprule="evenodd"
+                        fill="currentColor"
+                        d="M0.861908 15.2559C0.601559 14.9305 0.601559 14.4028 0.861908 14.0774L5.72384 8L0.861908 1.92259C0.601559 1.59715 0.601559 1.06952 0.861908 0.744079C1.12226 0.418642 1.54437 0.418642 1.80472 0.744079L7.13805 7.41074C7.3984 7.73618 7.3984 8.26382 7.13805 8.58926L1.80472 15.2559C1.54437 15.5814 1.12226 15.5814 0.861908 15.2559Z"
+                  >
+                  </path>
+                </svg>
+              </button>
+            </div>
+          </section>
+        </div>
       `);
     });
   });

diff --git a/packages/instantsearch-ui-components/src/components/Carousel.tsx b/packages/instantsearch-ui-components/src/components/Carousel.tsx
@@ -147,9 +147,8 @@ export function createCarouselComponent({ createElement, Fragment }: Renderer) {
         createElement,
         Fragment,
       }),
-      previousIconComponent:
-        PreviousIconComponent = PreviousIconDefaultComponent,
-      nextIconComponent: NextIconComponent = NextIconDefaultComponent,
+      previousIconComponent: PreviousIcon = PreviousIconDefaultComponent,
+      nextIconComponent: NextIcon = NextIconDefaultComponent,
       headerComponent: HeaderComponent,
       showNavigation = true,
       items,
@@ -243,7 +242,7 @@ export function createCarouselComponent({ createElement, Fragment }: Renderer) {
               scrollLeft();
             }}
           >
-            <PreviousIconComponent createElement={createElement} />
+            <PreviousIcon createElement={createElement} />
           </button>
         )}
 
@@ -296,7 +295,7 @@ export function createCarouselComponent({ createElement, Fragment }: Renderer) {
               scrollRight();
             }}
           >
-            <NextIconComponent createElement={createElement} />
+            <NextIcon createElement={createElement} />
           </button>
         )}
       </div>

diff --git a/packages/instantsearch-ui-components/src/components/autocomplete/AutocompletePanel.tsx b/packages/instantsearch-ui-components/src/components/autocomplete/AutocompletePanel.tsx
@@ -22,13 +22,14 @@ export type AutocompletePanelClassNames = {
 
 export function createAutocompletePanelComponent({ createElement }: Renderer) {
   return function AutocompletePanel(userProps: AutocompletePanelProps) {
-    const { children, classNames = {}, ...props } = userProps;
+    const { children, classNames = {}, hidden, ...props } = userProps;
 
     return (
       <div
         {...props}
         className={cx(
           'ais-AutocompletePanel',
+          !hidden && 'ais-AutocompletePanel--open',
           classNames.root,
           props.className
         )}

diff --git a/...ages/instantsearch-ui-components/src/components/autocomplete/AutocompleteRecentSearch.tsx b/...ages/instantsearch-ui-components/src/components/autocomplete/AutocompleteRecentSearch.tsx
@@ -2,7 +2,7 @@
 
 import { cx } from '../../lib';
 
-import { AutocompleteClockIcon, AutocompleteTrashIcon } from './icons';
+import { ClockIcon, TrashIcon } from './icons';
 
 import type { ComponentChildren, Renderer } from '../../types';
 
@@ -75,7 +75,7 @@ export function createAutocompleteRecentSearchComponent({
               classNames.content
             )}
           >
-            <AutocompleteClockIcon createElement={createElement} />
+            <ClockIcon createElement={createElement} />
           </div>
           <div
             className={cx(
@@ -106,7 +106,7 @@ export function createAutocompleteRecentSearchComponent({
               onRemoveRecentSearch();
             }}
           >
-            <AutocompleteTrashIcon createElement={createElement} />
+            <TrashIcon createElement={createElement} />
           </button>
         </div>
       </div>

diff --git a/packages/instantsearch-ui-components/src/components/autocomplete/AutocompleteSearch.tsx b/packages/instantsearch-ui-components/src/components/autocomplete/AutocompleteSearch.tsx
@@ -1,9 +1,5 @@
 /** @jsx createElement */
-import {
-  AutocompleteClearIcon,
-  AutocompleteLoadingIcon,
-  AutocompleteSubmitIcon,
-} from './icons';
+import { ClearIcon, LoadingIcon, SubmitIcon } from './icons';
 
 import type { ComponentProps, Renderer } from '../..';
 
@@ -43,14 +39,14 @@ export function createAutocompleteSearchComponent({ createElement }: Renderer) {
               type="submit"
               title="Submit"
             >
-              <AutocompleteSubmitIcon createElement={createElement} />
+              <SubmitIcon createElement={createElement} />
             </button>
           </label>
           <div
             className="ais-AutocompleteLoadingIndicator"
             hidden={!isSearchStalled}
           >
-            <AutocompleteLoadingIcon createElement={createElement} />
+            <LoadingIcon createElement={createElement} />
           </div>
         </div>
         <div className="ais-AutocompleteInputWrapper">
@@ -77,7 +73,7 @@ export function createAutocompleteSearchComponent({ createElement }: Renderer) {
             hidden={query.length === 0 || isSearchStalled}
             onClick={onClear}
           >
-            <AutocompleteClearIcon createElement={createElement} />
+            <ClearIcon createElement={createElement} />
           </button>
         </div>
       </form>

diff --git a/packages/instantsearch-ui-components/src/components/autocomplete/AutocompleteSuggestion.tsx b/packages/instantsearch-ui-components/src/components/autocomplete/AutocompleteSuggestion.tsx
@@ -2,7 +2,7 @@
 
 import { cx } from '../../lib';
 
-import { AutocompleteSubmitIcon } from './icons';
+import { SubmitIcon } from './icons';
 
 import type { ComponentChildren, Renderer } from '../../types';
 
@@ -61,7 +61,7 @@ export function createAutocompleteSuggestionComponent({
               classNames.content
             )}
           >
-            <AutocompleteSubmitIcon createElement={createElement} />
+            <SubmitIcon createElement={createElement} />
           </div>
           <div
             className={cx(