@vunset/vue 0.0.0-stage → 1.0.0-rc.2

package/dist/components/radio/use-radio-group.js

@@ -0,0 +1,175 @@
+import { dataAttrs } from "../../shared/data-attrs.js";
+import { useControlled } from "../../shared/use-controlled.js";
+import { useToggleInput } from "../../shared/use-toggle-input.js";
+import { createContext } from "../../shared/context.js";
+import { useFieldValue, useOptionalFieldContext } from "../../shared/use-field.js";
+import { computed, onScopeDispose, ref, toValue, useId, watch } from "vue";
+//#region src/components/radio/use-radio-group.ts
+function useRadioGroup(options = {}) {
+	const field = useOptionalFieldContext();
+	const generatedName = useId();
+	const containerRef = ref(null);
+	const registrations = ref([]);
+	const disabled = () => (toValue(options.disabled) ?? false) || (field?.state.value.disabled ?? false);
+	const readOnly = () => (toValue(options.readOnly) ?? false) || (field?.state.value.readOnly ?? false);
+	const required = () => (toValue(options.required) ?? false) || (field?.required() ?? false);
+	const invalid = () => (toValue(options.invalid) ?? false) || (field?.state.value.invalid ?? false);
+	const value = useControlled({
+		value: () => toValue(options.value),
+		defaultValue: () => toValue(options.defaultValue),
+		prop: "modelValue",
+		name: "useRadioGroup",
+		label: "value"
+	});
+	const state = computed(() => ({
+		value: value.value,
+		disabled: disabled(),
+		readOnly: readOnly(),
+		required: required(),
+		invalid: invalid()
+	}));
+	useFieldValue(field, () => value.value);
+	watch(() => value.value != null, (filled) => field?.setFilled(filled), { immediate: true });
+	const firstEnabledValue = computed(() => registrations.value.find((entry) => !entry.disabled())?.value);
+	function select(next, event) {
+		if (disabled() || readOnly()) return;
+		value.value = next;
+		options.onChange?.(next, event);
+	}
+	provideRadioGroupContext({
+		value,
+		select,
+		disabled,
+		readOnly,
+		required,
+		invalid,
+		name: () => toValue(options.name) ?? field?.name() ?? generatedName,
+		form: () => toValue(options.form),
+		loop: () => toValue(options.loop) ?? true,
+		containerRef,
+		register(entry) {
+			registrations.value = [...registrations.value, entry];
+			return () => {
+				registrations.value = registrations.value.filter((item) => item !== entry);
+			};
+		},
+		firstEnabledValue,
+		resolve: (raw) => registrations.value.find((entry) => String(entry.value) === raw)?.value
+	});
+	return {
+		value,
+		state,
+		groupProps: computed(() => ({
+			...dataAttrs(state.value, { value: () => null }),
+			"data-part": "radio-group",
+			role: "radiogroup",
+			"aria-labelledby": field?.labelledBy.value,
+			"aria-describedby": field?.describedBy.value,
+			"aria-required": required() || void 0,
+			"aria-disabled": disabled() || void 0,
+			"aria-readonly": readOnly() || void 0,
+			"aria-invalid": invalid() || void 0,
+			ref: (el) => {
+				containerRef.value = el ?? null;
+			},
+			onFocusin: () => field?.setFocused(true),
+			onFocusout(event) {
+				const next = event.relatedTarget;
+				if (next instanceof Node && containerRef.value?.contains(next)) return;
+				field?.setFocused(false);
+				field?.setTouched(true);
+			}
+		}))
+	};
+}
+var { provideContext: provideRadioGroupContext, useContext: useRadioGroupContext } = createContext("RadioGroup");
+var FORWARD_KEYS = /* @__PURE__ */ new Set(["ArrowDown", "ArrowRight"]);
+var BACKWARD_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowLeft"]);
+function useRadio(options) {
+	const group = useRadioGroupContext();
+	const generatedId = useId();
+	const radioValue = () => toValue(options.value);
+	const disabled = () => (toValue(options.disabled) ?? false) || group.disabled();
+	const checked = computed(() => group.value.value === radioValue());
+	onScopeDispose(group.register({
+		value: radioValue(),
+		disabled
+	}));
+	const state = computed(() => ({
+		checked: checked.value,
+		disabled: disabled(),
+		readOnly: group.readOnly(),
+		required: group.required(),
+		invalid: group.invalid()
+	}));
+	const hooks = computed(() => dataAttrs(state.value, { checked: (on) => on ? { "data-checked": "" } : { "data-unchecked": "" } }));
+	function tabindex() {
+		if (disabled()) return void 0;
+		if (group.value.value !== void 0) return checked.value ? 0 : -1;
+		return group.firstEnabledValue.value === radioValue() ? 0 : -1;
+	}
+	function siblings() {
+		const container = group.containerRef.value;
+		if (!container) return [];
+		return Array.from(container.querySelectorAll("[role=\"radio\"]")).filter((el) => el.getAttribute("aria-disabled") !== "true");
+	}
+	function moveTo(target, event) {
+		if (!target) return;
+		target.focus();
+		const next = group.resolve(target.dataset.value ?? "");
+		if (next !== void 0) group.select(next, event);
+	}
+	const toggleInput = useToggleInput({
+		role: "radio",
+		inputType: "radio",
+		checked: () => checked.value,
+		disabled,
+		readOnly: group.readOnly,
+		required: group.required,
+		id: () => toValue(options.id) ?? generatedId,
+		name: group.name,
+		value: () => String(radioValue()),
+		form: group.form,
+		native: () => toValue(options.native) ?? false,
+		tabindex,
+		hooks: () => hooks.value,
+		onToggle: (_next, event) => group.select(radioValue(), event)
+	});
+	return {
+		checked,
+		state,
+		hooks,
+		rootProps: computed(() => {
+			const base = toggleInput.rootProps.value;
+			const baseKeydown = base.onKeydown;
+			return {
+				...base,
+				"data-value": String(radioValue()),
+				onKeydown(event) {
+					baseKeydown(event);
+					if (disabled() || group.readOnly() || event.defaultPrevented) return;
+					const list = siblings();
+					const index = list.indexOf(toggleInput.rootEl.value);
+					if (index === -1) return;
+					const step = FORWARD_KEYS.has(event.key) ? 1 : BACKWARD_KEYS.has(event.key) ? -1 : 0;
+					if (step !== 0) {
+						event.preventDefault();
+						const next = index + step;
+						moveTo(list[group.loop() ? (next + list.length) % list.length : Math.min(Math.max(next, 0), list.length - 1)], event);
+						return;
+					}
+					if (event.key === "Home") {
+						event.preventDefault();
+						moveTo(list[0], event);
+					} else if (event.key === "End") {
+						event.preventDefault();
+						moveTo(list[list.length - 1], event);
+					}
+				}
+			};
+		}),
+		inputProps: toggleInput.inputProps
+	};
+}
+//#endregion
+export { provideRadioGroupContext, useRadio, useRadioGroup, useRadioGroupContext };

