@depict-ai/ui 4.10.12 → 4.10.14

package/server/ES10/index.cjs

@@ -115,7 +115,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $335c02c1241a9ca8$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $335c02c1241a9ca8$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $c10e33c4681f8c9b$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.10.12";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.10.14";
 function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
   const signal = $3hooq$solidjs.createSignal(false);
   $3hooq$solidjs.onCleanup($3hooq$depictaiutilishared.javascript_media_query(media_query, _ref => {
@@ -2311,13 +2311,15 @@ function $a904ccf883f60231$export$f21ab0717a89c77f(props) {
     height: "12"
   }), () => $3hooq$solidjsweb.ssr($a904ccf883f60231$var$_tmpl$), true);
 }
-var $b0477e4d832f090e$var$_tmpl$ = ["<button", ' type="button" class="', '"><!--$-->', "<!--/--><span>", "</span></button>"];
+var $b0477e4d832f090e$var$_tmpl$ = ["<button", ' type="button" class="', '"', "><!--$-->", "<!--/--><span>", "</span></button>"];
 function $b0477e4d832f090e$export$ca21a16d65b3dd8(_ref) {
   let {
     show_extras_: [get_show_extras, set_show_extras],
-    i18n_: i18n_
+    i18n_: i18n_,
+    expanding_container_element_: expanding_container_element_
   } = _ref;
-  return $3hooq$solidjsweb.ssr($b0477e4d832f090e$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "expand-filter ".concat(get_show_extras() ? "expanded" : ""), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $a904ccf883f60231$export$f21ab0717a89c77f), {})), get_show_extras() ? $3hooq$solidjsweb.escape(i18n_.view_less_()) : $3hooq$solidjsweb.escape(i18n_.view_more_()));
+  let button;
+  return $3hooq$solidjsweb.ssr($b0477e4d832f090e$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "expand-filter ".concat(get_show_extras() ? "expanded" : ""), $3hooq$solidjsweb.ssrAttribute("aria-expanded", $3hooq$solidjsweb.escape(get_show_extras(), true), false), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $a904ccf883f60231$export$f21ab0717a89c77f), {})), get_show_extras() ? $3hooq$solidjsweb.escape(i18n_.view_less_()) : $3hooq$solidjsweb.escape(i18n_.view_more_()));
 }
 var $23c3f390dee33ff8$var$_tmpl$ = ["<span", ' class="highlighted-part">', "</span>"],
   $23c3f390dee33ff8$var$_tmpl$2 = ["<span", ' class="', '"', ">", "</span>"];
@@ -2478,7 +2480,8 @@ function $9b54b9c5381716eb$export$dd948f91abc3a1c4(_ref) {
   $3hooq$solidjs.createRenderEffect(() => {
     set_view_more_button_below_group_(togglable_rest() ? $3hooq$solidjsweb.createComponent((0, $b0477e4d832f090e$export$ca21a16d65b3dd8), {
       show_extras_: show_extras_signal,
-      i18n_: i18n_
+      i18n_: i18n_,
+      expanding_container_element_: expanding_container_els
     }) : []);
   });
   $3hooq$solidjs.onCleanup(() => set_view_more_button_below_group_());
@@ -2566,7 +2569,7 @@ function $d9239dad9a9d899b$export$430444115f70a734(_ref) {
     }
   })));
 }
-var $0257c760a99bfacb$var$_tmpl$ = ["<div", ' class="', '"><div class="input-group"><div class="field"><input', ' type="number"', '></div><div class="separator">-</div><div class="field"><input', ' type="number"', "></div></div><!--$-->", '<!--/--><div class="value-text"><span class="min"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", '<!--/--></span><span class="max"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></span></div></div>"],
+var $0257c760a99bfacb$var$_tmpl$ = ["<div", ' class="', '"><div class="input-group"><div class="field"><input', ' type="number"', '></div><div class="separator" aria-hidden="true">-</div><div class="field"><input', ' type="number"', "></div></div><!--$-->", '<!--/--><div class="value-text"><span class="min"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", '<!--/--></span><span class="max"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></span></div></div>"],
   $0257c760a99bfacb$var$_tmpl$2 = ["<div", ' class="slider"><div class="progress" style="', '"></div></div>'],
   $0257c760a99bfacb$var$_tmpl$3 = ["<div", ' class="range-group"><input', ' type="range"', ' step="any"><input', ' type="range"', ' step="any"></div>'];
 function $0257c760a99bfacb$export$e0d834a0ad870cda(_ref) {
@@ -2665,7 +2668,8 @@ function $0257c760a99bfacb$var$RangeSelector(_ref3) {
     min_: min_,
     current_range_: current_range_,
     i18n_: i18n_,
-    should_be_disabled_: should_be_disabled_
+    should_be_disabled_: should_be_disabled_,
+    priceFormatting_: price_formatting_
   })), $3hooq$solidjsweb.escape(pre_price()), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $f38f2e64ebe2da86$export$a71e92cfbb498adc), {
     get price_() {
       return min_();
@@ -2688,7 +2692,8 @@ function $0257c760a99bfacb$var$ExponentialSlider(_ref4) {
     min_: min_,
     i18n_: i18n_,
     max_: max_,
-    should_be_disabled_: should_be_disabled_
+    should_be_disabled_: should_be_disabled_,
+    priceFormatting_: priceFormatting_
   } = _ref4;
   // inspired by https://observablehq.com/@mbostock/nonlinear-slider
   const transform_linear_to_nonlinear = _ref5 => {
@@ -2725,7 +2730,8 @@ function $0257c760a99bfacb$var$ExponentialSlider(_ref4) {
     max_: modified_max,
     offset_value_calculator_: offset_value_calculator_,
     i18n_: i18n_,
-    should_be_disabled_: should_be_disabled_
+    should_be_disabled_: should_be_disabled_,
+    priceFormatting_: priceFormatting_
   });
 }
 function $0257c760a99bfacb$var$LinearSlider(_ref6) {
@@ -2735,12 +2741,17 @@ function $0257c760a99bfacb$var$LinearSlider(_ref6) {
     current_range_: current_range_,
     offset_value_calculator_: offset_value_calculator_,
     i18n_: i18n_,
-    should_be_disabled_: should_be_disabled_
+    should_be_disabled_: should_be_disabled_,
+    priceFormatting_: priceFormatting_
   } = _ref6;
   let range_input_1;
   let range_input_2;
   let clickable_slider;
   const [get_current_range, set_current_range] = current_range_;
+  const formatRealPrice = value => {
+    const priceFormatting = priceFormatting_();
+    return priceFormatting.pre_ + $3hooq$depictaiutilishared.standard_price_format(value, priceFormatting.places_after_comma_, priceFormatting.decimal_places_delimiter_, priceFormatting.thousands_delimiter_) + priceFormatting.post_;
+  };
   const progress_styling = $3hooq$solidjs.createMemo(() => {
     const min = min_();
     const span = max_() - min;
@@ -2759,13 +2770,13 @@ function $0257c760a99bfacb$var$LinearSlider(_ref6) {
       el.value = get_current_range()[index];
     });
   };
-  return [$3hooq$solidjsweb.ssr($0257c760a99bfacb$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrStyle(progress_styling())), $3hooq$solidjsweb.ssr($0257c760a99bfacb$var$_tmpl$3, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrAttribute("disabled", should_be_disabled_(), true), $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape(i18n_.range_filter_low_point_aria_label_(), true), false) + $3hooq$solidjsweb.ssrAttribute("min", $3hooq$solidjsweb.escape(min_(), true), false) + $3hooq$solidjsweb.ssrAttribute("max", $3hooq$solidjsweb.escape(max_(), true), false) + $3hooq$solidjsweb.ssrAttribute("value", $3hooq$solidjsweb.escape($3hooq$solidjs.createMemo(() => {
+  return [$3hooq$solidjsweb.ssr($0257c760a99bfacb$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrStyle(progress_styling())), $3hooq$solidjsweb.ssr($0257c760a99bfacb$var$_tmpl$3, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrAttribute("disabled", should_be_disabled_(), true), $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape(i18n_.range_filter_low_point_aria_label_(), true), false) + $3hooq$solidjsweb.ssrAttribute("aria-valuetext", $3hooq$solidjsweb.escape(formatRealPrice(get_current_range()[0]), true), false) + $3hooq$solidjsweb.ssrAttribute("min", $3hooq$solidjsweb.escape(min_(), true), false) + $3hooq$solidjsweb.ssrAttribute("max", $3hooq$solidjsweb.escape(max_(), true), false) + $3hooq$solidjsweb.ssrAttribute("value", $3hooq$solidjsweb.escape($3hooq$solidjs.createMemo(() => {
     min_();
     max_();
     return get_current_range()[0];
   }, undefined, {
     equals: false
-  })(), true), false), $3hooq$solidjsweb.ssrAttribute("disabled", should_be_disabled_(), true) + $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape(i18n_.range_filter_high_point_aria_label_(), true), false), $3hooq$solidjsweb.ssrAttribute("min", $3hooq$solidjsweb.escape(min_(), true), false) + $3hooq$solidjsweb.ssrAttribute("max", $3hooq$solidjsweb.escape(max_(), true), false))];
+  })(), true), false), $3hooq$solidjsweb.ssrAttribute("disabled", should_be_disabled_(), true) + $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape(i18n_.range_filter_high_point_aria_label_(), true), false) + $3hooq$solidjsweb.ssrAttribute("aria-valuetext", $3hooq$solidjsweb.escape(formatRealPrice(get_current_range()[1]), true), false), $3hooq$solidjsweb.ssrAttribute("min", $3hooq$solidjsweb.escape(min_(), true), false) + $3hooq$solidjsweb.ssrAttribute("max", $3hooq$solidjsweb.escape(max_(), true), false))];
 }
 function $0257c760a99bfacb$var$set_range_with_sanitation(min_, max_, current_range_signal, index, target_el) {
   let get_offset_value = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : (value, how_many) => value + how_many;
@@ -3187,7 +3198,8 @@ function $9c1d49181fb3002a$export$a32086fa6616eafd(_ref) {
   $3hooq$solidjs.createRenderEffect(() => {
     set_view_more_button_below_group(some_top_level_are_hidden() ? $3hooq$solidjsweb.createComponent((0, $b0477e4d832f090e$export$ca21a16d65b3dd8), {
       show_extras_: show_extras,
-      i18n_: i18n_
+      i18n_: i18n_,
+      expanding_container_element_: expanding_container_els
     }) : []);
   });
   $3hooq$solidjs.onCleanup(() => set_view_more_button_below_group());
@@ -3633,6 +3645,13 @@ const $cd0e5524f9476f9b$export$414f6a19d38e655c = _ref => {
             const label = $3hooq$solidjs.createMemo(() => value().name_ || value().value_ + "");
             const count_zero = $3hooq$solidjs.createMemo(() => value().count_ === 0);
             return $3hooq$solidjsweb.ssrElement("button", $3hooq$solidjsweb.mergeProps(attributes, {
+              type: "button",
+              get ["aria-pressed"]() {
+                return is_selected();
+              },
+              get ["aria-label"]() {
+                return value().count_ != undefined ? "".concat(label(), ", ").concat(value().count_) : label();
+              },
               get disabled() {
                 return count_zero() && !is_selected();
               },
@@ -3811,7 +3830,14 @@ function $476a3dc36afc1938$export$82ed4b28ecb67608(_ref) {
       return !!(data !== null && data !== void 0 && data.some(item => $e2d74bb03cc5252e$export$325f75597868c4f0(item) === value));
     });
     const value = $3hooq$solidjs.createMemo(() => checkbox().value_);
-    const label_text = $3hooq$solidjs.createMemo(() => checkbox().name_ || value() + "");
+    const label_text = $3hooq$solidjs.createMemo(() => {
+      const name = checkbox().name_;
+      if (name) return name;
+      const value_string = value() + "";
+      if (backendFilterV2()) return value_string;
+      // Legacy values are "Name;#hex" - split is used to get the name so that screen readers don't announce the hex code
+      return value_string.split(";")[0] || value_string;
+    });
     const count = $3hooq$solidjs.createMemo(() => checkbox().count_);
     const colorNameDatasetValue = $3hooq$solidjs.createMemo(() => {
       var _split2;
@@ -3899,7 +3925,8 @@ function $476a3dc36afc1938$export$82ed4b28ecb67608(_ref) {
   $3hooq$solidjs.createRenderEffect(() => {
     set_view_more_button_below_group_(togglable_rest() ? $3hooq$solidjsweb.createComponent((0, $b0477e4d832f090e$export$ca21a16d65b3dd8), {
       show_extras_: show_extras_signal,
-      i18n_: i18n_
+      i18n_: i18n_,
+      expanding_container_element_: expanding_container_els
     }) : []);
   });
   $3hooq$solidjs.onCleanup(() => set_view_more_button_below_group_());
@@ -4239,9 +4266,9 @@ function $8e7ac26c00243687$var$find_str_arr_in_str_arr_arr(operation, haystack,
 var $164d474fea221d77$var$_tmpl$ = ["<div", ' class="filter-collapsible">', "</div>"],
   $164d474fea221d77$var$_tmpl$2 = ["<button", ' class="clear-group"><!--$-->', "<!--/--><span>", "</span></button>"],
   $164d474fea221d77$var$_tmpl$3 = ["<div", ' class="view-more-clear"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"],
-  $164d474fea221d77$var$_tmpl$4 = ["<div", ' class="filter-collapsible-body"><div class="filter-part"><!--$-->', "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div>"],
+  $164d474fea221d77$var$_tmpl$4 = ["<div", ' class="filter-collapsible-body"><fieldset class="filter-part"', "><!--$-->", "<!--/--><!--$-->", "<!--/--></fieldset><!--$-->", "<!--/--></div>"],
   $164d474fea221d77$var$_tmpl$5 = ["<details", ' class="filter-collapsible"', "></details>"],
-  $164d474fea221d77$var$_tmpl$6 = ["<summary", ' class="filter-group-summary"><div class="summary"><span>', '</span><div class="selected-w-sign"><!--$-->', "<!--/--><!--$-->", "<!--/--></div></div></summary>"],
+  $164d474fea221d77$var$_tmpl$6 = ["<summary", ' class="filter-group-summary"><div class="summary"><span', ">", '</span><div class="selected-w-sign"><!--$-->', "<!--/--><!--$-->", "<!--/--></div></div></summary>"],
   $164d474fea221d77$var$_tmpl$7 = ["<div", ' class="ungrouped">', "</div>"],
   $164d474fea221d77$var$_tmpl$8 = ["<button", ' class="clear-all-filters major">', "</button>"];
 function $164d474fea221d77$export$3f1a388cc0d8fed7(props) {
@@ -4338,13 +4365,14 @@ function $164d474fea221d77$var$ActualFilterBody(props) {
               var _get_details_width;
               return get_details_width === null || get_details_width === void 0 ? void 0 : (_get_details_width = get_details_width()) === null || _get_details_width === void 0 ? void 0 : _get_details_width();
             });
+            const title_id = $3hooq$depictaiutilishared.make_random_classname();
             return $3hooq$solidjsweb.createComponent((0, $4cfe8400ed3f92c4$export$6c6d7a51fa9aa15d), {
               is_open_: is_open,
               get details_() {
                 return $3hooq$solidjsweb.ssr($164d474fea221d77$var$_tmpl$5, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrAttribute("data-group-title", $3hooq$solidjsweb.escape(section_, true), false));
               },
               get summary_() {
-                return $3hooq$solidjsweb.ssr($164d474fea221d77$var$_tmpl$6, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape(section_), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
+                return $3hooq$solidjsweb.ssr($164d474fea221d77$var$_tmpl$6, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrAttribute("id", $3hooq$solidjsweb.escape(title_id, true), false), $3hooq$solidjsweb.escape(section_), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
                   get when() {
                     return a_filter_is_selected();
                   },
@@ -4366,7 +4394,7 @@ function $164d474fea221d77$var$ActualFilterBody(props) {
                 })));
               },
               get children() {
-                return $3hooq$solidjsweb.ssr($164d474fea221d77$var$_tmpl$4, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(SearchThisFilterGroup_, {})), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Index), {
+                return $3hooq$solidjsweb.ssr($164d474fea221d77$var$_tmpl$4, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrAttribute("aria-labelledby", $3hooq$solidjsweb.escape(title_id, true), false), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(SearchThisFilterGroup_, {})), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Index), {
                   get each() {
                     return searched_filter_array_();
                   },
@@ -4981,8 +5009,8 @@ var $ae261a5687fe84f4$var$_tmpl$ = ["<svg", ' xmlns="http://www.w3.org/2000/svg"
 function $ae261a5687fe84f4$export$cb808a3c41736d8e() {
   return $3hooq$solidjsweb.ssr($ae261a5687fe84f4$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey());
 }
-var $f70cc6dfcadf0fd5$var$_tmpl$ = ["<div", ' class="filters"><div class="body">', "</div></div>"],
-  $f70cc6dfcadf0fd5$var$_tmpl$2 = ["<div", ' class="sorting"><div class="body">', "</div></div>"],
+var $f70cc6dfcadf0fd5$var$_tmpl$ = ["<section", ' class="filters"', '><div class="body">', "</div></section>"],
+  $f70cc6dfcadf0fd5$var$_tmpl$2 = ["<section", ' class="sorting"', '><div class="body">', "</div></section>"],
   $f70cc6dfcadf0fd5$var$_tmpl$3 = ["<div", ' class="sort-and-filter-buttons"><div class="outer"><div class="inner"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div></div></div>"],
   $f70cc6dfcadf0fd5$var$_tmpl$4 = ["<span", ' class="num-filters" style="', '">', "</span>"],
   $f70cc6dfcadf0fd5$var$_tmpl$5 = ["<div", ' class="open-filters-button-container" style="', '"><!--$-->', "<!--/--><button", ' class="', '" type="button"', ' style="', '"><!--$-->', "<!--/--><span>", "</span></button></div>"],
@@ -5059,6 +5087,27 @@ function $f70cc6dfcadf0fd5$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 => $3hooq$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, $3hooq$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 = 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;
@@ -5069,7 +5118,9 @@ function $f70cc6dfcadf0fd5$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 () {
@@ -5083,7 +5134,9 @@ function $f70cc6dfcadf0fd5$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_;
@@ -5103,10 +5156,35 @@ function $f70cc6dfcadf0fd5$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 => $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
+      get when() {
+        return !hide_filters();
+      },
+      get children() {
+        return $3hooq$solidjsweb.ssr($f70cc6dfcadf0fd5$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrAttribute("tabindex", -1, false) + $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape(i18n_.filters_(), true), false), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $164d474fea221d77$export$3f1a388cc0d8fed7), filter_options)));
+      }
+    });
+    const SortingPanel = should_focus => $3hooq$solidjsweb.ssr($f70cc6dfcadf0fd5$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrAttribute("tabindex", -1, false) + $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape(i18n_.sorting_text_(), true), false), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3bd211c857f81dfd$export$1f1775a58da589b5), sorting_options)));
     $3hooq$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()) {
         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_;
@@ -5116,19 +5194,15 @@ function $f70cc6dfcadf0fd5$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_(() => $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
-          get when() {
-            return !hide_filters();
-          },
-          get children() {
-            return $3hooq$solidjsweb.ssr($f70cc6dfcadf0fd5$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $164d474fea221d77$export$3f1a388cc0d8fed7), filter_options)));
-          }
-        }));else set_extra_els_in_results_container_($3hooq$solidjsweb.ssr($f70cc6dfcadf0fd5$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3bd211c857f81dfd$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));
       }
     });
     $3hooq$depictaiutilishared.catchify(async () => {
@@ -5179,7 +5253,9 @@ function $f70cc6dfcadf0fd5$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 = $3hooq$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
@@ -5192,7 +5268,7 @@ function $f70cc6dfcadf0fd5$var$OpenFiltersButton(_ref3) {
     get children() {
       return $3hooq$solidjsweb.ssr($f70cc6dfcadf0fd5$var$_tmpl$4, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrStyle(filters_closed() ? "" : "opacity:0"), $3hooq$solidjsweb.escape(num_selected_filters()));
     }
-  })), $3hooq$solidjsweb.ssrAttribute("tabindex", $3hooq$solidjsweb.escape(tabindex_, true), false), "".concat(!filters_closed() ? "major" : "", " ").concat(filters_closed() ? "minor" : "").concat("filter toggle-button major-minor-transition" + ((0, $3hooq$solidjsweb.isServer) ? " minor" : "")), $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape((filters_closed() ? i18n_.open_filters_ : i18n_.close_filters_)(), true), false), $3hooq$solidjsweb.ssrStyle(filter_button_width_ !== null && filter_button_width_ !== void 0 && filter_button_width_() ? {
+  })), $3hooq$solidjsweb.ssrAttribute("tabindex", $3hooq$solidjsweb.escape(tabindex_, true), false), "".concat(!filters_closed() ? "major" : "", " ").concat(filters_closed() ? "minor" : "").concat("filter toggle-button major-minor-transition" + ((0, $3hooq$solidjsweb.isServer) ? " minor" : "")), $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape((filters_closed() ? i18n_.open_filters_ : i18n_.close_filters_)(), true), false) + $3hooq$solidjsweb.ssrAttribute("aria-expanded", !filters_closed(), false), $3hooq$solidjsweb.ssrStyle(filter_button_width_ !== null && filter_button_width_ !== void 0 && filter_button_width_() ? {
     width: filter_button_width_() + "px"
   } : {}), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
     get when() {
@@ -5216,11 +5292,13 @@ function $f70cc6dfcadf0fd5$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 = $3hooq$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 $3hooq$solidjsweb.ssr($f70cc6dfcadf0fd5$var$_tmpl$6, $3hooq$solidjsweb.ssrHydrationKey(), "".concat(!sorting_closed() ? "major" : "", " ").concat(sorting_closed() ? "minor" : "", " toggle-button for-sorting major-minor-transition"), $3hooq$solidjsweb.ssrAttribute("tabindex", $3hooq$solidjsweb.escape(tabindex_, true), false) + $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape((sorting_closed() ? i18n_.open_sorting_ : i18n_.close_sorting_)(), true), false), $3hooq$solidjsweb.ssrStyle(sort_button_width_ !== null && sort_button_width_ !== void 0 && sort_button_width_() ? {
+  return $3hooq$solidjsweb.ssr($f70cc6dfcadf0fd5$var$_tmpl$6, $3hooq$solidjsweb.ssrHydrationKey(), "".concat(!sorting_closed() ? "major" : "", " ").concat(sorting_closed() ? "minor" : "", " toggle-button for-sorting major-minor-transition"), $3hooq$solidjsweb.ssrAttribute("tabindex", $3hooq$solidjsweb.escape(tabindex_, true), false) + $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape((sorting_closed() ? i18n_.open_sorting_ : i18n_.close_sorting_)(), true), false) + $3hooq$solidjsweb.ssrAttribute("aria-expanded", !sorting_closed(), false), $3hooq$solidjsweb.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/ES10/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.12";
+export const version = "4.10.14";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */