@depict-ai/ui 3.0.18 → 3.0.20

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.18";
+const $ec291e0010116877$export$83d89fbfd8236492 = "3.0.20";
 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 (() => {
@@ -2046,7 +2046,8 @@ function $c4492d24952ed731$export$d41d19e89346fa2({
     disable_fading_: true,
     slider_ref_: slider => {
       const {
-        insert_here: insert_here
+        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
@@ -2056,6 +2057,7 @@ function $c4492d24952ed731$export$d41d19e89346fa2({
       }, layout_options_));
       $9HbP8$slider_fractional_factory(0, 0.75).constructor_plugin.call(slider, {}); // enable fractional scrolling
       insert_here.before($a458486f22b22f63$export$a2cc176055f8f08());
+      container.classList.add("products");
     },
     get children() {
       return $9HbP8$createComponent((0, $9HbP8$Suspense), {
@@ -5846,7 +5848,8 @@ function $6db49ca163afa2c3$export$83fd5de5504a7a67({
     of_: of_
   },
   get_scroll_position_ = () => scrollY,
-  listen_to_scroll_on_: listen_to_scroll_on_
+  listen_to_scroll_on_: listen_to_scroll_on_,
+  velocity_too_fast_ = 1.5
 }) {
   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);
@@ -5854,6 +5857,7 @@ function $6db49ca163afa2c3$export$83fd5de5504a7a67({
   const [count_to_show, set_count_to_show] = $9HbP8$createSignal("");
   const [permitted_to_show, set_permitted_to_show] = $9HbP8$createSignal(false); // due to scroll speed
   const [show_triggered, set_show_triggered] = $9HbP8$createSignal(false); // signal to just switch between true/false to trigger a new animation which will persist the indicator
+  const [times_too_fast, set_times_too_fast] = $9HbP8$createSignal(0);
   const modified_price_formatting_ = $9HbP8$createMemo(() => ({
     ...price_formatting_(),
     places_after_comma_: 0
@@ -5863,25 +5867,27 @@ function $6db49ca163afa2c3$export$83fd5de5504a7a67({
   let last_pos_time = +new Date();
   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(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
-    if (velocity > 1.5) {
-      times_too_fast++;
-      setTimeout(() => times_too_fast--, 1000);
+    if (velocity > velocity_too_fast_) {
+      set_times_too_fast(prev => prev + 1);
+      setTimeout(() => set_times_too_fast(prev => prev - 1), 1000);
     }
-    if (times_too_fast > 10) {
-      set_permitted_to_show(true);
-      unpermit_when_possible = false;
-    } else if (animation) unpermit_when_possible = true;else set_permitted_to_show(false);
     last_pos_time = now;
     last_pos = get_scroll_position_();
   };
   $8f9120a1ca151e6a$export$205efb947c7ffd78(handle_scrollpos_change, undefined, listen_to_scroll_on_);
+  $9HbP8$createComputed(() => {
+    // We need to set this reactively to ensure that it's forbidden to show even when times_too_fast has tapered off after a few seconds, see https://github.com/depict-org/depict/pull/82
+    if (times_too_fast() > 10) {
+      set_permitted_to_show(true);
+      unpermit_when_possible = false;
+    } else if (animation) unpermit_when_possible = true;else set_permitted_to_show(false);
+  });
   $9HbP8$createEffect(() => {
     show_triggered();
     const first = get_first_result_in_viewport();
@@ -6729,6 +6735,7 @@ function $2d25e42846eac370$export$3925f87b1545cfc6({
                           }
                         }));
                         insert_here.classList.add("generated-spacing");
+                        container.classList.add("products");
                         $9HbP8$createEffect(
                         // @ts-ignore
                         $9HbP8$on(query_base_, () => insert_here.scrollTo({
@@ -6742,13 +6749,13 @@ function $2d25e42846eac370$export$3925f87b1545cfc6({
                           // 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
+                            listen_to_scroll_on_: insert_here,
+                            velocity_too_fast_: 3 // Require twice as hard scrolling to show ScrollStatus in slider since it's easier to scroll fast there
                           });
-                          const {
-                            childNodes: childNodes
-                          } = container;
+
+                          const non_solid_nodes = [...container.childNodes];
                           // 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]));
+                          $9HbP8$insert(container, $9HbP8$createMemo(() => [...non_solid_nodes, rendered_scroll_status]));
                         }
                       },
                       children: listing_contents
@@ -8286,7 +8293,7 @@ function $2ab89d64b7f1d5ef$export$d31a1a1a83ad9413(plp_results_, [get_selected_f
 const $df5d81d0fe61ff21$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=product-count><!$><!/> <!$><!/>`),
   $df5d81d0fe61ff21$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<div>`),
   $df5d81d0fe61ff21$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<div class=filter-results-for-one-row><!$><!/><!$><!/>`),
-  $df5d81d0fe61ff21$var$_tmpl$4 = /*#__PURE__*/$9HbP8$template(`<div class="depict plp category"><div class=listing-page><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/></div><!$><!/><!$><!/>`);
+  $df5d81d0fe61ff21$var$_tmpl$4 = /*#__PURE__*/$9HbP8$template(`<div class="depict plp category"><div class=listing-page><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/></div><!$><!/>`);
 function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
   depict_api_: depict_api_,
   id_to_query_for_: id_to_query_for_,
@@ -8557,9 +8564,7 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
       _el$25 = _el$24.nextSibling,
       [_el$26, _co$10] = $9HbP8$getNextMarker(_el$25.nextSibling),
       _el$27 = _el$14.nextSibling,
-      [_el$28, _co$11] = $9HbP8$getNextMarker(_el$27.nextSibling),
-      _el$29 = _el$28.nextSibling,
-      [_el$30, _co$12] = $9HbP8$getNextMarker(_el$29.nextSibling);
+      [_el$28, _co$11] = $9HbP8$getNextMarker(_el$27.nextSibling);
     $9HbP8$use(el => process.env.NODE_ENV === "development" && $cc6f5b69378cd164$export$7af06a63c5a976c9(el, id_to_query_for_, i18n_), _el$13);
     $9HbP8$insert(_el$14, $9HbP8$createComponent((0, $9HbP8$Show), {
       get when() {
@@ -8652,25 +8657,24 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
     }), _el$26, _co$10);
     $9HbP8$insert(_el$13, $9HbP8$createComponent((0, $9HbP8$Show), {
       get when() {
-        return layout_options_().layout === "grid";
+        return !layout_options_().layout?.startsWith("slider");
       },
       get children() {
-        return $9HbP8$createComponent(ConfiguredScrollStatus, {});
+        return [$9HbP8$createComponent(ConfiguredScrollStatus, {}), $9HbP8$createComponent((0, $b7436a6d1fd64e3b$export$b69d0d92862de18b), {
+          severity_: "error",
+          message_: "Floating buttons failed",
+          get children() {
+            return $0b0380f75d729d63$export$b23abd26de154ede({
+              search_filters_open_: category_filters_open_,
+              search_sorting_open_: category_sorting_open_,
+              current_sorting_: current_sorting_,
+              sort_and_filter_element_: sort_and_filter_element_,
+              i18n_: i18n_
+            });
+          }
+        })];
       }
     }), _el$28, _co$11);
-    $9HbP8$insert(_el$13, $9HbP8$createComponent((0, $b7436a6d1fd64e3b$export$b69d0d92862de18b), {
-      severity_: "error",
-      message_: "Floating buttons failed",
-      get children() {
-        return $0b0380f75d729d63$export$b23abd26de154ede({
-          search_filters_open_: category_filters_open_,
-          search_sorting_open_: category_sorting_open_,
-          current_sorting_: current_sorting_,
-          sort_and_filter_element_: sort_and_filter_element_,
-          i18n_: i18n_
-        });
-      }
-    }), _el$30, _co$12);
     $9HbP8$effect(() => $9HbP8$setAttribute(_el$13, "id", (0, $f86ba724282f6690$export$44dad306455dddf).PLP_CATEGORY));
     return _el$13;
   })()];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "3.0.18",
+  "version": "3.0.20",
   "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,9 +236,9 @@
     "@babel/plugin-transform-typescript": "^7.22.9",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "^7.22.6",
-    "@depict-ai/plp-styling": "^2.0.3",
-    "@depict-ai/types": "^5.0.2",
-    "@depict-ai/utilishared": "^2.0.6",
+    "@depict-ai/plp-styling": "^2.0.4",
+    "@depict-ai/types": "^5.0.3",
+    "@depict-ai/utilishared": "^2.0.7",
     "solid-js": "^1.8.1"
   },
   "type": "module",

package/server/ES10/index.cjs

@@ -83,7 +83,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $33eed84f447aa0c0$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447aa0c0$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "3.0.18";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "3.0.20";
 const $9d19451330d04c3c$var$_tmpl$ = ["<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"></path></svg>'];
 function $9d19451330d04c3c$export$8be2714ec7f169ee() {
   var _$escape2, _$escape3;
@@ -1985,7 +1985,8 @@ function $236a257ee52e5414$export$d41d19e89346fa2(_ref) {
     disable_fading_: true,
     slider_ref_: slider => {
       const {
-        insert_here: insert_here
+        insert_here: insert_here,
+        container: container
       } = slider;
       const Layout = props => $6c2c739b113a8ddf$export$445d8d3f5f706a40(props, insert_here, true);
       // Do like this, so we don't have to call mergeProps ourselves
@@ -1995,6 +1996,7 @@ function $236a257ee52e5414$export$d41d19e89346fa2(_ref) {
       }, layout_options_));
       $3hooq$depictaiutilishared.slider_fractional_factory(0, 0.75).constructor_plugin.call(slider, {}); // enable fractional scrolling
       insert_here.before($8edd3cf30d1fd8b4$export$a2cc176055f8f08());
+      container.classList.add("products");
     },
     get children() {
       return $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Suspense), {
@@ -5240,7 +5242,8 @@ function $e03dec587b6e91e3$export$83fd5de5504a7a67(_ref) {
       of_: of_
     },
     get_scroll_position_ = () => scrollY,
-    listen_to_scroll_on_: listen_to_scroll_on_
+    listen_to_scroll_on_: listen_to_scroll_on_,
+    velocity_too_fast_ = 1.5
   } = _ref;
   if (0, $3hooq$solidjsweb.isServer) return; // won't show in initial render and need scroll position
   const [first_to_show, set_first_to_show] = $3hooq$solidjs.createSignal(0);
@@ -5248,6 +5251,7 @@ function $e03dec587b6e91e3$export$83fd5de5504a7a67(_ref) {
   const [count_to_show, set_count_to_show] = $3hooq$solidjs.createSignal("");
   const [permitted_to_show, set_permitted_to_show] = $3hooq$solidjs.createSignal(false); // due to scroll speed
   const [show_triggered, set_show_triggered] = $3hooq$solidjs.createSignal(false); // signal to just switch between true/false to trigger a new animation which will persist the indicator
+  const [times_too_fast, set_times_too_fast] = $3hooq$solidjs.createSignal(0);
   const modified_price_formatting_ = $3hooq$solidjs.createMemo(() => ({
     ...price_formatting_(),
     places_after_comma_: 0
@@ -5257,25 +5261,27 @@ function $e03dec587b6e91e3$export$83fd5de5504a7a67(_ref) {
   let last_pos_time = +new Date();
   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(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
-    if (velocity > 1.5) {
-      times_too_fast++;
-      setTimeout(() => times_too_fast--, 1000);
+    if (velocity > velocity_too_fast_) {
+      set_times_too_fast(prev => prev + 1);
+      setTimeout(() => set_times_too_fast(prev => prev - 1), 1000);
     }
-    if (times_too_fast > 10) {
-      set_permitted_to_show(true);
-      unpermit_when_possible = false;
-    } else if (animation) unpermit_when_possible = true;else set_permitted_to_show(false);
     last_pos_time = now;
     last_pos = get_scroll_position_();
   };
   $1689794f03ba2554$export$205efb947c7ffd78(handle_scrollpos_change, undefined, listen_to_scroll_on_);
+  $3hooq$solidjs.createComputed(() => {
+    // We need to set this reactively to ensure that it's forbidden to show even when times_too_fast has tapered off after a few seconds, see https://github.com/depict-org/depict/pull/82
+    if (times_too_fast() > 10) {
+      set_permitted_to_show(true);
+      unpermit_when_possible = false;
+    } else if (animation) unpermit_when_possible = true;else set_permitted_to_show(false);
+  });
   $3hooq$solidjs.createEffect(() => {
     show_triggered();
     const first = get_first_result_in_viewport();
@@ -6086,6 +6092,7 @@ function $484eec37514a982e$export$3925f87b1545cfc6(_ref) {
                         }
                       }));
                       insert_here.classList.add("generated-spacing");
+                      container.classList.add("products");
                       $3hooq$solidjs.createEffect(
                       // @ts-ignore
                       $3hooq$solidjs.on(query_base_, () => insert_here.scrollTo({
@@ -6099,13 +6106,13 @@ function $484eec37514a982e$export$3925f87b1545cfc6(_ref) {
                         // 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
+                          listen_to_scroll_on_: insert_here,
+                          velocity_too_fast_: 3 // Require twice as hard scrolling to show ScrollStatus in slider since it's easier to scroll fast there
                         });
-                        const {
-                          childNodes: childNodes
-                        } = container;
+
+                        const non_solid_nodes = [...container.childNodes];
                         // 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
-                        $3hooq$solidjsweb.insert(container, $3hooq$solidjs.createMemo(() => [...childNodes, rendered_scroll_status]));
+                        $3hooq$solidjsweb.insert(container, $3hooq$solidjs.createMemo(() => [...non_solid_nodes, rendered_scroll_status]));
                       }
                     },
                     children: listing_contents
@@ -7369,7 +7376,7 @@ function $eef41d50f07bf19a$export$d31a1a1a83ad9413(plp_results_, _ref) {
 const $ede6c70ecdca46fe$var$_tmpl$ = ["<div", ' class="product-count"><!--$-->', "<!--/--> <!--$-->", "<!--/--></div>"],
   $ede6c70ecdca46fe$var$_tmpl$2 = ["<div", "></div>"],
   $ede6c70ecdca46fe$var$_tmpl$3 = ["<div", ' class="filter-results-for-one-row"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"],
-  $ede6c70ecdca46fe$var$_tmpl$4 = ["<div", ' class="depict plp category"><div class="listing-page"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
+  $ede6c70ecdca46fe$var$_tmpl$4 = ["<div", ' class="depict plp category"><div class="listing-page"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div>"];
 function $ede6c70ecdca46fe$export$f7d2f673fc2f091d(_ref) {
   let {
     depict_api_: depict_api_,
@@ -7719,22 +7726,23 @@ function $ede6c70ecdca46fe$export$f7d2f673fc2f091d(_ref) {
     }
   })), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
     get when() {
-      return layout_options_().layout === "grid";
+      var _layout_options_$layo;
+      return !((_layout_options_$layo = layout_options_().layout) !== null && _layout_options_$layo !== void 0 && _layout_options_$layo.startsWith("slider"));
     },
     get children() {
-      return $3hooq$solidjsweb.createComponent(ConfiguredScrollStatus, {});
-    }
-  })), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $1b3cf201cdd38687$export$b69d0d92862de18b), {
-    severity_: "error",
-    message_: "Floating buttons failed",
-    get children() {
-      return $b7cbae23560f11b9$export$b23abd26de154ede({
-        search_filters_open_: category_filters_open_,
-        search_sorting_open_: category_sorting_open_,
-        current_sorting_: current_sorting_,
-        sort_and_filter_element_: sort_and_filter_element_,
-        i18n_: i18n_
-      });
+      return [$3hooq$solidjsweb.createComponent(ConfiguredScrollStatus, {}), $3hooq$solidjsweb.createComponent((0, $1b3cf201cdd38687$export$b69d0d92862de18b), {
+        severity_: "error",
+        message_: "Floating buttons failed",
+        get children() {
+          return $b7cbae23560f11b9$export$b23abd26de154ede({
+            search_filters_open_: category_filters_open_,
+            search_sorting_open_: category_sorting_open_,
+            current_sorting_: current_sorting_,
+            sort_and_filter_element_: sort_and_filter_element_,
+            i18n_: i18n_
+          });
+        }
+      })];
     }
   })))];
 }

package/server/ES10/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.18";
+export const version = "3.0.20";
 export type SDKColsAtSize = [number, number?][];
 /**
  * Transform SDK ColsAtSize into valid Layout ColsAtSize

package/server/ES10/index.js

@@ -10,7 +10,7 @@ import { createStore as $b8hua$createStore, reconcile as $b8hua$reconcile } from
 /*! 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 = "3.0.18";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "3.0.20";
 const $ca6ab5f08bd28bca$var$_tmpl$ = ["<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"></path></svg>'];
 function $ca6ab5f08bd28bca$export$8be2714ec7f169ee() {
   var _$escape2, _$escape3;
@@ -1912,7 +1912,8 @@ function $39ddb986053fb759$export$d41d19e89346fa2(_ref) {
     disable_fading_: true,
     slider_ref_: slider => {
       const {
-        insert_here: insert_here
+        insert_here: insert_here,
+        container: container
       } = slider;
       const Layout = props => $63f1f8dbcd07d3b0$export$445d8d3f5f706a40(props, insert_here, true);
       // Do like this, so we don't have to call mergeProps ourselves
@@ -1922,6 +1923,7 @@ function $39ddb986053fb759$export$d41d19e89346fa2(_ref) {
       }, layout_options_));
       $b8hua$slider_fractional_factory(0, 0.75).constructor_plugin.call(slider, {}); // enable fractional scrolling
       insert_here.before($ca55612a53dbbdd2$export$a2cc176055f8f08());
+      container.classList.add("products");
     },
     get children() {
       return $b8hua$createComponent((0, $b8hua$Suspense), {
@@ -5167,7 +5169,8 @@ function $b69740fc6de9f17e$export$83fd5de5504a7a67(_ref) {
       of_: of_
     },
     get_scroll_position_ = () => scrollY,
-    listen_to_scroll_on_: listen_to_scroll_on_
+    listen_to_scroll_on_: listen_to_scroll_on_,
+    velocity_too_fast_ = 1.5
   } = _ref;
   if (0, $b8hua$isServer) return; // won't show in initial render and need scroll position
   const [first_to_show, set_first_to_show] = $b8hua$createSignal(0);
@@ -5175,6 +5178,7 @@ function $b69740fc6de9f17e$export$83fd5de5504a7a67(_ref) {
   const [count_to_show, set_count_to_show] = $b8hua$createSignal("");
   const [permitted_to_show, set_permitted_to_show] = $b8hua$createSignal(false); // due to scroll speed
   const [show_triggered, set_show_triggered] = $b8hua$createSignal(false); // signal to just switch between true/false to trigger a new animation which will persist the indicator
+  const [times_too_fast, set_times_too_fast] = $b8hua$createSignal(0);
   const modified_price_formatting_ = $b8hua$createMemo(() => ({
     ...price_formatting_(),
     places_after_comma_: 0
@@ -5184,25 +5188,27 @@ function $b69740fc6de9f17e$export$83fd5de5504a7a67(_ref) {
   let last_pos_time = +new Date();
   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(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
-    if (velocity > 1.5) {
-      times_too_fast++;
-      setTimeout(() => times_too_fast--, 1000);
+    if (velocity > velocity_too_fast_) {
+      set_times_too_fast(prev => prev + 1);
+      setTimeout(() => set_times_too_fast(prev => prev - 1), 1000);
     }
-    if (times_too_fast > 10) {
-      set_permitted_to_show(true);
-      unpermit_when_possible = false;
-    } else if (animation) unpermit_when_possible = true;else set_permitted_to_show(false);
     last_pos_time = now;
     last_pos = get_scroll_position_();
   };
   $33e7d1906c93db7d$export$205efb947c7ffd78(handle_scrollpos_change, undefined, listen_to_scroll_on_);
+  $b8hua$createComputed(() => {
+    // We need to set this reactively to ensure that it's forbidden to show even when times_too_fast has tapered off after a few seconds, see https://github.com/depict-org/depict/pull/82
+    if (times_too_fast() > 10) {
+      set_permitted_to_show(true);
+      unpermit_when_possible = false;
+    } else if (animation) unpermit_when_possible = true;else set_permitted_to_show(false);
+  });
   $b8hua$createEffect(() => {
     show_triggered();
     const first = get_first_result_in_viewport();
@@ -6013,6 +6019,7 @@ function $7faea0096f14b59b$export$3925f87b1545cfc6(_ref) {
                         }
                       }));
                       insert_here.classList.add("generated-spacing");
+                      container.classList.add("products");
                       $b8hua$createEffect(
                       // @ts-ignore
                       $b8hua$on(query_base_, () => insert_here.scrollTo({
@@ -6026,13 +6033,13 @@ function $7faea0096f14b59b$export$3925f87b1545cfc6(_ref) {
                         // 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
+                          listen_to_scroll_on_: insert_here,
+                          velocity_too_fast_: 3 // Require twice as hard scrolling to show ScrollStatus in slider since it's easier to scroll fast there
                         });
-                        const {
-                          childNodes: childNodes
-                        } = container;
+
+                        const non_solid_nodes = [...container.childNodes];
                         // 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
-                        $b8hua$insert(container, $b8hua$createMemo(() => [...childNodes, rendered_scroll_status]));
+                        $b8hua$insert(container, $b8hua$createMemo(() => [...non_solid_nodes, rendered_scroll_status]));
                       }
                     },
                     children: listing_contents
@@ -7296,7 +7303,7 @@ function $3a2bed57c9a57e21$export$d31a1a1a83ad9413(plp_results_, _ref) {
 const $4b4b262708b516ee$var$_tmpl$ = ["<div", ' class="product-count"><!--$-->', "<!--/--> <!--$-->", "<!--/--></div>"],
   $4b4b262708b516ee$var$_tmpl$2 = ["<div", "></div>"],
   $4b4b262708b516ee$var$_tmpl$3 = ["<div", ' class="filter-results-for-one-row"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"],
-  $4b4b262708b516ee$var$_tmpl$4 = ["<div", ' class="depict plp category"><div class="listing-page"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
+  $4b4b262708b516ee$var$_tmpl$4 = ["<div", ' class="depict plp category"><div class="listing-page"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div>"];
 function $4b4b262708b516ee$export$f7d2f673fc2f091d(_ref) {
   let {
     depict_api_: depict_api_,
@@ -7646,22 +7653,23 @@ function $4b4b262708b516ee$export$f7d2f673fc2f091d(_ref) {
     }
   })), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
     get when() {
-      return layout_options_().layout === "grid";
+      var _layout_options_$layo;
+      return !((_layout_options_$layo = layout_options_().layout) !== null && _layout_options_$layo !== void 0 && _layout_options_$layo.startsWith("slider"));
     },
     get children() {
-      return $b8hua$createComponent(ConfiguredScrollStatus, {});
-    }
-  })), $b8hua$escape($b8hua$createComponent((0, $74777e8fe65b3dcb$export$b69d0d92862de18b), {
-    severity_: "error",
-    message_: "Floating buttons failed",
-    get children() {
-      return $6a16b21155984cef$export$b23abd26de154ede({
-        search_filters_open_: category_filters_open_,
-        search_sorting_open_: category_sorting_open_,
-        current_sorting_: current_sorting_,
-        sort_and_filter_element_: sort_and_filter_element_,
-        i18n_: i18n_
-      });
+      return [$b8hua$createComponent(ConfiguredScrollStatus, {}), $b8hua$createComponent((0, $74777e8fe65b3dcb$export$b69d0d92862de18b), {
+        severity_: "error",
+        message_: "Floating buttons failed",
+        get children() {
+          return $6a16b21155984cef$export$b23abd26de154ede({
+            search_filters_open_: category_filters_open_,
+            search_sorting_open_: category_sorting_open_,
+            current_sorting_: current_sorting_,
+            sort_and_filter_element_: sort_and_filter_element_,
+            i18n_: i18n_
+          });
+        }
+      })];
     }
   })))];
 }