reka-ui 2.8.2 → 2.9.0

package/dist/ColorField/ColorFieldInput.js

@@ -0,0 +1,134 @@
+import { Primitive } from "../Primitive/Primitive.js";
+import { injectColorFieldRootContext } from "./ColorFieldRoot.js";
+import { computed, createBlock, defineComponent, openBlock, ref, renderSlot, unref, withCtx } from "vue";
+
+//#region src/ColorField/ColorFieldInput.vue?vue&type=script&setup=true&lang.ts
+var ColorFieldInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ColorFieldInput",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "input"
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const rootContext = injectColorFieldRootContext();
+		const isFocused = ref(false);
+		const inputType = computed(() => {
+			return rootContext.channel.value ? "text" : "text";
+		});
+		const inputMode = computed(() => {
+			return rootContext.channel.value ? "numeric" : "text";
+		});
+		function handleInput(event) {
+			const target = event.target;
+			rootContext.updateValue(target.value);
+		}
+		function handleBlur() {
+			isFocused.value = false;
+			rootContext.commit();
+		}
+		function handleFocus() {
+			isFocused.value = true;
+		}
+		function handleWheel(event) {
+			if (!isFocused.value) return;
+			rootContext.handleWheel(event);
+		}
+		function handleKeydown(event) {
+			switch (event.key) {
+				case "ArrowUp":
+					event.preventDefault();
+					rootContext.increment();
+					break;
+				case "ArrowDown":
+					event.preventDefault();
+					rootContext.decrement();
+					break;
+				case "PageUp":
+					event.preventDefault();
+					rootContext.incrementPage();
+					break;
+				case "PageDown":
+					event.preventDefault();
+					rootContext.decrementPage();
+					break;
+				case "Home":
+					event.preventDefault();
+					rootContext.decrementToMin();
+					break;
+				case "End":
+					event.preventDefault();
+					rootContext.incrementToMax();
+					break;
+				case "Enter":
+					event.preventDefault();
+					rootContext.commit();
+					break;
+			}
+		}
+		function handleBeforeInput(event) {
+			if (!rootContext.channel.value) return;
+			const target = event.target;
+			const data = event.data;
+			if (data && !/[\d.-]/.test(data)) {
+				event.preventDefault();
+				return;
+			}
+			const nextValue = target.value.slice(0, target.selectionStart ?? void 0) + (data ?? "") + target.value.slice(target.selectionEnd ?? void 0);
+			if (nextValue === "-" || nextValue === "." || nextValue === "-.") return;
+			const numValue = parseFloat(nextValue);
+			if (isNaN(numValue)) event.preventDefault();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Primitive), {
+				"as-child": _ctx.asChild,
+				as: _ctx.as,
+				type: inputType.value,
+				inputmode: inputMode.value,
+				value: unref(rootContext).inputValue.value,
+				placeholder: unref(rootContext).placeholder.value,
+				disabled: unref(rootContext).disabled.value,
+				readonly: unref(rootContext).readonly.value,
+				"data-disabled": unref(rootContext).disabled.value ? "" : void 0,
+				"data-readonly": unref(rootContext).readonly.value ? "" : void 0,
+				"aria-invalid": !unref(rootContext).channel.value ? void 0 : void 0,
+				onInput: handleInput,
+				onBlur: handleBlur,
+				onFocus: handleFocus,
+				onKeydown: handleKeydown,
+				onWheel: handleWheel,
+				onBeforeinput: handleBeforeInput
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"as-child",
+				"as",
+				"type",
+				"inputmode",
+				"value",
+				"placeholder",
+				"disabled",
+				"readonly",
+				"data-disabled",
+				"data-readonly",
+				"aria-invalid"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/ColorField/ColorFieldInput.vue
+var ColorFieldInput_default = ColorFieldInput_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+export { ColorFieldInput_default };
+//# sourceMappingURL=ColorFieldInput.js.map

package/dist/ColorField/ColorFieldInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorFieldInput.js","names":["asChild","as"],"sources":["../../src/ColorField/ColorFieldInput.vue","../../src/ColorField/ColorFieldInput.vue"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;;;;EAWA,MAAM,QAAQ;EAId,MAAM,cAAc,6BAA4B;EAEhD,MAAM,YAAY,IAAI,MAAK;EAE3B,MAAM,YAAY,SAAS,MAAM;AAC/B,UAAO,YAAY,QAAQ,QAAQ,SAAS;EAC7C,EAAA;EAED,MAAM,YAAY,SAAS,MAAM;AAC/B,UAAO,YAAY,QAAQ,QAAQ,YAAY;EAChD,EAAA;EAED,SAAS,YAAY,OAAc;GACjC,MAAM,SAAS,MAAM;AACrB,eAAY,YAAY,OAAO,MAAK;EACtC;EAEA,SAAS,aAAa;AACpB,aAAU,QAAQ;AAClB,eAAY,QAAO;EACrB;EAEA,SAAS,cAAc;AACrB,aAAU,QAAQ;EACpB;EAEA,SAAS,YAAY,OAAmB;AACtC,QAAK,UAAU,MACb;AACF,eAAY,YAAY,MAAK;EAC/B;EAEA,SAAS,cAAc,OAAsB;AAC3C,WAAQ,MAAM,KAAd;IACE,KAAK;AACH,WAAM,gBAAe;AACrB,iBAAY,WAAU;AACtB;IACF,KAAK;AACH,WAAM,gBAAe;AACrB,iBAAY,WAAU;AACtB;IACF,KAAK;AACH,WAAM,gBAAe;AACrB,iBAAY,eAAc;AAC1B;IACF,KAAK;AACH,WAAM,gBAAe;AACrB,iBAAY,eAAc;AAC1B;IACF,KAAK;AACH,WAAM,gBAAe;AACrB,iBAAY,gBAAe;AAC3B;IACF,KAAK;AACH,WAAM,gBAAe;AACrB,iBAAY,gBAAe;AAC3B;IACF,KAAK;AACH,WAAM,gBAAe;AACrB,iBAAY,QAAO;AACnB;GACJ;EACF;EAGA,SAAS,kBAAkB,OAAmB;AAC5C,QAAK,YAAY,QAAQ,MACvB;GAEF,MAAM,SAAS,MAAM;GACrB,MAAM,OAAO,MAAM;AAGnB,OAAI,SAAS,SAAS,KAAK,KAAK,EAAE;AAChC,UAAM,gBAAe;AACrB;GACF;GAGA,MAAM,YAAY,OAAO,MAAM,MAAM,GAAG,OAAO,yBAA2B,IACrE,QAAQ,MACT,OAAO,MAAM,MAAM,OAAO,uBAAyB;AAGvD,OAAI,cAAc,OAAO,cAAc,OAAO,cAAc,KAC1D;GAEF,MAAM,WAAW,WAAW,UAAS;AACrC,OAAI,MAAM,SAAS,CACjB,OAAM,gBAAe;EAEzB;;uBAIE,YAoBY,MAAA,UAAA,EAAA;IAnBT,YAAUA,KAAAA;IACV,IAAIC,KAAAA;IACJ,MAAM,UAAA;IACN,WAAW,UAAA;IACX,OAAO,MAAA,YAAW,CAAC,WAAW;IAC9B,aAAa,MAAA,YAAW,CAAC,YAAY;IACrC,UAAU,MAAA,YAAW,CAAC,SAAS;IAC/B,UAAU,MAAA,YAAW,CAAC,SAAS;IAC/B,iBAAe,MAAA,YAAW,CAAC,SAAS,QAAK;IACzC,iBAAe,MAAA,YAAW,CAAC,SAAS,QAAK;IACzC,iBAAe,MAAA,YAAW,CAAC,QAAQ;IACnC,SAAO;IACP,QAAM;IACN,SAAO;IACP,WAAS;IACT,SAAO;IACP,eAAa;;qBAEd,MAAQ,CAAR,WAAQ,KAAA,QAAA,UAAA"}

