@proyecto-viviana/solidaria-components 0.5.0 → 0.7.0-rc.0

package/dist/Color.jsx

@@ -1,13 +1,70 @@
-import { filterDOMProps, useRenderProps } from "./utils.jsx";
-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$1, useLocale } from "@proyecto-viviana/solidaria";
-import { createColorAreaState, createColorFieldState, createColorSliderState, createColorWheelState, createListState, normalizeColor } from "@proyecto-viviana/solid-stately";
+/*
+* Copyright 2022 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+/*
+* Copyright 2024 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+/*
+* Copyright 2020 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/ColorArea.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/ColorField.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/ColorPicker.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/ColorSlider.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/ColorSwatch.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/ColorSwatchPicker.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/ColorThumb.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/ColorWheel.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/selection/ListKeyboardDelegate.ts
+import { Provider, attrString as attrString$1, dataAttr, filterDOMProps, useRenderProps } from "./utils.jsx";
+import { TextContext } from "./Text.jsx";
+import { FieldErrorContext } from "./FieldError.jsx";
+import { t as racIntlStrings } from "./intl.jsx";
+import { Show, createContext, createEffect, createMemo, createSignal, createTrackedEffect, flush, untrack, useContext } from "solid-js";
+import { createColorArea, createColorField, createColorSlider, createColorSwatch, createColorWheel, createFocusRing, createHover, createListBox, createOption, createStringFormatter, mergeProps, useLocale } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
+import { VALID_VALIDITY_STATE, createColorAreaState, createColorFieldState, createColorSliderState, createColorWheelState, createListState, normalizeColor } from "@proyecto-viviana/solid-stately";
 //#region src/Color.tsx
 /**
-* Color components for solidaria-components
+* Color components for solidaria-components.
 *
 * Pre-wired headless color picker components that combine state + aria hooks.
-* Port of react-aria-components color components.
+* Based on these pinned React Aria Components sources:
+* - packages/react-aria-components/src/ColorArea.tsx
+* - packages/react-aria-components/src/ColorField.tsx
+* - packages/react-aria-components/src/ColorPicker.tsx
+* - packages/react-aria-components/src/ColorSlider.tsx
+* - packages/react-aria-components/src/ColorSwatch.tsx
+* - packages/react-aria-components/src/ColorSwatchPicker.tsx
+* - packages/react-aria-components/src/ColorThumb.tsx
+* - packages/react-aria-components/src/ColorWheel.tsx
+* - packages/react-aria/src/selection/ListKeyboardDelegate.ts
+*
+* This Solid module combines the upstream component files and grid keyboard behavior.
 */
 const ColorPickerContextInternal = createContext(null);
 const ColorPickerStateContextInternal = createContext(null);
@@ -97,7 +154,7 @@ function ColorSlider(props) {
 		defaultClassName: "solidaria-ColorSlider"
 	}, renderValues);
 	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
-	return <ColorSliderContext.Provider value={{
+	return <ColorSliderContext value={{
 		state,
 		get trackProps() {
 			return colorSliderAria.trackProps;
@@ -120,10 +177,10 @@ function ColorSlider(props) {
 		setTrackRef,
 		setInputRef
 	}}>
-      <div {...domProps()} class={renderProps.class()} style={renderProps.style()} data-disabled={state.isDisabled || void 0} data-dragging={state.isDragging || void 0} data-orientation={state.orientation} slot={local.slot || void 0}>
-        {renderProps.renderChildren()}
+      <div {...domProps()} class={renderProps.class()} style={renderProps.style()} data-disabled={dataAttr(state.isDisabled)} data-dragging={dataAttr(state.isDragging)} data-orientation={state.orientation} slot={local.slot || void 0}>
+        {renderProps.renderChildrenStable()}
       </div>
-    </ColorSliderContext.Provider>;
+    </ColorSliderContext>;
 }
 /**
 * The label element of a color slider.
@@ -210,8 +267,8 @@ function ColorSliderTrack(props) {
 			...renderStyle
 		};
 	};
-	return <div {...domProps} ref={context.setTrackRef} {...cleanTrackProps()} class={renderProps.class()} style={mergedStyle()} data-disabled={state.isDisabled || void 0} data-dragging={state.isDragging || void 0} data-orientation={state.orientation}>
-      {renderProps.renderChildren()}
+	return <div {...domProps} ref={context.setTrackRef} {...cleanTrackProps()} class={renderProps.class()} style={mergedStyle()} data-disabled={dataAttr(state.isDisabled)} data-dragging={dataAttr(state.isDragging)} data-orientation={state.orientation}>
+      {renderProps.renderChildrenStable()}
     </div>;
 }
 /**
@@ -262,8 +319,12 @@ function ColorSliderThumb(props) {
 		return rest;
 	};
 	const mergedInputProps = () => {
-		return mergeProps$1(context.inputProps, cleanFocusProps());
+		return mergeProps(context.inputProps, cleanFocusProps());
 	};
+	let sliderInput;
+	createEffect(() => state.getThumbValue(), (value) => {
+		if (sliderInput && sliderInput.value !== String(value)) sliderInput.value = String(value);
+	});
 	const mergedStyle = () => {
 		const thumbStyle = context.thumbProps.style || {};
 		const renderStyle = renderProps.style() || {};
@@ -272,9 +333,13 @@ function ColorSliderThumb(props) {
 			...renderStyle
 		};
 	};
-	return <div {...domProps} {...cleanThumbProps()} {...cleanHoverProps()} ref={local.ref} class={renderProps.class()} style={mergedStyle()} data-disabled={state.isDisabled || void 0} data-dragging={state.isDragging || void 0} data-focused={isFocused() || void 0} data-focus-visible={isFocusVisible() || void 0} data-hovered={isHovered() || void 0}>
-      <input ref={context.setInputRef} {...mergedInputProps()} />
-      {renderProps.renderChildren()}
+	return <div {...domProps} {...cleanThumbProps()} {...cleanHoverProps()} ref={local.ref} class={renderProps.class()} style={mergedStyle()} data-disabled={dataAttr(state.isDisabled)} data-dragging={dataAttr(state.isDragging)} data-focused={dataAttr(isFocused())} data-focus-visible={dataAttr(isFocusVisible())} data-hovered={dataAttr(isHovered())}>
+      <input ref={(el) => {
+		sliderInput = el;
+		context.setInputRef(el);
+		if (el) el.value = String(state.getThumbValue());
+	}} {...mergedInputProps()} />
+      {renderProps.renderChildrenStable()}
     </div>;
 }
 ColorSlider.Track = ColorSliderTrack;
@@ -389,7 +454,7 @@ function ColorArea(props) {
 			...renderStyle
 		};
 	};
-	return <ColorAreaContext.Provider value={{
+	return <ColorAreaContext value={{
 		state,
 		get colorAreaProps() {
 			return colorAreaAria.colorAreaProps;
@@ -409,10 +474,10 @@ function ColorArea(props) {
 		areaRef,
 		setAreaRef
 	}}>
-      <div ref={setAreaRef} {...domProps()} {...cleanColorAreaProps()} class={renderProps.class()} style={mergedStyle()} slot={local.slot ?? void 0} data-disabled={state.isDisabled || void 0} data-dragging={state.isDragging || void 0}>
+      <div ref={setAreaRef} {...domProps()} {...cleanColorAreaProps()} class={renderProps.class()} style={mergedStyle()} slot={local.slot ?? void 0} data-disabled={dataAttr(state.isDisabled)} data-dragging={dataAttr(state.isDragging)}>
         {colorAreaChildren()}
       </div>
-    </ColorAreaContext.Provider>;
+    </ColorAreaContext>;
 }
 /**
 * The gradient background of a color area.
@@ -448,7 +513,7 @@ function ColorAreaGradient(props) {
 			...renderStyle
 		};
 	};
-	return <div {...domProps} {...cleanGradientProps()} class={renderProps.class()} style={mergedStyle()} data-disabled={state.isDisabled || void 0}>
+	return <div {...domProps} {...cleanGradientProps()} class={renderProps.class()} style={mergedStyle()} data-disabled={dataAttr(state.isDisabled)}>
       {renderProps.renderChildren()}
     </div>;
 }
@@ -502,11 +567,11 @@ function ColorAreaThumb(props) {
 	};
 	const mergedXInputProps = () => {
 		const { value: _value, ...inputProps } = context.xInputProps;
-		return mergeProps$1(inputProps, cleanFocusProps());
+		return mergeProps(inputProps, cleanFocusProps());
 	};
 	const mergedYInputProps = () => {
 		const { value: _value, ...inputProps } = context.yInputProps;
-		return mergeProps$1(inputProps, cleanFocusProps());
+		return mergeProps(inputProps, cleanFocusProps());
 	};
 	const mergedStyle = () => {
 		const thumbStyle = context.thumbProps.style || {};
@@ -524,13 +589,13 @@ function ColorAreaThumb(props) {
 		update();
 		queueMicrotask(update);
 	};
-	createEffect(() => {
+	createTrackedEffect(() => {
 		syncInputValue(xInputRef, state.getXValue());
 	});
-	createEffect(() => {
+	createTrackedEffect(() => {
 		syncInputValue(yInputRef, state.getYValue());
 	});
-	return <div {...domProps} ref={local.ref} {...cleanThumbProps()} {...cleanHoverProps()} class={renderProps.class()} style={mergedStyle()} data-disabled={state.isDisabled || void 0} data-dragging={state.isDragging || void 0} data-focused={isFocused() || void 0} data-focus-visible={isFocusVisible() || void 0} data-hovered={isHovered() || void 0}>
+	return <div {...domProps} ref={local.ref} {...cleanThumbProps()} {...cleanHoverProps()} class={renderProps.class()} style={mergedStyle()} data-disabled={dataAttr(state.isDisabled)} data-dragging={dataAttr(state.isDragging)} data-focused={dataAttr(isFocused())} data-focus-visible={dataAttr(isFocusVisible())} data-hovered={dataAttr(isHovered())}>
       <input {...mergedXInputProps()} ref={(el) => {
 		xInputRef = el;
 		syncInputValue(el, state.getXValue());
@@ -613,7 +678,7 @@ function ColorWheel(props) {
 		defaultClassName: "solidaria-ColorWheel"
 	}, renderValues);
 	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
-	return <ColorWheelContext.Provider value={{
+	return <ColorWheelContext value={{
 		state,
 		get trackProps() {
 			return colorWheelAria.trackProps;
@@ -629,10 +694,10 @@ function ColorWheel(props) {
 		},
 		setWheelRef
 	}}>
-      <div ref={setWheelRef} {...domProps()} class={renderProps.class()} style={renderProps.style()} slot={local.slot || void 0} data-disabled={state.isDisabled || void 0} data-dragging={state.isDragging || void 0}>
-        {renderProps.renderChildren()}
+      <div ref={setWheelRef} {...domProps()} class={renderProps.class()} style={renderProps.style()} slot={local.slot || void 0} data-disabled={dataAttr(state.isDisabled)} data-dragging={dataAttr(state.isDragging)}>
+        {renderProps.renderChildrenStable()}
       </div>
-    </ColorWheelContext.Provider>;
+    </ColorWheelContext>;
 }
 /**
 * The track element of a color wheel.
@@ -672,8 +737,8 @@ function ColorWheelTrack(props) {
 			...renderStyle
 		};
 	};
-	return <div {...domProps} {...cleanTrackProps()} class={renderProps.class()} style={mergedStyle()} data-disabled={state.isDisabled || void 0} data-dragging={state.isDragging || void 0}>
-      {renderProps.renderChildren()}
+	return <div {...domProps} {...cleanTrackProps()} class={renderProps.class()} style={mergedStyle()} data-disabled={dataAttr(state.isDisabled)} data-dragging={dataAttr(state.isDragging)}>
+      {renderProps.renderChildrenStable()}
     </div>;
 }
 /**
@@ -724,7 +789,7 @@ function ColorWheelThumb(props) {
 		return rest;
 	};
 	const mergedInputProps = () => {
-		return mergeProps$1(context.inputProps, cleanFocusProps());
+		return mergeProps(context.inputProps, cleanFocusProps());
 	};
 	const mergedStyle = () => {
 		const thumbStyle = context.thumbProps.style || {};
@@ -734,9 +799,9 @@ function ColorWheelThumb(props) {
 			...renderStyle
 		};
 	};
-	return <div {...domProps} ref={local.ref} {...cleanThumbProps()} {...cleanHoverProps()} class={renderProps.class()} style={mergedStyle()} data-disabled={state.isDisabled || void 0} data-dragging={state.isDragging || void 0} data-focused={isFocused() || void 0} data-focus-visible={isFocusVisible() || void 0} data-hovered={isHovered() || void 0}>
+	return <div {...domProps} ref={local.ref} {...cleanThumbProps()} {...cleanHoverProps()} class={renderProps.class()} style={mergedStyle()} data-disabled={dataAttr(state.isDisabled)} data-dragging={dataAttr(state.isDragging)} data-focused={dataAttr(isFocused())} data-focus-visible={dataAttr(isFocusVisible())} data-hovered={dataAttr(isHovered())}>
       <input {...mergedInputProps()} />
-      {renderProps.renderChildren()}
+      {renderProps.renderChildrenStable()}
     </div>;
 }
 ColorWheel.Track = ColorWheelTrack;
@@ -781,7 +846,7 @@ function ColorField(props) {
 		"excludeFromTabOrder",
 		"placeholder"
 	]);
-	const [hasRegisteredLabelElement, setHasRegisteredLabelElement] = createSignal(false);
+	const [hasRegisteredLabelElement, setHasRegisteredLabelElement] = createSignal(false, { ownedWrite: true });
 	const state = createColorFieldState(() => ({
 		value: stateProps.value ?? pickerContext?.value,
 		defaultValue: stateProps.defaultValue,
@@ -819,24 +884,16 @@ function ColorField(props) {
 		excludeFromTabOrder: ariaProps.excludeFromTabOrder,
 		placeholder: ariaProps.placeholder,
 		channel: stateProps.channel,
-		colorSpace: stateProps.colorSpace
+		colorSpace: stateProps.colorSpace,
+		description: local.description,
+		errorMessage: local.errorMessage
 	}), () => 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"]
+			"aria-labelledby": labelledBy
 		};
 	};
 	const hiddenInputValue = createMemo(() => Number.isNaN(state.numberValue) ? "" : String(state.numberValue));
@@ -887,7 +944,33 @@ function ColorField(props) {
 		return renderedChildren;
 	};
 	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
-	return <ColorFieldContext.Provider value={{
+	const textSlots = { slots: {
+		get description() {
+			return colorFieldAria.descriptionProps;
+		},
+		get errorMessage() {
+			return colorFieldAria.errorMessageProps;
+		}
+	} };
+	const fieldErrorContext = {
+		get validation() {
+			const invalid = ariaProps.isInvalid || state.isInvalid;
+			const errorMessage = local.errorMessage;
+			return {
+				isInvalid: invalid,
+				validationErrors: invalid && typeof errorMessage === "string" ? [errorMessage] : [],
+				validationDetails: invalid ? {
+					...VALID_VALIDITY_STATE,
+					customError: true,
+					valid: false
+				} : VALID_VALIDITY_STATE
+			};
+		},
+		get errorMessageProps() {
+			return colorFieldAria.errorMessageProps;
+		}
+	};
+	return <ColorFieldContext value={{
 		state,
 		get inputProps() {
 			return fieldInputProps();
@@ -905,18 +988,20 @@ function ColorField(props) {
 		setLabelElement: setHasRegisteredLabelElement
 	}}>
       <>
-        <div {...domProps()} class={renderProps.class()} style={renderProps.style()} slot={local.slot ?? void 0} data-disabled={state.isDisabled || void 0} data-readonly={state.isReadOnly || void 0} data-invalid={state.isInvalid || void 0} data-required={state.isRequired || void 0} data-channel={state.channel ?? "hex"}>
+        <div {...domProps()} class={renderProps.class()} style={renderProps.style()} slot={local.slot ?? void 0} data-disabled={dataAttr(state.isDisabled)} data-readonly={dataAttr(state.isReadOnly)} data-invalid={dataAttr(state.isInvalid)} data-required={dataAttr(state.isRequired)} data-channel={state.channel ?? "hex"}>
           <Show when={local.label}>
             <label {...colorFieldAria.labelProps}>{local.label}</label>
           </Show>
 
-          {renderChildren()}
+          <Provider values={[[TextContext, textSlots], [FieldErrorContext, fieldErrorContext]]}>
+            {renderChildren()}
+          </Provider>
         </div>
         <Show when={state.channel && ariaProps.name}>
           <input type="hidden" name={ariaProps.name} form={ariaProps.form} value={hiddenInputValue()} />
         </Show>
       </>
-    </ColorFieldContext.Provider>;
+    </ColorFieldContext>;
 }
 /**
 * The input element of a color field.
@@ -968,7 +1053,7 @@ function ColorFieldInput(props) {
 	return <input {...domProps} {...cleanInputProps()} {...cleanFocusProps()} {...cleanHoverProps()} ref={(el) => {
 		context.setInputRef(el);
 		local.ref?.(el);
-	}} class={renderProps.class()} style={renderProps.style()} value={inputValue()} data-disabled={state.isDisabled || void 0} data-readonly={state.isReadOnly || void 0} data-invalid={state.isInvalid || void 0} data-focused={isFocused() || void 0} data-focus-visible={isFocusVisible() || void 0} data-hovered={isHovered() || void 0} />;
+	}} class={renderProps.class()} style={renderProps.style()} value={inputValue()} data-disabled={dataAttr(state.isDisabled)} data-readonly={dataAttr(state.isReadOnly)} data-invalid={dataAttr(state.isInvalid)} data-focused={dataAttr(isFocused())} data-focus-visible={dataAttr(isFocusVisible())} data-hovered={dataAttr(isHovered())} />;
 }
 ColorField.Input = ColorFieldInput;
 /**
@@ -995,7 +1080,7 @@ function ColorSwatch(props) {
 	});
 	const swatchAria = createColorSwatch(() => ({
 		id: rest.id,
-		slot: local.slot,
+		slot: attrString$1(local.slot),
 		color: resolvedColor(),
 		colorName: local.colorName,
 		"aria-label": ariaProps["aria-label"],
@@ -1070,11 +1155,11 @@ function ColorPicker(props) {
 		style: local.style,
 		defaultClassName: "solidaria-ColorPicker"
 	}, renderValues);
-	return <ColorPickerStateContextInternal.Provider value={{
+	return <ColorPickerStateContextInternal value={{
 		color: () => color(),
 		setColor
 	}}>
-      <ColorPickerContextInternal.Provider value={{
+      <ColorPickerContextInternal value={{
 		get value() {
 			return color();
 		},
@@ -1083,11 +1168,13 @@ function ColorPicker(props) {
         <div class={renderProps.class()} style={renderProps.style()}>
           {renderProps.renderChildren()}
         </div>
-      </ColorPickerContextInternal.Provider>
-    </ColorPickerStateContextInternal.Provider>;
+      </ColorPickerContextInternal>
+    </ColorPickerStateContextInternal>;
 }
 function ColorSwatchPicker(props) {
 	const pickerContext = useContext(ColorPickerContextInternal);
+	const locale = useLocale();
+	const stringFormatter = createStringFormatter(racIntlStrings, "react-aria-components");
 	const [local, rest] = splitProps(props, [
 		"value",
 		"defaultValue",
@@ -1103,8 +1190,8 @@ function ColorSwatchPicker(props) {
 		"style",
 		"slot"
 	]);
-	const [itemMap, setItemMap] = createSignal(/* @__PURE__ */ new Map());
-	const [itemOrder, setItemOrder] = createSignal([]);
+	const [itemMap, setItemMap] = createSignal(/* @__PURE__ */ new Map(), { ownedWrite: true });
+	const [itemOrder, setItemOrder] = createSignal([], { ownedWrite: true });
 	const [internalColor, setInternalColor] = createSignal(normalizeColor(local.defaultValue ?? pickerContext?.value ?? "#ff0000"));
 	const selectedColor = createMemo(() => {
 		if (local.value !== void 0) return normalizeColor(local.value);
@@ -1162,29 +1249,32 @@ function ColorSwatchPicker(props) {
 			(local.onChange ?? pickerContext?.onChange)?.(item.color);
 		}
 	});
+	const [pickerRef, setPickerRef] = createSignal(null);
 	const listBoxAria = createListBox(() => ({
 		id: local.id,
-		"aria-label": local["aria-label"] ?? (!local["aria-labelledby"] ? "Color swatches" : void 0),
+		"aria-label": (local["aria-label"] || void 0) ?? (!local["aria-labelledby"] ? stringFormatter().format("colorSwatchPicker") : void 0),
 		"aria-labelledby": local["aria-labelledby"],
 		"aria-describedby": local["aria-describedby"],
 		"aria-details": local["aria-details"]
-	}), state);
-	const resolveDirection = () => {
-		if (typeof document === "undefined") return "ltr";
-		return document.dir === "rtl" ? "rtl" : "ltr";
+	}), state, () => pickerRef());
+	const resolveDirection = () => locale().direction;
+	const isItemDisabled = (key) => {
+		if (key == null) return false;
+		if (state.isDisabled(key)) return true;
+		return !!itemMap().get(String(key))?.isDisabled;
 	};
 	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);