package/dist/components/range/RangeControl.js

@@ -0,0 +1,5 @@
+import RangeControl_vue_vue_type_script_setup_true_lang_default from "./RangeControl.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/range/RangeControl.vue
+var RangeControl_default = RangeControl_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RangeControl_default as default };

package/dist/components/range/RangeControl.vue.d.ts

@@ -0,0 +1,30 @@
+type __VLS_Props = {
+    /** Element or component to render. */
+    as?: string | object;
+};
+declare var __VLS_8: {
+    activeThumbIndex: number;
+    disabled: boolean;
+    dragging: boolean;
+    invalid: boolean;
+    orientation: import("./use-range").RangeOrientation;
+    max: number;
+    min: number;
+    minStepsBetweenValues: number;
+    step: number;
+    values: readonly number[];
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string | object;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/range/RangeControl.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,24 @@
+import { Part } from "../../shared/part.js";
+import { usePartProps } from "../../shared/use-part-props.js";
+import { useRangeContext } from "./use-range.js";
+import { createBlock, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+//#region src/components/range/RangeControl.vue?vue&type=script&setup=true&lang.ts
+var RangeControl_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RangeControl",
+	inheritAttrs: false,
+	__name: "RangeControl",
+	props: { as: { default: "div" } },
+	setup(__props) {
+		const props = __props;
+		const { controlProps, state } = useRangeContext();
+		const merged = usePartProps(controlProps);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Part), mergeProps({ as: props.as }, unref(merged)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(state))))]),
+				_: 3
+			}, 16, ["as"]);
+		};
+	}
+});
+//#endregion
+export { RangeControl_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/range/RangeIndicator.js

@@ -0,0 +1,5 @@
+import RangeIndicator_vue_vue_type_script_setup_true_lang_default from "./RangeIndicator.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/range/RangeIndicator.vue
+var RangeIndicator_default = RangeIndicator_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RangeIndicator_default as default };

