@patternmode/swatch 0.9.2 → 0.10.0

package/dist/index.mjs

@@ -2,16 +2,27 @@ import { PATTERNMODE_SIZES, PATTERNMODE_SIZE_VALUES, getObjectSizingStyle, joinC
 import { LazyMotion, domMax, m } from "motion/react";
 import { useRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/DistributionBar/DistributionBarMath.ts
-function getDistributionTotal(segments) {
-	return segments.reduce((sum, segment) => sum + sanitizeValue(segment.value), 0);
-}
-function getDistributionBoundaryPercent(segments, boundaryIndex) {
+import { Slot, Slottable } from "@radix-ui/react-slot";
+//#region src/DistributionBar/distribution-bar-math.ts
+const sanitizeValue = (value) => Number.isFinite(value) ? Math.max(0, value) : 0;
+const clamp$1 = (value, min, max) => Math.min(Math.max(value, min), max);
+const roundValue = (value) => Number(value.toFixed(1));
+/** Sums sanitized segment weights, treating invalid or negative values as 0. */
+const getDistributionTotal = (segments) => segments.reduce((sum, segment) => sum + sanitizeValue(segment.value), 0);
+/** Returns the percentage position of the boundary after `boundaryIndex`. */
+const getDistributionBoundaryPercent = (segments, boundaryIndex) => {
 	const total = getDistributionTotal(segments);
 	if (total <= 0) return 0;
 	return roundValue(segments.slice(0, boundaryIndex + 1).reduce((sum, segment) => sum + sanitizeValue(segment.value), 0) / total * 100);
-}
-function moveDistributionBoundary(segments, boundaryIndex, deltaValue, minValue) {
+};
+/**
+* Moves the boundary between two adjacent segments while preserving their sum.
+*
+* `deltaValue` is applied to the left segment and subtracted from the right
+* segment. `minValue` prevents either side of the pair from collapsing below a
+* caller-defined minimum.
+*/
+const moveDistributionBoundary = (segments, boundaryIndex, deltaValue, minValue) => {
 	const left = segments[boundaryIndex];
 	const right = segments[boundaryIndex + 1];
 	if (!(left && right)) return segments;
@@ -30,8 +41,9 @@ function moveDistributionBoundary(segments, boundaryIndex, deltaValue, minValue)
 		};
 		return segment;
 	});
-}
-function removeDistributionSegment(segments, segmentId) {
+};
+/** Removes a segment and redistributes its weight proportionally to the rest. */
+const removeDistributionSegment = (segments, segmentId) => {
 	if (segments.length <= 1) return segments;
 	const removed = segments.find((segment) => segment.id === segmentId);
 	if (!removed) return segments;
@@ -59,25 +71,111 @@ function removeDistributionSegment(segments, segmentId) {
 			value: nextValue
 		};
 	});
-}
-function updateDistributionSegment(segments, segmentId, update) {
-	return segments.map((segment) => segment.id === segmentId ? {
-		...segment,
-		...update
-	} : segment);
-}
-function sanitizeValue(value) {
-	return Number.isFinite(value) ? Math.max(0, value) : 0;
-}
-function clamp$1(value, min, max) {
-	return Math.min(Math.max(value, min), max);
-}
-function roundValue(value) {
-	return Number(value.toFixed(1));
-}
+};
+/** Updates non-weight segment metadata such as label or color. */
+const updateDistributionSegment = (segments, segmentId, update) => segments.map((segment) => segment.id === segmentId ? {
+	...segment,
+	...update
+} : segment);
 //#endregion
