@unpunnyfuns/swatchbook-blocks 0.20.0 → 0.20.2

package/dist/index.mjs

@@ -1082,62 +1082,65 @@ function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searcha
 				"aria-label": "Fuzzy-search colors by path or value",
 				"data-testid": "color-table-search"
 			})
-		}), /* @__PURE__ */ jsxs("table", {
-			className: "sb-color-table__table",
-			children: [
-				/* @__PURE__ */ jsx("caption", {
-					className: "sb-color-table__caption",
-					children: captionText
-				}),
-				/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-					/* @__PURE__ */ jsx("th", {
-						className: "sb-color-table__th sb-color-table__th--swatch",
-						children: /* @__PURE__ */ jsx("span", {
-							className: "sb-color-table__sr-only",
-							children: "Swatch"
-						})
-					}),
-					/* @__PURE__ */ jsx("th", {
-						className: "sb-color-table__th sb-color-table__th--path",
-						children: "Name"
-					}),
-					/* @__PURE__ */ jsx("th", {
-						className: "sb-color-table__th",
-						children: "Value"
-					}),
-					/* @__PURE__ */ jsx("th", {
-						className: "sb-color-table__th",
-						children: "CSS var"
-					}),
-					/* @__PURE__ */ jsx("th", {
-						className: "sb-color-table__th",
-						children: "Alias"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "sb-color-table__scroll",
+			children: /* @__PURE__ */ jsxs("table", {
+				className: "sb-color-table__table",
+				children: [
+					/* @__PURE__ */ jsx("caption", {
+						className: "sb-color-table__caption",
+						children: captionText
 					}),
-					/* @__PURE__ */ jsx("th", {
-						className: "sb-color-table__th sb-color-table__th--expand",
-						children: /* @__PURE__ */ jsx("span", {
-							className: "sb-color-table__sr-only",
-							children: "Expand"
+					/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							className: "sb-color-table__th sb-color-table__th--swatch",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "sb-color-table__sr-only",
+								children: "Swatch"
+							})
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: "sb-color-table__th sb-color-table__th--path",
+							children: "Name"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: "sb-color-table__th",
+							children: "Value"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: "sb-color-table__th",
+							children: "CSS var"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: "sb-color-table__th",
+							children: "Alias"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: "sb-color-table__th sb-color-table__th--expand",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "sb-color-table__sr-only",
+								children: "Expand"
+							})
 						})
-					})
-				] }) }),
-				/* @__PURE__ */ jsxs("tbody", { children: [visibleGroups.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", {
-					colSpan: COLUMN_COUNT,
-					className: "sb-color-table__td sb-color-table__empty-row",
-					children: [
-						"No colors match \"",
-						query.trim(),
-						"\"."
-					]
-				}) }), visibleGroups.map((group) => /* @__PURE__ */ jsx(GroupRow, {
-					group,
-					selectedLabel: selectedByBase[group.base],
-					expanded: expandedByBase.has(group.base),
-					onToggleExpand: toggleExpand,
-					onSelectVariant: selectVariant,
-					...onSelect !== void 0 && { onSelect }
-				}, group.base))] })
-			]
+					] }) }),
+					/* @__PURE__ */ jsxs("tbody", { children: [visibleGroups.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", {
+						colSpan: COLUMN_COUNT,
+						className: "sb-color-table__td sb-color-table__empty-row",
+						children: [
+							"No colors match \"",
+							query.trim(),
+							"\"."
+						]
+					}) }), visibleGroups.map((group) => /* @__PURE__ */ jsx(GroupRow, {
+						group,
+						selectedLabel: selectedByBase[group.base],
+						expanded: expandedByBase.has(group.base),
+						onToggleExpand: toggleExpand,
+						onSelectVariant: selectVariant,
+						...onSelect !== void 0 && { onSelect }
+					}, group.base))] })
+				]
+			})
 		})]
 	});
 }
@@ -2068,13 +2071,31 @@ function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" })
 //#endregion
 //#region src/internal/prefers-reduced-motion.ts
 /**
+* True when rendering inside Chromatic's snapshot runner. Chromatic's
+* browser ships a recognisable user-agent string; checked here so
+* motion-looping components can fall back to their static state for
+* deterministic snapshots without needing a global Chromatic parameter
+* (globally forcing `prefersReducedMotion: true` broke Chromatic's
+* verification parser in our setup — see commit 893331f).
+*/
+function isChromatic() {
+	if (typeof navigator === "undefined") return false;
+	return navigator.userAgent.includes("Chromatic");
+}
+/**
 * Reactive `prefers-reduced-motion: reduce` detector. Returns the current
-* match and updates if the user toggles the OS-level preference.
+* match and updates if the user toggles the OS-level preference. Also
+* returns `true` under Chromatic to keep animated samples deterministic
+* during visual regression capture.
 */
 function usePrefersReducedMotion() {
 	const [reduced, setReduced] = useState(false);
 	useEffect(() => {
 		if (typeof window === "undefined") return;
+		if (isChromatic()) {
+			setReduced(true);
+			return;
+		}
 		const query = window.matchMedia("(prefers-reduced-motion: reduce)");
 		setReduced(query.matches);
 		const onChange = (e) => setReduced(e.matches);