@depict-ai/ui 4.10.20 → 4.10.21

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.20";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.10.21";
 function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
   const signal = $52FdA$solidjs.createSignal(false);
   $52FdA$solidjs.onCleanup($52FdA$depictaiutilishared.javascript_media_query(media_query, _ref => {
@@ -2678,6 +2678,63 @@ function $c5842bdb10e57229$export$fecbb157621501bd(_ref) {
   return outmost_element;
 }
 $52FdA$solidjsweb.delegateEvents(["click"]);
+
+/**
+ * `HTMLElement.focus()` is a **silent no-op** on an element that is not being rendered
+ * (`display: none`, `visibility: hidden`, a collapsed menu). Nothing throws, focus simply
+ * stays where it was, so a caller that does not check believes it restored focus when it
+ * left it on `<body>` — which puts the keyboard user back at the top of the document.
+ *
+ * That is reachable whenever the element which opened a modal stops being rendered while the
+ * modal is open, and the common way for that to happen is the responsive-duplicate header:
+ * a theme renders the same search trigger twice, once for desktop and once for mobile, and
+ * hides one at the current breakpoint. Open the modal from the desktop trigger, cross the
+ * breakpoint (rotate a tablet, resize a window), close the modal, and the remembered trigger
+ * is still `isConnected` but no longer rendered. Verified against a live merchant storefront
+ * on 4.10.19.
+ *
+ * So: verify that focus landed, and when it did not, look for a rendered twin of the same
+ * control — the other half of the responsive pair — and use that instead.
+ */ /**
+    * An element can only take focus if it is actually being rendered.
+    *
+    * Injectable because it is the one part of this module that needs a layout engine: jsdom
+    * reports no client rects for anything, so the specs pass their own predicate to exercise the
+    * matching rules. The real predicate is only exercised in a browser.
+    */
+const $1573c1a34371380a$export$e0652711c614c755 = element => !!element.getClientRects().length;
+/**
+ * `document.activeElement` is the outermost shadow host when focus is inside a shadow tree,
+ * so ask the element's own root rather than the document — matching how the rest of
+ * modal_opener treats shadow-mounted modals.
+ */
+const $1573c1a34371380a$var$has_focus = element => element.getRootNode().activeElement === element;
+/**
+ * The accessible-name-ish identity we match twins on. Deliberately narrow: an explicit label
+ * or the trimmed text. Two controls that share a tag and this string are the same control
+ * rendered twice, which is exactly the responsive-duplicate case.
+ */
+const $1573c1a34371380a$var$identity_of = element => (element.getAttribute("aria-label") || element.getAttribute("title") || element.textContent || "").trim().replace(/\s+/g, " ");
+function $1573c1a34371380a$export$5800d9d535a06e96(element) {
+  let rendered = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : $1573c1a34371380a$export$e0652711c614c755;
+  const identity = $1573c1a34371380a$var$identity_of(element);
+  if (!identity) return; // nothing to match on — an icon-only button with no label
+  const twins = [...element.ownerDocument.querySelectorAll(element.localName)].filter(candidate => candidate !== element && rendered(candidate) && $1573c1a34371380a$var$identity_of(candidate) === identity);
+  return twins.length === 1 ? twins[0] : undefined;
+}
+function $1573c1a34371380a$export$51461d633c351649(element) {
+  let rendered = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : $1573c1a34371380a$export$e0652711c614c755;
+  element.focus({
+    preventScroll: true
+  });
+  if ($1573c1a34371380a$var$has_focus(element)) return true;
+  const twin = $1573c1a34371380a$export$5800d9d535a06e96(element, rendered);
+  if (!twin) return false;
+  twin.focus({
+    preventScroll: true
+  });
+  return $1573c1a34371380a$var$has_focus(twin);
+}
 async function $4cf7d9829d60d844$export$79b1565500412d9b(search_modal, modal_fn_opts, parent) {
   const body = parent || document.body || (await (0, $52FdA$depictaiutilishared.observer).wait_for_element("body"));
   let dispose_and_remove;
@@ -2743,9 +2800,12 @@ async function $4cf7d9829d60d844$export$79b1565500412d9b(search_modal, modal_fn_
                 });
                 focused = requested_focus_target.getRootNode().activeElement === requested_focus_target;
               }
-              if (!focused && element_focused_before_open !== null && element_focused_before_open !== void 0 && element_focused_before_open.isConnected) element_focused_before_open.focus({
-                preventScroll: true
-              });
+              if (!focused && element_focused_before_open !== null && element_focused_before_open !== void 0 && element_focused_before_open.isConnected)
+                // restore_focus_to rather than a bare focus(): the remembered trigger can be
+                // connected but no longer rendered (a responsive-duplicate header whose other
+                // half is showing now), and focus() on an unrendered element silently does
+                // nothing, leaving the keyboard user at the top of the page.
+                $1573c1a34371380a$export$51461d633c351649(element_focused_before_open);
             } finally {
               // Cleared on a task instead of synchronously in case a browser delivers the focus event async
               setTimeout(() => restoring_focus = false, 0);
@@ -9788,20 +9848,28 @@ function $73014ff36186a4dd$var$_classPrivateMethodGet(receiver, privateSet, fn)
 }
 var $73014ff36186a4dd$var$_throwing_on_navigation = /*#__PURE__*/new WeakSet();
 var $73014ff36186a4dd$var$_get_navigation_happened_promise = /*#__PURE__*/new WeakSet();
+var $73014ff36186a4dd$var$_watch_for_navigation_to_same_href = /*#__PURE__*/new WeakSet();
 class $73014ff36186a4dd$export$7e1297a3a19f10d8 {
   /**
   * Function that will be called when we want to navigate, or a string saying it's not an SPA. You can change this OTG
   */ /**
      * We store listing_id in history.state and do operate on this both here and in js-ui, this is the key to be used which js-ui provides
      */ /**
-        * Vue has async router that needs to be awaited (it navigates after a microtask)
-        * This standardises waiting for all kinds of routers
-        */
+        * Called when a go_to_ didn't change location.href, for example when following a link to the page one is already on. href_change_ipns stays silent then, so whoever waits for a href change to react to a navigation has to listen here too
+        */ /**
+           * Vue has async router that needs to be awaited (it navigates after a microtask)
+           * This standardises waiting for all kinds of routers
+           */ /**
+              * Calls navigation_to_same_href_listeners_ if the navigation we're about to request ends on the href we're already on
+              * @returns function to stop watching, call it when the navigation failed
+              */
   constructor(on_navigation, listing_query_state_key) {
+    $73014ff36186a4dd$var$_classPrivateMethodInitSpec(this, $73014ff36186a4dd$var$_watch_for_navigation_to_same_href);
     $73014ff36186a4dd$var$_classPrivateMethodInitSpec(this, $73014ff36186a4dd$var$_get_navigation_happened_promise);
     $73014ff36186a4dd$var$_classPrivateMethodInitSpec(this, $73014ff36186a4dd$var$_throwing_on_navigation);
     $parcel$interopDefault($52FdA$babelruntimehelpersdefineProperty)(this, "on_navigation_", void 0);
     $parcel$interopDefault($52FdA$babelruntimehelpersdefineProperty)(this, "listing_query_state_key", void 0);
+    $parcel$interopDefault($52FdA$babelruntimehelpersdefineProperty)(this, "navigation_to_same_href_listeners_", new Set());
     $parcel$interopDefault($52FdA$babelruntimehelpersdefineProperty)(this, "navigate_", {
       /**
       * Call this if you *just* want to replace the state object in history.state
@@ -9843,6 +9911,7 @@ class $73014ff36186a4dd$export$7e1297a3a19f10d8 {
         }
         event_ === null || event_ === void 0 || event_.preventDefault();
         const promise = $73014ff36186a4dd$var$_classPrivateMethodGet(this, $73014ff36186a4dd$var$_get_navigation_happened_promise, $73014ff36186a4dd$var$_get_navigation_happened_promise2).call(this, true);
+        const stop_watching_for_same_href = $73014ff36186a4dd$var$_classPrivateMethodGet(this, $73014ff36186a4dd$var$_watch_for_navigation_to_same_href, $73014ff36186a4dd$var$_watch_for_navigation_to_same_href2).call(this, new_url_);
         if (force_spa_navigation_ && wants_hard_navigation) {
           // Don't allow hard navigation if we're forcing SPA navigation, which we do for things where PageReplacer can be used for performance
           const new_state = history.state;
@@ -9856,7 +9925,7 @@ class $73014ff36186a4dd$export$7e1297a3a19f10d8 {
           is_replace: is_replace_,
           new_url: new_url_ instanceof URL ? new_url_ : new URL(new_url_, location.href),
           scroll: scroll
-        });
+        }, stop_watching_for_same_href);
         await promise;
       })
     });
@@ -9864,15 +9933,16 @@ class $73014ff36186a4dd$export$7e1297a3a19f10d8 {
     this.on_navigation_ = on_navigation;
   }
 }
-function $73014ff36186a4dd$var$_throwing_on_navigation2() {
+function $73014ff36186a4dd$var$_throwing_on_navigation2(options, on_throw_) {
   const {
     on_navigation_: on_navigation_
   } = this;
   if (typeof on_navigation_ !== "function") throw new Error("on_navigation_ is not a function");
   // make sure that we don't accidentally catchify if the SDK consumer has fucked up
   try {
-    return on_navigation_(...arguments);
+    return on_navigation_(options);
   } catch (e) {
+    on_throw_ === null || on_throw_ === void 0 || on_throw_();
     queueMicrotask(() => {
       throw e;
     });
@@ -9889,6 +9959,24 @@ function $73014ff36186a4dd$var$_get_navigation_happened_promise2(is_replace) {
     (0, $52FdA$depictaiutilishared.instant_exec_on_suspect_history_change).add(handler);
   });
 }
+function $73014ff36186a4dd$var$_watch_for_navigation_to_same_href2(target_url) {
+  const href_before = location.href;
+  const stop_watching = () => {
+    (0, $52FdA$depictaiutilishared.instant_exec_on_suspect_history_change).delete(on_history_change);
+    clearTimeout(timeout);
+  };
+  const notify_if_href_unchanged = $52FdA$depictaiutilishared.catchify(() => {
+    stop_watching();
+    if (location.href !== href_before) return;
+    this.navigation_to_same_href_listeners_.forEach(listener => $52FdA$depictaiutilishared.catchify(listener)());
+  });
+  // The router has acted once it touches history, if the href is still the same then it took us to the page we're on
+  const on_history_change = () => notify_if_href_unchanged();
+  // A router asked to go to the exact href we're on might not touch history at all, so don't wait longer than 500ms for it. For any other target we can't tell a slow navigation from one that goes nowhere, so only stop listening after a while
+  const timeout = target_url.href === href_before ? setTimeout(notify_if_href_unchanged, 500) : setTimeout(stop_watching, 10000);
+  (0, $52FdA$depictaiutilishared.instant_exec_on_suspect_history_change).add(on_history_change);
+  return stop_watching;
+}
 var $2c920813c92d6987$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<button class="show-more major"type=button>`),
   $2c920813c92d6987$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<h2 class=recs-title>`),
   $2c920813c92d6987$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=recommendation-grid><!$><!/><!$><!/>`);
@@ -11698,11 +11786,17 @@ var $820f2920cc576f7e$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<svg
 function $820f2920cc576f7e$export$8d8893ffd8aca39a() {
   return $52FdA$solidjsweb.getNextElement($820f2920cc576f7e$var$_tmpl$);
 }
-function $4b71b4fabdee5753$export$93d9bfd0c9c1a5b8(close_modal, search_query_url_param_name_) {
+function $4b71b4fabdee5753$export$93d9bfd0c9c1a5b8(close_modal, search_query_url_param_name_, router_) {
   const [exit_iterable, exitable_iterable] = $52FdA$depictaiutilishared.make_asyncIterable_exiter((0, $52FdA$depictaiutilishared.href_change_ipns));
+  const {
+    navigation_to_same_href_listeners_: navigation_to_same_href_listeners_
+  } = router_;
   let set_initial_values = false;
   let old_pathname;
   let old_param_value;
+  // A card linking to the page one is already on doesn't change the href, close the modal anyway so the click does something
+  navigation_to_same_href_listeners_.add(close_modal);
+  $52FdA$solidjs.onCleanup(() => navigation_to_same_href_listeners_.delete(close_modal));
   $52FdA$solidjs.onCleanup($52FdA$depictaiutilishared.catchify(exit_iterable));
   $52FdA$depictaiutilishared.catchify(async () => {
     for await (const href of exitable_iterable) {
@@ -11863,7 +11957,7 @@ function $9035b24c2dbd3f36$var$RawClassicSearchModal(_ref) {
     return _el$;
   })();
   if (disable_scrolling_) $8c2e68c6d458169b$export$fe334901e8bebd57();
-  $4b71b4fabdee5753$export$93d9bfd0c9c1a5b8(close_modal_, search_query_url_param_name_);
+  $4b71b4fabdee5753$export$93d9bfd0c9c1a5b8(close_modal_, search_query_url_param_name_, router_);
   window.addEventListener("keydown", close_on_escape_handler);
   $52FdA$solidjs.onCleanup($52FdA$depictaiutilishared.catchify(() => window.removeEventListener("keydown", close_on_escape_handler)));
   if (closing_animation_) register_closing_animation_(closing_animation_);
@@ -12784,7 +12878,7 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
     return (((_get_modal_search_res5 = get_modal_search_results_()) === null || _get_modal_search_res5 === void 0 ? void 0 : _get_modal_search_res5.loading) === false && !suggestions_response_.loading || !!prev) && totalNumberResults() === 0 && previous_searches_matching_query().length === 0;
   });
   if (disable_scrolling_) $8c2e68c6d458169b$export$fe334901e8bebd57();
-  $4b71b4fabdee5753$export$93d9bfd0c9c1a5b8(close_modal_, search_query_url_param_name_);
+  $4b71b4fabdee5753$export$93d9bfd0c9c1a5b8(close_modal_, search_query_url_param_name_, router_);
   addEventListener("keydown", close_on_escape_handler);
   $52FdA$solidjs.onCleanup(() => removeEventListener("keydown", close_on_escape_handler));
   $52FdA$solidjs.createEffect($52FdA$solidjs.on(get_search_field_value_, () => {

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.20";
+export const version = "4.10.21";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -485,6 +485,10 @@ export class PseudoRouter {
    * We store listing_id in history.state and do operate on this both here and in js-ui, this is the key to be used which js-ui provides
    */
   listing_query_state_key: string | undefined;
+  /**
+   * Called when a go_to_ didn't change location.href, for example when following a link to the page one is already on. href_change_ipns stays silent then, so whoever waits for a href change to react to a navigation has to listen here too
+   */
+  navigation_to_same_href_listeners_: Set<VoidFunction>;
   navigate_: {
     /**
      * Call this if you *just* want to replace the state object in history.state

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.20";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.10.21";
 function $00a5b94f0c11efbb$export$d9f36cf74e24d595(media_query) {
   const signal = $8tj43$createSignal(false);
   $8tj43$onCleanup($8tj43$javascript_media_query(media_query, _ref => {
@@ -2573,6 +2573,63 @@ function $4711a82d08d2021b$export$fecbb157621501bd(_ref) {
   return outmost_element;
 }
 $8tj43$delegateEvents(["click"]);
+
+/**
+ * `HTMLElement.focus()` is a **silent no-op** on an element that is not being rendered
+ * (`display: none`, `visibility: hidden`, a collapsed menu). Nothing throws, focus simply
+ * stays where it was, so a caller that does not check believes it restored focus when it
+ * left it on `<body>` — which puts the keyboard user back at the top of the document.
+ *
+ * That is reachable whenever the element which opened a modal stops being rendered while the
+ * modal is open, and the common way for that to happen is the responsive-duplicate header:
+ * a theme renders the same search trigger twice, once for desktop and once for mobile, and
+ * hides one at the current breakpoint. Open the modal from the desktop trigger, cross the
+ * breakpoint (rotate a tablet, resize a window), close the modal, and the remembered trigger
+ * is still `isConnected` but no longer rendered. Verified against a live merchant storefront
+ * on 4.10.19.
+ *
+ * So: verify that focus landed, and when it did not, look for a rendered twin of the same
+ * control — the other half of the responsive pair — and use that instead.
+ */ /**
+    * An element can only take focus if it is actually being rendered.
+    *
+    * Injectable because it is the one part of this module that needs a layout engine: jsdom
+    * reports no client rects for anything, so the specs pass their own predicate to exercise the
+    * matching rules. The real predicate is only exercised in a browser.
+    */
+const $1c5106dfe72d554c$export$e0652711c614c755 = element => !!element.getClientRects().length;
+/**
+ * `document.activeElement` is the outermost shadow host when focus is inside a shadow tree,
+ * so ask the element's own root rather than the document — matching how the rest of
+ * modal_opener treats shadow-mounted modals.
+ */
+const $1c5106dfe72d554c$var$has_focus = element => element.getRootNode().activeElement === element;
+/**
+ * The accessible-name-ish identity we match twins on. Deliberately narrow: an explicit label
+ * or the trimmed text. Two controls that share a tag and this string are the same control
+ * rendered twice, which is exactly the responsive-duplicate case.
+ */
+const $1c5106dfe72d554c$var$identity_of = element => (element.getAttribute("aria-label") || element.getAttribute("title") || element.textContent || "").trim().replace(/\s+/g, " ");
+function $1c5106dfe72d554c$export$5800d9d535a06e96(element) {
+  let rendered = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : $1c5106dfe72d554c$export$e0652711c614c755;
+  const identity = $1c5106dfe72d554c$var$identity_of(element);
+  if (!identity) return; // nothing to match on — an icon-only button with no label
+  const twins = [...element.ownerDocument.querySelectorAll(element.localName)].filter(candidate => candidate !== element && rendered(candidate) && $1c5106dfe72d554c$var$identity_of(candidate) === identity);
+  return twins.length === 1 ? twins[0] : undefined;
+}
+function $1c5106dfe72d554c$export$51461d633c351649(element) {
+  let rendered = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : $1c5106dfe72d554c$export$e0652711c614c755;
+  element.focus({
+    preventScroll: true
+  });
+  if ($1c5106dfe72d554c$var$has_focus(element)) return true;
+  const twin = $1c5106dfe72d554c$export$5800d9d535a06e96(element, rendered);
+  if (!twin) return false;
+  twin.focus({
+    preventScroll: true
+  });
+  return $1c5106dfe72d554c$var$has_focus(twin);
+}
 async function $d5f1e6a0f9117286$export$79b1565500412d9b(search_modal, modal_fn_opts, parent) {
   const body = parent || document.body || (await (0, $8tj43$observer).wait_for_element("body"));
   let dispose_and_remove;
@@ -2638,9 +2695,12 @@ async function $d5f1e6a0f9117286$export$79b1565500412d9b(search_modal, modal_fn_
                 });
                 focused = requested_focus_target.getRootNode().activeElement === requested_focus_target;
               }
-              if (!focused && element_focused_before_open !== null && element_focused_before_open !== void 0 && element_focused_before_open.isConnected) element_focused_before_open.focus({
-                preventScroll: true
-              });
+              if (!focused && element_focused_before_open !== null && element_focused_before_open !== void 0 && element_focused_before_open.isConnected)
+                // restore_focus_to rather than a bare focus(): the remembered trigger can be
+                // connected but no longer rendered (a responsive-duplicate header whose other
+                // half is showing now), and focus() on an unrendered element silently does
+                // nothing, leaving the keyboard user at the top of the page.
+                $1c5106dfe72d554c$export$51461d633c351649(element_focused_before_open);
             } finally {
               // Cleared on a task instead of synchronously in case a browser delivers the focus event async
               setTimeout(() => restoring_focus = false, 0);
@@ -9683,20 +9743,28 @@ function $ac571292d606f30b$var$_classPrivateMethodGet(receiver, privateSet, fn)
 }
 var $ac571292d606f30b$var$_throwing_on_navigation = /*#__PURE__*/new WeakSet();
 var $ac571292d606f30b$var$_get_navigation_happened_promise = /*#__PURE__*/new WeakSet();
+var $ac571292d606f30b$var$_watch_for_navigation_to_same_href = /*#__PURE__*/new WeakSet();
 class $ac571292d606f30b$export$7e1297a3a19f10d8 {
   /**
   * Function that will be called when we want to navigate, or a string saying it's not an SPA. You can change this OTG
   */ /**
      * We store listing_id in history.state and do operate on this both here and in js-ui, this is the key to be used which js-ui provides
      */ /**
-        * Vue has async router that needs to be awaited (it navigates after a microtask)
-        * This standardises waiting for all kinds of routers
-        */
+        * Called when a go_to_ didn't change location.href, for example when following a link to the page one is already on. href_change_ipns stays silent then, so whoever waits for a href change to react to a navigation has to listen here too
+        */ /**
+           * Vue has async router that needs to be awaited (it navigates after a microtask)
+           * This standardises waiting for all kinds of routers
+           */ /**
+              * Calls navigation_to_same_href_listeners_ if the navigation we're about to request ends on the href we're already on
+              * @returns function to stop watching, call it when the navigation failed
+              */
   constructor(on_navigation, listing_query_state_key) {
+    $ac571292d606f30b$var$_classPrivateMethodInitSpec(this, $ac571292d606f30b$var$_watch_for_navigation_to_same_href);
     $ac571292d606f30b$var$_classPrivateMethodInitSpec(this, $ac571292d606f30b$var$_get_navigation_happened_promise);
     $ac571292d606f30b$var$_classPrivateMethodInitSpec(this, $ac571292d606f30b$var$_throwing_on_navigation);
     $8tj43$babelruntimehelpersdefineProperty(this, "on_navigation_", void 0);
     $8tj43$babelruntimehelpersdefineProperty(this, "listing_query_state_key", void 0);
+    $8tj43$babelruntimehelpersdefineProperty(this, "navigation_to_same_href_listeners_", new Set());
     $8tj43$babelruntimehelpersdefineProperty(this, "navigate_", {
       /**
       * Call this if you *just* want to replace the state object in history.state
@@ -9738,6 +9806,7 @@ class $ac571292d606f30b$export$7e1297a3a19f10d8 {
         }
         event_ === null || event_ === void 0 || event_.preventDefault();
         const promise = $ac571292d606f30b$var$_classPrivateMethodGet(this, $ac571292d606f30b$var$_get_navigation_happened_promise, $ac571292d606f30b$var$_get_navigation_happened_promise2).call(this, true);
+        const stop_watching_for_same_href = $ac571292d606f30b$var$_classPrivateMethodGet(this, $ac571292d606f30b$var$_watch_for_navigation_to_same_href, $ac571292d606f30b$var$_watch_for_navigation_to_same_href2).call(this, new_url_);
         if (force_spa_navigation_ && wants_hard_navigation) {
           // Don't allow hard navigation if we're forcing SPA navigation, which we do for things where PageReplacer can be used for performance
           const new_state = history.state;
@@ -9751,7 +9820,7 @@ class $ac571292d606f30b$export$7e1297a3a19f10d8 {
           is_replace: is_replace_,
           new_url: new_url_ instanceof URL ? new_url_ : new URL(new_url_, location.href),
           scroll: scroll
-        });
+        }, stop_watching_for_same_href);
         await promise;
       })
     });
@@ -9759,15 +9828,16 @@ class $ac571292d606f30b$export$7e1297a3a19f10d8 {
     this.on_navigation_ = on_navigation;
   }
 }
-function $ac571292d606f30b$var$_throwing_on_navigation2() {
+function $ac571292d606f30b$var$_throwing_on_navigation2(options, on_throw_) {
   const {
     on_navigation_: on_navigation_
   } = this;
   if (typeof on_navigation_ !== "function") throw new Error("on_navigation_ is not a function");
   // make sure that we don't accidentally catchify if the SDK consumer has fucked up
   try {
-    return on_navigation_(...arguments);
+    return on_navigation_(options);
   } catch (e) {
+    on_throw_ === null || on_throw_ === void 0 || on_throw_();
     queueMicrotask(() => {
       throw e;
     });
@@ -9784,6 +9854,24 @@ function $ac571292d606f30b$var$_get_navigation_happened_promise2(is_replace) {
     (0, $8tj43$instant_exec_on_suspect_history_change).add(handler);
   });
 }
+function $ac571292d606f30b$var$_watch_for_navigation_to_same_href2(target_url) {
+  const href_before = location.href;
+  const stop_watching = () => {
+    (0, $8tj43$instant_exec_on_suspect_history_change).delete(on_history_change);
+    clearTimeout(timeout);
+  };
+  const notify_if_href_unchanged = $8tj43$catchify1(() => {
+    stop_watching();
+    if (location.href !== href_before) return;
+    this.navigation_to_same_href_listeners_.forEach(listener => $8tj43$catchify1(listener)());
+  });
+  // The router has acted once it touches history, if the href is still the same then it took us to the page we're on
+  const on_history_change = () => notify_if_href_unchanged();
+  // A router asked to go to the exact href we're on might not touch history at all, so don't wait longer than 500ms for it. For any other target we can't tell a slow navigation from one that goes nowhere, so only stop listening after a while
+  const timeout = target_url.href === href_before ? setTimeout(notify_if_href_unchanged, 500) : setTimeout(stop_watching, 10000);
+  (0, $8tj43$instant_exec_on_suspect_history_change).add(on_history_change);
+  return stop_watching;
+}
 var $e3efeb558d952696$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<button class="show-more major"type=button>`),
   $e3efeb558d952696$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<h2 class=recs-title>`),
   $e3efeb558d952696$var$_tmpl$3 = /*#__PURE__*/$8tj43$template(`<div class=recommendation-grid><!$><!/><!$><!/>`);
@@ -11593,11 +11681,17 @@ var $fac58b5610eec6a9$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<svg xmlns=http
 function $fac58b5610eec6a9$export$8d8893ffd8aca39a() {
   return $8tj43$getNextElement($fac58b5610eec6a9$var$_tmpl$);
 }
-function $a82a41ab7188eda2$export$93d9bfd0c9c1a5b8(close_modal, search_query_url_param_name_) {
+function $a82a41ab7188eda2$export$93d9bfd0c9c1a5b8(close_modal, search_query_url_param_name_, router_) {
   const [exit_iterable, exitable_iterable] = $8tj43$make_asyncIterable_exiter((0, $8tj43$href_change_ipns));
+  const {
+    navigation_to_same_href_listeners_: navigation_to_same_href_listeners_
+  } = router_;
   let set_initial_values = false;
   let old_pathname;
   let old_param_value;
+  // A card linking to the page one is already on doesn't change the href, close the modal anyway so the click does something
+  navigation_to_same_href_listeners_.add(close_modal);
+  $8tj43$onCleanup(() => navigation_to_same_href_listeners_.delete(close_modal));
   $8tj43$onCleanup($8tj43$catchify1(exit_iterable));
   $8tj43$catchify1(async () => {
     for await (const href of exitable_iterable) {
@@ -11758,7 +11852,7 @@ function $40411f2ec772c376$var$RawClassicSearchModal(_ref) {
     return _el$;
   })();
   if (disable_scrolling_) $e56d241d0f33d459$export$fe334901e8bebd57();
-  $a82a41ab7188eda2$export$93d9bfd0c9c1a5b8(close_modal_, search_query_url_param_name_);
+  $a82a41ab7188eda2$export$93d9bfd0c9c1a5b8(close_modal_, search_query_url_param_name_, router_);
   window.addEventListener("keydown", close_on_escape_handler);
   $8tj43$onCleanup($8tj43$catchify1(() => window.removeEventListener("keydown", close_on_escape_handler)));
   if (closing_animation_) register_closing_animation_(closing_animation_);
@@ -12679,7 +12773,7 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
     return (((_get_modal_search_res5 = get_modal_search_results_()) === null || _get_modal_search_res5 === void 0 ? void 0 : _get_modal_search_res5.loading) === false && !suggestions_response_.loading || !!prev) && totalNumberResults() === 0 && previous_searches_matching_query().length === 0;
   });
   if (disable_scrolling_) $e56d241d0f33d459$export$fe334901e8bebd57();
-  $a82a41ab7188eda2$export$93d9bfd0c9c1a5b8(close_modal_, search_query_url_param_name_);
+  $a82a41ab7188eda2$export$93d9bfd0c9c1a5b8(close_modal_, search_query_url_param_name_, router_);
   addEventListener("keydown", close_on_escape_handler);
   $8tj43$onCleanup(() => removeEventListener("keydown", close_on_escape_handler));
   $8tj43$createEffect($8tj43$on(get_search_field_value_, () => {

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.20";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.10.21";
 function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
   const signal = $gVhhF$solidjs.createSignal(false);
   $gVhhF$solidjs.onCleanup($gVhhF$depictaiutilishared.javascript_media_query(media_query, ({
@@ -2564,6 +2564,61 @@ function $235a2771a44e28e9$export$fecbb157621501bd({
   return outmost_element;
 }
 $gVhhF$solidjsweb.delegateEvents(["click"]);
+
+/**
+ * `HTMLElement.focus()` is a **silent no-op** on an element that is not being rendered
+ * (`display: none`, `visibility: hidden`, a collapsed menu). Nothing throws, focus simply
+ * stays where it was, so a caller that does not check believes it restored focus when it
+ * left it on `<body>` — which puts the keyboard user back at the top of the document.
+ *
+ * That is reachable whenever the element which opened a modal stops being rendered while the
+ * modal is open, and the common way for that to happen is the responsive-duplicate header:
+ * a theme renders the same search trigger twice, once for desktop and once for mobile, and
+ * hides one at the current breakpoint. Open the modal from the desktop trigger, cross the
+ * breakpoint (rotate a tablet, resize a window), close the modal, and the remembered trigger
+ * is still `isConnected` but no longer rendered. Verified against a live merchant storefront
+ * on 4.10.19.
+ *
+ * So: verify that focus landed, and when it did not, look for a rendered twin of the same
+ * control — the other half of the responsive pair — and use that instead.
+ */ /**
+    * An element can only take focus if it is actually being rendered.
+    *
+    * Injectable because it is the one part of this module that needs a layout engine: jsdom
+    * reports no client rects for anything, so the specs pass their own predicate to exercise the
+    * matching rules. The real predicate is only exercised in a browser.
+    */
+const $7f80d1bc95bbbc60$export$e0652711c614c755 = element => !!element.getClientRects().length;
+/**
+ * `document.activeElement` is the outermost shadow host when focus is inside a shadow tree,
+ * so ask the element's own root rather than the document — matching how the rest of
+ * modal_opener treats shadow-mounted modals.
+ */
+const $7f80d1bc95bbbc60$var$has_focus = element => element.getRootNode().activeElement === element;
+/**
+ * The accessible-name-ish identity we match twins on. Deliberately narrow: an explicit label
+ * or the trimmed text. Two controls that share a tag and this string are the same control
+ * rendered twice, which is exactly the responsive-duplicate case.
+ */
+const $7f80d1bc95bbbc60$var$identity_of = element => (element.getAttribute("aria-label") || element.getAttribute("title") || element.textContent || "").trim().replace(/\s+/g, " ");
+function $7f80d1bc95bbbc60$export$5800d9d535a06e96(element, rendered = $7f80d1bc95bbbc60$export$e0652711c614c755) {
+  const identity = $7f80d1bc95bbbc60$var$identity_of(element);
+  if (!identity) return; // nothing to match on — an icon-only button with no label
+  const twins = [...element.ownerDocument.querySelectorAll(element.localName)].filter(candidate => candidate !== element && rendered(candidate) && $7f80d1bc95bbbc60$var$identity_of(candidate) === identity);
+  return twins.length === 1 ? twins[0] : undefined;
+}
+function $7f80d1bc95bbbc60$export$51461d633c351649(element, rendered = $7f80d1bc95bbbc60$export$e0652711c614c755) {
+  element.focus({
+    preventScroll: true
+  });
+  if ($7f80d1bc95bbbc60$var$has_focus(element)) return true;
+  const twin = $7f80d1bc95bbbc60$export$5800d9d535a06e96(element, rendered);
+  if (!twin) return false;
+  twin.focus({
+    preventScroll: true
+  });
+  return $7f80d1bc95bbbc60$var$has_focus(twin);
+}
 async function $9abb0a35d4b60ed3$export$79b1565500412d9b(search_modal, modal_fn_opts, parent) {
   const body = parent || document.body || (await (0, $gVhhF$depictaiutilishared.observer).wait_for_element("body"));
   let dispose_and_remove;
@@ -2624,9 +2679,12 @@ async function $9abb0a35d4b60ed3$export$79b1565500412d9b(search_modal, modal_fn_
                 });
                 focused = requested_focus_target.getRootNode().activeElement === requested_focus_target;
               }
-              if (!focused && element_focused_before_open?.isConnected) element_focused_before_open.focus({
-                preventScroll: true
-              });
+              if (!focused && element_focused_before_open?.isConnected)
+                // restore_focus_to rather than a bare focus(): the remembered trigger can be
+                // connected but no longer rendered (a responsive-duplicate header whose other
+                // half is showing now), and focus() on an unrendered element silently does
+                // nothing, leaving the keyboard user at the top of the page.
+                $7f80d1bc95bbbc60$export$51461d633c351649(element_focused_before_open);
             } finally {
               // Cleared on a task instead of synchronously in case a browser delivers the focus event async
               setTimeout(() => restoring_focus = false, 0);
@@ -9267,16 +9325,20 @@ class $e96dd13889871fc0$export$7e1297a3a19f10d8 {
   * Function that will be called when we want to navigate, or a string saying it's not an SPA. You can change this OTG
   */ /**
      * We store listing_id in history.state and do operate on this both here and in js-ui, this is the key to be used which js-ui provides
-     */
-  #throwing_on_navigation(...args) {
+     */ /**
+        * Called when a go_to_ didn't change location.href, for example when following a link to the page one is already on. href_change_ipns stays silent then, so whoever waits for a href change to react to a navigation has to listen here too
+        */
+  navigation_to_same_href_listeners_ = new Set();
+  #throwing_on_navigation(options, on_throw_) {
     const {
       on_navigation_: on_navigation_
     } = this;
     if (typeof on_navigation_ !== "function") throw new Error("on_navigation_ is not a function");
     // make sure that we don't accidentally catchify if the SDK consumer has fucked up
     try {
-      return on_navigation_(...args);
+      return on_navigation_(options);
     } catch (e) {
+      on_throw_?.();
       queueMicrotask(() => {
         throw e;
       });
@@ -9297,6 +9359,28 @@ class $e96dd13889871fc0$export$7e1297a3a19f10d8 {
       (0, $gVhhF$depictaiutilishared.instant_exec_on_suspect_history_change).add(handler);
     });
   }
+  /**
+  * Calls navigation_to_same_href_listeners_ if the navigation we're about to request ends on the href we're already on
+  * @returns function to stop watching, call it when the navigation failed
+  */
+  #watch_for_navigation_to_same_href(target_url) {
+    const href_before = location.href;
+    const stop_watching = () => {
+      (0, $gVhhF$depictaiutilishared.instant_exec_on_suspect_history_change).delete(on_history_change);
+      clearTimeout(timeout);
+    };
+    const notify_if_href_unchanged = $gVhhF$depictaiutilishared.catchify(() => {
+      stop_watching();
+      if (location.href !== href_before) return;
+      this.navigation_to_same_href_listeners_.forEach(listener => $gVhhF$depictaiutilishared.catchify(listener)());
+    });
+    // The router has acted once it touches history, if the href is still the same then it took us to the page we're on
+    const on_history_change = () => notify_if_href_unchanged();
+    // A router asked to go to the exact href we're on might not touch history at all, so don't wait longer than 500ms for it. For any other target we can't tell a slow navigation from one that goes nowhere, so only stop listening after a while
+    const timeout = target_url.href === href_before ? setTimeout(notify_if_href_unchanged, 500) : setTimeout(stop_watching, 10000);
+    (0, $gVhhF$depictaiutilishared.instant_exec_on_suspect_history_change).add(on_history_change);
+    return stop_watching;
+  }
   navigate_ = {
     /**
     * Call this if you *just* want to replace the state object in history.state
@@ -9336,6 +9420,7 @@ class $e96dd13889871fc0$export$7e1297a3a19f10d8 {
       }
       event_?.preventDefault();
       const promise = this.#get_navigation_happened_promise(true);
+      const stop_watching_for_same_href = this.#watch_for_navigation_to_same_href(new_url_);
       if (force_spa_navigation_ && wants_hard_navigation) {
         // Don't allow hard navigation if we're forcing SPA navigation, which we do for things where PageReplacer can be used for performance
         const new_state = history.state;
@@ -9349,7 +9434,7 @@ class $e96dd13889871fc0$export$7e1297a3a19f10d8 {
         is_replace: is_replace_,
         new_url: new_url_ instanceof URL ? new_url_ : new URL(new_url_, location.href),
         scroll: scroll
-      });
+      }, stop_watching_for_same_href);
       await promise;
     })
   };
@@ -11076,11 +11161,17 @@ var $610b584d4f54699e$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<svg
 function $610b584d4f54699e$export$8d8893ffd8aca39a() {
   return $gVhhF$solidjsweb.getNextElement($610b584d4f54699e$var$_tmpl$);
 }
-function $eb3039a27db40508$export$93d9bfd0c9c1a5b8(close_modal, search_query_url_param_name_) {
+function $eb3039a27db40508$export$93d9bfd0c9c1a5b8(close_modal, search_query_url_param_name_, router_) {
   const [exit_iterable, exitable_iterable] = $gVhhF$depictaiutilishared.make_asyncIterable_exiter((0, $gVhhF$depictaiutilishared.href_change_ipns));
+  const {
+    navigation_to_same_href_listeners_: navigation_to_same_href_listeners_
+  } = router_;
   let set_initial_values = false;
   let old_pathname;
   let old_param_value;
+  // A card linking to the page one is already on doesn't change the href, close the modal anyway so the click does something
+  navigation_to_same_href_listeners_.add(close_modal);
+  $gVhhF$solidjs.onCleanup(() => navigation_to_same_href_listeners_.delete(close_modal));
   $gVhhF$solidjs.onCleanup($gVhhF$depictaiutilishared.catchify(exit_iterable));
   $gVhhF$depictaiutilishared.catchify(async () => {
     for await (const href of exitable_iterable) {
@@ -11236,7 +11327,7 @@ function $44f0b2e312a9b710$var$RawClassicSearchModal({
     return _el$;
   })();
   if (disable_scrolling_) $ca1176b694a6ee2e$export$fe334901e8bebd57();
-  $eb3039a27db40508$export$93d9bfd0c9c1a5b8(close_modal_, search_query_url_param_name_);
+  $eb3039a27db40508$export$93d9bfd0c9c1a5b8(close_modal_, search_query_url_param_name_, router_);
   window.addEventListener("keydown", close_on_escape_handler);
   $gVhhF$solidjs.onCleanup($gVhhF$depictaiutilishared.catchify(() => window.removeEventListener("keydown", close_on_escape_handler)));
   if (closing_animation_) register_closing_animation_(closing_animation_);
@@ -12115,7 +12206,7 @@ function $11597ae03e703a47$var$RawSearchModalV2({
   });
   const noResults = $gVhhF$solidjs.createMemo(prev => (get_modal_search_results_()?.loading === false && !suggestions_response_.loading || !!prev) && totalNumberResults() === 0 && previous_searches_matching_query().length === 0);
   if (disable_scrolling_) $ca1176b694a6ee2e$export$fe334901e8bebd57();
-  $eb3039a27db40508$export$93d9bfd0c9c1a5b8(close_modal_, search_query_url_param_name_);
+  $eb3039a27db40508$export$93d9bfd0c9c1a5b8(close_modal_, search_query_url_param_name_, router_);
   addEventListener("keydown", close_on_escape_handler);
   $gVhhF$solidjs.onCleanup(() => removeEventListener("keydown", close_on_escape_handler));
   $gVhhF$solidjs.createEffect($gVhhF$solidjs.on(get_search_field_value_, () => {