@depict-ai/ui 4.10.13 → 4.10.15

package/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $9HbP8$createStore, reconcile as $9HbP8$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.15";
 function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   const signal = $9HbP8$createSignal(false);
   $9HbP8$onCleanup($9HbP8$javascript_media_query(media_query, ({
@@ -2596,17 +2596,49 @@ function $f8a56ba74eedd0c6$export$f21ab0717a89c77f(props) {
     return _el$;
   })();
 }
+
+/**
+ * Whether a click came from the keyboard (Enter/Space) rather than a pointer. Browsers report `detail === 0` for
+ * keyboard-activated clicks and `>= 1` for real pointer clicks, so we use it to only move focus on keyboard opens.
+ */
+function $5108d4f5c200e4e5$export$c5c485c196a19ec1(event) {
+  return event.detail === 0;
+}
 var $67b173f9db427028$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<button type=button class=expand-filter><!$><!/><span>`);
 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 (() => {
     var _el$ = $9HbP8$getNextElement($67b173f9db427028$var$_tmpl$),
       _el$3 = _el$.firstChild,
       [_el$4, _co$] = $9HbP8$getNextMarker(_el$3.nextSibling),
       _el$2 = _el$4.nextSibling;
-    $9HbP8$addEventListener(_el$, "click", $9HbP8$catchify1(() => set_show_extras(p => !p)), true);
+    $9HbP8$addEventListener(_el$, "click", $9HbP8$catchify1(event => {
+      const container = expanding_container_element_;
+      const will_expand = !get_show_extras();
+      // Only move focus for keyboard activation; mouse users see the revealed options and don't need a focus jump.
+      const keyboard_activated = $5108d4f5c200e4e5$export$c5c485c196a19ec1(event);
+      const had_focus_inside = !!container && container.contains(document.activeElement);
+      set_show_extras(will_expand);
+      if (will_expand) {
+        if (!keyboard_activated) return;
+        // `expand()` (consumer's effect, runs after this) clears `inert`/`visibility`; focus the first revealed
+        // option next frame so Tab continues through them. `preventScroll` so it doesn't yank the viewport down.
+        requestAnimationFrame($9HbP8$catchify1(() => container?.querySelector("input:not(:disabled)")?.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({
+          preventScroll: true
+        });
+    }), true);
+    var _ref$ = button;
+    typeof _ref$ === "function" ? $9HbP8$use(_ref$, _el$) : button = _el$;
     $9HbP8$insert(_el$, $9HbP8$createComponent((0, $f8a56ba74eedd0c6$export$f21ab0717a89c77f), {}), _el$4, _co$);
     $9HbP8$insert(_el$2, (() => {
       var _c$ = $9HbP8$memo(() => !!get_show_extras());
@@ -2796,7 +2828,8 @@ function $a4601e6bea3ed1e6$export$dd948f91abc3a1c4({
   $9HbP8$createRenderEffect(() => {
     set_view_more_button_below_group_(togglable_rest() ? $9HbP8$createComponent((0, $67b173f9db427028$export$ca21a16d65b3dd8), {
       show_extras_: show_extras_signal,
-      i18n_: i18n_
+      i18n_: i18n_,
+      expanding_container_element_: expanding_container_els
     }) : []);
   });
   $9HbP8$onCleanup(() => set_view_more_button_below_group_());
@@ -3725,7 +3758,8 @@ function $1c8cac76cb67e9af$export$a32086fa6616eafd({
   $9HbP8$createRenderEffect(() => {
     set_view_more_button_below_group(some_top_level_are_hidden() ? $9HbP8$createComponent((0, $67b173f9db427028$export$ca21a16d65b3dd8), {
       show_extras_: show_extras,
-      i18n_: i18n_
+      i18n_: i18n_,
+      expanding_container_element_: expanding_container_els
     }) : []);
   });
   $9HbP8$onCleanup(() => set_view_more_button_below_group());
@@ -4466,7 +4500,8 @@ function $e731d52d97444b7c$export$82ed4b28ecb67608({
   $9HbP8$createRenderEffect(() => {
     set_view_more_button_below_group_(togglable_rest() ? $9HbP8$createComponent((0, $67b173f9db427028$export$ca21a16d65b3dd8), {
       show_extras_: show_extras_signal,
-      i18n_: i18n_
+      i18n_: i18n_,
+      expanding_container_element_: expanding_container_els
     }) : []);
   });
   $9HbP8$onCleanup(() => set_view_more_button_below_group_());
@@ -5859,8 +5894,8 @@ var $11d594c749b76228$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<svg xmlns=http
 function $11d594c749b76228$export$cb808a3c41736d8e() {
   return $9HbP8$getNextElement($11d594c749b76228$var$_tmpl$);
 }
-var $cdea4cf8c5c071ef$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=filters><div class=body>`),
-  $cdea4cf8c5c071ef$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<div class=sorting><div class=body>`),
+var $cdea4cf8c5c071ef$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<section class=filters tabindex=-1><div class=body>`),
+  $cdea4cf8c5c071ef$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<section class=sorting tabindex=-1><div class=body>`),
   $cdea4cf8c5c071ef$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<div class=sort-and-filter-buttons><div class=outer><div class=inner><!$><!/><!$><!/><!$><!/>`),
   $cdea4cf8c5c071ef$var$_tmpl$4 = /*#__PURE__*/$9HbP8$template(`<span class=num-filters>`),
   $cdea4cf8c5c071ef$var$_tmpl$5 = /*#__PURE__*/$9HbP8$template(`<div class=open-filters-button-container><!$><!/><button type=button><!$><!/><span>`),
