@depict-ai/ui 4.10.12 → 4.10.14

package/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 = $52FdA$solidjs.createSignal(false);
   $52FdA$solidjs.onCleanup($52FdA$depictaiutilishared.javascript_media_query(media_query, _ref => {
@@ -2825,20 +2825,57 @@ var $b0477e4d832f090e$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<but
 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;
+  let button;
   return (() => {
     var _el$ = $52FdA$solidjsweb.getNextElement($b0477e4d832f090e$var$_tmpl$),
       _el$3 = _el$.firstChild,
       [_el$4, _co$] = $52FdA$solidjsweb.getNextMarker(_el$3.nextSibling),
       _el$2 = _el$4.nextSibling;
-    $52FdA$solidjsweb.addEventListener(_el$, "click", $52FdA$depictaiutilishared.catchify(() => set_show_extras(p => !p)), true);
+    $52FdA$solidjsweb.addEventListener(_el$, "click", $52FdA$depictaiutilishared.catchify(event => {
+      const container = expanding_container_element_;
+      const will_expand = !get_show_extras();
+      // A click from Enter/Space on the button reports `detail === 0`; a real pointer click reports >= 1.
+      // Only hijack focus for keyboard activation - mouse users can see the revealed options and don't need it
+      // (and would otherwise get the viewport scrolled and an unexpected focus ring).
+      const keyboard_activated = event.detail === 0;
+      const had_focus_inside = !!container && container.contains(document.activeElement);
+      set_show_extras(will_expand);
+      if (will_expand) {
+        if (!keyboard_activated) return;
+        // The container's `expand()` (run from the consumer's effect after this handler) clears `inert`/`visibility`;
+        // focus the first revealed option on the next frame so Tab continues through the newly shown options.
+        // `preventScroll` so moving focus never yanks the viewport down to the first checkbox.
+        requestAnimationFrame($52FdA$depictaiutilishared.catchify(() => {
+          var _container$querySelec;
+          return container === null || container === void 0 ? void 0 : (_container$querySelec = container.querySelector("input:not(:disabled)")) === null || _container$querySelec === void 0 ? void 0 : _container$querySelec.focus({
+            preventScroll: true
+          });
+        }));
+      } else if (had_focus_inside)
+        // Keep focus on the toggle when collapsing, otherwise making the container `inert` dumps focus to <body>
+        // (Safari doesn't focus buttons on mouse click, so focus can still be inside the container here).
+        button.focus();
+    }), true);
+    var _ref$ = button;
+    typeof _ref$ === "function" ? $52FdA$solidjsweb.use(_ref$, _el$) : button = _el$;
     $52FdA$solidjsweb.insert(_el$, $52FdA$solidjsweb.createComponent((0, $a904ccf883f60231$export$f21ab0717a89c77f), {}), _el$4, _co$);
     $52FdA$solidjsweb.insert(_el$2, (() => {
       var _c$ = $52FdA$solidjsweb.memo(() => !!get_show_extras());
       return () => _c$() ? i18n_.view_less_() : i18n_.view_more_();
     })());
-    $52FdA$solidjsweb.effect(() => _el$.classList.toggle("expanded", !!get_show_extras()));
+    $52FdA$solidjsweb.effect(_p$ => {
+      var _v$ = get_show_extras(),
+        _v$2 = !!get_show_extras();
+      _v$ !== _p$.e && $52FdA$solidjsweb.setAttribute(_el$, "aria-expanded", _p$.e = _v$);
+      _v$2 !== _p$.t && _el$.classList.toggle("expanded", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     $52FdA$solidjsweb.runHydrationEvents();
     return _el$;
   })();
@@ -3022,7 +3059,8 @@ function $9b54b9c5381716eb$export$dd948f91abc3a1c4(_ref) {
   $52FdA$solidjs.createRenderEffect(() => {
     set_view_more_button_below_group_(togglable_rest() ? $52FdA$solidjsweb.createComponent((0, $b0477e4d832f090e$export$ca21a16d65b3dd8), {
       show_extras_: show_extras_signal,
-      i18n_: i18n_
+      i18n_: i18n_,
+      expanding_container_element_: expanding_container_els
     }) : []);
   });
   $52FdA$solidjs.onCleanup(() => set_view_more_button_below_group_());
@@ -3181,7 +3219,7 @@ function $d9239dad9a9d899b$export$430444115f70a734(_ref) {
     return _el$;
   })();
 }
-var $0257c760a99bfacb$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=range><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><!$><!/><!$><!/><!$><!/>`),
+var $0257c760a99bfacb$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=range><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><!$><!/><!$><!/><!$><!/>`),
   $0257c760a99bfacb$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=slider><div class=progress>`),
   $0257c760a99bfacb$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=range-group><input type=range step=any><input type=range step=any>`);
 function $0257c760a99bfacb$export$e0d834a0ad870cda(_ref) {
@@ -3323,7 +3361,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_
     }), _el$24, _co$7);
     $52FdA$solidjsweb.insert(_el$9, pre_price, _el$11, _co$);
     $52FdA$solidjsweb.insert(_el$9, $52FdA$solidjsweb.createComponent((0, $f38f2e64ebe2da86$export$a71e92cfbb498adc), {
@@ -3388,7 +3427,8 @@ function $0257c760a99bfacb$var$ExponentialSlider(_ref6) {
     min_: min_,
     i18n_: i18n_,
     max_: max_,
-    should_be_disabled_: should_be_disabled_
+    should_be_disabled_: should_be_disabled_,
+    priceFormatting_: priceFormatting_
   } = _ref6;
   // inspired by https://observablehq.com/@mbostock/nonlinear-slider
   const transform_linear_to_nonlinear = _ref7 => {
@@ -3425,7 +3465,8 @@ function $0257c760a99bfacb$var$ExponentialSlider(_ref6) {
     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(_ref8) {
@@ -3435,12 +3476,17 @@ function $0257c760a99bfacb$var$LinearSlider(_ref8) {
     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_
   } = _ref8;
   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_ + $52FdA$depictaiutilishared.standard_price_format(value, priceFormatting.places_after_comma_, priceFormatting.decimal_places_delimiter_, priceFormatting.thousands_delimiter_) + priceFormatting.post_;
+  };
   const progress_styling = $52FdA$solidjs.createMemo(() => {
     const min = min_();
     const span = max_() - min;
@@ -3497,20 +3543,24 @@ function $0257c760a99bfacb$var$LinearSlider(_ref8) {
     $52FdA$solidjsweb.effect(_p$ => {
       var _v$10 = should_be_disabled_(),
         _v$11 = i18n_.range_filter_low_point_aria_label_(),
-        _v$12 = min_(),
-        _v$13 = max_(),
-        _v$14 = should_be_disabled_(),
-        _v$15 = i18n_.range_filter_high_point_aria_label_(),
-        _v$16 = min_(),
-        _v$17 = max_();
+        _v$12 = formatRealPrice(get_current_range()[0]),
+        _v$13 = min_(),
+        _v$14 = max_(),
+        _v$15 = should_be_disabled_(),
+        _v$16 = i18n_.range_filter_high_point_aria_label_(),
+        _v$17 = formatRealPrice(get_current_range()[1]),
+        _v$18 = min_(),
+        _v$19 = max_();
       _v$10 !== _p$.e && $52FdA$solidjsweb.setProperty(_el$28, "disabled", _p$.e = _v$10);
       _v$11 !== _p$.t && $52FdA$solidjsweb.setAttribute(_el$28, "aria-label", _p$.t = _v$11);
-      _v$12 !== _p$.a && $52FdA$solidjsweb.setAttribute(_el$28, "min", _p$.a = _v$12);
-      _v$13 !== _p$.o && $52FdA$solidjsweb.setAttribute(_el$28, "max", _p$.o = _v$13);
-      _v$14 !== _p$.i && $52FdA$solidjsweb.setProperty(_el$29, "disabled", _p$.i = _v$14);
-      _v$15 !== _p$.n && $52FdA$solidjsweb.setAttribute(_el$29, "aria-label", _p$.n = _v$15);
-      _v$16 !== _p$.s && $52FdA$solidjsweb.setAttribute(_el$29, "min", _p$.s = _v$16);
-      _v$17 !== _p$.h && $52FdA$solidjsweb.setAttribute(_el$29, "max", _p$.h = _v$17);
+      _v$12 !== _p$.a && $52FdA$solidjsweb.setAttribute(_el$28, "aria-valuetext", _p$.a = _v$12);
+      _v$13 !== _p$.o && $52FdA$solidjsweb.setAttribute(_el$28, "min", _p$.o = _v$13);
+      _v$14 !== _p$.i && $52FdA$solidjsweb.setAttribute(_el$28, "max", _p$.i = _v$14);
+      _v$15 !== _p$.n && $52FdA$solidjsweb.setProperty(_el$29, "disabled", _p$.n = _v$15);
+      _v$16 !== _p$.s && $52FdA$solidjsweb.setAttribute(_el$29, "aria-label", _p$.s = _v$16);
+      _v$17 !== _p$.h && $52FdA$solidjsweb.setAttribute(_el$29, "aria-valuetext", _p$.h = _v$17);
+      _v$18 !== _p$.r && $52FdA$solidjsweb.setAttribute(_el$29, "min", _p$.r = _v$18);
+      _v$19 !== _p$.d && $52FdA$solidjsweb.setAttribute(_el$29, "max", _p$.d = _v$19);
       return _p$;
     }, {
       e: undefined,
@@ -3520,7 +3570,9 @@ function $0257c760a99bfacb$var$LinearSlider(_ref8) {
       i: undefined,
       n: undefined,
       s: undefined,
-      h: undefined
+      h: undefined,
+      r: undefined,
+      d: undefined
     });
     $52FdA$solidjsweb.effect(() => $52FdA$solidjsweb.setProperty(_el$28, "value", $52FdA$solidjs.createMemo(() => {
       min_();
@@ -3985,7 +4037,8 @@ function $9c1d49181fb3002a$export$a32086fa6616eafd(_ref) {
   $52FdA$solidjs.createRenderEffect(() => {
     set_view_more_button_below_group(some_top_level_are_hidden() ? $52FdA$solidjsweb.createComponent((0, $b0477e4d832f090e$export$ca21a16d65b3dd8), {
       show_extras_: show_extras,
-      i18n_: i18n_
+      i18n_: i18n_,
+      expanding_container_element_: expanding_container_els
     }) : []);
   });
   $52FdA$solidjs.onCleanup(() => set_view_more_button_below_group());
@@ -4479,6 +4532,13 @@ const $cd0e5524f9476f9b$export$414f6a19d38e655c = _ref => {
                 _el$7 = _el$6.nextSibling,
                 [_el$8, _co$2] = $52FdA$solidjsweb.getNextMarker(_el$7.nextSibling);
               $52FdA$solidjsweb.spread(_el$2, $52FdA$solidjsweb.mergeProps(attributes, {
+                "type": "button",
+                get ["aria-pressed"]() {
+                  return is_selected();
+                },
+                get ["aria-label"]() {
+                  return $52FdA$solidjsweb.memo(() => value().count_ != undefined)() ? "".concat(label(), ", ").concat(value().count_) : label();
+                },
                 get disabled() {
                   return $52FdA$solidjsweb.memo(() => !!count_zero())() && !is_selected();
                 },
@@ -4690,7 +4750,14 @@ function $476a3dc36afc1938$export$82ed4b28ecb67608(_ref) {
       return !!(data !== null && data !== void 0 && data.some(item => $e2d74bb03cc5252e$export$325f75597868c4f0(item) === value));
     });
     const value = $52FdA$solidjs.createMemo(() => checkbox().value_);
-    const label_text = $52FdA$solidjs.createMemo(() => checkbox().name_ || value() + "");
+    const label_text = $52FdA$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 = $52FdA$solidjs.createMemo(() => checkbox().count_);
     const colorNameDatasetValue = $52FdA$solidjs.createMemo(() => {
       var _split2;
@@ -4778,7 +4845,8 @@ function $476a3dc36afc1938$export$82ed4b28ecb67608(_ref) {
   $52FdA$solidjs.createRenderEffect(() => {
     set_view_more_button_below_group_(togglable_rest() ? $52FdA$solidjsweb.createComponent((0, $b0477e4d832f090e$export$ca21a16d65b3dd8), {
       show_extras_: show_extras_signal,
-      i18n_: i18n_
+      i18n_: i18n_,
+      expanding_container_element_: expanding_container_els
     }) : []);
   });
   $52FdA$solidjs.onCleanup(() => set_view_more_button_below_group_());
@@ -5185,7 +5253,7 @@ $52FdA$solidjsweb.delegateEvents(["input", "click"]);
 var $164d474fea221d77$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=filter-collapsible>`),
   $164d474fea221d77$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<button class=clear-group><!$><!/><span>`),
   $164d474fea221d77$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=view-more-clear><!$><!/><!$><!/>`),
-  $164d474fea221d77$var$_tmpl$4 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=filter-collapsible-body><div class=filter-part><!$><!/><!$><!/></div><!$><!/>`),
+  $164d474fea221d77$var$_tmpl$4 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=filter-collapsible-body><fieldset class=filter-part><!$><!/><!$><!/></fieldset><!$><!/>`),
   $164d474fea221d77$var$_tmpl$5 = /*#__PURE__*/$52FdA$solidjsweb.template(`<details class=filter-collapsible>`),
   $164d474fea221d77$var$_tmpl$6 = /*#__PURE__*/$52FdA$solidjsweb.template(`<summary class=filter-group-summary><div class=summary><span></span><div class=selected-w-sign><!$><!/><!$><!/>`),
   $164d474fea221d77$var$_tmpl$7 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=ungrouped>`),
@@ -5288,6 +5356,7 @@ 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 = $52FdA$depictaiutilishared.make_random_classname();
             return $52FdA$solidjsweb.createComponent((0, $4cfe8400ed3f92c4$export$6c6d7a51fa9aa15d), {
               is_open_: is_open,
               get details_() {
@@ -5308,6 +5377,7 @@ function $164d474fea221d77$var$ActualFilterBody(props) {
                     [_el$25, _co$7] = $52FdA$solidjsweb.getNextMarker(_el$24.nextSibling),
                     _el$26 = _el$25.nextSibling,
                     [_el$27, _co$8] = $52FdA$solidjsweb.getNextMarker(_el$26.nextSibling);
+                  $52FdA$solidjsweb.setAttribute(_el$22, "id", title_id);
                   $52FdA$solidjsweb.insert(_el$22, section_);
                   $52FdA$solidjsweb.insert(_el$23, $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
                     get when() {
@@ -5342,6 +5412,7 @@ function $164d474fea221d77$var$ActualFilterBody(props) {
                   [_el$7, _co$2] = $52FdA$solidjsweb.getNextMarker(_el$6.nextSibling),
                   _el$17 = _el$3.nextSibling,
                   [_el$18, _co$6] = $52FdA$solidjsweb.getNextMarker(_el$17.nextSibling);
+                $52FdA$solidjsweb.setAttribute(_el$3, "aria-labelledby", title_id);
                 $52FdA$solidjsweb.insert(_el$3, $52FdA$solidjsweb.createComponent(SearchThisFilterGroup_, {}), _el$5, _co$);
                 $52FdA$solidjsweb.insert(_el$3, $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Index), {
                   get each() {
@@ -6266,8 +6337,8 @@ var $ae261a5687fe84f4$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<svg
 function $ae261a5687fe84f4$export$cb808a3c41736d8e() {
   return $52FdA$solidjsweb.getNextElement($ae261a5687fe84f4$var$_tmpl$);
 }
-var $f70cc6dfcadf0fd5$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=filters><div class=body>`),
-  $f70cc6dfcadf0fd5$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=sorting><div class=body>`),
+var $f70cc6dfcadf0fd5$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<section class=filters tabindex=-1><div class=body>`),
+  $f70cc6dfcadf0fd5$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<section class=sorting tabindex=-1><div class=body>`),
   $f70cc6dfcadf0fd5$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=sort-and-filter-buttons><div class=outer><div class=inner><!$><!/><!$><!/><!$><!/>`),
   $f70cc6dfcadf0fd5$var$_tmpl$4 = /*#__PURE__*/$52FdA$solidjsweb.template(`<span class=num-filters>`),
   $f70cc6dfcadf0fd5$var$_tmpl$5 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=open-filters-button-container><!$><!/><button type=button><!$><!/><span>`),
@@ -6344,6 +6415,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 => $52FdA$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, $52FdA$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;
@@ -6354,7 +6446,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 () {
@@ -6368,7 +6462,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_;
@@ -6388,10 +6484,47 @@ 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 => $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
+      get when() {
+        return !hide_filters();
+      },
+      get children() {
+        var _el$ = $52FdA$solidjsweb.getNextElement($f70cc6dfcadf0fd5$var$_tmpl$),
+          _el$2 = _el$.firstChild;
+        $52FdA$solidjsweb.use(el => register_desktop_panel(el, filter_toggle_button, should_focus), _el$);
+        $52FdA$solidjsweb.insert(_el$2, $52FdA$solidjsweb.createComponent((0, $164d474fea221d77$export$3f1a388cc0d8fed7), filter_options));
+        $52FdA$solidjsweb.effect(() => $52FdA$solidjsweb.setAttribute(_el$, "aria-label", i18n_.filters_()));
+        return _el$;
+      }
+    });
+    const SortingPanel = should_focus => (() => {
+      var _el$3 = $52FdA$solidjsweb.getNextElement($f70cc6dfcadf0fd5$var$_tmpl$2),
+        _el$4 = _el$3.firstChild;
+      $52FdA$solidjsweb.use(el => register_desktop_panel(el, sort_toggle_button, should_focus), _el$3);
+      $52FdA$solidjsweb.insert(_el$4, $52FdA$solidjsweb.createComponent((0, $3bd211c857f81dfd$export$1f1775a58da589b5), sorting_options));
+      $52FdA$solidjsweb.effect(() => $52FdA$solidjsweb.setAttribute(_el$3, "aria-label", i18n_.sorting_text_()));
+      return _el$3;
+    })();
     $52FdA$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_;
@@ -6401,27 +6534,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_(() => $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
-          get when() {
-            return !hide_filters();
-          },
-          get children() {
-            var _el$ = $52FdA$solidjsweb.getNextElement($f70cc6dfcadf0fd5$var$_tmpl$),
-              _el$2 = _el$.firstChild;
-            $52FdA$solidjsweb.insert(_el$2, $52FdA$solidjsweb.createComponent((0, $164d474fea221d77$export$3f1a388cc0d8fed7), filter_options));
-            return _el$;
-          }
-        }));else set_extra_els_in_results_container_((() => {
-          var _el$3 = $52FdA$solidjsweb.getNextElement($f70cc6dfcadf0fd5$var$_tmpl$2),
-            _el$4 = _el$3.firstChild;
-          $52FdA$solidjsweb.insert(_el$4, $52FdA$solidjsweb.createComponent((0, $3bd211c857f81dfd$export$1f1775a58da589b5), sorting_options));
-          return _el$3;
-        })());
+        if (filters_open()) set_extra_els_in_results_container_(() => FiltersPanel(should_focus_panel));else set_extra_els_in_results_container_(SortingPanel(should_focus_panel));
       }
     });
     $52FdA$depictaiutilishared.catchify(async () => {
@@ -6486,7 +6607,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 = $52FdA$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
@@ -6514,9 +6637,12 @@ function $f70cc6dfcadf0fd5$var$OpenFiltersButton(_ref3) {
         search_filters_open_[1](false);
         return;
       }
+      on_user_open_ === null || on_user_open_ === void 0 || on_user_open_();
       search_filters_open_[1](true);
       search_sorting_open_[1](false);
     })), true);
+    var _ref$2 = button_ref_;
+    typeof _ref$2 === "function" ? $52FdA$solidjsweb.use(_ref$2, _el$16) : button_ref_ = _el$16;
     $52FdA$solidjsweb.setAttribute(_el$16, "tabindex", tabindex_);
     $52FdA$solidjsweb.className(_el$16, "filter toggle-button major-minor-transition" + ((0, $52FdA$solidjsweb.isServer) ? " minor" : ""));
     $52FdA$solidjsweb.insert(_el$16, $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
@@ -6538,21 +6664,24 @@ function $f70cc6dfcadf0fd5$var$OpenFiltersButton(_ref3) {
         _v$2 = !filters_closed(),
         _v$3 = !!filters_closed(),
         _v$4 = (filters_closed() ? i18n_.open_filters_ : i18n_.close_filters_)(),
-        _v$5 = filter_button_width_ !== null && filter_button_width_ !== void 0 && filter_button_width_() ? {
+        _v$5 = !filters_closed(),
+        _v$6 = filter_button_width_ !== null && filter_button_width_ !== void 0 && filter_button_width_() ? {
           width: filter_button_width_() + "px"
         } : {};
       _p$.e = $52FdA$solidjsweb.style(_el$14, _v$, _p$.e);
       _v$2 !== _p$.t && _el$16.classList.toggle("major", _p$.t = _v$2);
       _v$3 !== _p$.a && _el$16.classList.toggle("minor", _p$.a = _v$3);
       _v$4 !== _p$.o && $52FdA$solidjsweb.setAttribute(_el$16, "aria-label", _p$.o = _v$4);
-      _p$.i = $52FdA$solidjsweb.style(_el$16, _v$5, _p$.i);
+      _v$5 !== _p$.i && $52FdA$solidjsweb.setAttribute(_el$16, "aria-expanded", _p$.i = _v$5);
+      _p$.n = $52FdA$solidjsweb.style(_el$16, _v$6, _p$.n);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined,
       o: undefined,
-      i: undefined
+      i: undefined,
+      n: undefined
     });
     $52FdA$solidjsweb.runHydrationEvents();
     return _el$14;
@@ -6567,7 +6696,9 @@ 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 = $52FdA$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
@@ -6581,9 +6712,12 @@ function $f70cc6dfcadf0fd5$var$OpenSortingButton(_ref4) {
         search_sorting_open_[1](false);
         return;
       }
+      on_user_open_ === null || on_user_open_ === void 0 || on_user_open_();
       search_filters_open_[1](false);
       search_sorting_open_[1](true);
     })), true);
+    var _ref$3 = button_ref_;
+    typeof _ref$3 === "function" ? $52FdA$solidjsweb.use(_ref$3, _el$22) : button_ref_ = _el$22;
     $52FdA$solidjsweb.setAttribute(_el$22, "tabindex", tabindex_);
     $52FdA$solidjsweb.insert(_el$23, (() => {
       var _c$ = $52FdA$solidjsweb.memo(() => !!sorting_closed());
@@ -6612,22 +6746,25 @@ function $f70cc6dfcadf0fd5$var$OpenSortingButton(_ref4) {
       }
     }), _el$25, _co$6);
     $52FdA$solidjsweb.effect(_p$ => {
-      var _v$6 = !sorting_closed(),
-        _v$7 = !!sorting_closed(),
-        _v$8 = (sorting_closed() ? i18n_.open_sorting_ : i18n_.close_sorting_)(),
-        _v$9 = sort_button_width_ !== null && sort_button_width_ !== void 0 && sort_button_width_() ? {
+      var _v$7 = !sorting_closed(),
+        _v$8 = !!sorting_closed(),
+        _v$9 = (sorting_closed() ? i18n_.open_sorting_ : i18n_.close_sorting_)(),
+        _v$10 = !sorting_closed(),
+        _v$11 = sort_button_width_ !== null && sort_button_width_ !== void 0 && sort_button_width_() ? {
           width: sort_button_width_() + "px"
         } : {};
-      _v$6 !== _p$.e && _el$22.classList.toggle("major", _p$.e = _v$6);
-      _v$7 !== _p$.t && _el$22.classList.toggle("minor", _p$.t = _v$7);
-      _v$8 !== _p$.a && $52FdA$solidjsweb.setAttribute(_el$22, "aria-label", _p$.a = _v$8);
-      _p$.o = $52FdA$solidjsweb.style(_el$22, _v$9, _p$.o);
+      _v$7 !== _p$.e && _el$22.classList.toggle("major", _p$.e = _v$7);
+      _v$8 !== _p$.t && _el$22.classList.toggle("minor", _p$.t = _v$8);
+      _v$9 !== _p$.a && $52FdA$solidjsweb.setAttribute(_el$22, "aria-label", _p$.a = _v$9);
+      _v$10 !== _p$.o && $52FdA$solidjsweb.setAttribute(_el$22, "aria-expanded", _p$.o = _v$10);
+      _p$.i = $52FdA$solidjsweb.style(_el$22, _v$11, _p$.i);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined,
-      o: undefined
+      o: undefined,
+      i: undefined
     });
     $52FdA$solidjsweb.runHydrationEvents();
     return _el$22;

package/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
  */