@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/dist/Color.js

@@ -0,0 +1,1720 @@
+import { filterDOMProps, useRenderProps } from "./utils.js";
+import { className, createComponent, effect, getNextElement, getNextMarker, insert, memo, mergeProps, runHydrationEvents, setAttribute, setProperty, spread, style, template, use } from "solid-js/web";
+import { Show, createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, untrack, useContext } from "solid-js";
+import { createColorArea, createColorField, createColorSlider, createColorSwatch, createColorWheel, createFocusRing, createHover, createListBox, createOption, mergeProps as mergeProps$2 } from "@proyecto-viviana/solidaria";
+import { createColorAreaState, createColorFieldState, createColorSliderState, createColorWheelState, createListState, normalizeColor } from "@proyecto-viviana/solid-stately";
+//#region src/Color.tsx
+/**
+* Color components for solidaria-components
+*
+* Pre-wired headless color picker components that combine state + aria hooks.
+* Port of react-aria-components color components.
+*/
+var _tmpl$ = /*#__PURE__*/ template(`<div>`), _tmpl$2 = /*#__PURE__*/ template(`<label>`), _tmpl$3 = /*#__PURE__*/ template(`<output>`), _tmpl$4 = /*#__PURE__*/ template(`<div><input><!$><!/>`), _tmpl$5 = /*#__PURE__*/ template(`<div><input><input><!$><!/>`), _tmpl$6 = /*#__PURE__*/ template(`<div><!$><!/><!$><!/>`), _tmpl$7 = /*#__PURE__*/ template(`<input type=hidden>`), _tmpl$8 = /*#__PURE__*/ template(`<input>`);
+const ColorPickerContextInternal = createContext(null);
+const ColorPickerStateContextInternal = createContext(null);
+const ColorSwatchContextInternal = createContext(null);
+const ColorSwatchPickerContextInternal = createContext(null);
+const ColorSliderContext = createContext(null);
+/**
+* A color slider allows users to adjust a single color channel.
+*/
+function ColorSlider(props) {
+	const pickerContext = useContext(ColorPickerContextInternal);
+	const [local, stateProps, ariaProps, rest] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"label"
+	], [
+		"value",
+		"defaultValue",
+		"onChange",
+		"onChangeEnd",
+		"channel",
+		"colorSpace"
+	], [
+		"id",
+		"aria-label",
+		"aria-labelledby",
+		"aria-describedby",
+		"aria-details",
+		"isDisabled",
+		"name",
+		"form",
+		"orientation",
+		"channelName"
+	]);
+	const state = createColorSliderState(() => ({
+		value: stateProps.value ?? pickerContext?.value,
+		defaultValue: stateProps.defaultValue,
+		onChange: stateProps.onChange ?? pickerContext?.onChange,
+		onChangeEnd: stateProps.onChangeEnd,
+		channel: stateProps.channel,
+		colorSpace: stateProps.colorSpace,
+		orientation: ariaProps.orientation,
+		isDisabled: ariaProps.isDisabled
+	}));
+	let trackRef;
+	const setTrackRef = (el) => {
+		trackRef = el;
+	};
+	let inputRef;
+	const setInputRef = (el) => {
+		inputRef = el;
+	};
+	const colorSliderAria = createColorSlider(() => ({
+		id: ariaProps.id,
+		channel: stateProps.channel,
+		label: local.label,
+		"aria-label": ariaProps["aria-label"],
+		"aria-labelledby": ariaProps["aria-labelledby"],
+		"aria-describedby": ariaProps["aria-describedby"],
+		"aria-details": ariaProps["aria-details"],
+		isDisabled: ariaProps.isDisabled,
+		name: ariaProps.name,
+		form: ariaProps.form,
+		orientation: ariaProps.orientation,
+		channelName: ariaProps.channelName
+	}), () => state, () => trackRef ?? null, () => inputRef ?? null);
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled,
+		isDragging: state.isDragging,
+		channel: state.channel,
+		orientation: state.orientation,
+		value: state.getThumbValue(),
+		valueLabel: state.getThumbValueLabel(),
+		color: state.value,
+		defaultStyle: colorSliderAria.trackProps.style ?? {}
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorSlider"
+	}, renderValues);
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	return createComponent(ColorSliderContext.Provider, {
+		value: {
+			state,
+			get trackProps() {
+				return colorSliderAria.trackProps;
+			},
+			get thumbProps() {
+				return colorSliderAria.thumbProps;
+			},
+			get inputProps() {
+				return colorSliderAria.inputProps;
+			},
+			get outputProps() {
+				return colorSliderAria.outputProps;
+			},
+			get labelProps() {
+				return colorSliderAria.labelProps;
+			},
+			get trackRef() {
+				return trackRef;
+			},
+			setTrackRef,
+			setInputRef
+		},
+		get children() {
+			var _el$ = getNextElement(_tmpl$);
+			spread(_el$, mergeProps(domProps, {
+				get ["class"]() {
+					return renderProps.class();
+				},
+				get style() {
+					return renderProps.style();
+				},
+				get ["data-disabled"]() {
+					return state.isDisabled || void 0;
+				},
+				get ["data-dragging"]() {
+					return state.isDragging || void 0;
+				},
+				get ["data-orientation"]() {
+					return state.orientation;
+				},
+				get slot() {
+					return local.slot || void 0;
+				}
+			}), false, true);
+			insert(_el$, () => renderProps.renderChildren());
+			runHydrationEvents();
+			return _el$;
+		}
+	});
+}
+/**
+* The label element of a color slider.
+*/
+function ColorSliderLabel(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"slot",
+		"children"
+	]);
+	const context = useContext(ColorSliderContext);
+	if (!context) throw new Error("ColorSliderLabel must be used within a ColorSlider");
+	const labelProps = () => {
+		const { ref: _ref, ...rest } = context.labelProps;
+		return rest;
+	};
+	return (() => {
+		var _el$2 = getNextElement(_tmpl$2);
+		spread(_el$2, mergeProps(domProps, labelProps, { get ["class"]() {
+			return local.class;
+		} }), false, true);
+		insert(_el$2, () => local.children);
+		runHydrationEvents();
+		return _el$2;
+	})();
+}
+/**
+* The output element of a color slider.
+*/
+function ColorSliderOutput(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"slot",
+		"children"
+	]);
+	const context = useContext(ColorSliderContext);
+	if (!context) throw new Error("ColorSliderOutput must be used within a ColorSlider");
+	const state = context.state;
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled,
+		isDragging: state.isDragging,
+		channel: state.channel,
+		orientation: state.orientation,
+		value: state.getThumbValue(),
+		valueLabel: state.getThumbValueLabel(),
+		color: state.value,
+		defaultStyle: context.trackProps.style ?? {}
+	}));
+	const children = () => typeof local.children === "function" ? local.children(renderValues()) : local.children ?? renderValues().valueLabel;
+	return (() => {
+		var _el$3 = getNextElement(_tmpl$3);
+		spread(_el$3, mergeProps(domProps, () => context.outputProps, { get ["class"]() {
+			return local.class;
+		} }), false, true);
+		insert(_el$3, children);
+		runHydrationEvents();
+		return _el$3;
+	})();
+}
+/**
+* The track element of a color slider.
+*/
+function ColorSliderTrack(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children"
+	]);
+	const context = useContext(ColorSliderContext);
+	if (!context) throw new Error("ColorSliderTrack must be used within a ColorSlider");
+	const state = context.state;
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled,
+		isDragging: state.isDragging,
+		orientation: state.orientation,
+		defaultStyle: context.trackProps.style ?? {}
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorSlider-track"
+	}, renderValues);
+	const cleanTrackProps = () => {
+		const { ref: _ref, style: _trackStyle, ...rest } = context.trackProps;
+		return rest;
+	};
+	const mergedStyle = () => {
+		const trackStyle = context.trackProps.style || {};
+		const renderStyle = renderProps.style() || {};
+		return {
+			...trackStyle,
+			...renderStyle
+		};
+	};
+	return (() => {
+		var _el$4 = getNextElement(_tmpl$);
+		var _ref$ = context.setTrackRef;
+		typeof _ref$ === "function" ? use(_ref$, _el$4) : context.setTrackRef = _el$4;
+		spread(_el$4, mergeProps(domProps, cleanTrackProps, {
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return mergedStyle();
+			},
+			get ["data-disabled"]() {
+				return state.isDisabled || void 0;
+			},
+			get ["data-dragging"]() {
+				return state.isDragging || void 0;
+			},
+			get ["data-orientation"]() {
+				return state.orientation;
+			}
+		}), false, true);
+		insert(_el$4, () => renderProps.renderChildren());
+		runHydrationEvents();
+		return _el$4;
+	})();
+}
+/**
+* The thumb element of a color slider.
+*/
+function ColorSliderThumb(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children",
+		"ref"
+	]);
+	const context = useContext(ColorSliderContext);
+	if (!context) throw new Error("ColorSliderThumb must be used within a ColorSlider");
+	const state = context.state;
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+	const { isHovered, hoverProps } = createHover({ get isDisabled() {
+		return state.isDisabled;
+	} });
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled,
+		isDragging: state.isDragging,
+		isFocused: isFocused(),
+		isFocusVisible: isFocusVisible(),
+		isHovered: isHovered(),
+		color: state.getDisplayColor(),
+		defaultStyle: context.thumbProps.style ?? {}
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorSlider-thumb"
+	}, renderValues);
+	const cleanThumbProps = () => {
+		const { ref: _ref, style: _thumbStyle, ...rest } = context.thumbProps;
+		return rest;
+	};
+	const cleanFocusProps = () => {
+		const { ref: _ref, ...rest } = focusProps;
+		return rest;
+	};
+	const cleanHoverProps = () => {
+		const { ref: _ref, ...rest } = hoverProps;
+		return rest;
+	};
+	const mergedInputProps = () => {
+		return mergeProps$2(context.inputProps, cleanFocusProps());
+	};
+	const mergedStyle = () => {
+		const thumbStyle = context.thumbProps.style || {};
+		const renderStyle = renderProps.style() || {};
+		return {
+			...thumbStyle,
+			...renderStyle
+		};
+	};
+	return (() => {
+		var _el$5 = getNextElement(_tmpl$4), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, [_el$8, _co$] = getNextMarker(_el$7.nextSibling);
+		var _ref$2 = local.ref;
+		typeof _ref$2 === "function" ? use(_ref$2, _el$5) : local.ref = _el$5;
+		spread(_el$5, mergeProps(domProps, cleanThumbProps, cleanHoverProps, {
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return mergedStyle();
+			},
+			get ["data-disabled"]() {
+				return state.isDisabled || void 0;
+			},
+			get ["data-dragging"]() {
+				return state.isDragging || void 0;
+			},
+			get ["data-focused"]() {
+				return isFocused() || void 0;
+			},
+			get ["data-focus-visible"]() {
+				return isFocusVisible() || void 0;
+			},
+			get ["data-hovered"]() {
+				return isHovered() || void 0;
+			}
+		}), false, true);
+		var _ref$3 = context.setInputRef;
+		typeof _ref$3 === "function" ? use(_ref$3, _el$6) : context.setInputRef = _el$6;
+		spread(_el$6, mergeProps(mergedInputProps), false, false);
+		insert(_el$5, () => renderProps.renderChildren(), _el$8, _co$);
+		runHydrationEvents();
+		return _el$5;
+	})();
+}
+ColorSlider.Track = ColorSliderTrack;
+ColorSlider.Thumb = ColorSliderThumb;
+ColorSlider.Label = ColorSliderLabel;
+ColorSlider.Output = ColorSliderOutput;
+const ColorAreaContext = createContext(null);
+/**
+* A color area allows users to select a color using a 2D gradient.
+*/
+function ColorArea(props) {
+	const pickerContext = useContext(ColorPickerContextInternal);
+	const [local, stateProps, ariaProps, rest] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"slot"
+	], [
+		"value",
+		"defaultValue",
+		"onChange",
+		"onChangeEnd",
+		"xChannel",
+		"yChannel",
+		"colorSpace"
+	], [
+		"id",
+		"aria-label",
+		"aria-labelledby",
+		"aria-describedby",
+		"aria-details",
+		"isDisabled",
+		"xName",
+		"yName",
+		"form"
+	]);
+	const state = createColorAreaState(() => ({
+		value: stateProps.value ?? pickerContext?.value,
+		defaultValue: stateProps.defaultValue,
+		onChange: stateProps.onChange ?? pickerContext?.onChange,
+		onChangeEnd: stateProps.onChangeEnd,
+		xChannel: stateProps.xChannel,
+		yChannel: stateProps.yChannel,
+		colorSpace: stateProps.colorSpace,
+		isDisabled: ariaProps.isDisabled
+	}));
+	let areaRef;
+	const setAreaRef = (el) => {
+		areaRef = el;
+	};
+	const colorAreaAria = createColorArea(() => ({
+		id: ariaProps.id,
+		"aria-label": ariaProps["aria-label"],
+		"aria-labelledby": ariaProps["aria-labelledby"],
+		"aria-describedby": ariaProps["aria-describedby"],
+		"aria-details": ariaProps["aria-details"],
+		isDisabled: ariaProps.isDisabled,
+		xName: ariaProps.xName,
+		yName: ariaProps.yName,
+		form: ariaProps.form
+	}), () => state, () => areaRef ?? null);
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled,
+		isDragging: state.isDragging,
+		xChannel: state.xChannel,
+		yChannel: state.yChannel,
+		color: state.value,
+		defaultStyle: colorAreaAria.colorAreaProps.style ?? {}
+	}));
+	const childRenderValues = {
+		get isDisabled() {
+			return state.isDisabled;
+		},
+		get isDragging() {
+			return state.isDragging;
+		},
+		get xChannel() {
+			return state.xChannel;
+		},
+		get yChannel() {
+			return state.yChannel;
+		},
+		get color() {
+			return state.value;
+		},
+		get defaultStyle() {
+			return colorAreaAria.colorAreaProps.style ?? {};
+		}
+	};
+	const colorAreaChildren = () => {
+		const children = props.children;
+		return typeof children === "function" ? children(childRenderValues) : children;
+	};
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorArea"
+	}, renderValues);
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	const cleanColorAreaProps = () => {
+		const { ref: _ref, style: _areaStyle, ...rest } = colorAreaAria.colorAreaProps;
+		return rest;
+	};
+	const mergedStyle = () => {
+		const areaStyle = colorAreaAria.colorAreaProps.style || {};
+		const renderStyle = renderProps.style() || {};
+		return {
+			...areaStyle,
+			...renderStyle
+		};
+	};
+	return createComponent(ColorAreaContext.Provider, {
+		value: {
+			state,
+			get colorAreaProps() {
+				return colorAreaAria.colorAreaProps;
+			},
+			get gradientProps() {
+				return colorAreaAria.gradientProps;
+			},
+			get thumbProps() {
+				return colorAreaAria.thumbProps;
+			},
+			get xInputProps() {
+				return colorAreaAria.xInputProps;
+			},
+			get yInputProps() {
+				return colorAreaAria.yInputProps;
+			},
+			areaRef,
+			setAreaRef
+		},
+		get children() {
+			var _el$9 = getNextElement(_tmpl$);
+			use(setAreaRef, _el$9);
+			spread(_el$9, mergeProps(domProps, cleanColorAreaProps, {
+				get ["class"]() {
+					return renderProps.class();
+				},
+				get style() {
+					return mergedStyle();
+				},
+				get slot() {
+					return local.slot ?? void 0;
+				},
+				get ["data-disabled"]() {
+					return state.isDisabled || void 0;
+				},
+				get ["data-dragging"]() {
+					return state.isDragging || void 0;
+				}
+			}), false, true);
+			insert(_el$9, colorAreaChildren);
+			runHydrationEvents();
+			return _el$9;
+		}
+	});
+}
+/**
+* The gradient background of a color area.
+*/
+function ColorAreaGradient(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children"
+	]);
+	const context = useContext(ColorAreaContext);
+	if (!context) throw new Error("ColorAreaGradient must be used within a ColorArea");
+	const { state } = context;
+	const renderValues = createMemo(() => ({ isDisabled: state.isDisabled }));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorArea-gradient"
+	}, renderValues);
+	const cleanGradientProps = () => {
+		const { ref: _ref, style: _gradStyle, ...rest } = context.gradientProps;
+		return rest;
+	};
+	const mergedStyle = () => {
+		const gradStyle = context.gradientProps.style || {};
+		const renderStyle = renderProps.style() || {};
+		return {
+			...gradStyle,
+			...renderStyle
+		};
+	};
+	return (() => {
+		var _el$0 = getNextElement(_tmpl$);
+		spread(_el$0, mergeProps(domProps, cleanGradientProps, {
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return mergedStyle();
+			},
+			get ["data-disabled"]() {
+				return state.isDisabled || void 0;
+			}
+		}), false, true);
+		insert(_el$0, () => renderProps.renderChildren());
+		runHydrationEvents();
+		return _el$0;
+	})();
+}
+/**
+* The thumb element of a color area.
+*/
+function ColorAreaThumb(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children",
+		"ref"
+	]);
+	const context = useContext(ColorAreaContext);
+	if (!context) throw new Error("ColorAreaThumb must be used within a ColorArea");
+	const { state } = context;
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+	let xInputRef;
+	let yInputRef;
+	const { isHovered, hoverProps } = createHover({ get isDisabled() {
+		return state.isDisabled;
+	} });
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled,
+		isDragging: state.isDragging,
+		color: state.getDisplayColor(),
+		isFocused: isFocused(),
+		isFocusVisible: isFocusVisible(),
+		isHovered: isHovered()
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorArea-thumb"
+	}, renderValues);
+	const cleanThumbProps = () => {
+		const { ref: _ref, style: _thumbStyle, ...rest } = context.thumbProps;
+		return rest;
+	};
+	const cleanFocusProps = () => {
+		const { ref: _ref, ...rest } = focusProps;
+		return rest;
+	};
+	const cleanHoverProps = () => {
+		const { ref: _ref, ...rest } = hoverProps;
+		return rest;
+	};
+	const mergedXInputProps = () => {
+		const { value: _value, ...inputProps } = context.xInputProps;
+		return mergeProps$2(inputProps, cleanFocusProps());
+	};
+	const mergedYInputProps = () => {
+		const { value: _value, ...inputProps } = context.yInputProps;
+		return mergeProps$2(inputProps, cleanFocusProps());
+	};
+	const mergedStyle = () => {
+		const thumbStyle = context.thumbProps.style || {};
+		const renderStyle = renderProps.style() || {};
+		return {
+			...thumbStyle,
+			...renderStyle
+		};
+	};
+	const syncInputValue = (input, value) => {
+		const nextValue = String(value);
+		const update = () => {
+			if (input && input.value !== nextValue) input.value = nextValue;
+		};
+		update();
+		queueMicrotask(update);
+	};
+	createEffect(() => {
+		syncInputValue(xInputRef, state.getXValue());
+	});
+	createEffect(() => {
+		syncInputValue(yInputRef, state.getYValue());
+	});
+	return (() => {
+		var _el$1 = getNextElement(_tmpl$5), _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling, _el$12 = _el$11.nextSibling, [_el$13, _co$2] = getNextMarker(_el$12.nextSibling);
+		var _ref$4 = local.ref;
+		typeof _ref$4 === "function" ? use(_ref$4, _el$1) : local.ref = _el$1;
+		spread(_el$1, mergeProps(domProps, cleanThumbProps, cleanHoverProps, {
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return mergedStyle();
+			},
+			get ["data-disabled"]() {
+				return state.isDisabled || void 0;
+			},
+			get ["data-dragging"]() {
+				return state.isDragging || void 0;
+			},
+			get ["data-focused"]() {
+				return isFocused() || void 0;
+			},
+			get ["data-focus-visible"]() {
+				return isFocusVisible() || void 0;
+			},
+			get ["data-hovered"]() {
+				return isHovered() || void 0;
+			}
+		}), false, true);
+		use((el) => {
+			xInputRef = el;
+			syncInputValue(el, state.getXValue());
+		}, _el$10);
+		spread(_el$10, mergeProps(mergedXInputProps), false, false);
+		use((el) => {
+			yInputRef = el;
+			syncInputValue(el, state.getYValue());
+		}, _el$11);
+		spread(_el$11, mergeProps(mergedYInputProps), false, false);
+		insert(_el$1, () => renderProps.renderChildren(), _el$13, _co$2);
+		runHydrationEvents();
+		return _el$1;
+	})();
+}
+ColorArea.Gradient = ColorAreaGradient;
+ColorArea.Thumb = ColorAreaThumb;
+const ColorWheelContext = createContext(null);
+/**
+* A color wheel allows users to select a hue using a circular control.
+*/
+function ColorWheel(props) {
+	const pickerContext = useContext(ColorPickerContextInternal);
+	const [local, stateProps, ariaProps, rest] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"slot"
+	], [
+		"value",
+		"defaultValue",
+		"onChange",
+		"onChangeEnd"
+	], [
+		"id",
+		"aria-label",
+		"aria-labelledby",
+		"aria-describedby",
+		"aria-details",
+		"aria-errormessage",
+		"isDisabled",
+		"name",
+		"form",
+		"outerRadius",
+		"innerRadius"
+	]);
+	const state = createColorWheelState(() => ({
+		value: stateProps.value ?? pickerContext?.value,
+		defaultValue: stateProps.defaultValue,
+		onChange: stateProps.onChange ?? pickerContext?.onChange,
+		onChangeEnd: stateProps.onChangeEnd,
+		isDisabled: ariaProps.isDisabled
+	}));
+	let wheelRef;
+	const setWheelRef = (el) => {
+		wheelRef = el;
+	};
+	const colorWheelAria = createColorWheel(() => ({
+		id: ariaProps.id,
+		"aria-label": ariaProps["aria-label"],
+		"aria-labelledby": ariaProps["aria-labelledby"],
+		"aria-describedby": ariaProps["aria-describedby"],
+		"aria-details": ariaProps["aria-details"],
+		"aria-errormessage": ariaProps["aria-errormessage"],
+		isDisabled: ariaProps.isDisabled,
+		name: ariaProps.name,
+		form: ariaProps.form,
+		outerRadius: ariaProps.outerRadius,
+		innerRadius: ariaProps.innerRadius
+	}), () => state, () => wheelRef ?? null);
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled,
+		isDragging: state.isDragging,
+		hue: state.getHue(),
+		color: state.value,
+		defaultStyle: { position: "relative" }
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorWheel"
+	}, renderValues);
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	return createComponent(ColorWheelContext.Provider, {
+		value: {
+			state,
+			get trackProps() {
+				return colorWheelAria.trackProps;
+			},
+			get thumbProps() {
+				return colorWheelAria.thumbProps;
+			},
+			get inputProps() {
+				return colorWheelAria.inputProps;
+			},
+			get wheelRef() {
+				return wheelRef;
+			},
+			setWheelRef
+		},
+		get children() {
+			var _el$14 = getNextElement(_tmpl$);
+			use(setWheelRef, _el$14);
+			spread(_el$14, mergeProps(domProps, {
+				get ["class"]() {
+					return renderProps.class();
+				},
+				get style() {
+					return renderProps.style();
+				},
+				get slot() {
+					return local.slot || void 0;
+				},
+				get ["data-disabled"]() {
+					return state.isDisabled || void 0;
+				},
+				get ["data-dragging"]() {
+					return state.isDragging || void 0;
+				}
+			}), false, true);
+			insert(_el$14, () => renderProps.renderChildren());
+			runHydrationEvents();
+			return _el$14;
+		}
+	});
+}
+/**
+* The track element of a color wheel.
+*/
+function ColorWheelTrack(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children"
+	]);
+	const context = useContext(ColorWheelContext);
+	if (!context) throw new Error("ColorWheelTrack must be used within a ColorWheel");
+	const state = context.state;
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled,
+		isDragging: state.isDragging,
+		defaultStyle: context.trackProps.style ?? {}
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorWheel-track"
+	}, renderValues);
+	const cleanTrackProps = () => {
+		const { ref: _ref, style: _trackStyle, ...rest } = context.trackProps;
+		return rest;
+	};
+	const mergedStyle = () => {
+		const trackStyle = context.trackProps.style || {};
+		const renderStyle = renderProps.style() || {};
+		return {
+			...trackStyle,
+			...renderStyle
+		};
+	};
+	return (() => {
+		var _el$15 = getNextElement(_tmpl$);
+		spread(_el$15, mergeProps(domProps, cleanTrackProps, {
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return mergedStyle();
+			},
+			get ["data-disabled"]() {
+				return state.isDisabled || void 0;
+			},
+			get ["data-dragging"]() {
+				return state.isDragging || void 0;
+			}
+		}), false, true);
+		insert(_el$15, () => renderProps.renderChildren());
+		runHydrationEvents();
+		return _el$15;
+	})();
+}
+/**
+* The thumb element of a color wheel.
+*/
+function ColorWheelThumb(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children",
+		"ref"
+	]);
+	const context = useContext(ColorWheelContext);
+	if (!context) throw new Error("ColorWheelThumb must be used within a ColorWheel");
+	const state = context.state;
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+	const { isHovered, hoverProps } = createHover({ get isDisabled() {
+		return state.isDisabled;
+	} });
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled,
+		isDragging: state.isDragging,
+		color: state.getDisplayColor(),
+		isFocused: isFocused(),
+		isFocusVisible: isFocusVisible(),
+		isHovered: isHovered(),
+		defaultStyle: context.thumbProps.style ?? {}
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorWheel-thumb"
+	}, renderValues);
+	const cleanThumbProps = () => {
+		const { ref: _ref, style: _thumbStyle, ...rest } = context.thumbProps;
+		return rest;
+	};
+	const cleanFocusProps = () => {
+		const { ref: _ref, ...rest } = focusProps;
+		return rest;
+	};
+	const cleanHoverProps = () => {
+		const { ref: _ref, ...rest } = hoverProps;
+		return rest;
+	};
+	const mergedInputProps = () => {
+		return mergeProps$2(context.inputProps, cleanFocusProps());
+	};
+	const mergedStyle = () => {
+		const thumbStyle = context.thumbProps.style || {};
+		const renderStyle = renderProps.style() || {};
+		return {
+			...thumbStyle,
+			...renderStyle
+		};
+	};
+	return (() => {
+		var _el$16 = getNextElement(_tmpl$4), _el$17 = _el$16.firstChild, _el$18 = _el$17.nextSibling, [_el$19, _co$3] = getNextMarker(_el$18.nextSibling);
+		var _ref$5 = local.ref;
+		typeof _ref$5 === "function" ? use(_ref$5, _el$16) : local.ref = _el$16;
+		spread(_el$16, mergeProps(domProps, cleanThumbProps, cleanHoverProps, {
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return mergedStyle();
+			},
+			get ["data-disabled"]() {
+				return state.isDisabled || void 0;
+			},
+			get ["data-dragging"]() {
+				return state.isDragging || void 0;
+			},
+			get ["data-focused"]() {
+				return isFocused() || void 0;
+			},
+			get ["data-focus-visible"]() {
+				return isFocusVisible() || void 0;
+			},
+			get ["data-hovered"]() {
+				return isHovered() || void 0;
+			}
+		}), false, true);
+		spread(_el$17, mergeProps(mergedInputProps), false, false);
+		insert(_el$16, () => renderProps.renderChildren(), _el$19, _co$3);
+		runHydrationEvents();
+		return _el$16;
+	})();
+}
+ColorWheel.Track = ColorWheelTrack;
+ColorWheel.Thumb = ColorWheelThumb;
+const ColorFieldContext = createContext(null);
+/**
+* A color field allows users to enter a color value as text.
+*/
+function ColorField(props) {
+	const pickerContext = useContext(ColorPickerContextInternal);
+	const [local, stateProps, ariaProps, rest] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"label",
+		"description",
+		"errorMessage"
+	], [
+		"value",
+		"defaultValue",
+		"onChange",
+		"channel",
+		"colorSpace",
+		"colorFormat"
+	], [
+		"id",
+		"aria-label",
+		"aria-labelledby",
+		"aria-describedby",
+		"aria-details",
+		"aria-errormessage",
+		"name",
+		"form",
+		"isWheelDisabled",
+		"isDisabled",
+		"isReadOnly",
+		"isRequired",
+		"isInvalid",
+		"validationBehavior",
+		"autoFocus",
+		"excludeFromTabOrder",
+		"placeholder"
+	]);
+	const [hasRegisteredLabelElement, setHasRegisteredLabelElement] = createSignal(false);
+	const state = createColorFieldState(() => ({
+		value: stateProps.value ?? pickerContext?.value,
+		defaultValue: stateProps.defaultValue,
+		onChange: stateProps.onChange ?? ((color) => {
+			if (color) pickerContext?.onChange?.(color);
+		}),
+		channel: stateProps.channel,
+		colorSpace: stateProps.colorSpace,
+		colorFormat: stateProps.colorFormat,
+		isDisabled: ariaProps.isDisabled,
+		isReadOnly: ariaProps.isReadOnly,
+		isInvalid: ariaProps.isInvalid,
+		isRequired: ariaProps.isRequired
+	}));
+	let inputRef;
+	const setInputRef = (el) => {
+		inputRef = el;
+	};
+	const colorFieldAria = createColorField(() => ({
+		id: ariaProps.id,
+		"aria-label": ariaProps["aria-label"],
+		"aria-labelledby": ariaProps["aria-labelledby"],
+		"aria-describedby": ariaProps["aria-describedby"],
+		"aria-details": ariaProps["aria-details"],
+		"aria-errormessage": ariaProps["aria-errormessage"],
+		name: ariaProps.name,
+		form: ariaProps.form,
+		isWheelDisabled: ariaProps.isWheelDisabled,
+		isDisabled: ariaProps.isDisabled,
+		isReadOnly: ariaProps.isReadOnly,
+		isRequired: ariaProps.isRequired,
+		isInvalid: ariaProps.isInvalid,
+		validationBehavior: ariaProps.validationBehavior,
+		autoFocus: ariaProps.autoFocus,
+		excludeFromTabOrder: ariaProps.excludeFromTabOrder,
+		placeholder: ariaProps.placeholder,
+		channel: stateProps.channel,
+		colorSpace: stateProps.colorSpace
+	}), () => state, () => inputRef ?? null);
+	const describedBy = () => {
+		const invalid = ariaProps.isInvalid || state.isInvalid;
+		return [
+			ariaProps["aria-describedby"],
+			local.description && !invalid ? colorFieldAria.descriptionProps.id : void 0,
+			invalid && local.errorMessage ? colorFieldAria.errorMessageProps.id : void 0
+		].filter(Boolean).join(" ") || void 0;
+	};
+	const fieldInputProps = () => {
+		const labelledBy = ariaProps["aria-labelledby"] ?? (!ariaProps["aria-label"] && (local.label || hasRegisteredLabelElement()) ? colorFieldAria.labelProps.id : void 0);
+		return {
+			...colorFieldAria.inputProps,
+			"aria-label": labelledBy ? void 0 : colorFieldAria.inputProps["aria-label"],
+			"aria-labelledby": labelledBy,
+			"aria-describedby": describedBy(),
+			"aria-errormessage": (ariaProps.isInvalid || state.isInvalid) && local.errorMessage ? colorFieldAria.errorMessageProps.id : colorFieldAria.inputProps["aria-errormessage"]
+		};
+	};
+	const hiddenInputValue = createMemo(() => Number.isNaN(state.numberValue) ? "" : String(state.numberValue));
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled,
+		isReadOnly: state.isReadOnly,
+		isRequired: state.isRequired,
+		isInvalid: state.isInvalid,
+		color: state.value,
+		channel: state.channel ?? "hex"
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorField"
+	}, renderValues);
+	const childRenderValues = {
+		get isDisabled() {
+			return state.isDisabled;
+		},
+		get isReadOnly() {
+			return state.isReadOnly;
+		},
+		get isRequired() {
+			return state.isRequired;
+		},
+		get isInvalid() {
+			return state.isInvalid;
+		},
+		get color() {
+			return state.value;
+		},
+		get channel() {
+			return state.channel ?? "hex";
+		}
+	};
+	let hasRenderedChildren = false;
+	let renderedChildren;
+	const renderChildren = () => {
+		if (!hasRenderedChildren) {
+			const children = local.children;
+			renderedChildren = typeof children === "function" ? untrack(() => children(childRenderValues)) : children;
+			hasRenderedChildren = true;
+		}
+		return renderedChildren;
+	};
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	return createComponent(ColorFieldContext.Provider, {
+		value: {
+			state,
+			get inputProps() {
+				return fieldInputProps();
+			},
+			get labelProps() {
+				return colorFieldAria.labelProps;
+			},
+			get descriptionProps() {
+				return colorFieldAria.descriptionProps;
+			},
+			get errorMessageProps() {
+				return colorFieldAria.errorMessageProps;
+			},
+			setInputRef,
+			setLabelElement: setHasRegisteredLabelElement
+		},
+		get children() {
+			return [(() => {
+				var _el$20 = getNextElement(_tmpl$6), _el$22 = _el$20.firstChild, [_el$23, _co$4] = getNextMarker(_el$22.nextSibling), _el$24 = _el$23.nextSibling, [_el$25, _co$5] = getNextMarker(_el$24.nextSibling);
+				spread(_el$20, mergeProps(domProps, {
+					get ["class"]() {
+						return renderProps.class();
+					},
+					get style() {
+						return renderProps.style();
+					},
+					get slot() {
+						return local.slot ?? void 0;
+					},
+					get ["data-disabled"]() {
+						return state.isDisabled || void 0;
+					},
+					get ["data-readonly"]() {
+						return state.isReadOnly || void 0;
+					},
+					get ["data-invalid"]() {
+						return state.isInvalid || void 0;
+					},
+					get ["data-required"]() {
+						return state.isRequired || void 0;
+					},
+					get ["data-channel"]() {
+						return state.channel ?? "hex";
+					}
+				}), false, true);
+				insert(_el$20, createComponent(Show, {
+					get when() {
+						return local.label;
+					},
+					get children() {
+						var _el$21 = getNextElement(_tmpl$2);
+						spread(_el$21, mergeProps(() => colorFieldAria.labelProps), false, true);
+						insert(_el$21, () => local.label);
+						runHydrationEvents();
+						return _el$21;
+					}
+				}), _el$23, _co$4);
+				insert(_el$20, renderChildren, _el$25, _co$5);
+				runHydrationEvents();
+				return _el$20;
+			})(), createComponent(Show, {
+				get when() {
+					return memo(() => !!state.channel)() && ariaProps.name;
+				},
+				get children() {
+					var _el$26 = getNextElement(_tmpl$7);
+					effect((_p$) => {
+						var _v$ = ariaProps.name, _v$2 = ariaProps.form;
+						_v$ !== _p$.e && setAttribute(_el$26, "name", _p$.e = _v$);
+						_v$2 !== _p$.t && setAttribute(_el$26, "form", _p$.t = _v$2);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0
+					});
+					effect(() => setProperty(_el$26, "value", hiddenInputValue()));
+					return _el$26;
+				}
+			})];
+		}
+	});
+}
+/**
+* The input element of a color field.
+*/
+function ColorFieldInput(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children",
+		"ref"
+	]);
+	const context = useContext(ColorFieldContext);
+	if (!context) throw new Error("ColorFieldInput must be used within a ColorField");
+	const state = context.state;
+	const inputValue = createMemo(() => state.inputValue);
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+	const { isHovered, hoverProps } = createHover({ get isDisabled() {
+		return state.isDisabled;
+	} });
+	const renderValues = createMemo(() => ({
+		isDisabled: state.isDisabled,
+		isReadOnly: state.isReadOnly,
+		isInvalid: state.isInvalid,
+		isFocused: isFocused(),
+		isFocusVisible: isFocusVisible(),
+		isHovered: isHovered()
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorField-input"
+	}, renderValues);
+	const cleanInputProps = () => {
+		const { ref: _ref, style: _inputStyle, value: _value, ...rest } = context.inputProps;
+		return rest;
+	};
+	const cleanFocusProps = () => {
+		const { ref: _ref, ...rest } = focusProps;
+		return rest;
+	};
+	const cleanHoverProps = () => {
+		const { ref: _ref, ...rest } = hoverProps;
+		return rest;
+	};
+	return (() => {
+		var _el$27 = getNextElement(_tmpl$8);
+		use((el) => {
+			context.setInputRef(el);
+			local.ref?.(el);
+		}, _el$27);
+		spread(_el$27, mergeProps(domProps, cleanInputProps, cleanFocusProps, cleanHoverProps, {
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return renderProps.style();
+			},
+			get value() {
+				return inputValue();
+			},
+			get ["data-disabled"]() {
+				return state.isDisabled || void 0;
+			},
+			get ["data-readonly"]() {
+				return state.isReadOnly || void 0;
+			},
+			get ["data-invalid"]() {
+				return state.isInvalid || void 0;
+			},
+			get ["data-focused"]() {
+				return isFocused() || void 0;
+			},
+			get ["data-focus-visible"]() {
+				return isFocusVisible() || void 0;
+			},
+			get ["data-hovered"]() {
+				return isHovered() || void 0;
+			}
+		}), false, false);
+		runHydrationEvents();
+		return _el$27;
+	})();
+}
+ColorField.Input = ColorFieldInput;
+/**
+* A color swatch displays a preview of a color.
+*/
+function ColorSwatch(props) {
+	const swatchContext = useContext(ColorSwatchContextInternal);
+	const pickerContext = useContext(ColorPickerContextInternal);
+	const [local, ariaProps, rest] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"color",
+		"colorName"
+	], [
+		"aria-label",
+		"aria-labelledby",
+		"aria-describedby",
+		"aria-details"
+	]);
+	const resolvedColor = createMemo(() => {
+		return local.color ?? swatchContext?.color ?? pickerContext?.value ?? "#fff0";
+	});
+	const swatchAria = createColorSwatch(() => ({
+		id: rest.id,
+		slot: local.slot,
+		color: resolvedColor(),
+		colorName: local.colorName,
+		"aria-label": ariaProps["aria-label"],
+		"aria-labelledby": ariaProps["aria-labelledby"],
+		"aria-describedby": ariaProps["aria-describedby"],
+		"aria-details": ariaProps["aria-details"]
+	}));
+	const renderValues = createMemo(() => ({
+		color: swatchAria.color,
+		colorValue: swatchAria.color.toString("css")
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorSwatch"
+	}, renderValues);
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	const cleanSwatchProps = () => {
+		const { ref: _ref, style: _swatchStyle, ...rest } = swatchAria.swatchProps;
+		return rest;
+	};
+	const mergedStyle = () => {
+		const swatchStyle = swatchAria.swatchProps.style || {};
+		const renderStyle = renderProps.style() || {};
+		return {
+			...swatchStyle,
+			...renderStyle
+		};
+	};
+	return (() => {
+		var _el$28 = getNextElement(_tmpl$);
+		spread(_el$28, mergeProps(domProps, cleanSwatchProps, {
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return mergedStyle();
+			}
+		}), false, true);
+		insert(_el$28, () => renderProps.renderChildren());
+		runHydrationEvents();
+		return _el$28;
+	})();
+}
+const ColorSliderStateContext = ColorSliderContext;
+const ColorAreaStateContext = ColorAreaContext;
+const ColorWheelStateContext = ColorWheelContext;
+const ColorWheelTrackContext = ColorWheelContext;
+const ColorFieldStateContext = ColorFieldContext;
+const ColorSwatchContext = ColorSwatchContextInternal;
+const ColorPickerContext = ColorPickerContextInternal;
+const ColorPickerStateContext = ColorPickerStateContextInternal;
+const ColorSwatchPickerContext = ColorSwatchPickerContextInternal;
+const ColorThumb = ColorSliderThumb;
+function ColorPicker(props) {
+	const [local] = splitProps(props, [
+		"value",
+		"defaultValue",
+		"onChange",
+		"children",
+		"class",
+		"style",
+		"slot"
+	]);
+	const [internalColor, setInternalColor] = createSignal(normalizeColor(local.defaultValue ?? "#ff0000"));
+	const color = createMemo(() => {
+		if (local.value !== void 0) return normalizeColor(local.value);
+		return internalColor();
+	});
+	const setColor = (nextColor) => {
+		if (local.value === void 0) setInternalColor(nextColor);
+		local.onChange?.(nextColor);
+	};
+	const renderValues = createMemo(() => ({ color: color() }));
+	const renderProps = useRenderProps({
+		get children() {
+			return local.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorPicker"
+	}, renderValues);
+	return createComponent(ColorPickerStateContextInternal.Provider, {
+		value: {
+			color: () => color(),
+			setColor
+		},
+		get children() {
+			return createComponent(ColorPickerContextInternal.Provider, {
+				value: {
+					get value() {
+						return color();
+					},
+					onChange: setColor
+				},
+				get children() {
+					var _el$29 = getNextElement(_tmpl$);
+					insert(_el$29, () => renderProps.renderChildren());
+					effect((_p$) => {
+						var _v$3 = renderProps.class(), _v$4 = renderProps.style();
+						_v$3 !== _p$.e && className(_el$29, _p$.e = _v$3);
+						_p$.t = style(_el$29, _v$4, _p$.t);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0
+					});
+					return _el$29;
+				}
+			});
+		}
+	});
+}
+function ColorSwatchPicker(props) {
+	const pickerContext = useContext(ColorPickerContextInternal);
+	const [local, rest] = splitProps(props, [
+		"value",
+		"defaultValue",
+		"onChange",
+		"id",
+		"aria-label",
+		"aria-labelledby",
+		"aria-describedby",
+		"aria-details",
+		"layout",
+		"children",
+		"class",
+		"style",
+		"slot"
+	]);
+	const [itemMap, setItemMap] = createSignal(/* @__PURE__ */ new Map());
+	const [itemOrder, setItemOrder] = createSignal([]);
+	const [internalColor, setInternalColor] = createSignal(normalizeColor(local.defaultValue ?? pickerContext?.value ?? "#ff0000"));
+	const selectedColor = createMemo(() => {
+		if (local.value !== void 0) return normalizeColor(local.value);
+		if (pickerContext?.value !== void 0) return normalizeColor(pickerContext.value);
+		return internalColor();
+	});
+	const selectedKey = createMemo(() => selectedColor().toString("hexa"));
+	const isControlled = createMemo(() => local.value !== void 0 || pickerContext?.value !== void 0);
+	const registerItem = (item) => {
+		setItemMap((prev) => {
+			const next = new Map(prev);
+			next.set(item.key, item);
+			return next;
+		});
+		setItemOrder((prev) => prev.includes(item.key) ? prev : [...prev, item.key]);
+	};
+	const unregisterItem = (key) => {
+		setItemMap((prev) => {
+			if (!prev.has(key)) return prev;
+			const next = new Map(prev);
+			next.delete(key);
+			return next;
+		});
+		setItemOrder((prev) => prev.filter((itemKey) => itemKey !== key));
+	};
+	const items = createMemo(() => {
+		const map = itemMap();
+		return itemOrder().map((key) => map.get(key)).filter((item) => item != null);
+	});
+	const state = createListState({
+		get items() {
+			return items();
+		},
+		get getKey() {
+			return (item) => item.key;
+		},
+		get getTextValue() {
+			return (item) => item.textValue;
+		},
+		get getDisabled() {
+			return (item) => !!item.isDisabled;
+		},
+		selectionMode: "single",
+		disallowEmptySelection: true,
+		get selectedKeys() {
+			return [selectedKey()];
+		},
+		onSelectionChange(keys) {
+			if (keys === "all") return;
+			const key = keys.values().next().value;
+			if (!key) return;
+			const item = itemMap().get(key);
+			if (!item) return;
+			if (!isControlled()) setInternalColor(item.color);
+			(local.onChange ?? pickerContext?.onChange)?.(item.color);
+		}
+	});
+	const listBoxAria = createListBox(() => ({
+		id: local.id,
+		"aria-label": local["aria-label"] ?? (!local["aria-labelledby"] ? "Color swatch picker" : void 0),
+		"aria-labelledby": local["aria-labelledby"],
+		"aria-describedby": local["aria-describedby"],
+		"aria-details": local["aria-details"],
+		shouldFocusWrap: true
+	}), state);
+	const resolveDirection = () => {
+		if (typeof document === "undefined") return "ltr";
+		return document.dir === "rtl" ? "rtl" : "ltr";
+	};
+	const findNextEnabledKey = (from, direction) => {
+		const collection = state.collection();
+		const getAdjacent = direction === "next" ? (key) => collection.getKeyAfter(key) : (key) => collection.getKeyBefore(key);
+		let key = from != null ? getAdjacent(from) : (direction === "next" ? () => collection.getFirstKey() : () => collection.getLastKey())();
+		while (key != null && state.isDisabled(key)) key = getAdjacent(key);
+		return key;
+	};
+	const getBoundaryEnabledKey = (direction) => {
+		const collection = state.collection();
+		const getAdjacent = direction === "next" ? (key) => collection.getKeyAfter(key) : (key) => collection.getKeyBefore(key);
+		let key = (direction === "next" ? () => collection.getFirstKey() : () => collection.getLastKey())();
+		while (key != null && state.isDisabled(key)) key = getAdjacent(key);
+		return key;
+	};
+	const getOptionElementForKey = (listbox, key) => {
+		if (!listbox || key == null) return null;
+		const keyString = String(key);
+		for (const optionElement of listbox.querySelectorAll("[role=\"option\"]")) if (optionElement.id === keyString) return optionElement;
+		return null;
+	};
+	const findGridKey = (listbox, key, nextKey, shouldSkip) => {
+		let candidate = key;
+		const previousRect = getOptionElementForKey(listbox, candidate)?.getBoundingClientRect();
+		if (!previousRect) return null;
+		while (candidate != null) {
+			candidate = nextKey(candidate);
+			if (candidate == null) return null;
+			const itemRect = getOptionElementForKey(listbox, candidate)?.getBoundingClientRect();
+			if (!itemRect) return null;
+			if (!shouldSkip(previousRect, itemRect)) return candidate;
+		}
+		return null;
+	};
+	const isSameRow = (prevRect, itemRect) => prevRect.y === itemRect.y || prevRect.x !== itemRect.x;
+	const getGridKeyBelow = (listbox, key) => findGridKey(listbox, key, (current) => findNextEnabledKey(current, "next"), isSameRow);
+	const getGridKeyAbove = (listbox, key) => findGridKey(listbox, key, (current) => findNextEnabledKey(current, "prev"), isSameRow);
+	const getGridKeyRightOf = (key) => resolveDirection() === "rtl" ? findNextEnabledKey(key, "prev") : findNextEnabledKey(key, "next");
+	const getGridKeyLeftOf = (key) => resolveDirection() === "rtl" ? findNextEnabledKey(key, "next") : findNextEnabledKey(key, "prev");
+	const handleGridKeyDown = (e) => {
+		if ((local.layout ?? "grid") !== "grid") return false;
+		if (e.key !== "ArrowRight" && e.key !== "ArrowLeft" && e.key !== "ArrowDown" && e.key !== "ArrowUp") return false;
+		const listbox = e.currentTarget;
+		const initialKey = state.focusedKey() ?? (e.key === "ArrowUp" || e.key === "ArrowLeft" ? getBoundaryEnabledKey("prev") : getBoundaryEnabledKey("next"));
+		if (initialKey == null) return false;
+		let nextKey = null;
+		switch (e.key) {
+			case "ArrowDown":
+				nextKey = getGridKeyBelow(listbox, initialKey) ?? getBoundaryEnabledKey("next");
+				break;
+			case "ArrowUp":
+				nextKey = getGridKeyAbove(listbox, initialKey) ?? getBoundaryEnabledKey("prev");
+				break;
+			case "ArrowRight":
+				nextKey = getGridKeyRightOf(initialKey) ?? (resolveDirection() === "rtl" ? getBoundaryEnabledKey("prev") : getBoundaryEnabledKey("next"));
+				break;
+			case "ArrowLeft":
+				nextKey = getGridKeyLeftOf(initialKey) ?? (resolveDirection() === "rtl" ? getBoundaryEnabledKey("next") : getBoundaryEnabledKey("prev"));
+				break;
+		}
+		if (nextKey == null) return false;
+		state.setFocusedKey(nextKey);
+		if (state.selectionMode() === "single") state.replaceSelection(nextKey);
+		e.preventDefault();
+		e.stopPropagation();
+		return true;
+	};
+	const getListBoxKeyDown = () => {
+		return listBoxAria.listBoxProps.onKeyDown;
+	};
+	const onColorSwatchPickerKeyDown = (e) => {
+		if (handleGridKeyDown(e)) return;
+		getListBoxKeyDown()?.(e);
+	};
+	createEffect(() => {
+		const key = selectedKey();
+		if (key) state.setFocusedKey(key);
+	});
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing({ within: true });
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	const renderValues = createMemo(() => ({
+		isFocused: state.isFocused() || isFocused(),
+		isFocusVisible: isFocusVisible(),
+		selectedColor: selectedColor(),
+		layout: local.layout ?? "grid"
+	}));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorSwatchPicker"
+	}, renderValues);
+	const cleanListBoxProps = () => {
+		const { ref: _ref, onKeyDown: _onKeyDown, ...restListBoxProps } = listBoxAria.listBoxProps;
+		return restListBoxProps;
+	};
+	const cleanFocusProps = () => {
+		const { ref: _ref, ...restFocusProps } = focusProps;
+		return restFocusProps;
+	};
+	return createComponent(ColorSwatchPickerContextInternal.Provider, {
+		value: {
+			state,
+			registerItem,
+			unregisterItem
+		},
+		get children() {
+			var _el$30 = getNextElement(_tmpl$);
+			spread(_el$30, mergeProps(() => mergeProps$2(domProps(), cleanListBoxProps(), cleanFocusProps(), { onKeyDown: onColorSwatchPickerKeyDown }), {
+				get ["class"]() {
+					return renderProps.class();
+				},
+				get style() {
+					return renderProps.style();
+				},
+				get slot() {
+					return local.slot ?? void 0;
+				},
+				get ["data-focused"]() {
+					return state.isFocused() || void 0;
+				},
+				get ["data-focus-visible"]() {
+					return isFocusVisible() || void 0;
+				},
+				get ["data-layout"]() {
+					return local.layout ?? "grid";
+				}
+			}), false, true);
+			insert(_el$30, () => local.children);
+			runHydrationEvents();
+			return _el$30;
+		}
+	});
+}
+function ColorSwatchPickerItem(props) {
+	const context = useContext(ColorSwatchPickerContextInternal);
+	if (!context) throw new Error("ColorSwatchPickerItem must be used within a ColorSwatchPicker");
+	const [local, ariaProps, rest] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"color"
+	], ["isDisabled", "aria-label"]);
+	const color = createMemo(() => normalizeColor(local.color));
+	const key = createMemo(() => color().toString("hexa"));
+	const textValue = createMemo(() => {
+		const locale = globalThis.navigator?.language ?? "en-US";
+		return color().getColorName(locale);
+	});
+	createEffect(() => {
+		const itemKey = key();
+		context.registerItem({
+			key: itemKey,
+			color: color(),
+			textValue: textValue(),
+			isDisabled: ariaProps.isDisabled
+		});
+		onCleanup(() => context.unregisterItem(itemKey));
+	});
+	const optionAria = createOption(() => ({
+		key: key(),
+		isDisabled: ariaProps.isDisabled,
+		"aria-label": ariaProps["aria-label"] ?? textValue()
+	}), context.state);
+	const renderValues = createMemo(() => ({
+		isSelected: optionAria.isSelected(),
+		isFocused: optionAria.isFocused(),
+		isFocusVisible: optionAria.isFocusVisible(),
+		isPressed: optionAria.isPressed(),
+		isDisabled: optionAria.isDisabled(),
+		color: color()
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return local.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ColorSwatchPickerItem"
+	}, renderValues);
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	const cleanOptionProps = () => {
+		const { ref: _ref, ...restOptionProps } = optionAria.optionProps;
+		return restOptionProps;
+	};
+	return (() => {
+		var _el$31 = getNextElement(_tmpl$);
+		spread(_el$31, mergeProps(() => mergeProps$2(domProps(), cleanOptionProps()), {
+			get ["class"]() {
+				return renderProps.class();
+			},
+			get style() {
+				return renderProps.style();
+			}
+		}), false, true);
+		insert(_el$31, createComponent(ColorSwatchContextInternal.Provider, {
+			get value() {
+				return { color: color() };
+			},
+			get children() {
+				return memo(() => !!renderProps.children)() ? renderProps.renderChildren() : createComponent(ColorSwatch, {});
+			}
+		}));
+		runHydrationEvents();
+		return _el$31;
+	})();
+}
+//#endregion
+export { ColorArea, ColorAreaContext, ColorAreaGradient, ColorAreaStateContext, ColorAreaThumb, ColorField, ColorFieldContext, ColorFieldInput, ColorFieldStateContext, ColorPicker, ColorPickerContext, ColorPickerStateContext, ColorSlider, ColorSliderContext, ColorSliderLabel, ColorSliderOutput, ColorSliderStateContext, ColorSliderThumb, ColorSliderTrack, ColorSwatch, ColorSwatchContext, ColorSwatchPicker, ColorSwatchPickerContext, ColorSwatchPickerItem, ColorThumb, ColorWheel, ColorWheelContext, ColorWheelStateContext, ColorWheelThumb, ColorWheelTrack, ColorWheelTrackContext };
+
+//# sourceMappingURL=Color.js.map