@depict-ai/ui 4.9.3 → 4.9.5

package/ES10/index.cjs

@@ -3,6 +3,7 @@ var $52FdA$solidjsweb = require("solid-js/web");
 var $52FdA$solidjs = require("solid-js");
 var $52FdA$depictaiutilisharedlatest = require("@depict-ai/utilishared/ES10");
 var $52FdA$solidjsstore = require("solid-js/store");
+var $52FdA$depictaiutilisharedsrc = require("@depict-ai/utilishared/src/ES10");
 var $52FdA$babelruntimehelpersdefineProperty = require("@babel/runtime/helpers/defineProperty");
 var $52FdA$babelruntimehelpersclassPrivateFieldSet = require("@babel/runtime/helpers/classPrivateFieldSet");
 var $52FdA$babelruntimehelpersclassPrivateFieldGet = require("@babel/runtime/helpers/classPrivateFieldGet");
@@ -115,7 +116,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.9.3";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.9.5";
 function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
   const signal = $52FdA$solidjs.createSignal(false);
   $52FdA$solidjs.onCleanup($52FdA$depictaiutilishared.javascript_media_query(media_query, _ref => {
@@ -8016,6 +8017,21 @@ function $f3db423dc84bc35d$export$140423fa4bfb6d63(props) {
     customUrls: $f3db423dc84bc35d$var$customUrls
   }));
 }
+let $8e8c89c02c16dc7b$var$cachedHlsModule;
+async function $8e8c89c02c16dc7b$export$5d2f6cd705125cd3() {
+  if ($8e8c89c02c16dc7b$var$cachedHlsModule) return $8e8c89c02c16dc7b$var$cachedHlsModule;
+  const global_var_name = "_depict_ai_hls_polyfill";
+  const scriptTag = document.createElement("script");
+  scriptTag.type = "module";
+  // Our build systems aren't set-up for dynamic imports, so do this instead
+  scriptTag.append('import("https://cdn.jsdelivr.net/npm/hls.js/+esm").then(m=>window.'.concat(global_var_name, "=m)"));
+  document.head.append(scriptTag);
+  const hlsModule = await $52FdA$depictaiutilisharedsrc.is_available_in(window, global_var_name);
+  delete window[global_var_name];
+  scriptTag.remove();
+  $8e8c89c02c16dc7b$var$cachedHlsModule = hlsModule;
+  return hlsModule;
+}
 var $c19709057a32b2e7$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<video loop class=d-standard-content>`);
 function $c19709057a32b2e7$export$780a853d15174484(_ref) {
   let {
@@ -8087,13 +8103,24 @@ function $c19709057a32b2e7$export$780a853d15174484(_ref) {
             when: type_ === "video",
             get children() {
               var _el$ = $52FdA$solidjsweb.getNextElement($c19709057a32b2e7$var$_tmpl$);
-              $52FdA$solidjsweb.use(element => {
+              var _ref$ = $52FdA$depictaiutilisharedlatest.catchify(async element => {
                 const pageVisible = $e7a7d2fe8a8217d8$export$54299a3c81f5425();
+                const owner = $52FdA$solidjs.getOwner();
                 element.addEventListener("loadedmetadata", $52FdA$depictaiutilisharedlatest.catchify(() => setAspectRatio(element.videoWidth / element.videoHeight)));
-                $52FdA$solidjs.createEffect(() => {
+                // If hls is not supported, dynamically import hls.js as polyfill
+                if (mediaUrl_.includes(".m3u8") && !element.canPlayType("application/vnd.apple.mpegurl")) {
+                  const hlsJs = await $8e8c89c02c16dc7b$export$5d2f6cd705125cd3().catch(e => $52FdA$depictaiutilisharedlatest.report([e, "Failed to load hls.js"], "error"));
+                  if (!hlsJs || !hlsJs.isSupported()) return;
+                  const hls = new hlsJs.default();
+                  hls.loadSource(mediaUrl_);
+                  hls.attachMedia(element);
+                }
+                // need runWithOwner for createEffect, because we potentially awaited above
+                $52FdA$solidjs.runWithOwner(owner, () => $52FdA$solidjs.createEffect(() => {
                   if (pageVisible()) element.play().catch(e => $52FdA$depictaiutilishared.dlog("Failed to play", e));else element.pause();
-                });
-              }, _el$);
+                }));
+              });
+              typeof _ref$ === "function" && $52FdA$solidjsweb.use(_ref$, _el$);
               _el$.addEventListener("playing", () => setHasLoaded(true));
               $52FdA$solidjsweb.setAttribute(_el$, "src", mediaUrl_);
               $52FdA$solidjsweb.setProperty(_el$, "controls", false);
@@ -10090,15 +10117,18 @@ const $82d079b68975fbf7$export$b05c0ae390cf3e06 = _ref => {
     $52FdA$solidjsweb.effect(_p$ => {
       var _v$ = href(),
         _v$2 = display_.search_result_id,
-        _v$3 = !!(isSelected !== null && isSelected !== void 0 && isSelected());
+        _v$3 = !!(isSelected !== null && isSelected !== void 0 && isSelected()),
+        _v$4 = isSelected === null || isSelected === void 0 ? void 0 : isSelected();
       _v$ !== _p$.e && $52FdA$solidjsweb.setAttribute(_el$4, "href", _p$.e = _v$);
       _v$2 !== _p$.t && $52FdA$solidjsweb.setAttribute(_el$4, "data-search-result-id", _p$.t = _v$2);
       _v$3 !== _p$.a && _el$4.classList.toggle("selected", _p$.a = _v$3);
+      _v$4 !== _p$.o && $52FdA$solidjsweb.setAttribute(_el$4, "aria-selected", _p$.o = _v$4);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
-      a: undefined
+      a: undefined,
+      o: undefined
     });
     $52FdA$solidjsweb.runHydrationEvents();
     return _el$4;
@@ -11104,7 +11134,8 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
     BackIcon_: BackIcon_,
     buttonInFieldRef_: buttonInFieldRef_,
     class_: class_,
-    setSearchRoleOnContainer_ = true
+    setSearchRoleOnContainer_ = true,
+    ariaControls: ariaControls
   } = _ref;
   let input_element;
   // This is the div where we recommend (and ourselves do) attach the event listener to that opens the search modal.
@@ -11324,7 +11355,11 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
       },
       get placeholder() {
         return i18n_.placeholder_text_();
-      }
+      },
+      "aria-autocomplete": "list",
+      "aria-haspopup": "dialog"
+    }, ariaControls && {
+      "aria-controls": ariaControls
     }), false, false);
     $52FdA$solidjsweb.insert(_el$5, !isNewModal && $52FdA$solidjsweb.createComponent(ClearButton, {}), _el$10, _co$2);
     $52FdA$solidjsweb.insert(_el$3, isNewModal && $52FdA$solidjsweb.createComponent(BackButton, {}), _el$17, _co$5);
@@ -11373,8 +11408,8 @@ function $4b71b4fabdee5753$export$93d9bfd0c9c1a5b8(close_modal, search_query_url
 }
 var $9035b24c2dbd3f36$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=discover-more><button class=major type=button>`),
   $9035b24c2dbd3f36$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<b>`),
-  $9035b24c2dbd3f36$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=depict-search-modal><div class=body role=search><!$><!/><div class=padded><!$><!/><!$><!/><!$><!/></div><!$><!/></div><!$><!/>`),
-  $9035b24c2dbd3f36$var$_tmpl$4 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class="depict plp search"><div class=depict-search-modal-backdrop></div><!$><!/>`);
+  $9035b24c2dbd3f36$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=depict-search-modal><div class=body role=search aria-label="Search modal with search field, query suggestions and result preview"><!$><!/><div id=depict-suggestions-and-result-preview class=padded><!$><!/><!$><!/><!$><!/></div><!$><!/></div><!$><!/>`),
+  $9035b24c2dbd3f36$var$_tmpl$4 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class="depict plp search"role=dialog><div class=depict-search-modal-backdrop></div><!$><!/>`);
 /**
  * First generation (classic) search modal - the solid component that gets added to <body> when the search modal is opened
  */
@@ -11523,7 +11558,8 @@ function $9035b24c2dbd3f36$var$RawClassicSearchModal(_ref) {
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
     },
-    setSearchRoleOnContainer_: false
+    setSearchRoleOnContainer_: false,
+    ariaControls: "depict-suggestions-and-result-preview"
   });
   const modal_element = (() => {
     var _el$4 = $52FdA$solidjsweb.getNextElement($9035b24c2dbd3f36$var$_tmpl$3),
@@ -11779,7 +11815,16 @@ function $d1e7b96fb13cd1d3$export$67152d26d4f56ee8(_ref) {
         });
       }
     }));
-    $52FdA$solidjsweb.effect(() => _el$2.classList.toggle("selected", !!isSelected()));
+    $52FdA$solidjsweb.effect(_p$ => {
+      var _v$ = !!isSelected(),
+        _v$2 = isSelected();
+      _v$ !== _p$.e && _el$2.classList.toggle("selected", _p$.e = _v$);
+      _v$2 !== _p$.t && $52FdA$solidjsweb.setAttribute(_el$2, "aria-selected", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     $52FdA$solidjsweb.runHydrationEvents();
     return _el$2;
   })();
@@ -12013,16 +12058,19 @@ function $79a8fa74cb5cdfb9$export$d4994a86c6235f72(_ref) {
                 }));
                 $52FdA$solidjsweb.effect(_p$ => {
                   var _v$ = !!isSelected(),
-                    _v$2 = href(),
-                    _v$3 = wholeTextToDisplay();
+                    _v$2 = isSelected(),
+                    _v$3 = href(),
+                    _v$4 = wholeTextToDisplay();
                   _v$ !== _p$.e && _el$7.classList.toggle("selected", _p$.e = _v$);
-                  _v$2 !== _p$.t && $52FdA$solidjsweb.setAttribute(_el$7, "href", _p$.t = _v$2);
-                  _v$3 !== _p$.a && $52FdA$solidjsweb.setAttribute(_el$7, "aria-label", _p$.a = _v$3);
+                  _v$2 !== _p$.t && $52FdA$solidjsweb.setAttribute(_el$7, "aria-selected", _p$.t = _v$2);
+                  _v$3 !== _p$.a && $52FdA$solidjsweb.setAttribute(_el$7, "href", _p$.a = _v$3);
+                  _v$4 !== _p$.o && $52FdA$solidjsweb.setAttribute(_el$7, "aria-label", _p$.o = _v$4);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined,
-                  a: undefined
+                  a: undefined,
+                  o: undefined
                 });
                 return _el$7;
               })();
@@ -12214,7 +12262,7 @@ var $43600b30502feeda$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div
   $43600b30502feeda$var$_tmpl$4 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=discover-more><button class=major type=button>`),
   $43600b30502feeda$var$_tmpl$5 = /*#__PURE__*/$52FdA$solidjsweb.template(`<b>`),
   $43600b30502feeda$var$_tmpl$6 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=depict-search-modal-backdrop>`),
-  $43600b30502feeda$var$_tmpl$7 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=depict-search-modal><div class=body role=search><!$><!/><div class=padded></div></div><!$><!/>`),
+  $43600b30502feeda$var$_tmpl$7 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=depict-search-modal><div class=body role=search aria-label="Search modal with search field, query suggestions and result preview"><!$><!/><div id=depict-suggestions-and-result-preview class=padded></div></div><!$><!/>`),
   $43600b30502feeda$var$_tmpl$8 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=left>`),
   $43600b30502feeda$var$_tmpl$9 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=right>`);
 /**
@@ -12573,7 +12621,8 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
     },
-    setSearchRoleOnContainer_: false
+    setSearchRoleOnContainer_: false,
+    ariaControls: "depict-suggestions-and-result-preview"
   });
   if (setSearchFieldOuterWidth_) {
     const resizeObserver = new ResizeObserver($52FdA$depictaiutilishared.catchify(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));

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

package/ES10/index.js

@@ -3,6 +3,7 @@ import { template as $8tj43$template, createComponent as $8tj43$createComponent,
 import { createContext as $8tj43$createContext, createSignal as $8tj43$createSignal, getOwner as $8tj43$getOwner, createResource as $8tj43$createResource, untrack as $8tj43$untrack, createRoot as $8tj43$createRoot, createEffect as $8tj43$createEffect, runWithOwner as $8tj43$runWithOwner, onCleanup as $8tj43$onCleanup, createMemo as $8tj43$createMemo, Show as $8tj43$Show, createComputed as $8tj43$createComputed, createRenderEffect as $8tj43$createRenderEffect, mergeProps as $8tj43$mergeProps, useContext as $8tj43$useContext, createReaction as $8tj43$createReaction, on as $8tj43$on, Suspense as $8tj43$Suspense, ErrorBoundary as $8tj43$ErrorBoundary, Index as $8tj43$Index, For as $8tj43$For, createUniqueId as $8tj43$createUniqueId, mapArray as $8tj43$mapArray, batch as $8tj43$batch, Switch as $8tj43$Switch, Match as $8tj43$Match, splitProps as $8tj43$splitProps, createComponent as $8tj43$createComponent1, createSelector as $8tj43$createSelector, children as $8tj43$children } from "solid-js";
 import { catchify as $8tj43$catchify, report as $8tj43$report, use_href_accessor as $8tj43$use_href_accessor, dlog as $8tj43$dlog1, ListenableSet as $8tj43$ListenableSet, queueMacroTask as $8tj43$queueMacroTask1 } from "@depict-ai/utilishared/ES10";
 import { createStore as $8tj43$createStore, reconcile as $8tj43$reconcile } from "solid-js/store";
+import { is_available_in as $8tj43$is_available_in } from "@depict-ai/utilishared/src/ES10";
 import $8tj43$babelruntimehelpersdefineProperty from "@babel/runtime/helpers/defineProperty";
 import $8tj43$babelruntimehelpersclassPrivateFieldSet from "@babel/runtime/helpers/classPrivateFieldSet";
 import $8tj43$babelruntimehelpersclassPrivateFieldGet from "@babel/runtime/helpers/classPrivateFieldGet";
@@ -10,7 +11,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.9.3";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.9.5";
 function $00a5b94f0c11efbb$export$d9f36cf74e24d595(media_query) {
   const signal = $8tj43$createSignal(false);
   $8tj43$onCleanup($8tj43$javascript_media_query(media_query, _ref => {
@@ -7911,6 +7912,21 @@ function $98688279b9059f50$export$140423fa4bfb6d63(props) {
     customUrls: $98688279b9059f50$var$customUrls
   }));
 }
+let $e92c154db502596d$var$cachedHlsModule;
+async function $e92c154db502596d$export$5d2f6cd705125cd3() {
+  if ($e92c154db502596d$var$cachedHlsModule) return $e92c154db502596d$var$cachedHlsModule;
+  const global_var_name = "_depict_ai_hls_polyfill";
+  const scriptTag = document.createElement("script");
+  scriptTag.type = "module";
+  // Our build systems aren't set-up for dynamic imports, so do this instead
+  scriptTag.append('import("https://cdn.jsdelivr.net/npm/hls.js/+esm").then(m=>window.'.concat(global_var_name, "=m)"));
+  document.head.append(scriptTag);
+  const hlsModule = await $8tj43$is_available_in(window, global_var_name);
+  delete window[global_var_name];
+  scriptTag.remove();
+  $e92c154db502596d$var$cachedHlsModule = hlsModule;
+  return hlsModule;
+}
 var $3b772ef9a35560fe$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<video loop class=d-standard-content>`);
 function $3b772ef9a35560fe$export$780a853d15174484(_ref) {
   let {
@@ -7982,13 +7998,24 @@ function $3b772ef9a35560fe$export$780a853d15174484(_ref) {
             when: type_ === "video",
             get children() {
               var _el$ = $8tj43$getNextElement($3b772ef9a35560fe$var$_tmpl$);
-              $8tj43$use(element => {
+              var _ref$ = $8tj43$catchify(async element => {
                 const pageVisible = $a35e6f680c5bbc60$export$54299a3c81f5425();
+                const owner = $8tj43$getOwner();
                 element.addEventListener("loadedmetadata", $8tj43$catchify(() => setAspectRatio(element.videoWidth / element.videoHeight)));
-                $8tj43$createEffect(() => {
+                // If hls is not supported, dynamically import hls.js as polyfill
+                if (mediaUrl_.includes(".m3u8") && !element.canPlayType("application/vnd.apple.mpegurl")) {
+                  const hlsJs = await $e92c154db502596d$export$5d2f6cd705125cd3().catch(e => $8tj43$report([e, "Failed to load hls.js"], "error"));
+                  if (!hlsJs || !hlsJs.isSupported()) return;
+                  const hls = new hlsJs.default();
+                  hls.loadSource(mediaUrl_);
+                  hls.attachMedia(element);
+                }
+                // need runWithOwner for createEffect, because we potentially awaited above
+                $8tj43$runWithOwner(owner, () => $8tj43$createEffect(() => {
                   if (pageVisible()) element.play().catch(e => $8tj43$dlog("Failed to play", e));else element.pause();
-                });
-              }, _el$);
+                }));
+              });
+              typeof _ref$ === "function" && $8tj43$use(_ref$, _el$);
               _el$.addEventListener("playing", () => setHasLoaded(true));
               $8tj43$setAttribute(_el$, "src", mediaUrl_);
               $8tj43$setProperty(_el$, "controls", false);
@@ -9985,15 +10012,18 @@ const $9a693c7e832d3f18$export$b05c0ae390cf3e06 = _ref => {
     $8tj43$effect(_p$ => {
       var _v$ = href(),
         _v$2 = display_.search_result_id,
-        _v$3 = !!(isSelected !== null && isSelected !== void 0 && isSelected());
+        _v$3 = !!(isSelected !== null && isSelected !== void 0 && isSelected()),
+        _v$4 = isSelected === null || isSelected === void 0 ? void 0 : isSelected();
       _v$ !== _p$.e && $8tj43$setAttribute(_el$4, "href", _p$.e = _v$);
       _v$2 !== _p$.t && $8tj43$setAttribute(_el$4, "data-search-result-id", _p$.t = _v$2);
       _v$3 !== _p$.a && _el$4.classList.toggle("selected", _p$.a = _v$3);
+      _v$4 !== _p$.o && $8tj43$setAttribute(_el$4, "aria-selected", _p$.o = _v$4);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
-      a: undefined
+      a: undefined,
+      o: undefined
     });
     $8tj43$runHydrationEvents();
     return _el$4;
@@ -10999,7 +11029,8 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
     BackIcon_: BackIcon_,
     buttonInFieldRef_: buttonInFieldRef_,
     class_: class_,
-    setSearchRoleOnContainer_ = true
+    setSearchRoleOnContainer_ = true,
+    ariaControls: ariaControls
   } = _ref;
   let input_element;
   // This is the div where we recommend (and ourselves do) attach the event listener to that opens the search modal.
@@ -11219,7 +11250,11 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
       },
       get placeholder() {
         return i18n_.placeholder_text_();
-      }
+      },
+      "aria-autocomplete": "list",
+      "aria-haspopup": "dialog"
+    }, ariaControls && {
+      "aria-controls": ariaControls
     }), false, false);
     $8tj43$insert(_el$5, !isNewModal && $8tj43$createComponent(ClearButton, {}), _el$10, _co$2);
     $8tj43$insert(_el$3, isNewModal && $8tj43$createComponent(BackButton, {}), _el$17, _co$5);
@@ -11268,8 +11303,8 @@ function $a82a41ab7188eda2$export$93d9bfd0c9c1a5b8(close_modal, search_query_url
 }
 var $40411f2ec772c376$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div class=discover-more><button class=major type=button>`),
   $40411f2ec772c376$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<b>`),
-  $40411f2ec772c376$var$_tmpl$3 = /*#__PURE__*/$8tj43$template(`<div class=depict-search-modal><div class=body role=search><!$><!/><div class=padded><!$><!/><!$><!/><!$><!/></div><!$><!/></div><!$><!/>`),
-  $40411f2ec772c376$var$_tmpl$4 = /*#__PURE__*/$8tj43$template(`<div class="depict plp search"><div class=depict-search-modal-backdrop></div><!$><!/>`);
+  $40411f2ec772c376$var$_tmpl$3 = /*#__PURE__*/$8tj43$template(`<div class=depict-search-modal><div class=body role=search aria-label="Search modal with search field, query suggestions and result preview"><!$><!/><div id=depict-suggestions-and-result-preview class=padded><!$><!/><!$><!/><!$><!/></div><!$><!/></div><!$><!/>`),
+  $40411f2ec772c376$var$_tmpl$4 = /*#__PURE__*/$8tj43$template(`<div class="depict plp search"role=dialog><div class=depict-search-modal-backdrop></div><!$><!/>`);
 /**
  * First generation (classic) search modal - the solid component that gets added to <body> when the search modal is opened
  */
@@ -11418,7 +11453,8 @@ function $40411f2ec772c376$var$RawClassicSearchModal(_ref) {
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
     },
-    setSearchRoleOnContainer_: false
+    setSearchRoleOnContainer_: false,
+    ariaControls: "depict-suggestions-and-result-preview"
   });
   const modal_element = (() => {
     var _el$4 = $8tj43$getNextElement($40411f2ec772c376$var$_tmpl$3),
@@ -11674,7 +11710,16 @@ function $26db6925469636a4$export$67152d26d4f56ee8(_ref) {
         });
       }
     }));
-    $8tj43$effect(() => _el$2.classList.toggle("selected", !!isSelected()));
+    $8tj43$effect(_p$ => {
+      var _v$ = !!isSelected(),
+        _v$2 = isSelected();
+      _v$ !== _p$.e && _el$2.classList.toggle("selected", _p$.e = _v$);
+      _v$2 !== _p$.t && $8tj43$setAttribute(_el$2, "aria-selected", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     $8tj43$runHydrationEvents();
     return _el$2;
   })();
@@ -11908,16 +11953,19 @@ function $5175a47d13b7c228$export$d4994a86c6235f72(_ref) {
                 }));
                 $8tj43$effect(_p$ => {
                   var _v$ = !!isSelected(),
-                    _v$2 = href(),
-                    _v$3 = wholeTextToDisplay();
+                    _v$2 = isSelected(),
+                    _v$3 = href(),
+                    _v$4 = wholeTextToDisplay();
                   _v$ !== _p$.e && _el$7.classList.toggle("selected", _p$.e = _v$);
-                  _v$2 !== _p$.t && $8tj43$setAttribute(_el$7, "href", _p$.t = _v$2);
-                  _v$3 !== _p$.a && $8tj43$setAttribute(_el$7, "aria-label", _p$.a = _v$3);
+                  _v$2 !== _p$.t && $8tj43$setAttribute(_el$7, "aria-selected", _p$.t = _v$2);
+                  _v$3 !== _p$.a && $8tj43$setAttribute(_el$7, "href", _p$.a = _v$3);
+                  _v$4 !== _p$.o && $8tj43$setAttribute(_el$7, "aria-label", _p$.o = _v$4);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined,
-                  a: undefined
+                  a: undefined,
+                  o: undefined
                 });
                 return _el$7;
               })();
@@ -12109,7 +12157,7 @@ var $06fcd2a345efd24d$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div class=inst
   $06fcd2a345efd24d$var$_tmpl$4 = /*#__PURE__*/$8tj43$template(`<div class=discover-more><button class=major type=button>`),
   $06fcd2a345efd24d$var$_tmpl$5 = /*#__PURE__*/$8tj43$template(`<b>`),
   $06fcd2a345efd24d$var$_tmpl$6 = /*#__PURE__*/$8tj43$template(`<div class=depict-search-modal-backdrop>`),
-  $06fcd2a345efd24d$var$_tmpl$7 = /*#__PURE__*/$8tj43$template(`<div class=depict-search-modal><div class=body role=search><!$><!/><div class=padded></div></div><!$><!/>`),
+  $06fcd2a345efd24d$var$_tmpl$7 = /*#__PURE__*/$8tj43$template(`<div class=depict-search-modal><div class=body role=search aria-label="Search modal with search field, query suggestions and result preview"><!$><!/><div id=depict-suggestions-and-result-preview class=padded></div></div><!$><!/>`),
   $06fcd2a345efd24d$var$_tmpl$8 = /*#__PURE__*/$8tj43$template(`<div class=left>`),
   $06fcd2a345efd24d$var$_tmpl$9 = /*#__PURE__*/$8tj43$template(`<div class=right>`);
 /**
@@ -12468,7 +12516,8 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
     },
-    setSearchRoleOnContainer_: false
+    setSearchRoleOnContainer_: false,
+    ariaControls: "depict-suggestions-and-result-preview"
   });
   if (setSearchFieldOuterWidth_) {
     const resizeObserver = new ResizeObserver($8tj43$catchify1(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));

package/latest/index.cjs

@@ -3,6 +3,7 @@ var $gVhhF$solidjsweb = require("solid-js/web");
 var $gVhhF$solidjs = require("solid-js");
 var $gVhhF$depictaiutilisharedlatest = require("@depict-ai/utilishared/latest");
 var $gVhhF$solidjsstore = require("solid-js/store");
+var $gVhhF$depictaiutilisharedsrc = require("@depict-ai/utilishared/src/latest");
 require("../multi_import_deduplicator.cjs").register_es_version("ui", "latest");
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {
@@ -109,7 +110,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.9.3";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.9.5";
 function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
   const signal = $gVhhF$solidjs.createSignal(false);
   $gVhhF$solidjs.onCleanup($gVhhF$depictaiutilishared.javascript_media_query(media_query, ({
@@ -7585,6 +7586,21 @@ function $d212a67662c5cf38$export$140423fa4bfb6d63(props) {
     customUrls: $d212a67662c5cf38$var$customUrls
   }));
 }
+let $20ff40266d725403$var$cachedHlsModule;
+async function $20ff40266d725403$export$5d2f6cd705125cd3() {
+  if ($20ff40266d725403$var$cachedHlsModule) return $20ff40266d725403$var$cachedHlsModule;
+  const global_var_name = "_depict_ai_hls_polyfill";
+  const scriptTag = document.createElement("script");
+  scriptTag.type = "module";
+  // Our build systems aren't set-up for dynamic imports, so do this instead
+  scriptTag.append(`import("https://cdn.jsdelivr.net/npm/hls.js/+esm").then(m=>window.${global_var_name}=m)`);
+  document.head.append(scriptTag);
+  const hlsModule = await $gVhhF$depictaiutilisharedsrc.is_available_in(window, global_var_name);
+  delete window[global_var_name];
+  scriptTag.remove();
+  $20ff40266d725403$var$cachedHlsModule = hlsModule;
+  return hlsModule;
+}
 var $32c662f618f5d80d$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<video loop class=d-standard-content>`);
 function $32c662f618f5d80d$export$780a853d15174484({
   link_: link_,
@@ -7649,13 +7665,24 @@ function $32c662f618f5d80d$export$780a853d15174484({
             when: type_ === "video",
             get children() {
               var _el$ = $gVhhF$solidjsweb.getNextElement($32c662f618f5d80d$var$_tmpl$);
-              $gVhhF$solidjsweb.use(element => {
+              var _ref$ = $gVhhF$depictaiutilisharedlatest.catchify(async element => {
                 const pageVisible = $55cbacb79d3e0cea$export$54299a3c81f5425();
+                const owner = $gVhhF$solidjs.getOwner();
                 element.addEventListener("loadedmetadata", $gVhhF$depictaiutilisharedlatest.catchify(() => setAspectRatio(element.videoWidth / element.videoHeight)));
-                $gVhhF$solidjs.createEffect(() => {
+                // If hls is not supported, dynamically import hls.js as polyfill
+                if (mediaUrl_.includes(".m3u8") && !element.canPlayType("application/vnd.apple.mpegurl")) {
+                  const hlsJs = await $20ff40266d725403$export$5d2f6cd705125cd3().catch(e => $gVhhF$depictaiutilisharedlatest.report([e, "Failed to load hls.js"], "error"));
+                  if (!hlsJs || !hlsJs.isSupported()) return;
+                  const hls = new hlsJs.default();
+                  hls.loadSource(mediaUrl_);
+                  hls.attachMedia(element);
+                }
+                // need runWithOwner for createEffect, because we potentially awaited above
+                $gVhhF$solidjs.runWithOwner(owner, () => $gVhhF$solidjs.createEffect(() => {
                   if (pageVisible()) element.play().catch(e => $gVhhF$depictaiutilishared.dlog("Failed to play", e));else element.pause();
-                });
-              }, _el$);
+                }));
+              });
+              typeof _ref$ === "function" && $gVhhF$solidjsweb.use(_ref$, _el$);
               _el$.addEventListener("playing", () => setHasLoaded(true));
               $gVhhF$solidjsweb.setAttribute(_el$, "src", mediaUrl_);
               $gVhhF$solidjsweb.setProperty(_el$, "controls", false);
@@ -9534,15 +9561,18 @@ const $6ae613870d3380fc$export$b05c0ae390cf3e06 = ({
     $gVhhF$solidjsweb.effect(_p$ => {
       var _v$ = href(),
         _v$2 = display_.search_result_id,
-        _v$3 = !!isSelected?.();
+        _v$3 = !!isSelected?.(),
+        _v$4 = isSelected?.();
       _v$ !== _p$.e && $gVhhF$solidjsweb.setAttribute(_el$4, "href", _p$.e = _v$);
       _v$2 !== _p$.t && $gVhhF$solidjsweb.setAttribute(_el$4, "data-search-result-id", _p$.t = _v$2);
       _v$3 !== _p$.a && _el$4.classList.toggle("selected", _p$.a = _v$3);
+      _v$4 !== _p$.o && $gVhhF$solidjsweb.setAttribute(_el$4, "aria-selected", _p$.o = _v$4);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
-      a: undefined
+      a: undefined,
+      o: undefined
     });
     $gVhhF$solidjsweb.runHydrationEvents();
     return _el$4;
@@ -10495,7 +10525,8 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
   BackIcon_: BackIcon_,
   buttonInFieldRef_: buttonInFieldRef_,
   class_: class_,
-  setSearchRoleOnContainer_ = true
+  setSearchRoleOnContainer_ = true,
+  ariaControls: ariaControls
 }) {
   let input_element;
   // This is the div where we recommend (and ourselves do) attach the event listener to that opens the search modal.
@@ -10709,7 +10740,11 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
       },
       get placeholder() {
         return i18n_.placeholder_text_();
-      }
+      },
+      "aria-autocomplete": "list",
+      "aria-haspopup": "dialog"
+    }, ariaControls && {
+      "aria-controls": ariaControls
     }), false, false);
     $gVhhF$solidjsweb.insert(_el$5, !isNewModal && $gVhhF$solidjsweb.createComponent(ClearButton, {}), _el$10, _co$2);
     $gVhhF$solidjsweb.insert(_el$3, isNewModal && $gVhhF$solidjsweb.createComponent(BackButton, {}), _el$17, _co$5);
@@ -10758,8 +10793,8 @@ function $eb3039a27db40508$export$93d9bfd0c9c1a5b8(close_modal, search_query_url
 }
 var $44f0b2e312a9b710$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=discover-more><button class=major type=button>`),
   $44f0b2e312a9b710$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<b>`),
-  $44f0b2e312a9b710$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=depict-search-modal><div class=body role=search><!$><!/><div class=padded><!$><!/><!$><!/><!$><!/></div><!$><!/></div><!$><!/>`),
-  $44f0b2e312a9b710$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="depict plp search"><div class=depict-search-modal-backdrop></div><!$><!/>`);
+  $44f0b2e312a9b710$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=depict-search-modal><div class=body role=search aria-label="Search modal with search field, query suggestions and result preview"><!$><!/><div id=depict-suggestions-and-result-preview class=padded><!$><!/><!$><!/><!$><!/></div><!$><!/></div><!$><!/>`),
+  $44f0b2e312a9b710$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="depict plp search"role=dialog><div class=depict-search-modal-backdrop></div><!$><!/>`);
 /**
  * First generation (classic) search modal - the solid component that gets added to <body> when the search modal is opened
  */
@@ -10902,7 +10937,8 @@ function $44f0b2e312a9b710$var$RawClassicSearchModal({
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
     },
-    setSearchRoleOnContainer_: false
+    setSearchRoleOnContainer_: false,
+    ariaControls: "depict-suggestions-and-result-preview"
   });
   const modal_element = (() => {
     var _el$4 = $gVhhF$solidjsweb.getNextElement($44f0b2e312a9b710$var$_tmpl$3),
@@ -11143,7 +11179,16 @@ function $1f3b5fa875714dea$export$67152d26d4f56ee8({
         });
       }
     }));
-    $gVhhF$solidjsweb.effect(() => _el$2.classList.toggle("selected", !!isSelected()));
+    $gVhhF$solidjsweb.effect(_p$ => {
+      var _v$ = !!isSelected(),
+        _v$2 = isSelected();
+      _v$ !== _p$.e && _el$2.classList.toggle("selected", _p$.e = _v$);
+      _v$2 !== _p$.t && $gVhhF$solidjsweb.setAttribute(_el$2, "aria-selected", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     $gVhhF$solidjsweb.runHydrationEvents();
     return _el$2;
   })();
@@ -11368,16 +11413,19 @@ function $a13dbcf80d79229c$export$d4994a86c6235f72({
                 }));
                 $gVhhF$solidjsweb.effect(_p$ => {
                   var _v$ = !!isSelected(),
-                    _v$2 = href(),
-                    _v$3 = wholeTextToDisplay();
+                    _v$2 = isSelected(),
+                    _v$3 = href(),
+                    _v$4 = wholeTextToDisplay();
                   _v$ !== _p$.e && _el$7.classList.toggle("selected", _p$.e = _v$);
-                  _v$2 !== _p$.t && $gVhhF$solidjsweb.setAttribute(_el$7, "href", _p$.t = _v$2);
-                  _v$3 !== _p$.a && $gVhhF$solidjsweb.setAttribute(_el$7, "aria-label", _p$.a = _v$3);
+                  _v$2 !== _p$.t && $gVhhF$solidjsweb.setAttribute(_el$7, "aria-selected", _p$.t = _v$2);
+                  _v$3 !== _p$.a && $gVhhF$solidjsweb.setAttribute(_el$7, "href", _p$.a = _v$3);
+                  _v$4 !== _p$.o && $gVhhF$solidjsweb.setAttribute(_el$7, "aria-label", _p$.o = _v$4);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined,
-                  a: undefined
+                  a: undefined,
+                  o: undefined
                 });
                 return _el$7;
               })();
