@depict-ai/ui 4.1.6 → 4.1.8

package/ES10/index.cjs

@@ -99,7 +99,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447a
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $98aef9965764903d$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.1.6";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.1.8";
 
 /**
  * This is a function that will safely clone an object that may contain promises.
@@ -7930,25 +7930,33 @@ function $476a3dc36afc1938$export$82ed4b28ecb67608(_ref) {
   const checkboxes = $52FdA$solidjs.createMemo(() => {
     const meta = filter_().meta;
     return meta.values.map((value_, index) => {
-      var _meta$names, _meta$counts;
+      var _meta$names, _meta$counts, _meta$swatches;
       return {
         value_: value_,
         name_: (_meta$names = meta.names) === null || _meta$names === void 0 ? void 0 : _meta$names[index],
-        count_: (_meta$counts = meta.counts) === null || _meta$counts === void 0 ? void 0 : _meta$counts[index]
+        count_: (_meta$counts = meta.counts) === null || _meta$counts === void 0 ? void 0 : _meta$counts[index],
+        swatch_: (_meta$swatches = meta.swatches) === null || _meta$swatches === void 0 ? void 0 : _meta$swatches[index]
       };
     });
   });
+  const backendFilterV2 = $52FdA$solidjs.createMemo(() => "swatches" in (filter_().meta || {}));
   const render_checkbox = checkbox => {
-    const color_name = $52FdA$solidjs.createMemo(() => {
+    const hex_color = $52FdA$solidjs.createMemo(() => {
       var _split;
-      return ((_split = checkbox().value_.split(";")) === null || _split === void 0 ? void 0 : _split[0]) || "";
+      if (backendFilterV2()) return checkbox().swatch_ || "#000";
+      return ((_split = checkbox().value_.split(";")) === null || _split === void 0 ? void 0 : _split[1]) || "";
     });
-    const hex_color = $52FdA$solidjs.createMemo(() => {
-      var _split2;
-      return ((_split2 = checkbox().value_.split(";")) === null || _split2 === void 0 ? void 0 : _split2[1]) || "";
+    const hasGradientOrOtherValidNonHexColor = $52FdA$solidjs.createMemo(() => {
+      const color = hex_color();
+      return !!color && !color.startsWith("#");
+    });
+    const setBlackCheckClass = $52FdA$solidjs.createMemo(() => {
+      // Set this to true if we should show a black tick in the checkbox for better contrast on light backgrounds
+      if (hasGradientOrOtherValidNonHexColor()) return false;
+      const rgb_color = $52FdA$depictaiutilishared.hex_to_rgb(hex_color());
+      if (!rgb_color) return false;
+      return $476a3dc36afc1938$var$does_black_contrast_better(rgb_color);
     });
-    const rgb_color = $52FdA$solidjs.createMemo(() => $52FdA$depictaiutilishared.hex_to_rgb(hex_color()));
-    const black_contrast_better = $52FdA$solidjs.createMemo(() => rgb_color() ? $476a3dc36afc1938$var$does_black_contrast_better(rgb_color()) : false);
     const is_checked = $52FdA$solidjs.createMemo(() => {
       var _existing_filter;
       const data = (_existing_filter = existing_filter()) === null || _existing_filter === void 0 ? void 0 : _existing_filter.data;
@@ -7958,6 +7966,11 @@ function $476a3dc36afc1938$export$82ed4b28ecb67608(_ref) {
     const value = $52FdA$solidjs.createMemo(() => checkbox().value_);
     const label_text = $52FdA$solidjs.createMemo(() => checkbox().name_ || value() + "");
     const count = $52FdA$solidjs.createMemo(() => checkbox().count_);
+    const colorNameDatasetValue = $52FdA$solidjs.createMemo(() => {
+      var _split2;
+      if (backendFilterV2()) return label_text();
+      return ((_split2 = checkbox().value_.split(";")) === null || _split2 === void 0 ? void 0 : _split2[0]) || "";
+    });
     const input_row = $52FdA$solidjsweb.createComponent((0, $902a0ca2b52f3898$export$48513f6b9f8ce62d), {
       get value_() {
         return value();
@@ -7990,11 +8003,12 @@ function $476a3dc36afc1938$export$82ed4b28ecb67608(_ref) {
           style: style
         } = span;
         classList.add("color");
-        $52FdA$solidjs.createComputed(() => {
-          style.background = hex_color() || "black"; // default to black background so that the default-checkmark also is visible on dark page backgrounds
-          span.dataset.colorName = color_name();
-          classList.toggle("black-check", black_contrast_better());
-        });
+        $52FdA$solidjs.createRenderEffect(() => style.background = hex_color() || "black" // default to black background so that the default-checkmark also is visible on dark page backgrounds (the or here can be removed when we fully go v2)
+        );
+
+        $52FdA$solidjs.createRenderEffect(() => span.dataset.colorName = colorNameDatasetValue());
+        $52FdA$solidjs.createRenderEffect(() => classList.toggle("black-check", setBlackCheckClass()));
+        $52FdA$solidjs.createRenderEffect(() => classList.toggle("outlined-check", hasGradientOrOtherValidNonHexColor()));
       }
     });
     return input_row;
@@ -13605,6 +13619,7 @@ function $05f255c0a94b9ca1$export$4405d077f0a20494(_ref) {
     content_results_rows_: [get_history_state_content_results_rows],
     cols_at_size_: cols_at_size_
   } = _ref;
+  const colsShowingNow = $478e5a09664da64c$export$a79e666719b3647c(cols_at_size_);
   const largest_column = $52FdA$solidjs.createMemo(() => {
     const largest_in_cols_at_size = Math.max(...cols_at_size_().map(_ref2 => {
       let [cols] = _ref2;
@@ -13615,7 +13630,10 @@ function $05f255c0a94b9ca1$export$4405d077f0a20494(_ref) {
   });
   const num_placeholders = $52FdA$solidjs.createMemo(() => {
     var _get_history_state_co;
-    return ((_get_history_state_co = get_history_state_content_results_rows()) !== null && _get_history_state_co !== void 0 ? _get_history_state_co : (0, $eab939d0b95b75ee$export$70ceae36059a1036)) * largest_column();
+    return (
+      // Use how many columns we're actually showing, if available, so that we're showing exactly as many placeholders as we'd show content, so that the view more button doesn't appear/disappear and makes the layout shift
+      ((_get_history_state_co = get_history_state_content_results_rows()) !== null && _get_history_state_co !== void 0 ? _get_history_state_co : (0, $eab939d0b95b75ee$export$70ceae36059a1036)) * (colsShowingNow() || largest_column())
+    );
   });
   return $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Index), {
     get each() {

package/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 _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.1.6";
+export const version = "4.1.8";
 /**
  * This is a function that will safely clone an object that may contain promises.
  * It will use structuredClone to clone the object and then re-apply (copy) any promises that were in the original object to the cloned object.

package/ES10/index.js

@@ -10,7 +10,7 @@ import { createStore as $8tj43$createStore, reconcile as $8tj43$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 = "4.1.6";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.1.8";
 
 /**
  * This is a function that will safely clone an object that may contain promises.
@@ -7841,25 +7841,33 @@ function $2cb856c297c53e6c$export$82ed4b28ecb67608(_ref) {
   const checkboxes = $8tj43$createMemo(() => {
     const meta = filter_().meta;
     return meta.values.map((value_, index) => {
-      var _meta$names, _meta$counts;
+      var _meta$names, _meta$counts, _meta$swatches;
       return {
         value_: value_,
         name_: (_meta$names = meta.names) === null || _meta$names === void 0 ? void 0 : _meta$names[index],
-        count_: (_meta$counts = meta.counts) === null || _meta$counts === void 0 ? void 0 : _meta$counts[index]
+        count_: (_meta$counts = meta.counts) === null || _meta$counts === void 0 ? void 0 : _meta$counts[index],
+        swatch_: (_meta$swatches = meta.swatches) === null || _meta$swatches === void 0 ? void 0 : _meta$swatches[index]
       };
     });
   });
+  const backendFilterV2 = $8tj43$createMemo(() => "swatches" in (filter_().meta || {}));
   const render_checkbox = checkbox => {
-    const color_name = $8tj43$createMemo(() => {
+    const hex_color = $8tj43$createMemo(() => {
       var _split;
-      return ((_split = checkbox().value_.split(";")) === null || _split === void 0 ? void 0 : _split[0]) || "";
+      if (backendFilterV2()) return checkbox().swatch_ || "#000";
+      return ((_split = checkbox().value_.split(";")) === null || _split === void 0 ? void 0 : _split[1]) || "";
     });
-    const hex_color = $8tj43$createMemo(() => {
-      var _split2;
-      return ((_split2 = checkbox().value_.split(";")) === null || _split2 === void 0 ? void 0 : _split2[1]) || "";
+    const hasGradientOrOtherValidNonHexColor = $8tj43$createMemo(() => {
+      const color = hex_color();
+      return !!color && !color.startsWith("#");
+    });
+    const setBlackCheckClass = $8tj43$createMemo(() => {
+      // Set this to true if we should show a black tick in the checkbox for better contrast on light backgrounds
+      if (hasGradientOrOtherValidNonHexColor()) return false;
+      const rgb_color = $8tj43$hex_to_rgb(hex_color());
+      if (!rgb_color) return false;
+      return $2cb856c297c53e6c$var$does_black_contrast_better(rgb_color);
     });
-    const rgb_color = $8tj43$createMemo(() => $8tj43$hex_to_rgb(hex_color()));
-    const black_contrast_better = $8tj43$createMemo(() => rgb_color() ? $2cb856c297c53e6c$var$does_black_contrast_better(rgb_color()) : false);
     const is_checked = $8tj43$createMemo(() => {
       var _existing_filter;
       const data = (_existing_filter = existing_filter()) === null || _existing_filter === void 0 ? void 0 : _existing_filter.data;
@@ -7869,6 +7877,11 @@ function $2cb856c297c53e6c$export$82ed4b28ecb67608(_ref) {
     const value = $8tj43$createMemo(() => checkbox().value_);
     const label_text = $8tj43$createMemo(() => checkbox().name_ || value() + "");
     const count = $8tj43$createMemo(() => checkbox().count_);
+    const colorNameDatasetValue = $8tj43$createMemo(() => {
+      var _split2;
+      if (backendFilterV2()) return label_text();
+      return ((_split2 = checkbox().value_.split(";")) === null || _split2 === void 0 ? void 0 : _split2[0]) || "";
+    });
     const input_row = $8tj43$createComponent((0, $19e828709c7723a0$export$48513f6b9f8ce62d), {
       get value_() {
         return value();
@@ -7901,11 +7914,12 @@ function $2cb856c297c53e6c$export$82ed4b28ecb67608(_ref) {
           style: style
         } = span;
         classList.add("color");
-        $8tj43$createComputed(() => {
-          style.background = hex_color() || "black"; // default to black background so that the default-checkmark also is visible on dark page backgrounds
-          span.dataset.colorName = color_name();
-          classList.toggle("black-check", black_contrast_better());
-        });
+        $8tj43$createRenderEffect(() => style.background = hex_color() || "black" // default to black background so that the default-checkmark also is visible on dark page backgrounds (the or here can be removed when we fully go v2)
+        );
+
+        $8tj43$createRenderEffect(() => span.dataset.colorName = colorNameDatasetValue());
+        $8tj43$createRenderEffect(() => classList.toggle("black-check", setBlackCheckClass()));
+        $8tj43$createRenderEffect(() => classList.toggle("outlined-check", hasGradientOrOtherValidNonHexColor()));
       }
     });
     return input_row;
@@ -13516,6 +13530,7 @@ function $ad4f3c9872fbeb48$export$4405d077f0a20494(_ref) {
     content_results_rows_: [get_history_state_content_results_rows],
     cols_at_size_: cols_at_size_
   } = _ref;
+  const colsShowingNow = $40e2fa435715a1a0$export$a79e666719b3647c(cols_at_size_);
   const largest_column = $8tj43$createMemo(() => {
     const largest_in_cols_at_size = Math.max(...cols_at_size_().map(_ref2 => {
       let [cols] = _ref2;
@@ -13526,7 +13541,10 @@ function $ad4f3c9872fbeb48$export$4405d077f0a20494(_ref) {
   });
   const num_placeholders = $8tj43$createMemo(() => {
     var _get_history_state_co;
-    return ((_get_history_state_co = get_history_state_content_results_rows()) !== null && _get_history_state_co !== void 0 ? _get_history_state_co : (0, $d53ebed6f63304e4$export$70ceae36059a1036)) * largest_column();
+    return (
+      // Use how many columns we're actually showing, if available, so that we're showing exactly as many placeholders as we'd show content, so that the view more button doesn't appear/disappear and makes the layout shift
+      ((_get_history_state_co = get_history_state_content_results_rows()) !== null && _get_history_state_co !== void 0 ? _get_history_state_co : (0, $d53ebed6f63304e4$export$70ceae36059a1036)) * (colsShowingNow() || largest_column())
+    );
   });
   return $8tj43$createComponent((0, $8tj43$Index), {
     get each() {

package/latest/index.cjs

@@ -93,7 +93,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad99
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $c0a0659cf97e8eb2$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.1.6";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.1.8";
 
 /**
  * This is a function that will safely clone an object that may contain promises.
@@ -7554,15 +7554,28 @@ function $b51a2b8b9355e66c$export$82ed4b28ecb67608({
       return {
         value_: value_,
         name_: meta.names?.[index],
-        count_: meta.counts?.[index]
+        count_: meta.counts?.[index],
+        swatch_: meta.swatches?.[index]
       };
     });
   });
+  const backendFilterV2 = $gVhhF$solidjs.createMemo(() => "swatches" in (filter_().meta || {}));
   const render_checkbox = checkbox => {
-    const color_name = $gVhhF$solidjs.createMemo(() => checkbox().value_.split(";")?.[0] || "");
-    const hex_color = $gVhhF$solidjs.createMemo(() => checkbox().value_.split(";")?.[1] || "");
-    const rgb_color = $gVhhF$solidjs.createMemo(() => $gVhhF$depictaiutilishared.hex_to_rgb(hex_color()));
-    const black_contrast_better = $gVhhF$solidjs.createMemo(() => rgb_color() ? $b51a2b8b9355e66c$var$does_black_contrast_better(rgb_color()) : false);
+    const hex_color = $gVhhF$solidjs.createMemo(() => {
+      if (backendFilterV2()) return checkbox().swatch_ || "#000";
+      return checkbox().value_.split(";")?.[1] || "";
+    });
+    const hasGradientOrOtherValidNonHexColor = $gVhhF$solidjs.createMemo(() => {
+      const color = hex_color();
+      return !!color && !color.startsWith("#");
+    });
+    const setBlackCheckClass = $gVhhF$solidjs.createMemo(() => {
+      // Set this to true if we should show a black tick in the checkbox for better contrast on light backgrounds
+      if (hasGradientOrOtherValidNonHexColor()) return false;
+      const rgb_color = $gVhhF$depictaiutilishared.hex_to_rgb(hex_color());
+      if (!rgb_color) return false;
+      return $b51a2b8b9355e66c$var$does_black_contrast_better(rgb_color);
+    });
     const is_checked = $gVhhF$solidjs.createMemo(() => {
       const data = existing_filter()?.data;
       const value = $daa394359b026187$export$325f75597868c4f0(checkbox().value_);
@@ -7571,6 +7584,10 @@ function $b51a2b8b9355e66c$export$82ed4b28ecb67608({
     const value = $gVhhF$solidjs.createMemo(() => checkbox().value_);
     const label_text = $gVhhF$solidjs.createMemo(() => checkbox().name_ || value() + "");
     const count = $gVhhF$solidjs.createMemo(() => checkbox().count_);
+    const colorNameDatasetValue = $gVhhF$solidjs.createMemo(() => {
+      if (backendFilterV2()) return label_text();
+      return checkbox().value_.split(";")?.[0] || "";
+    });
     const input_row = $gVhhF$solidjsweb.createComponent((0, $1c63082b2da848ad$export$48513f6b9f8ce62d), {
       get value_() {
         return value();
@@ -7603,11 +7620,12 @@ function $b51a2b8b9355e66c$export$82ed4b28ecb67608({
           style: style
         } = span;
         classList.add("color");
-        $gVhhF$solidjs.createComputed(() => {
-          style.background = hex_color() || "black"; // default to black background so that the default-checkmark also is visible on dark page backgrounds
-          span.dataset.colorName = color_name();
-          classList.toggle("black-check", black_contrast_better());
-        });
+        $gVhhF$solidjs.createRenderEffect(() => style.background = hex_color() || "black" // default to black background so that the default-checkmark also is visible on dark page backgrounds (the or here can be removed when we fully go v2)
+        );
+
+        $gVhhF$solidjs.createRenderEffect(() => span.dataset.colorName = colorNameDatasetValue());
+        $gVhhF$solidjs.createRenderEffect(() => classList.toggle("black-check", setBlackCheckClass()));
+        $gVhhF$solidjs.createRenderEffect(() => classList.toggle("outlined-check", hasGradientOrOtherValidNonHexColor()));
       }
     });
     return input_row;
@@ -12806,12 +12824,15 @@ function $c2f92eb265a14529$export$4405d077f0a20494({
   content_results_rows_: [get_history_state_content_results_rows],
   cols_at_size_: cols_at_size_
 }) {
+  const colsShowingNow = $17d06b3bcb035500$export$a79e666719b3647c(cols_at_size_);
   const largest_column = $gVhhF$solidjs.createMemo(() => {
     const largest_in_cols_at_size = Math.max(...cols_at_size_().map(([cols]) => cols));
     if (isNaN(largest_in_cols_at_size) || Math.abs(largest_in_cols_at_size) === Infinity) return 4; // fallback to something big so we always have the right amount of placeholders
     return largest_in_cols_at_size;
   });
-  const num_placeholders = $gVhhF$solidjs.createMemo(() => (get_history_state_content_results_rows() ?? (0, $3716b8caf7f959e2$export$70ceae36059a1036)) * largest_column());
+  const num_placeholders = $gVhhF$solidjs.createMemo(() =>
+  // Use how many columns we're actually showing, if available, so that we're showing exactly as many placeholders as we'd show content, so that the view more button doesn't appear/disappear and makes the layout shift
+  (get_history_state_content_results_rows() ?? (0, $3716b8caf7f959e2$export$70ceae36059a1036)) * (colsShowingNow() || largest_column()));
   return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Index), {
     get each() {
       return Array.from({

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 _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.1.6";
+export const version = "4.1.8";
 /**
  * This is a function that will safely clone an object that may contain promises.
  * It will use structuredClone to clone the object and then re-apply (copy) any promises that were in the original object to the cloned object.

package/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.1.6";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.1.8";
 
 /**
  * This is a function that will safely clone an object that may contain promises.
@@ -7468,15 +7468,28 @@ function $e731d52d97444b7c$export$82ed4b28ecb67608({
       return {
         value_: value_,
         name_: meta.names?.[index],
-        count_: meta.counts?.[index]
+        count_: meta.counts?.[index],
+        swatch_: meta.swatches?.[index]
       };
     });
   });
+  const backendFilterV2 = $9HbP8$createMemo(() => "swatches" in (filter_().meta || {}));
   const render_checkbox = checkbox => {
-    const color_name = $9HbP8$createMemo(() => checkbox().value_.split(";")?.[0] || "");
-    const hex_color = $9HbP8$createMemo(() => checkbox().value_.split(";")?.[1] || "");
-    const rgb_color = $9HbP8$createMemo(() => $9HbP8$hex_to_rgb(hex_color()));
-    const black_contrast_better = $9HbP8$createMemo(() => rgb_color() ? $e731d52d97444b7c$var$does_black_contrast_better(rgb_color()) : false);
+    const hex_color = $9HbP8$createMemo(() => {
+      if (backendFilterV2()) return checkbox().swatch_ || "#000";
+      return checkbox().value_.split(";")?.[1] || "";
+    });
+    const hasGradientOrOtherValidNonHexColor = $9HbP8$createMemo(() => {
+      const color = hex_color();
+      return !!color && !color.startsWith("#");
+    });
+    const setBlackCheckClass = $9HbP8$createMemo(() => {
+      // Set this to true if we should show a black tick in the checkbox for better contrast on light backgrounds
+      if (hasGradientOrOtherValidNonHexColor()) return false;
+      const rgb_color = $9HbP8$hex_to_rgb(hex_color());
+      if (!rgb_color) return false;
+      return $e731d52d97444b7c$var$does_black_contrast_better(rgb_color);
+    });
     const is_checked = $9HbP8$createMemo(() => {
       const data = existing_filter()?.data;
       const value = $91aa8ee9f431800d$export$325f75597868c4f0(checkbox().value_);
@@ -7485,6 +7498,10 @@ function $e731d52d97444b7c$export$82ed4b28ecb67608({
     const value = $9HbP8$createMemo(() => checkbox().value_);
     const label_text = $9HbP8$createMemo(() => checkbox().name_ || value() + "");
     const count = $9HbP8$createMemo(() => checkbox().count_);
+    const colorNameDatasetValue = $9HbP8$createMemo(() => {
+      if (backendFilterV2()) return label_text();
+      return checkbox().value_.split(";")?.[0] || "";
+    });
     const input_row = $9HbP8$createComponent((0, $49b79728e7d9e2a1$export$48513f6b9f8ce62d), {
       get value_() {
         return value();
@@ -7517,11 +7534,12 @@ function $e731d52d97444b7c$export$82ed4b28ecb67608({
           style: style
         } = span;
         classList.add("color");
-        $9HbP8$createComputed(() => {
-          style.background = hex_color() || "black"; // default to black background so that the default-checkmark also is visible on dark page backgrounds
-          span.dataset.colorName = color_name();
-          classList.toggle("black-check", black_contrast_better());
-        });
+        $9HbP8$createRenderEffect(() => style.background = hex_color() || "black" // default to black background so that the default-checkmark also is visible on dark page backgrounds (the or here can be removed when we fully go v2)
+        );
+
+        $9HbP8$createRenderEffect(() => span.dataset.colorName = colorNameDatasetValue());
+        $9HbP8$createRenderEffect(() => classList.toggle("black-check", setBlackCheckClass()));
+        $9HbP8$createRenderEffect(() => classList.toggle("outlined-check", hasGradientOrOtherValidNonHexColor()));
       }
     });
     return input_row;
@@ -12720,12 +12738,15 @@ function $9d5b3ed1fc91c672$export$4405d077f0a20494({
   content_results_rows_: [get_history_state_content_results_rows],
   cols_at_size_: cols_at_size_
 }) {
+  const colsShowingNow = $77348875ac090fcd$export$a79e666719b3647c(cols_at_size_);
   const largest_column = $9HbP8$createMemo(() => {
     const largest_in_cols_at_size = Math.max(...cols_at_size_().map(([cols]) => cols));
     if (isNaN(largest_in_cols_at_size) || Math.abs(largest_in_cols_at_size) === Infinity) return 4; // fallback to something big so we always have the right amount of placeholders
     return largest_in_cols_at_size;
   });
-  const num_placeholders = $9HbP8$createMemo(() => (get_history_state_content_results_rows() ?? (0, $49de9d31aeea1b5e$export$70ceae36059a1036)) * largest_column());
+  const num_placeholders = $9HbP8$createMemo(() =>
+  // Use how many columns we're actually showing, if available, so that we're showing exactly as many placeholders as we'd show content, so that the view more button doesn't appear/disappear and makes the layout shift
+  (get_history_state_content_results_rows() ?? (0, $49de9d31aeea1b5e$export$70ceae36059a1036)) * (colsShowingNow() || largest_column()));
   return $9HbP8$createComponent((0, $9HbP8$Index), {
     get each() {
       return Array.from({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.1.6",
+  "version": "4.1.8",
   "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": "^3.0.14",
+    "@depict-ai/plp-styling": "^3.0.15",
     "@depict-ai/types": "^5.0.6",
     "@depict-ai/utilishared": "^2.0.16",
     "solid-js": "^1.8.12"

package/server/ES10/index.cjs

@@ -99,7 +99,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447a
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $98aef9965764903d$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.1.6";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.1.8";
 
 /**
  * This is a function that will safely clone an object that may contain promises.
@@ -6231,25 +6231,33 @@ function $476a3dc36afc1938$export$82ed4b28ecb67608(_ref) {
   const checkboxes = $3hooq$solidjs.createMemo(() => {
     const meta = filter_().meta;
     return meta.values.map((value_, index) => {
-      var _meta$names, _meta$counts;
+      var _meta$names, _meta$counts, _meta$swatches;
       return {
         value_: value_,
         name_: (_meta$names = meta.names) === null || _meta$names === void 0 ? void 0 : _meta$names[index],
-        count_: (_meta$counts = meta.counts) === null || _meta$counts === void 0 ? void 0 : _meta$counts[index]
+        count_: (_meta$counts = meta.counts) === null || _meta$counts === void 0 ? void 0 : _meta$counts[index],
+        swatch_: (_meta$swatches = meta.swatches) === null || _meta$swatches === void 0 ? void 0 : _meta$swatches[index]
       };
     });
   });
+  const backendFilterV2 = $3hooq$solidjs.createMemo(() => "swatches" in (filter_().meta || {}));
   const render_checkbox = checkbox => {
-    const color_name = $3hooq$solidjs.createMemo(() => {
+    const hex_color = $3hooq$solidjs.createMemo(() => {
       var _split;
-      return ((_split = checkbox().value_.split(";")) === null || _split === void 0 ? void 0 : _split[0]) || "";
+      if (backendFilterV2()) return checkbox().swatch_ || "#000";
+      return ((_split = checkbox().value_.split(";")) === null || _split === void 0 ? void 0 : _split[1]) || "";
     });
-    const hex_color = $3hooq$solidjs.createMemo(() => {
-      var _split2;
-      return ((_split2 = checkbox().value_.split(";")) === null || _split2 === void 0 ? void 0 : _split2[1]) || "";
+    const hasGradientOrOtherValidNonHexColor = $3hooq$solidjs.createMemo(() => {
+      const color = hex_color();
+      return !!color && !color.startsWith("#");
+    });
+    const setBlackCheckClass = $3hooq$solidjs.createMemo(() => {
+      // Set this to true if we should show a black tick in the checkbox for better contrast on light backgrounds
+      if (hasGradientOrOtherValidNonHexColor()) return false;
+      const rgb_color = $3hooq$depictaiutilishared.hex_to_rgb(hex_color());
+      if (!rgb_color) return false;
+      return $476a3dc36afc1938$var$does_black_contrast_better(rgb_color);
     });
-    const rgb_color = $3hooq$solidjs.createMemo(() => $3hooq$depictaiutilishared.hex_to_rgb(hex_color()));
-    const black_contrast_better = $3hooq$solidjs.createMemo(() => rgb_color() ? $476a3dc36afc1938$var$does_black_contrast_better(rgb_color()) : false);
     const is_checked = $3hooq$solidjs.createMemo(() => {
       var _existing_filter;
       const data = (_existing_filter = existing_filter()) === null || _existing_filter === void 0 ? void 0 : _existing_filter.data;
@@ -6259,6 +6267,11 @@ function $476a3dc36afc1938$export$82ed4b28ecb67608(_ref) {
     const value = $3hooq$solidjs.createMemo(() => checkbox().value_);
     const label_text = $3hooq$solidjs.createMemo(() => checkbox().name_ || value() + "");
     const count = $3hooq$solidjs.createMemo(() => checkbox().count_);
+    const colorNameDatasetValue = $3hooq$solidjs.createMemo(() => {
+      var _split2;
+      if (backendFilterV2()) return label_text();
+      return ((_split2 = checkbox().value_.split(";")) === null || _split2 === void 0 ? void 0 : _split2[0]) || "";
+    });
     const input_row = $3hooq$solidjsweb.createComponent((0, $902a0ca2b52f3898$export$48513f6b9f8ce62d), {
       get value_() {
         return value();
@@ -6291,11 +6304,12 @@ function $476a3dc36afc1938$export$82ed4b28ecb67608(_ref) {
           style: style
         } = span;
         classList.add("color");
-        $3hooq$solidjs.createComputed(() => {
-          style.background = hex_color() || "black"; // default to black background so that the default-checkmark also is visible on dark page backgrounds
-          span.dataset.colorName = color_name();
-          classList.toggle("black-check", black_contrast_better());
-        });
+        $3hooq$solidjs.createRenderEffect(() => style.background = hex_color() || "black" // default to black background so that the default-checkmark also is visible on dark page backgrounds (the or here can be removed when we fully go v2)
+        );
+
+        $3hooq$solidjs.createRenderEffect(() => span.dataset.colorName = colorNameDatasetValue());
+        $3hooq$solidjs.createRenderEffect(() => classList.toggle("black-check", setBlackCheckClass()));
+        $3hooq$solidjs.createRenderEffect(() => classList.toggle("outlined-check", hasGradientOrOtherValidNonHexColor()));
       }
     });
     return input_row;
@@ -11199,6 +11213,7 @@ function $05f255c0a94b9ca1$export$4405d077f0a20494(_ref) {
     content_results_rows_: [get_history_state_content_results_rows],
     cols_at_size_: cols_at_size_
   } = _ref;
+  const colsShowingNow = $478e5a09664da64c$export$a79e666719b3647c(cols_at_size_);
   const largest_column = $3hooq$solidjs.createMemo(() => {
     const largest_in_cols_at_size = Math.max(...cols_at_size_().map(_ref2 => {
       let [cols] = _ref2;
@@ -11209,7 +11224,10 @@ function $05f255c0a94b9ca1$export$4405d077f0a20494(_ref) {
   });
   const num_placeholders = $3hooq$solidjs.createMemo(() => {
     var _get_history_state_co;
-    return ((_get_history_state_co = get_history_state_content_results_rows()) !== null && _get_history_state_co !== void 0 ? _get_history_state_co : (0, $eab939d0b95b75ee$export$70ceae36059a1036)) * largest_column();
+    return (
+      // Use how many columns we're actually showing, if available, so that we're showing exactly as many placeholders as we'd show content, so that the view more button doesn't appear/disappear and makes the layout shift
+      ((_get_history_state_co = get_history_state_content_results_rows()) !== null && _get_history_state_co !== void 0 ? _get_history_state_co : (0, $eab939d0b95b75ee$export$70ceae36059a1036)) * (colsShowingNow() || largest_column())
+    );
   });
   return $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Index), {
     get each() {

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 _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.1.6";
+export const version = "4.1.8";
 /**
  * This is a function that will safely clone an object that may contain promises.
  * It will use structuredClone to clone the object and then re-apply (copy) any promises that were in the original object to the cloned object.

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 = "4.1.6";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.1.8";
 
 /**
  * This is a function that will safely clone an object that may contain promises.
@@ -6142,25 +6142,33 @@ function $2cb856c297c53e6c$export$82ed4b28ecb67608(_ref) {
   const checkboxes = $b8hua$createMemo(() => {
     const meta = filter_().meta;
     return meta.values.map((value_, index) => {
-      var _meta$names, _meta$counts;
+      var _meta$names, _meta$counts, _meta$swatches;
       return {
         value_: value_,
         name_: (_meta$names = meta.names) === null || _meta$names === void 0 ? void 0 : _meta$names[index],
-        count_: (_meta$counts = meta.counts) === null || _meta$counts === void 0 ? void 0 : _meta$counts[index]
+        count_: (_meta$counts = meta.counts) === null || _meta$counts === void 0 ? void 0 : _meta$counts[index],
+        swatch_: (_meta$swatches = meta.swatches) === null || _meta$swatches === void 0 ? void 0 : _meta$swatches[index]
       };
     });
   });
+  const backendFilterV2 = $b8hua$createMemo(() => "swatches" in (filter_().meta || {}));
   const render_checkbox = checkbox => {
-    const color_name = $b8hua$createMemo(() => {
+    const hex_color = $b8hua$createMemo(() => {
       var _split;
-      return ((_split = checkbox().value_.split(";")) === null || _split === void 0 ? void 0 : _split[0]) || "";
+      if (backendFilterV2()) return checkbox().swatch_ || "#000";
+      return ((_split = checkbox().value_.split(";")) === null || _split === void 0 ? void 0 : _split[1]) || "";
     });
-    const hex_color = $b8hua$createMemo(() => {
-      var _split2;
-      return ((_split2 = checkbox().value_.split(";")) === null || _split2 === void 0 ? void 0 : _split2[1]) || "";
+    const hasGradientOrOtherValidNonHexColor = $b8hua$createMemo(() => {
+      const color = hex_color();
+      return !!color && !color.startsWith("#");
+    });
+    const setBlackCheckClass = $b8hua$createMemo(() => {
+      // Set this to true if we should show a black tick in the checkbox for better contrast on light backgrounds
+      if (hasGradientOrOtherValidNonHexColor()) return false;
+      const rgb_color = $b8hua$hex_to_rgb(hex_color());
+      if (!rgb_color) return false;
+      return $2cb856c297c53e6c$var$does_black_contrast_better(rgb_color);
     });
-    const rgb_color = $b8hua$createMemo(() => $b8hua$hex_to_rgb(hex_color()));
-    const black_contrast_better = $b8hua$createMemo(() => rgb_color() ? $2cb856c297c53e6c$var$does_black_contrast_better(rgb_color()) : false);
     const is_checked = $b8hua$createMemo(() => {
       var _existing_filter;
       const data = (_existing_filter = existing_filter()) === null || _existing_filter === void 0 ? void 0 : _existing_filter.data;
@@ -6170,6 +6178,11 @@ function $2cb856c297c53e6c$export$82ed4b28ecb67608(_ref) {
     const value = $b8hua$createMemo(() => checkbox().value_);
     const label_text = $b8hua$createMemo(() => checkbox().name_ || value() + "");
     const count = $b8hua$createMemo(() => checkbox().count_);
+    const colorNameDatasetValue = $b8hua$createMemo(() => {
+      var _split2;
+      if (backendFilterV2()) return label_text();
+      return ((_split2 = checkbox().value_.split(";")) === null || _split2 === void 0 ? void 0 : _split2[0]) || "";
+    });
     const input_row = $b8hua$createComponent((0, $19e828709c7723a0$export$48513f6b9f8ce62d), {
       get value_() {
         return value();
@@ -6202,11 +6215,12 @@ function $2cb856c297c53e6c$export$82ed4b28ecb67608(_ref) {
           style: style
         } = span;
         classList.add("color");
-        $b8hua$createComputed(() => {
-          style.background = hex_color() || "black"; // default to black background so that the default-checkmark also is visible on dark page backgrounds
-          span.dataset.colorName = color_name();
-          classList.toggle("black-check", black_contrast_better());
-        });
+        $b8hua$createRenderEffect(() => style.background = hex_color() || "black" // default to black background so that the default-checkmark also is visible on dark page backgrounds (the or here can be removed when we fully go v2)
+        );
+
+        $b8hua$createRenderEffect(() => span.dataset.colorName = colorNameDatasetValue());
+        $b8hua$createRenderEffect(() => classList.toggle("black-check", setBlackCheckClass()));
+        $b8hua$createRenderEffect(() => classList.toggle("outlined-check", hasGradientOrOtherValidNonHexColor()));
       }
     });
     return input_row;
@@ -11110,6 +11124,7 @@ function $ad4f3c9872fbeb48$export$4405d077f0a20494(_ref) {
     content_results_rows_: [get_history_state_content_results_rows],
     cols_at_size_: cols_at_size_
   } = _ref;
+  const colsShowingNow = $40e2fa435715a1a0$export$a79e666719b3647c(cols_at_size_);
   const largest_column = $b8hua$createMemo(() => {
     const largest_in_cols_at_size = Math.max(...cols_at_size_().map(_ref2 => {
       let [cols] = _ref2;
@@ -11120,7 +11135,10 @@ function $ad4f3c9872fbeb48$export$4405d077f0a20494(_ref) {
   });
   const num_placeholders = $b8hua$createMemo(() => {
     var _get_history_state_co;
-    return ((_get_history_state_co = get_history_state_content_results_rows()) !== null && _get_history_state_co !== void 0 ? _get_history_state_co : (0, $d53ebed6f63304e4$export$70ceae36059a1036)) * largest_column();
+    return (
+      // Use how many columns we're actually showing, if available, so that we're showing exactly as many placeholders as we'd show content, so that the view more button doesn't appear/disappear and makes the layout shift
+      ((_get_history_state_co = get_history_state_content_results_rows()) !== null && _get_history_state_co !== void 0 ? _get_history_state_co : (0, $d53ebed6f63304e4$export$70ceae36059a1036)) * (colsShowingNow() || largest_column())
+    );
   });
   return $b8hua$createComponent((0, $b8hua$Index), {
     get each() {

package/server/latest/index.cjs

@@ -93,7 +93,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad99
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $c0a0659cf97e8eb2$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.1.6";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.1.8";
 
 /**
  * This is a function that will safely clone an object that may contain promises.
@@ -5901,15 +5901,28 @@ function $b51a2b8b9355e66c$export$82ed4b28ecb67608({
       return {
         value_: value_,
         name_: meta.names?.[index],
-        count_: meta.counts?.[index]
+        count_: meta.counts?.[index],
+        swatch_: meta.swatches?.[index]
       };
     });
   });
+  const backendFilterV2 = $5vyXB$solidjs.createMemo(() => "swatches" in (filter_().meta || {}));
   const render_checkbox = checkbox => {
-    const color_name = $5vyXB$solidjs.createMemo(() => checkbox().value_.split(";")?.[0] || "");
-    const hex_color = $5vyXB$solidjs.createMemo(() => checkbox().value_.split(";")?.[1] || "");
-    const rgb_color = $5vyXB$solidjs.createMemo(() => $5vyXB$depictaiutilishared.hex_to_rgb(hex_color()));
-    const black_contrast_better = $5vyXB$solidjs.createMemo(() => rgb_color() ? $b51a2b8b9355e66c$var$does_black_contrast_better(rgb_color()) : false);
+    const hex_color = $5vyXB$solidjs.createMemo(() => {
+      if (backendFilterV2()) return checkbox().swatch_ || "#000";
+      return checkbox().value_.split(";")?.[1] || "";
+    });
+    const hasGradientOrOtherValidNonHexColor = $5vyXB$solidjs.createMemo(() => {
+      const color = hex_color();
+      return !!color && !color.startsWith("#");
+    });
+    const setBlackCheckClass = $5vyXB$solidjs.createMemo(() => {
+      // Set this to true if we should show a black tick in the checkbox for better contrast on light backgrounds
+      if (hasGradientOrOtherValidNonHexColor()) return false;
+      const rgb_color = $5vyXB$depictaiutilishared.hex_to_rgb(hex_color());
+      if (!rgb_color) return false;
+      return $b51a2b8b9355e66c$var$does_black_contrast_better(rgb_color);
+    });
     const is_checked = $5vyXB$solidjs.createMemo(() => {
       const data = existing_filter()?.data;
       const value = $daa394359b026187$export$325f75597868c4f0(checkbox().value_);
@@ -5918,6 +5931,10 @@ function $b51a2b8b9355e66c$export$82ed4b28ecb67608({
     const value = $5vyXB$solidjs.createMemo(() => checkbox().value_);
     const label_text = $5vyXB$solidjs.createMemo(() => checkbox().name_ || value() + "");
     const count = $5vyXB$solidjs.createMemo(() => checkbox().count_);
+    const colorNameDatasetValue = $5vyXB$solidjs.createMemo(() => {
+      if (backendFilterV2()) return label_text();
+      return checkbox().value_.split(";")?.[0] || "";
+    });
     const input_row = $5vyXB$solidjsweb.createComponent((0, $1c63082b2da848ad$export$48513f6b9f8ce62d), {
       get value_() {
         return value();
@@ -5950,11 +5967,12 @@ function $b51a2b8b9355e66c$export$82ed4b28ecb67608({
           style: style
         } = span;
         classList.add("color");
-        $5vyXB$solidjs.createComputed(() => {
-          style.background = hex_color() || "black"; // default to black background so that the default-checkmark also is visible on dark page backgrounds
-          span.dataset.colorName = color_name();
-          classList.toggle("black-check", black_contrast_better());
-        });
+        $5vyXB$solidjs.createRenderEffect(() => style.background = hex_color() || "black" // default to black background so that the default-checkmark also is visible on dark page backgrounds (the or here can be removed when we fully go v2)
+        );
+
+        $5vyXB$solidjs.createRenderEffect(() => span.dataset.colorName = colorNameDatasetValue());
+        $5vyXB$solidjs.createRenderEffect(() => classList.toggle("black-check", setBlackCheckClass()));
+        $5vyXB$solidjs.createRenderEffect(() => classList.toggle("outlined-check", hasGradientOrOtherValidNonHexColor()));
       }
     });
     return input_row;
@@ -10470,12 +10488,15 @@ function $c2f92eb265a14529$export$4405d077f0a20494({
   content_results_rows_: [get_history_state_content_results_rows],
   cols_at_size_: cols_at_size_
 }) {
+  const colsShowingNow = $17d06b3bcb035500$export$a79e666719b3647c(cols_at_size_);
   const largest_column = $5vyXB$solidjs.createMemo(() => {
     const largest_in_cols_at_size = Math.max(...cols_at_size_().map(([cols]) => cols));
     if (isNaN(largest_in_cols_at_size) || Math.abs(largest_in_cols_at_size) === Infinity) return 4; // fallback to something big so we always have the right amount of placeholders
     return largest_in_cols_at_size;
   });
-  const num_placeholders = $5vyXB$solidjs.createMemo(() => (get_history_state_content_results_rows() ?? (0, $3716b8caf7f959e2$export$70ceae36059a1036)) * largest_column());
+  const num_placeholders = $5vyXB$solidjs.createMemo(() =>
+  // Use how many columns we're actually showing, if available, so that we're showing exactly as many placeholders as we'd show content, so that the view more button doesn't appear/disappear and makes the layout shift
+  (get_history_state_content_results_rows() ?? (0, $3716b8caf7f959e2$export$70ceae36059a1036)) * (colsShowingNow() || largest_column()));
   return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Index), {
     get each() {
       return Array.from({

package/server/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 _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.1.6";
+export const version = "4.1.8";
 /**
  * This is a function that will safely clone an object that may contain promises.
  * It will use structuredClone to clone the object and then re-apply (copy) any promises that were in the original object to the cloned object.

package/server/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $i7OB2$createStore, reconcile as $i7OB2$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.1.6";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.1.8";
 
 /**
  * This is a function that will safely clone an object that may contain promises.
@@ -5815,15 +5815,28 @@ function $e731d52d97444b7c$export$82ed4b28ecb67608({
       return {
         value_: value_,
         name_: meta.names?.[index],
-        count_: meta.counts?.[index]
+        count_: meta.counts?.[index],
+        swatch_: meta.swatches?.[index]
       };
     });
   });
+  const backendFilterV2 = $i7OB2$createMemo(() => "swatches" in (filter_().meta || {}));
   const render_checkbox = checkbox => {
-    const color_name = $i7OB2$createMemo(() => checkbox().value_.split(";")?.[0] || "");
-    const hex_color = $i7OB2$createMemo(() => checkbox().value_.split(";")?.[1] || "");
-    const rgb_color = $i7OB2$createMemo(() => $i7OB2$hex_to_rgb(hex_color()));
-    const black_contrast_better = $i7OB2$createMemo(() => rgb_color() ? $e731d52d97444b7c$var$does_black_contrast_better(rgb_color()) : false);
+    const hex_color = $i7OB2$createMemo(() => {
+      if (backendFilterV2()) return checkbox().swatch_ || "#000";
+      return checkbox().value_.split(";")?.[1] || "";
+    });
+    const hasGradientOrOtherValidNonHexColor = $i7OB2$createMemo(() => {
+      const color = hex_color();
+      return !!color && !color.startsWith("#");
+    });
+    const setBlackCheckClass = $i7OB2$createMemo(() => {
+      // Set this to true if we should show a black tick in the checkbox for better contrast on light backgrounds
+      if (hasGradientOrOtherValidNonHexColor()) return false;
+      const rgb_color = $i7OB2$hex_to_rgb(hex_color());
+      if (!rgb_color) return false;
+      return $e731d52d97444b7c$var$does_black_contrast_better(rgb_color);
+    });
     const is_checked = $i7OB2$createMemo(() => {
       const data = existing_filter()?.data;
       const value = $91aa8ee9f431800d$export$325f75597868c4f0(checkbox().value_);
@@ -5832,6 +5845,10 @@ function $e731d52d97444b7c$export$82ed4b28ecb67608({
     const value = $i7OB2$createMemo(() => checkbox().value_);
     const label_text = $i7OB2$createMemo(() => checkbox().name_ || value() + "");
     const count = $i7OB2$createMemo(() => checkbox().count_);
+    const colorNameDatasetValue = $i7OB2$createMemo(() => {
+      if (backendFilterV2()) return label_text();
+      return checkbox().value_.split(";")?.[0] || "";
+    });
     const input_row = $i7OB2$createComponent((0, $49b79728e7d9e2a1$export$48513f6b9f8ce62d), {
       get value_() {
         return value();
@@ -5864,11 +5881,12 @@ function $e731d52d97444b7c$export$82ed4b28ecb67608({
           style: style
         } = span;
         classList.add("color");
-        $i7OB2$createComputed(() => {
-          style.background = hex_color() || "black"; // default to black background so that the default-checkmark also is visible on dark page backgrounds
-          span.dataset.colorName = color_name();
-          classList.toggle("black-check", black_contrast_better());
-        });
+        $i7OB2$createRenderEffect(() => style.background = hex_color() || "black" // default to black background so that the default-checkmark also is visible on dark page backgrounds (the or here can be removed when we fully go v2)
+        );
+
+        $i7OB2$createRenderEffect(() => span.dataset.colorName = colorNameDatasetValue());
+        $i7OB2$createRenderEffect(() => classList.toggle("black-check", setBlackCheckClass()));
+        $i7OB2$createRenderEffect(() => classList.toggle("outlined-check", hasGradientOrOtherValidNonHexColor()));
       }
     });
     return input_row;
@@ -10384,12 +10402,15 @@ function $9d5b3ed1fc91c672$export$4405d077f0a20494({
   content_results_rows_: [get_history_state_content_results_rows],
   cols_at_size_: cols_at_size_
 }) {
+  const colsShowingNow = $77348875ac090fcd$export$a79e666719b3647c(cols_at_size_);
   const largest_column = $i7OB2$createMemo(() => {
     const largest_in_cols_at_size = Math.max(...cols_at_size_().map(([cols]) => cols));
     if (isNaN(largest_in_cols_at_size) || Math.abs(largest_in_cols_at_size) === Infinity) return 4; // fallback to something big so we always have the right amount of placeholders
     return largest_in_cols_at_size;
   });
-  const num_placeholders = $i7OB2$createMemo(() => (get_history_state_content_results_rows() ?? (0, $49de9d31aeea1b5e$export$70ceae36059a1036)) * largest_column());
+  const num_placeholders = $i7OB2$createMemo(() =>
+  // Use how many columns we're actually showing, if available, so that we're showing exactly as many placeholders as we'd show content, so that the view more button doesn't appear/disappear and makes the layout shift
+  (get_history_state_content_results_rows() ?? (0, $49de9d31aeea1b5e$export$70ceae36059a1036)) * (colsShowingNow() || largest_column()));
   return $i7OB2$createComponent((0, $i7OB2$Index), {
     get each() {
       return Array.from({