@depict-ai/ui 4.10.14 → 4.10.16

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.14";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.10.16";
 function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
   const signal = $52FdA$solidjs.createSignal(false);
   $52FdA$solidjs.onCleanup($52FdA$depictaiutilishared.javascript_media_query(media_query, _ref => {
@@ -2821,6 +2821,14 @@ function $a904ccf883f60231$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 $5f28fa844ecd384c$export$c5c485c196a19ec1(event) {
+  return event.detail === 0;
+}
 var $b0477e4d832f090e$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<button type=button class=expand-filter><!$><!/><span>`);
 function $b0477e4d832f090e$export$ca21a16d65b3dd8(_ref) {
   let {
@@ -2837,17 +2845,14 @@ function $b0477e4d832f090e$export$ca21a16d65b3dd8(_ref) {
     $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;
+      // Only move focus for keyboard activation; mouse users see the revealed options and don't need a focus jump.
+      const keyboard_activated = $5f28fa844ecd384c$export$c5c485c196a19ec1(event);
       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.
+        // `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($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({
@@ -2857,7 +2862,9 @@ function $b0477e4d832f090e$export$ca21a16d65b3dd8(_ref) {
       } 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();
+        button.focus({
+          preventScroll: true
+        });
     }), true);
     var _ref$ = button;
     typeof _ref$ === "function" ? $52FdA$solidjsweb.use(_ref$, _el$) : button = _el$;
@@ -6415,10 +6422,10 @@ 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.
+    // 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;
@@ -6429,7 +6436,20 @@ function $f70cc6dfcadf0fd5$export$d7841e452f2e59a8(_ref) {
       // 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();
+      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;
@@ -6447,7 +6467,9 @@ function $f70cc6dfcadf0fd5$export$d7841e452f2e59a8(_ref) {
         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,
-        on_user_open_: () => user_opened_panel = true,
+        on_user_open_: keyboard_activated => {
+          if (keyboard_activated) user_opened_panel = true;
+        },
         button_ref_: is_tabbable ? el => filter_toggle_button = el : undefined
       });
     };
@@ -6463,7 +6485,9 @@ function $f70cc6dfcadf0fd5$export$d7841e452f2e59a8(_ref) {
         available_sortings_: available_sortings_,
         sort_button_width_: adhere_to_width ? sort_button_width_ : undefined,
         meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_,
-        on_user_open_: () => user_opened_panel = true,
+        on_user_open_: keyboard_activated => {
+          if (keyboard_activated) user_opened_panel = true;
+        },
         button_ref_: is_tabbable ? el => sort_toggle_button = el : undefined
       });
     };
@@ -6490,7 +6514,9 @@ function $f70cc6dfcadf0fd5$export$d7841e452f2e59a8(_ref) {
       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();
+      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
@@ -6632,12 +6658,13 @@ function $f70cc6dfcadf0fd5$var$OpenFiltersButton(_ref3) {
         return _el$15;
       }
     }), _el$21, _co$5);