package/dist/components/range/RangeIndicator.vue.d.ts

@@ -0,0 +1,30 @@
+type __VLS_Props = {
+    /** Element or component to render. */
+    as?: string | object;
+};
+declare var __VLS_8: {
+    activeThumbIndex: number;
+    disabled: boolean;
+    dragging: boolean;
+    invalid: boolean;
+    orientation: import("./use-range").RangeOrientation;
+    max: number;
+    min: number;
+    minStepsBetweenValues: number;
+    step: number;
+    values: readonly number[];
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string | object;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/range/RangeIndicator.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,24 @@
+import { Part } from "../../shared/part.js";
+import { usePartProps } from "../../shared/use-part-props.js";
+import { useRangeContext } from "./use-range.js";
+import { createBlock, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+//#region src/components/range/RangeIndicator.vue?vue&type=script&setup=true&lang.ts
+var RangeIndicator_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RangeIndicator",
+	inheritAttrs: false,
+	__name: "RangeIndicator",
+	props: { as: { default: "div" } },
+	setup(__props) {
+		const props = __props;
+		const { indicatorProps, state } = useRangeContext();
+		const merged = usePartProps(indicatorProps);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Part), mergeProps({ as: props.as }, unref(merged)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(state))))]),
+				_: 3
+			}, 16, ["as"]);
+		};
+	}
+});
+//#endregion
+export { RangeIndicator_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/range/RangeLabel.js

@@ -0,0 +1,5 @@
+import RangeLabel_vue_vue_type_script_setup_true_lang_default from "./RangeLabel.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/range/RangeLabel.vue
+var RangeLabel_default = RangeLabel_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RangeLabel_default as default };

package/dist/components/range/RangeLabel.vue.d.ts

@@ -0,0 +1,30 @@
+type __VLS_Props = {
+    /** Element or component to render. */
+    as?: string | object;
+};
+declare var __VLS_8: {
+    activeThumbIndex: number;
+    disabled: boolean;
+    dragging: boolean;
+    invalid: boolean;
+    orientation: import("./use-range").RangeOrientation;
+    max: number;
+    min: number;
+    minStepsBetweenValues: number;
+    step: number;
+    values: readonly number[];
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string | object;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/range/RangeLabel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,25 @@
+import { Part } from "../../shared/part.js";
+import { usePartProps } from "../../shared/use-part-props.js";
+import { useRangeContext } from "./use-range.js";
+import { createBlock, defineComponent, guardReactiveProps, mergeProps, normalizeProps, onBeforeUnmount, openBlock, renderSlot, unref, withCtx } from "vue";
+//#region src/components/range/RangeLabel.vue?vue&type=script&setup=true&lang.ts
+var RangeLabel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RangeLabel",
+	inheritAttrs: false,
+	__name: "RangeLabel",
+	props: { as: { default: "span" } },
+	setup(__props) {
+		const props = __props;
+		const { labelProps, state, registerLabel } = useRangeContext();
+		onBeforeUnmount(registerLabel());
+		const merged = usePartProps(labelProps);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Part), mergeProps({ as: props.as }, unref(merged)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(state))))]),
+				_: 3
+			}, 16, ["as"]);
+		};
+	}
+});
+//#endregion
+export { RangeLabel_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/range/RangeRoot.js

@@ -0,0 +1,5 @@
+import RangeRoot_vue_vue_type_script_setup_true_lang_default from "./RangeRoot.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/range/RangeRoot.vue
+var RangeRoot_default = RangeRoot_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RangeRoot_default as default };

package/dist/components/range/RangeRoot.vue.d.ts

