@vuetify/v0 0.0.23 → 0.0.24

package/dist/browser/index.js

@@ -1,6 +1,5 @@
 import * as Vue from "vue";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createPropsRestProxy, createTextVNode, createVNode, defineComponent, effectScope, guardReactiveProps, inject, isRef, mergeModels, mergeProps, normalizeProps, onBeforeUnmount, onMounted, onScopeDispose, onUnmounted, openBlock, provide, reactive, readonly, ref, renderSlot, resolveDynamicComponent, shallowReactive, shallowReadonly, shallowRef, toDisplayString, toRef, toValue, unref, useAttrs, useId, useModel, useTemplateRef, vShow, watch, watchEffect, withCtx, withDirectives } from "vue";
-import { Temporal } from "@js-temporal/polyfill";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createPropsRestProxy, createTextVNode, createVNode, defineComponent, effectScope, guardReactiveProps, inject, isRef, mergeModels, mergeProps, nextTick, normalizeProps, onBeforeUnmount, onMounted, onScopeDispose, onUnmounted, openBlock, provide, reactive, readonly, ref, renderSlot, resolveDynamicComponent, shallowReactive, shallowReadonly, shallowRef, toDisplayString, toRef, toValue, unref, useAttrs, useId as useId$1, useModel, useTemplateRef, vShow, watch, watchEffect, withCtx, withDirectives } from "vue";
 
 //#region src/constants/htmlElements.ts
 const selfClosingTags = [
@@ -78,6 +77,31 @@ function isSelfClosingTag(tag) {
 	return SELF_CLOSING_TAGS.has(tag.toLowerCase());
 }
 
+//#endregion
+//#region src/utilities/instance.ts
+/**
+* Vue 3.6+ exposes `currentInstance` for Vapor mode compatibility.
+* `getCurrentInstance()` returns null in Vapor components by design,
+* so we access `currentInstance` directly when available.
+*
+* Uses dynamic key to avoid bundler static analysis warnings.
+*
+* @see https://github.com/orgs/vuejs/discussions/13629
+* @internal
+*/
+const INSTANCE_KEY = "currentInstance";
+function getInstanceCompat() {
+	const vueExports = Vue;
+	if (INSTANCE_KEY in vueExports) return vueExports[INSTANCE_KEY];
+	return Vue.getCurrentInstance();
+}
+function instanceExists() {
+	return !/* @__PURE__ */ isNull(getInstanceCompat());
+}
+function instanceName() {
+	return getInstanceCompat()?.type?.name;
+}
+
 //#endregion
 //#region src/utilities/helpers.ts
 /**
@@ -358,24 +382,30 @@ function mergeDeep(target, ...sources) {
 	}
 	return /* @__PURE__ */ mergeDeep(target, ...sources);
 }
+let idCounter = 0;
 /**
-* Generates a random 7-character alphanumeric ID
+* Generates a unique ID, using Vue's useId when in component context
 *
-* @returns A random string of 7 characters (a-z, 0-9)
+* @returns A unique string ID
 *
 * @remarks
-* Uses `Math.random()` converted to base-36. Not cryptographically secure.
-* Suitable for unique keys in UI components, not for security purposes.
+* - In component setup/lifecycle: Uses Vue's `useId()` for SSR-safe hydration
+* - Outside components: Falls back to sequential counter (`v0-0`, `v0-1`, ...)
+* - Vapor mode compatible
 *
 * @example
 * ```ts
-* genId() // 'k7x9m2p'
-* genId() // 'a3b8c1d'
+* // In component setup - SSR safe
+* const id = useId() // 'v:0', 'v:1', etc. (Vue's format)
+*
+* // Outside component - counter fallback
+* const id = useId() // 'v0-0', 'v0-1', etc.
 * ```
 */
 /* @__NO_SIDE_EFFECTS__ */