+		while (key != null && isItemDisabled(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);
+		while (key != null && isItemDisabled(key)) key = getAdjacent(key);
 		return key;
 	};
 	const getOptionElementForKey = (listbox, key) => {
@@ -1211,6 +1301,17 @@ function ColorSwatchPicker(props) {
 	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 handleStackKeyDown = (e) => {
+		if ((local.layout ?? "grid") === "grid") return false;
+		if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return false;
+		const initialKey = state.focusedKey() ?? (e.key === "ArrowUp" ? getBoundaryEnabledKey("prev") : getBoundaryEnabledKey("next"));
+		if (initialKey == null) return false;
+		const nextKey = e.key === "ArrowDown" ? findNextEnabledKey(initialKey, "next") : findNextEnabledKey(initialKey, "prev");
+		if (nextKey != null) state.setFocusedKey(nextKey);
+		e.preventDefault();
+		e.stopPropagation();
+		return true;
+	};
 	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;
@@ -1228,9 +1329,7 @@ function ColorSwatchPicker(props) {
 			case "ArrowRight":
 				nextKey = getGridKeyRightOf(initialKey);
 				break;
-			case "ArrowLeft":
-				nextKey = getGridKeyLeftOf(initialKey);
-				break;
+			case "ArrowLeft": nextKey = getGridKeyLeftOf(initialKey);
 		}
 		if (nextKey != null) state.setFocusedKey(nextKey);
 		e.preventDefault();
@@ -1241,7 +1340,16 @@ function ColorSwatchPicker(props) {
 		return listBoxAria.listBoxProps.onKeyDown;
 	};
 	const onColorSwatchPickerKeyDown = (e) => {
-		if (handleGridKeyDown(e)) return;
+		if (handleGridKeyDown(e) || handleStackKeyDown(e)) return;
+		if (e.key === "Enter" || e.key === " ") {
+			const key = state.focusedKey();
+			if (key != null && !isItemDisabled(key)) {
+				state.setSelectedKeys([key]);
+				e.preventDefault();
+				e.stopPropagation();
+				return;
+			}
+		}
 		getListBoxKeyDown()?.(e);
 	};
 	const { isFocused, isFocusVisible, focusProps } = createFocusRing({ within: true });
@@ -1265,15 +1373,28 @@ function ColorSwatchPicker(props) {
 		const { ref: _ref, ...restFocusProps } = focusProps;
 		return restFocusProps;
 	};
-	return <ColorSwatchPickerContextInternal.Provider value={{
+	return <ColorSwatchPickerContextInternal value={{
 		state,
 		registerItem,
 		unregisterItem
 	}}>
-      <div {...mergeProps$1(domProps(), cleanListBoxProps(), cleanFocusProps(), { onKeyDown: onColorSwatchPickerKeyDown })} class={renderProps.class()} style={renderProps.style()} slot={local.slot ?? void 0} data-focused={state.isFocused() || void 0} data-focus-visible={isFocusVisible() || void 0} data-layout={local.layout ?? "grid"}>
+      <div {...mergeProps(domProps(), cleanListBoxProps(), cleanFocusProps(), {
+		onKeyDown: onColorSwatchPickerKeyDown,
+		onFocus: (e) => {
+			if (e.target !== e.currentTarget) return;
+			if (state.focusedKey() == null) {
+				const key = state.selectionManager.firstSelectedKey ?? state.collection().getFirstKey();
+				if (key != null) state.setFocusedKey(key);
+			}
+			state.setFocused(true);
+			try {
+				flush();
+			} catch {}
+		}
+	})} ref={setPickerRef} class={renderProps.class()} style={renderProps.style()} slot={local.slot ?? void 0} data-focused={dataAttr(state.isFocused())} data-focus-visible={dataAttr(isFocusVisible())} data-layout={local.layout ?? "grid"}>
         {local.children}
       </div>
-    </ColorSwatchPickerContextInternal.Provider>;
+    </ColorSwatchPickerContextInternal>;
 }
 function ColorSwatchPickerItem(props) {
 	const context = useContext(ColorSwatchPickerContextInternal);
@@ -1291,15 +1412,14 @@ function ColorSwatchPickerItem(props) {
 		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));
+	createEffect(() => ({
+		key: key(),
+		color: color(),
+		textValue: textValue(),
+		isDisabled: ariaProps.isDisabled
+	}), (item) => {
+		context.registerItem(item);
+		return () => context.unregisterItem(item.key);
 	});
 	const [optionRef, setOptionRef] = createSignal(null);
 	const optionAria = createOption(() => ({
@@ -1328,10 +1448,10 @@ function ColorSwatchPickerItem(props) {
 		const { ref: _ref, ...restOptionProps } = optionAria.optionProps;
 		return restOptionProps;
 	};
-	return <div ref={setOptionRef} {...mergeProps$1(domProps(), cleanOptionProps())} class={renderProps.class()} style={renderProps.style()}>
-      <ColorSwatchContextInternal.Provider value={{ color: color() }}>
+	return <div ref={setOptionRef} {...mergeProps(domProps(), cleanOptionProps())} class={renderProps.class()} style={renderProps.style()}>
+      <ColorSwatchContextInternal value={{ color: color() }}>
         {renderProps.children ? renderProps.renderChildren() : <ColorSwatch />}
-      </ColorSwatchContextInternal.Provider>
+      </ColorSwatchContextInternal>
     </div>;
 }
 //#endregion