@@ -0,0 +1,85 @@
+import { type RangeChangeDetails, type RangeOrientation, type ThumbAlignment, type ThumbCollisionBehavior } from './use-range';
+type __VLS_Props = {
+    /** The value, bound with `v-model`: a number, or an array with one entry per thumb. It keeps the shape it was given. */
+    modelValue?: number | number[];
+    /** The value at first, when no `v-model` owns it. */
+    defaultValue?: number | number[];
+    /** The lowest value. */
+    min?: number;
+    /** The highest value. */
+    max?: number;
+    /** The grid values snap to: `min + k × step`. */
+    step?: number;
+    /** What Shift with an arrow key, and Page Up / Page Down, move by. */
+    largeStep?: number;
+    /** The least gap, in steps, between neighboring thumbs. */
+    minStepsBetweenValues?: number;
+    /** Ignores interaction. Inside a `FieldRoot`, follows the field. */
+    disabled?: boolean;
+    /** Marks the value invalid, for styling through `data-invalid`. Inside a `FieldRoot`, follows the field. */
+    invalid?: boolean;
+    /** Which way the control runs. Vertical runs bottom to top. */
+    orientation?: RangeOrientation;
+    /** `center` puts a thumb's center on its value; `edge` keeps whole thumbs inside the control. */
+    thumbAlignment?: ThumbAlignment;
+    /** What a dragged thumb does at a neighbor: `push` it along, `swap` past it, or stop (`none`). */
+    thumbCollisionBehavior?: ThumbCollisionBehavior;
+    /** How values are written in `RangeValue` and announced, as `Intl.NumberFormat` options. */
+    format?: Intl.NumberFormatOptions;
+    /** The locale for `format`. The page's when not given. */
+    locale?: Intl.LocalesArgument;
+    /** The root's id. */
+    id?: string;
+    /** The form field name, set on every thumb's input. */
+    name?: string;
+    /** The id of a `<form>` to submit with, when the range sits outside it. */
+    form?: string;
+    /** Element or component to render. */
+    as?: string | object;
+};
+declare var __VLS_8: {
+    activeThumbIndex: number;
+    disabled: boolean;
+    dragging: boolean;
+    invalid: boolean;
+    orientation: RangeOrientation;
+    max: number;
+    min: number;
+    minStepsBetweenValues: number;
+    step: number;
+    values: readonly number[];
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, import("./use-range").UseRangeReturn, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: number | number[], details: RangeChangeDetails) => any;
+    "update:modelValue": (value: number | number[]) => any;
+    commit: (value: number | number[], details: RangeChangeDetails) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((value: number | number[], details: RangeChangeDetails) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number | number[]) => any) | undefined;
+    onCommit?: ((value: number | number[], details: RangeChangeDetails) => any) | undefined;
+}>, {
+    defaultValue: number | number[];
+    invalid: boolean;
+    orientation: RangeOrientation;
+    as: string | object;
+    modelValue: number | number[];
+    disabled: boolean;
+    min: number;
+    max: number;
+    step: number;
+    minStepsBetweenValues: number;
+    largeStep: number;
+    thumbAlignment: ThumbAlignment;
+    thumbCollisionBehavior: ThumbCollisionBehavior;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/range/RangeRoot.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,80 @@
+import { Part } from "../../shared/part.js";
+import { usePartProps } from "../../shared/use-part-props.js";
+import { provideRangeContext, useRange } from "./use-range.js";
+import { createBlock, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, toRef, unref, withCtx } from "vue";
+//#region src/components/range/RangeRoot.vue?vue&type=script&setup=true&lang.ts
+var RangeRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RangeRoot",
+	inheritAttrs: false,
+	__name: "RangeRoot",
+	props: {
+		modelValue: { default: void 0 },
+		defaultValue: { default: void 0 },
+		min: { default: 0 },
+		max: { default: 100 },
+		step: { default: 1 },
+		largeStep: { default: 10 },
+		minStepsBetweenValues: { default: 0 },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		invalid: {
+			type: Boolean,
+			default: false
+		},
+		orientation: { default: "horizontal" },
+		thumbAlignment: { default: "center" },
+		thumbCollisionBehavior: { default: "push" },
+		format: {},
+		locale: {},
+		id: {},
+		name: {},
+		form: {},
+		as: { default: "div" }
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"commit"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const api = useRange({
+			value: toRef(() => props.modelValue),
+			defaultValue: toRef(() => props.defaultValue),
+			min: toRef(() => props.min),
+			max: toRef(() => props.max),
+			step: toRef(() => props.step),
+			largeStep: toRef(() => props.largeStep),
+			minStepsBetweenValues: toRef(() => props.minStepsBetweenValues),
+			disabled: toRef(() => props.disabled),
+			invalid: toRef(() => props.invalid),
+			orientation: toRef(() => props.orientation),
+			thumbAlignment: toRef(() => props.thumbAlignment),
+			thumbCollisionBehavior: toRef(() => props.thumbCollisionBehavior),
+			format: toRef(() => props.format),
+			locale: toRef(() => props.locale),
+			id: toRef(() => props.id),
+			name: toRef(() => props.name),
+			form: toRef(() => props.form),
+			onChange: (value, details) => {
+				emit("update:modelValue", value);
+				emit("change", value, details);
+			},
+			onCommit: (value, details) => emit("commit", value, details)
+		});
+		provideRangeContext(api);
+		__expose(api);
+		const merged = usePartProps(api.rootProps);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Part), mergeProps({ as: props.as }, unref(merged)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(api).state.value)))]),
+				_: 3
+			}, 16, ["as"]);
+		};
+	}
+});
+//#endregion
+export { RangeRoot_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/range/RangeThumb.js

@@ -0,0 +1,5 @@
+import RangeThumb_vue_vue_type_script_setup_true_lang_default from "./RangeThumb.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/range/RangeThumb.vue
+var RangeThumb_default = RangeThumb_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RangeThumb_default as default };