package/dist/ColorField/ColorFieldRoot.cjs

@@ -0,0 +1,281 @@
+const require_rolldown_runtime = require('../rolldown-runtime.cjs');
+const require_shared_createContext = require('../shared/createContext.cjs');
+const require_shared_useFormControl = require('../shared/useFormControl.cjs');
+const require_shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
+const require_shared_useLocale = require('../shared/useLocale.cjs');
+const require_Primitive_Primitive = require('../Primitive/Primitive.cjs');
+const require_VisuallyHidden_VisuallyHiddenInput = require('../VisuallyHidden/VisuallyHiddenInput.cjs');
+const require_color_convert = require('../color/convert.cjs');
+const require_color_channel = require('../color/channel.cjs');
+const require_color_parse = require('../color/parse.cjs');
+const vue = require_rolldown_runtime.__toESM(require("vue"));
+const __vueuse_core = require_rolldown_runtime.__toESM(require("@vueuse/core"));
+
+//#region src/ColorField/ColorFieldRoot.vue?vue&type=script&setup=true&lang.ts
+const [injectColorFieldRootContext, provideColorFieldRootContext] = require_shared_createContext.createContext("ColorFieldRoot");
+var ColorFieldRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	inheritAttrs: false,
+	__name: "ColorFieldRoot",
+	props: {
+		modelValue: {
+			type: [String, Object],
+			required: false
+		},
+		defaultValue: {
+			type: [String, Object],
+			required: false,
+			default: "#000000"
+		},
+		colorSpace: {
+			type: String,
+			required: false,
+			default: "hsl"
+		},
+		channel: {
+			type: String,
+			required: false
+		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		disableWheelChange: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		locale: {
+			type: String,
+			required: false
+		},
+		step: {
+			type: Number,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		}
+	},
+	emits: ["update:modelValue", "update:color"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const { colorSpace, channel, disabled, readonly, disableWheelChange, placeholder, locale: propLocale, step: stepProp } = (0, vue.toRefs)(props);
+		const { forwardRef, currentElement } = require_shared_useForwardExpose.useForwardExpose();
+		const isFormControl = require_shared_useFormControl.useFormControl(currentElement);
+		const locale = require_shared_useLocale.useLocale(propLocale);
+		const modelValue = (0, __vueuse_core.useVModel)(props, "modelValue", emits, {
+			defaultValue: props.defaultValue,
+			passive: props.modelValue === void 0
+		});
+		const color = (0, vue.computed)({
+			get: () => require_color_parse.normalizeColor(modelValue.value ?? "#000000"),
+			set: (newColor) => {
+				const hexString = require_color_convert.colorToString(newColor, "hex");
+				modelValue.value = hexString;
+				emits("update:color", newColor);
+			}
+		});
+		const inputValue = (0, vue.ref)("");
+		const isEditing = (0, vue.ref)(false);
+		(0, vue.watch)(() => color.value, (newColor) => {
+			if (!isEditing.value) inputValue.value = formatValue(newColor);
+		}, { immediate: true });
+		function formatValue(c) {
+			if (channel.value) {
+				const value = require_color_channel.getChannelValue(c, channel.value);
+				if (channel.value === "alpha") return String(Math.round(value));
+				return String(Math.round(value));
+			}
+			return require_color_convert.colorToString(c, "hex");
+		}
+		const MIN_HEX_INT = 0;
+		const MAX_HEX_INT = 16777215;
+		const PAGE_STEP_MULTIPLIER = 10;
+		function getStep() {
+			if (stepProp.value != null) return stepProp.value;
+			if (channel.value) return require_color_channel.getChannelRange(channel.value).step;
+			return 1;
+		}
+		function updateValue(value) {
+			inputValue.value = value;
+		}
+		function commit() {
+			isEditing.value = false;
+			if (channel.value) {
+				const numValue = parseFloat(inputValue.value);
+				if (!isNaN(numValue)) {
+					const range = require_color_channel.getChannelRange(channel.value);
+					const clamped = Math.max(range.min, Math.min(range.max, numValue));
+					color.value = require_color_channel.setChannelValue(color.value, channel.value, clamped);
+				}
+				inputValue.value = formatValue(color.value);
+			} else {
+				const trimmed = inputValue.value.trim();
+				if (require_color_parse.isValidColor(trimmed)) color.value = require_color_parse.parseColor(trimmed);
+				inputValue.value = formatValue(color.value);
+			}
+		}
+		function addHexValue(delta) {
+			const intDelta = Math.trunc(delta);
+			const hexInt = color.value.space === "rgb" ? Math.round(color.value.r) << 16 | Math.round(color.value.g) << 8 | Math.round(color.value.b) : (() => {
+				const rgb = require_color_convert.convertToRgb(color.value);
+				return Math.round(rgb.r) << 16 | Math.round(rgb.g) << 8 | Math.round(rgb.b);
+			})();
+			const clamped = Math.min(Math.max(hexInt + intDelta, MIN_HEX_INT), MAX_HEX_INT);
+			const hex = `#${clamped.toString(16).padStart(6, "0")}`;
+			color.value = require_color_parse.parseColor(hex);
+			inputValue.value = formatValue(color.value);
+		}
+		function increment() {
+			if (disabled.value || readonly.value) return;
+			const step = getStep();
+			if (channel.value) {
+				const currentValue = require_color_channel.getChannelValue(color.value, channel.value);
+				color.value = require_color_channel.setChannelValue(color.value, channel.value, currentValue + step);
+				inputValue.value = formatValue(color.value);
+			} else addHexValue(step);
+		}
+		function decrement() {
+			if (disabled.value || readonly.value) return;
+			const step = getStep();
+			if (channel.value) {
+				const currentValue = require_color_channel.getChannelValue(color.value, channel.value);
+				color.value = require_color_channel.setChannelValue(color.value, channel.value, currentValue - step);
+				inputValue.value = formatValue(color.value);
+			} else addHexValue(-step);
+		}
+		function incrementPage() {
+			if (disabled.value || readonly.value) return;
+			const step = getStep() * PAGE_STEP_MULTIPLIER;
+			if (channel.value) {
+				const currentValue = require_color_channel.getChannelValue(color.value, channel.value);
+				color.value = require_color_channel.setChannelValue(color.value, channel.value, currentValue + step);
+				inputValue.value = formatValue(color.value);
+			} else addHexValue(step);
+		}
+		function decrementPage() {
+			if (disabled.value || readonly.value) return;
+			const step = getStep() * PAGE_STEP_MULTIPLIER;
+			if (channel.value) {
+				const currentValue = require_color_channel.getChannelValue(color.value, channel.value);
+				color.value = require_color_channel.setChannelValue(color.value, channel.value, currentValue - step);
+				inputValue.value = formatValue(color.value);
+			} else addHexValue(-step);
+		}
+		function incrementToMax() {
+			if (disabled.value || readonly.value) return;
+			if (channel.value) {
+				const range = require_color_channel.getChannelRange(channel.value);
+				color.value = require_color_channel.setChannelValue(color.value, channel.value, range.max);
+				inputValue.value = formatValue(color.value);
+			} else addHexValue(MAX_HEX_INT);
+		}
+		function decrementToMin() {
+			if (disabled.value || readonly.value) return;
+			if (channel.value) {
+				const range = require_color_channel.getChannelRange(channel.value);
+				color.value = require_color_channel.setChannelValue(color.value, channel.value, range.min);
+				inputValue.value = formatValue(color.value);
+			} else addHexValue(-MAX_HEX_INT);
+		}
+		function handleWheel(event) {
+			if (disableWheelChange.value || disabled.value || readonly.value) return;
+			event.preventDefault();
+			if (event.deltaY > 0) decrement();
+			else increment();
+		}
+		provideColorFieldRootContext({
+			color: (0, vue.computed)(() => color.value),
+			inputValue,
+			channel,
+			colorSpace,
+			disabled,
+			readonly,
+			disableWheelChange,
+			placeholder,
+			updateValue,
+			commit,
+			increment,
+			decrement,
+			incrementToMax,
+			decrementToMin,
+			incrementPage,
+			decrementPage,
+			handleWheel
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_Primitive_Primitive.Primitive), {
+				ref: (0, vue.unref)(forwardRef),
+				as: _ctx.as,
+				"as-child": _ctx.asChild,
+				role: "group",
+				"data-disabled": (0, vue.unref)(disabled) ? "" : void 0,
+				"data-readonly": (0, vue.unref)(readonly) ? "" : void 0
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default"), (0, vue.unref)(isFormControl) && _ctx.name ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_VisuallyHidden_VisuallyHiddenInput.VisuallyHiddenInput_default), {
+					key: 0,
+					type: "text",
+					value: (0, vue.unref)(require_color_convert.colorToString)(color.value, "hex"),
+					name: _ctx.name,
+					disabled: (0, vue.unref)(disabled),
+					required: _ctx.required
+				}, null, 8, [
+					"value",
+					"name",
+					"disabled",
+					"required"
+				])) : (0, vue.createCommentVNode)("v-if", true)]),
+				_: 3
+			}, 8, [
+				"as",
+				"as-child",
+				"data-disabled",
+				"data-readonly"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/ColorField/ColorFieldRoot.vue
+var ColorFieldRoot_default = ColorFieldRoot_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+Object.defineProperty(exports, 'ColorFieldRoot_default', {
+  enumerable: true,
+  get: function () {
+    return ColorFieldRoot_default;
+  }
+});
+Object.defineProperty(exports, 'injectColorFieldRootContext', {
+  enumerable: true,
+  get: function () {
+    return injectColorFieldRootContext;
+  }
+});
+//# sourceMappingURL=ColorFieldRoot.cjs.map

package/dist/ColorField/ColorFieldRoot.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorFieldRoot.cjs","names":["as","asChild","name","required"],"sources":["../../src/ColorField/ColorFieldRoot.vue","../../src/ColorField/ColorFieldRoot.vue"],"sourcesContent":[],"mappings":"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"}

package/dist/ColorField/ColorFieldRoot.js

@@ -0,0 +1,269 @@
+import { createContext } from "../shared/createContext.js";
+import { useFormControl } from "../shared/useFormControl.js";
+import { useForwardExpose } from "../shared/useForwardExpose.js";
+import { useLocale } from "../shared/useLocale.js";
+import { Primitive } from "../Primitive/Primitive.js";
+import { VisuallyHiddenInput_default } from "../VisuallyHidden/VisuallyHiddenInput.js";
+import { colorToString, convertToRgb } from "../color/convert.js";
+import { getChannelRange, getChannelValue, setChannelValue } from "../color/channel.js";
+import { isValidColor, normalizeColor, parseColor } from "../color/parse.js";
+import { computed, createBlock, createCommentVNode, defineComponent, openBlock, ref, renderSlot, toRefs, unref, watch, withCtx } from "vue";
+import { useVModel } from "@vueuse/core";
+
+//#region src/ColorField/ColorFieldRoot.vue?vue&type=script&setup=true&lang.ts
+const [injectColorFieldRootContext, provideColorFieldRootContext] = createContext("ColorFieldRoot");
+var ColorFieldRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "ColorFieldRoot",
+	props: {
+		modelValue: {
+			type: [String, Object],
+			required: false
+		},
+		defaultValue: {
+			type: [String, Object],
+			required: false,
+			default: "#000000"
+		},
+		colorSpace: {
+			type: String,
+			required: false,
+			default: "hsl"
+		},
+		channel: {
+			type: String,
+			required: false
+		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		disableWheelChange: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		locale: {
+			type: String,
+			required: false
+		},
+		step: {
+			type: Number,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		}
+	},
+	emits: ["update:modelValue", "update:color"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const { colorSpace, channel, disabled, readonly, disableWheelChange, placeholder, locale: propLocale, step: stepProp } = toRefs(props);
+		const { forwardRef, currentElement } = useForwardExpose();
+		const isFormControl = useFormControl(currentElement);
+		const locale = useLocale(propLocale);
+		const modelValue = useVModel(props, "modelValue", emits, {
+			defaultValue: props.defaultValue,
+			passive: props.modelValue === void 0
+		});
+		const color = computed({
+			get: () => normalizeColor(modelValue.value ?? "#000000"),
+			set: (newColor) => {
+				const hexString = colorToString(newColor, "hex");
+				modelValue.value = hexString;
+				emits("update:color", newColor);
+			}
+		});
+		const inputValue = ref("");
+		const isEditing = ref(false);
+		watch(() => color.value, (newColor) => {
+			if (!isEditing.value) inputValue.value = formatValue(newColor);
+		}, { immediate: true });
+		function formatValue(c) {
+			if (channel.value) {
+				const value = getChannelValue(c, channel.value);
+				if (channel.value === "alpha") return String(Math.round(value));
+				return String(Math.round(value));
+			}
+			return colorToString(c, "hex");
+		}
+		const MIN_HEX_INT = 0;
+		const MAX_HEX_INT = 16777215;
+		const PAGE_STEP_MULTIPLIER = 10;
+		function getStep() {
+			if (stepProp.value != null) return stepProp.value;
+			if (channel.value) return getChannelRange(channel.value).step;
+			return 1;
+		}
+		function updateValue(value) {
+			inputValue.value = value;
+		}
+		function commit() {
+			isEditing.value = false;
+			if (channel.value) {
+				const numValue = parseFloat(inputValue.value);
+				if (!isNaN(numValue)) {
+					const range = getChannelRange(channel.value);
+					const clamped = Math.max(range.min, Math.min(range.max, numValue));
+					color.value = setChannelValue(color.value, channel.value, clamped);
+				}
+				inputValue.value = formatValue(color.value);
+			} else {
+				const trimmed = inputValue.value.trim();
+				if (isValidColor(trimmed)) color.value = parseColor(trimmed);
+				inputValue.value = formatValue(color.value);
+			}
+		}
+		function addHexValue(delta) {
+			const intDelta = Math.trunc(delta);
+			const hexInt = color.value.space === "rgb" ? Math.round(color.value.r) << 16 | Math.round(color.value.g) << 8 | Math.round(color.value.b) : (() => {
+				const rgb = convertToRgb(color.value);
+				return Math.round(rgb.r) << 16 | Math.round(rgb.g) << 8 | Math.round(rgb.b);
+			})();
+			const clamped = Math.min(Math.max(hexInt + intDelta, MIN_HEX_INT), MAX_HEX_INT);
+			const hex = `#${clamped.toString(16).padStart(6, "0")}`;
+			color.value = parseColor(hex);
+			inputValue.value = formatValue(color.value);
+		}
+		function increment() {
+			if (disabled.value || readonly.value) return;
+			const step = getStep();
+			if (channel.value) {
+				const currentValue = getChannelValue(color.value, channel.value);
+				color.value = setChannelValue(color.value, channel.value, currentValue + step);
+				inputValue.value = formatValue(color.value);
+			} else addHexValue(step);
+		}
+		function decrement() {
+			if (disabled.value || readonly.value) return;
+			const step = getStep();
+			if (channel.value) {
+				const currentValue = getChannelValue(color.value, channel.value);
+				color.value = setChannelValue(color.value, channel.value, currentValue - step);
+				inputValue.value = formatValue(color.value);
+			} else addHexValue(-step);
+		}
+		function incrementPage() {
+			if (disabled.value || readonly.value) return;
+			const step = getStep() * PAGE_STEP_MULTIPLIER;
+			if (channel.value) {
+				const currentValue = getChannelValue(color.value, channel.value);
+				color.value = setChannelValue(color.value, channel.value, currentValue + step);
+				inputValue.value = formatValue(color.value);
+			} else addHexValue(step);
+		}
+		function decrementPage() {
+			if (disabled.value || readonly.value) return;
+			const step = getStep() * PAGE_STEP_MULTIPLIER;
+			if (channel.value) {
+				const currentValue = getChannelValue(color.value, channel.value);
+				color.value = setChannelValue(color.value, channel.value, currentValue - step);
+				inputValue.value = formatValue(color.value);
+			} else addHexValue(-step);
+		}
+		function incrementToMax() {
+			if (disabled.value || readonly.value) return;
+			if (channel.value) {
+				const range = getChannelRange(channel.value);
+				color.value = setChannelValue(color.value, channel.value, range.max);
+				inputValue.value = formatValue(color.value);
+			} else addHexValue(MAX_HEX_INT);
+		}
+		function decrementToMin() {
+			if (disabled.value || readonly.value) return;
+			if (channel.value) {
+				const range = getChannelRange(channel.value);
+				color.value = setChannelValue(color.value, channel.value, range.min);
+				inputValue.value = formatValue(color.value);
+			} else addHexValue(-MAX_HEX_INT);
+		}
+		function handleWheel(event) {
+			if (disableWheelChange.value || disabled.value || readonly.value) return;
+			event.preventDefault();
+			if (event.deltaY > 0) decrement();
+			else increment();
+		}
+		provideColorFieldRootContext({
+			color: computed(() => color.value),
+			inputValue,
+			channel,
+			colorSpace,
+			disabled,
+			readonly,
+			disableWheelChange,
+			placeholder,
+			updateValue,
+			commit,
+			increment,
+			decrement,
+			incrementToMax,
+			decrementToMin,
+			incrementPage,
+			decrementPage,
+			handleWheel
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Primitive), {
+				ref: unref(forwardRef),
+				as: _ctx.as,
+				"as-child": _ctx.asChild,
+				role: "group",
+				"data-disabled": unref(disabled) ? "" : void 0,
+				"data-readonly": unref(readonly) ? "" : void 0
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default"), unref(isFormControl) && _ctx.name ? (openBlock(), createBlock(unref(VisuallyHiddenInput_default), {
+					key: 0,
+					type: "text",
+					value: unref(colorToString)(color.value, "hex"),
+					name: _ctx.name,
+					disabled: unref(disabled),
+					required: _ctx.required
+				}, null, 8, [
+					"value",
+					"name",
+					"disabled",
+					"required"
+				])) : createCommentVNode("v-if", true)]),
+				_: 3
+			}, 8, [
+				"as",
+				"as-child",
+				"data-disabled",
+				"data-readonly"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/ColorField/ColorFieldRoot.vue
+var ColorFieldRoot_default = ColorFieldRoot_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+export { ColorFieldRoot_default, injectColorFieldRootContext };
+//# sourceMappingURL=ColorFieldRoot.js.map