@@ -5929,6 +5964,39 @@ function $cdea4cf8c5c071ef$export$d7841e452f2e59a8({
       available_sortings_: available_sortings_,
       meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_
     };
+    // Keyboard a11y for desktop panels (DOM order: after the grid). Keyboard opens move focus into the panel and
+    // restore it to the toggle on close; mouse opens skip the focus move (already visible, and it'd jump the viewport).
+    // `user_opened_panel` is set only on keyboard activation - `filters_open`/`sorting_open` also change
+    // programmatically (undo toast, history restore, SDK consumers), which 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 => $9HbP8$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, $9HbP8$observer).wait_for_element(panel, 4000);
+      if (panel.isConnected) {
+        // Focus the first interactive control (often a group's <summary>), not the <section>: the section has no
+        // visible focus ring and is flex-stretched to full grid height (scrolling it mis-aligns). The first
+        // control keeps focus visible and lets Tab walk through the panel. `summary` is focusable but not matched
+        // by the input/button/etc. selectors, so it must be listed explicitly.
+        const focus_target = panel.querySelector("summary, input:not([type='hidden']):not(:disabled), button:not(:disabled), a[href], select:not(:disabled), [tabindex]:not([tabindex='-1'])") ?? panel;
+        focus_target.focus({
+          preventScroll: true
+        });
+        focus_target.scrollIntoView({
+          block: "nearest"
+        });
+      }
+    })();
+    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) => $9HbP8$createComponent($cdea4cf8c5c071ef$var$OpenFiltersButton, {
       tabindex_: is_tabbable ? 0 : -1,
       i18n_: i18n_,
@@ -5936,7 +6004,11 @@ 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_: keyboard_activated => {
+        if (keyboard_activated) 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) => $9HbP8$createComponent($cdea4cf8c5c071ef$var$OpenSortingButton, {
       tabindex_: is_tabbable ? 0 : -1,
@@ -5946,7 +6018,11 @@ 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_: keyboard_activated => {
+        if (keyboard_activated) user_opened_panel = true;
+      },
+      button_ref_: is_tabbable ? el => sort_toggle_button = el : undefined
     });
     let open_modal_;
     let close_modal_;
@@ -5965,9 +6041,48 @@ 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) button_to_restore.focus({
+        preventScroll: true
+      });
+    };
+    // `<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 => $9HbP8$createComponent((0, $9HbP8$Show), {
+      get when() {
+        return !hide_filters();
+      },
+      get children() {
+        var _el$ = $9HbP8$getNextElement($cdea4cf8c5c071ef$var$_tmpl$),
+          _el$2 = _el$.firstChild;
+        $9HbP8$use(el => register_desktop_panel(el, filter_toggle_button, should_focus), _el$);
+        $9HbP8$insert(_el$2, $9HbP8$createComponent((0, $fab07f52c9861732$export$3f1a388cc0d8fed7), filter_options));
+        $9HbP8$effect(() => $9HbP8$setAttribute(_el$, "aria-label", i18n_.filters_()));
+        return _el$;
+      }
+    });
+    const SortingPanel = should_focus => (() => {
+      var _el$3 = $9HbP8$getNextElement($cdea4cf8c5c071ef$var$_tmpl$2),
+        _el$4 = _el$3.firstChild;
+      $9HbP8$use(el => register_desktop_panel(el, sort_toggle_button, should_focus), _el$3);
+      $9HbP8$insert(_el$4, $9HbP8$createComponent((0, $68a258a92b88f02f$export$1f1775a58da589b5), sorting_options));
+      $9HbP8$effect(() => $9HbP8$setAttribute(_el$3, "aria-label", i18n_.sorting_text_()));
+      return _el$3;
+    })();
     $9HbP8$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 ($9HbP8$untrack(() => input_modal_open_?.())) {
@@ -5976,26 +6091,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_(() => $9HbP8$createComponent((0, $9HbP8$Show), {
-          get when() {
-            return !hide_filters();
-          },
-          get children() {
-            var _el$ = $9HbP8$getNextElement($cdea4cf8c5c071ef$var$_tmpl$),
-              _el$2 = _el$.firstChild;
-            $9HbP8$insert(_el$2, $9HbP8$createComponent((0, $fab07f52c9861732$export$3f1a388cc0d8fed7), filter_options));
-            return _el$;
-          }
-        }));else set_extra_els_in_results_container_((() => {
-          var _el$3 = $9HbP8$getNextElement($cdea4cf8c5c071ef$var$_tmpl$2),
-            _el$4 = _el$3.firstChild;
-          $9HbP8$insert(_el$4, $9HbP8$createComponent((0, $68a258a92b88f02f$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));
       }
     });
     $9HbP8$catchify1(async () => {
@@ -6059,7 +6162,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 = $9HbP8$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
@@ -6082,14 +6187,18 @@ function $cdea4cf8c5c071ef$var$OpenFiltersButton({
         return _el$15;
       }
     }), _el$21, _co$5);
-    $9HbP8$addEventListener(_el$16, "click", $9HbP8$catchify1(() => $9HbP8$batch(() => {
+    $9HbP8$addEventListener(_el$16, "click", $9HbP8$catchify1(event => $9HbP8$batch(() => {
       if (search_filters_open_[0]()) {
         search_filters_open_[1](false);
         return;
       }
+      // Only keyboard opens move focus into the panel; mouse opens leave the viewport put.
+      on_user_open_?.($5108d4f5c200e4e5$export$c5c485c196a19ec1(event));
       search_filters_open_[1](true);
       search_sorting_open_[1](false);
     })), true);
+    var _ref$2 = button_ref_;
+    typeof _ref$2 === "function" ? $9HbP8$use(_ref$2, _el$16) : button_ref_ = _el$16;
     $9HbP8$setAttribute(_el$16, "tabindex", tabindex_);
     $9HbP8$className(_el$16, "filter toggle-button major-minor-transition" + ((0, $9HbP8$isServer) ? " minor" : ""));
     $9HbP8$insert(_el$16, $9HbP8$createComponent((0, $9HbP8$Show), {
@@ -6111,21 +6220,24 @@ function $cdea4cf8c5c071ef$var$OpenFiltersButton({
         _v$2 = !filters_closed(),
         _v$3 = !!filters_closed(),
         _v$4 = (filters_closed() ? i18n_.open_filters_ : i18n_.close_filters_)(),
-        _v$5 = filter_button_width_?.() ? {
+        _v$5 = !filters_closed(),
+        _v$6 = filter_button_width_?.() ? {
           width: filter_button_width_() + "px"
         } : {};
       _p$.e = $9HbP8$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 && $9HbP8$setAttribute(_el$16, "aria-label", _p$.o = _v$4);
-      _p$.i = $9HbP8$style(_el$16, _v$5, _p$.i);
+      _v$5 !== _p$.i && $9HbP8$setAttribute(_el$16, "aria-expanded", _p$.i = _v$5);
+      _p$.n = $9HbP8$style(_el$16, _v$6, _p$.n);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined,
       o: undefined,
-      i: undefined
+      i: undefined,
+      n: undefined
     });
     $9HbP8$runHydrationEvents();
     return _el$14;
@@ -6139,7 +6251,9 @@ 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 = $9HbP8$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
@@ -6148,14 +6262,18 @@ function $cdea4cf8c5c071ef$var$OpenSortingButton({
       _el$23 = _el$22.firstChild,
       _el$24 = _el$23.nextSibling,
       [_el$25, _co$6] = $9HbP8$getNextMarker(_el$24.nextSibling);
-    $9HbP8$addEventListener(_el$22, "click", $9HbP8$catchify1(() => $9HbP8$batch(() => {
+    $9HbP8$addEventListener(_el$22, "click", $9HbP8$catchify1(event => $9HbP8$batch(() => {
       if (search_sorting_open_[0]()) {
         search_sorting_open_[1](false);
         return;
       }
+      // Only keyboard opens move focus into the panel; mouse opens leave the viewport put.
+      on_user_open_?.($5108d4f5c200e4e5$export$c5c485c196a19ec1(event));
       search_filters_open_[1](false);
       search_sorting_open_[1](true);
     })), true);
+    var _ref$3 = button_ref_;
+    typeof _ref$3 === "function" ? $9HbP8$use(_ref$3, _el$22) : button_ref_ = _el$22;
     $9HbP8$setAttribute(_el$22, "tabindex", tabindex_);
     $9HbP8$insert(_el$23, (() => {
       var _c$ = $9HbP8$memo(() => !!sorting_closed());
@@ -6177,22 +6295,25 @@ function $cdea4cf8c5c071ef$var$OpenSortingButton({
       }
     }), _el$25, _co$6);
     $9HbP8$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_?.() ? {
+      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_?.() ? {
           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 && $9HbP8$setAttribute(_el$22, "aria-label", _p$.a = _v$8);
-      _p$.o = $9HbP8$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 && $9HbP8$setAttribute(_el$22, "aria-label", _p$.a = _v$9);
+      _v$10 !== _p$.o && $9HbP8$setAttribute(_el$22, "aria-expanded", _p$.o = _v$10);
+      _p$.i = $9HbP8$style(_el$22, _v$11, _p$.i);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined,
-      o: undefined
+      o: undefined,
+      i: undefined
     });
     $9HbP8$runHydrationEvents();
     return _el$22;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.10.13",
+  "version": "4.10.15",
   "description": "Base package containing the actual UI of Depict UI along with translations, with a not-simplified API. We recommend using @depict-ai/js-ui or @depict-ai/react-ui instead.",
   "packageManager": "yarn@3.2.2",
   "sass": "styles.scss",
@@ -236,9 +236,9 @@
     "@babel/plugin-transform-typescript": "^7.22.9",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "^7.22.6",
-    "@depict-ai/plp-styling": "^4.6.5",
-    "@depict-ai/types": "^5.6.3",
-    "@depict-ai/utilishared": "^2.6.3",
+    "@depict-ai/plp-styling": "^4.6.7",
+    "@depict-ai/types": "^5.6.5",
+    "@depict-ai/utilishared": "^2.6.5",
     "solid-js": "^1.9.10"
   },
   "type": "module",

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.13";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.10.15";
 function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
   const signal = $3hooq$solidjs.createSignal(false);
   $3hooq$solidjs.onCleanup($3hooq$depictaiutilishared.javascript_media_query(media_query, _ref => {
@@ -2315,8 +2315,10 @@ var $b0477e4d832f090e$var$_tmpl$ = ["<button", ' type="button" class="', '"', ">
 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 $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>"],
@@ -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_());
@@ -3195,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());
@@ -3921,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_());
@@ -5004,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>"],
@@ -5082,6 +5087,40 @@ function $f70cc6dfcadf0fd5$export$d7841e452f2e59a8(_ref) {
       available_sortings_: available_sortings_,
       meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_
     };
+    // Keyboard a11y for desktop panels (DOM order: after the grid). Keyboard opens move focus into the panel and
+    // restore it to the toggle on close; mouse opens skip the focus move (already visible, and it'd jump the viewport).
+    // `user_opened_panel` is set only on keyboard activation - `filters_open`/`sorting_open` also change
+    // programmatically (undo toast, history restore, SDK consumers), which 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) {
+        var _panel$querySelector;
+        // Focus the first interactive control (often a group's <summary>), not the <section>: the section has no
+        // visible focus ring and is flex-stretched to full grid height (scrolling it mis-aligns). The first
+        // control keeps focus visible and lets Tab walk through the panel. `summary` is focusable but not matched
+        // by the input/button/etc. selectors, so it must be listed explicitly.
+        const focus_target = (_panel$querySelector = panel.querySelector("summary, input:not([type='hidden']):not(:disabled), button:not(:disabled), a[href], select:not(:disabled), [tabindex]:not([tabindex='-1'])")) !== null && _panel$querySelector !== void 0 ? _panel$querySelector : panel;
+        focus_target.focus({
+          preventScroll: true
+        });
+        focus_target.scrollIntoView({
+          block: "nearest"
+        });
+      }
+    })();
+    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;
@@ -5092,7 +5131,11 @@ 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_: keyboard_activated => {
+          if (keyboard_activated) user_opened_panel = true;
+        },
+        button_ref_: is_tabbable ? el => filter_toggle_button = el : undefined
       });
     };
     const make_open_sorting_button = function () {
@@ -5106,7 +5149,11 @@ 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_: keyboard_activated => {
+          if (keyboard_activated) user_opened_panel = true;
+        },
+        button_ref_: is_tabbable ? el => sort_toggle_button = el : undefined
       });
     };
     let open_modal_;
@@ -5126,10 +5173,37 @@ 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) button_to_restore.focus({
+        preventScroll: true
+      });
+    };
+    // `<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_;
@@ -5139,19 +5213,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 () => {
@@ -5202,7 +5272,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
@@ -5215,7 +5287,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() {
@@ -5239,11 +5311,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.13";
+export const version = "4.10.15";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */