@depict-ai/ui 4.10.13 → 4.10.14

package/server/ES10/index.js

@@ -10,7 +10,7 @@ import $b8hua$babelruntimehelpersclassPrivateFieldGet from "@babel/runtime/helpe
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.10.13";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.10.14";
 function $00a5b94f0c11efbb$export$d9f36cf74e24d595(media_query) {
   const signal = $b8hua$createSignal(false);
   $b8hua$onCleanup($b8hua$javascript_media_query(media_query, _ref => {
@@ -2210,8 +2210,10 @@ var $3e850b2f2cca761f$var$_tmpl$ = ["<button", ' type="button" class="', '"', ">
 function $3e850b2f2cca761f$export$ca21a16d65b3dd8(_ref) {
   let {
     show_extras_: [get_show_extras, set_show_extras],
-    i18n_: i18n_
+    i18n_: i18n_,
+    expanding_container_element_: expanding_container_element_
   } = _ref;
+  let button;
   return $b8hua$ssr($3e850b2f2cca761f$var$_tmpl$, $b8hua$ssrHydrationKey(), "expand-filter ".concat(get_show_extras() ? "expanded" : ""), $b8hua$ssrAttribute("aria-expanded", $b8hua$escape(get_show_extras(), true), false), $b8hua$escape($b8hua$createComponent((0, $ff3225aef892a467$export$f21ab0717a89c77f), {})), get_show_extras() ? $b8hua$escape(i18n_.view_less_()) : $b8hua$escape(i18n_.view_more_()));
 }
 var $02b6641aa50ce528$var$_tmpl$ = ["<span", ' class="highlighted-part">', "</span>"],
@@ -2373,7 +2375,8 @@ function $133484ef10e4e954$export$dd948f91abc3a1c4(_ref) {
   $b8hua$createRenderEffect(() => {
     set_view_more_button_below_group_(togglable_rest() ? $b8hua$createComponent((0, $3e850b2f2cca761f$export$ca21a16d65b3dd8), {
       show_extras_: show_extras_signal,
-      i18n_: i18n_
+      i18n_: i18n_,
+      expanding_container_element_: expanding_container_els
     }) : []);
   });
   $b8hua$onCleanup(() => set_view_more_button_below_group_());
@@ -3090,7 +3093,8 @@ function $0ae614c5c7babb43$export$a32086fa6616eafd(_ref) {
   $b8hua$createRenderEffect(() => {
     set_view_more_button_below_group(some_top_level_are_hidden() ? $b8hua$createComponent((0, $3e850b2f2cca761f$export$ca21a16d65b3dd8), {
       show_extras_: show_extras,
-      i18n_: i18n_
+      i18n_: i18n_,
+      expanding_container_element_: expanding_container_els
     }) : []);
   });
   $b8hua$onCleanup(() => set_view_more_button_below_group());
@@ -3816,7 +3820,8 @@ function $2cb856c297c53e6c$export$82ed4b28ecb67608(_ref) {
   $b8hua$createRenderEffect(() => {
     set_view_more_button_below_group_(togglable_rest() ? $b8hua$createComponent((0, $3e850b2f2cca761f$export$ca21a16d65b3dd8), {
       show_extras_: show_extras_signal,
-      i18n_: i18n_
+      i18n_: i18n_,
+      expanding_container_element_: expanding_container_els
     }) : []);
   });
   $b8hua$onCleanup(() => set_view_more_button_below_group_());
@@ -4899,8 +4904,8 @@ var $bce10e104a1dd893$var$_tmpl$ = ["<svg", ' xmlns="http://www.w3.org/2000/svg"
 function $bce10e104a1dd893$export$cb808a3c41736d8e() {
   return $b8hua$ssr($bce10e104a1dd893$var$_tmpl$, $b8hua$ssrHydrationKey());
 }
-var $7396052a1484264f$var$_tmpl$ = ["<div", ' class="filters"><div class="body">', "</div></div>"],
-  $7396052a1484264f$var$_tmpl$2 = ["<div", ' class="sorting"><div class="body">', "</div></div>"],
+var $7396052a1484264f$var$_tmpl$ = ["<section", ' class="filters"', '><div class="body">', "</div></section>"],
+  $7396052a1484264f$var$_tmpl$2 = ["<section", ' class="sorting"', '><div class="body">', "</div></section>"],
   $7396052a1484264f$var$_tmpl$3 = ["<div", ' class="sort-and-filter-buttons"><div class="outer"><div class="inner"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div></div></div>"],
   $7396052a1484264f$var$_tmpl$4 = ["<span", ' class="num-filters" style="', '">', "</span>"],
   $7396052a1484264f$var$_tmpl$5 = ["<div", ' class="open-filters-button-container" style="', '"><!--$-->', "<!--/--><button", ' class="', '" type="button"', ' style="', '"><!--$-->', "<!--/--><span>", "</span></button></div>"],
@@ -4977,6 +4982,27 @@ function $7396052a1484264f$export$d7841e452f2e59a8(_ref) {
       available_sortings_: available_sortings_,
       meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_
     };
+    // Keyboard accessibility for the desktop panels (rendered after the product grid in the DOM): when the user
+    // opens a panel we move focus into it, and restore focus to the toggle button on close. Intent is tracked with
+    // a plain flag set in the buttons' click handlers - `filters_open`/`sorting_open` also change programmatically
+    // (undo toast, history-state restore, SDK consumers), and those must not steal focus.
+    let user_opened_panel = false;
+    let filter_toggle_button;
+    let sort_toggle_button;
+    let current_panel;
+    let current_panel_toggle_button;
+    const focus_panel_when_in_dom = panel => $b8hua$catchify1(async () => {
+      // Bounded wait: if the panel never lands in the DOM (e.g. it's superseded by a rapid re-render before
+      // insertion), the timeout lets this promise resolve instead of keeping `panel` - and the observer
+      // listener it registers - referenced forever.
+      await (0, $b8hua$observer).wait_for_element(panel, 4000);
+      if (panel.isConnected) panel.focus();
+    })();
+    const register_desktop_panel = (el, toggle_button, should_focus) => {
+      current_panel = el;
+      current_panel_toggle_button = toggle_button;
+      if (should_focus) focus_panel_when_in_dom(el);
+    };
     const make_open_filters_button = function () {
       let adhere_to_width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       let is_tabbable = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
@@ -4987,7 +5013,9 @@ function $7396052a1484264f$export$d7841e452f2e59a8(_ref) {
         search_sorting_open_: search_sorting_open_,
         number_of_rendered_selected_filters_items_: number_of_rendered_selected_filters_items_,
         filter_button_width_: adhere_to_width ? filter_button_width_ : undefined,
-        hide_button_: hide_filters
+        hide_button_: hide_filters,
+        on_user_open_: () => user_opened_panel = true,
+        button_ref_: is_tabbable ? el => filter_toggle_button = el : undefined
       });
     };
     const make_open_sorting_button = function () {
@@ -5001,7 +5029,9 @@ function $7396052a1484264f$export$d7841e452f2e59a8(_ref) {
         search_sorting_open_: search_sorting_open_,
         available_sortings_: available_sortings_,
         sort_button_width_: adhere_to_width ? sort_button_width_ : undefined,
-        meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_
+        meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_,
+        on_user_open_: () => user_opened_panel = true,
+        button_ref_: is_tabbable ? el => sort_toggle_button = el : undefined
       });
     };
     let open_modal_;
@@ -5021,10 +5051,35 @@ function $7396052a1484264f$export$d7841e452f2e59a8(_ref) {
         grid_is_in_original_state = true;
       }
     });
+    // Restore focus to the relevant toggle button when a desktop panel is torn down while focus is still inside it.
+    const restore_focus_to_toggle_on_close = () => {
+      const button_to_restore = current_panel_toggle_button;
+      const focus_was_in_panel = !!current_panel && current_panel.contains(document.activeElement);
+      current_panel = undefined;
+      current_panel_toggle_button = undefined;
+      if (focus_was_in_panel) button_to_restore === null || button_to_restore === void 0 || button_to_restore.focus();
+    };
+    // `<section>` + `aria-label` so the panel announces itself ("Filters"/"Sort") when we move focus to it; the bare
+    // tabindex=-1 container would otherwise give screen readers nothing to read on focus. A semantic <section> avoids
+    // an ARIA role and the UA styling pitfalls of <fieldset>; the existing CSS targets the `.filters`/`.sorting` class.
+    const FiltersPanel = should_focus => $b8hua$createComponent((0, $b8hua$Show), {
+      get when() {
+        return !hide_filters();
+      },
+      get children() {
+        return $b8hua$ssr($7396052a1484264f$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$ssrAttribute("tabindex", -1, false) + $b8hua$ssrAttribute("aria-label", $b8hua$escape(i18n_.filters_(), true), false), $b8hua$escape($b8hua$createComponent((0, $f6b0500577e1b210$export$3f1a388cc0d8fed7), filter_options)));
+      }
+    });
+    const SortingPanel = should_focus => $b8hua$ssr($7396052a1484264f$var$_tmpl$2, $b8hua$ssrHydrationKey(), $b8hua$ssrAttribute("tabindex", -1, false) + $b8hua$ssrAttribute("aria-label", $b8hua$escape(i18n_.sorting_text_(), true), false), $b8hua$escape($b8hua$createComponent((0, $cfdbd124dd09d713$export$1f1775a58da589b5), sorting_options)));
     $b8hua$createEffect(() => {
+      // Consume the user-intent flag once per run, in every branch, so a stale flag can't leak into a later
+      // resize-triggered re-render and steal focus.
+      const should_focus_panel = user_opened_panel;
+      user_opened_panel = false;
       if (!filters_open() && !sorting_open()) {
         var _close_modal_;
         (_close_modal_ = close_modal_) === null || _close_modal_ === void 0 || _close_modal_();
+        restore_focus_to_toggle_on_close();
         set_extra_els_in_results_container_("");
       } else if (isSmall()()) {
         var _open_modal_;
@@ -5034,19 +5089,15 @@ function $7396052a1484264f$export$d7841e452f2e59a8(_ref) {
           set_sorting_open(false);
           return;
         }
+        // The modal manages its own focus; just drop the desktop panel reference.
+        current_panel = undefined;
+        current_panel_toggle_button = undefined;
         (_open_modal_ = open_modal_) === null || _open_modal_ === void 0 || _open_modal_();
         set_extra_els_in_results_container_("");
       } else {
         var _close_modal_2;
         (_close_modal_2 = close_modal_) === null || _close_modal_2 === void 0 || _close_modal_2();
-        if (filters_open()) set_extra_els_in_results_container_(() => $b8hua$createComponent((0, $b8hua$Show), {
-          get when() {
-            return !hide_filters();
-          },
-          get children() {
-            return $b8hua$ssr($7396052a1484264f$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$escape($b8hua$createComponent((0, $f6b0500577e1b210$export$3f1a388cc0d8fed7), filter_options)));
-          }
-        }));else set_extra_els_in_results_container_($b8hua$ssr($7396052a1484264f$var$_tmpl$2, $b8hua$ssrHydrationKey(), $b8hua$escape($b8hua$createComponent((0, $cfdbd124dd09d713$export$1f1775a58da589b5), sorting_options))));
+        if (filters_open()) set_extra_els_in_results_container_(() => FiltersPanel(should_focus_panel));else set_extra_els_in_results_container_(SortingPanel(should_focus_panel));
       }
     });
     $b8hua$catchify1(async () => {
@@ -5097,7 +5148,9 @@ function $7396052a1484264f$var$OpenFiltersButton(_ref3) {
     filter_button_width_: filter_button_width_,
     tabindex_: tabindex_,
     number_of_rendered_selected_filters_items_: [num_selected_filters],
-    hide_button_: hide_button_
+    hide_button_: hide_button_,
+    on_user_open_: on_user_open_,
+    button_ref_: button_ref_
   } = _ref3;
   const filters_closed = $b8hua$createMemo(() => !search_filters_open_[0]());
   // We assume in embedded_num_products that this is a single HTMLElement so pls change there if you change it here
@@ -5110,7 +5163,7 @@ function $7396052a1484264f$var$OpenFiltersButton(_ref3) {
     get children() {
       return $b8hua$ssr($7396052a1484264f$var$_tmpl$4, $b8hua$ssrHydrationKey(), $b8hua$ssrStyle(filters_closed() ? "" : "opacity:0"), $b8hua$escape(num_selected_filters()));
     }
-  })), $b8hua$ssrAttribute("tabindex", $b8hua$escape(tabindex_, true), false), "".concat(!filters_closed() ? "major" : "", " ").concat(filters_closed() ? "minor" : "").concat("filter toggle-button major-minor-transition" + ((0, $b8hua$isServer) ? " minor" : "")), $b8hua$ssrAttribute("aria-label", $b8hua$escape((filters_closed() ? i18n_.open_filters_ : i18n_.close_filters_)(), true), false), $b8hua$ssrStyle(filter_button_width_ !== null && filter_button_width_ !== void 0 && filter_button_width_() ? {
+  })), $b8hua$ssrAttribute("tabindex", $b8hua$escape(tabindex_, true), false), "".concat(!filters_closed() ? "major" : "", " ").concat(filters_closed() ? "minor" : "").concat("filter toggle-button major-minor-transition" + ((0, $b8hua$isServer) ? " minor" : "")), $b8hua$ssrAttribute("aria-label", $b8hua$escape((filters_closed() ? i18n_.open_filters_ : i18n_.close_filters_)(), true), false) + $b8hua$ssrAttribute("aria-expanded", !filters_closed(), false), $b8hua$ssrStyle(filter_button_width_ !== null && filter_button_width_ !== void 0 && filter_button_width_() ? {
     width: filter_button_width_() + "px"
   } : {}), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
     get when() {
@@ -5134,11 +5187,13 @@ function $7396052a1484264f$var$OpenSortingButton(_ref4) {
     search_sorting_open_: search_sorting_open_,
     sort_button_width_: sort_button_width_,
     tabindex_: tabindex_,
-    meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_
+    meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_,
+    on_user_open_: on_user_open_,
+    button_ref_: button_ref_
   } = _ref4;
   const sorting_closed = $b8hua$createMemo(() => !search_sorting_open_[0]());
   // We assume in embedded_num_products that this is a single HTMLElement so pls change there if you change it here
-  return $b8hua$ssr($7396052a1484264f$var$_tmpl$6, $b8hua$ssrHydrationKey(), "".concat(!sorting_closed() ? "major" : "", " ").concat(sorting_closed() ? "minor" : "", " toggle-button for-sorting major-minor-transition"), $b8hua$ssrAttribute("tabindex", $b8hua$escape(tabindex_, true), false) + $b8hua$ssrAttribute("aria-label", $b8hua$escape((sorting_closed() ? i18n_.open_sorting_ : i18n_.close_sorting_)(), true), false), $b8hua$ssrStyle(sort_button_width_ !== null && sort_button_width_ !== void 0 && sort_button_width_() ? {
+  return $b8hua$ssr($7396052a1484264f$var$_tmpl$6, $b8hua$ssrHydrationKey(), "".concat(!sorting_closed() ? "major" : "", " ").concat(sorting_closed() ? "minor" : "", " toggle-button for-sorting major-minor-transition"), $b8hua$ssrAttribute("tabindex", $b8hua$escape(tabindex_, true), false) + $b8hua$ssrAttribute("aria-label", $b8hua$escape((sorting_closed() ? i18n_.open_sorting_ : i18n_.close_sorting_)(), true), false) + $b8hua$ssrAttribute("aria-expanded", !sorting_closed(), false), $b8hua$ssrStyle(sort_button_width_ !== null && sort_button_width_ !== void 0 && sort_button_width_() ? {
     width: sort_button_width_() + "px"
   } : {}),
   // Show the title of the currently selected sorting when the sorting is closed, if there's currently a sorting selected

package/server/latest/index.cjs

@@ -109,7 +109,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.10.13";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.10.14";
 function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
   const signal = $5vyXB$solidjs.createSignal(false);
   $5vyXB$solidjs.onCleanup($5vyXB$depictaiutilishared.javascript_media_query(media_query, ({
@@ -2213,8 +2213,10 @@ function $cc43b6428000c4bf$export$f21ab0717a89c77f(props) {
 var $0fe1e7efdf4200d6$var$_tmpl$ = ["<button", ' type="button" class="', '"', "><!--$-->", "<!--/--><span>", "</span></button>"];
 function $0fe1e7efdf4200d6$export$ca21a16d65b3dd8({
   show_extras_: [get_show_extras, set_show_extras],
-  i18n_: i18n_
+  i18n_: i18n_,
+  expanding_container_element_: expanding_container_element_
 }) {
+  let button;
   return $5vyXB$solidjsweb.ssr($0fe1e7efdf4200d6$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), `expand-filter ${get_show_extras() ? "expanded" : ""}`, $5vyXB$solidjsweb.ssrAttribute("aria-expanded", $5vyXB$solidjsweb.escape(get_show_extras(), true), false), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $cc43b6428000c4bf$export$f21ab0717a89c77f), {})), get_show_extras() ? $5vyXB$solidjsweb.escape(i18n_.view_less_()) : $5vyXB$solidjsweb.escape(i18n_.view_more_()));
 }
 var $d023ed916c84e75d$var$_tmpl$ = ["<span", ' class="highlighted-part">', "</span>"],
@@ -2367,7 +2369,8 @@ function $d94869c80e337a3d$export$dd948f91abc3a1c4({
   $5vyXB$solidjs.createRenderEffect(() => {
     set_view_more_button_below_group_(togglable_rest() ? $5vyXB$solidjsweb.createComponent((0, $0fe1e7efdf4200d6$export$ca21a16d65b3dd8), {
       show_extras_: show_extras_signal,
-      i18n_: i18n_
+      i18n_: i18n_,
+      expanding_container_element_: expanding_container_els
     }) : []);
   });
   $5vyXB$solidjs.onCleanup(() => set_view_more_button_below_group_());
@@ -3044,7 +3047,8 @@ function $3bdc00a1353c1150$export$a32086fa6616eafd({
   $5vyXB$solidjs.createRenderEffect(() => {
     set_view_more_button_below_group(some_top_level_are_hidden() ? $5vyXB$solidjsweb.createComponent((0, $0fe1e7efdf4200d6$export$ca21a16d65b3dd8), {
       show_extras_: show_extras,
-      i18n_: i18n_
+      i18n_: i18n_,
+      expanding_container_element_: expanding_container_els
     }) : []);
   });
   $5vyXB$solidjs.onCleanup(() => set_view_more_button_below_group());
@@ -3709,7 +3713,8 @@ function $b51a2b8b9355e66c$export$82ed4b28ecb67608({
   $5vyXB$solidjs.createRenderEffect(() => {
     set_view_more_button_below_group_(togglable_rest() ? $5vyXB$solidjsweb.createComponent((0, $0fe1e7efdf4200d6$export$ca21a16d65b3dd8), {
       show_extras_: show_extras_signal,
-      i18n_: i18n_
+      i18n_: i18n_,
+      expanding_container_element_: expanding_container_els
     }) : []);
   });
   $5vyXB$solidjs.onCleanup(() => set_view_more_button_below_group_());
@@ -4708,8 +4713,8 @@ var $f49857214f7675b1$var$_tmpl$ = ["<svg", ' xmlns="http://www.w3.org/2000/svg"
 function $f49857214f7675b1$export$cb808a3c41736d8e() {
   return $5vyXB$solidjsweb.ssr($f49857214f7675b1$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey());
 }
-var $f8f64d05c525825b$var$_tmpl$ = ["<div", ' class="filters"><div class="body">', "</div></div>"],
-  $f8f64d05c525825b$var$_tmpl$2 = ["<div", ' class="sorting"><div class="body">', "</div></div>"],
+var $f8f64d05c525825b$var$_tmpl$ = ["<section", ' class="filters"', '><div class="body">', "</div></section>"],
+  $f8f64d05c525825b$var$_tmpl$2 = ["<section", ' class="sorting"', '><div class="body">', "</div></section>"],
   $f8f64d05c525825b$var$_tmpl$3 = ["<div", ' class="sort-and-filter-buttons"><div class="outer"><div class="inner"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div></div></div>"],
   $f8f64d05c525825b$var$_tmpl$4 = ["<span", ' class="num-filters" style="', '">', "</span>"],
   $f8f64d05c525825b$var$_tmpl$5 = ["<div", ' class="open-filters-button-container" style="', '"><!--$-->', "<!--/--><button", ' class="', '" type="button"', ' style="', '"><!--$-->', "<!--/--><span>", "</span></button></div>"],
@@ -4778,6 +4783,27 @@ function $f8f64d05c525825b$export$d7841e452f2e59a8({
       available_sortings_: available_sortings_,
       meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_
     };
+    // Keyboard accessibility for the desktop panels (rendered after the product grid in the DOM): when the user
+    // opens a panel we move focus into it, and restore focus to the toggle button on close. Intent is tracked with
+    // a plain flag set in the buttons' click handlers - `filters_open`/`sorting_open` also change programmatically
+    // (undo toast, history-state restore, SDK consumers), and those must not steal focus.
+    let user_opened_panel = false;
+    let filter_toggle_button;
+    let sort_toggle_button;
+    let current_panel;
+    let current_panel_toggle_button;
+    const focus_panel_when_in_dom = panel => $5vyXB$depictaiutilishared.catchify(async () => {
+      // Bounded wait: if the panel never lands in the DOM (e.g. it's superseded by a rapid re-render before
+      // insertion), the timeout lets this promise resolve instead of keeping `panel` - and the observer
+      // listener it registers - referenced forever.
+      await (0, $5vyXB$depictaiutilishared.observer).wait_for_element(panel, 4000);
+      if (panel.isConnected) panel.focus();
+    })();
+    const register_desktop_panel = (el, toggle_button, should_focus) => {
+      current_panel = el;
+      current_panel_toggle_button = toggle_button;
+      if (should_focus) focus_panel_when_in_dom(el);
+    };
     const make_open_filters_button = (adhere_to_width = false, is_tabbable = false) => $5vyXB$solidjsweb.createComponent($f8f64d05c525825b$var$OpenFiltersButton, {
       tabindex_: is_tabbable ? 0 : -1,
       i18n_: i18n_,
@@ -4785,7 +4811,9 @@ function $f8f64d05c525825b$export$d7841e452f2e59a8({
       search_sorting_open_: search_sorting_open_,
       number_of_rendered_selected_filters_items_: number_of_rendered_selected_filters_items_,
       filter_button_width_: adhere_to_width ? filter_button_width_ : undefined,
-      hide_button_: hide_filters
+      hide_button_: hide_filters,
+      on_user_open_: () => user_opened_panel = true,
+      button_ref_: is_tabbable ? el => filter_toggle_button = el : undefined
     });
     const make_open_sorting_button = (adhere_to_width = false, is_tabbable = false) => $5vyXB$solidjsweb.createComponent($f8f64d05c525825b$var$OpenSortingButton, {
       tabindex_: is_tabbable ? 0 : -1,
@@ -4795,7 +4823,9 @@ function $f8f64d05c525825b$export$d7841e452f2e59a8({
       search_sorting_open_: search_sorting_open_,
       available_sortings_: available_sortings_,
       sort_button_width_: adhere_to_width ? sort_button_width_ : undefined,
-      meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_
+      meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_,
+      on_user_open_: () => user_opened_panel = true,
+      button_ref_: is_tabbable ? el => sort_toggle_button = el : undefined
     });
     let open_modal_;
     let close_modal_;
@@ -4814,9 +4844,34 @@ function $f8f64d05c525825b$export$d7841e452f2e59a8({
         grid_is_in_original_state = true;
       }
     });
+    // Restore focus to the relevant toggle button when a desktop panel is torn down while focus is still inside it.
+    const restore_focus_to_toggle_on_close = () => {
+      const button_to_restore = current_panel_toggle_button;
+      const focus_was_in_panel = !!current_panel && current_panel.contains(document.activeElement);
+      current_panel = undefined;
+      current_panel_toggle_button = undefined;
+      if (focus_was_in_panel) button_to_restore?.focus();
+    };
+    // `<section>` + `aria-label` so the panel announces itself ("Filters"/"Sort") when we move focus to it; the bare
+    // tabindex=-1 container would otherwise give screen readers nothing to read on focus. A semantic <section> avoids
+    // an ARIA role and the UA styling pitfalls of <fieldset>; the existing CSS targets the `.filters`/`.sorting` class.
+    const FiltersPanel = should_focus => $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+      get when() {
+        return !hide_filters();
+      },
+      get children() {
+        return $5vyXB$solidjsweb.ssr($f8f64d05c525825b$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrAttribute("tabindex", -1, false) + $5vyXB$solidjsweb.ssrAttribute("aria-label", $5vyXB$solidjsweb.escape(i18n_.filters_(), true), false), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $aff9a96d30ed3563$export$3f1a388cc0d8fed7), filter_options)));
+      }
+    });
+    const SortingPanel = should_focus => $5vyXB$solidjsweb.ssr($f8f64d05c525825b$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrAttribute("tabindex", -1, false) + $5vyXB$solidjsweb.ssrAttribute("aria-label", $5vyXB$solidjsweb.escape(i18n_.sorting_text_(), true), false), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $be89be42ce9ea60f$export$1f1775a58da589b5), sorting_options)));
     $5vyXB$solidjs.createEffect(() => {
+      // Consume the user-intent flag once per run, in every branch, so a stale flag can't leak into a later
+      // resize-triggered re-render and steal focus.
+      const should_focus_panel = user_opened_panel;
+      user_opened_panel = false;
       if (!filters_open() && !sorting_open()) {
         close_modal_?.();
+        restore_focus_to_toggle_on_close();
         set_extra_els_in_results_container_("");
       } else if (isSmall()()) {
         if ($5vyXB$solidjs.untrack(() => input_modal_open_?.())) {
@@ -4825,18 +4880,14 @@ function $f8f64d05c525825b$export$d7841e452f2e59a8({
           set_sorting_open(false);
           return;
         }
+        // The modal manages its own focus; just drop the desktop panel reference.
+        current_panel = undefined;
+        current_panel_toggle_button = undefined;
         open_modal_?.();
         set_extra_els_in_results_container_("");
       } else {
         close_modal_?.();
-        if (filters_open()) set_extra_els_in_results_container_(() => $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
-          get when() {
-            return !hide_filters();
-          },
-          get children() {
-            return $5vyXB$solidjsweb.ssr($f8f64d05c525825b$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $aff9a96d30ed3563$export$3f1a388cc0d8fed7), filter_options)));
-          }
-        }));else set_extra_els_in_results_container_($5vyXB$solidjsweb.ssr($f8f64d05c525825b$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $be89be42ce9ea60f$export$1f1775a58da589b5), sorting_options))));
+        if (filters_open()) set_extra_els_in_results_container_(() => FiltersPanel(should_focus_panel));else set_extra_els_in_results_container_(SortingPanel(should_focus_panel));
       }
     });
     $5vyXB$depictaiutilishared.catchify(async () => {
@@ -4886,7 +4937,9 @@ function $f8f64d05c525825b$var$OpenFiltersButton({
   filter_button_width_: filter_button_width_,
   tabindex_: tabindex_,
   number_of_rendered_selected_filters_items_: [num_selected_filters],
-  hide_button_: hide_button_
+  hide_button_: hide_button_,
+  on_user_open_: on_user_open_,
+  button_ref_: button_ref_
 }) {
   const filters_closed = $5vyXB$solidjs.createMemo(() => !search_filters_open_[0]());
   // We assume in embedded_num_products that this is a single HTMLElement so pls change there if you change it here
@@ -4899,7 +4952,7 @@ function $f8f64d05c525825b$var$OpenFiltersButton({
     get children() {
       return $5vyXB$solidjsweb.ssr($f8f64d05c525825b$var$_tmpl$4, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrStyle(filters_closed() ? `` : `opacity:0`), $5vyXB$solidjsweb.escape(num_selected_filters()));
     }
-  })), $5vyXB$solidjsweb.ssrAttribute("tabindex", $5vyXB$solidjsweb.escape(tabindex_, true), false), `${!filters_closed() ? "major" : ""} ${filters_closed() ? "minor" : ""} ${"filter toggle-button major-minor-transition" + ((0, $5vyXB$solidjsweb.isServer) ? " minor" : "")}`, $5vyXB$solidjsweb.ssrAttribute("aria-label", $5vyXB$solidjsweb.escape((filters_closed() ? i18n_.open_filters_ : i18n_.close_filters_)(), true), false), $5vyXB$solidjsweb.ssrStyle(filter_button_width_?.() ? {
+  })), $5vyXB$solidjsweb.ssrAttribute("tabindex", $5vyXB$solidjsweb.escape(tabindex_, true), false), `${!filters_closed() ? "major" : ""} ${filters_closed() ? "minor" : ""} ${"filter toggle-button major-minor-transition" + ((0, $5vyXB$solidjsweb.isServer) ? " minor" : "")}`, $5vyXB$solidjsweb.ssrAttribute("aria-label", $5vyXB$solidjsweb.escape((filters_closed() ? i18n_.open_filters_ : i18n_.close_filters_)(), true), false) + $5vyXB$solidjsweb.ssrAttribute("aria-expanded", !filters_closed(), false), $5vyXB$solidjsweb.ssrStyle(filter_button_width_?.() ? {
     width: filter_button_width_() + "px"
   } : {}), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
     get when() {
@@ -4921,11 +4974,13 @@ function $f8f64d05c525825b$var$OpenSortingButton({
   search_sorting_open_: search_sorting_open_,
   sort_button_width_: sort_button_width_,
   tabindex_: tabindex_,
-  meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_
+  meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_,
+  on_user_open_: on_user_open_,
+  button_ref_: button_ref_
 }) {
   const sorting_closed = $5vyXB$solidjs.createMemo(() => !search_sorting_open_[0]());
   // We assume in embedded_num_products that this is a single HTMLElement so pls change there if you change it here
-  return $5vyXB$solidjsweb.ssr($f8f64d05c525825b$var$_tmpl$6, $5vyXB$solidjsweb.ssrHydrationKey(), `${!sorting_closed() ? "major" : ""} ${sorting_closed() ? "minor" : ""} toggle-button for-sorting major-minor-transition`, $5vyXB$solidjsweb.ssrAttribute("tabindex", $5vyXB$solidjsweb.escape(tabindex_, true), false) + $5vyXB$solidjsweb.ssrAttribute("aria-label", $5vyXB$solidjsweb.escape((sorting_closed() ? i18n_.open_sorting_ : i18n_.close_sorting_)(), true), false), $5vyXB$solidjsweb.ssrStyle(sort_button_width_?.() ? {
+  return $5vyXB$solidjsweb.ssr($f8f64d05c525825b$var$_tmpl$6, $5vyXB$solidjsweb.ssrHydrationKey(), `${!sorting_closed() ? "major" : ""} ${sorting_closed() ? "minor" : ""} toggle-button for-sorting major-minor-transition`, $5vyXB$solidjsweb.ssrAttribute("tabindex", $5vyXB$solidjsweb.escape(tabindex_, true), false) + $5vyXB$solidjsweb.ssrAttribute("aria-label", $5vyXB$solidjsweb.escape((sorting_closed() ? i18n_.open_sorting_ : i18n_.close_sorting_)(), true), false) + $5vyXB$solidjsweb.ssrAttribute("aria-expanded", !sorting_closed(), false), $5vyXB$solidjsweb.ssrStyle(sort_button_width_?.() ? {
     width: sort_button_width_() + "px"
   } : {}),
   // Show the title of the currently selected sorting when the sorting is closed, if there's currently a sorting selected

package/server/latest/index.d.ts

@@ -11,7 +11,7 @@ import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { FeaturedInDisplay } from "@depict-ai/types/api/FeaturedInResponseV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.10.13";
+export const version = "4.10.14";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */

package/server/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $i7OB2$createStore, reconcile as $i7OB2$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.13";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.14";
 function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   const signal = $i7OB2$createSignal(false);
   $i7OB2$onCleanup($i7OB2$javascript_media_query(media_query, ({
@@ -2111,8 +2111,10 @@ function $f8a56ba74eedd0c6$export$f21ab0717a89c77f(props) {
 var $67b173f9db427028$var$_tmpl$ = ["<button", ' type="button" class="', '"', "><!--$-->", "<!--/--><span>", "</span></button>"];
 function $67b173f9db427028$export$ca21a16d65b3dd8({
   show_extras_: [get_show_extras, set_show_extras],
-  i18n_: i18n_
+  i18n_: i18n_,
+  expanding_container_element_: expanding_container_element_
 }) {
+  let button;
   return $i7OB2$ssr($67b173f9db427028$var$_tmpl$, $i7OB2$ssrHydrationKey(), `expand-filter ${get_show_extras() ? "expanded" : ""}`, $i7OB2$ssrAttribute("aria-expanded", $i7OB2$escape(get_show_extras(), true), false), $i7OB2$escape($i7OB2$createComponent((0, $f8a56ba74eedd0c6$export$f21ab0717a89c77f), {})), get_show_extras() ? $i7OB2$escape(i18n_.view_less_()) : $i7OB2$escape(i18n_.view_more_()));
 }
 var $f3213c0640246d58$var$_tmpl$ = ["<span", ' class="highlighted-part">', "</span>"],
@@ -2265,7 +2267,8 @@ function $a4601e6bea3ed1e6$export$dd948f91abc3a1c4({
   $i7OB2$createRenderEffect(() => {
     set_view_more_button_below_group_(togglable_rest() ? $i7OB2$createComponent((0, $67b173f9db427028$export$ca21a16d65b3dd8), {
       show_extras_: show_extras_signal,
-      i18n_: i18n_
+      i18n_: i18n_,
+      expanding_container_element_: expanding_container_els
     }) : []);
   });
   $i7OB2$onCleanup(() => set_view_more_button_below_group_());
@@ -2942,7 +2945,8 @@ function $1c8cac76cb67e9af$export$a32086fa6616eafd({
   $i7OB2$createRenderEffect(() => {
     set_view_more_button_below_group(some_top_level_are_hidden() ? $i7OB2$createComponent((0, $67b173f9db427028$export$ca21a16d65b3dd8), {
       show_extras_: show_extras,
-      i18n_: i18n_
+      i18n_: i18n_,
+      expanding_container_element_: expanding_container_els
     }) : []);
   });
   $i7OB2$onCleanup(() => set_view_more_button_below_group());
@@ -3607,7 +3611,8 @@ function $e731d52d97444b7c$export$82ed4b28ecb67608({
   $i7OB2$createRenderEffect(() => {
     set_view_more_button_below_group_(togglable_rest() ? $i7OB2$createComponent((0, $67b173f9db427028$export$ca21a16d65b3dd8), {
       show_extras_: show_extras_signal,
-      i18n_: i18n_
+      i18n_: i18n_,
+      expanding_container_element_: expanding_container_els
     }) : []);
   });
   $i7OB2$onCleanup(() => set_view_more_button_below_group_());
@@ -4606,8 +4611,8 @@ var $11d594c749b76228$var$_tmpl$ = ["<svg", ' xmlns="http://www.w3.org/2000/svg"
 function $11d594c749b76228$export$cb808a3c41736d8e() {
   return $i7OB2$ssr($11d594c749b76228$var$_tmpl$, $i7OB2$ssrHydrationKey());
 }
-var $cdea4cf8c5c071ef$var$_tmpl$ = ["<div", ' class="filters"><div class="body">', "</div></div>"],
-  $cdea4cf8c5c071ef$var$_tmpl$2 = ["<div", ' class="sorting"><div class="body">', "</div></div>"],
+var $cdea4cf8c5c071ef$var$_tmpl$ = ["<section", ' class="filters"', '><div class="body">', "</div></section>"],
+  $cdea4cf8c5c071ef$var$_tmpl$2 = ["<section", ' class="sorting"', '><div class="body">', "</div></section>"],
   $cdea4cf8c5c071ef$var$_tmpl$3 = ["<div", ' class="sort-and-filter-buttons"><div class="outer"><div class="inner"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div></div></div>"],
   $cdea4cf8c5c071ef$var$_tmpl$4 = ["<span", ' class="num-filters" style="', '">', "</span>"],
   $cdea4cf8c5c071ef$var$_tmpl$5 = ["<div", ' class="open-filters-button-container" style="', '"><!--$-->', "<!--/--><button", ' class="', '" type="button"', ' style="', '"><!--$-->', "<!--/--><span>", "</span></button></div>"],
@@ -4676,6 +4681,27 @@ function $cdea4cf8c5c071ef$export$d7841e452f2e59a8({
       available_sortings_: available_sortings_,
       meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_
     };
+    // Keyboard accessibility for the desktop panels (rendered after the product grid in the DOM): when the user
+    // opens a panel we move focus into it, and restore focus to the toggle button on close. Intent is tracked with
+    // a plain flag set in the buttons' click handlers - `filters_open`/`sorting_open` also change programmatically
+    // (undo toast, history-state restore, SDK consumers), and those must not steal focus.
+    let user_opened_panel = false;
+    let filter_toggle_button;
+    let sort_toggle_button;
+    let current_panel;
+    let current_panel_toggle_button;
+    const focus_panel_when_in_dom = panel => $i7OB2$catchify1(async () => {
+      // Bounded wait: if the panel never lands in the DOM (e.g. it's superseded by a rapid re-render before
+      // insertion), the timeout lets this promise resolve instead of keeping `panel` - and the observer
+      // listener it registers - referenced forever.
+      await (0, $i7OB2$observer).wait_for_element(panel, 4000);
+      if (panel.isConnected) panel.focus();
+    })();
+    const register_desktop_panel = (el, toggle_button, should_focus) => {
+      current_panel = el;
+      current_panel_toggle_button = toggle_button;
+      if (should_focus) focus_panel_when_in_dom(el);
+    };
     const make_open_filters_button = (adhere_to_width = false, is_tabbable = false) => $i7OB2$createComponent($cdea4cf8c5c071ef$var$OpenFiltersButton, {
       tabindex_: is_tabbable ? 0 : -1,
       i18n_: i18n_,
@@ -4683,7 +4709,9 @@ function $cdea4cf8c5c071ef$export$d7841e452f2e59a8({
       search_sorting_open_: search_sorting_open_,
       number_of_rendered_selected_filters_items_: number_of_rendered_selected_filters_items_,
       filter_button_width_: adhere_to_width ? filter_button_width_ : undefined,
-      hide_button_: hide_filters
+      hide_button_: hide_filters,
+      on_user_open_: () => user_opened_panel = true,
+      button_ref_: is_tabbable ? el => filter_toggle_button = el : undefined
     });
     const make_open_sorting_button = (adhere_to_width = false, is_tabbable = false) => $i7OB2$createComponent($cdea4cf8c5c071ef$var$OpenSortingButton, {
       tabindex_: is_tabbable ? 0 : -1,
@@ -4693,7 +4721,9 @@ function $cdea4cf8c5c071ef$export$d7841e452f2e59a8({
       search_sorting_open_: search_sorting_open_,
       available_sortings_: available_sortings_,
       sort_button_width_: adhere_to_width ? sort_button_width_ : undefined,
-      meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_
+      meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_,
+      on_user_open_: () => user_opened_panel = true,
+      button_ref_: is_tabbable ? el => sort_toggle_button = el : undefined
     });
     let open_modal_;
     let close_modal_;
@@ -4712,9 +4742,34 @@ function $cdea4cf8c5c071ef$export$d7841e452f2e59a8({
         grid_is_in_original_state = true;
       }
     });
+    // Restore focus to the relevant toggle button when a desktop panel is torn down while focus is still inside it.
+    const restore_focus_to_toggle_on_close = () => {
+      const button_to_restore = current_panel_toggle_button;
+      const focus_was_in_panel = !!current_panel && current_panel.contains(document.activeElement);
+      current_panel = undefined;
+      current_panel_toggle_button = undefined;
+      if (focus_was_in_panel) button_to_restore?.focus();
+    };
+    // `<section>` + `aria-label` so the panel announces itself ("Filters"/"Sort") when we move focus to it; the bare
+    // tabindex=-1 container would otherwise give screen readers nothing to read on focus. A semantic <section> avoids
+    // an ARIA role and the UA styling pitfalls of <fieldset>; the existing CSS targets the `.filters`/`.sorting` class.
+    const FiltersPanel = should_focus => $i7OB2$createComponent((0, $i7OB2$Show), {
+      get when() {
+        return !hide_filters();
+      },
+      get children() {
+        return $i7OB2$ssr($cdea4cf8c5c071ef$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$ssrAttribute("tabindex", -1, false) + $i7OB2$ssrAttribute("aria-label", $i7OB2$escape(i18n_.filters_(), true), false), $i7OB2$escape($i7OB2$createComponent((0, $fab07f52c9861732$export$3f1a388cc0d8fed7), filter_options)));
+      }
+    });
+    const SortingPanel = should_focus => $i7OB2$ssr($cdea4cf8c5c071ef$var$_tmpl$2, $i7OB2$ssrHydrationKey(), $i7OB2$ssrAttribute("tabindex", -1, false) + $i7OB2$ssrAttribute("aria-label", $i7OB2$escape(i18n_.sorting_text_(), true), false), $i7OB2$escape($i7OB2$createComponent((0, $68a258a92b88f02f$export$1f1775a58da589b5), sorting_options)));
     $i7OB2$createEffect(() => {
+      // Consume the user-intent flag once per run, in every branch, so a stale flag can't leak into a later
+      // resize-triggered re-render and steal focus.
+      const should_focus_panel = user_opened_panel;
+      user_opened_panel = false;
       if (!filters_open() && !sorting_open()) {
         close_modal_?.();
+        restore_focus_to_toggle_on_close();
         set_extra_els_in_results_container_("");
       } else if (isSmall()()) {
         if ($i7OB2$untrack(() => input_modal_open_?.())) {
@@ -4723,18 +4778,14 @@ function $cdea4cf8c5c071ef$export$d7841e452f2e59a8({
           set_sorting_open(false);
           return;
         }
+        // The modal manages its own focus; just drop the desktop panel reference.
+        current_panel = undefined;
+        current_panel_toggle_button = undefined;
         open_modal_?.();
         set_extra_els_in_results_container_("");
       } else {
         close_modal_?.();
-        if (filters_open()) set_extra_els_in_results_container_(() => $i7OB2$createComponent((0, $i7OB2$Show), {
-          get when() {
-            return !hide_filters();
-          },
-          get children() {
-            return $i7OB2$ssr($cdea4cf8c5c071ef$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent((0, $fab07f52c9861732$export$3f1a388cc0d8fed7), filter_options)));
-          }
-        }));else set_extra_els_in_results_container_($i7OB2$ssr($cdea4cf8c5c071ef$var$_tmpl$2, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent((0, $68a258a92b88f02f$export$1f1775a58da589b5), sorting_options))));
+        if (filters_open()) set_extra_els_in_results_container_(() => FiltersPanel(should_focus_panel));else set_extra_els_in_results_container_(SortingPanel(should_focus_panel));
       }
     });
     $i7OB2$catchify1(async () => {
@@ -4784,7 +4835,9 @@ function $cdea4cf8c5c071ef$var$OpenFiltersButton({
   filter_button_width_: filter_button_width_,
   tabindex_: tabindex_,
   number_of_rendered_selected_filters_items_: [num_selected_filters],
-  hide_button_: hide_button_
+  hide_button_: hide_button_,
+  on_user_open_: on_user_open_,
+  button_ref_: button_ref_
 }) {
   const filters_closed = $i7OB2$createMemo(() => !search_filters_open_[0]());
   // We assume in embedded_num_products that this is a single HTMLElement so pls change there if you change it here
@@ -4797,7 +4850,7 @@ function $cdea4cf8c5c071ef$var$OpenFiltersButton({
     get children() {
       return $i7OB2$ssr($cdea4cf8c5c071ef$var$_tmpl$4, $i7OB2$ssrHydrationKey(), $i7OB2$ssrStyle(filters_closed() ? `` : `opacity:0`), $i7OB2$escape(num_selected_filters()));
     }
-  })), $i7OB2$ssrAttribute("tabindex", $i7OB2$escape(tabindex_, true), false), `${!filters_closed() ? "major" : ""} ${filters_closed() ? "minor" : ""} ${"filter toggle-button major-minor-transition" + ((0, $i7OB2$isServer) ? " minor" : "")}`, $i7OB2$ssrAttribute("aria-label", $i7OB2$escape((filters_closed() ? i18n_.open_filters_ : i18n_.close_filters_)(), true), false), $i7OB2$ssrStyle(filter_button_width_?.() ? {
+  })), $i7OB2$ssrAttribute("tabindex", $i7OB2$escape(tabindex_, true), false), `${!filters_closed() ? "major" : ""} ${filters_closed() ? "minor" : ""} ${"filter toggle-button major-minor-transition" + ((0, $i7OB2$isServer) ? " minor" : "")}`, $i7OB2$ssrAttribute("aria-label", $i7OB2$escape((filters_closed() ? i18n_.open_filters_ : i18n_.close_filters_)(), true), false) + $i7OB2$ssrAttribute("aria-expanded", !filters_closed(), false), $i7OB2$ssrStyle(filter_button_width_?.() ? {
     width: filter_button_width_() + "px"
   } : {}), $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
     get when() {
@@ -4819,11 +4872,13 @@ function $cdea4cf8c5c071ef$var$OpenSortingButton({
   search_sorting_open_: search_sorting_open_,
   sort_button_width_: sort_button_width_,
   tabindex_: tabindex_,
-  meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_
+  meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_,
+  on_user_open_: on_user_open_,
+  button_ref_: button_ref_
 }) {
   const sorting_closed = $i7OB2$createMemo(() => !search_sorting_open_[0]());
   // We assume in embedded_num_products that this is a single HTMLElement so pls change there if you change it here
-  return $i7OB2$ssr($cdea4cf8c5c071ef$var$_tmpl$6, $i7OB2$ssrHydrationKey(), `${!sorting_closed() ? "major" : ""} ${sorting_closed() ? "minor" : ""} toggle-button for-sorting major-minor-transition`, $i7OB2$ssrAttribute("tabindex", $i7OB2$escape(tabindex_, true), false) + $i7OB2$ssrAttribute("aria-label", $i7OB2$escape((sorting_closed() ? i18n_.open_sorting_ : i18n_.close_sorting_)(), true), false), $i7OB2$ssrStyle(sort_button_width_?.() ? {
+  return $i7OB2$ssr($cdea4cf8c5c071ef$var$_tmpl$6, $i7OB2$ssrHydrationKey(), `${!sorting_closed() ? "major" : ""} ${sorting_closed() ? "minor" : ""} toggle-button for-sorting major-minor-transition`, $i7OB2$ssrAttribute("tabindex", $i7OB2$escape(tabindex_, true), false) + $i7OB2$ssrAttribute("aria-label", $i7OB2$escape((sorting_closed() ? i18n_.open_sorting_ : i18n_.close_sorting_)(), true), false) + $i7OB2$ssrAttribute("aria-expanded", !sorting_closed(), false), $i7OB2$ssrStyle(sort_button_width_?.() ? {
     width: sort_button_width_() + "px"
   } : {}),
   // Show the title of the currently selected sorting when the sorting is closed, if there's currently a sorting selected