-    $52FdA$solidjsweb.addEventListener(_el$16, "click", $52FdA$depictaiutilishared.catchify(() => $52FdA$solidjs.batch(() => {
+    $52FdA$solidjsweb.addEventListener(_el$16, "click", $52FdA$depictaiutilishared.catchify(event => $52FdA$solidjs.batch(() => {
       if (search_filters_open_[0]()) {
         search_filters_open_[1](false);
         return;
       }
-      on_user_open_ === null || on_user_open_ === void 0 || on_user_open_();
+      // Only keyboard opens move focus into the panel; mouse opens leave the viewport put.
+      on_user_open_ === null || on_user_open_ === void 0 || on_user_open_($5f28fa844ecd384c$export$c5c485c196a19ec1(event));
       search_filters_open_[1](true);
       search_sorting_open_[1](false);
     })), true);
@@ -6707,12 +6734,13 @@ function $f70cc6dfcadf0fd5$var$OpenSortingButton(_ref4) {
       _el$23 = _el$22.firstChild,
       _el$24 = _el$23.nextSibling,
       [_el$25, _co$6] = $52FdA$solidjsweb.getNextMarker(_el$24.nextSibling);
-    $52FdA$solidjsweb.addEventListener(_el$22, "click", $52FdA$depictaiutilishared.catchify(() => $52FdA$solidjs.batch(() => {
+    $52FdA$solidjsweb.addEventListener(_el$22, "click", $52FdA$depictaiutilishared.catchify(event => $52FdA$solidjs.batch(() => {
       if (search_sorting_open_[0]()) {
         search_sorting_open_[1](false);
         return;
       }
-      on_user_open_ === null || on_user_open_ === void 0 || on_user_open_();
+      // Only keyboard opens move focus into the panel; mouse opens leave the viewport put.
+      on_user_open_ === null || on_user_open_ === void 0 || on_user_open_($5f28fa844ecd384c$export$c5c485c196a19ec1(event));
       search_filters_open_[1](false);
       search_sorting_open_[1](true);
     })), true);

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.14";
+export const version = "4.10.16";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */

package/ES10/index.js

@@ -10,7 +10,7 @@ import $8tj43$babelruntimehelpersclassPrivateFieldGet from "@babel/runtime/helpe
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.10.14";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.10.16";
 function $00a5b94f0c11efbb$export$d9f36cf74e24d595(media_query) {
   const signal = $8tj43$createSignal(false);
   $8tj43$onCleanup($8tj43$javascript_media_query(media_query, _ref => {
@@ -2716,6 +2716,14 @@ function $ff3225aef892a467$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 $5cfec0b5cd753ec8$export$c5c485c196a19ec1(event) {
+  return event.detail === 0;
+}
 var $3e850b2f2cca761f$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<button type=button class=expand-filter><!$><!/><span>`);
 function $3e850b2f2cca761f$export$ca21a16d65b3dd8(_ref) {
   let {
@@ -2732,17 +2740,14 @@ function $3e850b2f2cca761f$export$ca21a16d65b3dd8(_ref) {
     $8tj43$addEventListener(_el$, "click", $8tj43$catchify1(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;
+      // Only move focus for keyboard activation; mouse users see the revealed options and don't need a focus jump.
+      const keyboard_activated = $5cfec0b5cd753ec8$export$c5c485c196a19ec1(event);
       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.
+        // `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($8tj43$catchify1(() => {
           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({
@@ -2752,7 +2757,9 @@ function $3e850b2f2cca761f$export$ca21a16d65b3dd8(_ref) {
       } 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();
+        button.focus({
+          preventScroll: true
+        });
     }), true);
     var _ref$ = button;
     typeof _ref$ === "function" ? $8tj43$use(_ref$, _el$) : button = _el$;
@@ -6310,10 +6317,10 @@ function $7396052a1484264f$export$d7841e452f2e59a8(_ref) {
       available_sortings_: available_sortings_,
       meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_
     };
-    // Keyboard accessibility for the desktop panels (rendered after the product grid in the DOM): when the user
-    // opens a panel we move focus into it, and restore focus to the toggle button on close. Intent is tracked with
-    // a plain flag set in the buttons' click handlers - `filters_open`/`sorting_open` also change programmatically
-    // (undo toast, history-state restore, SDK consumers), and those must not steal focus.
+    // 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;
@@ -6324,7 +6331,20 @@ function $7396052a1484264f$export$d7841e452f2e59a8(_ref) {
       // insertion), the timeout lets this promise resolve instead of keeping `panel` - and the observer
       // listener it registers - referenced forever.
       await (0, $8tj43$observer).wait_for_element(panel, 4000);
-      if (panel.isConnected) panel.focus();
+      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;
@@ -6342,7 +6362,9 @@ function $7396052a1484264f$export$d7841e452f2e59a8(_ref) {
         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,
-        on_user_open_: () => user_opened_panel = true,
+        on_user_open_: keyboard_activated => {
+          if (keyboard_activated) user_opened_panel = true;
+        },
         button_ref_: is_tabbable ? el => filter_toggle_button = el : undefined
       });
     };
@@ -6358,7 +6380,9 @@ function $7396052a1484264f$export$d7841e452f2e59a8(_ref) {
         available_sortings_: available_sortings_,
         sort_button_width_: adhere_to_width ? sort_button_width_ : undefined,
         meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_,
-        on_user_open_: () => user_opened_panel = true,
+        on_user_open_: keyboard_activated => {
+          if (keyboard_activated) user_opened_panel = true;
+        },
         button_ref_: is_tabbable ? el => sort_toggle_button = el : undefined
       });
     };
@@ -6385,7 +6409,9 @@ function $7396052a1484264f$export$d7841e452f2e59a8(_ref) {
       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();
+      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
@@ -6527,12 +6553,13 @@ function $7396052a1484264f$var$OpenFiltersButton(_ref3) {
         return _el$15;
       }
     }), _el$21, _co$5);
-    $8tj43$addEventListener(_el$16, "click", $8tj43$catchify1(() => $8tj43$batch(() => {
+    $8tj43$addEventListener(_el$16, "click", $8tj43$catchify1(event => $8tj43$batch(() => {
       if (search_filters_open_[0]()) {
         search_filters_open_[1](false);
         return;
       }
-      on_user_open_ === null || on_user_open_ === void 0 || on_user_open_();
+      // Only keyboard opens move focus into the panel; mouse opens leave the viewport put.
+      on_user_open_ === null || on_user_open_ === void 0 || on_user_open_($5cfec0b5cd753ec8$export$c5c485c196a19ec1(event));
       search_filters_open_[1](true);
       search_sorting_open_[1](false);
     })), true);
@@ -6602,12 +6629,13 @@ function $7396052a1484264f$var$OpenSortingButton(_ref4) {
       _el$23 = _el$22.firstChild,
       _el$24 = _el$23.nextSibling,
       [_el$25, _co$6] = $8tj43$getNextMarker(_el$24.nextSibling);
-    $8tj43$addEventListener(_el$22, "click", $8tj43$catchify1(() => $8tj43$batch(() => {
+    $8tj43$addEventListener(_el$22, "click", $8tj43$catchify1(event => $8tj43$batch(() => {
       if (search_sorting_open_[0]()) {
         search_sorting_open_[1](false);
         return;
       }
-      on_user_open_ === null || on_user_open_ === void 0 || on_user_open_();
+      // Only keyboard opens move focus into the panel; mouse opens leave the viewport put.
+      on_user_open_ === null || on_user_open_ === void 0 || on_user_open_($5cfec0b5cd753ec8$export$c5c485c196a19ec1(event));
       search_filters_open_[1](false);
       search_sorting_open_[1](true);
     })), true);

package/latest/index.cjs

@@ -109,7 +109,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.10.14";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.10.16";
 function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
   const signal = $gVhhF$solidjs.createSignal(false);
   $gVhhF$solidjs.onCleanup($gVhhF$depictaiutilishared.javascript_media_query(media_query, ({
@@ -2698,6 +2698,14 @@ function $cc43b6428000c4bf$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 $fb96fea58c4a45dd$export$c5c485c196a19ec1(event) {
+  return event.detail === 0;
+}
 var $0fe1e7efdf4200d6$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button type=button class=expand-filter><!$><!/><span>`);
 function $0fe1e7efdf4200d6$export$ca21a16d65b3dd8({
   show_extras_: [get_show_extras, set_show_extras],
@@ -2713,24 +2721,23 @@ function $0fe1e7efdf4200d6$export$ca21a16d65b3dd8({
     $gVhhF$solidjsweb.addEventListener(_el$, "click", $gVhhF$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;
+      // Only move focus for keyboard activation; mouse users see the revealed options and don't need a focus jump.
+      const keyboard_activated = $fb96fea58c4a45dd$export$c5c485c196a19ec1(event);
       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.
+        // `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($gVhhF$depictaiutilishared.catchify(() => 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();
+        button.focus({
+          preventScroll: true
+        });
     }), true);
     var _ref$ = button;
     typeof _ref$ === "function" ? $gVhhF$solidjsweb.use(_ref$, _el$) : button = _el$;
@@ -6059,10 +6066,10 @@ function $f8f64d05c525825b$export$d7841e452f2e59a8({
       available_sortings_: available_sortings_,
       meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_
     };
-    // Keyboard accessibility for the desktop panels (rendered after the product grid in the DOM): when the user
-    // opens a panel we move focus into it, and restore focus to the toggle button on close. Intent is tracked with
-    // a plain flag set in the buttons' click handlers - `filters_open`/`sorting_open` also change programmatically
-    // (undo toast, history-state restore, SDK consumers), and those must not steal focus.
+    // 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;
@@ -6073,7 +6080,19 @@ function $f8f64d05c525825b$export$d7841e452f2e59a8({
       // insertion), the timeout lets this promise resolve instead of keeping `panel` - and the observer
       // listener it registers - referenced forever.
       await (0, $gVhhF$depictaiutilishared.observer).wait_for_element(panel, 4000);
-      if (panel.isConnected) panel.focus();
+      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;
@@ -6088,7 +6107,9 @@ function $f8f64d05c525825b$export$d7841e452f2e59a8({
       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,
-      on_user_open_: () => user_opened_panel = true,
+      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) => $gVhhF$solidjsweb.createComponent($f8f64d05c525825b$var$OpenSortingButton, {
@@ -6100,7 +6121,9 @@ function $f8f64d05c525825b$export$d7841e452f2e59a8({
       available_sortings_: available_sortings_,
       sort_button_width_: adhere_to_width ? sort_button_width_ : undefined,
       meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_,
-      on_user_open_: () => user_opened_panel = true,
+      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_;
@@ -6126,7 +6149,9 @@ function $f8f64d05c525825b$export$d7841e452f2e59a8({
       const focus_was_in_panel = !!current_panel && current_panel.contains(document.activeElement);
       current_panel = undefined;
       current_panel_toggle_button = undefined;
-      if (focus_was_in_panel) button_to_restore?.focus();
+      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
@@ -6264,12 +6289,13 @@ function $f8f64d05c525825b$var$OpenFiltersButton({
         return _el$15;
       }
     }), _el$21, _co$5);
-    $gVhhF$solidjsweb.addEventListener(_el$16, "click", $gVhhF$depictaiutilishared.catchify(() => $gVhhF$solidjs.batch(() => {
+    $gVhhF$solidjsweb.addEventListener(_el$16, "click", $gVhhF$depictaiutilishared.catchify(event => $gVhhF$solidjs.batch(() => {
       if (search_filters_open_[0]()) {
         search_filters_open_[1](false);
         return;
       }
-      on_user_open_?.();
+      // Only keyboard opens move focus into the panel; mouse opens leave the viewport put.
+      on_user_open_?.($fb96fea58c4a45dd$export$c5c485c196a19ec1(event));
       search_filters_open_[1](true);
       search_sorting_open_[1](false);
     })), true);
@@ -6338,12 +6364,13 @@ function $f8f64d05c525825b$var$OpenSortingButton({
       _el$23 = _el$22.firstChild,
       _el$24 = _el$23.nextSibling,
       [_el$25, _co$6] = $gVhhF$solidjsweb.getNextMarker(_el$24.nextSibling);
-    $gVhhF$solidjsweb.addEventListener(_el$22, "click", $gVhhF$depictaiutilishared.catchify(() => $gVhhF$solidjs.batch(() => {
+    $gVhhF$solidjsweb.addEventListener(_el$22, "click", $gVhhF$depictaiutilishared.catchify(event => $gVhhF$solidjs.batch(() => {
       if (search_sorting_open_[0]()) {
         search_sorting_open_[1](false);
         return;
       }
-      on_user_open_?.();
+      // Only keyboard opens move focus into the panel; mouse opens leave the viewport put.
+      on_user_open_?.($fb96fea58c4a45dd$export$c5c485c196a19ec1(event));
       search_filters_open_[1](false);
       search_sorting_open_[1](true);
     })), true);

package/latest/index.d.ts

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

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.14";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.16";
 function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   const signal = $9HbP8$createSignal(false);
   $9HbP8$onCleanup($9HbP8$javascript_media_query(media_query, ({
@@ -2596,6 +2596,14 @@ 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],
@@ -2611,24 +2619,23 @@ function $67b173f9db427028$export$ca21a16d65b3dd8({
     $9HbP8$addEventListener(_el$, "click", $9HbP8$catchify1(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;
+      // 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;
-        // 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.
+        // `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();
+        button.focus({
+          preventScroll: true
+        });
     }), true);
     var _ref$ = button;
     typeof _ref$ === "function" ? $9HbP8$use(_ref$, _el$) : button = _el$;
@@ -5957,10 +5964,10 @@ function $cdea4cf8c5c071ef$export$d7841e452f2e59a8({
       available_sortings_: available_sortings_,
       meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_
     };
-    // Keyboard accessibility for the desktop panels (rendered after the product grid in the DOM): when the user
-    // opens a panel we move focus into it, and restore focus to the toggle button on close. Intent is tracked with
-    // a plain flag set in the buttons' click handlers - `filters_open`/`sorting_open` also change programmatically
-    // (undo toast, history-state restore, SDK consumers), and those must not steal focus.
+    // 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;
@@ -5971,7 +5978,19 @@ function $cdea4cf8c5c071ef$export$d7841e452f2e59a8({
       // 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) panel.focus();
+      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;
@@ -5986,7 +6005,9 @@ function $cdea4cf8c5c071ef$export$d7841e452f2e59a8({
       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,
-      on_user_open_: () => user_opened_panel = true,
+      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, {
@@ -5998,7 +6019,9 @@ function $cdea4cf8c5c071ef$export$d7841e452f2e59a8({
       available_sortings_: available_sortings_,
       sort_button_width_: adhere_to_width ? sort_button_width_ : undefined,
       meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_,
-      on_user_open_: () => user_opened_panel = true,
+      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_;
@@ -6024,7 +6047,9 @@ function $cdea4cf8c5c071ef$export$d7841e452f2e59a8({
       const focus_was_in_panel = !!current_panel && current_panel.contains(document.activeElement);
       current_panel = undefined;
       current_panel_toggle_button = undefined;
-      if (focus_was_in_panel) button_to_restore?.focus();
+      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
@@ -6162,12 +6187,13 @@ 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;
       }
-      on_user_open_?.();
+      // 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);
@@ -6236,12 +6262,13 @@ 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;
       }
-      on_user_open_?.();
+      // 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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.10.14",
+  "version": "4.10.16",
   "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",
@@ -234,11 +234,11 @@
   },
   "dependencies": {
     "@babel/plugin-transform-typescript": "^7.22.9",
-    "@babel/runtime": "latest",
+    "@babel/runtime": "^7.22.6",
     "@babel/runtime-corejs3": "^7.22.6",
-    "@depict-ai/plp-styling": "^4.6.6",
-    "@depict-ai/types": "^5.6.4",
-    "@depict-ai/utilishared": "^2.6.4",
+    "@depict-ai/plp-styling": "^4.6.8",
+    "@depict-ai/types": "^5.6.6",
+    "@depict-ai/utilishared": "^2.6.6",
     "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.14";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.10.16";
 function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
   const signal = $3hooq$solidjs.createSignal(false);
   $3hooq$solidjs.onCleanup($3hooq$depictaiutilishared.javascript_media_query(media_query, _ref => {
@@ -5087,10 +5087,10 @@ 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.
+    // 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;
@@ -5101,7 +5101,20 @@ function $f70cc6dfcadf0fd5$export$d7841e452f2e59a8(_ref) {
       // 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();
+      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;
@@ -5119,7 +5132,9 @@ function $f70cc6dfcadf0fd5$export$d7841e452f2e59a8(_ref) {
         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,
-        on_user_open_: () => user_opened_panel = true,
+        on_user_open_: keyboard_activated => {
+          if (keyboard_activated) user_opened_panel = true;
+        },
         button_ref_: is_tabbable ? el => filter_toggle_button = el : undefined
       });
     };
@@ -5135,7 +5150,9 @@ function $f70cc6dfcadf0fd5$export$d7841e452f2e59a8(_ref) {
         available_sortings_: available_sortings_,
         sort_button_width_: adhere_to_width ? sort_button_width_ : undefined,
         meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_,
-        on_user_open_: () => user_opened_panel = true,
+        on_user_open_: keyboard_activated => {
+          if (keyboard_activated) user_opened_panel = true;
+        },
         button_ref_: is_tabbable ? el => sort_toggle_button = el : undefined
       });
     };
@@ -5162,7 +5179,9 @@ function $f70cc6dfcadf0fd5$export$d7841e452f2e59a8(_ref) {
       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();
+      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

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.14";
+export const version = "4.10.16";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */

package/server/ES10/index.js

@@ -10,7 +10,7 @@ import $b8hua$babelruntimehelpersclassPrivateFieldGet from "@babel/runtime/helpe
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.10.14";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.10.16";
 function $00a5b94f0c11efbb$export$d9f36cf74e24d595(media_query) {
   const signal = $b8hua$createSignal(false);
   $b8hua$onCleanup($b8hua$javascript_media_query(media_query, _ref => {
@@ -4982,10 +4982,10 @@ function $7396052a1484264f$export$d7841e452f2e59a8(_ref) {
       available_sortings_: available_sortings_,
       meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_
     };
-    // Keyboard accessibility for the desktop panels (rendered after the product grid in the DOM): when the user
-    // opens a panel we move focus into it, and restore focus to the toggle button on close. Intent is tracked with
-    // a plain flag set in the buttons' click handlers - `filters_open`/`sorting_open` also change programmatically
-    // (undo toast, history-state restore, SDK consumers), and those must not steal focus.
+    // 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;
@@ -4996,7 +4996,20 @@ function $7396052a1484264f$export$d7841e452f2e59a8(_ref) {
       // insertion), the timeout lets this promise resolve instead of keeping `panel` - and the observer
       // listener it registers - referenced forever.
       await (0, $b8hua$observer).wait_for_element(panel, 4000);
-      if (panel.isConnected) panel.focus();
+      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;
@@ -5014,7 +5027,9 @@ function $7396052a1484264f$export$d7841e452f2e59a8(_ref) {
         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,
-        on_user_open_: () => user_opened_panel = true,
+        on_user_open_: keyboard_activated => {
+          if (keyboard_activated) user_opened_panel = true;
+        },
         button_ref_: is_tabbable ? el => filter_toggle_button = el : undefined
       });
     };
@@ -5030,7 +5045,9 @@ function $7396052a1484264f$export$d7841e452f2e59a8(_ref) {
         available_sortings_: available_sortings_,
         sort_button_width_: adhere_to_width ? sort_button_width_ : undefined,
         meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_,
-        on_user_open_: () => user_opened_panel = true,
+        on_user_open_: keyboard_activated => {
+          if (keyboard_activated) user_opened_panel = true;
+        },
         button_ref_: is_tabbable ? el => sort_toggle_button = el : undefined
       });
     };
@@ -5057,7 +5074,9 @@ function $7396052a1484264f$export$d7841e452f2e59a8(_ref) {
       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();
+      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

package/server/latest/index.cjs

@@ -109,7 +109,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.10.14";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.10.16";
 function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
   const signal = $5vyXB$solidjs.createSignal(false);
   $5vyXB$solidjs.onCleanup($5vyXB$depictaiutilishared.javascript_media_query(media_query, ({
@@ -4783,10 +4783,10 @@ function $f8f64d05c525825b$export$d7841e452f2e59a8({
       available_sortings_: available_sortings_,
       meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_
     };
-    // Keyboard accessibility for the desktop panels (rendered after the product grid in the DOM): when the user
-    // opens a panel we move focus into it, and restore focus to the toggle button on close. Intent is tracked with
-    // a plain flag set in the buttons' click handlers - `filters_open`/`sorting_open` also change programmatically
-    // (undo toast, history-state restore, SDK consumers), and those must not steal focus.
+    // 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;
@@ -4797,7 +4797,19 @@ function $f8f64d05c525825b$export$d7841e452f2e59a8({
       // insertion), the timeout lets this promise resolve instead of keeping `panel` - and the observer
       // listener it registers - referenced forever.
       await (0, $5vyXB$depictaiutilishared.observer).wait_for_element(panel, 4000);
-      if (panel.isConnected) panel.focus();
+      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;
@@ -4812,7 +4824,9 @@ function $f8f64d05c525825b$export$d7841e452f2e59a8({
       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,
-      on_user_open_: () => user_opened_panel = true,
+      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) => $5vyXB$solidjsweb.createComponent($f8f64d05c525825b$var$OpenSortingButton, {
@@ -4824,7 +4838,9 @@ function $f8f64d05c525825b$export$d7841e452f2e59a8({
       available_sortings_: available_sortings_,
       sort_button_width_: adhere_to_width ? sort_button_width_ : undefined,
       meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_,
-      on_user_open_: () => user_opened_panel = true,
+      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_;
@@ -4850,7 +4866,9 @@ function $f8f64d05c525825b$export$d7841e452f2e59a8({
       const focus_was_in_panel = !!current_panel && current_panel.contains(document.activeElement);
       current_panel = undefined;
       current_panel_toggle_button = undefined;
-      if (focus_was_in_panel) button_to_restore?.focus();
+      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

package/server/latest/index.d.ts

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

package/server/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $i7OB2$createStore, reconcile as $i7OB2$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.14";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.16";
 function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   const signal = $i7OB2$createSignal(false);
   $i7OB2$onCleanup($i7OB2$javascript_media_query(media_query, ({
@@ -4681,10 +4681,10 @@ function $cdea4cf8c5c071ef$export$d7841e452f2e59a8({
       available_sortings_: available_sortings_,
       meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_
     };
-    // Keyboard accessibility for the desktop panels (rendered after the product grid in the DOM): when the user
-    // opens a panel we move focus into it, and restore focus to the toggle button on close. Intent is tracked with
-    // a plain flag set in the buttons' click handlers - `filters_open`/`sorting_open` also change programmatically
-    // (undo toast, history-state restore, SDK consumers), and those must not steal focus.
+    // 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;
@@ -4695,7 +4695,19 @@ function $cdea4cf8c5c071ef$export$d7841e452f2e59a8({
       // insertion), the timeout lets this promise resolve instead of keeping `panel` - and the observer
       // listener it registers - referenced forever.
       await (0, $i7OB2$observer).wait_for_element(panel, 4000);
-      if (panel.isConnected) panel.focus();
+      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;
@@ -4710,7 +4722,9 @@ function $cdea4cf8c5c071ef$export$d7841e452f2e59a8({
       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,
-      on_user_open_: () => user_opened_panel = true,
+      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) => $i7OB2$createComponent($cdea4cf8c5c071ef$var$OpenSortingButton, {
@@ -4722,7 +4736,9 @@ function $cdea4cf8c5c071ef$export$d7841e452f2e59a8({
       available_sortings_: available_sortings_,
       sort_button_width_: adhere_to_width ? sort_button_width_ : undefined,
       meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_,
-      on_user_open_: () => user_opened_panel = true,
+      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_;
@@ -4748,7 +4764,9 @@ function $cdea4cf8c5c071ef$export$d7841e452f2e59a8({
       const focus_was_in_panel = !!current_panel && current_panel.contains(document.activeElement);
       current_panel = undefined;
       current_panel_toggle_button = undefined;
-      if (focus_was_in_panel) button_to_restore?.focus();
+      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