ropav 0.2.0 → 0.3.0

package/dist/components/color-picker/color-picker-root.js

@@ -0,0 +1,82 @@
+import { providePressResponder } from "../../composables/press-responder.js";
+import { provideOverlayTargetContext } from "../overlay/overlay.context.js";
+import { useDialogTrigger } from "../../composables/use-dialog-trigger.js";
+import { useOverlayTriggerState } from "../../composables/use-overlay-trigger-state.js";
+import { provideColorPickerContext, provideColorValueContext } from "./color-picker.context.js";
+import { useColorPickerState } from "../../composables/use-color-picker-state.js";
+import { computed, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template, unref } from "vue";
+import { colorPickerVariants } from "@ropav/styles";
+//#region src/components/color-picker/color-picker-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-slot=color-picker>", 1);
+var color_picker_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "color-picker-root",
+	props: {
+		class: {},
+		value: {},
+		defaultValue: {},
+		defaultOpen: { type: Boolean },
+		isOpen: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	emits: [
+		"change",
+		"update:value",
+		"openChange",
+		"update:isOpen"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const state = useColorPickerState({
+			defaultValue: () => props.defaultValue,
+			onChange: (value) => {
+				emit("change", value);
+				emit("update:value", value);
+			},
+			value: () => props.value
+		});
+		const overlay = useOverlayTriggerState({
+			defaultOpen: props.defaultOpen,
+			isOpen: () => props.isOpen,
+			onOpenChange: (isOpen) => {
+				emit("openChange", isOpen);
+				emit("update:isOpen", isOpen);
+			}
+		});
+		const trigger = useDialogTrigger({}, overlay);
+		providePressResponder(trigger.responder);
+		provideColorPickerContext({ slots: computed(() => colorPickerVariants()) });
+		/**
+		* The one context every colour component under here reads.
+		*
+		* React fans the same state into six RAC contexts; the precedence both have to end up with is
+		* documented on `ColorValueContext`.
+		*/
+		provideColorValueContext({
+			setValue: state.setColor,
+			value: state.color
+		});
+		provideOverlayTargetContext({
+			autoFocus: computed(() => false),
+			closeAll: overlay.close,
+			dialogId: trigger.overlayId,
+			isNonModal: false,
+			labelledBy: trigger.triggerId,
+			overlayId: trigger.overlayId,
+			placement: "bottom left",
+			state: overlay,
+			trigger: "DialogTrigger",
+			triggerElement: trigger.triggerElement
+		});
+		const styles = computed(() => colorPickerVariants().base({ class: props.class }));
+		const n1 = t0();
+		renderEffect(() => setClass(n1, styles.value));
+		setInsertionState(n1);
+		createSlot("default", { color: () => unref(state).color.value });
+		return n1;
+	}
+});
+//#endregion
+export { color_picker_root_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/color-picker/color-picker-root.vue.d.vue.ts

@@ -0,0 +1,27 @@
+import type { Color } from "../../utils/color-types";
+import type { ColorPickerRootProps, ColorPickerRootSlotProps } from "./color-picker.types";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<ColorPickerRootProps & {
+        onChange?: ((value: Color) => any) | undefined;
+        onOpenChange?: ((isOpen: boolean) => any) | undefined;
+        "onUpdate:isOpen"?: ((isOpen: boolean) => any) | undefined;
+        "onUpdate:value"?: ((value: Color) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: ColorPickerRootSlotProps) => unknown;
+    };
+    emit: ((evt: "change", value: Color) => void) & ((evt: "openChange", isOpen: boolean) => void) & ((evt: "update:isOpen", isOpen: boolean) => void) & ((evt: "update:value", value: Color) => void);
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/color-picker/color-picker-trigger.js

@@ -0,0 +1,61 @@
+import { dataAttr } from "../../utils/assertion.js";
+import { useInteractionStates } from "../../composables/use-interaction-states.js";
+import { composePressResponder, usePressResponder } from "../../composables/press-responder.js";
+import { useColorPickerContext } from "./color-picker.context.js";
+import { computed, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref } from "vue";
+//#region src/components/color-picker/color-picker-trigger.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<button>", 1);
+var color_picker_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "color-picker-trigger",
+	props: {
+		class: {},
+		type: { default: "button" }
+	},
+	setup(__props) {
+		const props = __props;
+		const { slots } = useColorPickerContext();
+		const responder = usePressResponder();
+		const styles = computed(() => slots.value.trigger({ class: props.class }));
+		const setElement = (element) => {
+			responder?.registerElement(element ?? null);
+		};
+		const { isFocusVisible, onBlur, onFocus } = useInteractionStates();
+		/**
+		* A tab index is written even though a native button is already tabbable: Safari does not focus
+		* one unless an explicit index says so, which is why react-aria always sets it.
+		*
+		* Listeners are attached here rather than spread with `v-bind`, which in vapor re-attaches them
+		* on every render — see `composePressResponder`.
+		*/
+		const press = composePressResponder(responder);
+		const n1 = t0();
+		renderEffect(() => {
+			const _dataAttr = unref(dataAttr);
+			const _responder = unref(responder);
+			setDynamicProps(n1, [{
+				class: styles.value,
+				"data-focus-visible": _dataAttr(unref(isFocusVisible)),
+				"data-pressed": _dataAttr(_responder?.isPressed.value),
+				"data-slot": "color-picker-trigger",
+				tabindex: "0",
+				type: props.type
+			}, _responder?.attrs.value]);
+		});
+		setInsertionState(n1);
+		createSlot();
+		on(n1, "blur", (e) => unref(onBlur)(e));
+		on(n1, "click", (e) => unref(press).onClick(e));
+		on(n1, "dragstart", (e) => unref(press).onDragstart(e));
+		on(n1, "focus", (e) => unref(onFocus)(e));
+		on(n1, "keydown", (e) => unref(press).onKeydown(e));
+		on(n1, "mousedown", (e) => unref(press).onMousedown(e));
+		on(n1, "pointerdown", (e) => unref(press).onPointerdown(e));
+		on(n1, "pointerenter", (e) => unref(press).onPointerenter(e));
+		on(n1, "pointerleave", (e) => unref(press).onPointerleave(e));
+		on(n1, "pointerup", (e) => unref(press).onPointerup(e));
+		setTemplateRefBinding(n1, () => setElement);
+		return n1;
+	}
+});
+//#endregion
+export { color_picker_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/color-picker/color-picker-trigger.vue.d.vue.ts

@@ -0,0 +1,21 @@
+import type { ColorPickerTriggerProps } from "./color-picker.types";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<ColorPickerTriggerProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: () => unknown;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/color-picker/color-picker.context.d.ts

@@ -0,0 +1,36 @@
+import type { Color } from "../../utils/color-types";
+import type { colorPickerVariants } from "@ropav/styles";
+import type { ComputedRef } from "vue";
+export interface ColorPickerContext {
+    /** Slot classes the parts pull their own class from. */
+    slots: ComputedRef<ReturnType<typeof colorPickerVariants>>;
+}
+/**
+ * Strict: a trigger or a popover with the picker's classes on it but no picker around it would
+ * open nothing.
+ */
+export declare const useColorPickerContext: () => ColorPickerContext, provideColorPickerContext: (value: ColorPickerContext) => ColorPickerContext;
+export interface ColorValueContext {
+    /** The colour the picker holds. */
+    value: ComputedRef<Color>;
+    /** Hand a colour back to the picker. */
+    setValue: (value: Color) => void;
+}
+/**
+ * One colour, shared with every colour component under a picker.
+ *
+ * React fans the same state out into **six** separate RAC contexts — one per colour component —
+ * because `useContextProps` is the only mechanism it has for reaching them. Here one context does,
+ * and the precedence it has to reproduce was read out of `mergeProps` rather than guessed:
+ *
+ * - **a value** (`value`, `color`): the component's own prop wins whenever it is *present*, and
+ *   present includes `null`. Only `undefined` falls through to this context. Written as an
+ *   explicit `!== undefined` test for that reason — `??` would let a deliberate `null` on a colour
+ *   field be replaced by the picker's colour.
+ * - **a handler** (`onChange`): **chained**, not replaced. Both run, context first. This is the
+ *   easiest half to get wrong: treating the context as a fallback would make a `ColorSlider` that
+ *   carries its own `@change` silently cut the picker's update path.
+ *
+ * Loose, and absent is the ordinary case: every colour component works on its own.
+ */
+export declare const useColorValueContext: () => ColorValueContext | null, provideColorValueContext: (value: ColorValueContext | null) => ColorValueContext | null;

package/dist/components/color-picker/color-picker.context.js

@@ -0,0 +1,31 @@
+import { createContext } from "../../utils/create-context.js";
+//#region src/components/color-picker/color-picker.context.ts
+/**
+* Strict: a trigger or a popover with the picker's classes on it but no picker around it would
+* open nothing.
+*/
+var [useColorPickerContext, provideColorPickerContext] = createContext({ name: "ColorPickerContext" });
+/**
+* One colour, shared with every colour component under a picker.
+*
+* React fans the same state out into **six** separate RAC contexts — one per colour component —
+* because `useContextProps` is the only mechanism it has for reaching them. Here one context does,
+* and the precedence it has to reproduce was read out of `mergeProps` rather than guessed:
+*
+* - **a value** (`value`, `color`): the component's own prop wins whenever it is *present*, and
+*   present includes `null`. Only `undefined` falls through to this context. Written as an
+*   explicit `!== undefined` test for that reason — `??` would let a deliberate `null` on a colour
+*   field be replaced by the picker's colour.
+* - **a handler** (`onChange`): **chained**, not replaced. Both run, context first. This is the
+*   easiest half to get wrong: treating the context as a fallback would make a `ColorSlider` that
+*   carries its own `@change` silently cut the picker's update path.
+*
+* Loose, and absent is the ordinary case: every colour component works on its own.
+*/
+var [useColorValueContext, provideColorValueContext] = createContext({
+	defaultValue: null,
+	name: "ColorValueContext",
+	strict: false
+});
+//#endregion
+export { provideColorPickerContext, provideColorValueContext, useColorPickerContext, useColorValueContext };

package/dist/components/color-picker/color-picker.types.d.ts

@@ -0,0 +1,32 @@
+import type { Color } from "../../utils/color-types";
+import type { Placement } from "../../utils/position";
+export interface ColorPickerRootProps {
+    class?: string;
+    /** Controlled colour. A string is parsed. */
+    value?: Color | string;
+    /** Colour the picker starts on while it is uncontrolled. @default "#000000" */
+    defaultValue?: Color | string;
+    /** Whether the popover starts open. */
+    defaultOpen?: boolean;
+    /** Controlled open state. */
+    isOpen?: boolean;
+}
+export interface ColorPickerRootSlotProps {
+    /** The colour the picker is holding. */
+    color: Color;
+}
+export interface ColorPickerTriggerProps {
+    class?: string;
+    /** @default "button" */
+    type?: "button" | "reset" | "submit";
+}
+export interface ColorPickerPopoverProps {
+    class?: string;
+    /** @default "bottom left" */
+    placement?: Placement;
+    offset?: number;
+    crossOffset?: number;
+    containerPadding?: number;
+    shouldFlip?: boolean;
+    isKeyboardDismissDisabled?: boolean;
+}

package/dist/components/color-picker/index.d.ts

@@ -1,3 +1,117 @@
-export { default as ColorPicker } from './color-picker.js';
-export { colorPickerFormats, colorPickerParts, colorPickerSizes } from './types.js';
-export type { ColorPickerFormat, ColorPickerPart, ColorPickerProps, ColorPickerSelection, ColorPickerSize, ColorPickerValue, } from './types.js';
+import ColorPickerPopover from "./color-picker-popover.vue";
+import ColorPickerRoot from "./color-picker-root.vue";
+import ColorPickerTrigger from "./color-picker-trigger.vue";
+export declare const ColorPicker: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+    attrs: any;
+    slots: {
+        default?: (props: import("./color-picker.types").ColorPickerRootSlotProps) => unknown;
+    };
+    emit: ((evt: "change", value: import("../..").Color) => void) & ((evt: "openChange", isOpen: boolean) => void) & ((evt: "update:isOpen", isOpen: boolean) => void) & ((evt: "update:value", value: import("../..").Color) => void);
+}, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & {
+        class?: string;
+        value?: import("../..").Color | string;
+        defaultValue?: import("../..").Color | string;
+        defaultOpen?: boolean;
+        isOpen?: boolean;
+        onChange?: ((value: import("../..").Color) => any) | undefined;
+        onOpenChange?: ((isOpen: boolean) => any) | undefined;
+        "onUpdate:isOpen"?: ((isOpen: boolean) => any) | undefined;
+        "onUpdate:value"?: ((value: import("../..").Color) => any) | undefined;
+    } & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: import("./color-picker.types").ColorPickerRootSlotProps) => unknown;
+    };
+    emit: ((evt: "change", value: import("../..").Color) => void) & ((evt: "openChange", isOpen: boolean) => void) & ((evt: "update:isOpen", isOpen: boolean) => void) & ((evt: "update:value", value: import("../..").Color) => void);
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+}) & {
+    Popover: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+        attrs: any;
+        slots: {
+            default?: () => unknown;
+        };
+        emit: {};
+    }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+        props: import('vue').PublicProps & {
+            class?: string;
+            placement?: import("../..").Placement;
+            offset?: number;
+            crossOffset?: number;
+            containerPadding?: number;
+            shouldFlip?: boolean;
+            isKeyboardDismissDisabled?: boolean;
+        } & (typeof globalThis extends {
+            __VLS_PROPS_FALLBACK: infer P;
+        } ? P : {});
+        expose: (exposed: {}) => void;
+        attrs: any;
+        slots: {
+            default?: () => unknown;
+        };
+        emit: {};
+    }>) => import('vue').VNode & {
+        __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+    };
+    Root: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+        attrs: any;
+        slots: {
+            default?: (props: import("./color-picker.types").ColorPickerRootSlotProps) => unknown;
+        };
+        emit: ((evt: "change", value: import("../..").Color) => void) & ((evt: "openChange", isOpen: boolean) => void) & ((evt: "update:isOpen", isOpen: boolean) => void) & ((evt: "update:value", value: import("../..").Color) => void);
+    }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+        props: import('vue').PublicProps & {
+            class?: string;
+            value?: import("../..").Color | string;
+            defaultValue?: import("../..").Color | string;
+            defaultOpen?: boolean;
+            isOpen?: boolean;
+            onChange?: ((value: import("../..").Color) => any) | undefined;
+            onOpenChange?: ((isOpen: boolean) => any) | undefined;
+            "onUpdate:isOpen"?: ((isOpen: boolean) => any) | undefined;
+            "onUpdate:value"?: ((value: import("../..").Color) => any) | undefined;
+        } & (typeof globalThis extends {
+            __VLS_PROPS_FALLBACK: infer P;
+        } ? P : {});
+        expose: (exposed: {}) => void;
+        attrs: any;
+        slots: {
+            default?: (props: import("./color-picker.types").ColorPickerRootSlotProps) => unknown;
+        };
+        emit: ((evt: "change", value: import("../..").Color) => void) & ((evt: "openChange", isOpen: boolean) => void) & ((evt: "update:isOpen", isOpen: boolean) => void) & ((evt: "update:value", value: import("../..").Color) => void);
+    }>) => import('vue').VNode & {
+        __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+    };
+    Trigger: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+        attrs: any;
+        slots: {
+            default?: () => unknown;
+        };
+        emit: {};
+    }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+        props: import('vue').PublicProps & {
+            class?: string;
+            type?: "button" | "reset" | "submit";
+        } & (typeof globalThis extends {
+            __VLS_PROPS_FALLBACK: infer P;
+        } ? P : {});
+        expose: (exposed: {}) => void;
+        attrs: any;
+        slots: {
+            default?: () => unknown;
+        };
+        emit: {};
+    }>) => import('vue').VNode & {
+        __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+    };
+};
+export { ColorPickerPopover, ColorPickerRoot, ColorPickerTrigger };
+export type { ColorPickerPopoverProps, ColorPickerRootProps, ColorPickerRootProps as ColorPickerProps, ColorPickerRootSlotProps, ColorPickerTriggerProps, } from "./color-picker.types";
+export { provideColorValueContext, useColorValueContext } from "./color-picker.context";
+export type { ColorValueContext } from "./color-picker.context";
+export { colorPickerVariants } from "@ropav/styles";
+export type { ColorPickerVariants } from "@ropav/styles";