-function genId() {
-	return Math.random().toString(36).slice(2, 9);
+function useId() {
+	if (instanceExists()) return useId$1();
+	return `v0-${idCounter++}`;
 }
 /**
 * Clamps a value between a minimum and maximum
@@ -446,31 +476,6 @@ function debounce(fn, delay) {
 	return debounced;
 }
 
-//#endregion
-//#region src/utilities/instance.ts
-/**
-* Vue 3.6+ exposes `currentInstance` for Vapor mode compatibility.
-* `getCurrentInstance()` returns null in Vapor components by design,
-* so we access `currentInstance` directly when available.
-*
-* Uses dynamic key to avoid bundler static analysis warnings.
-*
-* @see https://github.com/orgs/vuejs/discussions/13629
-* @internal
-*/
-const INSTANCE_KEY = "currentInstance";
-function getInstanceCompat() {
-	const vueExports = Vue;
-	if (INSTANCE_KEY in vueExports) return vueExports[INSTANCE_KEY];
-	return Vue.getCurrentInstance();
-}
-function instanceExists() {
-	return !/* @__PURE__ */ isNull(getInstanceCompat());
-}
-function instanceName() {
-	return getInstanceCompat()?.type?.name;
-}
-
 //#endregion
 //#region src/components/Atom/Atom.vue
 /**
@@ -494,7 +499,7 @@ function instanceName() {
 * serving as the foundation for all other components that need polymorphic
 * rendering capabilities.
 */
-const _sfc_main$42 = /* @__PURE__ */ defineComponent({
+const _sfc_main$46 = /* @__PURE__ */ defineComponent({
 	name: "Atom",
 	__name: "Atom",
 	props: {
@@ -525,7 +530,7 @@ const _sfc_main$42 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var Atom_default = _sfc_main$42;
+var Atom_default = _sfc_main$46;
 
 //#endregion
 //#region src/composables/createContext/index.ts
@@ -680,7 +685,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.0.23";
+const version = "0.0.24";
 /* v8 ignore next -- build-time constant, __DEV__ short-circuits in tests */
 const __LOGGER_ENABLED__ = false;
 
@@ -1322,7 +1327,7 @@ function createRegistry(options) {
 	}
 	function register(registration = {}) {
 		const size = collection.size;
-		const id = registration.id ?? /* @__PURE__ */ genId();
+		const id = registration.id ?? /* @__PURE__ */ useId();
 		if (has(id)) {
 			logger$1.warn(`Ticket "${id}" already exists. Use \`upsert()\` to update or check \`has()\` before registering.`);
 			return get(id);
@@ -1569,7 +1574,7 @@ function createSelection(_options = {}) {
 		return selectedIds.has(id);
 	}
 	function register(registration = {}) {
-		const id = registration.id ?? /* @__PURE__ */ genId();
+		const id = registration.id ?? /* @__PURE__ */ useId();
 		const item = {
 			disabled: false,
 			select: () => select(id),
@@ -1689,7 +1694,7 @@ function useSelection(namespace = "v0:selection") {
 //#endregion
 //#region src/components/Avatar/AvatarRoot.vue
 const [useAvatarRoot, provideAvatarContext] = createContext();
-const _sfc_main$41 = /* @__PURE__ */ defineComponent({
+const _sfc_main$45 = /* @__PURE__ */ defineComponent({
 	name: "AvatarRoot",
 	__name: "AvatarRoot",
 	props: {
@@ -1714,11 +1719,11 @@ const _sfc_main$41 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var AvatarRoot_default = _sfc_main$41;
+var AvatarRoot_default = _sfc_main$45;
 
 //#endregion
 //#region src/components/Avatar/AvatarFallback.vue
-const _sfc_main$40 = /* @__PURE__ */ defineComponent({
+const _sfc_main$44 = /* @__PURE__ */ defineComponent({
 	name: "AvatarFallback",
 	__name: "AvatarFallback",
 	props: {
@@ -1743,11 +1748,11 @@ const _sfc_main$40 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var AvatarFallback_default = _sfc_main$40;
+var AvatarFallback_default = _sfc_main$44;
 
 //#endregion
 //#region src/components/Avatar/AvatarImage.vue
-const _sfc_main$39 = /* @__PURE__ */ defineComponent({
+const _sfc_main$43 = /* @__PURE__ */ defineComponent({
 	name: "AvatarImage",
 	inheritAttrs: false,
 	__name: "AvatarImage",
@@ -1807,7 +1812,7 @@ const _sfc_main$39 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var AvatarImage_default = _sfc_main$39;
+var AvatarImage_default = _sfc_main$43;
 
 //#endregion
 //#region src/components/Avatar/index.ts
@@ -2059,7 +2064,7 @@ function createGroup(_options = {}) {
 		else selection.toggle(id);
 	}
 	function register(registration = {}) {
-		const id = registration.id ?? /* @__PURE__ */ genId();
+		const id = registration.id ?? /* @__PURE__ */ useId();
 		const item = {
 			...registration,
 			id,
@@ -2320,7 +2325,7 @@ function useProxyModel(registry, model, options) {
 //#endregion
 //#region src/components/Checkbox/CheckboxGroup.vue
 const [useCheckboxGroup, provideCheckboxGroup] = createContext();
-const _sfc_main$38 = /* @__PURE__ */ defineComponent({
+const _sfc_main$42 = /* @__PURE__ */ defineComponent({
 	name: "CheckboxGroup",
 	__name: "CheckboxGroup",
 	props: /* @__PURE__ */ mergeModels({
@@ -2386,17 +2391,17 @@ const _sfc_main$38 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var CheckboxGroup_default = _sfc_main$38;
+var CheckboxGroup_default = _sfc_main$42;
 
 //#endregion
 //#region src/components/Checkbox/CheckboxRoot.vue
 const [useCheckboxRoot, provideCheckboxRoot] = createContext();
-const _sfc_main$37 = /* @__PURE__ */ defineComponent({
+const _sfc_main$41 = /* @__PURE__ */ defineComponent({
 	name: "CheckboxRoot",
 	inheritAttrs: false,
 	__name: "CheckboxRoot",
 	props: /* @__PURE__ */ mergeModels({
-		id: { default: () => /* @__PURE__ */ genId() },
+		id: { default: () => useId$1() },
 		label: {},
 		value: {},
 		name: {},
@@ -2525,7 +2530,7 @@ const _sfc_main$37 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var CheckboxRoot_default = _sfc_main$37;
+var CheckboxRoot_default = _sfc_main$41;
 
 //#endregion
 //#region src/components/Checkbox/CheckboxHiddenInput.vue
@@ -2547,7 +2552,7 @@ const visuallyHiddenStyle$1 = {
 	whiteSpace: "nowrap",
 	border: "0"
 };
-const _sfc_main$36 = /* @__PURE__ */ defineComponent({
+const _sfc_main$40 = /* @__PURE__ */ defineComponent({
 	name: "CheckboxHiddenInput",
 	__name: "CheckboxHiddenInput",
 	props: {
@@ -2583,11 +2588,11 @@ const _sfc_main$36 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var CheckboxHiddenInput_default = _sfc_main$36;
+var CheckboxHiddenInput_default = _sfc_main$40;
 
 //#endregion
 //#region src/components/Checkbox/CheckboxIndicator.vue
-const _sfc_main$35 = /* @__PURE__ */ defineComponent({
+const _sfc_main$39 = /* @__PURE__ */ defineComponent({
 	name: "CheckboxIndicator",
 	__name: "CheckboxIndicator",
 	props: {
@@ -2620,11 +2625,11 @@ const _sfc_main$35 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var CheckboxIndicator_default = _sfc_main$35;
+var CheckboxIndicator_default = _sfc_main$39;
 
 //#endregion
 //#region src/components/Checkbox/CheckboxSelectAll.vue
-const _sfc_main$34 = /* @__PURE__ */ defineComponent({
+const _sfc_main$38 = /* @__PURE__ */ defineComponent({
 	name: "CheckboxSelectAll",
 	inheritAttrs: false,
 	__name: "CheckboxSelectAll",
@@ -2643,7 +2648,7 @@ const _sfc_main$34 = /* @__PURE__ */ defineComponent({
 		const props = __props;
 		const { as = "button", renderless, label, namespace = "v0:checkbox:root", groupNamespace = "v0:checkbox:group" } = props;
 		const group = useCheckboxGroup(groupNamespace);
-		const id = /* @__PURE__ */ genId();
+		const id = useId$1();
 		const isAllSelected = toRef(() => group.isAllSelected.value);
 		const isMixed = toRef(() => group.isMixed.value);
 		const isDisabled = toRef(() => toValue(props.disabled) || toValue(group.disabled));
@@ -2710,7 +2715,7 @@ const _sfc_main$34 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var CheckboxSelectAll_default = _sfc_main$34;
+var CheckboxSelectAll_default = _sfc_main$38;
 
 //#endregion
 //#region src/components/Checkbox/index.ts
@@ -2746,7 +2751,7 @@ const Checkbox = {
 //#endregion
 //#region src/components/Dialog/DialogRoot.vue
 const [useDialogContext, provideDialogContext] = createContext();
-const _sfc_main$33 = /* @__PURE__ */ defineComponent({
+const _sfc_main$37 = /* @__PURE__ */ defineComponent({
 	name: "DialogRoot",
 	__name: "DialogRoot",
 	props: /* @__PURE__ */ mergeModels({
@@ -2763,11 +2768,10 @@ const _sfc_main$33 = /* @__PURE__ */ defineComponent({
 	}),
 	emits: /* @__PURE__ */ mergeModels(["update:modelValue"], ["update:modelValue"]),
 	setup(__props) {
-		const props = createPropsRestProxy(__props, ["as", "namespace"]);
 		const isOpen = useModel(__props, "modelValue");
-		const id = toRef(() => props.id ?? useId());
-		const titleId = toRef(() => `${toValue(id)}-title`);
-		const descriptionId = toRef(() => `${toValue(id)}-description`);
+		const id = __props.id ?? useId$1();
+		const titleId = `${id}-title`;
+		const descriptionId = `${id}-description`;
 		function open() {
 			isOpen.value = true;
 		}
@@ -2776,14 +2780,14 @@ const _sfc_main$33 = /* @__PURE__ */ defineComponent({
 		}
 		provideDialogContext(__props.namespace, {
 			isOpen,
-			id: toValue(id),
-			titleId: toValue(titleId),
-			descriptionId: toValue(descriptionId),
+			id,
+			titleId,
+			descriptionId,
 			open,
 			close
 		});
 		const slotProps = toRef(() => ({
-			id: toValue(id),
+			id,
 			isOpen: isOpen.value,
 			open,
 			close
@@ -2799,11 +2803,11 @@ const _sfc_main$33 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var DialogRoot_default = _sfc_main$33;
+var DialogRoot_default = _sfc_main$37;
 
 //#endregion
 //#region src/components/Dialog/DialogClose.vue
-const _sfc_main$32 = /* @__PURE__ */ defineComponent({
+const _sfc_main$36 = /* @__PURE__ */ defineComponent({
 	name: "DialogClose",
 	__name: "DialogClose",
 	props: {
@@ -2831,7 +2835,7 @@ const _sfc_main$32 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var DialogClose_default = _sfc_main$32;
+var DialogClose_default = _sfc_main$36;
 
 //#endregion
 //#region src/composables/toReactive/index.ts
@@ -3006,18 +3010,26 @@ function toReactive(objectRef) {
 */
 function createHydration() {
 	const isHydrated = shallowRef(false);
+	const isSettled = shallowRef(false);
 	function hydrate() {
 		isHydrated.value = true;
 	}
+	function settle() {
+		isSettled.value = true;
+	}
 	return {
 		isHydrated: shallowReadonly(isHydrated),
-		hydrate
+		isSettled: shallowReadonly(isSettled),
+		hydrate,
+		settle
 	};
 }
 function createFallbackHydration() {
 	return {
 		isHydrated: shallowReadonly(shallowRef(true)),
-		hydrate: () => {}
+		isSettled: shallowReadonly(shallowRef(true)),
+		hydrate: () => {},
+		settle: () => {}
 	};
 }
 /**
@@ -3081,9 +3093,11 @@ function createHydrationPlugin(_options = {}) {
 			provideHydrationContext(context, app);
 		},
 		setup: (app) => {
-			app.mixin({ mounted() {
+			app.mixin({ async mounted() {
 				if (!/* @__PURE__ */ isNull(this.$parent)) return;
 				context.hydrate();
+				await nextTick();
+				context.settle();
 			} });
 		}
 	});
@@ -3101,13 +3115,16 @@ function createHydrationPlugin(_options = {}) {
 * <script setup lang="ts">
 *   import { useHydration } from '@vuetify/v0'
 *
-*   const hydration = useHydration()
+*   const { isHydrated, isSettled } = useHydration()
+*
+*   // Use isSettled to gate animations after state restoration
+*   const transition = computed(() => isSettled.value ? 'fade' : undefined)
 * <\/script>
 *
 * <template>
-*   <div>
-*     <p>Is hydrated: {{ hydration.isHydrated.value }}</p>
-*   </div>
+*   <Transition :name="transition">
+*     <div v-if="show">Animates only after hydration settles</div>
+*   </Transition>
 * </template>
 * ```
 */
@@ -3990,585 +4007,6 @@ function useLocale(namespace = "v0:locale") {
 	}
 }
 
-//#endregion
-//#region src/composables/useDate/adapters/v0.ts
-/**
-* @module Vuetify0DateAdapter
-*
-* @remarks
-* Default DateAdapter for v0, built on the Temporal API.
-* Uses Temporal.PlainDateTime as the primary date type.
-*
-* Implements the full date-io IUtils interface for industry compatibility.
-*
-* Requires native Temporal support or @js-temporal/polyfill.
-*
-* @see https://tc39.es/proposal-temporal/docs/
-* @see https://github.com/dmtrKovalenko/date-io
-*/
-/** Single regex for token replacement in formatByString */
-const FORMAT_TOKEN_REGEX = /YYYY|YY|MMMM|MMM|MM|M|dddd|ddd|DD|D|HH|H|hh|h|mm|m|ss|s|A|a/g;
-/** Maximum cache size to prevent memory leaks */
-const MAX_CACHE_SIZE = 50;
-var Vuetify0DateAdapter = class {
-	_locale;
-	/** Cache for Intl.DateTimeFormat instances, keyed by locale + options */
-	formatCache = /* @__PURE__ */ new Map();
-	/** Cache for Intl.NumberFormat instances, keyed by locale */
-	numberFormatCache = /* @__PURE__ */ new Map();
-	constructor(locale = "en-US") {
-		this._locale = locale;
-	}
-	/** Current locale. Setting a new locale clears format caches. */
-	get locale() {
-		return this._locale;
-	}
-	set locale(value) {
-		if (this._locale !== value) {
-			this._locale = value;
-			this.formatCache.clear();
-			this.numberFormatCache.clear();
-		}
-	}
-	/**
-	* Create a date from various input types.
-	*
-	* @param value - Date value (PlainDateTime, PlainDate, ZonedDateTime, Date, ISO string, timestamp)
-	* @returns PlainDateTime or null if invalid
-	*
-	* @remarks
-	* **SSR Safety:** When called without arguments:
-	* - Browser: Returns current time via `Temporal.Now.plainDateTimeISO()`
-	* - Server: Returns epoch (1970-01-01T00:00:00) for deterministic rendering
-	*
-	* For SSR apps needing current time, pass `Date.now()` explicitly and handle
-	* hydration via `<ClientOnly>` (Nuxt) or `v-if` + `onMounted` pattern.
-	*/
-	date(value) {
-		if (/* @__PURE__ */ isNullOrUndefined(value)) return IN_BROWSER ? Temporal.Now.plainDateTimeISO() : Temporal.PlainDateTime.from({
-			year: 1970,
-			month: 1,
-			day: 1,
-			hour: 0,
-			minute: 0,
-			second: 0
-		});
-		if (value instanceof Temporal.PlainDateTime) return value;
-		if (value instanceof Temporal.PlainDate) return value.toPlainDateTime();
-		if (value instanceof Temporal.ZonedDateTime) return value.toPlainDateTime();
-		if (value instanceof Date) return Temporal.PlainDateTime.from({
-			year: value.getFullYear(),
-			month: value.getMonth() + 1,
-			day: value.getDate(),
-			hour: value.getHours(),
-			minute: value.getMinutes(),
-			second: value.getSeconds(),
-			millisecond: value.getMilliseconds()
-		});
-		if (/* @__PURE__ */ isString(value)) try {
-			return Temporal.PlainDateTime.from(value);
-		} catch {
-			try {
-				return this.parseISO(value);
-			} catch {
-				return null;
-			}
-		}
-		if (/* @__PURE__ */ isNumber(value)) {
-			const date = new Date(value);
-			return Temporal.PlainDateTime.from({
-				year: date.getFullYear(),
-				month: date.getMonth() + 1,
-				day: date.getDate(),
-				hour: date.getHours(),
-				minute: date.getMinutes(),
-				second: date.getSeconds(),
-				millisecond: date.getMilliseconds()
-			});
-		}
-		return null;
-	}
-	toJsDate(value) {
-		return new Date(value.year, value.month - 1, value.day, value.hour, value.minute, value.second, value.millisecond);
-	}
-	parseISO(dateString) {
-		if (/^\d{4}-\d{2}-\d{2}$/.test(dateString)) return Temporal.PlainDate.from(dateString).toPlainDateTime();
-		if (dateString.includes("Z") || /[+-]\d{2}:\d{2}$/.test(dateString)) return Temporal.Instant.from(dateString).toZonedDateTimeISO("UTC").toPlainDateTime();
-		return Temporal.PlainDateTime.from(dateString);
-	}
-	toISO(date) {
-		return date.toString();
-	}
-	/**
-	* Parses a date string into a PlainDateTime.
-	*
-	* **Known limitation**: The `format` parameter is currently ignored.
-	* Temporal API doesn't provide built-in format parsing, and implementing
-	* full format string parsing (e.g., 'MM/DD/YYYY') would require a
-	* substantial custom parser. This method delegates to `date()` which
-	* handles ISO 8601 strings and common formats.
-	*
-	* For custom format parsing, consider using a library like date-fns or
-	* luxon with a custom adapter.
-	*
-	* @param value - The date string to parse
-	* @param _format - Format hint (currently ignored)
-	* @returns Parsed PlainDateTime or null if invalid
-	*/
-	parse(value, _format) {
-		try {
-			return this.date(value);
-		} catch {
-			return null;
-		}
-	}
-	isValid(date) {
-		if (/* @__PURE__ */ isNullOrUndefined(date)) return false;
-		if (date instanceof Temporal.PlainDateTime) return true;
-		if (date instanceof Temporal.PlainDate) return true;
-		if (date instanceof Temporal.ZonedDateTime) return true;
-		if (date instanceof Date) return !Number.isNaN(date.getTime());
-		if (/* @__PURE__ */ isString(date)) try {
-			Temporal.PlainDateTime.from(date);
-			return true;
-		} catch {
-			try {
-				Temporal.PlainDate.from(date);
-				return true;
-			} catch {
-				return false;
-			}
-		}
-		return false;
-	}
-	isNull(value) {
-		return /* @__PURE__ */ isNullOrUndefined(value);
-	}
-	getCurrentLocaleCode() {
-		return this.locale;
-	}
-	is12HourCycleInCurrentLocale() {
-		return new Intl.DateTimeFormat(this.locale, { hour: "numeric" }).resolvedOptions().hour12 ?? false;
-	}
-	format(date, formatString) {
-		const jsDate = this.toJsDate(date);
-		const options = {
-			fullDate: { dateStyle: "full" },
-			fullDateWithWeekday: {
-				weekday: "long",
-				year: "numeric",
-				month: "long",
-				day: "numeric"
-			},
-			normalDate: { dateStyle: "medium" },
-			shortDate: { dateStyle: "short" },
-			year: { year: "numeric" },
-			month: { month: "long" },
-			monthShort: { month: "short" },
-			monthAndYear: {
-				year: "numeric",
-				month: "long"
-			},
-			monthAndDate: {
-				month: "long",
-				day: "numeric"
-			},
-			weekday: { weekday: "long" },
-			weekdayShort: { weekday: "short" },
-			dayOfMonth: { day: "numeric" },
-			hours12h: {
-				hour: "numeric",
-				hour12: true
-			},
-			hours24h: {
-				hour: "numeric",
-				hour12: false
-			},
-			minutes: { minute: "numeric" },
-			seconds: { second: "numeric" },
-			fullTime: { timeStyle: "medium" },
-			fullTime12h: {
-				hour: "numeric",
-				minute: "numeric",
-				second: "numeric",
-				hour12: true
-			},
-			fullTime24h: {
-				hour: "numeric",
-				minute: "numeric",
-				second: "numeric",
-				hour12: false
-			},
-			fullDateTime: {
-				dateStyle: "full",
-				timeStyle: "short"
-			},
-			fullDateTime12h: {
-				dateStyle: "full",
-				hour: "numeric",
-				minute: "numeric",
-				hour12: true
-			},
-			fullDateTime24h: {
-				dateStyle: "full",
-				hour: "numeric",
-				minute: "numeric",
-				hour12: false
-			},
-			keyboardDate: {
-				year: "numeric",
-				month: "2-digit",
-				day: "2-digit"
-			},
-			keyboardDateTime: {
-				year: "numeric",
-				month: "2-digit",
-				day: "2-digit",
-				hour: "numeric",
-				minute: "numeric"
-			},
-			keyboardDateTime12h: {
-				year: "numeric",
-				month: "2-digit",
-				day: "2-digit",
-				hour: "numeric",
-				minute: "numeric",
-				hour12: true
-			},
-			keyboardDateTime24h: {
-				year: "numeric",
-				month: "2-digit",
-				day: "2-digit",
-				hour: "numeric",
-				minute: "numeric",
-				hour12: false
-			}
-		}[formatString];
-		if (options) return this.getFormatter(options).format(jsDate);
-		return this.getFormatter({}).format(jsDate);
-	}
-	formatByString(date, formatString) {
-		const jsDate = this.toJsDate(date);
-		const getTokenValue = (token) => {
-			switch (token) {
-				case "YYYY": return String(date.year);
-				case "YY": return String(date.year).slice(-2);
-				case "MM": return String(date.month).padStart(2, "0");
-				case "M": return String(date.month);
-				case "DD": return String(date.day).padStart(2, "0");
-				case "D": return String(date.day);
-				case "HH": return String(date.hour).padStart(2, "0");
-				case "H": return String(date.hour);
-				case "hh": return String(date.hour % 12 || 12).padStart(2, "0");
-				case "h": return String(date.hour % 12 || 12);
-				case "mm": return String(date.minute).padStart(2, "0");
-				case "m": return String(date.minute);
-				case "ss": return String(date.second).padStart(2, "0");
-				case "s": return String(date.second);
-				case "A": return date.hour < 12 ? "AM" : "PM";
-				case "a": return date.hour < 12 ? "am" : "pm";
-				case "MMMM": return this.getFormatter({ month: "long" }).format(jsDate);
-				case "MMM": return this.getFormatter({ month: "short" }).format(jsDate);
-				case "dddd": return this.getFormatter({ weekday: "long" }).format(jsDate);
-				case "ddd": return this.getFormatter({ weekday: "short" }).format(jsDate);
-				default: return token;
-			}
-		};
-		return formatString.replace(FORMAT_TOKEN_REGEX, (match) => getTokenValue(match));
-	}
-	getFormatHelperText(format) {
-		return {
-			keyboardDate: "mm/dd/yyyy",
-			keyboardDateTime: "mm/dd/yyyy hh:mm",
-			keyboardDateTime12h: "mm/dd/yyyy hh:mm am/pm",
-			keyboardDateTime24h: "mm/dd/yyyy hh:mm"
-		}[format] ?? format.replace(/YYYY/g, "yyyy").replace(/MM/g, "mm").replace(/DD/g, "dd").replace(/HH/g, "hh").replace(/mm/g, "mm").replace(/ss/g, "ss");
-	}
-	formatNumber(numberToFormat) {
-		return this.getNumberFormatter().format(Number(numberToFormat));
-	}
-	getMeridiemText(ampm) {
-		const date = ampm === "am" ? new Date(2020, 0, 1, 9, 0) : new Date(2020, 0, 1, 15, 0);
-		const match = this.getFormatter({
-			hour: "numeric",
-			hour12: true
-		}).format(date).match(/[AP]M|[ap]m|午前|午後|上午|下午/i);
-		return match ? match[0] : ampm.toUpperCase();
-	}
-	startOfDay(date) {
-		return date.with({
-			hour: 0,
-			minute: 0,
-			second: 0,
-			millisecond: 0,
-			microsecond: 0,
-			nanosecond: 0
-		});
-	}
-	endOfDay(date) {
-		return date.with({
-			hour: 23,
-			minute: 59,
-			second: 59,
-			millisecond: 999,
-			microsecond: 999,
-			nanosecond: 999
-		});
-	}
-	startOfWeek(date, firstDayOfWeek = 0) {
-		const diff = (date.dayOfWeek % 7 - firstDayOfWeek + 7) % 7;
-		return this.startOfDay(date.subtract({ days: diff }));
-	}
-	endOfWeek(date, firstDayOfWeek = 0) {
-		const start = this.startOfWeek(date, firstDayOfWeek);
-		return this.endOfDay(start.add({ days: 6 }));
-	}
-	startOfMonth(date) {
-		return this.startOfDay(date.with({ day: 1 }));
-	}
-	endOfMonth(date) {
-		return this.endOfDay(date.with({ day: date.daysInMonth }));
-	}
-	startOfYear(date) {
-		return this.startOfDay(date.with({
-			month: 1,
-			day: 1
-		}));
-	}
-	endOfYear(date) {
-		return this.endOfDay(date.with({
-			month: 12,
-			day: 31
-		}));
-	}
-	addSeconds(date, amount) {
-		return date.add({ seconds: amount });
-	}
-	addMinutes(date, amount) {
-		return date.add({ minutes: amount });
-	}
-	addHours(date, amount) {
-		return date.add({ hours: amount });
-	}
-	addDays(date, amount) {
-		return date.add({ days: amount });
-	}
-	addWeeks(date, amount) {
-		return date.add({ weeks: amount });
-	}
-	addMonths(date, amount) {
-		return date.add({ months: amount });
-	}
-	addYears(date, amount) {
-		return date.add({ years: amount });
-	}
-	isAfter(date, comparing) {
-		return Temporal.PlainDateTime.compare(date, comparing) > 0;
-	}
-	isAfterDay(date, comparing) {
-		return Temporal.PlainDate.compare(date.toPlainDate(), comparing.toPlainDate()) > 0;
-	}
-	isAfterMonth(date, comparing) {
-		if (date.year !== comparing.year) return date.year > comparing.year;
-		return date.month > comparing.month;
-	}
-	isAfterYear(date, comparing) {
-		return date.year > comparing.year;
-	}
-	isBefore(date, comparing) {
-		return Temporal.PlainDateTime.compare(date, comparing) < 0;
-	}
-	isBeforeDay(date, comparing) {
-		return Temporal.PlainDate.compare(date.toPlainDate(), comparing.toPlainDate()) < 0;
-	}
-	isBeforeMonth(date, comparing) {
-		if (date.year !== comparing.year) return date.year < comparing.year;
-		return date.month < comparing.month;
-	}
-	isBeforeYear(date, comparing) {
-		return date.year < comparing.year;
-	}
-	isEqual(date, comparing) {
-		return Temporal.PlainDateTime.compare(date, comparing) === 0;
-	}
-	isSameDay(date, comparing) {
-		return Temporal.PlainDate.compare(date.toPlainDate(), comparing.toPlainDate()) === 0;
-	}
-	isSameMonth(date, comparing) {
-		return date.year === comparing.year && date.month === comparing.month;
-	}
-	isSameYear(date, comparing) {
-		return date.year === comparing.year;
-	}
-	isSameHour(date, comparing) {
-		return date.year === comparing.year && date.month === comparing.month && date.day === comparing.day && date.hour === comparing.hour;
-	}
-	isWithinRange(date, [start, end]) {
-		return Temporal.PlainDateTime.compare(date, start) >= 0 && Temporal.PlainDateTime.compare(date, end) <= 0;
-	}
-	getYear(date) {
-		return date.year;
-	}
-	getMonth(date) {
-		return date.month - 1;
-	}
-	getDate(date) {
-		return date.day;
-	}
-	getHours(date) {
-		return date.hour;
-	}
-	getMinutes(date) {
-		return date.minute;
-	}
-	getSeconds(date) {
-		return date.second;
-	}
-	getDiff(date, comparing, unit) {
-		const unitKey = unit ?? "days";
-		const comp = /* @__PURE__ */ isString(comparing) ? this.date(comparing) : comparing;
-		if (/* @__PURE__ */ isNull(comp)) return 0;
-		const duration = date.since(comp, { largestUnit: unitKey });
-		switch (unitKey) {
-			case "years": return duration.years;
-			case "months": return duration.months + duration.years * 12;
-			case "weeks": return duration.weeks + Math.floor(duration.days / 7);
-			case "days": return duration.days + duration.weeks * 7;
-			case "hours": return Math.round(duration.total({ unit: "hours" }));
-			case "minutes": return Math.round(duration.total({ unit: "minutes" }));
-			case "seconds": return Math.round(duration.total({ unit: "seconds" }));
-			default: return duration.days;
-		}
-	}
-	getWeek(date, firstDayOfWeek = 0, minimalDays = 1) {
-		const startOfYear = this.startOfYear(date);
-		const startOfFirstWeek = this.startOfWeek(startOfYear, firstDayOfWeek);
-		let firstWeekStart = startOfFirstWeek;
-		if (startOfYear.day - startOfFirstWeek.day < minimalDays) firstWeekStart = startOfFirstWeek.add({ weeks: 1 });
-		const startOfCurrentWeek = this.startOfWeek(date, firstDayOfWeek);
-		const diff = this.getDiff(startOfCurrentWeek, firstWeekStart, "weeks");
-		return Math.max(1, diff + 1);
-	}
-	getDaysInMonth(date) {
-		return date.daysInMonth;
-	}
-	setYear(date, year) {
-		return date.with({ year });
-	}
-	setMonth(date, month) {
-		return date.with({ month: month + 1 });
-	}
-	setDate(date, day) {
-		return date.with({ day });
-	}
-	setHours(date, hours) {
-		return date.with({ hour: hours });
-	}
-	setMinutes(date, minutes) {
-		return date.with({ minute: minutes });
-	}
-	setSeconds(date, seconds) {
-		return date.with({ second: seconds });
-	}
-	getWeekdays(firstDayOfWeek = 0, format = "short") {
-		const weekdays = [];
-		const refDate = Temporal.PlainDate.from("2015-01-04");
-		const formatter = this.getFormatter({ weekday: format });
-		for (let i = 0; i < 7; i++) {
-			const day = refDate.add({ days: (i + firstDayOfWeek) % 7 });
-			const jsDate = new Date(day.year, day.month - 1, day.day);
-			weekdays.push(formatter.format(jsDate));
-		}
-		return weekdays;
-	}
-	getWeekArray(date, firstDayOfWeek = 0) {
-		const weeks = [];
-		const monthStart = this.startOfMonth(date);
-		const monthEnd = this.endOfMonth(date);
-		let current = this.startOfWeek(monthStart, firstDayOfWeek);
-		const end = this.endOfWeek(monthEnd);
-		while (Temporal.PlainDateTime.compare(current, end) <= 0) {
-			const week = [];
-			for (let i = 0; i < 7; i++) {
-				week.push(current);
-				current = current.add({ days: 1 });
-			}
-			weeks.push(week);
-		}
-		return weeks;
-	}
-	getMonthArray(date) {
-		const year = date.year;
-		const months = [];
-		for (let month = 1; month <= 12; month++) months.push(Temporal.PlainDateTime.from({
-			year,
-			month,
-			day: 1
-		}));
-		return months;
-	}
-	getYearRange(start, end) {
-		const years = [];
-		let current = start.year;
-		while (current <= end.year) {
-			years.push(Temporal.PlainDateTime.from({
-				year: current,
-				month: 1,
-				day: 1
-			}));
-			current++;
-		}
-		return years;
-	}
-	getNextMonth(date) {
-		return this.startOfMonth(date.add({ months: 1 }));
-	}
-	getPreviousMonth(date) {
-		return this.startOfMonth(date.subtract({ months: 1 }));
-	}
-	mergeDateAndTime(date, time) {
-		return date.with({
-			hour: time.hour,
-			minute: time.minute,
-			second: time.second,
-			millisecond: time.millisecond
-		});
-	}
-	/**
-	* Gets a cached Intl.DateTimeFormat instance or creates one if not cached.
-	* Cache is limited to MAX_CACHE_SIZE entries to prevent memory leaks.
-	*/
-	getFormatter(options) {
-		const key = `${this.locale}:${JSON.stringify(options)}`;
-		let formatter = this.formatCache.get(key);
-		if (!formatter) {
-			if (this.formatCache.size >= MAX_CACHE_SIZE) {
-				const firstKey = this.formatCache.keys().next().value;
-				if (firstKey) this.formatCache.delete(firstKey);
-			}
-			formatter = new Intl.DateTimeFormat(this.locale, options);
-			this.formatCache.set(key, formatter);
-		}
-		return formatter;
-	}
-	/**
-	* Gets a cached Intl.NumberFormat instance or creates one if not cached.
-	* Cache is limited to MAX_CACHE_SIZE entries to prevent memory leaks.
-	*/
-	getNumberFormatter() {
-		let formatter = this.numberFormatCache.get(this.locale);
-		if (!formatter) {
-			if (this.numberFormatCache.size >= MAX_CACHE_SIZE) {
-				const firstKey = this.numberFormatCache.keys().next().value;
-				if (firstKey) this.numberFormatCache.delete(firstKey);
-			}
-			formatter = new Intl.NumberFormat(this.locale);
-			this.numberFormatCache.set(this.locale, formatter);
-		}
-		return formatter;
-	}
-};
-
 //#endregion
 //#region src/composables/useDate/index.ts
 /**
@@ -4579,16 +4017,16 @@ var Vuetify0DateAdapter = class {
 *
 * Key features:
 * - Adapter pattern for date library abstraction
-* - Temporal API as default adapter (modern, immutable dates)
 * - Locale-aware formatting via Intl.DateTimeFormat
 * - Integration with useLocale for automatic locale sync
 *
-* @example
+* @example Using the built-in Temporal adapter
 * ```ts
+* import { Vuetify0DateAdapter } from '@vuetify/v0/date'
 * import { createDatePlugin } from '@vuetify/v0'
 *
 * const app = createApp(App)
-* app.use(createDatePlugin())
+* app.use(createDatePlugin({ adapter: new Vuetify0DateAdapter() }))
 *
 * // In a component:
 * const { adapter } = useDate()
@@ -4604,7 +4042,7 @@ var Vuetify0DateAdapter = class {
 *   // ... implementation
 * }
 *
-* const context = createDate({ adapter: new DateFnsAdapter() })
+* app.use(createDatePlugin({ adapter: new DateFnsAdapter() }))
 * ```
 */
 /**
@@ -4627,7 +4065,8 @@ const defaultLocales = {
 /**
 * Creates a new date context.
 *
-* @param options Optional adapter and locale configuration.
+* @param options Adapter and locale configuration.
+* @template Z The date type used by the adapter.
 * @template E The date context type.
 * @returns A date context.
 *
@@ -4635,18 +4074,20 @@ const defaultLocales = {
 *
 * @example
 * ```ts
-* const { adapter } = createDate()
-* const today = adapter.date() // Temporal.PlainDateTime
+* import { Vuetify0DateAdapter } from '@vuetify/v0/date'
 *
-* // With locale options
-* const { adapter: deAdapter } = createDate({ locale: 'de-DE' })
+* const { adapter } = createDate({ adapter: new Vuetify0DateAdapter() })
+* const today = adapter.date()
 *
-* // With custom adapter
-* const { adapter } = createDate({ adapter: new DateFnsAdapter() })
+* // With locale options
+* const { adapter } = createDate({
+*   adapter: new Vuetify0DateAdapter(),
+*   locale: 'de-DE',
+* })
 * ```
 */
-function createDate(options = {}) {
-	const { locales = defaultLocales, adapter = new Vuetify0DateAdapter(), locale: initialLocale } = options;
+function createDate(options) {
+	const { locales = defaultLocales, adapter, locale: initialLocale } = options;
 	let selectedId;
 	try {
 		if (instanceExists()) selectedId = useLocale().selectedId;
@@ -4674,22 +4115,10 @@ function createDate(options = {}) {
 	};
 }
 /**
-* Creates a fallback date context for when useDate is called outside of a Vue component.
-*
-* @returns A fallback date context with Vuetify0DateAdapter.
-* @internal
-*/
-function createDateFallback() {
-	const adapter = new Vuetify0DateAdapter();
-	return {
-		adapter,
-		locale: computed(() => adapter.locale ?? "en-US")
-	};
-}
-/**
 * Creates a new date context trinity.
 *
-* @param options Optional adapter, locale, and namespace configuration.
+* @param options Adapter, locale, and namespace configuration.
+* @template Z The date type used by the adapter.
 * @template E The date context type.
 * @returns A trinity [useContext, provideContext, defaultContext].
 *
@@ -4697,18 +4126,15 @@ function createDateFallback() {
 *
 * @example
 * ```ts
-* const [useAppDate, provideAppDate] = createDateContext({
-*   namespace: 'app:date',
-* })
+* import { Vuetify0DateAdapter } from '@vuetify/v0/date'
 *
-* // With custom adapter
 * const [useAppDate, provideAppDate] = createDateContext({
-*   adapter: new DateFnsAdapter(),
+*   adapter: new Vuetify0DateAdapter(),
 *   namespace: 'app:date',
 * })
 * ```
 */
-function createDateContext(options = {}) {
+function createDateContext(options) {
 	const { namespace = "v0:date", ...dateOptions } = options;
 	const [useDateContext, _provideDateContext] = createContext(namespace);
 	const context = createDate(dateOptions);
@@ -4720,7 +4146,8 @@ function createDateContext(options = {}) {
 /**
 * Creates a new date plugin.
 *
-* @param options Optional adapter, locale, and namespace configuration.
+* @param options Adapter, locale, and namespace configuration.
+* @template Z The date type used by the adapter.
 * @template E The date context type.
 * @returns A Vue plugin.
 *
@@ -4728,17 +4155,19 @@ function createDateContext(options = {}) {
 *
 * @example
 * ```ts
-* const app = createApp(App)
-* app.use(createDatePlugin())
+* import { Vuetify0DateAdapter } from '@vuetify/v0/date'
 *
-* // With options
-* app.use(createDatePlugin({ locale: 'de-DE' }))
+* const app = createApp(App)
+* app.use(createDatePlugin({ adapter: new Vuetify0DateAdapter() }))
 *
-* // With custom adapter
-* app.use(createDatePlugin({ adapter: new DateFnsAdapter() }))
+* // With locale options
+* app.use(createDatePlugin({
+*   adapter: new Vuetify0DateAdapter(),
+*   locale: 'de-DE',
+* }))
 * ```
 */
-function createDatePlugin(options = {}) {
+function createDatePlugin(options) {
 	const { namespace = "v0:date", ...dateOptions } = options;
 	const [, provideDateContext, context] = createDateContext({
 		namespace,
@@ -4754,16 +4183,26 @@ function createDatePlugin(options = {}) {
 /**
 * Returns the current date context.
 *
-* When called inside a component with a provided date context (via plugin or provider),
-* returns that context. Otherwise, returns a fallback context with Vuetify0DateAdapter.
+* Requires `createDatePlugin` to be installed with an adapter.
 *
 * @param namespace The namespace to look up (defaults to 'v0:date').
+* @template Z The date type used by the adapter.
 * @template E The date context type.
 * @returns The current date context.
+* @throws If called outside a component or without a date plugin installed.
 *
 * @see https://0.vuetifyjs.com/composables/plugins/use-date
 *
 * @example
+* ```ts
+* // main.ts
+* import { Vuetify0DateAdapter } from '@vuetify/v0/date'
+* import { createDatePlugin } from '@vuetify/v0'
+*
+* app.use(createDatePlugin({ adapter: new Vuetify0DateAdapter() }))
+* ```
+*
+* @example
 * ```vue
 * <script setup lang="ts">
 * import { useDate } from '@vuetify/v0'
@@ -4774,13 +4213,8 @@ function createDatePlugin(options = {}) {
 * ```
 */
 function useDate(namespace = "v0:date") {
-	const fallback = createDateFallback();
-	if (!instanceExists()) return fallback;
-	try {
-		return useContext(namespace, fallback);
-	} catch {
-		return fallback;
-	}
+	if (!instanceExists()) throw new Error("[v0] useDate() must be called inside a Vue component with createDatePlugin installed.\n\nExample:\n  import { Vuetify0DateAdapter } from '@vuetify/v0/date'\n  import { createDatePlugin } from '@vuetify/v0'\n\n  app.use(createDatePlugin({ adapter: new Vuetify0DateAdapter() }))");
+	return useContext(namespace);
 }
 
 //#endregion
@@ -5780,7 +5214,7 @@ function matchesKeyGroup(e, group, platformIsMac) {
 */
 function useIntersectionObserver(target, callback, options = {}) {
 	const { isHydrated } = useHydration();
-	const targetRef = isRef(target) ? target : shallowRef(target);
+	const targetRef = toRef(target);
 	const observer = shallowRef();
 	const isPaused = shallowRef(false);
 	const isIntersecting = shallowRef(false);
@@ -6181,6 +5615,7 @@ function usePrefersContrast() {
 */
 function useMutationObserver(target, callback, options = {}) {
 	const { isHydrated } = useHydration();
+	const targetRef = toRef(target);
 	const observer = shallowRef();
 	const isPaused = shallowRef(false);
 	const isActive = toRef(() => !!observer.value);
@@ -6195,7 +5630,7 @@ function useMutationObserver(target, callback, options = {}) {
 	};
 	function setup() {
 		if (/* @__PURE__ */ isNull(observer.value)) return;
-		if (!isHydrated.value || !SUPPORTS_MUTATION_OBSERVER || !target.value || isPaused.value) return;
+		if (!isHydrated.value || !SUPPORTS_MUTATION_OBSERVER || !targetRef.value || isPaused.value) return;
 		observer.value = new MutationObserver((mutations) => {
 			callback(mutations.map((mutation) => ({
 				type: mutation.type,
@@ -6210,7 +5645,7 @@ function useMutationObserver(target, callback, options = {}) {
 			})));
 			if (options.once) stop();
 		});
-		observer.value.observe(target.value, observerOptions);
+		observer.value.observe(targetRef.value, observerOptions);
 		if (options.immediate) {
 			const emptyNodeList = {
 				length: 0,
@@ -6220,7 +5655,7 @@ function useMutationObserver(target, callback, options = {}) {
 			};
 			callback([{
 				type: "childList",
-				target: target.value,
+				target: targetRef.value,
 				addedNodes: emptyNodeList,
 				removedNodes: emptyNodeList,
 				previousSibling: null,
@@ -6232,13 +5667,13 @@ function useMutationObserver(target, callback, options = {}) {
 			if (options.once) stop();
 		}
 	}
-	watch(() => target.value, (el, oldEl) => {
+	watch(() => targetRef.value, (el, oldEl) => {
 		if (oldEl) cleanup();
 		if (isHydrated.value && el) setup();
 	}, { immediate: true });
 	if (!isHydrated.value) {
 		const stopHydrationWatch = watch(() => isHydrated.value, (hydrated) => {
-			if (hydrated && target.value && !observer.value) {
+			if (hydrated && targetRef.value && !observer.value) {
 				setup();
 				stopHydrationWatch();
 			}
@@ -6273,23 +5708,526 @@ function useMutationObserver(target, callback, options = {}) {
 }
 
 //#endregion
-//#region src/composables/useResizeObserver/index.ts
+//#region src/composables/createNested/strategies.ts
 /**
-* @module useResizeObserver
+* Multiple open strategy: allows multiple nodes to be open simultaneously.
 *
 * @remarks
-* ResizeObserver composable with lifecycle management.
-*
-* Key features:
-* - ResizeObserver API wrapper
-* - Pause/resume/stop functionality
-* - Automatic cleanup on unmount
-* - SSR-safe (checks SUPPORTS_OBSERVER)
-* - Hydration-aware
-* - Box model options (content-box/border-box)
+* Perfect for tree views, file explorers, and nested menus where users expect
+* to keep multiple sections expanded at once.
 *
-* Perfect for responsive components and size-based rendering.
-*/
+* @example
+* ```ts
+* const tree = createNested({ openStrategy: multipleOpenStrategy })
+* tree.open('node-1')
+* tree.open('node-2')
+* // Both nodes are now open
+* ```
+*/
+const multipleOpenStrategy = {
+	onOpen: void 0,
+	onClose: void 0
+};
+/**
+* Single open strategy: only one node can be open at a time (accordion behavior).
+*
+* @remarks
+* Perfect for accordions, single-select navigation, and contexts where only
+* one section should be visible at a time.
+*
+* @example
+* ```ts
+* const tree = createNested({ openStrategy: singleOpenStrategy })
+* tree.open('node-1') // node-1 opens
+* tree.open('node-2') // node-1 closes, node-2 opens
+* ```
+*/
+const singleOpenStrategy = {
+	onOpen: (id, context) => {
+		for (const openedId of context.openedIds) if (openedId !== id) context.openedIds.delete(openedId);
+	},
+	onClose: void 0
+};
+
+//#endregion
+//#region src/composables/createNested/index.ts
+/**
+* @module createNested
+*
+* @remarks
+* Hierarchical tree management composable extending createGroup with:
+* - Parent-child relationship tracking (children/parents Maps)
+* - Open/close state management
+* - Tree traversal utilities (getPath, getDescendants, etc.)
+* - Pluggable open strategies
+*
+* Inheritance chain: createSelection → createGroup → createNested
+*/
+/**
+* Resolves open mode to an OpenStrategy.
+*/
+function resolveOpenStrategy(open = "multiple") {
+	return open === "single" ? singleOpenStrategy : multipleOpenStrategy;
+}
+/**
+* Creates a new nested tree instance with hierarchical management.
+*
+* Extends `createGroup` to support parent-child relationships, tree traversal,
+* and open/close state management. Perfect for tree views, nested navigation,
+* and hierarchical data structures.
+*
+* @param options The options for the nested instance.
+* @template Z The type of the nested ticket.
+* @template E The type of the nested context.
+* @returns A new nested instance with tree management capabilities.
+*
+* @remarks
+* **Key Differences from `createGroup`:**
+* - `register()` accepts `parentId` for establishing parent-child relationships
+* - `unregister()` accepts optional `cascade` parameter for cascading deletions
+* - Adds tree traversal methods: `getPath()`, `getAncestors()`, `getDescendants()`
+* - Adds computed properties: `roots`, `leaves`, `isLeaf()`, `getDepth()`
+* - Adds open state management: `open()`, `close()`, `flip()`, `opened()`
+*
+* @see https://0.vuetifyjs.com/composables/selection/use-nested
+*
+* @example
+* ```ts
+* import { createNested } from '@vuetify/v0'
+*
+* const tree = createNested()
+*
+* const root = tree.register({ id: 'root', value: 'Root' })
+* const child1 = tree.register({ id: 'child-1', value: 'Child 1', parentId: 'root' })
+* const child2 = tree.register({ id: 'child-2', value: 'Child 2', parentId: 'root' })
+*
+* console.log(tree.getPath('child-1')) // ['root', 'child-1']
+* console.log(tree.getDescendants('root')) // ['child-1', 'child-2']
+* console.log(tree.isLeaf('child-2')) // true
+*
+* tree.open('root')
+* console.log(tree.opened('root')) // true
+* ```
+*/
+function createNested(_options = {}) {
+	const { open: openMode = "multiple", openAll = false, reveal: revealOnOpen = false, selection: selectionMode = "cascade", openStrategy, ...options } = _options;
+	const resolvedOpenStrategy = openStrategy ?? resolveOpenStrategy(openMode);
+	const group = createGroup(options);
+	const logger$1 = useLogger();
+	const children = shallowReactive(/* @__PURE__ */ new Map());
+	const parents = shallowReactive(/* @__PURE__ */ new Map());
+	const openedIds = shallowReactive(/* @__PURE__ */ new Set());
+	const openedItems = computed(() => {
+		return new Set(Array.from(openedIds).map((id) => group.get(id)).filter((item) => !/* @__PURE__ */ isUndefined(item)));
+	});
+	const roots = computed(() => {
+		return group.values().filter((item) => /* @__PURE__ */ isUndefined(parents.get(item.id)));
+	});
+	const leaves = computed(() => {
+		return group.values().filter((item) => {
+			const childList = children.get(item.id);
+			return /* @__PURE__ */ isUndefined(childList) || childList.length === 0;
+		});
+	});
+	function opened(id) {
+		return openedIds.has(id);
+	}
+	function open(ids) {
+		for (const id of toArray(ids)) {
+			if (!group.has(id)) continue;
+			if (revealOnOpen) {
+				let parentId = parents.get(id);
+				while (!/* @__PURE__ */ isUndefined(parentId)) {
+					openedIds.add(parentId);
+					parentId = parents.get(parentId);
+				}
+			}
+			openedIds.add(id);
+			resolvedOpenStrategy.onOpen?.(id, context);
+		}
+	}
+	function close(ids) {
+		for (const id of toArray(ids)) {
+			if (!group.has(id)) continue;
+			openedIds.delete(id);
+			resolvedOpenStrategy.onClose?.(id, context);
+		}
+	}
+	function flip(ids) {
+		for (const id of toArray(ids)) {
+			if (!group.has(id)) continue;
+			if (opened(id)) close(id);
+			else open(id);
+		}
+	}
+	/**
+	* Open node(s) and their immediate non-leaf children.
+	* Useful for expanding a section with its immediate subcategories.
+	*/
+	function unfold(ids) {
+		for (const id of toArray(ids)) {
+			if (!group.has(id)) continue;
+			open(id);
+			const childIds = children.get(id) ?? [];
+			for (const childId of childIds) if (!isLeaf(childId)) open(childId);
+		}
+	}
+	/**
+	* Reveal a node by opening all its ancestors.
+	* Makes the node visible in a collapsed tree without opening the node itself.
+	*/
+	function reveal(ids) {
+		for (const id of toArray(ids)) {
+			if (!group.has(id)) continue;
+			const ancestorIds = getAncestors(id);
+			if (ancestorIds.length > 0) open(ancestorIds);
+		}
+	}
+	/**
+	* Fully expand a node and all its non-leaf descendants.
+	* Opens the entire subtree rooted at the given node.
+	*/
+	function expand(ids) {
+		for (const id of toArray(ids)) {
+			if (!group.has(id)) continue;
+			if (!isLeaf(id)) open(id);
+			for (const descendantId of getDescendants(id)) if (!isLeaf(descendantId)) open(descendantId);
+		}
+	}
+	function expandAll() {
+		for (const id of group.keys()) if (!isLeaf(id)) openedIds.add(id);
+	}
+	function collapseAll() {
+		openedIds.clear();
+	}
+	function getPath(id) {
+		const path = [];
+		let currentId = id;
+		while (!/* @__PURE__ */ isUndefined(currentId)) {
+			path.unshift(currentId);
+			currentId = parents.get(currentId);
+		}
+		return path;
+	}
+	function getAncestors(id) {
+		return getPath(id).slice(0, -1);
+	}
+	function getDescendants(id) {
+		const descendants = [];
+		const queue = [...children.get(id) ?? []];
+		let index = 0;
+		while (index < queue.length) {
+			const currentId = queue[index++];
+			descendants.push(currentId);
+			queue.push(...children.get(currentId) ?? []);
+		}
+		return descendants;
+	}
+	function isLeaf(id) {
+		const childList = children.get(id);
+		return /* @__PURE__ */ isUndefined(childList) || childList.length === 0;
+	}
+	function getDepth(id) {
+		return getAncestors(id).length;
+	}
+	/**
+	* Check if `ancestorId` is an ancestor of `descendantId`.
+	* Returns false if either ID doesn't exist in the tree.
+	*/
+	function isAncestorOf(ancestorId, descendantId) {
+		if (!group.has(ancestorId) || !group.has(descendantId)) return false;
+		if (ancestorId === descendantId) return false;
+		let currentId = parents.get(descendantId);
+		while (!/* @__PURE__ */ isUndefined(currentId)) {
+			if (currentId === ancestorId) return true;
+			currentId = parents.get(currentId);
+		}
+		return false;
+	}
+	/**
+	* Check if `id` has `ancestorId` as an ancestor.
+	* Semantic alias for isAncestorOf(ancestorId, id).
+	*/
+	function hasAncestor(id, ancestorId) {
+		return isAncestorOf(ancestorId, id);
+	}
+	/**
+	* Get siblings of a node (including self).
+	* For root nodes, returns all root IDs.
+	*/
+	function siblings(id) {
+		if (!group.has(id)) return [];
+		const parentId = parents.get(id);
+		if (/* @__PURE__ */ isUndefined(parentId)) return group.values().filter((item) => /* @__PURE__ */ isUndefined(parents.get(item.id))).map((item) => item.id);
+		return children.get(parentId) ?? [];
+	}
+	/**
+	* Get 1-indexed position among siblings (for aria-posinset).
+	* Returns 0 if node not found.
+	*/
+	function position(id) {
+		const index = siblings(id).indexOf(id);
+		return index === -1 ? 0 : index + 1;
+	}
+	function updateAncestors(id) {
+		const ancestorIds = getAncestors(id).toReversed();
+		for (const aid of ancestorIds) {
+			const childIds = children.get(aid) ?? [];
+			if (childIds.length === 0) continue;
+			const allSelected = childIds.every((cid) => group.selected(cid));
+			const someSelected = childIds.some((cid) => group.selected(cid) || group.mixed(cid));
+			if (allSelected) {
+				group.unmix(aid);
+				group.select(aid);
+			} else if (someSelected) {
+				group.unselect(aid);
+				group.mix(aid);
+			} else {
+				group.unmix(aid);
+				group.unselect(aid);
+			}
+		}
+	}
+	function getLeafDescendants(id) {
+		return getDescendants(id).filter((did) => isLeaf(did));
+	}
+	function select(ids) {
+		for (const id of toArray(ids)) {
+			if (!group.has(id)) continue;
+			if (selectionMode === "independent") group.select(id);
+			else if (selectionMode === "leaf") if (isLeaf(id)) group.select(id);
+			else for (const lid of getLeafDescendants(id)) group.select(lid);
+			else {
+				group.unmix(id);
+				group.select(id);
+				for (const did of getDescendants(id)) {
+					group.unmix(did);
+					group.select(did);
+				}
+				updateAncestors(id);
+			}
+		}
+	}
+	function unselect(ids) {
+		for (const id of toArray(ids)) {
+			if (!group.has(id)) continue;
+			if (selectionMode === "independent") group.unselect(id);
+			else if (selectionMode === "leaf") if (isLeaf(id)) group.unselect(id);
+			else for (const lid of getLeafDescendants(id)) group.unselect(lid);
+			else {
+				group.unmix(id);
+				group.unselect(id);
+				for (const did of getDescendants(id)) {
+					group.unmix(did);
+					group.unselect(did);
+				}
+				updateAncestors(id);
+			}
+		}
+	}
+	function toggle(ids) {
+		for (const id of toArray(ids)) if (selectionMode === "independent") group.toggle(id);
+		else if (selectionMode === "leaf") if (isLeaf(id)) group.toggle(id);
+		else {
+			const leafIds = getLeafDescendants(id);
+			if (leafIds.every((lid) => group.selected(lid))) for (const lid of leafIds) group.unselect(lid);
+			else for (const lid of leafIds) group.select(lid);
+		}
+		else if (group.selected(id) || group.mixed(id)) unselect(id);
+		else select(id);
+	}
+	/**
+	* Converts the tree to a flat array with parentId references.
+	* Useful for serialization or sending to APIs/AI systems.
+	*/
+	function toFlat() {
+		return group.values().map((item) => ({
+			id: item.id,
+			parentId: parents.get(item.id),
+			value: item.value
+		}));
+	}
+	function register(registration = {}) {
+		const id = registration.id ?? /* @__PURE__ */ useId();
+		const parentId = registration.parentId;
+		const nested = registration.children;
+		if (!/* @__PURE__ */ isUndefined(parentId) && !group.has(parentId)) logger$1.warn(`Parent with id "${parentId}" does not exist. Registering "${id}" without parent.`);
+		if (!/* @__PURE__ */ isUndefined(parentId) && group.has(parentId)) {
+			parents.set(id, parentId);
+			const list = children.get(parentId);
+			if (list) list.push(id);
+			else children.set(parentId, [id]);
+			if (openAll) openedIds.add(parentId);
+		} else parents.set(id, void 0);
+		const { children: _, ...rest } = registration;
+		const item = {
+			...rest,
+			id,
+			parentId: parents.get(id),
+			isOpen: toRef(() => opened(id)),
+			isLeaf: toRef(() => isLeaf(id)),
+			depth: toRef(() => getDepth(id)),
+			open: () => open(id),
+			close: () => close(id),
+			flip: () => flip(id),
+			reveal: () => reveal(id),
+			getPath: () => getPath(id),
+			getAncestors: () => getAncestors(id),
+			getDescendants: () => getDescendants(id),
+			isAncestorOf: (descendantId) => isAncestorOf(id, descendantId),
+			hasAncestor: (ancestorId) => hasAncestor(id, ancestorId),
+			siblings: () => siblings(id),
+			position: () => position(id)
+		};
+		const ticket = group.register(item);
+		if (nested?.length) for (const child of nested) register({
+			...child,
+			parentId: id
+		});
+		return ticket;
+	}
+	function unregister(id, cascade = false) {
+		if (!group.has(id)) return;
+		const parentId = parents.get(id);
+		if (!/* @__PURE__ */ isUndefined(parentId)) {
+			const siblings$1 = children.get(parentId);
+			if (siblings$1) {
+				const filtered = siblings$1.filter((sid) => sid !== id);
+				if (filtered.length === 0) children.delete(parentId);
+				else children.set(parentId, filtered);
+			}
+		}
+		const list = children.get(id);
+		if (list?.length) if (cascade) for (const did of getDescendants(id)) {
+			parents.delete(did);
+			children.delete(did);
+			openedIds.delete(did);
+			group.unregister(did);
+		}
+		else {
+			for (const did of getDescendants(id)) openedIds.delete(did);
+			for (const cid of list) parents.set(cid, void 0);
+		}
+		parents.delete(id);
+		children.delete(id);
+		openedIds.delete(id);
+		group.unregister(id);
+	}
+	function offboard(ids, cascade = false) {
+		for (const id of ids) unregister(id, cascade);
+	}
+	function onboard(registrations) {
+		return registrations.map((registration) => register(registration));
+	}
+	function clear() {
+		children.clear();
+		parents.clear();
+		openedIds.clear();
+		group.reset();
+	}
+	function reset() {
+		clear();
+	}
+	const context = {
+		...group,
+		children,
+		parents,
+		openedIds,
+		openedItems,
+		roots,
+		leaves,
+		getPath,
+		getAncestors,
+		getDescendants,
+		isLeaf,
+		getDepth,
+		isAncestorOf,
+		hasAncestor,
+		siblings,
+		position,
+		open,
+		close,
+		flip,
+		opened,
+		unfold,
+		reveal,
+		expand,
+		expandAll,
+		collapseAll,
+		toFlat,
+		openStrategy: resolvedOpenStrategy,
+		select,
+		unselect,
+		toggle,
+		register,
+		unregister,
+		offboard,
+		onboard,
+		clear,
+		reset,
+		get size() {
+			return group.size;
+		}
+	};
+	return context;
+}
+/**
+* Creates a new nested context with provide/inject pattern.
+*
+* @param options The options for the nested context.
+* @returns A trinity tuple [useNested, provideNested, defaultNested]
+*
+* @see https://0.vuetifyjs.com/composables/selection/use-nested
+*
+* @example
+* ```ts
+* import { createNestedContext } from '@vuetify/v0'
+*
+* export const [useTree, provideTree, tree] = createNestedContext()
+*
+* // In parent: provideTree()
+* // In child: const tree = useTree()
+* ```
+*/
+function createNestedContext(_options = {}) {
+	const { namespace = "v0:nested", ...options } = _options;
+	const [useNestedContext, _provideNestedContext] = createContext(namespace);
+	const context = createNested(options);
+	function provideNestedContext(_context = context, app) {
+		return _provideNestedContext(_context, app);
+	}
+	return createTrinity(useNestedContext, provideNestedContext, context);
+}
+/**
+* Returns the current nested instance from context.
+*
+* @param namespace The namespace for the nested context. Defaults to `'v0:nested'`.
+* @returns The current nested instance.
+*
+* @see https://0.vuetifyjs.com/composables/selection/use-nested
+*/
+function useNested(namespace = "v0:nested") {
+	return useContext(namespace);
+}
+
+//#endregion
+//#region src/composables/useResizeObserver/index.ts
+/**
+* @module useResizeObserver
+*
+* @remarks
+* ResizeObserver composable with lifecycle management.
+*
+* Key features:
+* - ResizeObserver API wrapper
+* - Pause/resume/stop functionality
+* - Automatic cleanup on unmount
+* - SSR-safe (checks SUPPORTS_OBSERVER)
+* - Hydration-aware
+* - Box model options (content-box/border-box)
+*
+* Perfect for responsive components and size-based rendering.
+*/
 /**
 * A composable that uses the Resize Observer API to detect when an element's
 * size changes.
@@ -6333,12 +6271,13 @@ function useMutationObserver(target, callback, options = {}) {
 */
 function useResizeObserver(target, callback, options = {}) {
 	const { isHydrated } = useHydration();
+	const targetRef = toRef(target);
 	const observer = shallowRef();
 	const isPaused = shallowRef(false);
 	const isActive = toRef(() => !!observer.value);
 	function setup() {
 		if (/* @__PURE__ */ isNull(observer.value)) return;
-		if (!isHydrated.value || !SUPPORTS_OBSERVER || !target.value || isPaused.value) return;
+		if (!isHydrated.value || !SUPPORTS_OBSERVER || !targetRef.value || isPaused.value) return;
 		observer.value = new ResizeObserver((entries) => {
 			callback(entries.map((entry) => ({
 				contentRect: {
@@ -6351,9 +6290,9 @@ function useResizeObserver(target, callback, options = {}) {
 			})));
 			if (options.once) stop();
 		});
-		observer.value.observe(target.value, { box: options.box || "content-box" });
+		observer.value.observe(targetRef.value, { box: options.box || "content-box" });
 		if (options.immediate) {
-			const rect = target.value.getBoundingClientRect();
+			const rect = targetRef.value.getBoundingClientRect();
 			callback([{
 				contentRect: {
 					width: rect.width,
@@ -6361,17 +6300,17 @@ function useResizeObserver(target, callback, options = {}) {
 					top: rect.top,
 					left: rect.left
 				},
-				target: target.value
+				target: targetRef.value
 			}]);
 		}
 	}
-	watch(() => target.value, (el, oldEl) => {
+	watch(() => targetRef.value, (el, oldEl) => {
 		if (oldEl) cleanup();
 		if (isHydrated.value && el) setup();
 	}, { immediate: true });
 	if (!isHydrated.value) {
 		const stopHydrationWatch = watch(() => isHydrated.value, (hydrated) => {
-			if (hydrated && target.value && !observer.value) {
+			if (hydrated && targetRef.value && !observer.value) {
 				setup();
 				stopHydrationWatch();
 			}
@@ -7128,7 +7067,7 @@ function createQueue(_options = {}) {
 		}
 	}
 	function register(registration = {}) {
-		const id = registration.id ?? /* @__PURE__ */ genId();
+		const id = registration.id ?? /* @__PURE__ */ useId();
 		const timeout = Object.prototype.hasOwnProperty.call(registration, "timeout") ? registration.timeout : _timeout;
 		const ticket = {
 			...registration,
@@ -8841,7 +8780,7 @@ function useClickOutside(target, handler, options = {}) {
 
 //#endregion
 //#region src/components/Dialog/DialogContent.vue
-const _sfc_main$31 = /* @__PURE__ */ defineComponent({
+const _sfc_main$35 = /* @__PURE__ */ defineComponent({
 	name: "DialogContent",
 	__name: "DialogContent",
 	props: {
@@ -8907,11 +8846,11 @@ const _sfc_main$31 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var DialogContent_default = _sfc_main$31;
+var DialogContent_default = _sfc_main$35;
 
 //#endregion
 //#region src/components/Dialog/DialogDescription.vue
-const _sfc_main$30 = /* @__PURE__ */ defineComponent({
+const _sfc_main$34 = /* @__PURE__ */ defineComponent({
 	name: "DialogDescription",
 	__name: "DialogDescription",
 	props: {
@@ -8930,11 +8869,11 @@ const _sfc_main$30 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var DialogDescription_default = _sfc_main$30;
+var DialogDescription_default = _sfc_main$34;
 
 //#endregion
 //#region src/components/Dialog/DialogTitle.vue
-const _sfc_main$29 = /* @__PURE__ */ defineComponent({
+const _sfc_main$33 = /* @__PURE__ */ defineComponent({
 	name: "DialogTitle",
 	__name: "DialogTitle",
 	props: {
@@ -8953,11 +8892,11 @@ const _sfc_main$29 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var DialogTitle_default = _sfc_main$29;
+var DialogTitle_default = _sfc_main$33;
 
 //#endregion
 //#region src/components/Dialog/DialogActivator.vue
-const _sfc_main$28 = /* @__PURE__ */ defineComponent({
+const _sfc_main$32 = /* @__PURE__ */ defineComponent({
 	name: "DialogActivator",
 	__name: "DialogActivator",
 	props: {
@@ -8987,7 +8926,7 @@ const _sfc_main$28 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var DialogActivator_default = _sfc_main$28;
+var DialogActivator_default = _sfc_main$32;
 
 //#endregion
 //#region src/components/Dialog/index.ts
@@ -9032,7 +8971,7 @@ const Dialog = {
 //#endregion
 //#region src/components/ExpansionPanel/ExpansionPanelRoot.vue
 const [useExpansionPanelRoot, provideExpansionPanelSelection] = createContext();
-const _sfc_main$27 = /* @__PURE__ */ defineComponent({
+const _sfc_main$31 = /* @__PURE__ */ defineComponent({
 	name: "ExpansionPanelRoot",
 	__name: "ExpansionPanelRoot",
 	props: /* @__PURE__ */ mergeModels({
@@ -9089,12 +9028,12 @@ const _sfc_main$27 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var ExpansionPanelRoot_default = _sfc_main$27;
+var ExpansionPanelRoot_default = _sfc_main$31;
 
 //#endregion
 //#region src/components/ExpansionPanel/ExpansionPanelItem.vue
 const [useExpansionPanelItem, provideExpansionPanelItem] = createContext({ suffix: "item" });
-const _sfc_main$26 = /* @__PURE__ */ defineComponent({
+const _sfc_main$30 = /* @__PURE__ */ defineComponent({
 	name: "ExpansionPanelItem",
 	__name: "ExpansionPanelItem",
 	props: {
@@ -9138,11 +9077,11 @@ const _sfc_main$26 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var ExpansionPanelItem_default = _sfc_main$26;
+var ExpansionPanelItem_default = _sfc_main$30;
 
 //#endregion
 //#region src/components/ExpansionPanel/ExpansionPanelActivator.vue
-const _sfc_main$25 = /* @__PURE__ */ defineComponent({
+const _sfc_main$29 = /* @__PURE__ */ defineComponent({
 	name: "ExpansionPanelActivator",
 	__name: "ExpansionPanelActivator",
 	props: {
@@ -9188,11 +9127,11 @@ const _sfc_main$25 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var ExpansionPanelActivator_default = _sfc_main$25;
+var ExpansionPanelActivator_default = _sfc_main$29;
 
 //#endregion
 //#region src/components/ExpansionPanel/ExpansionPanelContent.vue
-const _sfc_main$24 = /* @__PURE__ */ defineComponent({
+const _sfc_main$28 = /* @__PURE__ */ defineComponent({
 	name: "ExpansionPanelContent",
 	__name: "ExpansionPanelContent",
 	props: {
@@ -9223,11 +9162,11 @@ const _sfc_main$24 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var ExpansionPanelContent_default = _sfc_main$24;
+var ExpansionPanelContent_default = _sfc_main$28;
 
 //#endregion
 //#region src/components/ExpansionPanel/ExpansionPanelHeader.vue
-const _sfc_main$23 = /* @__PURE__ */ defineComponent({
+const _sfc_main$27 = /* @__PURE__ */ defineComponent({
 	name: "ExpansionPanelHeader",
 	__name: "ExpansionPanelHeader",
 	props: {
@@ -9252,7 +9191,7 @@ const _sfc_main$23 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var ExpansionPanelHeader_default = _sfc_main$23;
+var ExpansionPanelHeader_default = _sfc_main$27;
 
 //#endregion
 //#region src/components/ExpansionPanel/index.ts
@@ -9272,7 +9211,7 @@ const ExpansionPanel = {
 //#endregion
 //#region src/components/Group/GroupRoot.vue
 const [useGroupRoot, provideGroupRoot] = createContext();
-const _sfc_main$22 = /* @__PURE__ */ defineComponent({
+const _sfc_main$26 = /* @__PURE__ */ defineComponent({
 	name: "GroupRoot",
 	__name: "GroupRoot",
 	props: /* @__PURE__ */ mergeModels({
@@ -9322,11 +9261,11 @@ const _sfc_main$22 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var GroupRoot_default = _sfc_main$22;
+var GroupRoot_default = _sfc_main$26;
 
 //#endregion
 //#region src/components/Group/GroupItem.vue
-const _sfc_main$21 = /* @__PURE__ */ defineComponent({
+const _sfc_main$25 = /* @__PURE__ */ defineComponent({
 	name: "GroupItem",
 	__name: "GroupItem",
 	props: {
@@ -9375,7 +9314,7 @@ const _sfc_main$21 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var GroupItem_default = _sfc_main$21;
+var GroupItem_default = _sfc_main$25;
 
 //#endregion
 //#region src/components/Group/index.ts
@@ -9394,7 +9333,7 @@ const Group = {
 const [usePaginationRoot, providePaginationRoot] = createContext();
 const [usePaginationControls, providePaginationControls] = createContext({ suffix: "controls" });
 const [usePaginationItems, providePaginationItems] = createContext({ suffix: "items" });
-const _sfc_main$20 = /* @__PURE__ */ defineComponent({
+const _sfc_main$24 = /* @__PURE__ */ defineComponent({
 	name: "PaginationRoot",
 	__name: "PaginationRoot",
 	props: /* @__PURE__ */ mergeModels({
@@ -9494,17 +9433,17 @@ const _sfc_main$20 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var PaginationRoot_default = _sfc_main$20;
+var PaginationRoot_default = _sfc_main$24;
 
 //#endregion
 //#region src/components/Pagination/PaginationEllipsis.vue
-const _sfc_main$19 = /* @__PURE__ */ defineComponent({
+const _sfc_main$23 = /* @__PURE__ */ defineComponent({
 	name: "PaginationEllipsis",
 	__name: "PaginationEllipsis",
 	props: {
 		namespace: { default: "v0:pagination" },
 		ellipsis: {},
-		id: { default: () => /* @__PURE__ */ genId() },
+		id: { default: () => useId$1() },
 		as: { default: "span" },
 		renderless: { type: Boolean }
 	},
@@ -9539,17 +9478,17 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var PaginationEllipsis_default = _sfc_main$19;
+var PaginationEllipsis_default = _sfc_main$23;
 
 //#endregion
 //#region src/components/Pagination/PaginationFirst.vue
-const _sfc_main$18 = /* @__PURE__ */ defineComponent({
+const _sfc_main$22 = /* @__PURE__ */ defineComponent({
 	name: "PaginationFirst",
 	__name: "PaginationFirst",
 	props: {
 		namespace: { default: "v0:pagination" },
 		disabled: { type: Boolean },
-		id: { default: () => /* @__PURE__ */ genId() },
+		id: { default: () => useId$1() },
 		as: { default: "button" },
 		renderless: { type: Boolean }
 	},
@@ -9598,11 +9537,11 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var PaginationFirst_default = _sfc_main$18;
+var PaginationFirst_default = _sfc_main$22;
 
 //#endregion
 //#region src/components/Pagination/PaginationItem.vue
-const _sfc_main$17 = /* @__PURE__ */ defineComponent({
+const _sfc_main$21 = /* @__PURE__ */ defineComponent({
 	name: "PaginationItem",
 	__name: "PaginationItem",
 	props: {
@@ -9612,7 +9551,7 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			default: false
 		},
-		id: { default: () => /* @__PURE__ */ genId() },
+		id: { default: () => useId$1() },
 		as: { default: "button" },
 		renderless: { type: Boolean }
 	},
@@ -9668,17 +9607,17 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var PaginationItem_default = _sfc_main$17;
+var PaginationItem_default = _sfc_main$21;
 
 //#endregion
 //#region src/components/Pagination/PaginationLast.vue
-const _sfc_main$16 = /* @__PURE__ */ defineComponent({
+const _sfc_main$20 = /* @__PURE__ */ defineComponent({
 	name: "PaginationLast",
 	__name: "PaginationLast",
 	props: {
 		namespace: { default: "v0:pagination" },
 		disabled: { type: Boolean },
-		id: { default: () => /* @__PURE__ */ genId() },
+		id: { default: () => useId$1() },
 		as: { default: "button" },
 		renderless: { type: Boolean }
 	},
@@ -9727,17 +9666,17 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var PaginationLast_default = _sfc_main$16;
+var PaginationLast_default = _sfc_main$20;
 
 //#endregion
 //#region src/components/Pagination/PaginationNext.vue
-const _sfc_main$15 = /* @__PURE__ */ defineComponent({
+const _sfc_main$19 = /* @__PURE__ */ defineComponent({
 	name: "PaginationNext",
 	__name: "PaginationNext",
 	props: {
 		namespace: { default: "v0:pagination" },
 		disabled: { type: Boolean },
-		id: { default: () => /* @__PURE__ */ genId() },
+		id: { default: () => useId$1() },
 		as: { default: "button" },
 		renderless: { type: Boolean }
 	},
@@ -9786,17 +9725,17 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var PaginationNext_default = _sfc_main$15;
+var PaginationNext_default = _sfc_main$19;
 
 //#endregion
 //#region src/components/Pagination/PaginationPrev.vue
-const _sfc_main$14 = /* @__PURE__ */ defineComponent({
+const _sfc_main$18 = /* @__PURE__ */ defineComponent({
 	name: "PaginationPrev",
 	__name: "PaginationPrev",
 	props: {
 		namespace: { default: "v0:pagination" },
 		disabled: { type: Boolean },
-		id: { default: () => /* @__PURE__ */ genId() },
+		id: { default: () => useId$1() },
 		as: { default: "button" },
 		renderless: { type: Boolean }
 	},
@@ -9845,11 +9784,11 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var PaginationPrev_default = _sfc_main$14;
+var PaginationPrev_default = _sfc_main$18;
 
 //#endregion
 //#region src/components/Pagination/PaginationStatus.vue
-const _sfc_main$13 = /* @__PURE__ */ defineComponent({
+const _sfc_main$17 = /* @__PURE__ */ defineComponent({
 	name: "PaginationStatus",
 	__name: "PaginationStatus",
 	props: {
@@ -9893,7 +9832,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var PaginationStatus_default = _sfc_main$13;
+var PaginationStatus_default = _sfc_main$17;
 
 //#endregion
 //#region src/components/Pagination/index.ts
@@ -9916,7 +9855,7 @@ const Pagination = {
 //#endregion
 //#region src/components/Popover/PopoverRoot.vue
 const [usePopoverContext, providePopoverContext] = createContext("Popover");
-const _sfc_main$12 = /* @__PURE__ */ defineComponent({
+const _sfc_main$16 = /* @__PURE__ */ defineComponent({
 	name: "PopoverRoot",
 	__name: "PopoverRoot",
 	props: /* @__PURE__ */ mergeModels({
@@ -9932,19 +9871,18 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
 	}),
 	emits: ["update:modelValue"],
 	setup(__props) {
-		const props = createPropsRestProxy(__props, ["as"]);
 		const isSelected = useModel(__props, "modelValue");
-		const id = toRef(() => props.id ?? useId());
+		const id = __props.id ?? useId$1();
 		function toggle() {
 			isSelected.value = !isSelected.value;
 		}
 		providePopoverContext({
 			isSelected,
 			toggle,
-			id: toValue(id)
+			id
 		});
 		const slotProps = toRef(() => ({
-			id: toValue(id),
+			id,
 			isSelected: isSelected.value,
 			toggle
 		}));
@@ -9959,11 +9897,11 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var PopoverRoot_default = _sfc_main$12;
+var PopoverRoot_default = _sfc_main$16;
 
 //#endregion
 //#region src/components/Popover/PopoverActivator.vue
-const _sfc_main$11 = /* @__PURE__ */ defineComponent({
+const _sfc_main$15 = /* @__PURE__ */ defineComponent({
 	name: "PopoverActivator",
 	__name: "PopoverActivator",
 	props: {
@@ -9995,11 +9933,11 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var PopoverActivator_default = _sfc_main$11;
+var PopoverActivator_default = _sfc_main$15;
 
 //#endregion
 //#region src/components/Popover/PopoverContent.vue
-const _sfc_main$10 = /* @__PURE__ */ defineComponent({
+const _sfc_main$14 = /* @__PURE__ */ defineComponent({
 	name: "PopoverContent",
 	__name: "PopoverContent",
 	props: {
@@ -10063,7 +10001,7 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var PopoverContent_default = _sfc_main$10;
+var PopoverContent_default = _sfc_main$14;
 
 //#endregion
 //#region src/components/Popover/index.ts
@@ -10081,7 +10019,7 @@ const Popover = {
 //#endregion
 //#region src/components/Radio/RadioGroup.vue
 const [useRadioGroup, provideRadioGroup] = createContext();
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$13 = /* @__PURE__ */ defineComponent({
 	name: "RadioGroup",
 	__name: "RadioGroup",
 	props: /* @__PURE__ */ mergeModels({
@@ -10140,17 +10078,17 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var RadioGroup_default = _sfc_main$9;
+var RadioGroup_default = _sfc_main$13;
 
 //#endregion
 //#region src/components/Radio/RadioRoot.vue
 const [useRadioRoot, provideRadioRoot] = createContext();
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$12 = /* @__PURE__ */ defineComponent({
 	name: "RadioRoot",
 	inheritAttrs: false,
 	__name: "RadioRoot",
 	props: {
-		id: { default: () => /* @__PURE__ */ genId() },
+		id: { default: () => useId$1() },
 		label: {},
 		value: {},
 		name: {},
@@ -10270,7 +10208,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var RadioRoot_default = _sfc_main$8;
+var RadioRoot_default = _sfc_main$12;
 
 //#endregion
 //#region src/components/Radio/RadioHiddenInput.vue
@@ -10292,7 +10230,7 @@ const visuallyHiddenStyle = {
 	whiteSpace: "nowrap",
 	border: "0"
 };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$11 = /* @__PURE__ */ defineComponent({
 	name: "RadioHiddenInput",
 	__name: "RadioHiddenInput",
 	props: {
@@ -10327,11 +10265,11 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var RadioHiddenInput_default = _sfc_main$7;
+var RadioHiddenInput_default = _sfc_main$11;
 
 //#endregion
 //#region src/components/Radio/RadioIndicator.vue
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$10 = /* @__PURE__ */ defineComponent({
 	name: "RadioIndicator",
 	__name: "RadioIndicator",
 	props: {
@@ -10361,7 +10299,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var RadioIndicator_default = _sfc_main$6;
+var RadioIndicator_default = _sfc_main$10;
 
 //#endregion
 //#region src/components/Radio/index.ts
@@ -10407,7 +10345,7 @@ const Radio = {
 //#endregion
 //#region src/components/Selection/SelectionRoot.vue
 const [useSelectionRoot, provideSelectionRoot] = createContext();
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
 	name: "SelectionRoot",
 	__name: "SelectionRoot",
 	props: /* @__PURE__ */ mergeModels({
@@ -10457,11 +10395,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var SelectionRoot_default = _sfc_main$5;
+var SelectionRoot_default = _sfc_main$9;
 
 //#endregion
 //#region src/components/Selection/SelectionItem.vue
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
 	name: "SelectionItem",
 	__name: "SelectionItem",
 	props: {
@@ -10503,7 +10441,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var SelectionItem_default = _sfc_main$4;
+var SelectionItem_default = _sfc_main$8;
 
 //#endregion
 //#region src/components/Selection/index.ts
@@ -10520,7 +10458,7 @@ const Selection = {
 //#endregion
 //#region src/components/Single/SingleRoot.vue
 const [useSingleRoot, provideSingleRoot] = createContext();
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
 	name: "SingleRoot",
 	__name: "SingleRoot",
 	props: /* @__PURE__ */ mergeModels({
@@ -10564,11 +10502,11 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var SingleRoot_default = _sfc_main$3;
+var SingleRoot_default = _sfc_main$7;
 
 //#endregion
 //#region src/components/Single/SingleItem.vue
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
 	name: "SingleItem",
 	__name: "SingleItem",
 	props: {
@@ -10610,7 +10548,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var SingleItem_default = _sfc_main$2;
+var SingleItem_default = _sfc_main$6;
 
 //#endregion
 //#region src/components/Single/index.ts
@@ -10627,7 +10565,7 @@ const Single = {
 //#endregion
 //#region src/components/Step/StepRoot.vue
 const [useStepRoot, provideStepRoot] = createContext();
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 	name: "StepRoot",
 	__name: "StepRoot",
 	props: /* @__PURE__ */ mergeModels({
@@ -10676,11 +10614,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var StepRoot_default = _sfc_main$1;
+var StepRoot_default = _sfc_main$5;
 
 //#endregion
 //#region src/components/Step/StepItem.vue
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
 	name: "StepItem",
 	__name: "StepItem",
 	props: {
@@ -10722,7 +10660,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var StepItem_default = _sfc_main;
+var StepItem_default = _sfc_main$4;
 
 //#endregion
 //#region src/components/Step/index.ts
@@ -10737,4 +10675,326 @@ const Step = {
 };
 
 //#endregion
-export { Atom_default as Atom, Avatar, AvatarFallback_default as AvatarFallback, AvatarImage_default as AvatarImage, AvatarRoot_default as AvatarRoot, COMMON_ELEMENTS, Checkbox, CheckboxGroup_default as CheckboxGroup, CheckboxHiddenInput_default as CheckboxHiddenInput, CheckboxIndicator_default as CheckboxIndicator, CheckboxRoot_default as CheckboxRoot, CheckboxSelectAll_default as CheckboxSelectAll, ConsolaLoggerAdapter, 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, 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, Selection, SelectionItem_default as SelectionItem, SelectionRoot_default as SelectionRoot, Single, SingleItem_default as SingleItem, SingleRoot_default as SingleRoot, Step, StepItem_default as StepItem, StepRoot_default as StepRoot, Vuetify0DateAdapter, Vuetify0LocaleAdapter, Vuetify0LoggerAdapter, Vuetify0ThemeAdapter, __LOGGER_ENABLED__, clamp, createBreakpoints, createBreakpointsContext, createBreakpointsPlugin, createContext, createDate, createDateContext, createDateFallback, createDatePlugin, createFallbackHydration, createFeatures, createFeaturesContext, createFeaturesPlugin, createFilter, createFilterContext, createForm, createFormContext, createGroup, createGroupContext, createHydration, createHydrationContext, createHydrationPlugin, createLocale, createLocaleContext, createLocaleFallback, createLocalePlugin, createLogger, createLoggerContext, createLoggerPlugin, createOverflow, createOverflowContext, createPagination, createPaginationContext, createPermissions, createPermissionsContext, createPermissionsPlugin, createPlugin, createQueue, createQueueContext, createRegistry, createRegistryContext, createSelection, createSelectionContext, createSingle, createSingleContext, createStep, createStepContext, createStorage, createStorageContext, createStoragePlugin, createTheme, createThemeContext, createThemePlugin, createTimeline, createTimelineContext, createTokens, createTokensContext, createTrinity, debounce, genId, instanceExists, instanceName, isArray, isBoolean, isFunction, isNaN, isNull, isNullOrUndefined, isNumber, isObject, isPrimitive, isSelfClosingTag, isString, isSymbol, isUndefined, mergeDeep, provideAvatarContext, provideCheckboxGroup, provideCheckboxRoot, provideContext, provideDialogContext, provideExpansionPanelItem, provideExpansionPanelSelection, provideGroupRoot, providePaginationControls, providePaginationItems, providePaginationRoot, providePopoverContext, provideRadioGroup, provideRadioRoot, provideSelectionRoot, provideSingleRoot, provideStepRoot, range, toArray, toReactive, useAvatarRoot, useBreakpoints, useCheckboxGroup, useCheckboxRoot, useClickOutside, useContext, useDate, useDialogContext, useDocumentEventListener, useElementIntersection, useElementSize, useEventListener, useExpansionPanelItem, useExpansionPanelRoot, useFeatures, useFilter, useFilterContext, useForm, useGroup, useGroupRoot, useHotkey, useHydration, useIntersectionObserver, useLazy, useLocale, useLogger, useMediaQuery, useMutationObserver, useOverflow, usePagination, usePaginationControls, usePaginationItems, usePaginationRoot, usePermissions, usePopoverContext, usePrefersContrast, usePrefersDark, usePrefersReducedMotion, useProxyModel, useProxyRegistry, useQueue, useRadioGroup, useRadioRoot, useResizeObserver, useSelection, useSelectionRoot, useSingle, useSingleRoot, useStep, useStepRoot, useStorage, useTheme, useTimeline, useToggleScope, useTokens, useVirtual, useWindowEventListener, version };
+//#region src/components/Tabs/TabsRoot.vue
+const [useTabsRoot, provideTabsRoot] = createContext();
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+	name: "TabsRoot",
+	__name: "TabsRoot",
+	props: /* @__PURE__ */ mergeModels({
+		namespace: { default: "v0:tabs" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		enroll: {
+			type: Boolean,
+			default: false
+		},
+		mandatory: {
+			type: [Boolean, String],
+			default: "force"
+		},
+		circular: {
+			type: Boolean,
+			default: true
+		},
+		orientation: { default: "horizontal" },
+		activation: { default: "automatic" }
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels(["update:model-value"], ["update:modelValue"]),
+	setup(__props) {
+		const model = useModel(__props, "modelValue");
+		const rootId = useId$1();
+		const step = createStep({
+			disabled: toRef(() => __props.disabled),
+			enroll: __props.enroll,
+			mandatory: __props.mandatory,
+			circular: __props.circular,
+			events: true
+		});
+		useProxyModel(step, model, { multiple: false });
+		const context = {
+			...step,
+			orientation: toRef(() => __props.orientation),
+			activation: toRef(() => __props.activation),
+			circular: toRef(() => __props.circular),
+			rootId
+		};
+		provideTabsRoot(__props.namespace, context);
+		const slotProps = toRef(() => ({
+			isDisabled: toValue(step.disabled),
+			orientation: __props.orientation,
+			activation: __props.activation,
+			first: step.first,
+			last: step.last,
+			next: step.next,
+			prev: step.prev,
+			step: step.step,
+			select: step.select,
+			unselect: step.unselect,
+			toggle: step.toggle,
+			attrs: { "aria-multiselectable": false }
+		}));
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)));
+		};
+	}
+});
+var TabsRoot_default = _sfc_main$3;
+
+//#endregion
+//#region src/components/Tabs/TabsList.vue
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+	name: "TabsList",
+	inheritAttrs: false,
+	__name: "TabsList",
+	props: {
+		label: {},
+		namespace: { default: "v0:tabs" },
+		as: { default: "div" },
+		renderless: { type: Boolean }
+	},
+	setup(__props) {
+		const attrs = useAttrs();
+		const tabs = useTabsRoot(__props.namespace);
+		const isDisabled = toRef(() => toValue(tabs.disabled));
+		const slotProps = toRef(() => ({
+			orientation: tabs.orientation.value,
+			isDisabled: isDisabled.value,
+			attrs: {
+				"role": "tablist",
+				"aria-orientation": tabs.orientation.value,
+				"aria-label": __props.label,
+				"aria-disabled": isDisabled.value || void 0,
+				"data-disabled": isDisabled.value || void 0
+			}
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(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"]);
+		};
+	}
+});
+var TabsList_default = _sfc_main$2;
+
+//#endregion
+//#region src/components/Tabs/TabsItem.vue
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+	name: "TabsItem",
+	inheritAttrs: false,
+	__name: "TabsItem",
+	props: {
+		id: {},
+		value: {},
+		disabled: {},
+		namespace: { default: "v0:tabs" },
+		ariaLabel: {},
+		ariaLabelledby: {},
+		ariaDescribedby: {},
+		as: { default: "button" },
+		renderless: { type: Boolean }
+	},
+	setup(__props) {
+		const attrs = useAttrs();
+		const rootRef = useTemplateRef("root");
+		const tabs = useTabsRoot(__props.namespace);
+		const el = toRef(() => rootRef.value?.element ?? void 0);
+		const ticket = tabs.register({
+			id: __props.id,
+			value: __props.value,
+			disabled: __props.disabled,
+			el
+		});
+		const isDisabled = toRef(() => toValue(ticket.disabled) || toValue(tabs.disabled));
+		const tabId = toRef(() => `${tabs.rootId}-tab-${ticket.id}`);
+		const panelId = toRef(() => `${tabs.rootId}-panel-${ticket.id}`);
+		onUnmounted(() => {
+			tabs.unregister(ticket.id);
+		});
+		function focusSelectedTab() {
+			nextTick(() => {
+				const selected = tabs.selectedItem.value;
+				if (selected) toValue(selected.el)?.focus();
+			});
+		}
+		function onKeydown(e) {
+			const isHorizontal = tabs.orientation.value === "horizontal";
+			if (isHorizontal && e.key === "ArrowRight" || !isHorizontal && e.key === "ArrowDown") {
+				e.preventDefault();
+				tabs.next();
+				focusSelectedTab();
+				return;
+			}
+			if (isHorizontal && e.key === "ArrowLeft" || !isHorizontal && e.key === "ArrowUp") {
+				e.preventDefault();
+				tabs.prev();
+				focusSelectedTab();
+				return;
+			}
+			if (e.key === "Home") {
+				e.preventDefault();
+				tabs.first();
+				focusSelectedTab();
+				return;
+			}
+			if (e.key === "End") {
+				e.preventDefault();
+				tabs.last();
+				focusSelectedTab();
+				return;
+			}
+			if (tabs.activation.value === "manual" && (e.key === "Enter" || e.key === " ")) {
+				e.preventDefault();
+				ticket.select();
+			}
+		}
+		function onClick() {
+			if (!isDisabled.value) ticket.select();
+		}
+		function onFocus() {
+			if (tabs.activation.value === "automatic" && !isDisabled.value) ticket.select();
+		}
+		const slotProps = toRef(() => ({
+			id: String(ticket.id),
+			isSelected: toValue(ticket.isSelected),
+			isDisabled: toValue(isDisabled),
+			select: ticket.select,
+			attrs: {
+				"id": tabId.value,
+				"role": "tab",
+				"tabindex": toValue(ticket.isSelected) ? 0 : -1,
+				"aria-selected": toValue(ticket.isSelected),
+				"aria-controls": panelId.value,
+				"aria-disabled": toValue(isDisabled) || void 0,
+				"aria-label": __props.ariaLabel,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-describedby": __props.ariaDescribedby,
+				"data-selected": toValue(ticket.isSelected) || void 0,
+				"data-disabled": toValue(isDisabled) || void 0,
+				"disabled": __props.as === "button" ? toValue(isDisabled) : void 0,
+				"type": __props.as === "button" ? "button" : void 0,
+				"onClick": onClick,
+				"onKeydown": onKeydown,
+				"onFocus": onFocus
+			}
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Atom_default), mergeProps({ ref: "root" }, {
+				...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"]);
+		};
+	}
+});
+var TabsItem_default = _sfc_main$1;
+
+//#endregion
+//#region src/components/Tabs/TabsPanel.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "TabsPanel",
+	inheritAttrs: false,
+	__name: "TabsPanel",
+	props: {
+		value: {},
+		namespace: { default: "v0:tabs" },
+		as: { default: "div" },
+		renderless: { type: Boolean }
+	},
+	setup(__props) {
+		const attrs = useAttrs();
+		const tabs = useTabsRoot(__props.namespace);
+		const ticket = toRef(() => {
+			const ids = tabs.browse(__props.value);
+			if (ids && ids.length > 0) return tabs.get(ids[0]) ?? null;
+			return null;
+		});
+		const isSelected = toRef(() => {
+			const t = ticket.value;
+			return t ? toValue(t.isSelected) : false;
+		});
+		const ticketId = toRef(() => ticket.value?.id ?? __props.value);
+		const panelId = toRef(() => `${tabs.rootId}-panel-${ticketId.value}`);
+		const tabId = toRef(() => `${tabs.rootId}-tab-${ticketId.value}`);
+		const slotProps = toRef(() => ({
+			isSelected: isSelected.value,
+			attrs: {
+				"id": panelId.value,
+				"role": "tabpanel",
+				"aria-labelledby": tabId.value,
+				"tabindex": isSelected.value ? 0 : -1,
+				"hidden": !isSelected.value,
+				"data-selected": isSelected.value || void 0
+			}
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(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"]);
+		};
+	}
+});
+var TabsPanel_default = _sfc_main;
+
+//#endregion
+//#region src/components/Tabs/index.ts
+/**
+* Tabs component with sub-components for building accessible tab interfaces.
+*
+* @see https://0.vuetifyjs.com/components/tabs
+*
+* @example
+* ```vue
+* <script lang="ts" setup>
+*   import { Tabs } from '@vuetify/v0'
+*
+*   const selected = ref('profile')
+* <\/script>
+*
+* <template>
+*   <Tabs.Root v-model="selected">
+*     <Tabs.List label="Account settings">
+*       <Tabs.Item value="profile">Profile</Tabs.Item>
+*       <Tabs.Item value="password">Password</Tabs.Item>
+*       <Tabs.Item value="billing" disabled>Billing</Tabs.Item>
+*     </Tabs.List>
+*
+*     <Tabs.Panel value="profile">Profile content</Tabs.Panel>
+*     <Tabs.Panel value="password">Password content</Tabs.Panel>
+*     <Tabs.Panel value="billing">Billing content</Tabs.Panel>
+*   </Tabs.Root>
+* </template>
+* ```
+*/
+const Tabs = {
+	Root: TabsRoot_default,
+	List: TabsList_default,
+	Item: TabsItem_default,
+	Panel: TabsPanel_default
+};
+
+//#endregion
+export { Atom_default as Atom, Avatar, AvatarFallback_default as AvatarFallback, AvatarImage_default as AvatarImage, AvatarRoot_default as AvatarRoot, COMMON_ELEMENTS, Checkbox, CheckboxGroup_default as CheckboxGroup, CheckboxHiddenInput_default as CheckboxHiddenInput, CheckboxIndicator_default as CheckboxIndicator, CheckboxRoot_default as CheckboxRoot, CheckboxSelectAll_default as CheckboxSelectAll, ConsolaLoggerAdapter, 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, 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, Selection, SelectionItem_default as SelectionItem, SelectionRoot_default as SelectionRoot, Single, SingleItem_default as SingleItem, SingleRoot_default as SingleRoot, Step, StepItem_default as StepItem, StepRoot_default as StepRoot, Tabs, TabsItem_default as TabsItem, TabsList_default as TabsList, TabsPanel_default as TabsPanel, TabsRoot_default as TabsRoot, Vuetify0LocaleAdapter, Vuetify0LoggerAdapter, Vuetify0ThemeAdapter, __LOGGER_ENABLED__, clamp, createBreakpoints, createBreakpointsContext, createBreakpointsPlugin, createContext, 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, createQueue, createQueueContext, createRegistry, createRegistryContext, createSelection, createSelectionContext, createSingle, createSingleContext, createStep, createStepContext, createStorage, createStorageContext, createStoragePlugin, createTheme, createThemeContext, createThemePlugin, createTimeline, createTimelineContext, createTokens, createTokensContext, createTrinity, debounce, instanceExists, instanceName, isArray, isBoolean, isFunction, isNaN, isNull, isNullOrUndefined, isNumber, isObject, isPrimitive, isSelfClosingTag, isString, isSymbol, isUndefined, mergeDeep, multipleOpenStrategy, provideAvatarContext, provideCheckboxGroup, provideCheckboxRoot, provideContext, provideDialogContext, provideExpansionPanelItem, provideExpansionPanelSelection, provideGroupRoot, providePaginationControls, providePaginationItems, providePaginationRoot, providePopoverContext, provideRadioGroup, provideRadioRoot, provideSelectionRoot, provideSingleRoot, provideStepRoot, provideTabsRoot, range, singleOpenStrategy, toArray, toReactive, useAvatarRoot, useBreakpoints, useCheckboxGroup, useCheckboxRoot, useClickOutside, useContext, useDate, useDialogContext, useDocumentEventListener, useElementIntersection, useElementSize, useEventListener, useExpansionPanelItem, useExpansionPanelRoot, useFeatures, useFilter, useFilterContext, 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, useResizeObserver, useSelection, useSelectionRoot, useSingle, useSingleRoot, useStep, useStepRoot, useStorage, useTabsRoot, useTheme, useTimeline, useToggleScope, useTokens, useVirtual, useWindowEventListener, version };