package/dist/components/range/RangeThumb.vue.d.ts

@@ -0,0 +1,42 @@
+import { type RangeState } from './use-range';
+type __VLS_Props = {
+    /** Which value this thumb controls. Defaults to its position among its siblings. */
+    index?: number;
+    /** Takes this one thumb out of reach of pointer and keyboard. */
+    disabled?: boolean;
+    /** Names the thumb's input, e.g. "Lowest" and "Highest" for a two-thumb range. */
+    ariaLabel?: string;
+    /** Overrides what is announced in place of the raw number. */
+    valueText?: string;
+    /** Builds what is announced, from the formatted value. Wins over `valueText`. */
+    getValueText?: (formattedValue: string, value: number, index: number) => string;
+    /** The thumb input's `tabindex`. */
+    tabIndex?: number;
+    /** Element or component to render. */
+    as?: string | object;
+};
+type __VLS_Slots = {
+    default(props: RangeState & {
+        /**
+         * Which value this thumb controls.
+         * @attribute `data-index="…"`
+         */
+        index: number;
+        /**
+         * The value it is at.
+         * @attribute none
+         */
+        value: number;
+    }): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, import("./use-range").UseRangeThumbReturn, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string | object;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/range/RangeThumb.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,43 @@
+import { Part } from "../../shared/part.js";
+import { usePartProps } from "../../shared/use-part-props.js";
+import { useRangeThumb } from "./use-range.js";
+import { createBlock, createElementVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, toRef, unref, withCtx } from "vue";
+//#region src/components/range/RangeThumb.vue?vue&type=script&setup=true&lang.ts
+var RangeThumb_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RangeThumb",
+	inheritAttrs: false,
+	__name: "RangeThumb",
+	props: {
+		index: {},
+		disabled: { type: Boolean },
+		ariaLabel: {},
+		valueText: {},
+		getValueText: {},
+		tabIndex: {},
+		as: { default: "div" }
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const api = useRangeThumb({
+			index: toRef(() => props.index),
+			disabled: toRef(() => props.disabled ?? false),
+			ariaLabel: toRef(() => props.ariaLabel),
+			valueText: toRef(() => props.valueText),
+			getValueText: props.getValueText,
+			tabIndex: toRef(() => props.tabIndex)
+		});
+		__expose(api);
+		const merged = usePartProps(api.thumbProps);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Part), mergeProps({ as: props.as }, unref(merged)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", mergeProps(unref(api).state.value, {
+					index: unref(api).index.value,
+					value: unref(api).value.value
+				})), createElementVNode("input", normalizeProps(guardReactiveProps(unref(api).inputProps.value)), null, 16)]),
+				_: 3
+			}, 16, ["as"]);
+		};
+	}
+});
+//#endregion
+export { RangeThumb_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/range/RangeTrack.js

@@ -0,0 +1,5 @@
+import RangeTrack_vue_vue_type_script_setup_true_lang_default from "./RangeTrack.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/range/RangeTrack.vue
+var RangeTrack_default = RangeTrack_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RangeTrack_default as default };

package/dist/components/range/RangeTrack.vue.d.ts

@@ -0,0 +1,30 @@
+type __VLS_Props = {
+    /** Element or component to render. */
+    as?: string | object;
+};
+declare var __VLS_8: {
+    activeThumbIndex: number;
+    disabled: boolean;
+    dragging: boolean;
+    invalid: boolean;
+    orientation: import("./use-range").RangeOrientation;
+    max: number;
+    min: number;
+    minStepsBetweenValues: number;
+    step: number;
+    values: readonly number[];
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string | object;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};