@@ -11565,7 +11613,7 @@ var $11597ae03e703a47$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div
   $11597ae03e703a47$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=discover-more><button class=major type=button>`),
   $11597ae03e703a47$var$_tmpl$5 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<b>`),
   $11597ae03e703a47$var$_tmpl$6 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=depict-search-modal-backdrop>`),
-  $11597ae03e703a47$var$_tmpl$7 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=depict-search-modal><div class=body role=search><!$><!/><div class=padded></div></div><!$><!/>`),
+  $11597ae03e703a47$var$_tmpl$7 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=depict-search-modal><div class=body role=search aria-label="Search modal with search field, query suggestions and result preview"><!$><!/><div id=depict-suggestions-and-result-preview class=padded></div></div><!$><!/>`),
   $11597ae03e703a47$var$_tmpl$8 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=left>`),
   $11597ae03e703a47$var$_tmpl$9 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=right>`);
 /**
@@ -11913,7 +11961,8 @@ function $11597ae03e703a47$var$RawSearchModalV2({
       if (start === null || end === null) return;
       input_el.setSelectionRange(start, end);
     },
-    setSearchRoleOnContainer_: false
+    setSearchRoleOnContainer_: false,
+    ariaControls: "depict-suggestions-and-result-preview"
   });
   if (setSearchFieldOuterWidth_) {
     const resizeObserver = new ResizeObserver($gVhhF$depictaiutilishared.catchify(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));

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