package/dist/components/color-picker/index.js

@@ -1,3 +1,13 @@
-import { n as colorPickerFormats, t as color_picker_default } from "../../color-picker.js";
-import { n as colorPickerSizes, t as colorPickerParts } from "../../color-picker2.js";
-export { color_picker_default as ColorPicker, colorPickerFormats, colorPickerParts, colorPickerSizes };
+import { provideColorValueContext, useColorValueContext } from "./color-picker.context.js";
+import color_picker_popover_default from "./color-picker-popover.js";
+import color_picker_root_default from "./color-picker-root.js";
+import color_picker_trigger_default from "./color-picker-trigger.js";
+import { colorPickerVariants } from "@ropav/styles";
+//#region src/components/color-picker/index.ts
+var ColorPicker = Object.assign(color_picker_root_default, {
+	Popover: color_picker_popover_default,
+	Root: color_picker_root_default,
+	Trigger: color_picker_trigger_default
+});
+//#endregion
+export { ColorPicker, color_picker_popover_default as ColorPickerPopover, color_picker_root_default as ColorPickerRoot, color_picker_trigger_default as ColorPickerTrigger, colorPickerVariants, provideColorValueContext, useColorValueContext };

package/dist/components/color-slider/color-slider-output.js

@@ -0,0 +1,35 @@
+import { composeSlotClassName } from "../../utils/compose.js";
+import { dataAttr } from "../../utils/assertion.js";
+import { useColorSliderContext } from "./color-slider.context.js";
+import { computed, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, unref } from "vue";
+//#region src/components/color-slider/color-slider-output.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template(" ");
+var t1 = template("<output>", 1);
+var color_slider_output_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "color-slider-output",
+	props: { class: {} },
+	setup(__props) {
+		const props = __props;
+		const { slider, slots, state } = useColorSliderContext();
+		const label = computed(() => state.getThumbValueLabel(0));
+		const n3 = t1();
+		renderEffect(() => {
+			const _state = unref(state);
+			setDynamicProps(n3, [unref(slider).outputProps.value, {
+				class: unref(composeSlotClassName)(unref(slots).output, props.class),
+				"data-disabled": unref(dataAttr)(_state.isDisabled.value),
+				"data-orientation": _state.orientation.value,
+				"data-slot": "color-slider-output"
+			}]);
+		});
+		setInsertionState(n3);
+		createSlot("default", null, () => {
+			const n2 = t0();
+			renderEffect(() => setText(n2, toDisplayString(label.value)));
+			return n2;
+		});
+		return n3;
+	}
+});
+//#endregion
+export { color_slider_output_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/color-slider/color-slider-output.vue.d.vue.ts

@@ -0,0 +1,21 @@
+import type { ColorSliderOutputProps } from "./color-slider.types";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<ColorSliderOutputProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: () => unknown;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/color-slider/color-slider-root.js

@@ -0,0 +1,155 @@
+import { dataAttr } from "../../utils/assertion.js";
+import { useId as useId$1 } from "../../composables/use-id.js";
+import { provideFieldIdsContext, useFieldIds } from "../../composables/use-field-ids.js";
+import { useColorValueContext } from "../color-picker/color-picker.context.js";
+import { provideColorSliderContext } from "./color-slider.context.js";
+import { useColorSlider } from "../../composables/use-color-slider.js";
+import { useColorSliderState } from "../../composables/use-color-slider-state.js";
+import { computed, createSlot, defineVaporComponent, on, renderEffect, setAttr, setClass, setInsertionState, shallowRef, template, unref } from "vue";
+import { colorSliderVariants } from "@ropav/styles";
+//#region src/components/color-slider/color-slider-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-slot=color-slider>", 1);
+/** Channels that exist in exactly one colour space, and which one. */
+var color_slider_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "color-slider-root",
+	props: {
+		class: {},
+		channel: {},
+		colorSpace: {},
+		value: {},
+		defaultValue: {},
+		orientation: {},
+		isDisabled: {
+			type: Boolean,
+			default: void 0
+		},
+		id: {},
+		ariaLabel: {},
+		ariaLabelledby: {},
+		ariaDescribedby: {},
+		name: {},
+		form: {}
+	},
+	emits: [
+		"change",
+		"changeEnd",
+		"update:value"
+	],
+	setup(__props, { emit: __emit }) {
+		const CHANNEL_TO_REQUIRED_COLOR_SPACE = {
+			blue: "rgb",
+			brightness: "hsb",
+			green: "rgb",
+			lightness: "hsl",
+			red: "rgb"
+		};
+		/** Channels that exist in `hsl` and `hsb` but not in `rgb`. */
+		const HSL_HSB_ONLY_CHANNELS = /* @__PURE__ */ new Set(["hue", "saturation"]);
+		/**
+		* Reconcile a channel with the colour space it was asked to work in.
+		*
+		* A combination that cannot exist would otherwise throw out of the colour model on the first
+		* render, so it is corrected here and reported — loudly, because the markup asking for it is
+		* wrong and silently drawing a different slider would hide that.
+		*/
+		const getValidColorSpace = (channel, colorSpace) => {
+			const requiredSpace = CHANNEL_TO_REQUIRED_COLOR_SPACE[channel];
+			if (requiredSpace && colorSpace && colorSpace !== requiredSpace) {
+				console.warn(`[Ropav ColorSlider] Invalid combination: channel="${channel}" requires colorSpace="${requiredSpace}", but received colorSpace="${colorSpace}". Auto-correcting to "${requiredSpace}".`);
+				return requiredSpace;
+			}
+			if (HSL_HSB_ONLY_CHANNELS.has(channel) && colorSpace === "rgb") {
+				console.warn(`[Ropav ColorSlider] Invalid combination: channel="${channel}" is not available in RGB color space. Use colorSpace="hsl" or colorSpace="hsb" instead. Auto-correcting to "hsl".`);
+				return "hsl";
+			}
+			return colorSpace;
+		};
+		const props = __props;
+		const emit = __emit;
+		const sliderId = useId$1(() => props.id);
+		const channel = computed(() => props.channel);
+		const colorSpace = computed(() => getValidColorSpace(props.channel, props.colorSpace));
+		/**
+		* The colour a `ColorPicker` above is holding, when there is one.
+		*
+		* A prop still wins whenever it is present, and the picker is told about every change as well as
+		* the caller — chained, not replaced, so a component with its own handler does not cut the
+		* picker's update path. See `ColorValueContext`.
+		*/
+		const owner = useColorValueContext();
+		const state = useColorSliderState({
+			channel,
+			colorSpace,
+			defaultValue: () => props.defaultValue,
+			isDisabled: () => props.isDisabled,
+			onChange: (value) => {
+				owner?.setValue(value);
+				emit("change", value);
+				emit("update:value", value);
+			},
+			onChangeEnd: (value) => emit("changeEnd", value),
+			orientation: () => props.orientation,
+			value: () => props.value !== void 0 ? props.value : owner?.value.value
+		});
+		const trackEl = shallowRef(null);
+		const inputEl = shallowRef(null);
+		const setTrackEl = (element) => {
+			trackEl.value = element instanceof HTMLElement ? element : null;
+		};
+		const setInputEl = (element) => {
+			inputEl.value = element instanceof HTMLInputElement ? element : null;
+		};
+		const { context: fieldIds, labelId } = useFieldIds({ slots: ["label"] });
+		provideFieldIdsContext(fieldIds);
+		const slider = useColorSlider({
+			ariaDescribedby: () => props.ariaDescribedby,
+			ariaLabel: () => props.ariaLabel,
+			ariaLabelledby: () => props.ariaLabelledby,
+			channel,
+			form: () => props.form,
+			id: sliderId,
+			inputEl,
+			isDisabled: () => props.isDisabled,
+			labelId,
+			name: () => props.name,
+			state,
+			trackEl
+		});
+		const styles = computed(() => colorSliderVariants());
+		provideColorSliderContext({
+			channel,
+			setInputEl,
+			setTrackEl,
+			slider,
+			slots: styles,
+			state
+		});
+		/**
+		* The label carries no `for`: pointing it at the thumb makes VoiceOver announce the thumb by the
+		* slider's name alone and drop its own value. Clicking it still has to reach the thumb, so the
+		* click is picked up here instead.
+		*/
+		const onClick = (event) => {
+			if (!(event.target instanceof Element)) return;
+			if (!event.target.closest("[data-slot='label']")) return;
+			slider.focusThumb();
+		};
+		const n1 = t0();
+		renderEffect(() => {
+			const _state = unref(state);
+			setClass(n1, styles.value.base({ class: props.class }));
+			setAttr(n1, "data-disabled", unref(dataAttr)(_state.isDisabled.value));
+			setAttr(n1, "data-orientation", _state.orientation.value);
+		});
+		setInsertionState(n1);
+		createSlot("default", {
+			color: () => unref(state).value.value,
+			isDisabled: () => unref(state).isDisabled.value,
+			orientation: () => unref(state).orientation.value
+		});
+		on(n1, "click", onClick);
+		return n1;
+	}
+});
+//#endregion
+export { color_slider_root_vue_vue_type_script_setup_true_vapor_true_lang_default as default };