@depict-ai/ui 3.0.12 → 3.0.14

package/latest/index.cjs

@@ -77,7 +77,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "3.0.12";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "3.0.14";
 const $0f313083912e447a$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0"fill=#0f0f0f>`);
 function $0f313083912e447a$export$8be2714ec7f169ee(props = {}) {
   return (() => {
@@ -773,8 +773,8 @@ const $0b23bfd073d9a4e8$export$b91cec6bdc6b32a1 = /*@__PURE__*/(() => {
 const $a3280f0aad997933$export$c3834fa86c616831 = [[4], [3, 1024], [2, 901]];
 const $a3280f0aad997933$export$864d304a0bc46829 = "2%";
 const $a3280f0aad997933$export$7bf543b9d9be2c22 = (0, $0b23bfd073d9a4e8$export$b91cec6bdc6b32a1);
-function $fc23d7668ae0011d$export$a2cc176055f8f08() {
-  const text = "Please try setting `columnsAtSize`/`gridSpacing` on the `SearchPage`/`CategoryPage` components to change the grid before setting it with CSS. If you do with CSS, set `columnsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
+function $fc23d7668ae0011d$export$a2cc176055f8f08(what = "grid") {
+  const text = "Please try setting `columnsAtSize`/`gridSpacing` on the `SearchPage`/`CategoryPage` components to change the " + what + " before setting it with CSS. If you do with CSS, set `columnsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
   return (0, $gVhhF$solidjsweb.isServer) ? {
     t: `<!-- ${text} -->`
   } : document.createComment(text);
@@ -5881,25 +5881,28 @@ function $0f400c3f7248d5f1$export$92f2da32c6e7e7ee({
     price_formatting.decimal_places_delimiter_, price_formatting.thousands_delimiter_);
   });
 }
-function $76b6ac05693f5c71$export$205efb947c7ffd78(handler, passive = true) {
+function $76b6ac05693f5c71$export$205efb947c7ffd78(handler, passive = true, override_element) {
   const catchified_handler = $gVhhF$depictaiutilishared.catchify(handler);
   const owner = $gVhhF$solidjs.getOwner();
   // Some customers (e.g. equestrian) have `height: 100%` and/or `overflow-x: hidden` on the body, which means that scroll events won't get dispatched on `window`. The pages who get it on <body> won't get it on `window` and vice-versa, so there shouldn't be a worry about duplicate calling of the handler.
   // Use observer in case that this gets called before body exists
-  const disconnect = (0, $gVhhF$depictaiutilishared.observer).onexists("body", ({
-    element: element
-  }) => {
-    element.addEventListener("scroll", catchified_handler, {
-      passive: passive
+  if (!override_element) {
+    const disconnect = (0, $gVhhF$depictaiutilishared.observer).onexists("body", ({
+      element: element
+    }) => {
+      element.addEventListener("scroll", catchified_handler, {
+        passive: passive
+      });
+      $gVhhF$solidjs.runWithOwner(owner, () => $gVhhF$solidjs.onCleanup(() => element.removeEventListener("scroll", catchified_handler)));
     });
-    $gVhhF$solidjs.runWithOwner(owner, () => $gVhhF$solidjs.onCleanup(() => element.removeEventListener("scroll", catchified_handler)));
-  });
-  $gVhhF$solidjs.onCleanup(disconnect);
+    $gVhhF$solidjs.onCleanup(disconnect);
+  }
   for (const event of ["resize", "orientationchange", "scroll"]) {
-    addEventListener(event, catchified_handler, {
+    const listen_on = override_element ?? window;
+    listen_on.addEventListener(event, catchified_handler, {
       passive: passive
     });
-    $gVhhF$solidjs.onCleanup(() => removeEventListener(event, catchified_handler));
+    $gVhhF$solidjs.onCleanup(() => listen_on.removeEventListener(event, catchified_handler));
   }
 }
 const $401aee5f33dca9e2$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=scroll-status style=display:none><span class=text><b></b> \u{2013} <b></b> <!$><!/> <b>`);
@@ -5911,7 +5914,9 @@ function $401aee5f33dca9e2$export$83fd5de5504a7a67({
   i18n_: {
     price_formatting_: price_formatting_,
     of_: of_
-  }
+  },
+  get_scroll_position_ = () => scrollY,
+  listen_to_scroll_on_: listen_to_scroll_on_
 }) {
   if (0, $gVhhF$solidjsweb.isServer) return; // won't show in initial render and need scroll position
   const [first_to_show, set_first_to_show] = $gVhhF$solidjs.createSignal(0);
@@ -5926,12 +5931,12 @@ function $401aee5f33dca9e2$export$83fd5de5504a7a67({
   let element;
   let animation;
   let last_pos_time = +new Date();
-  let last_pos = scrollY;
+  let last_pos = get_scroll_position_();
   let unpermit_when_possible = false;
   let times_too_fast = 0;
   const handle_scrollpos_change = () => {
     if (animation) set_show_triggered(prev => !prev); // make sure that once we've decided to show the indicator it doesn't disappear before we stop scrolling
-    const distance_travelled = Math.abs(scrollY - last_pos);
+    const distance_travelled = Math.abs(get_scroll_position_() - last_pos);
     const now = +new Date();
     const age_of_distance = now - last_pos_time;
     const velocity = distance_travelled / age_of_distance; // pixels per millisecond
@@ -5944,9 +5949,9 @@ function $401aee5f33dca9e2$export$83fd5de5504a7a67({
       unpermit_when_possible = false;
     } else if (animation) unpermit_when_possible = true;else set_permitted_to_show(false);
     last_pos_time = now;
-    last_pos = scrollY;
+    last_pos = get_scroll_position_();
   };
-  $76b6ac05693f5c71$export$205efb947c7ffd78(handle_scrollpos_change);
+  $76b6ac05693f5c71$export$205efb947c7ffd78(handle_scrollpos_change, undefined, listen_to_scroll_on_);
   $gVhhF$solidjs.createEffect(() => {
     show_triggered();
     const first = get_first_result_in_viewport();
@@ -6599,7 +6604,8 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
   product_card_template_: product_card_template_,
   layout_options_: layout_options_,
   id_currently_querying_for_: id_currently_querying_for_,
-  content_blocks_by_row_: content_blocks_by_row_
+  content_blocks_by_row_: content_blocks_by_row_,
+  ConfiguredScrollStatus: ConfiguredScrollStatus
 }) {
   // The plp_results_ resource will be delayed because we're using createBatchedMemo to not make triplicate API requests, but we need to show the placeholders before already to match Chrome and Firefox's "content has to be there, ready for scroll restoration, before all popstate tasks have been completed"-requirement
   const is_loading_ = $gVhhF$solidjs.createMemo(() => plp_results_.loading || query_base_.loading);
@@ -6667,6 +6673,7 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
               product_card_template_: product_card_template_,
               num_placeholders_: num_placeholders_
             }) : undefined);
+            const layout = $gVhhF$solidjs.createMemo(() => layout_options_().layout || "grid");
             const [get_suspense_is_blocked, set_suspense_is_blocked] = $gVhhF$solidjs.createSignal(false);
             const block_suspense_if_needed = () => {
               if (!is_just_after_plp_results_update) return;
@@ -6738,7 +6745,7 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
               },
               children: product_cards_when_data
             });
-            return [$gVhhF$solidjsweb.memo((0, $fc23d7668ae0011d$export$a2cc176055f8f08)), $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+            return [$gVhhF$solidjsweb.memo(() => $fc23d7668ae0011d$export$a2cc176055f8f08(layout())), $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
               get when() {
                 return doesnt_have_content_blocks();
               },
@@ -6761,22 +6768,79 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
                 });
               },
               get children() {
-                return $gVhhF$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), {
-                  get cols_at_size() {
-                    return modified_cols_at_size();
-                  },
-                  get override_vertical_spacing() {
-                    return layout_options_().override_vertical_spacing;
-                  },
-                  get grid_spacing() {
-                    return layout_options_().grid_spacing;
+                return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+                  get when() {
+                    return layout() === "grid";
                   },
-                  rows: "all",
-                  layout: "grid",
-                  element_attributes: {
-                    class: "cards"
+                  get fallback() {
+                    return $gVhhF$solidjsweb.createComponent((0, $a0e53f99354809d9$export$6649caad96ef8870), {
+                      arrow_height_: 25,
+                      arrow_width_: 12.5,
+                      disable_fading_: true,
+                      slider_ref_: slider => {
+                        const {
+                          insert_here: insert_here,
+                          container: container
+                        } = slider;
+                        const Layout = props => $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, insert_here, true);
+                        // Do like this, so we don't have to call mergeProps ourselves
+                        $gVhhF$solidjsweb.createComponent(Layout, $gVhhF$solidjsweb.mergeProps({
+                          rows: "all"
+                        }, layout_options_, {
+                          get cols_at_size() {
+                            return modified_cols_at_size();
+                          },
+                          get layout() {
+                            return layout();
+                          }
+                        }));
+                        insert_here.classList.add("generated-spacing");
+                        $gVhhF$solidjs.createEffect(
+                        // @ts-ignore
+                        $gVhhF$solidjs.on(query_base_, () => insert_here.scrollTo({
+                          left: 0,
+                          behavior: "instant"
+                        }), {
+                          defer: true
+                        })); // Scroll to the beginning if a filter or the query changes
+                        $gVhhF$depictaiutilishared.slider_fractional_factory(0, 0.75).constructor_plugin.call(slider, {}); // enable fractional scrolling
+                        if (ConfiguredScrollStatus) {
+                          // Put scroll status into slider container, so it's centered relatively to the products
+                          const rendered_scroll_status = ConfiguredScrollStatus({
+                            get_scroll_position_: () => insert_here.scrollLeft,
+                            listen_to_scroll_on_: insert_here
+                          });
+                          const {
+                            childNodes: childNodes
+                          } = container;
+                          // We have to use `insert` over Element.append, because ConfiguredScrollStatus is in an ErrorBoundary and therefore returns a function. `insert` will wipe all children, therefore save them first and then tell insert that the element should contain these elements + whatever ScrollStatus returns
+                          $gVhhF$solidjsweb.insert(container, $gVhhF$solidjs.createMemo(() => [...childNodes, rendered_scroll_status]));
+                        }
+                      },
+                      children: listing_contents
+                    });
                   },
-                  children: listing_contents
+                  get children() {
+                    return $gVhhF$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), {
+                      get cols_at_size() {
+                        return modified_cols_at_size();
+                      },
+                      get override_vertical_spacing() {
+                        return layout_options_().override_vertical_spacing;
+                      },
+                      get grid_spacing() {
+                        return layout_options_().grid_spacing;
+                      },
+                      rows: "all",
+                      get layout() {
+                        return layout();
+                      },
+                      element_attributes: {
+                        class: "cards"
+                      },
+                      children: listing_contents
+                    });
+                  }
                 });
               }
             })];
@@ -8387,6 +8451,20 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
   // @ts-ignore - there's no type error here when writing the code, but parcel can't generate types that include the symbol, so we need to suppress the error that creates in our pipelines
   const category_title_type = category_title_[(0, $6b502b1b2155a0bc$export$5c28802497c8a83c)];
   const extra_sort_and_filter_args_ = {};
+  const ConfiguredScrollStatus = (extraProps = {}) => $gVhhF$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
+    severity_: "error",
+    message_: "Scroll status failed",
+    get children() {
+      return $401aee5f33dca9e2$export$83fd5de5504a7a67({
+        first_result_in_viewport_: first_result_in_viewport_,
+        last_result_in_viewport_: last_result_in_viewport_,
+        formatted_number_of_results_: formatted_number_of_results_,
+        i18n_: i18n_,
+        number_of_results_: $gVhhF$solidjs.createMemo(() => plp_products_()?.n_hits),
+        ...extraProps
+      });
+    }
+  });
   const make_product_count_ = () => (() => {
     const _el$ = $gVhhF$solidjsweb.getNextElement($840d88a04b2d22a7$var$_tmpl$),
       _el$3 = _el$.firstChild,
@@ -8605,6 +8683,7 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
               sort_or_filter_open_: sort_or_filter_open_,
               desktop_filter_elements_: desktop_filter_elements_,
               content_blocks_by_row_: content_blocks_by_row_,
+              ConfiguredScrollStatus: ConfiguredScrollStatus,
               id_currently_querying_for_: id_to_query_for_,
               no_results_options_: {
                 selected_filters_: selected_filters_,
@@ -8617,17 +8696,12 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
         });
       }
     }), _el$26, _co$10);
-    $gVhhF$solidjsweb.insert(_el$13, $gVhhF$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
-      severity_: "error",
-      message_: "Scroll status failed",
+    $gVhhF$solidjsweb.insert(_el$13, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+      get when() {
+        return layout_options_().layout === "grid";
+      },
       get children() {
-        return $401aee5f33dca9e2$export$83fd5de5504a7a67({
-          first_result_in_viewport_: first_result_in_viewport_,
-          last_result_in_viewport_: last_result_in_viewport_,
-          formatted_number_of_results_: formatted_number_of_results_,
-          i18n_: i18n_,
-          number_of_results_: $gVhhF$solidjs.createMemo(() => plp_products_()?.n_hits)
-        });
+        return $gVhhF$solidjsweb.createComponent(ConfiguredScrollStatus, {});
       }
     }), _el$28, _co$11);
     $gVhhF$solidjsweb.insert(_el$13, $gVhhF$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
@@ -9019,7 +9093,8 @@ function $48567ac5b39bac56$export$e2bf8ce7779e827e(props) {
       scroll_restoration_data_: scroll_restoration_data_,
       layout_options_: $gVhhF$solidjs.createMemo(() => ({
         cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77(props.cols_at_size),
-        ...grid_spacing_override()
+        ...grid_spacing_override(),
+        layout: props.layout || "grid"
       })),
       product_card_template_: product_card_template,
       sorting_query_param_: sorting_query_param_,

package/latest/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "3.0.12";
+export const version = "3.0.14";
 export type SDKColsAtSize = [number, number?][];
 /**
  * Transform SDK ColsAtSize into valid Layout ColsAtSize
@@ -182,6 +182,11 @@ export interface BaseCategoryPageConfig extends BaseProductListingConfig {
    * @default true
    */
   showQuicklinks?: boolean;
+  /**
+   * Whether to show the listing in a grid or a slider.
+   * @default "grid"
+   */
+  layout?: "grid" | "slider";
 }
 /**
  * The listing to query Depict for. `type` can be `"listingId"` or `"externalId"` and `id` is the actual id.
@@ -965,7 +970,8 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   category_title: typeof CategoryTitle | typeof embedded_num_products;
   on_listing_query_change?: (new_listing_query?: ListingQuery | undefined, old_listing_query?: ListingQuery | undefined) => void;
   content_blocks_by_row?: ContentBlocksByRow;
-}): import("@depict-ai/utilishared").Node_Array;
+  layout?: "slider" | "grid";
+}): import("@depict-ai/utilishared/latest").Node_Array;
 export function BreadCrumbs<T extends Display>({
   depict_category
 }: {
@@ -1117,7 +1123,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
  * Open the modal with support for alignment.
  * @returns {void}
  */
-export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;

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 = "3.0.12";
+const $ec291e0010116877$export$83d89fbfd8236492 = "3.0.14";
 const $fbbadcb080ad1d4a$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0"fill=#0f0f0f>`);
 function $fbbadcb080ad1d4a$export$8be2714ec7f169ee(props = {}) {
   return (() => {
@@ -703,8 +703,8 @@ const $e4615ecd1849548f$export$b91cec6bdc6b32a1 = /*@__PURE__*/(() => {
 const $4690a06c8489dcd0$export$c3834fa86c616831 = [[4], [3, 1024], [2, 901]];
 const $4690a06c8489dcd0$export$864d304a0bc46829 = "2%";
 const $4690a06c8489dcd0$export$7bf543b9d9be2c22 = (0, $e4615ecd1849548f$export$b91cec6bdc6b32a1);
-function $a458486f22b22f63$export$a2cc176055f8f08() {
-  const text = "Please try setting `columnsAtSize`/`gridSpacing` on the `SearchPage`/`CategoryPage` components to change the grid before setting it with CSS. If you do with CSS, set `columnsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
+function $a458486f22b22f63$export$a2cc176055f8f08(what = "grid") {
+  const text = "Please try setting `columnsAtSize`/`gridSpacing` on the `SearchPage`/`CategoryPage` components to change the " + what + " before setting it with CSS. If you do with CSS, set `columnsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
   return (0, $9HbP8$isServer) ? {
     t: `<!-- ${text} -->`
   } : document.createComment(text);
@@ -5811,25 +5811,28 @@ function $511cc0abd9a64ce8$export$92f2da32c6e7e7ee({
     price_formatting.decimal_places_delimiter_, price_formatting.thousands_delimiter_);
   });
 }
-function $8f9120a1ca151e6a$export$205efb947c7ffd78(handler, passive = true) {
+function $8f9120a1ca151e6a$export$205efb947c7ffd78(handler, passive = true, override_element) {
   const catchified_handler = $9HbP8$catchify1(handler);
   const owner = $9HbP8$getOwner();
   // Some customers (e.g. equestrian) have `height: 100%` and/or `overflow-x: hidden` on the body, which means that scroll events won't get dispatched on `window`. The pages who get it on <body> won't get it on `window` and vice-versa, so there shouldn't be a worry about duplicate calling of the handler.
   // Use observer in case that this gets called before body exists
-  const disconnect = (0, $9HbP8$observer).onexists("body", ({
-    element: element
-  }) => {
-    element.addEventListener("scroll", catchified_handler, {
-      passive: passive
+  if (!override_element) {
+    const disconnect = (0, $9HbP8$observer).onexists("body", ({
+      element: element
+    }) => {
+      element.addEventListener("scroll", catchified_handler, {
+        passive: passive
+      });
+      $9HbP8$runWithOwner(owner, () => $9HbP8$onCleanup(() => element.removeEventListener("scroll", catchified_handler)));
     });
-    $9HbP8$runWithOwner(owner, () => $9HbP8$onCleanup(() => element.removeEventListener("scroll", catchified_handler)));
-  });
-  $9HbP8$onCleanup(disconnect);
+    $9HbP8$onCleanup(disconnect);
+  }
   for (const event of ["resize", "orientationchange", "scroll"]) {
-    addEventListener(event, catchified_handler, {
+    const listen_on = override_element ?? window;
+    listen_on.addEventListener(event, catchified_handler, {
       passive: passive
     });
-    $9HbP8$onCleanup(() => removeEventListener(event, catchified_handler));
+    $9HbP8$onCleanup(() => listen_on.removeEventListener(event, catchified_handler));
   }
 }
 const $6db49ca163afa2c3$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=scroll-status style=display:none><span class=text><b></b> \u{2013} <b></b> <!$><!/> <b>`);
@@ -5841,7 +5844,9 @@ function $6db49ca163afa2c3$export$83fd5de5504a7a67({
   i18n_: {
     price_formatting_: price_formatting_,
     of_: of_
-  }
+  },
+  get_scroll_position_ = () => scrollY,
+  listen_to_scroll_on_: listen_to_scroll_on_
 }) {
   if (0, $9HbP8$isServer) return; // won't show in initial render and need scroll position
   const [first_to_show, set_first_to_show] = $9HbP8$createSignal(0);
@@ -5856,12 +5861,12 @@ function $6db49ca163afa2c3$export$83fd5de5504a7a67({
   let element;
   let animation;
   let last_pos_time = +new Date();
-  let last_pos = scrollY;
+  let last_pos = get_scroll_position_();
   let unpermit_when_possible = false;
   let times_too_fast = 0;
   const handle_scrollpos_change = () => {
     if (animation) set_show_triggered(prev => !prev); // make sure that once we've decided to show the indicator it doesn't disappear before we stop scrolling
-    const distance_travelled = Math.abs(scrollY - last_pos);
+    const distance_travelled = Math.abs(get_scroll_position_() - last_pos);
     const now = +new Date();
     const age_of_distance = now - last_pos_time;
     const velocity = distance_travelled / age_of_distance; // pixels per millisecond
@@ -5874,9 +5879,9 @@ function $6db49ca163afa2c3$export$83fd5de5504a7a67({
       unpermit_when_possible = false;
     } else if (animation) unpermit_when_possible = true;else set_permitted_to_show(false);
     last_pos_time = now;
-    last_pos = scrollY;
+    last_pos = get_scroll_position_();
   };
-  $8f9120a1ca151e6a$export$205efb947c7ffd78(handle_scrollpos_change);
+  $8f9120a1ca151e6a$export$205efb947c7ffd78(handle_scrollpos_change, undefined, listen_to_scroll_on_);
   $9HbP8$createEffect(() => {
     show_triggered();
     const first = get_first_result_in_viewport();
@@ -6529,7 +6534,8 @@ function $2d25e42846eac370$export$3925f87b1545cfc6({
   product_card_template_: product_card_template_,
   layout_options_: layout_options_,
   id_currently_querying_for_: id_currently_querying_for_,
-  content_blocks_by_row_: content_blocks_by_row_
+  content_blocks_by_row_: content_blocks_by_row_,
+  ConfiguredScrollStatus: ConfiguredScrollStatus
 }) {
   // The plp_results_ resource will be delayed because we're using createBatchedMemo to not make triplicate API requests, but we need to show the placeholders before already to match Chrome and Firefox's "content has to be there, ready for scroll restoration, before all popstate tasks have been completed"-requirement
   const is_loading_ = $9HbP8$createMemo(() => plp_results_.loading || query_base_.loading);
@@ -6597,6 +6603,7 @@ function $2d25e42846eac370$export$3925f87b1545cfc6({
               product_card_template_: product_card_template_,
               num_placeholders_: num_placeholders_
             }) : undefined);
+            const layout = $9HbP8$createMemo(() => layout_options_().layout || "grid");
             const [get_suspense_is_blocked, set_suspense_is_blocked] = $9HbP8$createSignal(false);
             const block_suspense_if_needed = () => {
               if (!is_just_after_plp_results_update) return;
@@ -6668,7 +6675,7 @@ function $2d25e42846eac370$export$3925f87b1545cfc6({
               },
               children: product_cards_when_data
             });
-            return [$9HbP8$memo((0, $a458486f22b22f63$export$a2cc176055f8f08)), $9HbP8$createComponent((0, $9HbP8$Show), {
+            return [$9HbP8$memo(() => $a458486f22b22f63$export$a2cc176055f8f08(layout())), $9HbP8$createComponent((0, $9HbP8$Show), {
               get when() {
                 return doesnt_have_content_blocks();
               },
@@ -6691,22 +6698,79 @@ function $2d25e42846eac370$export$3925f87b1545cfc6({
                 });
               },
               get children() {
-                return $9HbP8$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), {
-                  get cols_at_size() {
-                    return modified_cols_at_size();
-                  },
-                  get override_vertical_spacing() {
-                    return layout_options_().override_vertical_spacing;
-                  },
-                  get grid_spacing() {
-                    return layout_options_().grid_spacing;
+                return $9HbP8$createComponent((0, $9HbP8$Show), {
+                  get when() {
+                    return layout() === "grid";
                   },
-                  rows: "all",
-                  layout: "grid",
-                  element_attributes: {
-                    class: "cards"
+                  get fallback() {
+                    return $9HbP8$createComponent((0, $f32e14878e75af51$export$6649caad96ef8870), {
+                      arrow_height_: 25,
+                      arrow_width_: 12.5,
+                      disable_fading_: true,
+                      slider_ref_: slider => {
+                        const {
+                          insert_here: insert_here,
+                          container: container
+                        } = slider;
+                        const Layout = props => $c8d5ff4524619fcd$export$445d8d3f5f706a40(props, insert_here, true);
+                        // Do like this, so we don't have to call mergeProps ourselves
+                        $9HbP8$createComponent(Layout, $9HbP8$mergeProps({
+                          rows: "all"
+                        }, layout_options_, {
+                          get cols_at_size() {
+                            return modified_cols_at_size();
+                          },
+                          get layout() {
+                            return layout();
+                          }
+                        }));
+                        insert_here.classList.add("generated-spacing");
+                        $9HbP8$createEffect(
+                        // @ts-ignore
+                        $9HbP8$on(query_base_, () => insert_here.scrollTo({
+                          left: 0,
+                          behavior: "instant"
+                        }), {
+                          defer: true
+                        })); // Scroll to the beginning if a filter or the query changes
+                        $9HbP8$slider_fractional_factory(0, 0.75).constructor_plugin.call(slider, {}); // enable fractional scrolling
+                        if (ConfiguredScrollStatus) {
+                          // Put scroll status into slider container, so it's centered relatively to the products
+                          const rendered_scroll_status = ConfiguredScrollStatus({
+                            get_scroll_position_: () => insert_here.scrollLeft,
+                            listen_to_scroll_on_: insert_here
+                          });
+                          const {
+                            childNodes: childNodes
+                          } = container;
+                          // We have to use `insert` over Element.append, because ConfiguredScrollStatus is in an ErrorBoundary and therefore returns a function. `insert` will wipe all children, therefore save them first and then tell insert that the element should contain these elements + whatever ScrollStatus returns
+                          $9HbP8$insert(container, $9HbP8$createMemo(() => [...childNodes, rendered_scroll_status]));
+                        }
+                      },
+                      children: listing_contents
+                    });
                   },
-                  children: listing_contents
+                  get children() {
+                    return $9HbP8$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), {
+                      get cols_at_size() {
+                        return modified_cols_at_size();
+                      },
+                      get override_vertical_spacing() {
+                        return layout_options_().override_vertical_spacing;
+                      },
+                      get grid_spacing() {
+                        return layout_options_().grid_spacing;
+                      },
+                      rows: "all",
+                      get layout() {
+                        return layout();
+                      },
+                      element_attributes: {
+                        class: "cards"
+                      },
+                      children: listing_contents
+                    });
+                  }
                 });
               }
             })];
@@ -8317,6 +8381,20 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
   // @ts-ignore - there's no type error here when writing the code, but parcel can't generate types that include the symbol, so we need to suppress the error that creates in our pipelines
   const category_title_type = category_title_[(0, $4fb3a1cf207a7d5c$export$5c28802497c8a83c)];
   const extra_sort_and_filter_args_ = {};
+  const ConfiguredScrollStatus = (extraProps = {}) => $9HbP8$createComponent((0, $b7436a6d1fd64e3b$export$b69d0d92862de18b), {
+    severity_: "error",
+    message_: "Scroll status failed",
+    get children() {
+      return $6db49ca163afa2c3$export$83fd5de5504a7a67({
+        first_result_in_viewport_: first_result_in_viewport_,
+        last_result_in_viewport_: last_result_in_viewport_,
+        formatted_number_of_results_: formatted_number_of_results_,
+        i18n_: i18n_,
+        number_of_results_: $9HbP8$createMemo(() => plp_products_()?.n_hits),
+        ...extraProps
+      });
+    }
+  });
   const make_product_count_ = () => (() => {
     const _el$ = $9HbP8$getNextElement($df5d81d0fe61ff21$var$_tmpl$),
       _el$3 = _el$.firstChild,
@@ -8535,6 +8613,7 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
               sort_or_filter_open_: sort_or_filter_open_,
               desktop_filter_elements_: desktop_filter_elements_,
               content_blocks_by_row_: content_blocks_by_row_,
+              ConfiguredScrollStatus: ConfiguredScrollStatus,
               id_currently_querying_for_: id_to_query_for_,
               no_results_options_: {
                 selected_filters_: selected_filters_,
@@ -8547,17 +8626,12 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
         });
       }
     }), _el$26, _co$10);
-    $9HbP8$insert(_el$13, $9HbP8$createComponent((0, $b7436a6d1fd64e3b$export$b69d0d92862de18b), {
-      severity_: "error",
-      message_: "Scroll status failed",
+    $9HbP8$insert(_el$13, $9HbP8$createComponent((0, $9HbP8$Show), {
+      get when() {
+        return layout_options_().layout === "grid";
+      },
       get children() {
-        return $6db49ca163afa2c3$export$83fd5de5504a7a67({
-          first_result_in_viewport_: first_result_in_viewport_,
-          last_result_in_viewport_: last_result_in_viewport_,
-          formatted_number_of_results_: formatted_number_of_results_,
-          i18n_: i18n_,
-          number_of_results_: $9HbP8$createMemo(() => plp_products_()?.n_hits)
-        });
+        return $9HbP8$createComponent(ConfiguredScrollStatus, {});
       }
     }), _el$28, _co$11);
     $9HbP8$insert(_el$13, $9HbP8$createComponent((0, $b7436a6d1fd64e3b$export$b69d0d92862de18b), {
@@ -8949,7 +9023,8 @@ function $961b5c64bef4662f$export$e2bf8ce7779e827e(props) {
       scroll_restoration_data_: scroll_restoration_data_,
       layout_options_: $9HbP8$createMemo(() => ({
         cols_at_size: $b5cccc8ee7d24677$export$6daf8749b65a1b77(props.cols_at_size),
-        ...grid_spacing_override()
+        ...grid_spacing_override(),
+        layout: props.layout || "grid"
       })),
       product_card_template_: product_card_template,
       sorting_query_param_: sorting_query_param_,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "3.0.12",
+  "version": "3.0.14",
   "description": "Base package containing the actual UI of Depict UI along with translations, with a not-simplified API. We recommend using @depict-ai/js-ui or @depict-ai/react-ui instead.",
   "packageManager": "yarn@3.2.2",
   "sass": "styles.scss",
@@ -236,7 +236,7 @@
     "@babel/plugin-transform-typescript": "^7.22.9",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "^7.22.6",
-    "@depict-ai/plp-styling": "^2.0.2",
+    "@depict-ai/plp-styling": "^2.0.3",
     "@depict-ai/types": "^5.0.2",
     "@depict-ai/utilishared": "^2.0.6",
     "solid-js": "^1.8.1"