-//#region src/DistributionBar/DistributionBarRoot.tsx
-function DistributionDisplay({ "aria-label": ariaLabel, assignedLabel = "assigned", className, emptyLabel = "unassigned", emptyValue = 0, legend = "segments", onSegmentSelect, segments, selectedSegmentId, ...props }) {
+//#region src/DistributionBar/distribution-bar-root.tsx
+const getRenderableDistributionValue = (value) => Number.isFinite(value) ? Math.max(0, value) : 0;
+const getDerivedDistributionPercentage = (value, total) => {
+	if (!(total > 0 && Number.isFinite(value))) return 0;
+	return Math.round(Math.max(0, value) / total * 100);
+};
+const getDistributionDisplayTotal = (segments, emptyValue) => getDistributionTotal(segments) + getRenderableDistributionValue(emptyValue);
+const getDistributionDisplayAccessibleLabel = (segments, emptyValue, emptyLabel, total) => {
+	const segmentLabels = segments.map((segment) => `${segment.label ?? segment.id} ${getDerivedDistributionPercentage(segment.value, total)}%`);
+	if (emptyValue > 0) segmentLabels.push(`${emptyLabel} ${getDerivedDistributionPercentage(emptyValue, total)}%`);
+	return segmentLabels.join(", ");
+};
+const DistributionSegments = ({ emptyValue = 0, onSegmentSelect, segments, selectedSegmentId, total }) => /* @__PURE__ */ jsxs("div", {
+	className: "patternmode-distribution-bar__segments",
+	children: [segments.map((segment) => {
+		const segmentStyle = {
+			"--patternmode-distribution-segment-color": segment.color,
+			width: total > 0 ? `${getRenderableDistributionValue(segment.value) / total * 100}%` : "0%"
+		};
+		const isSelected = selectedSegmentId === segment.id;
+		if (onSegmentSelect) return /* @__PURE__ */ jsx("button", {
+			"aria-label": `${segment.label ?? segment.id} ${getDerivedDistributionPercentage(segment.value, total)}%`,
+			"aria-pressed": isSelected,
+			className: "patternmode-distribution-bar__segment",
+			"data-selected": isSelected ? "true" : void 0,
+			onClick: () => onSegmentSelect(segment),
+			style: segmentStyle,
+			type: "button"
+		}, segment.id);
+		return /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "patternmode-distribution-bar__segment",
+			"data-selected": isSelected ? "true" : void 0,
+			style: segmentStyle
+		}, segment.id);
+	}), emptyValue > 0 ? /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		className: "patternmode-distribution-bar__segment patternmode-distribution-bar__segment--empty",
+		style: { width: total > 0 ? `${getRenderableDistributionValue(emptyValue) / total * 100}%` : "0%" }
+	}) : null]
+});
+const DistributionSegmentLegend = ({ emptyLabel, emptyValue = 0, segments, total }) => /* @__PURE__ */ jsxs("div", {
+	className: "patternmode-distribution-bar__legend",
+	children: [segments.map((segment) => /* @__PURE__ */ jsxs("span", { children: [
+		/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "patternmode-distribution-bar__swatch",
+			style: { "--patternmode-distribution-segment-color": segment.color }
+		}),
+		segment.label ?? segment.id,
+		" ",
+		getDerivedDistributionPercentage(segment.value, total),
+		"%"
+	] }, segment.id)), emptyValue > 0 && emptyLabel ? /* @__PURE__ */ jsxs("span", { children: [
+		/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "patternmode-distribution-bar__swatch patternmode-distribution-bar__swatch--empty"
+		}),
+		emptyLabel,
+		" ",
+		getDerivedDistributionPercentage(emptyValue, total),
+		"%"
+	] }) : null]
+});
+const DistributionSummaryLegend = ({ assignedLabel, emptyLabel, emptyValue, total }) => {
+	const emptyPercentage = getDerivedDistributionPercentage(emptyValue, total);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "patternmode-distribution-bar__legend",
+		children: [/* @__PURE__ */ jsxs("span", { children: [
+			Math.max(0, 100 - emptyPercentage),
+			"% ",
+			assignedLabel
+		] }), emptyValue > 0 ? /* @__PURE__ */ jsxs("span", { children: [
+			emptyPercentage,
+			"% ",
+			emptyLabel
+		] }) : null]
+	});
+};
+const DistributionBarHandle = ({ "aria-label": ariaLabel, boundaryPercent, onDrag, onDragEnd, onDragStart, onKeyDown }) => /* @__PURE__ */ jsx(LazyMotion, {
+	features: domMax,
+	children: /* @__PURE__ */ jsx(m.button, {
+		"aria-label": ariaLabel,
+		className: "patternmode-distribution-bar__handle",
+		drag: "x",
+		dragElastic: 0,
+		dragMomentum: false,
+		dragSnapToOrigin: true,
+		onDrag: (_event, info) => onDrag(info),
+		onDragEnd: (_event, info) => onDragEnd(info),
+		onDragStart,
+		onKeyDown,
+		style: { left: `calc(${boundaryPercent}% - 1.375rem)` },
+		transformTemplate: () => "none",
+		type: "button"
+	})
+});
+const DistributionDisplay = ({ "aria-label": ariaLabel, assignedLabel = "assigned", className, emptyLabel = "unassigned", emptyValue = 0, legend = "segments", onSegmentSelect, segments, selectedSegmentId, ...props }) => {
 	const total = getDistributionDisplayTotal(segments, emptyValue);
 	const interactive = Boolean(onSegmentSelect);
 	const accessibleLabel = ariaLabel ?? getDistributionDisplayAccessibleLabel(segments, emptyValue, emptyLabel, total);
@@ -119,29 +217,29 @@ function DistributionDisplay({ "aria-label": ariaLabel, assignedLabel = "assigne
 		"data-slot": "distribution-display",
 		children: content
 	});
-}
-function DistributionBar({ "aria-label": ariaLabel, className, legend = "segments", minValue = 4, onChange, segments, step = 1, ...props }) {
+};
+const DistributionBar = ({ "aria-label": ariaLabel, className, legend = "segments", minValue = 4, onChange, segments, step = 1, ...props }) => {
 	const trackRef = useRef(null);
 	const dragStartSegmentsRef = useRef(null);
 	const total = getDistributionTotal(segments);
-	function moveBoundary(boundaryIndex, deltaValue, sourceSegments = segments) {
+	const moveBoundary = (boundaryIndex, deltaValue, sourceSegments = segments) => {
 		onChange?.(moveDistributionBoundary(sourceSegments, boundaryIndex, deltaValue, minValue));
-	}
-	function handleDragStart() {
+	};
+	const handleDragStart = () => {
 		dragStartSegmentsRef.current = segments;
-	}
-	function handleDrag(boundaryIndex, info) {
+	};
+	const handleDrag = (boundaryIndex, info) => {
 		const sourceSegments = dragStartSegmentsRef.current ?? segments;
 		const sourceTotal = getDistributionTotal(sourceSegments);
 		const trackWidth = trackRef.current?.getBoundingClientRect().width ?? 0;
 		if (!(trackWidth > 0 && sourceTotal > 0)) return;
 		moveBoundary(boundaryIndex, info.offset.x / trackWidth * sourceTotal, sourceSegments);
-	}
-	function handleDragEnd(boundaryIndex, info) {
+	};
+	const handleDragEnd = (boundaryIndex, info) => {
 		handleDrag(boundaryIndex, info);
 		dragStartSegmentsRef.current = null;
-	}
-	function handleKeyDown(event, boundaryIndex) {
+	};
+	const handleKeyDown = (event, boundaryIndex) => {
 		if (event.key === "ArrowLeft") {
 			event.preventDefault();
 			moveBoundary(boundaryIndex, -step);
@@ -150,7 +248,7 @@ function DistributionBar({ "aria-label": ariaLabel, className, legend = "segment
 			event.preventDefault();
 			moveBoundary(boundaryIndex, step);
 		}
-	}
+	};
 	return /* @__PURE__ */ jsxs("fieldset", {
 		...props,
 		"aria-label": ariaLabel,
@@ -179,115 +277,9 @@ function DistributionBar({ "aria-label": ariaLabel, className, legend = "segment
 			total
 		}) : null]
 	});
-}
-function DistributionSegments({ emptyValue = 0, onSegmentSelect, segments, selectedSegmentId, total }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "patternmode-distribution-bar__segments",
-		children: [segments.map((segment) => {
-			const segmentStyle = {
-				"--patternmode-distribution-segment-color": segment.color,
-				width: total > 0 ? `${getRenderableDistributionValue(segment.value) / total * 100}%` : "0%"
-			};
-			const isSelected = selectedSegmentId === segment.id;
-			if (onSegmentSelect) return /* @__PURE__ */ jsx("button", {
-				"aria-label": `${segment.label ?? segment.id} ${getDerivedDistributionPercentage(segment.value, total)}%`,
-				"aria-pressed": isSelected,
-				className: "patternmode-distribution-bar__segment",
-				"data-selected": isSelected ? "true" : void 0,
-				onClick: () => onSegmentSelect(segment),
-				style: segmentStyle,
-				type: "button"
-			}, segment.id);
-			return /* @__PURE__ */ jsx("div", {
-				"aria-hidden": "true",
-				className: "patternmode-distribution-bar__segment",
-				"data-selected": isSelected ? "true" : void 0,
-				style: segmentStyle
-			}, segment.id);
-		}), emptyValue > 0 ? /* @__PURE__ */ jsx("div", {
-			"aria-hidden": "true",
-			className: "patternmode-distribution-bar__segment patternmode-distribution-bar__segment--empty",
-			style: { width: total > 0 ? `${getRenderableDistributionValue(emptyValue) / total * 100}%` : "0%" }
-		}) : null]
-	});
-}
-function DistributionSegmentLegend({ emptyLabel, emptyValue = 0, segments, total }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "patternmode-distribution-bar__legend",
-		children: [segments.map((segment) => /* @__PURE__ */ jsxs("span", { children: [
-			/* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				className: "patternmode-distribution-bar__swatch",
-				style: { "--patternmode-distribution-segment-color": segment.color }
-			}),
-			segment.label ?? segment.id,
-			" ",
-			getDerivedDistributionPercentage(segment.value, total),
-			"%"
-		] }, segment.id)), emptyValue > 0 && emptyLabel ? /* @__PURE__ */ jsxs("span", { children: [
-			/* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				className: "patternmode-distribution-bar__swatch patternmode-distribution-bar__swatch--empty"
-			}),
-			emptyLabel,
-			" ",
-			getDerivedDistributionPercentage(emptyValue, total),
-			"%"
-		] }) : null]
-	});
-}
-function DistributionSummaryLegend({ assignedLabel, emptyLabel, emptyValue, total }) {
-	const emptyPercentage = getDerivedDistributionPercentage(emptyValue, total);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "patternmode-distribution-bar__legend",
-		children: [/* @__PURE__ */ jsxs("span", { children: [
-			Math.max(0, 100 - emptyPercentage),
-			"% ",
-			assignedLabel
-		] }), emptyValue > 0 ? /* @__PURE__ */ jsxs("span", { children: [
-			emptyPercentage,
-			"% ",
-			emptyLabel
-		] }) : null]
-	});
-}
-function getDistributionDisplayTotal(segments, emptyValue) {
-	return getDistributionTotal(segments) + getRenderableDistributionValue(emptyValue);
-}
-function getDistributionDisplayAccessibleLabel(segments, emptyValue, emptyLabel, total) {
-	const segmentLabels = segments.map((segment) => `${segment.label ?? segment.id} ${getDerivedDistributionPercentage(segment.value, total)}%`);
-	if (emptyValue > 0) segmentLabels.push(`${emptyLabel} ${getDerivedDistributionPercentage(emptyValue, total)}%`);
-	return segmentLabels.join(", ");
-}
-function getDerivedDistributionPercentage(value, total) {
-	if (!(total > 0 && Number.isFinite(value))) return 0;
-	return Math.round(Math.max(0, value) / total * 100);
-}
-function getRenderableDistributionValue(value) {
-	return Number.isFinite(value) ? Math.max(0, value) : 0;
-}
-function DistributionBarHandle({ "aria-label": ariaLabel, boundaryPercent, onDrag, onDragEnd, onDragStart, onKeyDown }) {
-	return /* @__PURE__ */ jsx(LazyMotion, {
-		features: domMax,
-		children: /* @__PURE__ */ jsx(m.button, {
-			"aria-label": ariaLabel,
-			className: "patternmode-distribution-bar__handle",
-			drag: "x",
-			dragElastic: 0,
-			dragMomentum: false,
-			dragSnapToOrigin: true,
-			onDrag: (_event, info) => onDrag(info),
-			onDragEnd: (_event, info) => onDragEnd(info),
-			onDragStart,
-			onKeyDown,
-			style: { left: `calc(${boundaryPercent}% - 1.375rem)` },
-			transformTemplate: () => "none",
-			type: "button"
-		})
-	});
-}
+};
 //#endregion
-//#region src/Swatch/SwatchAtmosphere.ts
+//#region src/Swatch/swatch-atmosphere.ts
 /**
 * Per-pool layout for the atmosphere fill:
 * `[focal x%, focal y%, base alpha (0-255), radius delta %, gravity sign]`.
@@ -346,7 +338,19 @@ const POOLS = [
 * Density controls how far each pool reaches; gravity shifts the pools
 * vertically. Returns `undefined` when there are no colors.
 */
-function getSwatchAtmosphereBackground(colors, options = {}) {
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const normalizeHex$1 = (color) => {
+	const value = color.trim().replace(/^#/u, "");
+	if (/^[\da-f]{3}$/iu.test(value)) return [...value].map((part) => part + part).join("");
+	if (/^[\da-f]{6}$/iu.test(value)) return value;
+	return null;
+};
+const withAlpha = (color, alpha) => {
+	const hex = normalizeHex$1(color);
+	if (hex) return `#${hex}${Math.round(clamp(alpha, 0, 255)).toString(16).padStart(2, "0")}`;
+	return `color-mix(in srgb, ${color} ${Math.round(clamp(alpha, 0, 255) / 255 * 100)}%, transparent)`;
+};
+const getSwatchAtmosphereBackground = (colors, options = {}) => {
 	if (!colors || colors.length === 0) return;
 	const density = clamp(options.density ?? .5, 0, 1);
 	const gravity = clamp(options.gravity ?? 0, -1, 1);
@@ -361,32 +365,30 @@ function getSwatchAtmosphereBackground(colors, options = {}) {
 		const radius = Math.max(8, reach + radiusDelta);
 		return `radial-gradient(ellipse at ${x}% ${focalY}%, ${withAlpha(color, alpha)} 0%, transparent ${radius}%)`;
 	}).join(", ");
-}
-function withAlpha(color, alpha) {
-	const hex = normalizeHex$1(color);
-	if (hex) return `#${hex}${Math.round(clamp(alpha, 0, 255)).toString(16).padStart(2, "0")}`;
-	return `color-mix(in srgb, ${color} ${Math.round(clamp(alpha, 0, 255) / 255 * 100)}%, transparent)`;
-}
-function normalizeHex$1(color) {
-	const value = color.trim().replace(/^#/, "");
-	if (/^[\da-f]{3}$/i.test(value)) return [...value].map((part) => part + part).join("");
-	if (/^[\da-f]{6}$/i.test(value)) return value;
-	return null;
-}
-function clamp(value, min, max) {
-	return Math.min(max, Math.max(min, value));
-}
+};
 //#endregion
-//#region src/Swatch/SwatchColors.ts
-function isLightColor(color) {
+//#region src/Swatch/swatch-colors.ts
+const normalizeHex = (hex) => {
+	const value = hex.trim().replace(/^#/u, "");
+	if (/^[\da-f]{3}$/iu.test(value)) return [...value].map((part) => part + part).join("");
+	if (/^[\da-f]{6}$/iu.test(value)) return value;
+	return null;
+};
+const toColorStop = (stop) => typeof stop === "string" ? { color: stop } : stop;
+const getRatioWeight = (ratio) => {
+	if (ratio === void 0) return 1;
+	return Number.isFinite(ratio) ? Math.max(0, ratio) : 0;
+};
+const formatPercent = (value) => `${Number.isInteger(value) ? value : Number(value.toFixed(2))}%`;
+const isLightColor = (color) => {
 	const normalized = normalizeHex(color);
 	if (!normalized) return false;
 	const red = Number.parseInt(normalized.slice(0, 2), 16);
 	const green = Number.parseInt(normalized.slice(2, 4), 16);
 	const blue = Number.parseInt(normalized.slice(4, 6), 16);
 	return (.299 * red + .587 * green + .114 * blue) / 255 > .62;
-}
-function getSwatchColorsBackground(colors) {
+};
+const getSwatchColorsBackground = (colors) => {
 	if (!colors || colors.length === 0) return;
 	if (colors.length === 1) return toColorStop(colors[0]).color;
 	const stops = colors.map(toColorStop);
@@ -402,25 +404,9 @@ function getSwatchColorsBackground(colors) {
 		cursor = end;
 		return `${stop.color} ${formatPercent(start)} ${formatPercent(end)}`;
 	}).join(", ")})`;
-}
-function normalizeHex(hex) {
-	const value = hex.trim().replace(/^#/, "");
-	if (/^[\da-f]{3}$/i.test(value)) return [...value].map((part) => part + part).join("");
-	if (/^[\da-f]{6}$/i.test(value)) return value;
-	return null;
-}
-function toColorStop(stop) {
-	return typeof stop === "string" ? { color: stop } : stop;
-}
-function getRatioWeight(ratio) {
-	if (ratio === void 0) return 1;
-	return Number.isFinite(ratio) ? Math.max(0, ratio) : 0;
-}
-function formatPercent(value) {
-	return `${Number.isInteger(value) ? value : Number(value.toFixed(2))}%`;
-}
+};
 //#endregion
-//#region src/Swatch/SwatchTypes.ts
+//#region src/Swatch/swatch-types.ts
 const SWATCH_SIZES = [
 	...PATTERNMODE_SIZES,
 	"4xl",
@@ -442,19 +428,77 @@ const SWATCH_SHAPES = [
 	"block"
 ];
 const SWATCH_TEXTURES = ["atmosphere"];
-function getSwatchSizeVariableStyle(size, variableName = "--patternmode-swatch-size") {
-	return { [variableName]: SWATCH_SIZE_VALUES[size] };
-}
+const getSwatchSizeVariableStyle = (size, variableName = "--patternmode-swatch-size") => ({ [variableName]: SWATCH_SIZE_VALUES[size] });
 //#endregion
-//#region src/Swatch/SwatchRoot.tsx
-function Swatch({ "aria-label": ariaLabel, background, children, className, color, colors, density, flat = false, gravity, icon: Icon, isLight, objectFit, objectPosition, onRemove, raised = false, removeLabel, role: _role, selected = false, shape = "circle", showRing = true, size = "base", style, texture, unavailable = false, ...props }) {
+//#region src/Swatch/swatch-root.tsx
+const SwatchContent = ({ children, flat, Icon, mediaStyle, selected, unavailable }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+	/* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "patternmode-swatch__fill"
+	}),
+	children ? /* @__PURE__ */ jsx("span", {
+		className: "patternmode-swatch__media",
+		style: mediaStyle,
+		children
+	}) : null,
+	flat ? null : /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "patternmode-swatch__scrim"
+	}),
+	selected && Icon ? /* @__PURE__ */ jsx("span", {
+		className: "patternmode-swatch__icon",
+		children: /* @__PURE__ */ jsx(Icon, {
+			"aria-hidden": "true",
+			focusable: "false"
+		})
+	}) : null,
+	unavailable ? /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "patternmode-swatch__slash"
+	}) : null
+] });
+const getSwatchFill = ({ background, color, colors, density, gravity, texture }) => {
 	const colorsBackground = getSwatchColorsBackground(colors);
 	const atmosphereBackground = texture === "atmosphere" ? getSwatchAtmosphereBackground(colors, {
 		density,
 		gravity
 	}) : void 0;
-	const fill = background ?? atmosphereBackground ?? colorsBackground ?? color;
-	const light = isLight ?? (color && !background && !colorsBackground ? isLightColor(color) : false);
+	return {
+		colorsBackground,
+		fill: background ?? atmosphereBackground ?? colorsBackground ?? color
+	};
+};
+const getSwatchTone = ({ background, color, colorsBackground, isLight }) => {
+	if (isLight !== void 0) return isLight ? "light" : "dark";
+	if (color && !background && !colorsBackground && isLightColor(color)) return "light";
+	return "dark";
+};
+const getSwatchDataProps = ({ flat, lightTone, raised, selected, shape, showRing, size, unavailable }) => ({
+	"data-flat": flat ? "true" : void 0,
+	"data-raised": raised ? "true" : void 0,
+	"data-selected": selected ? "true" : void 0,
+	"data-shape": shape,
+	"data-show-ring": showRing ? "true" : "false",
+	"data-size": size,
+	"data-slot": "swatch",
+	"data-tone": lightTone,
+	"data-unavailable": unavailable ? "true" : void 0
+});
+const Swatch = ({ "aria-label": ariaLabel, asChild = false, background, children, className, color, colors, density, flat = false, gravity, icon: Icon, isLight, objectFit, objectPosition, onRemove, raised = false, removeLabel, role: _role, selected = false, shape = "circle", showRing = true, size = "base", style, texture, unavailable = false, ...props }) => {
+	const { colorsBackground, fill } = getSwatchFill({
+		background,
+		color,
+		colors,
+		density,
+		gravity,
+		texture
+	});
+	const lightTone = getSwatchTone({
+		background,
+		color,
+		colorsBackground,
+		isLight
+	});
 	const resolvedRemoveLabel = removeLabel ?? (ariaLabel ? `Remove ${ariaLabel}` : "Remove");
 	const rootStyle = {
 		...getSwatchSizeVariableStyle(size),
@@ -465,49 +509,41 @@ function Swatch({ "aria-label": ariaLabel, background, children, className, colo
 		fit: objectFit,
 		position: objectPosition
 	});
-	function handleRemove(event) {
+	const dataProps = getSwatchDataProps({
+		flat,
+		lightTone,
+		raised,
+		selected,
+		shape,
+		showRing,
+		size,
+		unavailable
+	});
+	const handleRemove = (event) => {
 		event.stopPropagation();
 		onRemove?.();
-	}
-	const swatchContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx("span", {
-			"aria-hidden": "true",
-			className: "patternmode-swatch__fill"
-		}),
-		children ? /* @__PURE__ */ jsx("span", {
-			className: "patternmode-swatch__media",
-			style: mediaStyle,
-			children
-		}) : null,
-		flat ? null : /* @__PURE__ */ jsx("span", {
-			"aria-hidden": "true",
-			className: "patternmode-swatch__scrim"
-		}),
-		selected && Icon ? /* @__PURE__ */ jsx("span", {
-			className: "patternmode-swatch__icon",
-			children: /* @__PURE__ */ jsx(Icon, {
-				"aria-hidden": "true",
-				focusable: "false"
-			})
-		}) : null,
-		unavailable ? /* @__PURE__ */ jsx("span", {
-			"aria-hidden": "true",
-			className: "patternmode-swatch__slash"
-		}) : null
-	] });
+	};
+	const swatchContent = /* @__PURE__ */ jsx(SwatchContent, {
+		flat,
+		Icon,
+		mediaStyle,
+		selected,
+		unavailable,
+		children: asChild ? void 0 : children
+	});
+	if (asChild) return /* @__PURE__ */ jsxs(Slot, {
+		...props,
+		...dataProps,
+		"aria-label": ariaLabel,
+		className: joinClassNames("patternmode-swatch", className),
+		style: rootStyle,
+		children: [swatchContent, /* @__PURE__ */ jsx(Slottable, { children })]
+	});
 	if (onRemove) return /* @__PURE__ */ jsxs("fieldset", {
 		...props,
+		...dataProps,
 		"aria-label": ariaLabel,
 		className: joinClassNames("patternmode-swatch", className),
-		"data-flat": flat ? "true" : void 0,
-		"data-raised": raised ? "true" : void 0,
-		"data-selected": selected ? "true" : void 0,
-		"data-shape": shape,
-		"data-show-ring": showRing ? "true" : "false",
-		"data-size": size,
-		"data-slot": "swatch",
-		"data-tone": light ? "light" : "dark",
-		"data-unavailable": unavailable ? "true" : void 0,
 		style: rootStyle,
 		children: [swatchContent, /* @__PURE__ */ jsx("button", {
 			"aria-label": resolvedRemoveLabel,
@@ -524,21 +560,13 @@ function Swatch({ "aria-label": ariaLabel, background, children, className, colo
 	});
 	return /* @__PURE__ */ jsx("figure", {
 		...props,
+		...dataProps,
 		"aria-label": ariaLabel,
 		className: joinClassNames("patternmode-swatch", className),
-		"data-flat": flat ? "true" : void 0,
-		"data-raised": raised ? "true" : void 0,
-		"data-selected": selected ? "true" : void 0,
-		"data-shape": shape,
-		"data-show-ring": showRing ? "true" : "false",
-		"data-size": size,
-		"data-slot": "swatch",
-		"data-tone": light ? "light" : "dark",
-		"data-unavailable": unavailable ? "true" : void 0,
 		style: rootStyle,
 		children: swatchContent
 	});
-}
+};
 //#endregion
 export { DistributionBar, DistributionDisplay, SWATCH_SHAPES, SWATCH_SIZES, SWATCH_SIZE_VALUES, SWATCH_TEXTURES, Swatch, getDistributionBoundaryPercent, getDistributionTotal, getSwatchAtmosphereBackground, getSwatchColorsBackground, getSwatchSizeVariableStyle, moveDistributionBoundary, removeDistributionSegment, updateDistributionSegment };