@depict-ai/ui 4.10.15 → 4.10.17-0

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.15";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.10.17-0";
 function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
   const signal = $52FdA$solidjs.createSignal(false);
   $52FdA$solidjs.onCleanup($52FdA$depictaiutilishared.javascript_media_query(media_query, _ref => {
@@ -2681,9 +2681,18 @@ $52FdA$solidjsweb.delegateEvents(["click"]);
 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;
+  let restoring_focus = false;
   const open_modal_ = $52FdA$depictaiutilishared.catchify(async function () {
     let extra_options_for_modal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     let on_dispose = arguments.length > 1 ? arguments[1] : undefined;
+    if (restoring_focus)
+      // Ignore opens triggered by our own focus restore below (a merchant can open the modal on the trigger's
+      // `focus` event, and without this closing the modal would instantly reopen it, trapping keyboard users).
+      // Only covers handlers that open within the same task as the restore — a handler that opens
+      // asynchronously (debounce, framework effect) can still reopen the modal on close. Inversely, ANY open
+      // in that task is dropped, including a programmatic close_modal_(); open_modal_() sequence when no
+      // closing animation is registered — a focus-handler open is indistinguishable from one here.
+      return;
     // Below await is very intentional,
     // The reason is that effects don't run in <Suspense> boundaries before they've resolved and this carries even through roots created, but if a modal is opened from a suspense boundary we still want the effects in it to run
     // This is because the suspense is for the content in the page and not the modal (the modal goes above it)
@@ -2692,6 +2701,11 @@ async function $4cf7d9829d60d844$export$79b1565500412d9b(search_modal, modal_fn_
     if (await dispose_and_remove)
       // modal is already open
       return;
+    // When the modal is mounted into a shadow root, document.activeElement is the shadow host, not the real
+    // focused element — focus capture/restore (and the pre-existing contains()/blur() below) are best-effort
+    // there and fail closed
+    const opening_active_element = document.activeElement;
+    const element_focused_before_open = opening_active_element instanceof HTMLElement && opening_active_element !== document.body && opening_active_element !== document.documentElement ? opening_active_element : undefined;
     const modal_els = $52FdA$solidjs.createRoot(dispose => {
       let closing_animation;
       let animation_started;
@@ -2702,6 +2716,11 @@ async function $4cf7d9829d60d844$export$79b1565500412d9b(search_modal, modal_fn_
           const {
             activeElement: activeElement
           } = document;
+          // Don't steal focus if the user has already focused something outside the modal by the time it closes
+          // (for example when the modal closes due to navigating away while they're typing elsewhere).
+          // !dispose_and_remove: if the modal was reopened during our closing animation, don't steal focus from
+          // the new instance — its input focuses asynchronously, so activeElement can still be body here
+          const should_restore_focus = (!activeElement || activeElement === document.body || activeElement === document.documentElement || modal_els.some(el => el.contains(activeElement))) && !dispose_and_remove;
           modal_els.forEach(el => {
             if (el.contains(activeElement)) {
               var _blur, _ref;
@@ -2710,6 +2729,18 @@ async function $4cf7d9829d60d844$export$79b1565500412d9b(search_modal, modal_fn_
             }
             el.remove();
           });
+          if (should_restore_focus && element_focused_before_open !== null && element_focused_before_open !== void 0 && element_focused_before_open.isConnected) {
+            restoring_focus = true;
+            try {
+              // preventScroll so this can't re-introduce the safari page-jump the blur() above works around
+              element_focused_before_open.focus({
+                preventScroll: true
+              });
+            } finally {
+              // Cleared on a task instead of synchronously in case a browser delivers the focus event async
+              setTimeout(() => restoring_focus = false, 0);
+            }
+          }
         };
         if (animation_started && +new Date() - animation_started > 1000)
           // Animation broke, close it this time
@@ -10259,6 +10290,9 @@ const $82d079b68975fbf7$export$b05c0ae390cf3e06 = _ref => {
       get src_() {
         var _variant$image_urls2;
         return ((_variant$image_urls2 = variant.image_urls) === null || _variant$image_urls2 === void 0 ? void 0 : _variant$image_urls2[0]) || variant.image_url || variant.display_image_url;
+      },
+      get alt_() {
+        return variant.title;
       }
     }), _el$7, _co$);
     $52FdA$solidjsweb.insert(_el$5, $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
@@ -10268,7 +10302,8 @@ const $82d079b68975fbf7$export$b05c0ae390cf3e06 = _ref => {
       get children() {
         return $52FdA$solidjsweb.createComponent(InstantCardImageComponent_, {
           src_: secondary_image_url,
-          class_: "secondary"
+          class_: "secondary",
+          alt_: ""
         });
       }
     }), _el$9, _co$2);
@@ -11849,17 +11884,20 @@ function $9035b24c2dbd3f36$var$RawClassicSearchModal(_ref) {
               market_: market_,
               router_: router_,
               set_modal_search_results_: set_modal_search_results_,
-              InstantCardImageComponent_: props => $52FdA$solidjs.createMemo(() => $52FdA$depictaiutilishared.ContainedImage({
-                loading: "lazy",
-                aspect_ratio: 1,
-                alt: "",
-                rendering_options: {},
-                "src": props.src_,
-                srcset_opts: {
-                  set_dataset: false
-                },
-                sizes: "0px"
-              })),
+              InstantCardImageComponent_: props => $52FdA$solidjs.createMemo(() => {
+                var _props$alt_;
+                return $52FdA$depictaiutilishared.ContainedImage({
+                  loading: "lazy",
+                  aspect_ratio: 1,
+                  alt: (_props$alt_ = props.alt_) !== null && _props$alt_ !== void 0 ? _props$alt_ : "",
+                  rendering_options: {},
+                  "src": props.src_,
+                  srcset_opts: {
+                    set_dataset: false
+                  },
+                  sizes: "0px"
+                });
+              }),
               ...instant_results_options_
             });
           }
@@ -12741,8 +12779,11 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
               get ["class"]() {
                 return props.class_;
               },
-              imgProps: {
-                alt: "Product image"
+              get imgProps() {
+                var _props$alt_;
+                return {
+                  alt: (_props$alt_ = props.alt_) !== null && _props$alt_ !== void 0 ? _props$alt_ : ""
+                };
               },
               imageResizer_: imageResizer_
             }),

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.15";
+export const version = "4.10.17-0";
 /**
  * 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.15";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.10.17-0";
 function $00a5b94f0c11efbb$export$d9f36cf74e24d595(media_query) {
   const signal = $8tj43$createSignal(false);
   $8tj43$onCleanup($8tj43$javascript_media_query(media_query, _ref => {
@@ -2576,9 +2576,18 @@ $8tj43$delegateEvents(["click"]);
 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;
+  let restoring_focus = false;
   const open_modal_ = $8tj43$catchify1(async function () {
     let extra_options_for_modal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     let on_dispose = arguments.length > 1 ? arguments[1] : undefined;
+    if (restoring_focus)
+      // Ignore opens triggered by our own focus restore below (a merchant can open the modal on the trigger's
+      // `focus` event, and without this closing the modal would instantly reopen it, trapping keyboard users).
+      // Only covers handlers that open within the same task as the restore — a handler that opens
+      // asynchronously (debounce, framework effect) can still reopen the modal on close. Inversely, ANY open
+      // in that task is dropped, including a programmatic close_modal_(); open_modal_() sequence when no
+      // closing animation is registered — a focus-handler open is indistinguishable from one here.
+      return;
     // Below await is very intentional,
     // The reason is that effects don't run in <Suspense> boundaries before they've resolved and this carries even through roots created, but if a modal is opened from a suspense boundary we still want the effects in it to run
     // This is because the suspense is for the content in the page and not the modal (the modal goes above it)
@@ -2587,6 +2596,11 @@ async function $d5f1e6a0f9117286$export$79b1565500412d9b(search_modal, modal_fn_
     if (await dispose_and_remove)
       // modal is already open
       return;
+    // When the modal is mounted into a shadow root, document.activeElement is the shadow host, not the real
+    // focused element — focus capture/restore (and the pre-existing contains()/blur() below) are best-effort
+    // there and fail closed
+    const opening_active_element = document.activeElement;
+    const element_focused_before_open = opening_active_element instanceof HTMLElement && opening_active_element !== document.body && opening_active_element !== document.documentElement ? opening_active_element : undefined;
     const modal_els = $8tj43$createRoot(dispose => {
       let closing_animation;
       let animation_started;
@@ -2597,6 +2611,11 @@ async function $d5f1e6a0f9117286$export$79b1565500412d9b(search_modal, modal_fn_
           const {
             activeElement: activeElement
           } = document;
+          // Don't steal focus if the user has already focused something outside the modal by the time it closes
+          // (for example when the modal closes due to navigating away while they're typing elsewhere).
+          // !dispose_and_remove: if the modal was reopened during our closing animation, don't steal focus from
+          // the new instance — its input focuses asynchronously, so activeElement can still be body here
+          const should_restore_focus = (!activeElement || activeElement === document.body || activeElement === document.documentElement || modal_els.some(el => el.contains(activeElement))) && !dispose_and_remove;
           modal_els.forEach(el => {
             if (el.contains(activeElement)) {
               var _blur, _ref;
@@ -2605,6 +2624,18 @@ async function $d5f1e6a0f9117286$export$79b1565500412d9b(search_modal, modal_fn_
             }
             el.remove();
           });
+          if (should_restore_focus && element_focused_before_open !== null && element_focused_before_open !== void 0 && element_focused_before_open.isConnected) {
+            restoring_focus = true;
+            try {
+              // preventScroll so this can't re-introduce the safari page-jump the blur() above works around
+              element_focused_before_open.focus({
+                preventScroll: true
+              });
+            } finally {
+              // Cleared on a task instead of synchronously in case a browser delivers the focus event async
+              setTimeout(() => restoring_focus = false, 0);
+            }
+          }
         };
         if (animation_started && +new Date() - animation_started > 1000)
           // Animation broke, close it this time
@@ -10154,6 +10185,9 @@ const $9a693c7e832d3f18$export$b05c0ae390cf3e06 = _ref => {
       get src_() {
         var _variant$image_urls2;
         return ((_variant$image_urls2 = variant.image_urls) === null || _variant$image_urls2 === void 0 ? void 0 : _variant$image_urls2[0]) || variant.image_url || variant.display_image_url;
+      },
+      get alt_() {
+        return variant.title;
       }
     }), _el$7, _co$);
     $8tj43$insert(_el$5, $8tj43$createComponent((0, $8tj43$Show), {
@@ -10163,7 +10197,8 @@ const $9a693c7e832d3f18$export$b05c0ae390cf3e06 = _ref => {
       get children() {
         return $8tj43$createComponent(InstantCardImageComponent_, {
           src_: secondary_image_url,
-          class_: "secondary"
+          class_: "secondary",
+          alt_: ""
         });
       }
     }), _el$9, _co$2);
@@ -11744,17 +11779,20 @@ function $40411f2ec772c376$var$RawClassicSearchModal(_ref) {
               market_: market_,
               router_: router_,
               set_modal_search_results_: set_modal_search_results_,
-              InstantCardImageComponent_: props => $8tj43$createMemo(() => $8tj43$ContainedImage({
-                loading: "lazy",
-                aspect_ratio: 1,
-                alt: "",
-                rendering_options: {},
-                "src": props.src_,
-                srcset_opts: {
-                  set_dataset: false
-                },
-                sizes: "0px"
-              })),
+              InstantCardImageComponent_: props => $8tj43$createMemo(() => {
+                var _props$alt_;
+                return $8tj43$ContainedImage({
+                  loading: "lazy",
+                  aspect_ratio: 1,
+                  alt: (_props$alt_ = props.alt_) !== null && _props$alt_ !== void 0 ? _props$alt_ : "",
+                  rendering_options: {},
+                  "src": props.src_,
+                  srcset_opts: {
+                    set_dataset: false
+                  },
+                  sizes: "0px"
+                });
+              }),
               ...instant_results_options_
             });
           }
@@ -12636,8 +12674,11 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
               get ["class"]() {
                 return props.class_;
               },
-              imgProps: {
-                alt: "Product image"
+              get imgProps() {
+                var _props$alt_;
+                return {
+                  alt: (_props$alt_ = props.alt_) !== null && _props$alt_ !== void 0 ? _props$alt_ : ""
+                };
               },
               imageResizer_: imageResizer_
             }),

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.15";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.10.17-0";
 function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
   const signal = $gVhhF$solidjs.createSignal(false);
   $gVhhF$solidjs.onCleanup($gVhhF$depictaiutilishared.javascript_media_query(media_query, ({
@@ -2567,7 +2567,16 @@ $gVhhF$solidjsweb.delegateEvents(["click"]);
 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;
+  let restoring_focus = false;
   const open_modal_ = $gVhhF$depictaiutilishared.catchify(async (extra_options_for_modal = {}, on_dispose) => {
+    if (restoring_focus)
+      // Ignore opens triggered by our own focus restore below (a merchant can open the modal on the trigger's
+      // `focus` event, and without this closing the modal would instantly reopen it, trapping keyboard users).
+      // Only covers handlers that open within the same task as the restore — a handler that opens
+      // asynchronously (debounce, framework effect) can still reopen the modal on close. Inversely, ANY open
+      // in that task is dropped, including a programmatic close_modal_(); open_modal_() sequence when no
+      // closing animation is registered — a focus-handler open is indistinguishable from one here.
+      return;
     // Below await is very intentional,
     // The reason is that effects don't run in <Suspense> boundaries before they've resolved and this carries even through roots created, but if a modal is opened from a suspense boundary we still want the effects in it to run
     // This is because the suspense is for the content in the page and not the modal (the modal goes above it)
@@ -2576,6 +2585,11 @@ async function $9abb0a35d4b60ed3$export$79b1565500412d9b(search_modal, modal_fn_
     if (await dispose_and_remove)
       // modal is already open
       return;
+    // When the modal is mounted into a shadow root, document.activeElement is the shadow host, not the real
+    // focused element — focus capture/restore (and the pre-existing contains()/blur() below) are best-effort
+    // there and fail closed
+    const opening_active_element = document.activeElement;
+    const element_focused_before_open = opening_active_element instanceof HTMLElement && opening_active_element !== document.body && opening_active_element !== document.documentElement ? opening_active_element : undefined;
     const modal_els = $gVhhF$solidjs.createRoot(dispose => {
       let closing_animation;
       let animation_started;
@@ -2586,12 +2600,29 @@ async function $9abb0a35d4b60ed3$export$79b1565500412d9b(search_modal, modal_fn_
           const {
             activeElement: activeElement
           } = document;
+          // Don't steal focus if the user has already focused something outside the modal by the time it closes
+          // (for example when the modal closes due to navigating away while they're typing elsewhere).
+          // !dispose_and_remove: if the modal was reopened during our closing animation, don't steal focus from
+          // the new instance — its input focuses asynchronously, so activeElement can still be body here
+          const should_restore_focus = (!activeElement || activeElement === document.body || activeElement === document.documentElement || modal_els.some(el => el.contains(activeElement))) && !dispose_and_remove;
           modal_els.forEach(el => {
             if (el.contains(activeElement))
               // Fix page jumping to the bottom when closing modal with scape after animation in safari
               activeElement?.blur?.();
             el.remove();
           });
+          if (should_restore_focus && element_focused_before_open?.isConnected) {
+            restoring_focus = true;
+            try {
+              // preventScroll so this can't re-introduce the safari page-jump the blur() above works around
+              element_focused_before_open.focus({
+                preventScroll: true
+              });
+            } finally {
+              // Cleared on a task instead of synchronously in case a browser delivers the focus event async
+              setTimeout(() => restoring_focus = false, 0);
+            }
+          }
         };
         if (animation_started && +new Date() - animation_started > 1000)
           // Animation broke, close it this time
@@ -9697,6 +9728,9 @@ const $6ae613870d3380fc$export$b05c0ae390cf3e06 = ({
     $gVhhF$solidjsweb.insert(_el$5, $gVhhF$solidjsweb.createComponent(InstantCardImageComponent_, {
       get src_() {
         return variant.image_urls?.[0] || variant.image_url || variant.display_image_url;
+      },
+      get alt_() {
+        return variant.title;
       }
     }), _el$7, _co$);
     $gVhhF$solidjsweb.insert(_el$5, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
@@ -9706,7 +9740,8 @@ const $6ae613870d3380fc$export$b05c0ae390cf3e06 = ({
       get children() {
         return $gVhhF$solidjsweb.createComponent(InstantCardImageComponent_, {
           src_: secondary_image_url,
-          class_: "secondary"
+          class_: "secondary",
+          alt_: ""
         });
       }
     }), _el$9, _co$2);
@@ -11224,7 +11259,7 @@ function $44f0b2e312a9b710$var$RawClassicSearchModal({
               InstantCardImageComponent_: props => $gVhhF$solidjs.createMemo(() => $gVhhF$depictaiutilishared.ContainedImage({
                 loading: "lazy",
                 aspect_ratio: 1,
-                alt: "",
+                alt: props.alt_ ?? "",
                 rendering_options: {},
                 "src": props.src_,
                 srcset_opts: {
@@ -12078,8 +12113,10 @@ function $11597ae03e703a47$var$RawSearchModalV2({
               get ["class"]() {
                 return props.class_;
               },
-              imgProps: {
-                alt: "Product image"
+              get imgProps() {
+                return {
+                  alt: props.alt_ ?? ""
+                };
               },
               imageResizer_: imageResizer_
             }),

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.15";
+export const version = "4.10.17-0";
 /**
  * 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.15";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.17-0";
 function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   const signal = $9HbP8$createSignal(false);
   $9HbP8$onCleanup($9HbP8$javascript_media_query(media_query, ({
@@ -2465,7 +2465,16 @@ $9HbP8$delegateEvents(["click"]);
 async function $194bd6b8e4c59830$export$79b1565500412d9b(search_modal, modal_fn_opts, parent) {
   const body = parent || document.body || (await (0, $9HbP8$observer).wait_for_element("body"));
   let dispose_and_remove;
+  let restoring_focus = false;
   const open_modal_ = $9HbP8$catchify1(async (extra_options_for_modal = {}, on_dispose) => {
+    if (restoring_focus)
+      // Ignore opens triggered by our own focus restore below (a merchant can open the modal on the trigger's
+      // `focus` event, and without this closing the modal would instantly reopen it, trapping keyboard users).
+      // Only covers handlers that open within the same task as the restore — a handler that opens
+      // asynchronously (debounce, framework effect) can still reopen the modal on close. Inversely, ANY open
+      // in that task is dropped, including a programmatic close_modal_(); open_modal_() sequence when no
+      // closing animation is registered — a focus-handler open is indistinguishable from one here.
+      return;
     // Below await is very intentional,
     // The reason is that effects don't run in <Suspense> boundaries before they've resolved and this carries even through roots created, but if a modal is opened from a suspense boundary we still want the effects in it to run
     // This is because the suspense is for the content in the page and not the modal (the modal goes above it)
@@ -2474,6 +2483,11 @@ async function $194bd6b8e4c59830$export$79b1565500412d9b(search_modal, modal_fn_
     if (await dispose_and_remove)
       // modal is already open
       return;
+    // When the modal is mounted into a shadow root, document.activeElement is the shadow host, not the real
+    // focused element — focus capture/restore (and the pre-existing contains()/blur() below) are best-effort
+    // there and fail closed
+    const opening_active_element = document.activeElement;
+    const element_focused_before_open = opening_active_element instanceof HTMLElement && opening_active_element !== document.body && opening_active_element !== document.documentElement ? opening_active_element : undefined;
     const modal_els = $9HbP8$createRoot(dispose => {
       let closing_animation;
       let animation_started;
@@ -2484,12 +2498,29 @@ async function $194bd6b8e4c59830$export$79b1565500412d9b(search_modal, modal_fn_
           const {
             activeElement: activeElement
           } = document;
+          // Don't steal focus if the user has already focused something outside the modal by the time it closes
+          // (for example when the modal closes due to navigating away while they're typing elsewhere).
+          // !dispose_and_remove: if the modal was reopened during our closing animation, don't steal focus from
+          // the new instance — its input focuses asynchronously, so activeElement can still be body here
+          const should_restore_focus = (!activeElement || activeElement === document.body || activeElement === document.documentElement || modal_els.some(el => el.contains(activeElement))) && !dispose_and_remove;
           modal_els.forEach(el => {
             if (el.contains(activeElement))
               // Fix page jumping to the bottom when closing modal with scape after animation in safari
               activeElement?.blur?.();
             el.remove();
           });
+          if (should_restore_focus && element_focused_before_open?.isConnected) {
+            restoring_focus = true;
+            try {
+              // preventScroll so this can't re-introduce the safari page-jump the blur() above works around
+              element_focused_before_open.focus({
+                preventScroll: true
+              });
+            } finally {
+              // Cleared on a task instead of synchronously in case a browser delivers the focus event async
+              setTimeout(() => restoring_focus = false, 0);
+            }
+          }
         };
         if (animation_started && +new Date() - animation_started > 1000)
           // Animation broke, close it this time
@@ -9595,6 +9626,9 @@ const $e003be2a50d9e5bc$export$b05c0ae390cf3e06 = ({
     $9HbP8$insert(_el$5, $9HbP8$createComponent(InstantCardImageComponent_, {
       get src_() {
         return variant.image_urls?.[0] || variant.image_url || variant.display_image_url;
+      },
+      get alt_() {
+        return variant.title;
       }
     }), _el$7, _co$);
     $9HbP8$insert(_el$5, $9HbP8$createComponent((0, $9HbP8$Show), {
@@ -9604,7 +9638,8 @@ const $e003be2a50d9e5bc$export$b05c0ae390cf3e06 = ({
       get children() {
         return $9HbP8$createComponent(InstantCardImageComponent_, {
           src_: secondary_image_url,
-          class_: "secondary"
+          class_: "secondary",
+          alt_: ""
         });
       }
     }), _el$9, _co$2);
@@ -11122,7 +11157,7 @@ function $42912431795f188e$var$RawClassicSearchModal({
               InstantCardImageComponent_: props => $9HbP8$createMemo(() => $9HbP8$ContainedImage({
                 loading: "lazy",
                 aspect_ratio: 1,
-                alt: "",
+                alt: props.alt_ ?? "",
                 rendering_options: {},
                 "src": props.src_,
                 srcset_opts: {
@@ -11976,8 +12011,10 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
               get ["class"]() {
                 return props.class_;
               },
-              imgProps: {
-                alt: "Product image"
+              get imgProps() {
+                return {
+                  alt: props.alt_ ?? ""
+                };
               },
               imageResizer_: imageResizer_
             }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.10.15",
+  "version": "4.10.17-0",
   "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,14 +234,15 @@
   },
   "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.7",
-    "@depict-ai/types": "^5.6.5",
-    "@depict-ai/utilishared": "^2.6.5",
+    "@depict-ai/plp-styling": "^4.6.9-0",
+    "@depict-ai/types": "^5.6.7-0",
+    "@depict-ai/utilishared": "^2.6.7-0",
     "solid-js": "^1.9.10"
   },
   "type": "module",
+  "stableVersion": "4.10.16",
   "types": "ES10/index.d.ts",
   "main": "ES10/index.cjs",
   "module": "ES10/index.js"

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.15";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.10.17-0";
 function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
   const signal = $3hooq$solidjs.createSignal(false);
   $3hooq$solidjs.onCleanup($3hooq$depictaiutilishared.javascript_media_query(media_query, _ref => {
@@ -2221,9 +2221,18 @@ function $c5842bdb10e57229$export$fecbb157621501bd(_ref) {
 async function $4cf7d9829d60d844$export$79b1565500412d9b(search_modal, modal_fn_opts, parent) {
   const body = parent || document.body || (await (0, $3hooq$depictaiutilishared.observer).wait_for_element("body"));
   let dispose_and_remove;
+  let restoring_focus = false;
   const open_modal_ = $3hooq$depictaiutilishared.catchify(async function () {
     let extra_options_for_modal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     let on_dispose = arguments.length > 1 ? arguments[1] : undefined;
+    if (restoring_focus)
+      // Ignore opens triggered by our own focus restore below (a merchant can open the modal on the trigger's
+      // `focus` event, and without this closing the modal would instantly reopen it, trapping keyboard users).
+      // Only covers handlers that open within the same task as the restore — a handler that opens
+      // asynchronously (debounce, framework effect) can still reopen the modal on close. Inversely, ANY open
+      // in that task is dropped, including a programmatic close_modal_(); open_modal_() sequence when no
+      // closing animation is registered — a focus-handler open is indistinguishable from one here.
+      return;
     // Below await is very intentional,
     // The reason is that effects don't run in <Suspense> boundaries before they've resolved and this carries even through roots created, but if a modal is opened from a suspense boundary we still want the effects in it to run
     // This is because the suspense is for the content in the page and not the modal (the modal goes above it)
@@ -2232,6 +2241,11 @@ async function $4cf7d9829d60d844$export$79b1565500412d9b(search_modal, modal_fn_
     if (await dispose_and_remove)
       // modal is already open
       return;
+    // When the modal is mounted into a shadow root, document.activeElement is the shadow host, not the real
+    // focused element — focus capture/restore (and the pre-existing contains()/blur() below) are best-effort
+    // there and fail closed
+    const opening_active_element = document.activeElement;
+    const element_focused_before_open = opening_active_element instanceof HTMLElement && opening_active_element !== document.body && opening_active_element !== document.documentElement ? opening_active_element : undefined;
     const modal_els = $3hooq$solidjs.createRoot(dispose => {
       let closing_animation;
       let animation_started;
@@ -2242,6 +2256,11 @@ async function $4cf7d9829d60d844$export$79b1565500412d9b(search_modal, modal_fn_
           const {
             activeElement: activeElement
           } = document;
+          // Don't steal focus if the user has already focused something outside the modal by the time it closes
+          // (for example when the modal closes due to navigating away while they're typing elsewhere).
+          // !dispose_and_remove: if the modal was reopened during our closing animation, don't steal focus from
+          // the new instance — its input focuses asynchronously, so activeElement can still be body here
+          const should_restore_focus = (!activeElement || activeElement === document.body || activeElement === document.documentElement || modal_els.some(el => el.contains(activeElement))) && !dispose_and_remove;
           modal_els.forEach(el => {
             if (el.contains(activeElement)) {
               var _blur, _ref;
@@ -2250,6 +2269,18 @@ async function $4cf7d9829d60d844$export$79b1565500412d9b(search_modal, modal_fn_
             }
             el.remove();
           });
+          if (should_restore_focus && element_focused_before_open !== null && element_focused_before_open !== void 0 && element_focused_before_open.isConnected) {
+            restoring_focus = true;
+            try {
+              // preventScroll so this can't re-introduce the safari page-jump the blur() above works around
+              element_focused_before_open.focus({
+                preventScroll: true
+              });
+            } finally {
+              // Cleared on a task instead of synchronously in case a browser delivers the focus event async
+              setTimeout(() => restoring_focus = false, 0);
+            }
+          }
         };
         if (animation_started && +new Date() - animation_started > 1000)
           // Animation broke, close it this time
@@ -8469,6 +8500,9 @@ const $82d079b68975fbf7$export$b05c0ae390cf3e06 = _ref => {
     get src_() {
       var _variant$image_urls2;
       return ((_variant$image_urls2 = variant.image_urls) === null || _variant$image_urls2 === void 0 ? void 0 : _variant$image_urls2[0]) || variant.image_url || variant.display_image_url;
+    },
+    get alt_() {
+      return variant.title;
     }
   })), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
     get when() {
@@ -8477,7 +8511,8 @@ const $82d079b68975fbf7$export$b05c0ae390cf3e06 = _ref => {
     get children() {
       return $3hooq$solidjsweb.createComponent(InstantCardImageComponent_, {
         src_: secondary_image_url,
-        class_: "secondary"
+        class_: "secondary",
+        alt_: ""
       });
     }
   })), selected_index_ ? $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(TitleBrandTagline, {})) : $3hooq$solidjsweb.ssr($82d079b68975fbf7$var$_tmpl$7, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(TitleBrandTagline, {}))), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
@@ -9645,17 +9680,20 @@ function $9035b24c2dbd3f36$var$RawClassicSearchModal(_ref) {
             market_: market_,
             router_: router_,
             set_modal_search_results_: set_modal_search_results_,
-            InstantCardImageComponent_: props => $3hooq$solidjs.createMemo(() => $3hooq$depictaiutilishared.ContainedImage({
-              loading: "lazy",
-              aspect_ratio: 1,
-              alt: "",
-              rendering_options: {},
-              "src": props.src_,
-              srcset_opts: {
-                set_dataset: false
-              },
-              sizes: "0px"
-            })),
+            InstantCardImageComponent_: props => $3hooq$solidjs.createMemo(() => {
+              var _props$alt_;
+              return $3hooq$depictaiutilishared.ContainedImage({
+                loading: "lazy",
+                aspect_ratio: 1,
+                alt: (_props$alt_ = props.alt_) !== null && _props$alt_ !== void 0 ? _props$alt_ : "",
+                rendering_options: {},
+                "src": props.src_,
+                srcset_opts: {
+                  set_dataset: false
+                },
+                sizes: "0px"
+              });
+            }),
             ...instant_results_options_
           });
         }
@@ -10369,8 +10407,11 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
               get ["class"]() {
                 return props.class_;
               },
-              imgProps: {
-                alt: "Product image"
+              get imgProps() {
+                var _props$alt_;
+                return {
+                  alt: (_props$alt_ = props.alt_) !== null && _props$alt_ !== void 0 ? _props$alt_ : ""
+                };
               },
               imageResizer_: imageResizer_
             }),

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.15";
+export const version = "4.10.17-0";
 /**
  * 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.15";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.10.17-0";
 function $00a5b94f0c11efbb$export$d9f36cf74e24d595(media_query) {
   const signal = $b8hua$createSignal(false);
   $b8hua$onCleanup($b8hua$javascript_media_query(media_query, _ref => {
@@ -2116,9 +2116,18 @@ function $4711a82d08d2021b$export$fecbb157621501bd(_ref) {
 async function $d5f1e6a0f9117286$export$79b1565500412d9b(search_modal, modal_fn_opts, parent) {
   const body = parent || document.body || (await (0, $b8hua$observer).wait_for_element("body"));
   let dispose_and_remove;
+  let restoring_focus = false;
   const open_modal_ = $b8hua$catchify1(async function () {
     let extra_options_for_modal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     let on_dispose = arguments.length > 1 ? arguments[1] : undefined;
+    if (restoring_focus)
+      // Ignore opens triggered by our own focus restore below (a merchant can open the modal on the trigger's
+      // `focus` event, and without this closing the modal would instantly reopen it, trapping keyboard users).
+      // Only covers handlers that open within the same task as the restore — a handler that opens
+      // asynchronously (debounce, framework effect) can still reopen the modal on close. Inversely, ANY open
+      // in that task is dropped, including a programmatic close_modal_(); open_modal_() sequence when no
+      // closing animation is registered — a focus-handler open is indistinguishable from one here.
+      return;
     // Below await is very intentional,
     // The reason is that effects don't run in <Suspense> boundaries before they've resolved and this carries even through roots created, but if a modal is opened from a suspense boundary we still want the effects in it to run
     // This is because the suspense is for the content in the page and not the modal (the modal goes above it)
@@ -2127,6 +2136,11 @@ async function $d5f1e6a0f9117286$export$79b1565500412d9b(search_modal, modal_fn_
     if (await dispose_and_remove)
       // modal is already open
       return;
+    // When the modal is mounted into a shadow root, document.activeElement is the shadow host, not the real
+    // focused element — focus capture/restore (and the pre-existing contains()/blur() below) are best-effort
+    // there and fail closed
+    const opening_active_element = document.activeElement;
+    const element_focused_before_open = opening_active_element instanceof HTMLElement && opening_active_element !== document.body && opening_active_element !== document.documentElement ? opening_active_element : undefined;
     const modal_els = $b8hua$createRoot(dispose => {
       let closing_animation;
       let animation_started;
@@ -2137,6 +2151,11 @@ async function $d5f1e6a0f9117286$export$79b1565500412d9b(search_modal, modal_fn_
           const {
             activeElement: activeElement
           } = document;
+          // Don't steal focus if the user has already focused something outside the modal by the time it closes
+          // (for example when the modal closes due to navigating away while they're typing elsewhere).
+          // !dispose_and_remove: if the modal was reopened during our closing animation, don't steal focus from
+          // the new instance — its input focuses asynchronously, so activeElement can still be body here
+          const should_restore_focus = (!activeElement || activeElement === document.body || activeElement === document.documentElement || modal_els.some(el => el.contains(activeElement))) && !dispose_and_remove;
           modal_els.forEach(el => {
             if (el.contains(activeElement)) {
               var _blur, _ref;
@@ -2145,6 +2164,18 @@ async function $d5f1e6a0f9117286$export$79b1565500412d9b(search_modal, modal_fn_
             }
             el.remove();
           });
+          if (should_restore_focus && element_focused_before_open !== null && element_focused_before_open !== void 0 && element_focused_before_open.isConnected) {
+            restoring_focus = true;
+            try {
+              // preventScroll so this can't re-introduce the safari page-jump the blur() above works around
+              element_focused_before_open.focus({
+                preventScroll: true
+              });
+            } finally {
+              // Cleared on a task instead of synchronously in case a browser delivers the focus event async
+              setTimeout(() => restoring_focus = false, 0);
+            }
+          }
         };
         if (animation_started && +new Date() - animation_started > 1000)
           // Animation broke, close it this time
@@ -8364,6 +8395,9 @@ const $9a693c7e832d3f18$export$b05c0ae390cf3e06 = _ref => {
     get src_() {
       var _variant$image_urls2;
       return ((_variant$image_urls2 = variant.image_urls) === null || _variant$image_urls2 === void 0 ? void 0 : _variant$image_urls2[0]) || variant.image_url || variant.display_image_url;
+    },
+    get alt_() {
+      return variant.title;
     }
   })), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
     get when() {
@@ -8372,7 +8406,8 @@ const $9a693c7e832d3f18$export$b05c0ae390cf3e06 = _ref => {
     get children() {
       return $b8hua$createComponent(InstantCardImageComponent_, {
         src_: secondary_image_url,
-        class_: "secondary"
+        class_: "secondary",
+        alt_: ""
       });
     }
   })), selected_index_ ? $b8hua$escape($b8hua$createComponent(TitleBrandTagline, {})) : $b8hua$ssr($9a693c7e832d3f18$var$_tmpl$7, $b8hua$ssrHydrationKey(), $b8hua$escape($b8hua$createComponent(TitleBrandTagline, {}))), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
@@ -9540,17 +9575,20 @@ function $40411f2ec772c376$var$RawClassicSearchModal(_ref) {
             market_: market_,
             router_: router_,
             set_modal_search_results_: set_modal_search_results_,
-            InstantCardImageComponent_: props => $b8hua$createMemo(() => $b8hua$ContainedImage({
-              loading: "lazy",
-              aspect_ratio: 1,
-              alt: "",
-              rendering_options: {},
-              "src": props.src_,
-              srcset_opts: {
-                set_dataset: false
-              },
-              sizes: "0px"
-            })),
+            InstantCardImageComponent_: props => $b8hua$createMemo(() => {
+              var _props$alt_;
+              return $b8hua$ContainedImage({
+                loading: "lazy",
+                aspect_ratio: 1,
+                alt: (_props$alt_ = props.alt_) !== null && _props$alt_ !== void 0 ? _props$alt_ : "",
+                rendering_options: {},
+                "src": props.src_,
+                srcset_opts: {
+                  set_dataset: false
+                },
+                sizes: "0px"
+              });
+            }),
             ...instant_results_options_
           });
         }
@@ -10264,8 +10302,11 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
               get ["class"]() {
                 return props.class_;
               },
-              imgProps: {
-                alt: "Product image"
+              get imgProps() {
+                var _props$alt_;
+                return {
+                  alt: (_props$alt_ = props.alt_) !== null && _props$alt_ !== void 0 ? _props$alt_ : ""
+                };
               },
               imageResizer_: imageResizer_
             }),

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.15";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.10.17-0";
 function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
   const signal = $5vyXB$solidjs.createSignal(false);
   $5vyXB$solidjs.onCleanup($5vyXB$depictaiutilishared.javascript_media_query(media_query, ({
@@ -2125,7 +2125,16 @@ function $235a2771a44e28e9$export$fecbb157621501bd({
 async function $9abb0a35d4b60ed3$export$79b1565500412d9b(search_modal, modal_fn_opts, parent) {
   const body = parent || document.body || (await (0, $5vyXB$depictaiutilishared.observer).wait_for_element("body"));
   let dispose_and_remove;
+  let restoring_focus = false;
   const open_modal_ = $5vyXB$depictaiutilishared.catchify(async (extra_options_for_modal = {}, on_dispose) => {
+    if (restoring_focus)
+      // Ignore opens triggered by our own focus restore below (a merchant can open the modal on the trigger's
+      // `focus` event, and without this closing the modal would instantly reopen it, trapping keyboard users).
+      // Only covers handlers that open within the same task as the restore — a handler that opens
+      // asynchronously (debounce, framework effect) can still reopen the modal on close. Inversely, ANY open
+      // in that task is dropped, including a programmatic close_modal_(); open_modal_() sequence when no
+      // closing animation is registered — a focus-handler open is indistinguishable from one here.
+      return;
     // Below await is very intentional,
     // The reason is that effects don't run in <Suspense> boundaries before they've resolved and this carries even through roots created, but if a modal is opened from a suspense boundary we still want the effects in it to run
     // This is because the suspense is for the content in the page and not the modal (the modal goes above it)
@@ -2134,6 +2143,11 @@ async function $9abb0a35d4b60ed3$export$79b1565500412d9b(search_modal, modal_fn_
     if (await dispose_and_remove)
       // modal is already open
       return;
+    // When the modal is mounted into a shadow root, document.activeElement is the shadow host, not the real
+    // focused element — focus capture/restore (and the pre-existing contains()/blur() below) are best-effort
+    // there and fail closed
+    const opening_active_element = document.activeElement;
+    const element_focused_before_open = opening_active_element instanceof HTMLElement && opening_active_element !== document.body && opening_active_element !== document.documentElement ? opening_active_element : undefined;
     const modal_els = $5vyXB$solidjs.createRoot(dispose => {
       let closing_animation;
       let animation_started;
@@ -2144,12 +2158,29 @@ async function $9abb0a35d4b60ed3$export$79b1565500412d9b(search_modal, modal_fn_
           const {
             activeElement: activeElement
           } = document;
+          // Don't steal focus if the user has already focused something outside the modal by the time it closes
+          // (for example when the modal closes due to navigating away while they're typing elsewhere).
+          // !dispose_and_remove: if the modal was reopened during our closing animation, don't steal focus from
+          // the new instance — its input focuses asynchronously, so activeElement can still be body here
+          const should_restore_focus = (!activeElement || activeElement === document.body || activeElement === document.documentElement || modal_els.some(el => el.contains(activeElement))) && !dispose_and_remove;
           modal_els.forEach(el => {
             if (el.contains(activeElement))
               // Fix page jumping to the bottom when closing modal with scape after animation in safari
               activeElement?.blur?.();
             el.remove();
           });
+          if (should_restore_focus && element_focused_before_open?.isConnected) {
+            restoring_focus = true;
+            try {
+              // preventScroll so this can't re-introduce the safari page-jump the blur() above works around
+              element_focused_before_open.focus({
+                preventScroll: true
+              });
+            } finally {
+              // Cleared on a task instead of synchronously in case a browser delivers the focus event async
+              setTimeout(() => restoring_focus = false, 0);
+            }
+          }
         };
         if (animation_started && +new Date() - animation_started > 1000)
           // Animation broke, close it this time
@@ -7976,6 +8007,9 @@ const $6ae613870d3380fc$export$b05c0ae390cf3e06 = ({
   return $5vyXB$solidjsweb.ssr($6ae613870d3380fc$var$_tmpl$6, $5vyXB$solidjsweb.ssrHydrationKey(), `instant-card ${isSelected?.() ? "selected" : ""}`, $5vyXB$solidjsweb.ssrAttribute("href", $5vyXB$solidjsweb.escape(href(), true), false) + $5vyXB$solidjsweb.ssrAttribute("data-search-result-id", $5vyXB$solidjsweb.escape(display_.search_result_id, true), false) + $5vyXB$solidjsweb.ssrAttribute("aria-selected", $5vyXB$solidjsweb.escape(isSelected?.(), true), false), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(InstantCardImageComponent_, {
     get src_() {
       return variant.image_urls?.[0] || variant.image_url || variant.display_image_url;
+    },
+    get alt_() {
+      return variant.title;
     }
   })), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
     get when() {
@@ -7984,7 +8018,8 @@ const $6ae613870d3380fc$export$b05c0ae390cf3e06 = ({
     get children() {
       return $5vyXB$solidjsweb.createComponent(InstantCardImageComponent_, {
         src_: secondary_image_url,
-        class_: "secondary"
+        class_: "secondary",
+        alt_: ""
       });
     }
   })), selected_index_ ? $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(TitleBrandTagline, {})) : $5vyXB$solidjsweb.ssr($6ae613870d3380fc$var$_tmpl$7, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(TitleBrandTagline, {}))), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
@@ -9095,7 +9130,7 @@ function $44f0b2e312a9b710$var$RawClassicSearchModal({
             InstantCardImageComponent_: props => $5vyXB$solidjs.createMemo(() => $5vyXB$depictaiutilishared.ContainedImage({
               loading: "lazy",
               aspect_ratio: 1,
-              alt: "",
+              alt: props.alt_ ?? "",
               rendering_options: {},
               "src": props.src_,
               srcset_opts: {
@@ -9782,8 +9817,10 @@ function $11597ae03e703a47$var$RawSearchModalV2({
               get ["class"]() {
                 return props.class_;
               },
-              imgProps: {
-                alt: "Product image"
+              get imgProps() {
+                return {
+                  alt: props.alt_ ?? ""
+                };
               },
               imageResizer_: imageResizer_
             }),

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.15";
+export const version = "4.10.17-0";
 /**
  * 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.15";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.17-0";
 function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   const signal = $i7OB2$createSignal(false);
   $i7OB2$onCleanup($i7OB2$javascript_media_query(media_query, ({
@@ -2023,7 +2023,16 @@ function $1adfe60f3a14a1d7$export$fecbb157621501bd({
 async function $194bd6b8e4c59830$export$79b1565500412d9b(search_modal, modal_fn_opts, parent) {
   const body = parent || document.body || (await (0, $i7OB2$observer).wait_for_element("body"));
   let dispose_and_remove;
+  let restoring_focus = false;
   const open_modal_ = $i7OB2$catchify1(async (extra_options_for_modal = {}, on_dispose) => {
+    if (restoring_focus)
+      // Ignore opens triggered by our own focus restore below (a merchant can open the modal on the trigger's
+      // `focus` event, and without this closing the modal would instantly reopen it, trapping keyboard users).
+      // Only covers handlers that open within the same task as the restore — a handler that opens
+      // asynchronously (debounce, framework effect) can still reopen the modal on close. Inversely, ANY open
+      // in that task is dropped, including a programmatic close_modal_(); open_modal_() sequence when no
+      // closing animation is registered — a focus-handler open is indistinguishable from one here.
+      return;
     // Below await is very intentional,
     // The reason is that effects don't run in <Suspense> boundaries before they've resolved and this carries even through roots created, but if a modal is opened from a suspense boundary we still want the effects in it to run
     // This is because the suspense is for the content in the page and not the modal (the modal goes above it)
@@ -2032,6 +2041,11 @@ async function $194bd6b8e4c59830$export$79b1565500412d9b(search_modal, modal_fn_
     if (await dispose_and_remove)
       // modal is already open
       return;
+    // When the modal is mounted into a shadow root, document.activeElement is the shadow host, not the real
+    // focused element — focus capture/restore (and the pre-existing contains()/blur() below) are best-effort
+    // there and fail closed
+    const opening_active_element = document.activeElement;
+    const element_focused_before_open = opening_active_element instanceof HTMLElement && opening_active_element !== document.body && opening_active_element !== document.documentElement ? opening_active_element : undefined;
     const modal_els = $i7OB2$createRoot(dispose => {
       let closing_animation;
       let animation_started;
@@ -2042,12 +2056,29 @@ async function $194bd6b8e4c59830$export$79b1565500412d9b(search_modal, modal_fn_
           const {
             activeElement: activeElement
           } = document;
+          // Don't steal focus if the user has already focused something outside the modal by the time it closes
+          // (for example when the modal closes due to navigating away while they're typing elsewhere).
+          // !dispose_and_remove: if the modal was reopened during our closing animation, don't steal focus from
+          // the new instance — its input focuses asynchronously, so activeElement can still be body here
+          const should_restore_focus = (!activeElement || activeElement === document.body || activeElement === document.documentElement || modal_els.some(el => el.contains(activeElement))) && !dispose_and_remove;
           modal_els.forEach(el => {
             if (el.contains(activeElement))
               // Fix page jumping to the bottom when closing modal with scape after animation in safari
               activeElement?.blur?.();
             el.remove();
           });
+          if (should_restore_focus && element_focused_before_open?.isConnected) {
+            restoring_focus = true;
+            try {
+              // preventScroll so this can't re-introduce the safari page-jump the blur() above works around
+              element_focused_before_open.focus({
+                preventScroll: true
+              });
+            } finally {
+              // Cleared on a task instead of synchronously in case a browser delivers the focus event async
+              setTimeout(() => restoring_focus = false, 0);
+            }
+          }
         };
         if (animation_started && +new Date() - animation_started > 1000)
           // Animation broke, close it this time
@@ -7874,6 +7905,9 @@ const $e003be2a50d9e5bc$export$b05c0ae390cf3e06 = ({
   return $i7OB2$ssr($e003be2a50d9e5bc$var$_tmpl$6, $i7OB2$ssrHydrationKey(), `instant-card ${isSelected?.() ? "selected" : ""}`, $i7OB2$ssrAttribute("href", $i7OB2$escape(href(), true), false) + $i7OB2$ssrAttribute("data-search-result-id", $i7OB2$escape(display_.search_result_id, true), false) + $i7OB2$ssrAttribute("aria-selected", $i7OB2$escape(isSelected?.(), true), false), $i7OB2$escape($i7OB2$createComponent(InstantCardImageComponent_, {
     get src_() {
       return variant.image_urls?.[0] || variant.image_url || variant.display_image_url;
+    },
+    get alt_() {
+      return variant.title;
     }
   })), $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
     get when() {
@@ -7882,7 +7916,8 @@ const $e003be2a50d9e5bc$export$b05c0ae390cf3e06 = ({
     get children() {
       return $i7OB2$createComponent(InstantCardImageComponent_, {
         src_: secondary_image_url,
-        class_: "secondary"
+        class_: "secondary",
+        alt_: ""
       });
     }
   })), selected_index_ ? $i7OB2$escape($i7OB2$createComponent(TitleBrandTagline, {})) : $i7OB2$ssr($e003be2a50d9e5bc$var$_tmpl$7, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent(TitleBrandTagline, {}))), $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
@@ -8993,7 +9028,7 @@ function $42912431795f188e$var$RawClassicSearchModal({
             InstantCardImageComponent_: props => $i7OB2$createMemo(() => $i7OB2$ContainedImage({
               loading: "lazy",
               aspect_ratio: 1,
-              alt: "",
+              alt: props.alt_ ?? "",
               rendering_options: {},
               "src": props.src_,
               srcset_opts: {
@@ -9680,8 +9715,10 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
               get ["class"]() {
                 return props.class_;
               },
-              imgProps: {
-                alt: "Product image"
+              get imgProps() {
+                return {
+                  alt: props.alt_ ?? ""
+                };
               },
               imageResizer_: imageResizer_
             }),