@vuetify/v0 0.1.5 → 0.1.6

package/dist/browser/index.js

@@ -85,7 +85,7 @@ const SUPPORTS_MATCH_MEDIA = IN_BROWSER && "matchMedia" in window && typeof wind
 const SUPPORTS_OBSERVER = IN_BROWSER && "ResizeObserver" in window;
 const SUPPORTS_INTERSECTION_OBSERVER = IN_BROWSER && "IntersectionObserver" in window;
 const SUPPORTS_MUTATION_OBSERVER = IN_BROWSER && "MutationObserver" in window;
-const version = "0.1.5";
+const version = "0.1.6";
 /* v8 ignore next -- build-time constant, __DEV__ short-circuits in tests */
 const __LOGGER_ENABLED__ = false;
 
@@ -528,7 +528,7 @@ function debounce(fn, delay) {
 * serving as the foundation for all other components that need polymorphic
 * rendering capabilities.
 */
-const _sfc_main$60 = /* @__PURE__ */ defineComponent({
+const _sfc_main$68 = /* @__PURE__ */ defineComponent({
 	name: "Atom",
 	__name: "Atom",
 	props: {
@@ -559,7 +559,7 @@ const _sfc_main$60 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var Atom_default = _sfc_main$60;
+var Atom_default = _sfc_main$68;
 
 //#endregion
 //#region src/composables/createContext/index.ts
@@ -1417,6 +1417,23 @@ function createRegistry(options) {
 			needsReindex = true;
 		});
 	}
+	function move(id, toIndex) {
+		if (needsReindex) reindex();
+		const ticket = collection.get(id);
+		if (!ticket) return void 0;
+		const size = collection.size;
+		const target = /* @__PURE__ */ clamp(toIndex, 0, size - 1);
+		if (ticket.index === target) return ticket;
+		const items = Array.from(collection.entries());
+		const fromIndex = items.findIndex(([key]) => key === id);
+		const [entry] = items.splice(fromIndex, 1);
+		items.splice(target, 0, entry);
+		collection.clear();
+		for (const [key, value] of items) collection.set(key, value);
+		minDirtyIndex = Math.min(ticket.index, target);
+		reindex();
+		return ticket;
+	}
 	function seek(direction = "first", from, predicate) {
 		if (collection.size === 0) return void 0;
 		if (needsReindex) reindex();
@@ -1458,6 +1475,7 @@ function createRegistry(options) {
 		register,
 		unregister,
 		reindex,
+		move,
 		seek,
 		batch,
 		onboard(registrations) {
@@ -1530,27 +1548,193 @@ function useRegistry(namespace = "v0:registry") {
 	return useContext(namespace);
 }
 
+//#endregion
+//#region src/composables/createModel/index.ts
+/**
+* @module createModel
+*
+* @remarks
+* Value store layer that extends createRegistry with a reactive Set of
+* selected IDs, disabled guards, and an `apply` bridge for useProxyModel sync.
+*
+* Think of it as a creative way to store a single value — more like
+* `defineModel` than `createSelection`. Selection-specific concepts
+* (mandatory) belong in createSelection. The `multiple` option here
+* controls whether `select()` accumulates or replaces.
+*
+* Both Selection and Slider extend this layer:
+* - createRegistry → createModel → createSelection → createSingle/createGroup/createStep
+* - createRegistry → createModel → createSlider (values override)
+*/
+/**
+* Creates a new model instance for storing a single value.
+*
+* @param options The options for the model instance.
+* @template Z The input ticket type. Extend {@link ModelTicketInput} to add custom properties.
+* @template E The output ticket type. Automatically includes `disabled` and `isSelected`.
+* @template R The context type. Defaults to {@link ModelContext}<Z, E>.
+* @returns A new model instance with selection tracking and disabled guards.
+*
+* @remarks
+* Extends createRegistry with value tracking via a reactive Set of selected IDs.
+* Provides the shared model-value concept used by both Selection and Slider.
+*
+* **Enrollment**: Tickets are auto-selected on registration by default (`enroll: true`).
+* With single-value semantics, only the most recently registered ticket is active.
+* Pass `enroll: false` to opt out. `createSelection` overrides this to `false`.
+*
+* **Apply bridge**: `useProxyModel` calls `apply()` to sync a ref with the model.
+* When the active ticket's value is a ref, `apply` writes to it directly. Otherwise,
+* it resolves via `registry.browse()`.
+*
+* @see https://0.vuetifyjs.com/composables/selection/create-model
+*
+* @example
+* ```ts
+* import { shallowRef } from 'vue'
+* import { createModel, useProxyModel } from '@vuetify/v0'
+*
+* const value = shallowRef('Apple')
+* const model = createModel({ events: true })
+*
+* model.register({ id: 'fruit', value })
+* useProxyModel(model, value)
+*
+* // value and model stay in sync bidirectionally
+* ```
+*
+* @example
+* ```ts
+* // Disabled model — all selection operations are no-ops
+* const model = createModel({ disabled: true })
+* model.register({ id: 'a', value: shallowRef('Apple') })
+* model.select('a') // no-op
+* ```
+*/
+function createModel(_options = {}) {
+	const { disabled = false, enroll = true, multiple = false, ...options } = _options;
+	const registry = createRegistry(options);
+	const selectedIds = shallowReactive(/* @__PURE__ */ new Set());
+	const selectedItems = computed(() => {
+		return new Set(Array.from(selectedIds).map((id) => registry.get(id)).filter((item) => !/* @__PURE__ */ isUndefined(item)));
+	});
+	const selectedValues = computed(() => {
+		return new Set(Array.from(selectedItems.value).map((item) => toValue(item.value)));
+	});
+	function select(id) {
+		if (toValue(disabled)) return;
+		const item = registry.get(id);
+		if (!item || toValue(item.disabled)) return;
+		if (!toValue(multiple)) selectedIds.clear();
+		selectedIds.add(id);
+	}
+	function unselect(id) {
+		if (toValue(disabled)) return;
+		selectedIds.delete(id);
+	}
+	function toggle(id) {
+		if (toValue(disabled)) return;
+		if (selected(id)) unselect(id);
+		else select(id);
+	}
+	function selected(id) {
+		return selectedIds.has(id);
+	}
+	function apply(values, _options$1) {
+		const value = values[0];
+		for (const id$1 of selectedIds) {
+			const item = registry.get(id$1);
+			if (!item || !isRef(item.value)) continue;
+			item.value.value = value;
+		}
+		if (!toValue(multiple)) selectedIds.clear();
+		if (/* @__PURE__ */ isUndefined(value)) return;
+		const id = registry.browse(toRaw(value))?.values().next().value;
+		if (!/* @__PURE__ */ isUndefined(id)) selectedIds.add(id);
+	}
+	function register(registration = {}) {
+		const id = registration.id ?? /* @__PURE__ */ useId();
+		const item = {
+			disabled: false,
+			...registration,
+			isSelected: toRef(() => selected(id)),
+			id
+		};
+		const ticket = registry.register(item);
+		if (toValue(enroll) && !toValue(disabled) && !toValue(ticket.disabled)) select(id);
+		return ticket;
+	}
+	function unregister(id) {
+		selectedIds.delete(id);
+		registry.unregister(id);
+	}
+	function onboard(registrations) {
+		return registry.batch(() => registrations.map((r) => register(r)));
+	}
+	function offboard(ids) {
+		for (const id of ids) selectedIds.delete(id);
+		registry.offboard(ids);
+	}
+	function reset() {
+		selectedIds.clear();
+	}
+	function clear() {
+		reset();
+		registry.clear();
+	}
+	function dispose() {
+		reset();
+		registry.dispose();
+	}
+	return {
+		...registry,
+		disabled,
+		selectedIds,
+		selectedItems,
+		selectedValues,
+		register,
+		onboard,
+		unregister,
+		offboard,
+		clear,
+		dispose,
+		reset,
+		select,
+		unselect,
+		toggle,
+		selected,
+		apply,
+		get size() {
+			return registry.size;
+		}
+	};
+}
+
 //#endregion
 //#region src/composables/createSelection/index.ts
 /**
 * @module useSelection
 *
 * @remarks
-* Base composable for managing selected items in a collection with Set-based tracking.
+* Selection composable that extends createModel with multi-select,
+* mandatory enforcement, auto-enrollment, and ticket self-methods.
 *
 * Key features:
 * - Set-based selectedIds for O(1) selection checks
+* - Single or multi-select mode
 * - Mandatory selection mode (prevents deselecting last item)
 * - Auto-enrollment option (selects non-disabled items on register)
 * - Disabled item filtering
 * - Computed selectedItems and selectedValues Sets
+* - Ticket self-methods: select(), unselect(), toggle()
 *
-* Extends useRegistry and serves as the base for useSingle, useGroup, useStep, and useFeatures.
+* Extends createModel and serves as the base for useSingle, useGroup, useStep, and useFeatures.
 */
 /**
 * Creates a new selection instance for managing multiple selected items.
 *
-* Extends `useRegistry` with selection tracking via a reactive `Set` of selected IDs.
+* Extends `createModel` with multi-select, mandatory enforcement,
+* auto-enrollment, and ticket self-methods.
 * Supports disabled items, mandatory selection enforcement, and auto-enrollment.
 *
 * @param options The options for the selection instance.
@@ -1571,7 +1755,7 @@ function useRegistry(namespace = "v0:registry") {
 * - Enroll option auto-selects all non-disabled items on registration
 *
 * **Inheritance Chain:**
-* `useRegistry` → `createSelection` → `createSingle`/`createGroup` → `createStep`
+* `createRegistry` → `createModel` → `createSelection` → `createSingle`/`createGroup` → `createStep`
 *
 * @see https://0.vuetifyjs.com/composables/selection/use-selection
 *
@@ -1613,96 +1797,86 @@ function useRegistry(namespace = "v0:registry") {
 * ```
 */
 function createSelection(_options = {}) {
-	const { disabled = false, enroll = false, mandatory = false, multiple = false, ...options } = _options;
-	const registry = createRegistry(options);
-	const selectedIds = shallowReactive(/* @__PURE__ */ new Set());
-	const selectedItems = computed(() => {
-		return new Set(Array.from(selectedIds).map((id) => registry.get(id)).filter((item) => !/* @__PURE__ */ isUndefined(item)));
-	});
-	const selectedValues = computed(() => {
-		return new Set(Array.from(selectedItems.value).map((item) => item.value));
+	const { enroll = false, mandatory = false, multiple = false, ...options } = _options;
+	const model = createModel({
+		...options,
+		enroll: false
 	});
 	function seek(direction = "first", from) {
-		return registry.seek(direction, from, (ticket) => !toValue(ticket.disabled));
+		return model.seek(direction, from, (ticket) => !toValue(ticket.disabled));
 	}
 	function mandate() {
-		if (!toValue(mandatory) || registry.size === 0 || selectedIds.size > 0) return;
+		if (!toValue(mandatory) || model.size === 0 || model.selectedIds.size > 0) return;
 		const ticket = seek("first");
 		if (ticket) select(ticket.id);
 	}
 	function select(id) {
-		if (toValue(disabled)) return;
-		const item = registry.get(id);
+		if (toValue(model.disabled)) return;
+		const item = model.get(id);
 		if (!item || toValue(item.disabled)) return;
-		if (!toValue(multiple)) selectedIds.clear();
-		selectedIds.add(id);
+		if (!toValue(multiple)) model.selectedIds.clear();
+		model.selectedIds.add(id);
 	}
 	function unselect(id) {
-		if (toValue(disabled)) return;
-		if (toValue(mandatory) && selectedIds.size === 1) return;
-		selectedIds.delete(id);
+		if (toValue(model.disabled)) return;
+		if (toValue(mandatory) && model.selectedIds.size === 1) return;
+		model.selectedIds.delete(id);
 	}
 	function toggle(id) {
-		if (toValue(disabled)) return;
-		if (selected(id)) unselect(id);
+		if (toValue(model.disabled)) return;
+		if (model.selectedIds.has(id)) unselect(id);
 		else select(id);
 	}
-	function selected(id) {
-		return selectedIds.has(id);
+	function apply(values, options$1) {
+		const isMultiple = options$1?.multiple ?? toValue(multiple);
+		const currentIds = new Set(model.selectedIds);
+		const targetIds = /* @__PURE__ */ new Set();
+		for (const value of values) {
+			const ids = model.browse(toRaw(value));
+			if (ids) for (const id of ids) targetIds.add(id);
+		}
+		if (isMultiple) {
+			for (const id of currentIds.difference(targetIds)) model.selectedIds.delete(id);
+			for (const id of targetIds.difference(currentIds)) model.selectedIds.add(id);
+		} else {
+			const next = targetIds.values().next().value;
+			const last = currentIds.values().next().value;
+			if (!/* @__PURE__ */ isUndefined(last)) unselect(last);
+			if (!/* @__PURE__ */ isUndefined(next)) select(next);
+		}
 	}
 	function register(registration = {}) {
 		const id = registration.id ?? /* @__PURE__ */ useId();
-		const item = {
-			disabled: false,
+		const decorated = {
 			select: () => select(id),
 			unselect: () => unselect(id),
 			toggle: () => toggle(id),
-			isSelected: toRef(() => selected(id)),
 			...registration,
 			id
 		};
-		const ticket = registry.register(item);
-		if (toValue(enroll) && !toValue(disabled) && !toValue(item.disabled)) select(ticket.id);
+		const ticket = model.register(decorated);
+		if (toValue(enroll) && !toValue(model.disabled) && !toValue(ticket.disabled)) select(ticket.id);
 		if (toValue(mandatory) === "force") mandate();
 		return ticket;
 	}
-	function unregister(id) {
-		selectedIds.delete(id);
-		registry.unregister(id);
-	}
-	function offboard(ids) {
-		for (const id of ids) selectedIds.delete(id);
-		registry.offboard(ids);
-	}
 	function onboard(registrations) {
-		const tickets = registry.batch(() => registrations.map((registration) => register(registration)));
+		const tickets = model.batch(() => registrations.map((registration) => register(registration)));
 		if (toValue(mandatory) === "force") mandate();
 		return tickets;
 	}
-	function reset() {
-		registry.clear();
-		selectedIds.clear();
-		mandate();
-	}
 	return {
-		...registry,
-		disabled,
-		selectedIds,
-		selectedItems,
-		selectedValues,
+		...model,
+		multiple,
 		register,
-		unregister,
 		onboard,
-		offboard,
-		reset,
-		mandate,
-		seek,
 		select,
 		unselect,
 		toggle,
-		selected,
+		apply,
+		mandate,
+		seek,
 		get size() {
-			return registry.size;
+			return model.size;
 		}
 	};
 }
@@ -1788,7 +1962,7 @@ function useSelection(namespace = "v0:selection") {
 //#endregion
 //#region src/components/Avatar/AvatarRoot.vue
 const [useAvatarRoot, provideAvatarRoot] = createContext();
-const _sfc_main$59 = /* @__PURE__ */ defineComponent({
+const _sfc_main$67 = /* @__PURE__ */ defineComponent({
 	name: "AvatarRoot",
 	__name: "AvatarRoot",
 	props: {
@@ -1813,11 +1987,11 @@ const _sfc_main$59 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var AvatarRoot_default = _sfc_main$59;
+var AvatarRoot_default = _sfc_main$67;
 
 //#endregion
 //#region src/components/Avatar/AvatarFallback.vue
-const _sfc_main$58 = /* @__PURE__ */ defineComponent({
+const _sfc_main$66 = /* @__PURE__ */ defineComponent({
 	name: "AvatarFallback",
 	__name: "AvatarFallback",
 	props: {
@@ -1842,11 +2016,11 @@ const _sfc_main$58 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var AvatarFallback_default = _sfc_main$58;
+var AvatarFallback_default = _sfc_main$66;
 
 //#endregion
 //#region src/components/Avatar/AvatarImage.vue
-const _sfc_main$57 = /* @__PURE__ */ defineComponent({
+const _sfc_main$65 = /* @__PURE__ */ defineComponent({
 	name: "AvatarImage",
 	inheritAttrs: false,
 	__name: "AvatarImage",
@@ -1906,7 +2080,7 @@ const _sfc_main$57 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var AvatarImage_default = _sfc_main$57;
+var AvatarImage_default = _sfc_main$65;
 
 //#endregion
 //#region src/components/Avatar/index.ts
@@ -2262,7 +2436,8 @@ function useBreadcrumbs(namespace = "v0:breadcrumbs") {
 *
 * @param registry The registry instance to proxy.
 * @param options The options for the proxy registry.
-* @template Z The type of the registry ticket.
+* @template Z The input ticket type (what users provide to register).
+* @template E The output ticket type (what users receive from get/values).
 * @returns A proxy registry with reactive objects.
 *
 * @see https://0.vuetifyjs.com/composables/registration/use-proxy-registry
@@ -3559,7 +3734,7 @@ const [createLocaleContext, createLocalePlugin, useLocale] = createPluginContext
 //#endregion
 //#region src/components/Breadcrumbs/BreadcrumbsRoot.vue
 const [useBreadcrumbsRoot, provideBreadcrumbsRoot] = createContext();
-const _sfc_main$56 = /* @__PURE__ */ defineComponent({
+const _sfc_main$64 = /* @__PURE__ */ defineComponent({
 	name: "BreadcrumbsRoot",
 	__name: "BreadcrumbsRoot",
 	props: {
@@ -3698,11 +3873,11 @@ const _sfc_main$56 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var BreadcrumbsRoot_default = _sfc_main$56;
+var BreadcrumbsRoot_default = _sfc_main$64;
 
 //#endregion
 //#region src/components/Breadcrumbs/BreadcrumbsDivider.vue
-const _sfc_main$55 = /* @__PURE__ */ defineComponent({
+const _sfc_main$63 = /* @__PURE__ */ defineComponent({
 	name: "BreadcrumbsDivider",
 	__name: "BreadcrumbsDivider",
 	props: {
@@ -3749,11 +3924,11 @@ const _sfc_main$55 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var BreadcrumbsDivider_default = _sfc_main$55;
+var BreadcrumbsDivider_default = _sfc_main$63;
 
 //#endregion
 //#region src/components/Breadcrumbs/BreadcrumbsEllipsis.vue
-const _sfc_main$54 = /* @__PURE__ */ defineComponent({
+const _sfc_main$62 = /* @__PURE__ */ defineComponent({
 	name: "BreadcrumbsEllipsis",
 	__name: "BreadcrumbsEllipsis",
 	props: {
@@ -3807,11 +3982,11 @@ const _sfc_main$54 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var BreadcrumbsEllipsis_default = _sfc_main$54;
+var BreadcrumbsEllipsis_default = _sfc_main$62;
 
 //#endregion
 //#region src/components/Breadcrumbs/BreadcrumbsItem.vue
-const _sfc_main$53 = /* @__PURE__ */ defineComponent({
+const _sfc_main$61 = /* @__PURE__ */ defineComponent({
 	name: "BreadcrumbsItem",
 	__name: "BreadcrumbsItem",
 	props: {
@@ -3861,11 +4036,11 @@ const _sfc_main$53 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var BreadcrumbsItem_default = _sfc_main$53;
+var BreadcrumbsItem_default = _sfc_main$61;
 
 //#endregion
 //#region src/components/Breadcrumbs/BreadcrumbsLink.vue
-const _sfc_main$52 = /* @__PURE__ */ defineComponent({
+const _sfc_main$60 = /* @__PURE__ */ defineComponent({
 	name: "BreadcrumbsLink",
 	__name: "BreadcrumbsLink",
 	props: {
@@ -3884,11 +4059,11 @@ const _sfc_main$52 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var BreadcrumbsLink_default = _sfc_main$52;
+var BreadcrumbsLink_default = _sfc_main$60;
 
 //#endregion
 //#region src/components/Breadcrumbs/BreadcrumbsList.vue
-const _sfc_main$51 = /* @__PURE__ */ defineComponent({
+const _sfc_main$59 = /* @__PURE__ */ defineComponent({
 	name: "BreadcrumbsList",
 	__name: "BreadcrumbsList",
 	props: {
@@ -3908,11 +4083,11 @@ const _sfc_main$51 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var BreadcrumbsList_default = _sfc_main$51;
+var BreadcrumbsList_default = _sfc_main$59;
 
 //#endregion
 //#region src/components/Breadcrumbs/BreadcrumbsPage.vue
-const _sfc_main$50 = /* @__PURE__ */ defineComponent({
+const _sfc_main$58 = /* @__PURE__ */ defineComponent({
 	name: "BreadcrumbsPage",
 	__name: "BreadcrumbsPage",
 	props: {
@@ -3932,7 +4107,7 @@ const _sfc_main$50 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var BreadcrumbsPage_default = _sfc_main$50;
+var BreadcrumbsPage_default = _sfc_main$58;
 
 //#endregion
 //#region src/components/Breadcrumbs/index.ts
@@ -3957,23 +4132,22 @@ const Breadcrumbs = {
 * @module useProxyModel
 *
 * @remarks
-* Proxy composable for bidirectional sync between selection registry and v-model.
+* Proxy composable for bidirectional sync between a model context and v-model.
 *
 * Key features:
 * - Bidirectional synchronization
 * - Array and single-value modes
 * - Automatic cleanup on scope disposal
-* - Perfect for form controls with selection backing
+* - Works with any ModelContext (Selection, Slider, etc.)
 *
-* Bridges the gap between selection composables and Vue's v-model.
+* Bridges the gap between model composables and Vue's v-model.
 */
 /**
-* Syncs a ref with a selection registry bidirectionally.
+* Syncs a ref with a model context bidirectionally.
 *
-* @param registry The selection registry to bind to.
+* @param context The model context to bind to.
 * @param model The ref to sync.
 * @param options The options for the proxy model.
-* @template Z The type of the selection ticket.
 * @returns A function to stop the sync.
 *
 * @see https://0.vuetifyjs.com/composables/forms/use-proxy-model
@@ -3992,8 +4166,8 @@ const Breadcrumbs = {
 * const stop = useProxyModel(registry, model)
 * ```
 */
-function useProxyModel(registry, model, options) {
-	const multiple = options?.multiple ?? false;
+function useProxyModel(context, model, options) {
+	const multiple = options?.multiple ?? context.multiple ?? false;
 	const _transformIn = options?.transformIn;
 	const _transformOut = options?.transformOut;
 	function transformIn(val) {
@@ -4004,39 +4178,20 @@ function useProxyModel(registry, model, options) {
 		if (/* @__PURE__ */ isFunction(_transformOut)) return _transformOut(val);
 		return toValue(multiple) ? val : val[0];
 	}
+	const applyOptions = toValue(multiple) === toValue(context.multiple ?? false) ? void 0 : { multiple: toValue(multiple) };
 	const modelAsArray = transformIn(model);
 	const pending = new Set(modelAsArray);
-	for (const value of modelAsArray) {
-		const ids = registry.browse(value);
-		/* v8 ignore start -- edge case: value exists in registry at init */
-		if (ids) {
-			for (const id of ids) registry.select(id);
-			pending.delete(value);
-		}
-	}
-	const registryWatch = watch(registry.selectedValues, (val) => {
+	context.apply(modelAsArray, applyOptions);
+	for (const value of modelAsArray) if (Array.from(context.selectedValues.value).includes(value)) pending.delete(value);
+	const contextWatch = watch(context.selectedValues, (val) => {
 		modelWatch.pause();
 		model.value = transformOut(Array.from(toValue(val)));
 		modelWatch.resume();
 	}, { flush: "sync" });
 	const modelWatch = watch(model, (val) => {
-		registryWatch.pause();
-		const currentIds = new Set(toValue(registry.selectedIds));
-		const targetIds = /* @__PURE__ */ new Set();
-		for (const value of transformIn(val)) {
-			const ids = registry.browse(toRaw(value));
-			if (ids) for (const id of ids) targetIds.add(id);
-		}
-		if (toValue(multiple)) {
-			for (const id of currentIds.difference(targetIds)) registry.selectedIds.delete(id);
-			for (const id of targetIds.difference(currentIds)) registry.selectedIds.add(id);
-		} else {
-			const next = targetIds.values().next().value;
-			const last = currentIds.values().next().value;
-			if (!/* @__PURE__ */ isUndefined(last)) registry.unselect(last);
-			if (!/* @__PURE__ */ isUndefined(next)) registry.select(next);
-		}
-		registryWatch.resume();
+		contextWatch.pause();
+		context.apply(transformIn(val), applyOptions);
+		contextWatch.resume();
 	}, {
 		flush: "sync",
 		deep: toValue(multiple)
@@ -4044,18 +4199,18 @@ function useProxyModel(registry, model, options) {
 	function onRegister(data) {
 		const ticket = data;
 		if (!pending.has(ticket.value) || toValue(ticket.disabled)) return;
-		registryWatch.pause();
+		contextWatch.pause();
 		modelWatch.pause();
-		registry.select(ticket.id);
+		context.select?.(ticket.id);
 		pending.delete(ticket.value);
 		modelWatch.resume();
-		registryWatch.resume();
+		contextWatch.resume();
 	}
-	registry.on("register:ticket", onRegister);
+	context.on?.("register:ticket", onRegister);
 	function stop() {
-		registryWatch();
+		contextWatch();
 		modelWatch();
-		registry.off("register:ticket", onRegister);
+		context.off?.("register:ticket", onRegister);
 	}
 	onScopeDispose(stop, true);
 	return stop;
@@ -4064,7 +4219,7 @@ function useProxyModel(registry, model, options) {
 //#endregion
 //#region src/components/Checkbox/CheckboxGroup.vue
 const [useCheckboxGroup, provideCheckboxGroup] = createContext();
-const _sfc_main$49 = /* @__PURE__ */ defineComponent({
+const _sfc_main$57 = /* @__PURE__ */ defineComponent({
 	name: "CheckboxGroup",
 	__name: "CheckboxGroup",
 	props: /* @__PURE__ */ mergeModels({
@@ -4130,12 +4285,12 @@ const _sfc_main$49 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var CheckboxGroup_default = _sfc_main$49;
+var CheckboxGroup_default = _sfc_main$57;
 
 //#endregion
 //#region src/components/Checkbox/CheckboxRoot.vue
 const [useCheckboxRoot, provideCheckboxRoot] = createContext();
-const _sfc_main$48 = /* @__PURE__ */ defineComponent({
+const _sfc_main$56 = /* @__PURE__ */ defineComponent({
 	name: "CheckboxRoot",
 	inheritAttrs: false,
 	__name: "CheckboxRoot",
@@ -4269,11 +4424,11 @@ const _sfc_main$48 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var CheckboxRoot_default = _sfc_main$48;
+var CheckboxRoot_default = _sfc_main$56;
 
 //#endregion
 //#region src/components/Checkbox/CheckboxHiddenInput.vue
-const _hoisted_1$2 = [
+const _hoisted_1$3 = [
 	"checked",
 	"disabled",
 	"form",
@@ -4291,7 +4446,7 @@ const visuallyHiddenStyle$2 = {
 	whiteSpace: "nowrap",
 	border: "0"
 };
-const _sfc_main$47 = /* @__PURE__ */ defineComponent({
+const _sfc_main$55 = /* @__PURE__ */ defineComponent({
 	name: "CheckboxHiddenInput",
 	__name: "CheckboxHiddenInput",
 	props: {
@@ -4323,15 +4478,15 @@ const _sfc_main$47 = /* @__PURE__ */ defineComponent({
 				tabindex: "-1",
 				type: "checkbox",
 				value: value.value
-			}, null, 8, _hoisted_1$2);
+			}, null, 8, _hoisted_1$3);
 		};
 	}
 });
-var CheckboxHiddenInput_default = _sfc_main$47;
+var CheckboxHiddenInput_default = _sfc_main$55;
 
 //#endregion
 //#region src/components/Checkbox/CheckboxIndicator.vue
-const _sfc_main$46 = /* @__PURE__ */ defineComponent({
+const _sfc_main$54 = /* @__PURE__ */ defineComponent({
 	name: "CheckboxIndicator",
 	__name: "CheckboxIndicator",
 	props: {
@@ -4364,11 +4519,11 @@ const _sfc_main$46 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var CheckboxIndicator_default = _sfc_main$46;
+var CheckboxIndicator_default = _sfc_main$54;
 
 //#endregion
 //#region src/components/Checkbox/CheckboxSelectAll.vue
-const _sfc_main$45 = /* @__PURE__ */ defineComponent({
+const _sfc_main$53 = /* @__PURE__ */ defineComponent({
 	name: "CheckboxSelectAll",
 	inheritAttrs: false,
 	__name: "CheckboxSelectAll",
@@ -4454,7 +4609,7 @@ const _sfc_main$45 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var CheckboxSelectAll_default = _sfc_main$45;
+var CheckboxSelectAll_default = _sfc_main$53;
 
 //#endregion
 //#region src/components/Checkbox/index.ts
@@ -4490,7 +4645,7 @@ const Checkbox = {
 //#endregion
 //#region src/components/Dialog/DialogRoot.vue
 const [useDialogContext, provideDialogContext] = createContext();
-const _sfc_main$44 = /* @__PURE__ */ defineComponent({
+const _sfc_main$52 = /* @__PURE__ */ defineComponent({
 	name: "DialogRoot",
 	__name: "DialogRoot",
 	props: /* @__PURE__ */ mergeModels({
@@ -4542,11 +4697,11 @@ const _sfc_main$44 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var DialogRoot_default = _sfc_main$44;
+var DialogRoot_default = _sfc_main$52;
 
 //#endregion
 //#region src/components/Dialog/DialogClose.vue
-const _sfc_main$43 = /* @__PURE__ */ defineComponent({
+const _sfc_main$51 = /* @__PURE__ */ defineComponent({
 	name: "DialogClose",
 	__name: "DialogClose",
 	props: {
@@ -4574,7 +4729,7 @@ const _sfc_main$43 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var DialogClose_default = _sfc_main$43;
+var DialogClose_default = _sfc_main$51;
 
 //#endregion
 //#region src/composables/createPagination/index.ts
@@ -4858,17 +5013,15 @@ function defaultFilter(query, item, keys, mode = "some") {
 function createFilter(options = {}) {
 	const { customFilter, keys, mode = "some" } = options;
 	const filterFunction = customFilter ?? ((q, i) => defaultFilter(q, i, keys, mode));
-	const query = toRef("");
+	const query = shallowRef("");
 	function apply(_query, items) {
-		const itemsRef = isRef(items) ? items : toRef(() => items);
-		const queryRef = toRef(_query);
 		return { items: computed(() => {
-			const q = toValue(queryRef);
+			const q = toValue(_query);
 			query.value = q;
 			const queries = toArray(q).filter((q$1) => String(q$1).trim());
-			if (queries.length === 0) return itemsRef.value;
+			if (queries.length === 0) return toValue(items);
 			const queryParam = queries.length === 1 ? queries[0] : queries;
-			return itemsRef.value.filter((item) => filterFunction(queryParam, item));
+			return toValue(items).filter((item) => filterFunction(queryParam, item));
 		}) };
 	}
 	return {
@@ -5724,30 +5877,42 @@ function createDefaultBreakpoints() {
 * ```
 */
 function createBreakpoints(_options = {}) {
-	const { mobileBreakpoint, breakpoints } = /* @__PURE__ */ mergeDeep(createDefaultBreakpoints(), _options);
+	const { ssr, ...options } = _options;
+	const { mobileBreakpoint, breakpoints } = /* @__PURE__ */ mergeDeep(createDefaultBreakpoints(), options);
 	const sorted = Object.entries(breakpoints).toSorted((a, b) => a[1] - b[1]);
 	const names = sorted.map(([n]) => n);
 	const mb = /* @__PURE__ */ isNumber(mobileBreakpoint) ? mobileBreakpoint : breakpoints[mobileBreakpoint] ?? breakpoints.md;
-	const name = shallowRef("xs");
-	const width = shallowRef(0);
-	const height = shallowRef(0);
-	const isMobile = shallowRef(true);
-	const xs = shallowRef(true);
-	const sm = shallowRef(false);
-	const md = shallowRef(false);
-	const lg = shallowRef(false);
-	const xl = shallowRef(false);
-	const xxl = shallowRef(false);
-	const smAndUp = shallowRef(false);
-	const mdAndUp = shallowRef(false);
-	const lgAndUp = shallowRef(false);
-	const xlAndUp = shallowRef(false);
-	const xxlAndUp = shallowRef(false);
-	const smAndDown = shallowRef(true);
-	const mdAndDown = shallowRef(true);
-	const lgAndDown = shallowRef(true);
-	const xlAndDown = shallowRef(true);
-	const xxlAndDown = shallowRef(true);
+	const isSSR = !IN_BROWSER && !!ssr;
+	const initialWidth = isSSR ? ssr.clientWidth : 0;
+	const initialHeight = isSSR ? ssr.clientHeight ?? 0 : 0;
+	let initialName = "xs";
+	if (isSSR) {
+		for (let i = sorted.length - 1; i >= 0; i--) if (initialWidth >= sorted[i][1]) {
+			initialName = sorted[i][0];
+			break;
+		}
+	}
+	const initialIndex = names.indexOf(initialName);
+	const name = shallowRef(initialName);
+	const width = shallowRef(initialWidth);
+	const height = shallowRef(initialHeight);
+	const isMobile = shallowRef(isSSR ? initialWidth < mb : true);
+	const xs = shallowRef(initialIndex === 0);
+	const sm = shallowRef(initialIndex === 1);
+	const md = shallowRef(initialIndex === 2);
+	const lg = shallowRef(initialIndex === 3);
+	const xl = shallowRef(initialIndex === 4);
+	const xxl = shallowRef(initialIndex === 5);
+	const smAndUp = shallowRef(initialIndex >= 1);
+	const mdAndUp = shallowRef(initialIndex >= 2);
+	const lgAndUp = shallowRef(initialIndex >= 3);
+	const xlAndUp = shallowRef(initialIndex >= 4);
+	const xxlAndUp = shallowRef(initialIndex >= 5);
+	const smAndDown = shallowRef(initialIndex <= 1);
+	const mdAndDown = shallowRef(initialIndex <= 2);
+	const lgAndDown = shallowRef(initialIndex <= 3);
+	const xlAndDown = shallowRef(initialIndex <= 4);
+	const xxlAndDown = shallowRef(initialIndex <= 5);
 	function update() {
 		if (!IN_BROWSER) return;
 		width.value = window.innerWidth;
@@ -5799,10 +5964,12 @@ function createBreakpoints(_options = {}) {
 		lgAndDown: readonly(lgAndDown),
 		xlAndDown: readonly(xlAndDown),
 		xxlAndDown: readonly(xxlAndDown),
+		ssr: isSSR,
 		update
 	};
 }
-function createBreakpointsFallback() {
+function createBreakpointsFallback(options = {}) {
+	if (options.ssr) return createBreakpoints(options);
 	return {
 		breakpoints: createDefaultBreakpoints().breakpoints,
 		name: readonly(shallowRef("xs")),
@@ -5825,12 +5992,14 @@ function createBreakpointsFallback() {
 		lgAndDown: readonly(shallowRef(false)),
 		xlAndDown: readonly(shallowRef(false)),
 		xxlAndDown: readonly(shallowRef(false)),
+		ssr: false,
 		update: () => {}
 	};
 }
 const [createBreakpointsContext, createBreakpointsPlugin, useBreakpoints] = createPluginContext("v0:breakpoints", (options) => createBreakpoints(options), {
 	fallback: () => createBreakpointsFallback(),
 	setup: (context, app, _options) => {
+		if (IN_BROWSER) context.update();
 		app.mixin({ mounted() {
 			if (!/* @__PURE__ */ isNull(this.$parent)) return;
 			const hydration = useHydration();
@@ -6423,6 +6592,9 @@ const keyAliasMap = {
 	space: " ",
 	return: "enter",
 	del: "delete",
+	plus: "+",
+	slash: "/",
+	underscore: "_",
 	minus: "-",
 	hyphen: "-"
 };
@@ -6468,7 +6640,7 @@ function splitKeyCombination(combination, isInternal = false) {
 		"++",
 		"//",
 		"__"
-	].some((v) => combination.startsWith(v)) || combination.includes("++") || combination.includes("__") || combination === "+" || combination === "_" || combination.length > 1 && (combination.endsWith("+") || combination.endsWith("_")) && combination.at(-2) !== combination.at(-1) || combination === "++" || combination === "--" || combination === "__") {
+	].some((v) => combination.startsWith(v)) || combination.includes("++") || combination.includes("//") || combination.includes("__") || combination === "+" || combination === "/" || combination === "_" || combination.length > 1 && (combination.endsWith("+") || combination.endsWith("/") || combination.endsWith("_")) && combination.at(-2) !== combination.at(-1) || combination === "++" || combination === "--" || combination === "__") {
 		if (!isInternal) logger.warn(`Invalid hotkey combination: "${combination}" has invalid structure`);
 		return emptyResult;
 	}
@@ -6534,7 +6706,11 @@ function splitKeySequence(str) {
 		logger.warn("Invalid hotkey sequence: empty string provided");
 		return [];
 	}
-	const hasInvalidStart = str.startsWith("-") && !["---", "--+"].includes(str);
+	const hasInvalidStart = str.startsWith("-") && ![
+		"-",
+		"---",
+		"--+"
+	].includes(str);
 	const hasInvalidEnd = str.endsWith("-") && !str.endsWith("+-") && !str.endsWith("_-") && str !== "-" && str !== "---";
 	if (hasInvalidStart || hasInvalidEnd) {
 		logger.warn(`Invalid hotkey sequence: "${str}" contains invalid combinations`);
@@ -7760,10 +7936,15 @@ function createNested(_options = {}) {
 		openedIds.clear();
 		activeIds.clear();
 		rootIds.clear();
-		group.reset();
+		group.clear();
 	}
 	function reset() {
-		clear();
+		children.clear();
+		parents.clear();
+		openedIds.clear();
+		activeIds.clear();
+		rootIds.clear();
+		group.reset();
 	}
 	const context = {
 		...group,
@@ -8189,45 +8370,230 @@ function useQueue(namespace = "v0:queue") {
 }
 
 //#endregion
-//#region src/composables/useStack/index.ts
+//#region src/composables/createSlider/index.ts
 /**
-* @module useStack
+* @module createSlider
 *
-* @see https://0.vuetifyjs.com/composables/plugins/use-stack
+* @see https://0.vuetifyjs.com/composables/forms/create-slider
 *
 * @remarks
-* Overlay z-index stacking composable with:
-* - Global reactive registry of active overlays
-* - Automatic z-index calculation based on selection order
-* - `globalTop` tracking - is this ticket topmost globally?
-* - Manual select/unselect for explicit control
-* - Auto-cleanup when registered within component setup
+* Composable for managing slider state: value math, step snapping,
+* percentage conversion, and multi-thumb value operations.
 *
-* Built on createSelection for consistent ticket-based management.
+* Extends createModel for useProxyModel compatibility:
+* - createRegistry → createModel → createSlider (ticket-per-thumb)
+*
+* Each thumb is a model ticket with a `shallowRef<number>` value.
+* Values are derived from ordered tickets, not a standalone ref.
+*
+* Designed for single-thumb, range, and multi-thumb sliders.
+* Also reusable for color picker tracks, media scrubbers,
+* gradient editors, and other 1D value-on-track controls.
 */
 /**
-* Creates a new stack instance for managing overlay z-indexes.
+* Creates slider state with value math, step snapping, and multi-thumb support.
 *
-* @param options Configuration options
-* @returns Stack context with registry methods and scrim helpers
+* Extends createModel for useProxyModel compatibility. Each thumb is a model
+* ticket with a shallowRef<number> value. Values are derived from the ordered
+* tickets, enabling proper registration/unregistration lifecycle.
 *
-* @see https://0.vuetifyjs.com/composables/plugins/use-stack
+* @param options Slider configuration.
+* @returns Slider context with values, math functions, and thumb operations.
 *
-* @example
+* @see https://0.vuetifyjs.com/composables/forms/create-slider
+* @see {@link createModel} for the base model composable.
+*
+* @example Single thumb
 * ```ts
-* import { createStack } from '@vuetify/v0'
+* import { createSlider } from '@vuetify/v0'
 *
-* const stack = createStack({ baseZIndex: 1000 })
+* const slider = createSlider({ min: 0, max: 100, step: 5 })
+* const ticket = slider.register({ value: 50 })
+* slider.up(0)           // values: [55]
+* slider.fromValue(50)   // 50
+* ```
 *
-* const ticket = stack.register({
-*   onDismiss: () => console.log('dismissed'),
-*   blocking: false,
-* })
+* @example Range slider
+* ```ts
+* import { createSlider } from '@vuetify/v0'
 *
-* ticket.select()  // Activate overlay
-* console.log(ticket.zIndex.value)  // 1000
+* const slider = createSlider({ min: 0, max: 100, step: 1, range: true })
+* slider.register({ value: 25 })
+* slider.register({ value: 75 })
+* slider.set(0, 30)      // values: [30, 75]
+* slider.set(1, 60)      // values: [30, 60]
+* ```
 *
-* ticket.unselect()  // Deactivate overlay
+* @example Custom pointer interaction (media scrubber)
+* ```ts
+* import { createSlider } from '@vuetify/v0'
+*
+* const slider = createSlider({ min: 0, max: 217, step: 0.1 })
+* slider.register({ value: 0 })
+*
+* // pointer → fromPercent → set → fromValue → UI
+* const percent = (clientX - rect.left) / rect.width * 100
+* slider.set(0, slider.fromPercent(percent))
+* const position = slider.fromValue(slider.values.value[0])
+* ```
+*/
+function createSlider(options = {}) {
+	const { min = 0, max = 100, step = 1, disabled: disabledProp = false, readonly: readonlyProp = false, orientation: orientationProp = "horizontal", inverted: invertedProp = false, minStepsBetweenThumbs = 0, crossover = false, range: range$1 = false } = options;
+	const model = createModel({
+		disabled: disabledProp,
+		multiple: true,
+		events: true
+	});
+	const disabled = toRef(() => toValue(disabledProp));
+	const readonly$1 = toRef(() => toValue(readonlyProp));
+	const orientation = toRef(() => toValue(orientationProp));
+	const inverted = toRef(() => toValue(invertedProp));
+	const extent = max - min;
+	let pending = null;
+	const thumbs = computed(() => Array.from(model.selectedItems.value).toSorted((a, b) => a.index - b.index));
+	const values = computed(() => thumbs.value.map((t) => toValue(t.value)));
+	const selectedValues = computed(() => values.value);
+	function snap(value) {
+		if (step <= 0) return /* @__PURE__ */ clamp(value, min, max);
+		const clamped = /* @__PURE__ */ clamp(value, min, max);
+		return /* @__PURE__ */ clamp(min + Math.round((clamped - min) / step) * step, min, max);
+	}
+	function fromValue(value) {
+		if (extent === 0) return 0;
+		const p = (value - min) / extent * 100;
+		return inverted.value ? 100 - p : p;
+	}
+	function fromPercent(p) {
+		return snap(min + (inverted.value ? 100 - p : p) / 100 * extent);
+	}
+	function register(input) {
+		const initialValue = /* @__PURE__ */ isObject(input) ? input.value : input;
+		const thumbIndex = thumbs.value.length;
+		const pendingValue = pending?.[thumbIndex];
+		const val = /* @__PURE__ */ isUndefined(pendingValue) ? snap(initialValue ?? min) : snap(pendingValue);
+		const ticket = model.register({ value: shallowRef(val) });
+		if (!model.selectedIds.has(ticket.id)) model.selectedIds.add(ticket.id);
+		if (pending && thumbs.value.length >= pending.length) pending = null;
+		return ticket;
+	}
+	function apply(incoming, _options) {
+		const snapped = incoming.map((v) => snap(Number(v)));
+		if (thumbs.value.length === 0) {
+			pending = snapped;
+			return;
+		}
+		for (let index = 0; index < snapped.length; index++) {
+			const ticket = thumbs.value[index];
+			if (!ticket || !isRef(ticket.value)) continue;
+			let constrained = snapped[index];
+			if (!crossover) {
+				const gap = minStepsBetweenThumbs * step;
+				const prev = index > 0 ? snapped[index - 1] : void 0;
+				const following = index < snapped.length - 1 ? snapped[index + 1] : void 0;
+				if (!/* @__PURE__ */ isUndefined(prev)) constrained = Math.max(constrained, prev + gap);
+				if (!/* @__PURE__ */ isUndefined(following)) constrained = Math.min(constrained, following - gap);
+			}
+			ticket.value.value = /* @__PURE__ */ clamp(constrained, min, max);
+		}
+	}
+	function set(index, value) {
+		if (readonly$1.value) return;
+		const snapped = snap(value);
+		const current = values.value;
+		let constrained = snapped;
+		if (!crossover) {
+			const gap = minStepsBetweenThumbs * step;
+			const prev = current[index - 1];
+			const following = current[index + 1];
+			if (index > 0 && !/* @__PURE__ */ isUndefined(prev)) constrained = Math.max(constrained, prev + gap);
+			if (index < current.length - 1 && !/* @__PURE__ */ isUndefined(following)) constrained = Math.min(constrained, following - gap);
+		}
+		constrained = /* @__PURE__ */ clamp(constrained, min, max);
+		const ticket = thumbs.value[index];
+		if (ticket && isRef(ticket.value)) ticket.value.value = constrained;
+	}
+	function up(index, multiplier = 1) {
+		set(index, (values.value[index] ?? min) + step * multiplier);
+	}
+	function down(index, multiplier = 1) {
+		set(index, (values.value[index] ?? min) - step * multiplier);
+	}
+	function floor(index) {
+		set(index, min);
+	}
+	function ceil(index) {
+		set(index, max);
+	}
+	return {
+		...model,
+		values,
+		selectedValues,
+		apply,
+		range: range$1,
+		min,
+		max,
+		step,
+		minStepsBetweenThumbs,
+		crossover,
+		disabled,
+		readonly: readonly$1,
+		orientation,
+		inverted,
+		register,
+		snap,
+		fromValue,
+		fromPercent,
+		set,
+		up,
+		down,
+		floor,
+		ceil,
+		get size() {
+			return model.size;
+		}
+	};
+}
+
+//#endregion
+//#region src/composables/useStack/index.ts
+/**
+* @module useStack
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-stack
+*
+* @remarks
+* Overlay z-index stacking composable with:
+* - Global reactive registry of active overlays
+* - Automatic z-index calculation based on selection order
+* - `globalTop` tracking - is this ticket topmost globally?
+* - Manual select/unselect for explicit control
+* - Auto-cleanup when registered within component setup
+*
+* Built on createSelection for consistent ticket-based management.
+*/
+/**
+* Creates a new stack instance for managing overlay z-indexes.
+*
+* @param options Configuration options
+* @returns Stack context with registry methods and scrim helpers
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-stack
+*
+* @example
+* ```ts
+* import { createStack } from '@vuetify/v0'
+*
+* const stack = createStack({ baseZIndex: 1000 })
+*
+* const ticket = stack.register({
+*   onDismiss: () => console.log('dismissed'),
+*   blocking: false,
+* })
+*
+* ticket.select()  // Activate overlay
+* console.log(ticket.zIndex.value)  // 1000
+*
+* ticket.unselect()  // Deactivate overlay
 * ```
 */
 function createStack(_options = {}) {
@@ -8687,31 +9053,50 @@ function createStorage(options = {}) {
 	const { adapter = IN_BROWSER ? window.localStorage : new MemoryAdapter(), prefix = "v0:", serializer = {
 		read: JSON.parse,
 		write: JSON.stringify
-	} } = options;
+	}, ttl } = options;
 	const cache = /* @__PURE__ */ new Map();
 	const watchers = /* @__PURE__ */ new Map();
 	function has(key) {
 		const prefixedKey = `${prefix}${key}`;
 		return cache.has(prefixedKey);
 	}
-	function get(key, defaultValue) {
-		const prefixedKey = `${prefix}${key}`;
-		if (cache.has(prefixedKey)) return cache.get(prefixedKey);
-		const storedValue = adapter?.getItem(prefixedKey);
-		let initialValue = defaultValue;
-		if (storedValue) try {
-			initialValue = serializer.read(storedValue);
+	function readStored(prefixedKey) {
+		const raw = adapter?.getItem(prefixedKey);
+		if (!raw) return void 0;
+		try {
+			const parsed = serializer.read(raw);
+			if (ttl && parsed && typeof parsed === "object" && "__ttl" in parsed && "__v" in parsed) {
+				if (Date.now() - parsed.__t > ttl) {
+					adapter?.removeItem(prefixedKey);
+					return;
+				}
+				return parsed.__v;
+			}
+			return parsed;
 		} catch (error) {
 			console.error(`[v0:storage] Failed to parse stored value for key "${prefixedKey}":`, error);
+			return;
+		}
+	}
+	function writeStored(prefixedKey, value) {
+		const wrapped = ttl ? {
+			__ttl: 1,
+			__v: value,
+			__t: Date.now()
+		} : value;
+		try {
+			adapter?.setItem(prefixedKey, serializer.write(wrapped));
+		} catch (error) {
+			console.error(`[v0:storage] Failed to write key "${prefixedKey}":`, error);
 		}
-		const valueRef = ref(initialValue);
+	}
+	function get(key, defaultValue) {
+		const prefixedKey = `${prefix}${key}`;
+		if (cache.has(prefixedKey)) return cache.get(prefixedKey);
+		const valueRef = ref(readStored(prefixedKey) ?? defaultValue);
 		const stop = watch(valueRef, (newValue) => {
 			if (/* @__PURE__ */ isNullOrUndefined(newValue)) adapter?.removeItem(prefixedKey);
-			else try {
-				adapter?.setItem(prefixedKey, serializer.write(newValue));
-			} catch (error) {
-				console.error(`[v0:storage] Failed to write key "${prefixedKey}":`, error);
-			}
+			else writeStored(prefixedKey, newValue);
 		}, { deep: true });
 		watchers.set(prefixedKey, stop);
 		cache.set(prefixedKey, valueRef);
@@ -8745,14 +9130,10 @@ function createStorage(options = {}) {
 		const valueRef = cache.get(e.key);
 		if (!valueRef) return;
 		watchers.get(e.key)?.();
-		valueRef.value = e.newValue == null ? void 0 : serializer.read(e.newValue);
+		valueRef.value = e.newValue == null ? void 0 : readStored(e.key);
 		const stop = watch(valueRef, (newValue) => {
 			if (/* @__PURE__ */ isNullOrUndefined(newValue)) adapter?.removeItem(e.key);
-			else try {
-				adapter?.setItem(e.key, serializer.write(newValue));
-			} catch (error) {
-				console.error(`[v0:storage] Failed to write key "${e.key}":`, error);
-			}
+			else writeStored(e.key, newValue);
 		}, { deep: true });
 		watchers.set(e.key, stop);
 	});
@@ -9918,7 +10299,7 @@ function useClickOutside(target, handler, options = {}) {
 
 //#endregion
 //#region src/components/Dialog/DialogContent.vue
-const _sfc_main$42 = /* @__PURE__ */ defineComponent({
+const _sfc_main$50 = /* @__PURE__ */ defineComponent({
 	name: "DialogContent",
 	__name: "DialogContent",
 	props: {
@@ -10000,11 +10381,11 @@ const _sfc_main$42 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var DialogContent_default = _sfc_main$42;
+var DialogContent_default = _sfc_main$50;
 
 //#endregion
 //#region src/components/Dialog/DialogDescription.vue
-const _sfc_main$41 = /* @__PURE__ */ defineComponent({
+const _sfc_main$49 = /* @__PURE__ */ defineComponent({
 	name: "DialogDescription",
 	__name: "DialogDescription",
 	props: {
@@ -10023,11 +10404,11 @@ const _sfc_main$41 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var DialogDescription_default = _sfc_main$41;
+var DialogDescription_default = _sfc_main$49;
 
 //#endregion
 //#region src/components/Dialog/DialogTitle.vue
-const _sfc_main$40 = /* @__PURE__ */ defineComponent({
+const _sfc_main$48 = /* @__PURE__ */ defineComponent({
 	name: "DialogTitle",
 	__name: "DialogTitle",
 	props: {
@@ -10046,11 +10427,11 @@ const _sfc_main$40 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var DialogTitle_default = _sfc_main$40;
+var DialogTitle_default = _sfc_main$48;
 
 //#endregion
 //#region src/components/Dialog/DialogActivator.vue
-const _sfc_main$39 = /* @__PURE__ */ defineComponent({
+const _sfc_main$47 = /* @__PURE__ */ defineComponent({
 	name: "DialogActivator",
 	__name: "DialogActivator",
 	props: {
@@ -10080,7 +10461,7 @@ const _sfc_main$39 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var DialogActivator_default = _sfc_main$39;
+var DialogActivator_default = _sfc_main$47;
 
 //#endregion
 //#region src/components/Dialog/index.ts
@@ -10125,7 +10506,7 @@ const Dialog = {
 //#endregion
 //#region src/components/ExpansionPanel/ExpansionPanelRoot.vue
 const [useExpansionPanelRoot, provideExpansionPanelRoot] = createContext();
-const _sfc_main$38 = /* @__PURE__ */ defineComponent({
+const _sfc_main$46 = /* @__PURE__ */ defineComponent({
 	name: "ExpansionPanelRoot",
 	__name: "ExpansionPanelRoot",
 	props: /* @__PURE__ */ mergeModels({
@@ -10182,12 +10563,12 @@ const _sfc_main$38 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var ExpansionPanelRoot_default = _sfc_main$38;
+var ExpansionPanelRoot_default = _sfc_main$46;
 
 //#endregion
 //#region src/components/ExpansionPanel/ExpansionPanelItem.vue
 const [useExpansionPanelItem, provideExpansionPanelItem] = createContext({ suffix: "item" });
-const _sfc_main$37 = /* @__PURE__ */ defineComponent({
+const _sfc_main$45 = /* @__PURE__ */ defineComponent({
 	name: "ExpansionPanelItem",
 	__name: "ExpansionPanelItem",
 	props: {
@@ -10231,11 +10612,11 @@ const _sfc_main$37 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var ExpansionPanelItem_default = _sfc_main$37;
+var ExpansionPanelItem_default = _sfc_main$45;
 
 //#endregion
 //#region src/components/ExpansionPanel/ExpansionPanelActivator.vue
-const _sfc_main$36 = /* @__PURE__ */ defineComponent({
+const _sfc_main$44 = /* @__PURE__ */ defineComponent({
 	name: "ExpansionPanelActivator",
 	__name: "ExpansionPanelActivator",
 	props: {
@@ -10281,11 +10662,11 @@ const _sfc_main$36 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var ExpansionPanelActivator_default = _sfc_main$36;
+var ExpansionPanelActivator_default = _sfc_main$44;
 
 //#endregion
 //#region src/components/ExpansionPanel/ExpansionPanelContent.vue
-const _sfc_main$35 = /* @__PURE__ */ defineComponent({
+const _sfc_main$43 = /* @__PURE__ */ defineComponent({
 	name: "ExpansionPanelContent",
 	__name: "ExpansionPanelContent",
 	props: {
@@ -10316,11 +10697,11 @@ const _sfc_main$35 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var ExpansionPanelContent_default = _sfc_main$35;
+var ExpansionPanelContent_default = _sfc_main$43;
 
 //#endregion
 //#region src/components/ExpansionPanel/ExpansionPanelHeader.vue
-const _sfc_main$34 = /* @__PURE__ */ defineComponent({
+const _sfc_main$42 = /* @__PURE__ */ defineComponent({
 	name: "ExpansionPanelHeader",
 	__name: "ExpansionPanelHeader",
 	props: {
@@ -10345,7 +10726,7 @@ const _sfc_main$34 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var ExpansionPanelHeader_default = _sfc_main$34;
+var ExpansionPanelHeader_default = _sfc_main$42;
 
 //#endregion
 //#region src/components/ExpansionPanel/index.ts
@@ -10365,7 +10746,7 @@ const ExpansionPanel = {
 //#endregion
 //#region src/components/Group/GroupRoot.vue
 const [useGroupRoot, provideGroupRoot] = createContext();
-const _sfc_main$33 = /* @__PURE__ */ defineComponent({
+const _sfc_main$41 = /* @__PURE__ */ defineComponent({
 	name: "GroupRoot",
 	__name: "GroupRoot",
 	props: /* @__PURE__ */ mergeModels({
@@ -10415,11 +10796,11 @@ const _sfc_main$33 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var GroupRoot_default = _sfc_main$33;
+var GroupRoot_default = _sfc_main$41;
 
 //#endregion
 //#region src/components/Group/GroupItem.vue
-const _sfc_main$32 = /* @__PURE__ */ defineComponent({
+const _sfc_main$40 = /* @__PURE__ */ defineComponent({
 	name: "GroupItem",
 	__name: "GroupItem",
 	props: {
@@ -10468,7 +10849,7 @@ const _sfc_main$32 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var GroupItem_default = _sfc_main$32;
+var GroupItem_default = _sfc_main$40;
 
 //#endregion
 //#region src/components/Group/index.ts
@@ -10487,7 +10868,7 @@ const Group = {
 const [usePaginationRoot, providePaginationRoot] = createContext();
 const [usePaginationControls, providePaginationControls] = createContext({ suffix: "controls" });
 const [usePaginationItems, providePaginationItems] = createContext({ suffix: "items" });
-const _sfc_main$31 = /* @__PURE__ */ defineComponent({
+const _sfc_main$39 = /* @__PURE__ */ defineComponent({
 	name: "PaginationRoot",
 	__name: "PaginationRoot",
 	props: /* @__PURE__ */ mergeModels({
@@ -10587,11 +10968,11 @@ const _sfc_main$31 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var PaginationRoot_default = _sfc_main$31;
+var PaginationRoot_default = _sfc_main$39;
 
 //#endregion
 //#region src/components/Pagination/PaginationEllipsis.vue
-const _sfc_main$30 = /* @__PURE__ */ defineComponent({
+const _sfc_main$38 = /* @__PURE__ */ defineComponent({
 	name: "PaginationEllipsis",
 	__name: "PaginationEllipsis",
 	props: {
@@ -10632,11 +11013,11 @@ const _sfc_main$30 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var PaginationEllipsis_default = _sfc_main$30;
+var PaginationEllipsis_default = _sfc_main$38;
 
 //#endregion
 //#region src/components/Pagination/PaginationFirst.vue
-const _sfc_main$29 = /* @__PURE__ */ defineComponent({
+const _sfc_main$37 = /* @__PURE__ */ defineComponent({
 	name: "PaginationFirst",
 	__name: "PaginationFirst",
 	props: {
@@ -10691,11 +11072,11 @@ const _sfc_main$29 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var PaginationFirst_default = _sfc_main$29;
+var PaginationFirst_default = _sfc_main$37;
 
 //#endregion
 //#region src/components/Pagination/PaginationItem.vue
-const _sfc_main$28 = /* @__PURE__ */ defineComponent({
+const _sfc_main$36 = /* @__PURE__ */ defineComponent({
 	name: "PaginationItem",
 	__name: "PaginationItem",
 	props: {
@@ -10761,11 +11142,11 @@ const _sfc_main$28 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var PaginationItem_default = _sfc_main$28;
+var PaginationItem_default = _sfc_main$36;
 
 //#endregion
 //#region src/components/Pagination/PaginationLast.vue
-const _sfc_main$27 = /* @__PURE__ */ defineComponent({
+const _sfc_main$35 = /* @__PURE__ */ defineComponent({
 	name: "PaginationLast",
 	__name: "PaginationLast",
 	props: {
@@ -10820,11 +11201,11 @@ const _sfc_main$27 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var PaginationLast_default = _sfc_main$27;
+var PaginationLast_default = _sfc_main$35;
 
 //#endregion
 //#region src/components/Pagination/PaginationNext.vue
-const _sfc_main$26 = /* @__PURE__ */ defineComponent({
+const _sfc_main$34 = /* @__PURE__ */ defineComponent({
 	name: "PaginationNext",
 	__name: "PaginationNext",
 	props: {
@@ -10879,11 +11260,11 @@ const _sfc_main$26 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var PaginationNext_default = _sfc_main$26;
+var PaginationNext_default = _sfc_main$34;
 
 //#endregion
 //#region src/components/Pagination/PaginationPrev.vue
-const _sfc_main$25 = /* @__PURE__ */ defineComponent({
+const _sfc_main$33 = /* @__PURE__ */ defineComponent({
 	name: "PaginationPrev",
 	__name: "PaginationPrev",
 	props: {
@@ -10938,11 +11319,11 @@ const _sfc_main$25 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var PaginationPrev_default = _sfc_main$25;
+var PaginationPrev_default = _sfc_main$33;
 
 //#endregion
 //#region src/components/Pagination/PaginationStatus.vue
-const _sfc_main$24 = /* @__PURE__ */ defineComponent({
+const _sfc_main$32 = /* @__PURE__ */ defineComponent({
 	name: "PaginationStatus",
 	__name: "PaginationStatus",
 	props: {
@@ -10986,7 +11367,7 @@ const _sfc_main$24 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var PaginationStatus_default = _sfc_main$24;
+var PaginationStatus_default = _sfc_main$32;
 
 //#endregion
 //#region src/components/Pagination/index.ts
@@ -11009,7 +11390,7 @@ const Pagination = {
 //#endregion
 //#region src/components/Popover/PopoverRoot.vue
 const [usePopoverContext, providePopoverContext] = createContext("Popover");
-const _sfc_main$23 = /* @__PURE__ */ defineComponent({
+const _sfc_main$31 = /* @__PURE__ */ defineComponent({
 	name: "PopoverRoot",
 	__name: "PopoverRoot",
 	props: /* @__PURE__ */ mergeModels({
@@ -11051,11 +11432,11 @@ const _sfc_main$23 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var PopoverRoot_default = _sfc_main$23;
+var PopoverRoot_default = _sfc_main$31;
 
 //#endregion
 //#region src/components/Popover/PopoverActivator.vue
-const _sfc_main$22 = /* @__PURE__ */ defineComponent({
+const _sfc_main$30 = /* @__PURE__ */ defineComponent({
 	name: "PopoverActivator",
 	__name: "PopoverActivator",
 	props: {
@@ -11087,11 +11468,11 @@ const _sfc_main$22 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var PopoverActivator_default = _sfc_main$22;
+var PopoverActivator_default = _sfc_main$30;
 
 //#endregion
 //#region src/components/Popover/PopoverContent.vue
-const _sfc_main$21 = /* @__PURE__ */ defineComponent({
+const _sfc_main$29 = /* @__PURE__ */ defineComponent({
 	name: "PopoverContent",
 	__name: "PopoverContent",
 	props: {
@@ -11158,7 +11539,7 @@ const _sfc_main$21 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var PopoverContent_default = _sfc_main$21;
+var PopoverContent_default = _sfc_main$29;
 
 //#endregion
 //#region src/components/Popover/index.ts
@@ -11176,7 +11557,7 @@ const Popover = {
 //#endregion
 //#region src/components/Radio/RadioGroup.vue
 const [useRadioGroup, provideRadioGroup] = createContext();
-const _sfc_main$20 = /* @__PURE__ */ defineComponent({
+const _sfc_main$28 = /* @__PURE__ */ defineComponent({
 	name: "RadioGroup",
 	__name: "RadioGroup",
 	props: /* @__PURE__ */ mergeModels({
@@ -11238,12 +11619,12 @@ const _sfc_main$20 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var RadioGroup_default = _sfc_main$20;
+var RadioGroup_default = _sfc_main$28;
 
 //#endregion
 //#region src/components/Radio/RadioRoot.vue
 const [useRadioRoot, provideRadioRoot] = createContext();
-const _sfc_main$19 = /* @__PURE__ */ defineComponent({
+const _sfc_main$27 = /* @__PURE__ */ defineComponent({
 	name: "RadioRoot",
 	inheritAttrs: false,
 	__name: "RadioRoot",
@@ -11368,11 +11749,11 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var RadioRoot_default = _sfc_main$19;
+var RadioRoot_default = _sfc_main$27;
 
 //#endregion
 //#region src/components/Radio/RadioHiddenInput.vue
-const _hoisted_1$1 = [
+const _hoisted_1$2 = [
 	"checked",
 	"disabled",
 	"form",
@@ -11390,7 +11771,7 @@ const visuallyHiddenStyle$1 = {
 	whiteSpace: "nowrap",
 	border: "0"
 };
-const _sfc_main$18 = /* @__PURE__ */ defineComponent({
+const _sfc_main$26 = /* @__PURE__ */ defineComponent({
 	name: "RadioHiddenInput",
 	__name: "RadioHiddenInput",
 	props: {
@@ -11421,15 +11802,15 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
 				tabindex: "-1",
 				type: "radio",
 				value: value.value
-			}, null, 8, _hoisted_1$1);
+			}, null, 8, _hoisted_1$2);
 		};
 	}
 });
-var RadioHiddenInput_default = _sfc_main$18;
+var RadioHiddenInput_default = _sfc_main$26;
 
 //#endregion
 //#region src/components/Radio/RadioIndicator.vue
-const _sfc_main$17 = /* @__PURE__ */ defineComponent({
+const _sfc_main$25 = /* @__PURE__ */ defineComponent({
 	name: "RadioIndicator",
 	__name: "RadioIndicator",
 	props: {
@@ -11459,7 +11840,7 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var RadioIndicator_default = _sfc_main$17;
+var RadioIndicator_default = _sfc_main$25;
 
 //#endregion
 //#region src/components/Radio/index.ts
@@ -11504,7 +11885,7 @@ const Radio = {
 
 //#endregion
 //#region src/components/Scrim/Scrim.vue
-const _sfc_main$16 = /* @__PURE__ */ defineComponent({
+const _sfc_main$24 = /* @__PURE__ */ defineComponent({
 	name: "Scrim",
 	inheritAttrs: false,
 	__name: "Scrim",
@@ -11579,12 +11960,12 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var Scrim_default = _sfc_main$16;
+var Scrim_default = _sfc_main$24;
 
 //#endregion
 //#region src/components/Selection/SelectionRoot.vue
 const [useSelectionRoot, provideSelectionRoot] = createContext();
-const _sfc_main$15 = /* @__PURE__ */ defineComponent({
+const _sfc_main$23 = /* @__PURE__ */ defineComponent({
 	name: "SelectionRoot",
 	__name: "SelectionRoot",
 	props: /* @__PURE__ */ mergeModels({
@@ -11634,11 +12015,11 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var SelectionRoot_default = _sfc_main$15;
+var SelectionRoot_default = _sfc_main$23;
 
 //#endregion
 //#region src/components/Selection/SelectionItem.vue
-const _sfc_main$14 = /* @__PURE__ */ defineComponent({
+const _sfc_main$22 = /* @__PURE__ */ defineComponent({
 	name: "SelectionItem",
 	__name: "SelectionItem",
 	props: {
@@ -11680,7 +12061,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var SelectionItem_default = _sfc_main$14;
+var SelectionItem_default = _sfc_main$22;
 
 //#endregion
 //#region src/components/Selection/index.ts
@@ -11694,6 +12075,997 @@ const Selection = {
 	Item: SelectionItem_default
 };
 
+//#endregion
+//#region src/components/Slider/SliderRoot.vue
+const [useSliderRoot, provideSliderRoot] = createContext();
+const _sfc_main$21 = /* @__PURE__ */ defineComponent({
+	name: "SliderRoot",
+	inheritAttrs: false,
+	__name: "SliderRoot",
+	props: /* @__PURE__ */ mergeModels({
+		id: { default: () => useId$1() },
+		min: { default: 0 },
+		max: { default: 100 },
+		step: { default: 1 },
+		disabled: { default: false },
+		readonly: { default: false },
+		orientation: { default: "horizontal" },
+		inverted: {
+			type: Boolean,
+			default: false
+		},
+		minStepsBetweenThumbs: { default: 0 },
+		crossover: {
+			type: Boolean,
+			default: false
+		},
+		name: {},
+		form: {},
+		namespace: { default: "v0:slider:root" },
+		as: { default: "div" },
+		renderless: { type: Boolean }
+	}, {
+		"modelValue": { default: () => [] },
+		"modelModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels([
+		"update:model-value",
+		"start",
+		"end"
+	], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const attrs = useAttrs();
+		const emit = __emit;
+		const model = useModel(__props, "modelValue");
+		const scalar = !/* @__PURE__ */ isArray(model.value) && !/* @__PURE__ */ isUndefined(model.value);
+		const internal = computed({
+			get: () => /* @__PURE__ */ isArray(model.value) ? model.value : [model.value],
+			set: (arr) => {
+				model.value = scalar ? arr[0] ?? 0 : arr;
+			}
+		});
+		const slider = createSlider({
+			min: __props.min,
+			max: __props.max,
+			step: __props.step,
+			disabled: __props.disabled,
+			readonly: __props.readonly,
+			orientation: __props.orientation,
+			inverted: __props.inverted,
+			minStepsBetweenThumbs: __props.minStepsBetweenThumbs,
+			crossover: __props.crossover
+		});
+		useProxyModel(slider, internal, { multiple: true });
+		const dragging = shallowRef(null);
+		const track = shallowRef(null);
+		const dragOffset = shallowRef(0);
+		function getPercent(e) {
+			const el = track.value;
+			if (!el) return 0;
+			const rect = el.getBoundingClientRect();
+			return toValue(slider.orientation) === "vertical" ? (rect.bottom - e.clientY - dragOffset.value) / rect.height * 100 : (e.clientX - rect.left - dragOffset.value) / rect.width * 100;
+		}
+		useToggleScope(() => !/* @__PURE__ */ isNull(dragging.value), () => {
+			if (IN_BROWSER) document.documentElement.style.touchAction = "none";
+			useDocumentEventListener("pointermove", (e) => {
+				if (/* @__PURE__ */ isNull(dragging.value)) return;
+				const percent = getPercent(e);
+				slider.set(dragging.value, slider.fromPercent(percent));
+			});
+			useDocumentEventListener("pointerup", () => {
+				if (IN_BROWSER) document.documentElement.style.touchAction = "";
+				const values = [...slider.values.value];
+				emit("end", scalar ? values[0] ?? 0 : values);
+				dragging.value = null;
+				dragOffset.value = 0;
+			});
+		});
+		function onDrag(index, event, thumbEl) {
+			if (toValue(__props.disabled)) return;
+			if (toValue(__props.readonly)) return;
+			if (event.button !== 0) return;
+			event.preventDefault();
+			if (thumbEl) {
+				const rect = thumbEl.getBoundingClientRect();
+				dragOffset.value = toValue(slider.orientation) === "vertical" ? event.clientY - (rect.top + rect.height / 2) : event.clientX - (rect.left + rect.width / 2);
+			} else dragOffset.value = 0;
+			dragging.value = index;
+			const values = [...slider.values.value];
+			emit("start", scalar ? values[0] ?? 0 : values);
+		}
+		const context = {
+			...slider,
+			id: __props.id,
+			name: __props.name,
+			form: __props.form,
+			dragging,
+			track,
+			onDrag
+		};
+		provideSliderRoot(__props.namespace, context);
+		const isDisabled = toRef(() => toValue(__props.disabled));
+		const isReadonly = toRef(() => toValue(__props.readonly));
+		const slotProps = toRef(() => ({
+			id: __props.id,
+			values: slider.values.value,
+			min: __props.min,
+			max: __props.max,
+			isDisabled: isDisabled.value,
+			isReadonly: isReadonly.value,
+			orientation: toValue(slider.orientation),
+			attrs: {
+				"data-disabled": isDisabled.value ? true : void 0,
+				"data-readonly": isReadonly.value ? true : void 0,
+				"data-orientation": toValue(slider.orientation)
+			}
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(Atom_default), mergeProps({
+				...unref(attrs),
+				...slotProps.value.attrs
+			}, {
+				as: __props.as,
+				renderless: __props.renderless
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
+				_: 3
+			}, 16, ["as", "renderless"]), __props.name ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(slider).values.value, (_, index) => {
+				return openBlock(), createBlock(SliderHiddenInput_default, {
+					key: index,
+					index
+				}, null, 8, ["index"]);
+			}), 128)) : createCommentVNode("v-if", true)], 64);
+		};
+	}
+});
+var SliderRoot_default = _sfc_main$21;
+
+//#endregion
+//#region src/components/Slider/SliderHiddenInput.vue
+const _hoisted_1$1 = [
+	"disabled",
+	"form",
+	"name",
+	"value"
+];
+const _sfc_main$20 = /* @__PURE__ */ defineComponent({
+	name: "SliderHiddenInput",
+	__name: "SliderHiddenInput",
+	props: {
+		namespace: { default: "v0:slider:root" },
+		index: { default: 0 }
+	},
+	setup(__props) {
+		const root = useSliderRoot(__props.namespace);
+		const value = toRef(() => root.values.value[__props.index] ?? root.min);
+		const isDisabled = toRef(() => toValue(root.disabled));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("input", {
+				disabled: isDisabled.value,
+				form: unref(root).form,
+				name: unref(root).name,
+				tabindex: "-1",
+				type: "hidden",
+				value: value.value
+			}, null, 8, _hoisted_1$1);
+		};
+	}
+});
+var SliderHiddenInput_default = _sfc_main$20;
+
+//#endregion
+//#region src/components/Slider/SliderRange.vue
+const _sfc_main$19 = /* @__PURE__ */ defineComponent({
+	name: "SliderRange",
+	inheritAttrs: false,
+	__name: "SliderRange",
+	props: {
+		namespace: { default: "v0:slider:root" },
+		as: { default: "span" },
+		renderless: { type: Boolean }
+	},
+	setup(__props) {
+		const attrs = useAttrs();
+		const root = useSliderRoot(__props.namespace);
+		const rawStart = toRef(() => {
+			const values = root.values.value;
+			if (values.length === 0) return 0;
+			if (values.length === 1) return root.fromValue(root.min);
+			return root.fromValue(Math.min(...values));
+		});
+		const rawEnd = toRef(() => {
+			const values = root.values.value;
+			if (values.length === 0) return 0;
+			if (values.length === 1) return root.fromValue(values[0]);
+			return root.fromValue(Math.max(...values));
+		});
+		const start = toRef(() => Math.min(rawStart.value, rawEnd.value));
+		const end = toRef(() => Math.max(rawStart.value, rawEnd.value));
+		const isVertical = toRef(() => toValue(root.orientation) === "vertical");
+		const slotProps = toRef(() => ({
+			start: start.value,
+			end: end.value,
+			attrs: {
+				"data-disabled": toValue(root.disabled) ? true : void 0,
+				"data-readonly": toValue(root.readonly) ? true : void 0,
+				"data-orientation": toValue(root.orientation),
+				"style": {
+					[isVertical.value ? "bottom" : "left"]: `${start.value}%`,
+					[isVertical.value ? "height" : "width"]: `${end.value - start.value}%`
+				}
+			}
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Atom_default), mergeProps({
+				...unref(attrs),
+				...slotProps.value.attrs
+			}, {
+				as: __props.as,
+				renderless: __props.renderless,
+				style: [unref(attrs).style, slotProps.value.attrs.style]
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
+				_: 3
+			}, 16, [
+				"as",
+				"renderless",
+				"style"
+			]);
+		};
+	}
+});
+var SliderRange_default = _sfc_main$19;
+
+//#endregion
+//#region src/components/Slider/SliderThumb.vue
+const _sfc_main$18 = /* @__PURE__ */ defineComponent({
+	name: "SliderThumb",
+	inheritAttrs: false,
+	__name: "SliderThumb",
+	props: {
+		namespace: { default: "v0:slider:root" },
+		ariaLabel: {},
+		ariaLabelledby: {},
+		ariaValuetext: {},
+		as: { default: "span" },
+		renderless: { type: Boolean }
+	},
+	setup(__props) {
+		const attrs = useAttrs();
+		const root = useSliderRoot(__props.namespace);
+		const thumbRef = useTemplateRef("thumb");
+		const ticket = root.register();
+		onUnmounted(() => {
+			root.unregister(ticket.id);
+		});
+		const index = toRef(() => ticket.index);
+		const value = toRef(() => toValue(ticket.value));
+		const pct = toRef(() => root.fromValue(value.value));
+		const isDragging = toRef(() => root.dragging.value === index.value);
+		const isDisabled = toRef(() => toValue(root.disabled));
+		const isReadonly = toRef(() => toValue(root.readonly));
+		const isVertical = toRef(() => toValue(root.orientation) === "vertical");
+		const valueMin = toRef(() => {
+			if (root.crossover) return root.min;
+			const prev = root.values.value[index.value - 1];
+			return /* @__PURE__ */ isUndefined(prev) ? root.min : prev;
+		});
+		const valueMax = toRef(() => {
+			if (root.crossover) return root.max;
+			const next = root.values.value[index.value + 1];
+			return /* @__PURE__ */ isUndefined(next) ? root.max : next;
+		});
+		function onPointerdown(e) {
+			root.onDrag(index.value, e, thumbRef.value?.element ?? void 0);
+		}
+		function onKeydown(e) {
+			if (isDisabled.value || isReadonly.value) return;
+			const isInverted = toValue(root.inverted);
+			const actions = {
+				ArrowRight: () => isInverted ? root.down(index.value) : root.up(index.value),
+				ArrowUp: () => root.up(index.value),
+				ArrowLeft: () => isInverted ? root.up(index.value) : root.down(index.value),
+				ArrowDown: () => root.down(index.value),
+				PageUp: () => root.up(index.value, 10),
+				PageDown: () => root.down(index.value, 10),
+				Home: () => root.floor(index.value),
+				End: () => root.ceil(index.value)
+			};
+			if (e.shiftKey && e.key.startsWith("Arrow")) {
+				e.preventDefault();
+				const base = e.key === "ArrowRight" || e.key === "ArrowUp" ? "up" : "down";
+				root[(e.key === "ArrowRight" || e.key === "ArrowLeft") && isInverted ? base === "up" ? "down" : "up" : base](index.value, 10);
+				return;
+			}
+			const action = actions[e.key];
+			if (!action) return;
+			e.preventDefault();
+			action();
+		}
+		const dataState = toRef(() => isDragging.value ? "dragging" : "idle");
+		const slotProps = toRef(() => ({
+			index: index.value,
+			value: value.value,
+			percent: pct.value,
+			isDragging: isDragging.value,
+			attrs: {
+				"role": "slider",
+				"tabindex": isDisabled.value ? -1 : 0,
+				"aria-valuenow": value.value,
+				"aria-valuemin": valueMin.value,
+				"aria-valuemax": valueMax.value,
+				"aria-valuetext": __props.ariaValuetext || void 0,
+				"aria-orientation": toValue(root.orientation),
+				"aria-disabled": isDisabled.value ? true : void 0,
+				"aria-readonly": isReadonly.value ? true : void 0,
+				"aria-label": __props.ariaLabel || void 0,
+				"aria-labelledby": __props.ariaLabelledby || void 0,
+				"data-state": dataState.value,
+				"data-disabled": isDisabled.value ? true : void 0,
+				"data-readonly": isReadonly.value ? true : void 0,
+				"style": {
+					[isVertical.value ? "bottom" : "left"]: `${pct.value}%`,
+					"touch-action": "none"
+				},
+				"onKeydown": onKeydown,
+				"onPointerdown": onPointerdown
+			}
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Atom_default), mergeProps({ ref: "thumb" }, {
+				...unref(attrs),
+				...slotProps.value.attrs
+			}, {
+				as: __props.as,
+				renderless: __props.renderless,
+				style: [unref(attrs).style, slotProps.value.attrs.style]
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
+				_: 3
+			}, 16, [
+				"as",
+				"renderless",
+				"style"
+			]);
+		};
+	}
+});
+var SliderThumb_default = _sfc_main$18;
+
+//#endregion
+//#region src/components/Slider/SliderTrack.vue
+const _sfc_main$17 = /* @__PURE__ */ defineComponent({
+	name: "SliderTrack",
+	inheritAttrs: false,
+	__name: "SliderTrack",
+	props: {
+		namespace: { default: "v0:slider:root" },
+		as: { default: "div" },
+		renderless: { type: Boolean }
+	},
+	setup(__props) {
+		const attrs = useAttrs();
+		const root = useSliderRoot(__props.namespace);
+		const trackRef = useTemplateRef("track");
+		watchEffect(() => {
+			root.track.value = trackRef.value?.element ?? null;
+		});
+		function nearest(value) {
+			let closest = 0;
+			let distance = Infinity;
+			for (let index = 0; index < root.values.value.length; index++) {
+				const d = Math.abs(root.values.value[index] - value);
+				if (d < distance) {
+					distance = d;
+					closest = index;
+				}
+			}
+			return closest;
+		}
+		function onPointerdown(e) {
+			if (toValue(root.disabled)) return;
+			if (toValue(root.readonly)) return;
+			if (e.button !== 0) return;
+			const el = trackRef.value?.element;
+			if (!el) return;
+			const rect = el.getBoundingClientRect();
+			const percent = toValue(root.orientation) === "vertical" ? (rect.bottom - e.clientY) / rect.height * 100 : (e.clientX - rect.left) / rect.width * 100;
+			const value = root.fromPercent(percent);
+			const index = nearest(value);
+			root.set(index, value);
+			root.onDrag(index, e);
+		}
+		const slotProps = toRef(() => ({ attrs: {
+			"data-disabled": toValue(root.disabled) ? true : void 0,
+			"data-readonly": toValue(root.readonly) ? true : void 0,
+			"data-orientation": toValue(root.orientation),
+			"style": { "touch-action": "none" },
+			"onPointerdown": onPointerdown
+		} }));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Atom_default), mergeProps({ ref: "track" }, {
+				...unref(attrs),
+				...slotProps.value.attrs
+			}, {
+				as: __props.as,
+				renderless: __props.renderless,
+				style: [unref(attrs).style, slotProps.value.attrs.style]
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
+				_: 3
+			}, 16, [
+				"as",
+				"renderless",
+				"style"
+			]);
+		};
+	}
+});
+var SliderTrack_default = _sfc_main$17;
+
+//#endregion
+//#region src/components/Slider/index.ts
+/**
+* Slider component with sub-components for range input controls.
+*
+* @see https://0.vuetifyjs.com/components/slider
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { Slider } from '@vuetify/v0'
+*   import { ref } from 'vue'
+*
+*   const value = ref([50])
+* <\/script>
+*
+* <template>
+*   <Slider.Root v-model="value" :min="0" :max="100">
+*     <Slider.Track>
+*       <Slider.Range />
+*     </Slider.Track>
+*     <Slider.Thumb />
+*   </Slider.Root>
+* </template>
+* ```
+*/
+const Slider = {
+	Root: SliderRoot_default,
+	Track: SliderTrack_default,
+	Range: SliderRange_default,
+	Thumb: SliderThumb_default,
+	HiddenInput: SliderHiddenInput_default
+};
+
+//#endregion
+//#region src/components/Splitter/SplitterRoot.vue
+const [useSplitterRoot, provideSplitterRoot] = createContext("v0:splitter");
+const _sfc_main$16 = /* @__PURE__ */ defineComponent({
+	name: "SplitterRoot",
+	inheritAttrs: false,
+	__name: "SplitterRoot",
+	props: {
+		orientation: { default: "horizontal" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		as: { default: "div" },
+		renderless: { type: Boolean }
+	},
+	emits: ["layout"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const attrs = useAttrs();
+		const emit = __emit;
+		const rootAtom = useTemplateRef("root");
+		const rootEl = toRef(() => rootAtom.value?.element ?? null);
+		const draggingHandle = shallowRef(null);
+		const dragging = toRef(() => !/* @__PURE__ */ isNull(draggingHandle.value));
+		const panels = createSelection({
+			multiple: true,
+			enroll: true,
+			reactive: true
+		});
+		const handles = createRegistry();
+		watch(() => panels.collection.size, (size, prev) => {
+			const values = panels.values();
+			if (values.length === 0) return;
+			const total = values.reduce((sum, t) => sum + t.size, 0);
+			if (total === 0 || total === 100) return;
+			distribute(!/* @__PURE__ */ isUndefined(prev) && size > prev ? values.map((t) => t.defaultSize) : values.map((t) => t.size));
+		}, { flush: "post" });
+		function panel(index) {
+			const id = panels.lookup(index);
+			return /* @__PURE__ */ isNullOrUndefined(id) ? void 0 : panels.get(id);
+		}
+		function effectiveMin(ticket) {
+			return ticket.collapsible && !toValue(ticket.isSelected) ? ticket.collapsedSize : ticket.minSize;
+		}
+		function resize(index, delta, options) {
+			const before = panel(index);
+			const after = panel(index + 1);
+			if (!before || !after) return;
+			const total = before.size + after.size;
+			const min1 = effectiveMin(before);
+			const min2 = effectiveMin(after);
+			const lower = Math.max(min1, total - after.maxSize);
+			const upper = Math.min(before.maxSize, total - min2);
+			const size = /* @__PURE__ */ clamp(before.size + delta, lower, upper);
+			before.size = size;
+			after.size = total - size;
+			for (const p of [before, after]) {
+				if (!p.collapsible) continue;
+				const collapsed = !toValue(p.isSelected);
+				if (!collapsed && p.size <= p.collapsedSize) p.unselect();
+				else if (collapsed && p.size > p.collapsedSize) p.select();
+			}
+			if (options?.emit) emitLayout();
+		}
+		function collapse(index, neighborIndex) {
+			const ticket = panel(index);
+			if (!ticket?.collapsible || !toValue(ticket.isSelected)) return;
+			const neighbor = panel(neighborIndex ?? (index > 0 ? index - 1 : index + 1));
+			if (!neighbor) return;
+			const diff = ticket.size - ticket.collapsedSize;
+			const absorbed = Math.min(diff, neighbor.maxSize - neighbor.size);
+			neighbor.size += absorbed;
+			ticket.size = ticket.collapsedSize;
+			let remaining = diff - absorbed;
+			if (remaining > 0) for (const p of panels.values()) {
+				if (p.id === ticket.id || p.id === neighbor.id || remaining <= 0) continue;
+				const room = p.maxSize - p.size;
+				const take = Math.min(remaining, room);
+				p.size += take;
+				remaining -= take;
+			}
+			if (remaining > 0) ticket.size += remaining;
+			if (ticket.size <= ticket.collapsedSize) ticket.unselect();
+			emitLayout();
+		}
+		function expand(index, neighborIndex) {
+			const ticket = panel(index);
+			if (!ticket?.collapsible || toValue(ticket.isSelected)) return;
+			const neighbor = panel(neighborIndex ?? (index > 0 ? index - 1 : index + 1));
+			if (!neighbor) return;
+			const diff = Math.min(ticket.defaultSize, ticket.maxSize) - ticket.collapsedSize;
+			const available = neighbor.size - neighbor.minSize;
+			const take = Math.min(diff, available);
+			if (ticket.collapsedSize + take < ticket.minSize) return;
+			neighbor.size -= take;
+			ticket.size = ticket.collapsedSize + take;
+			ticket.select();
+			emitLayout();
+		}
+		function distribute(incoming) {
+			const values = panels.values();
+			if (incoming.length !== values.length) return;
+			for (const [index, ticket] of values.entries()) {
+				const value = incoming[index];
+				ticket.size = /* @__PURE__ */ clamp(value, ticket.collapsible && value <= ticket.collapsedSize ? ticket.collapsedSize : ticket.minSize, ticket.maxSize);
+			}
+			let remainder = 100 - values.reduce((sum, t) => sum + t.size, 0);
+			for (const ticket of values) {
+				if (remainder === 0) break;
+				const min = ticket.collapsible && ticket.size <= ticket.collapsedSize ? ticket.collapsedSize : ticket.minSize;
+				const room = remainder > 0 ? ticket.maxSize - ticket.size : ticket.size - min;
+				const adjust = remainder > 0 ? Math.min(remainder, room) : Math.max(remainder, -room);
+				ticket.size += adjust;
+				remainder -= adjust;
+			}
+			for (const ticket of values) {
+				if (!ticket.collapsible) continue;
+				const collapsed = !toValue(ticket.isSelected);
+				if (!collapsed && ticket.size <= ticket.collapsedSize) ticket.unselect();
+				else if (collapsed && ticket.size > ticket.collapsedSize) ticket.select();
+			}
+			emit("layout", values.map((t) => t.size));
+		}
+		function onStartDrag(index) {
+			draggingHandle.value = index;
+		}
+		function onEndDrag() {
+			draggingHandle.value = null;
+			emitLayout();
+		}
+		function emitLayout() {
+			emit("layout", panels.values().map((t) => t.size));
+		}
+		provideSplitterRoot({
+			orientation: toRef(() => __props.orientation),
+			disabled: toRef(() => __props.disabled),
+			panels,
+			handles,
+			dragging,
+			draggingHandle,
+			rootEl,
+			panel,
+			resize,
+			onStartDrag,
+			onEndDrag,
+			collapse,
+			expand,
+			distribute
+		});
+		__expose({ distribute });
+		const slotProps = toRef(() => ({
+			orientation: __props.orientation,
+			isDisabled: __props.disabled,
+			sizes: panels.values().map((t) => t.size),
+			isDragging: dragging.value,
+			distribute,
+			attrs: {
+				"data-orientation": __props.orientation,
+				"data-dragging": dragging.value || void 0
+			}
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Atom_default), mergeProps({ ref: "root" }, {
+				...unref(attrs),
+				...slotProps.value.attrs
+			}, {
+				as: __props.as,
+				renderless: __props.renderless,
+				style: {
+					display: "flex",
+					flexDirection: __props.orientation === "horizontal" ? "row" : "column"
+				}
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
+				_: 3
+			}, 16, [
+				"as",
+				"renderless",
+				"style"
+			]);
+		};
+	}
+});
+var SplitterRoot_default = _sfc_main$16;
+
+//#endregion
+//#region src/components/Splitter/SplitterPanel.vue
+const _sfc_main$15 = /* @__PURE__ */ defineComponent({
+	name: "SplitterPanel",
+	inheritAttrs: false,
+	__name: "SplitterPanel",
+	props: /* @__PURE__ */ mergeModels({
+		defaultSize: {},
+		minSize: { default: 0 },
+		maxSize: { default: 100 },
+		collapsible: {
+			type: Boolean,
+			default: false
+		},
+		collapsedSize: { default: 0 },
+		as: { default: "div" },
+		renderless: { type: Boolean }
+	}, {
+		"collapsed": {
+			type: Boolean,
+			default: void 0
+		},
+		"collapsedModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels(["update:collapsed", "resize"], ["update:collapsed"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const attrs = useAttrs();
+		const collapsed = useModel(__props, "collapsed");
+		const emit = __emit;
+		const splitter = useSplitterRoot();
+		const panelId = /* @__PURE__ */ useId();
+		const ticket = splitter.panels.register({
+			id: panelId,
+			size: __props.defaultSize,
+			minSize: __props.minSize,
+			maxSize: __props.maxSize,
+			collapsible: __props.collapsible,
+			collapsedSize: __props.collapsedSize,
+			defaultSize: __props.defaultSize
+		});
+		watchEffect(() => {
+			ticket.minSize = __props.minSize;
+			ticket.maxSize = __props.maxSize;
+			ticket.collapsible = __props.collapsible;
+			ticket.collapsedSize = __props.collapsedSize;
+			ticket.defaultSize = __props.defaultSize;
+		});
+		onUnmounted(() => {
+			splitter.panels.unregister(ticket.id);
+		});
+		const size = toRef(() => ticket.size);
+		const isCollapsed = toRef(() => __props.collapsible && !toValue(ticket.isSelected));
+		function collapse() {
+			splitter.collapse(ticket.index);
+		}
+		function expand() {
+			splitter.expand(ticket.index);
+		}
+		__expose({
+			collapse,
+			expand,
+			size,
+			isCollapsed
+		});
+		watch(collapsed, (val) => {
+			if (val === void 0) return;
+			if (val && !isCollapsed.value) collapse();
+			else if (!val && isCollapsed.value) expand();
+		}, {
+			immediate: true,
+			flush: "post"
+		});
+		watch(isCollapsed, (val) => {
+			if (collapsed.value === void 0) return;
+			collapsed.value = val;
+		});
+		watch(size, (val) => emit("resize", val));
+		const slotProps = toRef(() => ({
+			size: size.value,
+			isCollapsed: isCollapsed.value,
+			collapse,
+			expand,
+			attrs: {
+				"id": panelId,
+				"data-orientation": splitter.orientation.value,
+				"data-panel-index": ticket.index,
+				"data-collapsed": isCollapsed.value || void 0
+			}
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Atom_default), mergeProps({
+				...unref(attrs),
+				...slotProps.value.attrs
+			}, {
+				as: __props.as,
+				renderless: __props.renderless,
+				style: {
+					flexGrow: 0,
+					flexShrink: 0,
+					flexBasis: `${size.value}%`,
+					overflow: "hidden"
+				}
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
+				_: 3
+			}, 16, [
+				"as",
+				"renderless",
+				"style"
+			]);
+		};
+	}
+});
+var SplitterPanel_default = _sfc_main$15;
+
+//#endregion
+//#region src/components/Splitter/SplitterHandle.vue
+const _sfc_main$14 = /* @__PURE__ */ defineComponent({
+	name: "SplitterHandle",
+	inheritAttrs: false,
+	__name: "SplitterHandle",
+	props: {
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		label: {},
+		as: { default: "div" },
+		renderless: { type: Boolean }
+	},
+	setup(__props) {
+		const attrs = useAttrs();
+		const ARROW_STEP = 1;
+		const PAGE_STEP = 10;
+		const splitter = useSplitterRoot();
+		const ticket = splitter.handles.register();
+		onUnmounted(() => {
+			splitter.handles.unregister(ticket.id);
+		});
+		const hovering = shallowRef(false);
+		const startPosition = shallowRef(0);
+		let rafId = 0;
+		let latestPos = 0;
+		const isDisabled = toRef(() => __props.disabled || splitter.disabled.value);
+		const isHorizontal = toRef(() => splitter.orientation.value === "horizontal");
+		const state = toRef(() => {
+			if (splitter.draggingHandle.value === ticket.index) return "drag";
+			if (hovering.value) return "hover";
+			return "inactive";
+		});
+		const valuenow = toRef(() => Math.round(splitter.panel(ticket.index)?.size ?? 0));
+		const valuemin = toRef(() => {
+			const p = splitter.panel(ticket.index);
+			if (!p) return 0;
+			return p.collapsible ? p.collapsedSize : p.minSize;
+		});
+		const valuemax = toRef(() => {
+			const p = splitter.panel(ticket.index);
+			const adjacent = splitter.panel(ticket.index + 1);
+			if (!p || !adjacent) return 100;
+			const adjMin = adjacent.collapsible ? adjacent.collapsedSize : adjacent.minSize;
+			return Math.min(p.maxSize, p.size + adjacent.size - adjMin);
+		});
+		function onPointerDown(e) {
+			if (isDisabled.value) return;
+			e.currentTarget.setPointerCapture(e.pointerId);
+			startPosition.value = isHorizontal.value ? e.clientX : e.clientY;
+			if (IN_BROWSER) {
+				document.documentElement.style.userSelect = "none";
+				document.documentElement.style.touchAction = "none";
+			}
+			splitter.onStartDrag(ticket.index);
+		}
+		useToggleScope(() => splitter.draggingHandle.value === ticket.index, () => {
+			useDocumentEventListener("pointermove", (e) => {
+				latestPos = isHorizontal.value ? e.clientX : e.clientY;
+				if (rafId) return;
+				rafId = requestAnimationFrame(() => {
+					const root = splitter.rootEl.value;
+					if (!root) return;
+					const rootSize = isHorizontal.value ? root.offsetWidth : root.offsetHeight;
+					if (!rootSize) return;
+					const delta = (latestPos - startPosition.value) / rootSize * 100;
+					startPosition.value = latestPos;
+					splitter.resize(ticket.index, delta);
+					rafId = 0;
+				});
+			});
+			useDocumentEventListener("pointerup", () => {
+				if (rafId) cancelAnimationFrame(rafId);
+				rafId = 0;
+				if (IN_BROWSER) {
+					document.documentElement.style.userSelect = "";
+					document.documentElement.style.touchAction = "";
+				}
+				splitter.onEndDrag();
+			});
+			onScopeDispose(() => {
+				if (rafId) cancelAnimationFrame(rafId);
+				rafId = 0;
+				splitter.onEndDrag();
+				if (IN_BROWSER) {
+					document.documentElement.style.userSelect = "";
+					document.documentElement.style.touchAction = "";
+				}
+			});
+		});
+		function onKeydown(e) {
+			if (isDisabled.value) return;
+			const forward = isHorizontal.value ? "ArrowRight" : "ArrowDown";
+			const backward = isHorizontal.value ? "ArrowLeft" : "ArrowUp";
+			switch (e.key) {
+				case forward:
+					e.preventDefault();
+					splitter.resize(ticket.index, ARROW_STEP, { emit: true });
+					break;
+				case backward:
+					e.preventDefault();
+					splitter.resize(ticket.index, -ARROW_STEP, { emit: true });
+					break;
+				case "PageDown":
+					e.preventDefault();
+					splitter.resize(ticket.index, PAGE_STEP, { emit: true });
+					break;
+				case "PageUp":
+					e.preventDefault();
+					splitter.resize(ticket.index, -PAGE_STEP, { emit: true });
+					break;
+				case "Home": {
+					e.preventDefault();
+					const p = splitter.panel(ticket.index);
+					if (p?.collapsible) splitter.collapse(ticket.index, ticket.index + 1);
+					else {
+						const current = p?.size ?? 0;
+						splitter.resize(ticket.index, valuemin.value - current, { emit: true });
+					}
+					break;
+				}
+				case "End": {
+					e.preventDefault();
+					const p = splitter.panel(ticket.index);
+					if (p?.collapsible && !toValue(p.isSelected)) splitter.expand(ticket.index, ticket.index + 1);
+					else {
+						const current = p?.size ?? 0;
+						splitter.resize(ticket.index, valuemax.value - current, { emit: true });
+					}
+					break;
+				}
+				case "Enter": {
+					e.preventDefault();
+					const p = splitter.panel(ticket.index);
+					if (!p?.collapsible) break;
+					if (toValue(p.isSelected)) splitter.collapse(ticket.index, ticket.index + 1);
+					else splitter.expand(ticket.index, ticket.index + 1);
+					break;
+				}
+			}
+		}
+		function onPointerEnter() {
+			hovering.value = true;
+		}
+		function onPointerLeave() {
+			hovering.value = false;
+		}
+		const ariaOrientation = toRef(() => splitter.orientation.value === "horizontal" ? "vertical" : "horizontal");
+		const ariaControls = toRef(() => {
+			const p = splitter.panel(ticket.index);
+			return /* @__PURE__ */ isNullOrUndefined(p) ? void 0 : String(p.id);
+		});
+		const slotProps = toRef(() => ({
+			isDragging: splitter.draggingHandle.value === ticket.index,
+			isDisabled: isDisabled.value,
+			state: state.value,
+			attrs: {
+				"role": "separator",
+				"tabindex": isDisabled.value ? -1 : 0,
+				"aria-valuenow": valuenow.value,
+				"aria-valuemin": valuemin.value,
+				"aria-valuemax": valuemax.value,
+				"aria-orientation": ariaOrientation.value,
+				"aria-controls": ariaControls.value,
+				"aria-label": __props.label || void 0,
+				"aria-disabled": isDisabled.value || void 0,
+				"data-state": state.value,
+				"data-orientation": splitter.orientation.value,
+				"data-disabled": isDisabled.value || void 0,
+				"style": { "touch-action": "none" },
+				"onPointerdown": onPointerDown,
+				"onPointerenter": onPointerEnter,
+				"onPointerleave": onPointerLeave,
+				"onKeydown": onKeydown
+			}
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Atom_default), mergeProps({
+				...unref(attrs),
+				...slotProps.value.attrs
+			}, {
+				as: __props.as,
+				renderless: __props.renderless,
+				style: { flexShrink: 0 }
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
+				_: 3
+			}, 16, ["as", "renderless"]);
+		};
+	}
+});
+var SplitterHandle_default = _sfc_main$14;
+
+//#endregion
+//#region src/components/Splitter/index.ts
+/**
+* Splitter component with sub-components for building resizable panel layouts.
+*
+* @see https://0.vuetifyjs.com/components/splitter
+*
+* @example
+* ```vue
+* <script lang="ts" setup>
+*   import { Splitter } from '@vuetify/v0'
+* <\/script>
+*
+* <template>
+*   <Splitter.Root orientation="horizontal">
+*     <Splitter.Panel :default-size="60" :min-size="20">
+*       Left content
+*     </Splitter.Panel>
+*
+*     <Splitter.Handle />
+*
+*     <Splitter.Panel :default-size="40" :min-size="20">
+*       Right content
+*     </Splitter.Panel>
+*   </Splitter.Root>
+* </template>
+* ```
+*/
+const Splitter = {
+	Root: SplitterRoot_default,
+	Panel: SplitterPanel_default,
+	Handle: SplitterHandle_default
+};
+
 //#endregion
 //#region src/components/Switch/SwitchGroup.vue
 const [useSwitchGroup, provideSwitchGroup] = createContext();
@@ -12701,4 +14073,4 @@ const Tabs = {
 };
 
 //#endregion
-export { Atom_default as Atom, Avatar, AvatarFallback_default as AvatarFallback, AvatarImage_default as AvatarImage, AvatarRoot_default as AvatarRoot, Breadcrumbs, BreadcrumbsDivider_default as BreadcrumbsDivider, BreadcrumbsEllipsis_default as BreadcrumbsEllipsis, BreadcrumbsItem_default as BreadcrumbsItem, BreadcrumbsLink_default as BreadcrumbsLink, BreadcrumbsList_default as BreadcrumbsList, BreadcrumbsPage_default as BreadcrumbsPage, BreadcrumbsRoot_default as BreadcrumbsRoot, COMMON_ELEMENTS, Checkbox, CheckboxGroup_default as CheckboxGroup, CheckboxHiddenInput_default as CheckboxHiddenInput, CheckboxIndicator_default as CheckboxIndicator, CheckboxRoot_default as CheckboxRoot, CheckboxSelectAll_default as CheckboxSelectAll, ClientAdapter, ConsolaLoggerAdapter, DataTableAdapter, Dialog, DialogActivator_default as DialogActivator, DialogClose_default as DialogClose, DialogContent_default as DialogContent, DialogDescription_default as DialogDescription, DialogRoot_default as DialogRoot, DialogTitle_default as DialogTitle, ExpansionPanel, ExpansionPanelActivator_default as ExpansionPanelActivator, ExpansionPanelContent_default as ExpansionPanelContent, ExpansionPanelHeader_default as ExpansionPanelHeader, ExpansionPanelItem_default as ExpansionPanelItem, ExpansionPanelRoot_default as ExpansionPanelRoot, FeaturesAdapter, Group, GroupItem_default as GroupItem, GroupRoot_default as GroupRoot, IN_BROWSER, MemoryAdapter, Pagination, PaginationEllipsis_default as PaginationEllipsis, PaginationFirst_default as PaginationFirst, PaginationItem_default as PaginationItem, PaginationLast_default as PaginationLast, PaginationNext_default as PaginationNext, PaginationPrev_default as PaginationPrev, PaginationRoot_default as PaginationRoot, PaginationStatus_default as PaginationStatus, PermissionAdapter, PinoLoggerAdapter, Popover, PopoverActivator_default as PopoverActivator, PopoverContent_default as PopoverContent, PopoverRoot_default as PopoverRoot, Radio, RadioGroup_default as RadioGroup, RadioHiddenInput_default as RadioHiddenInput, RadioIndicator_default as RadioIndicator, RadioRoot_default as RadioRoot, SELF_CLOSING_TAGS, SUPPORTS_INTERSECTION_OBSERVER, SUPPORTS_MATCH_MEDIA, SUPPORTS_MUTATION_OBSERVER, SUPPORTS_OBSERVER, SUPPORTS_TOUCH, Scrim_default as Scrim, Selection, SelectionItem_default as SelectionItem, SelectionRoot_default as SelectionRoot, ServerAdapter, Single, SingleItem_default as SingleItem, SingleRoot_default as SingleRoot, Step, StepItem_default as StepItem, StepRoot_default as StepRoot, Switch, SwitchGroup_default as SwitchGroup, SwitchHiddenInput_default as SwitchHiddenInput, SwitchRoot_default as SwitchRoot, SwitchSelectAll_default as SwitchSelectAll, SwitchThumb_default as SwitchThumb, SwitchTrack_default as SwitchTrack, Tabs, TabsItem_default as TabsItem, TabsList_default as TabsList, TabsPanel_default as TabsPanel, TabsRoot_default as TabsRoot, VirtualAdapter, Vuetify0LocaleAdapter, Vuetify0LoggerAdapter, Vuetify0ThemeAdapter, __LOGGER_ENABLED__, clamp, createBreadcrumbs, createBreadcrumbsContext, createBreakpoints, createBreakpointsContext, createBreakpointsPlugin, createContext, createDataTable, createDataTableContext, createDate, createDateContext, createDatePlugin, createFallbackHydration, createFeatures, createFeaturesContext, createFeaturesPlugin, createFilter, createFilterContext, createForm, createFormContext, createGroup, createGroupContext, createHydration, createHydrationContext, createHydrationPlugin, createLocale, createLocaleContext, createLocaleFallback, createLocalePlugin, createLogger, createLoggerContext, createLoggerPlugin, createNested, createNestedContext, createOverflow, createOverflowContext, createPagination, createPaginationContext, createPermissions, createPermissionsContext, createPermissionsPlugin, createPlugin, createPluginContext, createQueue, createQueueContext, createRegistry, createRegistryContext, createSelection, createSelectionContext, createSingle, createSingleContext, createStack, createStackContext, createStackPlugin, createStep, createStepContext, createStorage, createStorageContext, createStoragePlugin, createTheme, createThemeContext, createThemePlugin, createTimeline, createTimelineContext, createTokens, createTokensContext, createTrinity, createVirtual, createVirtualContext, debounce, instanceExists, instanceName, isArray, isBoolean, isElement, isFunction, isNaN, isNull, isNullOrUndefined, isNumber, isObject, isPrimitive, isSelfClosingTag, isString, isSymbol, isUndefined, mergeDeep, multipleOpenStrategy, provideAvatarRoot, provideBreadcrumbsRoot, provideCheckboxGroup, provideCheckboxRoot, provideContext, provideDialogContext, provideExpansionPanelItem, provideExpansionPanelRoot, provideGroupRoot, providePaginationControls, providePaginationItems, providePaginationRoot, providePopoverContext, provideRadioGroup, provideRadioRoot, provideSelectionRoot, provideSingleRoot, provideStepRoot, provideSwitchGroup, provideSwitchRoot, provideTabsRoot, range, singleOpenStrategy, toArray, toElement, toReactive, useAvatarRoot, useBreadcrumbs, useBreadcrumbsRoot, useBreakpoints, useCheckboxGroup, useCheckboxRoot, useClickOutside, useContext, useDataTable, useDate, useDialogContext, useDocumentEventListener, useElementIntersection, useElementSize, useEventListener, useExpansionPanelItem, useExpansionPanelRoot, useFeatures, useFilter, useForm, useGroup, useGroupRoot, useHotkey, useHydration, useId, useIntersectionObserver, useLazy, useLocale, useLogger, useMediaQuery, useMutationObserver, useNested, useOverflow, usePagination, usePaginationControls, usePaginationItems, usePaginationRoot, usePermissions, usePopoverContext, usePrefersContrast, usePrefersDark, usePrefersReducedMotion, useProxyModel, useProxyRegistry, useQueue, useRadioGroup, useRadioRoot, useRegistry, useResizeObserver, useSelection, useSelectionRoot, useSingle, useSingleRoot, useStack, useStep, useStepRoot, useStorage, useSwitchGroup, useSwitchRoot, useTabsRoot, useTheme, useTimeline, useToggleScope, useTokens, useVirtual, useWindowEventListener, version };
+export { Atom_default as Atom, Avatar, AvatarFallback_default as AvatarFallback, AvatarImage_default as AvatarImage, AvatarRoot_default as AvatarRoot, Breadcrumbs, BreadcrumbsDivider_default as BreadcrumbsDivider, BreadcrumbsEllipsis_default as BreadcrumbsEllipsis, BreadcrumbsItem_default as BreadcrumbsItem, BreadcrumbsLink_default as BreadcrumbsLink, BreadcrumbsList_default as BreadcrumbsList, BreadcrumbsPage_default as BreadcrumbsPage, BreadcrumbsRoot_default as BreadcrumbsRoot, COMMON_ELEMENTS, Checkbox, CheckboxGroup_default as CheckboxGroup, CheckboxHiddenInput_default as CheckboxHiddenInput, CheckboxIndicator_default as CheckboxIndicator, CheckboxRoot_default as CheckboxRoot, CheckboxSelectAll_default as CheckboxSelectAll, ClientAdapter, ConsolaLoggerAdapter, DataTableAdapter, Dialog, DialogActivator_default as DialogActivator, DialogClose_default as DialogClose, DialogContent_default as DialogContent, DialogDescription_default as DialogDescription, DialogRoot_default as DialogRoot, DialogTitle_default as DialogTitle, ExpansionPanel, ExpansionPanelActivator_default as ExpansionPanelActivator, ExpansionPanelContent_default as ExpansionPanelContent, ExpansionPanelHeader_default as ExpansionPanelHeader, ExpansionPanelItem_default as ExpansionPanelItem, ExpansionPanelRoot_default as ExpansionPanelRoot, FeaturesAdapter, Group, GroupItem_default as GroupItem, GroupRoot_default as GroupRoot, IN_BROWSER, MemoryAdapter, Pagination, PaginationEllipsis_default as PaginationEllipsis, PaginationFirst_default as PaginationFirst, PaginationItem_default as PaginationItem, PaginationLast_default as PaginationLast, PaginationNext_default as PaginationNext, PaginationPrev_default as PaginationPrev, PaginationRoot_default as PaginationRoot, PaginationStatus_default as PaginationStatus, PermissionAdapter, PinoLoggerAdapter, Popover, PopoverActivator_default as PopoverActivator, PopoverContent_default as PopoverContent, PopoverRoot_default as PopoverRoot, Radio, RadioGroup_default as RadioGroup, RadioHiddenInput_default as RadioHiddenInput, RadioIndicator_default as RadioIndicator, RadioRoot_default as RadioRoot, SELF_CLOSING_TAGS, SUPPORTS_INTERSECTION_OBSERVER, SUPPORTS_MATCH_MEDIA, SUPPORTS_MUTATION_OBSERVER, SUPPORTS_OBSERVER, SUPPORTS_TOUCH, Scrim_default as Scrim, Selection, SelectionItem_default as SelectionItem, SelectionRoot_default as SelectionRoot, ServerAdapter, Single, SingleItem_default as SingleItem, SingleRoot_default as SingleRoot, Slider, SliderHiddenInput_default as SliderHiddenInput, SliderRange_default as SliderRange, SliderRoot_default as SliderRoot, SliderThumb_default as SliderThumb, SliderTrack_default as SliderTrack, Splitter, SplitterHandle_default as SplitterHandle, SplitterPanel_default as SplitterPanel, SplitterRoot_default as SplitterRoot, Step, StepItem_default as StepItem, StepRoot_default as StepRoot, Switch, SwitchGroup_default as SwitchGroup, SwitchHiddenInput_default as SwitchHiddenInput, SwitchRoot_default as SwitchRoot, SwitchSelectAll_default as SwitchSelectAll, SwitchThumb_default as SwitchThumb, SwitchTrack_default as SwitchTrack, Tabs, TabsItem_default as TabsItem, TabsList_default as TabsList, TabsPanel_default as TabsPanel, TabsRoot_default as TabsRoot, VirtualAdapter, Vuetify0LocaleAdapter, Vuetify0LoggerAdapter, Vuetify0ThemeAdapter, __LOGGER_ENABLED__, clamp, createBreadcrumbs, createBreadcrumbsContext, createBreakpoints, createBreakpointsContext, createBreakpointsPlugin, createContext, createDataTable, createDataTableContext, createDate, createDateContext, createDatePlugin, createFallbackHydration, createFeatures, createFeaturesContext, createFeaturesPlugin, createFilter, createFilterContext, createForm, createFormContext, createGroup, createGroupContext, createHydration, createHydrationContext, createHydrationPlugin, createLocale, createLocaleContext, createLocaleFallback, createLocalePlugin, createLogger, createLoggerContext, createLoggerPlugin, createModel, createNested, createNestedContext, createOverflow, createOverflowContext, createPagination, createPaginationContext, createPermissions, createPermissionsContext, createPermissionsPlugin, createPlugin, createPluginContext, createQueue, createQueueContext, createRegistry, createRegistryContext, createSelection, createSelectionContext, createSingle, createSingleContext, createSlider, createStack, createStackContext, createStackPlugin, createStep, createStepContext, createStorage, createStorageContext, createStoragePlugin, createTheme, createThemeContext, createThemePlugin, createTimeline, createTimelineContext, createTokens, createTokensContext, createTrinity, createVirtual, createVirtualContext, debounce, instanceExists, instanceName, isArray, isBoolean, isElement, isFunction, isNaN, isNull, isNullOrUndefined, isNumber, isObject, isPrimitive, isSelfClosingTag, isString, isSymbol, isUndefined, mergeDeep, multipleOpenStrategy, provideAvatarRoot, provideBreadcrumbsRoot, provideCheckboxGroup, provideCheckboxRoot, provideContext, provideDialogContext, provideExpansionPanelItem, provideExpansionPanelRoot, provideGroupRoot, providePaginationControls, providePaginationItems, providePaginationRoot, providePopoverContext, provideRadioGroup, provideRadioRoot, provideSelectionRoot, provideSingleRoot, provideSliderRoot, provideSplitterRoot, provideStepRoot, provideSwitchGroup, provideSwitchRoot, provideTabsRoot, range, singleOpenStrategy, toArray, toElement, toReactive, useAvatarRoot, useBreadcrumbs, useBreadcrumbsRoot, useBreakpoints, useCheckboxGroup, useCheckboxRoot, useClickOutside, useContext, useDataTable, useDate, useDialogContext, useDocumentEventListener, useElementIntersection, useElementSize, useEventListener, useExpansionPanelItem, useExpansionPanelRoot, useFeatures, useFilter, useForm, useGroup, useGroupRoot, useHotkey, useHydration, useId, useIntersectionObserver, useLazy, useLocale, useLogger, useMediaQuery, useMutationObserver, useNested, useOverflow, usePagination, usePaginationControls, usePaginationItems, usePaginationRoot, usePermissions, usePopoverContext, usePrefersContrast, usePrefersDark, usePrefersReducedMotion, useProxyModel, useProxyRegistry, useQueue, useRadioGroup, useRadioRoot, useRegistry, useResizeObserver, useSelection, useSelectionRoot, useSingle, useSingleRoot, useSliderRoot, useSplitterRoot, useStack, useStep, useStepRoot, useStorage, useSwitchGroup, useSwitchRoot, useTabsRoot, useTheme, useTimeline, useToggleScope, useTokens, useVirtual, useWindowEventListener, version };