@vuetify/v0 0.0.6 → 0.0.8

package/dist/browser/index.js

@@ -1,4 +1,4 @@
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createPropsRestProxy, defineComponent, getCurrentInstance, getCurrentScope, guardReactiveProps, inject, isRef, mergeModels, mergeProps, normalizeProps, normalizeStyle, onMounted, onScopeDispose, onUnmounted, openBlock, provide, reactive, readonly, ref, renderSlot, resolveDynamicComponent, shallowReactive, shallowReadonly, shallowRef, toRef, toValue, unref, useAttrs, useId, useModel, useTemplateRef, vShow, watch, withCtx, withDirectives } from "vue";
+import { computed, createBlock, createCommentVNode, createPropsRestProxy, defineComponent, getCurrentInstance, getCurrentScope, guardReactiveProps, inject, isRef, mergeModels, mergeProps, normalizeProps, normalizeStyle, onMounted, onScopeDispose, onUnmounted, openBlock, provide, reactive, readonly, ref, renderSlot, resolveDynamicComponent, shallowReactive, shallowReadonly, shallowRef, toRef, toValue, unref, useAttrs, useId, useModel, useTemplateRef, vShow, watch, withCtx, withDirectives } from "vue";
 
 //#region src/constants/htmlElements.ts
 const selfClosingTags = [
@@ -120,20 +120,25 @@ var Atom_default = Atom_vue_vue_type_script_setup_true_lang_default;
 * Injects a context provided by an ancestor component.
 *
 * @param key The key of the context to inject.
+* @param defaultValue Optional default value if context is not found.
 * @template Z The type of the context.
 * @returns The injected context.
-* @throws An error if the context is not found.
+* @throws An error if the context is not found and no default is provided.
 *
 * @see https://vuejs.org/api/composition-api-dependency-injection.html#inject
-* @see https://0.vuetifyjs.com/composables/foundation/create-context
+* @see https://0.vuetifyjs.com/composables/foundation/create-context#use-context
 *
 * @example
 * ```ts
-* const myContext = useContext<MyContext>('my-context')
+* // Without default value
+* const context = useContext<MyContext>('my-context')
+*
+* // With default value
+* const context = useContext<MyContext>('my-context', defaultContext)
 * ```
 */
-function useContext(key) {
-	const context = inject(key, void 0);
+function useContext(key, defaultValue) {
+	const context = inject(key, defaultValue);
 	if (context === void 0) throw new Error(`Context "${String(key)}" not found. Ensure it's provided by an ancestor.`);
 	return context;
 }
@@ -142,43 +147,58 @@ function useContext(key) {
 *
 * @param key The key of the context to provide.
 * @param context The context to provide.
-* @param app The Vue app instance to provide the context to.
+* @param app Optional Vue app instance to provide the context at app level instead of component level.
 * @template Z The type of the context.
 * @returns The provided context.
 *
+* @remarks
+* When `app` parameter is provided, the context is made available to all components in the app.
+* When omitted, the context is provided at the current component level and available to descendants only.
+*
 * @see https://vuejs.org/api/composition-api-dependency-injection.html#provide
-* @see https://0.vuetifyjs.com/composables/foundation/create-context
+* @see https://0.vuetifyjs.com/composables/foundation/create-context#provide-context
 *
 * @example
 * ```ts
-* provideContext<MyContext>('my-context', myContext)
+* // Component-level provision
+* provideContext<MyContext>('my-context', context)
+*
+* // App-level provision (typically used in plugins)
+* const app = createApp()
+* provideContext<MyContext>('my-context', context, app)
 * ```
 */
 function provideContext(key, context, app) {
-	app?.provide(key, context) ?? provide(key, context);
+	if (app) app.provide(key, context);
+	else provide(key, context);
 	return context;
 }
 /**
 * Creates a new context for providing and injecting data.
 *
 * @param key The key of the context to create.
+* @param defaultValue Optional default value if context is not found.
 * @template Z The type of the context.
 * @returns A tuple containing the `useContext` and `provideContext` functions.
 *
 * @see https://vuejs.org/api/composition-api-dependency-injection.html
-* @see https://0.vuetifyjs.com/composables/foundation/create-context
+* @see https://0.vuetifyjs.com/composables/foundation/create-context#create-context
 *
 * @example
 * ```ts
-* const [provideMyContext, useMyContext] = createContext<MyContext>('my-context')
+* // Without default value
+* const [useMyContext, provideMyContext] = createContext<MyContext>('my-context')
+*
+* // With default value
+* const [useMyContext, provideMyContext] = createContext<MyContext>('my-context', defaultContext)
 * ```
 */
-function createContext(_key) {
+function createContext(_key, defaultValue) {
 	function _provideContext(context, app) {
 		return provideContext(_key, context, app);
 	}
 	function _useContext(key = _key) {
-		return useContext(key);
+		return useContext(key, defaultValue);
 	}
 	return [_useContext, _provideContext];
 }
@@ -191,8 +211,7 @@ function createContext(_key) {
 * @param options The plugin options.
 * @returns A new Vue plugin.
 *
-* @see https://vuejs.org/guide/reusability/plugins.html
-* @see https://0.vuetifyjs.com/composables/foundation/create-plugin
+* @see https://0.vuetifyjs.com/composables/foundation/create-plugin#create-plugin
 *
 * @example
 * ```ts
@@ -224,13 +243,21 @@ function createPlugin(options) {
 /**
 * Creates a new trinity for a context composable and its provider.
 *
-* @param createContext The function that creates the context.
-* @param provideContext The function that provides the context.
-* @param context The context to provide.
+* @param createContext The function that retrieves/uses the context (typically named `useContext`).
+* @param provideContext The function that provides the context to descendants.
+* @param context The default context instance to use when no custom context is provided.
 * @template Z The type of the context.
-* @returns A new trinity.
+* @returns A readonly tuple containing: [useContext function, provideContext wrapper function, default context instance].
+*
+* @remarks The trinity pattern is a foundational pattern used throughout the codebase for creating reusable context systems. It provides three related elements:
+*
+* 1. A function to retrieve/use the context
+* 2. A function to provide the context (with default value support)
+* 3. The default context instance
+*
+* The returned tuple is readonly (using `as const`) to ensure proper type inference.
 *
-* @see https://0.vuetifyjs.com/composables/foundation/create-trinity
+* @see https://0.vuetifyjs.com/composables/foundation/create-trinity#create-trinity
 *
 * @example
 * ```ts
@@ -250,6 +277,7 @@ function createPlugin(options) {
 *
 *   return createTrinity<E>(useContext, provideContext, context)
 * }
+* ```
 */
 function createTrinity(createContext$1, provideContext$1, context) {
 	return [
@@ -351,7 +379,7 @@ function toArray(value) {
 * @template Z The type of the object.
 * @returns The converted object.
 *
-* @see https://vuejs.org/api/reactivity-utilities.html#toreactive
+* @see https://0.vuetifyjs.com/composables/transformers/to-reactive
 *
 * @example
 * ```ts
@@ -464,7 +492,6 @@ function toReactive(objectRef) {
 
 //#endregion
 //#region src/composables/useHydration/index.ts
-const [useHydrationContext, provideHydrationContext] = createContext("v0:hydration");
 /**
 * Creates a new hydration instance.
 *
@@ -476,7 +503,10 @@ const [useHydrationContext, provideHydrationContext] = createContext("v0:hydrati
 * ```ts
 * import { createHydration } from '@vuetify/v0'
 *
-* const [useHydration, provideHydration] = createHydration()
+* const hydration = createHydration()
+* console.log(hydration.isHydrated.value) // false
+* hydration.hydrate()
+* console.log(hydration.isHydrated.value) // true
 * ```
 */
 function createHydration() {
@@ -490,33 +520,37 @@ function createHydration() {
 	};
 }
 /**
-* Returns the current hydration instance.
+* Creates a new hydration context trinity.
 *
-* @returns The current hydration instance.
+* @param options Options for creating the hydration context.
+* @template E The type of the hydration context.
+* @returns A new hydration context trinity.
 *
 * @see https://0.vuetifyjs.com/composables/plugins/use-hydration
 *
 * @example
-* ```vue
-* <script setup lang="ts">
-*   import { useHydration } from '@vuetify/v0'
-*
-*   const hydration = useHydration()
-* <\/script>
+* ```ts
+* import { createHydrationContext } from '@vuetify/v0'
 *
-* <template>
-*   <div>
-*     <p>Is hydrated: {{ hydration.isHydrated.value }}</p>
-*   </div>
-* </template>
+* export const [useHydrationContext, provideHydrationContext, context] = createHydrationContext({
+*   namespace: 'app:hydration',
+* })
 * ```
 */
-function useHydration() {
-	return useHydrationContext();
+function createHydrationContext(_options = {}) {
+	const { namespace = "v0:hydration" } = _options;
+	const [useHydrationContext, _provideHydrationContext] = createContext(namespace);
+	const context = createHydration();
+	function provideHydrationContext(_context = context, app) {
+		return _provideHydrationContext(_context, app);
+	}
+	return createTrinity(useHydrationContext, provideHydrationContext, context);
 }
 /**
 * Creates a new hydration plugin.
 *
+* @param options The options for the hydration plugin.
+* @template E The type of the hydration context.
 * @returns A new hydration plugin.
 *
 * @see https://0.vuetifyjs.com/composables/plugins/use-hydration
@@ -527,19 +561,21 @@ function useHydration() {
 * import { createHydrationPlugin } from '@vuetify/v0'
 * import App from './App.vue'
 *
-* const plugin = createHydrationPlugin()
-*
 * const app = createApp(App)
 *
-* app.use(plugin)
+* app.use(createHydrationPlugin())
 *
 * app.mount('#app')
 * ```
 */
-function createHydrationPlugin() {
-	const context = createHydration();
+function createHydrationPlugin(_options = {}) {
+	const { namespace = "v0:hydration",...options } = _options;
+	const [, provideHydrationContext, context] = createHydrationContext({
+		...options,
+		namespace
+	});
 	return createPlugin({
-		namespace: "v0:hydration",
+		namespace,
 		provide: (app) => {
 			provideHydrationContext(context, app);
 		},
@@ -551,6 +587,32 @@ function createHydrationPlugin() {
 		}
 	});
 }
+/**
+* Returns the current hydration instance.
+*
+* @param namespace The namespace for the hydration context. Defaults to `v0:hydration`.
+* @returns The current hydration instance.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-hydration
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { useHydration } from '@vuetify/v0'
+*
+*   const hydration = useHydration()
+* <\/script>
+*
+* <template>
+*   <div>
+*     <p>Is hydrated: {{ hydration.isHydrated.value }}</p>
+*   </div>
+* </template>
+* ```
+*/
+function useHydration(namespace = "v0:hydration") {
+	return useContext(namespace);
+}
 
 //#endregion
 //#region src/constants/globals.ts
@@ -560,7 +622,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.6";
+const version = "0.0.8";
 const __LOGGER_ENABLED__ = false;
 
 //#endregion
@@ -586,7 +648,6 @@ function createDefaultBreakpoints() {
 /**
 * Creates a new breakpoints instance.
 *
-* @param namespace The namespace to use for the breakpoints instance.
 * @param options The options for the breakpoints instance.
 * @template E The type of the breakpoints context.
 * @returns A new breakpoints instance.
@@ -597,7 +658,8 @@ function createDefaultBreakpoints() {
 * ```ts
 * import { createBreakpoints } from '@vuetify/v0'
 *
-* export const [useBreakpoints, provideBreakpoints] = createBreakpoints('v0:breakpoints', {
+* export const [useBreakpoints, provideBreakpoints] = createBreakpoints({
+*   namespace: 'v0:breakpoints',
 *   mobileBreakpoint: 'sm',
 *   breakpoints: {
 *     xs: 0,
@@ -610,12 +672,11 @@ function createDefaultBreakpoints() {
 * })
 * ```
 */
-function createBreakpoints(namespace = "v0:breakpoints", options = {}) {
-	const [useBreakpointsContext, _provideBreakpointsContext] = createContext(namespace);
-	const { mobileBreakpoint, breakpoints } = /* @__PURE__ */ mergeDeep(createDefaultBreakpoints(), options);
-	const sorted = Object.entries(breakpoints).sort((a, b) => a[1] - b[1]);
+function createBreakpoints(_options = {}) {
+	const { mobileBreakpoint, breakpoints } = /* @__PURE__ */ mergeDeep(createDefaultBreakpoints(), _options);
+	const sorted = Object.entries(breakpoints).toSorted((a, b) => a[1] - b[1]);
 	const names = sorted.map(([n]) => n);
-	const mb = typeof mobileBreakpoint === "number" ? mobileBreakpoint : breakpoints[mobileBreakpoint] ?? breakpoints.md;
+	const mb = /* @__PURE__ */ isNumber(mobileBreakpoint) ? mobileBreakpoint : breakpoints[mobileBreakpoint] ?? breakpoints.md;
 	const name = shallowRef("xs");
 	const width = shallowRef(0);
 	const height = shallowRef(0);
@@ -665,21 +726,7 @@ function createBreakpoints(namespace = "v0:breakpoints", options = {}) {
 		xlAndDown.value = index <= 4;
 		xxlAndDown.value = index <= 5;
 	}
-	if (getCurrentInstance()) onMounted(() => {
-		const { isHydrated } = useHydration();
-		if (isHydrated.value) update();
-		watch(isHydrated, (hydrated) => {
-			if (hydrated) update();
-		}, { immediate: true });
-	});
-	if (IN_BROWSER) {
-		function listener() {
-			update();
-		}
-		window.addEventListener("resize", listener, { passive: true });
-		onScopeDispose(() => window.removeEventListener("resize", listener), true);
-	}
-	const context = {
+	return {
 		breakpoints,
 		name: readonly(name),
 		width: readonly(width),
@@ -703,36 +750,34 @@ function createBreakpoints(namespace = "v0:breakpoints", options = {}) {
 		xxlAndDown: readonly(xxlAndDown),
 		update
 	};
-	function provideBreakpointsContext(_context = context, app) {
-		return _provideBreakpointsContext(_context, app);
-	}
-	return createTrinity(useBreakpointsContext, provideBreakpointsContext, context);
 }
 /**
-* Returns the current breakpoints instance.
+* Creates a new breakpoints context.
 *
-* @returns The current breakpoints instance.
+* @param options The options for the breakpoints context.
+* @template E The type of the breakpoints context.
+* @returns A new breakpoints context.
 *
 * @see https://0.vuetifyjs.com/composables/plugins/use-breakpoints
 *
 * @example
-* ```vue
-* <script setup lang="ts">
-*   import { useBreakpoints } from '@vuetify/v0'
-*
-*   const { isMobile, mdAndUp } = useBreakpoints()
-* <\/script>
+* ```ts
+* import { createBreakpointsContext } from '@vuetify/v0'
 *
-* <template>
-*   <div class="pa-4">
-*     <p v-if="isMobile.value">Mobile layout active</p>
-*     <p v-else-if="mdAndUp.value">Medium and up layout active</p>
-*   </div>
-* </template>
+* export const [useBreakpoints, provideBreakpoints, context] = createBreakpointsContext({
+*   namespace: 'v0:breakpoints',
+*   mobileBreakpoint: 'sm',
+* })
 * ```
 */
-function useBreakpoints() {
-	return useContext("v0:breakpoints");
+function createBreakpointsContext(_options = {}) {
+	const { namespace = "v0:breakpoints",...options } = _options;
+	const [useBreakpointsContext, _provideBreakpointsContext] = createContext(namespace);
+	const context = createBreakpoints(options);
+	function provideBreakpointsContext(_context = context, app) {
+		return _provideBreakpointsContext(_context, app);
+	}
+	return createTrinity(useBreakpointsContext, provideBreakpointsContext, context);
 }
 /**
 * Creates a new breakpoints plugin.
@@ -753,6 +798,7 @@ function useBreakpoints() {
 *
 * app.use(
 *   createBreakpointsPlugin({
+*     namespace: 'v0:breakpoints',
 *     mobileBreakpoint: 'sm',
 *     breakpoints: {
 *       xs: 0,
@@ -768,20 +814,63 @@ function useBreakpoints() {
 * app.mount('#app')
 * ```
 */
-function createBreakpointsPlugin(options = {}) {
-	const [, provideBreakpointsContext, context] = createBreakpoints("v0:breakpoints", options);
+function createBreakpointsPlugin(_options = {}) {
+	const { namespace = "v0:breakpoints",...options } = _options;
+	const [, provideBreakpointsContext, context] = createBreakpointsContext({
+		...options,
+		namespace
+	});
 	return createPlugin({
-		namespace: "v0:breakpoints",
+		namespace,
 		provide: (app) => {
 			provideBreakpointsContext(context, app);
 		},
 		setup: (app) => {
 			app.mixin({ mounted() {
-				context.update();
+				if (this.$parent !== null) return;
+				const hydration = useHydration();
+				function listener() {
+					context.update();
+				}
+				const unwatch = watch(hydration.isHydrated, (hydrated) => {
+					if (hydrated) listener();
+				}, { immediate: true });
+				window.addEventListener("resize", listener, { passive: true });
+				onScopeDispose(() => {
+					window.removeEventListener("resize", listener);
+					unwatch();
+				}, true);
 			} });
 		}
 	});
 }
+/**
+* Returns the current breakpoints instance.
+*
+* @param namespace The namespace for the breakpoints context. Defaults to `v0:breakpoints`.
+* @returns The current breakpoints instance.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-breakpoints
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { useBreakpoints } from '@vuetify/v0'
+*
+*   const { isMobile, mdAndUp } = useBreakpoints()
+* <\/script>
+*
+* <template>
+*   <div class="pa-4">
+*     <p v-if="isMobile.value">Mobile layout active</p>
+*     <p v-else-if="mdAndUp.value">Medium and up layout active</p>
+*   </div>
+* </template>
+* ```
+*/
+function useBreakpoints(namespace = "v0:breakpoints") {
+	return useContext(namespace);
+}
 
 //#endregion
 //#region src/composables/useEventListener/index.ts
@@ -922,7 +1011,7 @@ var PinoLoggerAdapter = class {
 	}
 	format(message, ...args) {
 		if (args.length === 0) return { msg: message };
-		if (args.length === 1 && typeof args[0] === "object" && args[0] !== null) return {
+		if (args.length === 1 && /* @__PURE__ */ isObject(args[0])) return {
 			...args[0],
 			msg: message
 		};
@@ -995,14 +1084,13 @@ var Vuetify0LoggerAdapter = class {
 	log(level, method, message, ...args) {
 		const [formattedMessage, ...restArgs] = this.format(level, message, ...args);
 		const style = this.style(level);
-		if (IN_BROWSER && style && typeof console[method] === "function") console[method](`%c${formattedMessage}`, style, ...restArgs);
-		else if (typeof console[method] === "function") console[method](formattedMessage, ...restArgs);
+		if (IN_BROWSER && style && /* @__PURE__ */ isFunction(console[method])) console[method](`%c${formattedMessage}`, style, ...restArgs);
+		else if (/* @__PURE__ */ isFunction(console[method])) console[method](formattedMessage, ...restArgs);
 	}
 };
 
 //#endregion
 //#region src/composables/useLogger/index.ts
-const [useLoggerContext, provideLoggerContext] = createContext("v0:logger");
 /**
 * Creates a new logger instance.
 *
@@ -1010,6 +1098,22 @@ const [useLoggerContext, provideLoggerContext] = createContext("v0:logger");
 * @returns A new logger instance.
 *
 * @see https://0.vuetifyjs.com/composables/plugins/use-logger
+*
+* @example
+* ```ts
+* import { createLogger } from '@vuetify/v0'
+*
+* const logger = createLogger({
+*   level: 'debug',
+*   prefix: '[MyApp]',
+* })
+*
+* logger.info('This is an info message')
+* logger.debug('This is a debug message')
+* logger.error('This is an error message')
+* logger.level('debug')
+* logger.debug('This debug message will now be logged')
+* ```
 */
 function createLogger(options = {}) {
 	const { adapter = new Vuetify0LoggerAdapter({ prefix: options.prefix }), level: initialLevel = "info", enabled: initialEnabled = __LOGGER_ENABLED__ } = options;
@@ -1099,18 +1203,32 @@ function createFallbackLogger(namespace = "v0:logger") {
 	};
 }
 /**
-* Uses an existing or creates a new logger instance.
+* Creates a new logger context.
 *
-* @param namespace The namespace for the logger context.
-* @returns The logger instance.
+* @param options The options for the logger context.
+* @template E The type of the logger context.
+* @returns A new logger context.
 *
 * @see https://0.vuetifyjs.com/composables/plugins/use-logger
+*
+* @example
+* ```ts
+* import { createLoggerContext } from '@vuetify/v0'
+*
+* export const [useAppLogger, provideAppLogger, appLogger] = createLoggerContext({
+*   namespace: 'app:logger',
+*   level: 'debug',
+* })
+* ```
 */
-function useLogger(namespace) {
-	if (getCurrentInstance()) try {
-		return useLoggerContext(namespace);
-	} catch (error) {}
-	return createFallbackLogger(namespace);
+function createLoggerContext(_options = {}) {
+	const { namespace = "v0:logger",...options } = _options;
+	const [useLoggerContext, _provideLoggerContext] = createContext(namespace);
+	const context = createLogger(options);
+	function provideLoggerContext(_context = context, app) {
+		return _provideLoggerContext(_context, app);
+	}
+	return createTrinity(useLoggerContext, provideLoggerContext, context);
 }
 /**
 * Creates a new logger plugin.
@@ -1119,17 +1237,69 @@ function useLogger(namespace) {
 * @returns A new logger plugin.
 *
 * @see https://0.vuetifyjs.com/composables/plugins/use-logger
+*
+* @example
+* ```ts
+* import { createApp } from 'vue'
+* import { createLoggerPlugin } from '@vuetify/v0'
+* import App from './App.vue'
+*
+* const app = createApp(App)
+*
+* app.use(
+*  createLoggerPlugin({
+*    level: 'debug',
+*    prefix: '[MyApp]',
+*  })
+* )
+*
+* app.mount('#app')
+* ```
 */
-function createLoggerPlugin(options = {}) {
-	const context = createLogger(options);
+function createLoggerPlugin(_options = {}) {
+	const { namespace = "v0:logger",...options } = _options;
+	const [, provideLoggerContext, context] = createLoggerContext({
+		...options,
+		namespace
+	});
 	return createPlugin({
-		namespace: "v0:logger",
+		namespace,
 		provide: (app) => {
 			provideLoggerContext(context, app);
 		},
 		setup: (_app) => {}
 	});
 }
+/**
+* Uses an existing or creates a new logger instance.
+*
+* @param namespace The namespace for the logger context. Defaults to `'v0:logger'`.
+* @returns The logger instance.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-logger
+*
+* @example
+* ```ts
+* import { useLogger } from '@vuetify/v0'
+*
+* const logger = useLogger()
+*
+* logger.info('This is an info message')
+* logger.debug('This is a debug message')
+* logger.error('This is an error message')
+* logger.level('debug')
+* logger.debug('This debug message will now be logged')
+* ```
+*/
+function useLogger(namespace = "v0:logger") {
+	const fallback = createFallbackLogger(namespace);
+	if (!getCurrentInstance()) return fallback;
+	try {
+		return useContext(namespace, fallback);
+	} catch {
+		return fallback;
+	}
+}
 
 //#endregion
 //#region src/composables/useRegistry/index.ts
@@ -1141,7 +1311,7 @@ function createLoggerPlugin(options = {}) {
 * @template E The type of registry context that extends RegistryContext<Z>. Use this when extending the registry with additional methods.
 * @returns A new registry instance.
 *
-* @see https://0.vuetifyjs.com/composables/registration/use-registry
+* @see https://0.vuetifyjs.com/composables/registration/use-registry#use-registry
 *
 * @example
 * ```ts
@@ -1380,11 +1550,11 @@ function useRegistry(options) {
 *
 * @param namespace The namespace for the registry context.
 * @param options The options for the registry context.
-*
 * @template Z The type of registry ticket that extends RegistryTicket. Use this to add custom properties to tickets.
 * @template E The type of registry context that extends RegistryContext<Z>. Use this when extending the registry with additional methods.
+* @returns A new registry context.
 *
-* @see https://0.vuetifyjs.com/composables/registration/use-registry
+* @see https://0.vuetifyjs.com/composables/registration/use-registry#create-registry-context
 *
 * @example
 * ```ts
@@ -1400,7 +1570,8 @@ function useRegistry(options) {
 * items.register({ id: 'item-1', value: 'Value 1' })
 * ```
 */
-function createRegistryContext(namespace, options) {
+function createRegistryContext(_options) {
+	const { namespace,...options } = _options;
 	const [useRegistryContext, _provideRegistryContext] = createContext(namespace);
 	const context = useRegistry(options);
 	function provideRegistryContext(_context = context, app) {
@@ -1412,20 +1583,37 @@ function createRegistryContext(namespace, options) {
 //#endregion
 //#region src/composables/useSelection/index.ts
 /**
-* Creates a new selection instance.
+* Creates a new selection instance for managing multiple selected items.
+*
+* Extends `useRegistry` with selection tracking via a reactive `Set` of selected IDs.
+* Supports disabled items, mandatory selection enforcement, and auto-enrollment.
 *
 * @param options The options for the selection instance.
 * @template Z The type of the selection ticket.
 * @template E The type of the selection context.
-* @returns A new selection instance.
+* @returns A new selection instance with selection management methods.
+*
+* @remarks
+* **Key Features:**
+* - Multi-selection support (unlike `useSingle` which enforces single selection)
+* - Set-based `selectedIds` tracking for efficient lookups
+* - Computed `selectedItems` and `selectedValues` for reactive access
+* - Each ticket gets `isSelected`, `select()`, `unselect()`, and `toggle()` methods
+* - Disabled items cannot be selected
+* - Mandatory mode prevents deselecting the last item
+* - Force mode auto-selects first non-disabled item on registration
+* - Enroll option auto-selects all non-disabled items on registration
+*
+* **Inheritance Chain:**
+* `useRegistry` → `createSelection` → `createSingle`/`createGroup` → `createStep`
 *
 * @see https://0.vuetifyjs.com/composables/selection/use-selection
 *
 * @example
 * ```ts
-* import { useSelection } from '@vuetify/v0'
+* import { createSelection } from '@vuetify/v0'
 *
-* const selection = useSelection({ mandatory: true })
+* const selection = createSelection({ mandatory: true })
 *
 * selection.onboard([
 *   { id: 'item-1', value: 'Item 1' },
@@ -1437,9 +1625,10 @@ function createRegistryContext(namespace, options) {
 * selection.select('item-3')
 *
 * console.log(selection.selectedIds) // Set { 'item-1', 'item-3' }
+* console.log(Array.from(selection.selectedValues.value)) // ['Item 1', 'Item 3']
 * ```
 */
-function useSelection(options) {
+function createSelection(options) {
 	const registry$1 = useRegistry(options);
 	const selectedIds = shallowReactive(/* @__PURE__ */ new Set());
 	const enroll = options?.enroll ?? false;
@@ -1543,46 +1732,103 @@ function useSelection(options) {
 * checkboxes.select('checkbox-1')
 * ```
 */
-function createSelectionContext(namespace, options) {
+function createSelectionContext(_options) {
+	const { namespace,...options } = _options;
 	const [useSelectionContext, _provideSelectionContext] = createContext(namespace);
-	const context = useSelection(options);
+	const context = createSelection(options);
 	function provideSelectionContext(_context = context, app) {
 		return _provideSelectionContext(_context, app);
 	}
 	return createTrinity(useSelectionContext, provideSelectionContext, context);
 }
+/**
+* Returns the current selection instance.
+*
+* @param namespace The namespace for the selection context. Defaults to `'v0:selection'`.
+* @returns The current selection instance.
+*
+* @see https://0.vuetifyjs.com/composables/selection/use-selection
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { useSelection } from '@vuetify/v0'
+*
+*   const selection = useSelection()
+* <\/script>
+*
+* <template>
+*   <div>
+*     <p>Selected: {{ selection.selectedIds.size }}</p>
+*   </div>
+* </template>
+* ```
+*/
+function useSelection(namespace = "v0:selection") {
+	return useContext(namespace);
+}
 
 //#endregion
 //#region src/composables/useGroup/index.ts
 /**
-* Creates a new group instance.
+* Creates a new group instance with batch selection operations.
+*
+* Extends `createSelection` to support selecting, unselecting, and toggling multiple items
+* at once by passing an array of IDs. Adds `selectedIndexes` computed property.
 *
 * @param options The options for the group instance.
 * @template Z The type of the group ticket.
 * @template E The type of the group context.
-* @returns A new group instance.
+* @returns A new group instance with batch selection support.
+*
+* @remarks
+* **Key Differences from `createSelection`:**
+* - `select()` accepts `ID | ID[]` for batch operations
+* - `unselect()` accepts `ID | ID[]` for batch operations
+* - `toggle()` accepts `ID | ID[]` for batch operations
+* - Adds `selectedIndexes` computed Set for getting selected item indexes
+* - Perfect for checkboxes, multi-select dropdowns, and bulk operations
+*
+* **Batch Operations:**
+* - Single ID: `group.select('item-1')`
+* - Array of IDs: `group.select(['item-1', 'item-2', 'item-3'])`
+* - Uses `toArray()` utility internally to normalize input
+* - Disabled items are automatically skipped in batch operations
+* - Non-existent IDs are silently ignored
+*
+* **Inheritance Chain:**
+* `useRegistry` → `createSelection` → `createGroup`
+*
+* **Used By:**
+* - `createFeatures` for feature flag management with multiple selections
 *
 * @see https://0.vuetifyjs.com/composables/selection/use-group
 *
 * @example
 * ```ts
-* import { useGroup } from '@vuetify/v0'
+* import { createGroup } from '@vuetify/v0'
 *
-* const group = useGroup()
+* const checkboxes = createGroup()
 *
-* group.onboard([
-*   { id: 'item-1', value: 'Item 1' },
-*   { id: 'item-2', value: 'Item 2' },
-*   { id: 'item-3', value: 'Item 3' },
+* checkboxes.onboard([
+*   { id: 'option-a', value: 'Option A' },
+*   { id: 'option-b', value: 'Option B' },
+*   { id: 'option-c', value: 'Option C' },
 * ])
 *
-* group.select(['item-1', 'item-2'])
+* // Select multiple items at once
+* checkboxes.select(['option-a', 'option-c'])
+*
+* console.log(checkboxes.selectedIds) // Set { 'option-a', 'option-c' }
+* console.log(Array.from(checkboxes.selectedIndexes.value)) // [0, 2]
 *
-* console.log(group.selectedIds) // Set { 'item-1', 'item-2' }
+* // Toggle operations
+* checkboxes.toggle(['option-a', 'option-b'])
+* console.log(checkboxes.selectedIds) // Set { 'option-b', 'option-c' }
 * ```
 */
-function useGroup(options) {
-	const registry$1 = useSelection(options);
+function createGroup(options) {
+	const registry$1 = createSelection(options);
 	const selectedIndexes = computed(() => {
 		return new Set(Array.from(registry$1.selectedItems.value).map((item) => item?.index));
 	});
@@ -1630,14 +1876,41 @@ function useGroup(options) {
 * const group = useMyGroup()
 * ```
 */
-function createGroupContext(namespace, options) {
+function createGroupContext(_options) {
+	const { namespace,...options } = _options;
 	const [useGroupContext, _provideGroupContext] = createContext(namespace);
-	const context = useGroup(options);
+	const context = createGroup(options);
 	function provideGroupContext(_context = context, app) {
 		return _provideGroupContext(_context, app);
 	}
 	return createTrinity(useGroupContext, provideGroupContext, context);
 }
+/**
+* Returns the current group instance.
+*
+* @param namespace The namespace for the group context. Defaults to `'v0:group'`.
+* @returns The current group instance.
+*
+* @see https://0.vuetifyjs.com/composables/selection/use-group
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { useGroup } from '@vuetify/v0'
+*
+*   const group = useGroup()
+* <\/script>
+*
+* <template>
+*   <div>
+*     <p>Selected: {{ group.selectedIds.size }}</p>
+*   </div>
+* </template>
+* ```
+*/
+function useGroup(namespace) {
+	return useContext(namespace);
+}
 
 //#endregion
 //#region src/composables/useTokens/index.ts
@@ -1668,9 +1941,9 @@ function createGroupContext(namespace, options) {
 * console.log(tokens.resolve('{colors.secondary}')) // '#3b82f6'
 * ```
 */
-function useTokens(tokens = {}, options = {}) {
+function createTokens(tokens = {}, options = {}) {
 	const logger = useLogger();
-	const registry$1 = useRegistry();
+	const registry$1 = useRegistry(options);
 	const cache = /* @__PURE__ */ new Map();
 	registry$1.onboard(flatten(tokens, options.prefix, !!options.flat));
 	function isAlias(token) {
@@ -1679,12 +1952,18 @@ function useTokens(tokens = {}, options = {}) {
 	function isTokenAlias(value) {
 		return /* @__PURE__ */ isObject(value) && "$value" in value;
 	}
-	function resolve(token) {
+	function resolve(token, visited = /* @__PURE__ */ new Set()) {
 		const cacheKey = /* @__PURE__ */ isString(token) ? token : JSON.stringify(token);
 		const cached = cache.get(cacheKey);
 		if (cached !== void 0) return cached;
 		const reference = isTokenAlias(token) ? token.$value : token;
 		const clean = /* @__PURE__ */ isString(reference) && isAlias(reference) ? reference.slice(1, -1) : String(reference);
+		if (visited.has(clean)) {
+			logger.warn(`Circular alias detected for "${clean}"`);
+			cache.set(cacheKey, void 0);
+			return;
+		}
+		visited.add(clean);
 		let found = registry$1.get(clean);
 		let segments = [];
 		if (!found && clean.includes(".")) {
@@ -1725,9 +2004,9 @@ function useTokens(tokens = {}, options = {}) {
 			result = current;
 		} else if (isTokenAlias(current)) {
 			const inner = current.$value;
-			if (/* @__PURE__ */ isString(inner) && isAlias(inner)) return resolve(inner);
+			if (/* @__PURE__ */ isString(inner) && isAlias(inner)) return resolve(inner, visited);
 			result = inner;
-		} else if (/* @__PURE__ */ isString(current) && isAlias(current)) return resolve(current);
+		} else if (/* @__PURE__ */ isString(current) && isAlias(current)) return resolve(current, visited);
 		else result = current;
 		cache.set(cacheKey, result);
 		return result;
@@ -1756,34 +2035,47 @@ function useTokens(tokens = {}, options = {}) {
 * ```ts
 * import { createTokensContext } from '@vuetify/v0'
 *
-* const myTokens = {
-*   spacing: {
-*     sm: '8px',
-*     md: '16px',
-*     lg: '24px',
-*   },
-* }
-*
-* export const [useDesignTokens, provideDesignTokens, designTokens] = createTokensContext('design-tokens', myTokens)
-*
-* // In a parent component:
-* provideDesignTokens()
-*
-* // In a child component:
-* const tokens = useDesignTokens()
-*
-* console.log(tokens.resolve('{spacing.md}')) // '16px'
+* export const [useTokens, provideTokens, context] = createTokensContext({
+*  namespace: 'v0:tokens',
+*  tokens: {
+*    colors: {
+*      primary: '#3b82f6',
+*      secondary: '{colors.primary}', // Alias reference
+*    },
+*  },
+* })
 * ```
 */
-function createTokensContext(namespace, tokens = {}) {
+function createTokensContext(_options) {
+	const { namespace, tokens = {},...options } = _options;
 	const [useTokensContext, _provideTokensContext] = createContext(namespace);
-	const context = useTokens(tokens);
+	const context = createTokens(tokens, options);
 	function provideTokensContext(_context = context, app) {
 		return _provideTokensContext(_context, app);
 	}
 	return createTrinity(useTokensContext, provideTokensContext, context);
 }
 /**
+* Returns the current tokens instance.
+*
+* @param namespace The namespace for the tokens context. Defaults to `'v0:tokens'`.
+* @returns The current tokens instance.
+*
+* @see https://0.vuetifyjs.com/composables/registration/use-tokens
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { useTokens } from '@vuetify/v0'
+*
+*   const tokens = useTokens()
+* <\/script>
+* ```
+*/
+function useTokens(namespace = "v0:tokens") {
+	return useContext(namespace);
+}
+/**
 * Flattens a nested collection of tokens into a flat array of tokens.
 * Each token is represented by an object containing its ID & value.
 * @param tokens The collection of tokens to flatten.
@@ -1864,19 +2156,19 @@ function flatten(tokens, prefix = "", flat = false) {
 /**
 * Creates a new features instance.
 *
-* @param namespace The namespace to use for the features instance.
 * @param options The options for the features instance.
 * @template Z The type of the feature ticket.
 * @template E The type of the feature context.
 * @returns A new features instance.
 *
-* @see https://0.vuetifyjs.com/composables/plugins/create-features
+* @see https://0.vuetifyjs.com/composables/plugins/use-features
 *
 * @example
 * ```ts
 * import { createFeatures } from '@vuetify/v0'
 *
-* const [useFeatures, provideFeaturesContext] = createFeatures('v0:features', {
+* const [useFeatures, provideFeaturesContext, context] = createFeatures({
+*   namespace: 'v0:features',
 *   features: {
 *     'dark-mode': true,
 *     'theme-color': { $variation: 'blue' },
@@ -1884,10 +2176,10 @@ function flatten(tokens, prefix = "", flat = false) {
 * })
 * ```
 */
-function createFeatures(namespace = "v0:features", options = {}) {
-	const [useFeaturesContext, _provideFeaturesContext] = createContext(namespace);
-	const tokens = useTokens(options.features, { flat: true });
-	const registry$1 = useGroup();
+function createFeatures(_options = {}) {
+	const { features,...options } = _options;
+	const tokens = createTokens(features, { flat: true });
+	const registry$1 = createGroup(options);
 	for (const [id, { value }] of tokens.entries()) register({
 		id,
 		value
@@ -1906,7 +2198,7 @@ function createFeatures(namespace = "v0:features", options = {}) {
 		if (/* @__PURE__ */ isBoolean(ticket.value) && ticket.value === true || /* @__PURE__ */ isObject(ticket.value) && /* @__PURE__ */ isBoolean(ticket.value.$value) && ticket.value.$value === true) registry$1.select(ticket.id);
 		return ticket;
 	}
-	const context = {
+	return {
 		...registry$1,
 		variation,
 		register,
@@ -1914,37 +2206,38 @@ function createFeatures(namespace = "v0:features", options = {}) {
 			return registry$1.size;
 		}
 	};
-	function provideFeaturesContext(_context = context, app) {
-		return _provideFeaturesContext(_context, app);
-	}
-	return createTrinity(useFeaturesContext, provideFeaturesContext, context);
 }
 /**
-* Returns the current features instance.
+* Creates a new features context.
 *
+* @param options The options for the features context.
 * @template Z The type of the feature ticket.
-* @returns The current features instance.
+* @template E The type of the feature context.
+* @returns A new features context.
 *
-* @see https://0.vuetifyjs.com/composables/plugins/create-features
+* @see https://0.vuetifyjs.com/composables/plugins/use-features
 *
 * @example
-* ```vue
-* <script setup lang="ts">
-*   import { useFeatures } from '@vuetify/v0'
-*
-*   const features = useFeatures()
-* <\/script>
+* ```ts
+* import { createFeaturesContext } from '@vuetify/v0'
 *
-* <template>
-*   <div>
-*     <p>Features: {{ features.get('dark-mode') }}</p>
-*     <p>Theme Color: {{ features.variation('theme-color') }}</p>
-*   </div>
-* </template>
+* export const [useFeatures, provideFeatures, context] = createFeaturesContext({
+*   namespace: 'app:features',
+*   features: {
+*     'dark-mode': true,
+*     'theme-color': { $variation: 'blue' },
+*   },
+* })
 * ```
 */
-function useFeatures() {
-	return useContext("v0:features");
+function createFeaturesContext(_options = {}) {
+	const { namespace = "v0:features",...options } = _options;
+	const [useFeaturesContext, _provideFeaturesContext] = createContext(namespace);
+	const context = createFeatures(options);
+	function provideFeaturesContext(_context = context, app) {
+		return _provideFeaturesContext(_context, app);
+	}
+	return createTrinity(useFeaturesContext, provideFeaturesContext, context);
 }
 /**
 * Creates a new features plugin.
@@ -1954,7 +2247,7 @@ function useFeatures() {
 * @template E The type of the feature context.
 * @returns A new features plugin.
 *
-* @see https://0.vuetifyjs.com/composables/plugins/create-features
+* @see https://0.vuetifyjs.com/composables/plugins/use-features
 *
 * @example
 * ```ts
@@ -1976,15 +2269,47 @@ function useFeatures() {
 * app.mount('#app')
 * ```
 */
-function createFeaturesPlugin(options = {}) {
-	const [, provideFeaturesContext, context] = createFeatures("v0:features", options);
+function createFeaturesPlugin(_options = {}) {
+	const { namespace = "v0:features",...options } = _options;
+	const [, provideFeaturesContext, context] = createFeaturesContext({
+		...options,
+		namespace
+	});
 	return createPlugin({
-		namespace: "v0:features",
+		namespace,
 		provide: (app) => {
 			provideFeaturesContext(context, app);
 		}
 	});
 }
+/**
+* Returns the current features instance.
+*
+* @param namespace The namespace for the features context. Defaults to `v0:features`.
+* @template Z The type of the feature ticket.
+* @returns The current features instance.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-features
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { useFeatures } from '@vuetify/v0'
+*
+*   const features = useFeatures()
+* <\/script>
+*
+* <template>
+*   <div>
+*     <p>Features: {{ features.get('dark-mode') }}</p>
+*     <p>Theme Color: {{ features.variation('theme-color') }}</p>
+*   </div>
+* </template>
+* ```
+*/
+function useFeatures(namespace = "v0:features") {
+	return useContext(namespace);
+}
 
 //#endregion
 //#region src/composables/useFilter/index.ts
@@ -1993,7 +2318,7 @@ function defaultFilter(query, item, keys, mode = "some") {
 	function match(value, q) {
 		return String(value).toLowerCase().includes(q);
 	}
-	const stringValues = (typeof item === "object" && item !== null ? keys?.length ? keys.map((k) => item[k]) : Object.values(item) : [item]).map((v) => String(v).toLowerCase());
+	const stringValues = (/* @__PURE__ */ isObject(item) ? keys?.length ? keys.map((k) => item[k]) : Object.values(item) : [item]).map((v) => String(v).toLowerCase());
 	if (mode === "some") return stringValues.some((val) => match(val, queries[0]));
 	if (mode === "every") return stringValues.every((val) => match(val, queries[0]));
 	if (mode === "union") return queries.some((q) => stringValues.some((val) => match(val, q)));
@@ -2056,9 +2381,9 @@ function useFilter(query, items, options = {}) {
 *
 * @example
 * ```ts
-* import { useForm } from '@vuetify/v0'
+* import { createForm } from '@vuetify/v0'
 *
-* const form = useForm()
+* const form = createForm()
 *
 * const username = form.register({
 *   id: 'username',
@@ -2073,7 +2398,7 @@ function useFilter(query, items, options = {}) {
 * form.reset()
 * ```
 */
-function useForm(options) {
+function createForm(options) {
 	const registry$1 = useRegistry(options);
 	const validateOn = options?.validateOn || "submit";
 	function parse(value) {
@@ -2093,7 +2418,7 @@ function useForm(options) {
 			if (ticket.isValid.value === false) return false;
 			if (ticket.isValid.value === null) return null;
 		}
-		return hasFields ? true : null;
+		return hasFields || null;
 	});
 	function reset() {
 		for (const ticket of registry$1.values()) ticket.reset();
@@ -2125,10 +2450,10 @@ function useForm(options) {
 			isValid$1.value = null;
 		}
 		async function validate$1(silent = false) {
-			if (rules.length === 0) return true;
+			if (rules.length === 0) return isValid$1.value = true;
 			isValidating$1.value = true;
 			try {
-				const errorMessages = (await Promise.all(rules.map((rule) => rule(model.value)))).filter((result) => typeof result === "string");
+				const errorMessages = (await Promise.all(rules.map((rule) => rule(model.value)))).filter((result) => /* @__PURE__ */ isString(result));
 				if (!silent) {
 					errors.value = errorMessages;
 					isValid$1.value = errorMessages.length === 0;
@@ -2180,6 +2505,68 @@ function useForm(options) {
 		}
 	};
 }
+/**
+* Creates a new form context.
+*
+* @param namespace The namespace for the form context.
+* @param options The options for the form context.
+* @template Z The type of the form ticket.
+* @template E The type of the form context.
+* @returns A new form context.
+*
+* @see https://0.vuetifyjs.com/composables/forms/use-form
+*
+* @example
+* ```ts
+* import { createFormContext } from '@vuetify/v0'
+*
+* export const [useMyForm, provideMyForm, myForm] = createFormContext('my-form', {
+*   validateOn: 'change',
+* })
+*
+* // In a parent component:
+* provideMyForm()
+*
+* // In a child component:
+* const form = useMyForm()
+* form.register({ id: 'field', value: ref(''), rules: [...] })
+* ```
+*/
+function createFormContext(_options) {
+	const { namespace,...options } = _options;
+	const [useFormContext, _provideFormContext] = createContext(namespace);
+	const context = createForm(options);
+	function provideFormContext(_context = context, app) {
+		return _provideFormContext(_context, app);
+	}
+	return createTrinity(useFormContext, provideFormContext, context);
+}
+/**
+* Returns the current form instance.
+*
+* @param namespace The namespace for the form context. Defaults to `'v0:form'`.
+* @returns The current form instance.
+*
+* @see https://0.vuetifyjs.com/composables/forms/use-form
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { useForm } from '@vuetify/v0'
+*
+*   const form = useForm()
+* <\/script>
+*
+* <template>
+*   <div>
+*     <p>Form is {{ form.isValid.value ? 'valid' : 'invalid' }}</p>
+*   </div>
+* </template>
+* ```
+*/
+function useForm(namespace = "v0:form") {
+	return useContext(namespace);
+}
 
 //#endregion
 //#region src/composables/useIntersectionObserver/index.ts
@@ -2395,33 +2782,57 @@ function useKeydown(handlers) {
 //#endregion
 //#region src/composables/useSingle/index.ts
 /**
-* Creates a new single selection instance.
+* Creates a new single selection instance that enforces only one selected item at a time.
+*
+* Extends `createSelection` by automatically clearing previous selections when a new item is selected.
+* Adds computed singular properties: `selectedId`, `selectedItem`, `selectedIndex`, `selectedValue`.
 *
 * @param options The options for the single selection instance.
 * @template Z The type of the single selection ticket.
 * @template E The type of the single selection context.
-* @returns A new single selection instance.
+* @returns A new single selection instance with single-selection enforcement.
+*
+* @remarks
+* **Key Differences from `createSelection`:**
+* - Automatically clears `selectedIds` before selecting a new item (enforces single selection)
+* - Provides singular computed properties instead of plural sets
+* - Perfect for tabs, radio buttons, theme selectors, and other single-choice UI components
+*
+* **Computed Properties:**
+* - `selectedId`: The ID of the selected item (undefined if none selected)
+* - `selectedItem`: The selected ticket object (undefined if none selected)
+* - `selectedIndex`: The index of the selected item (-1 if none selected)
+* - `selectedValue`: The value of the selected item (undefined if none selected)
+*
+* **Inheritance Chain:**
+* `useRegistry` → `createSelection` → `createSingle` → `createStep`
 *
 * @see https://0.vuetifyjs.com/composables/selection/use-single
 *
 * @example
 * ```ts
-* import { useSingle } from '@vuetify/v0'
+* import { createSingle } from '@vuetify/v0'
 *
-* const single = useSingle()
+* const tabs = createSingle({ mandatory: true })
 *
-* single.onboard([
-*   { id: 'option-1', value: 'Option 1' },
-*   { id: 'option-2', value: 'Option 2' },
+* tabs.onboard([
+*   { id: 'home', value: 'Home' },
+*   { id: 'about', value: 'About' },
+*   { id: 'contact', value: 'Contact' },
 * ])
 *
-* single.select('option-1')
+* tabs.first() // Select first tab
 *
-* console.log(single.selectedId.value) // 'option-1'
+* console.log(tabs.selectedId.value) // 'home'
+* console.log(tabs.selectedIndex.value) // 0
+*
+* tabs.select('about') // Switch to about tab
+* console.log(tabs.selectedId.value) // 'about'
+* console.log(tabs.selectedIds.size) // 1 (always enforces single selection)
 * ```
 */
-function useSingle(options) {
-	const registry$1 = useSelection(options);
+function createSingle(options) {
+	const registry$1 = createSelection(options);
 	const mandatory = options?.mandatory ?? false;
 	const selectedId = computed(() => registry$1.selectedIds.values().next().value);
 	const selectedItem = computed(() => registry$1.selectedItems.value.values().next().value);
@@ -2480,14 +2891,41 @@ function useSingle(options) {
 * tabs.select('tab-1')
 * ```
 */
-function createSingleContext(namespace, options) {
+function createSingleContext(_options) {
+	const { namespace,...options } = _options;
 	const [useSingleContext, _provideSingleContext] = createContext(namespace);
-	const context = useSingle(options);
+	const context = createSingle(options);
 	function provideSingleContext(_context = context, app) {
 		return _provideSingleContext(_context, app);
 	}
 	return createTrinity(useSingleContext, provideSingleContext, context);
 }
+/**
+* Returns the current single selection instance.
+*
+* @param namespace The namespace for the single selection context. Defaults to `'v0:single'`.
+* @returns The current single selection instance.
+*
+* @see https://0.vuetifyjs.com/composables/selection/use-single
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { useSingle } from '@vuetify/v0'
+*
+*   const tabs = useSingle()
+* <\/script>
+*
+* <template>
+*   <div>
+*     <p>Selected: {{ tabs.selectedId }}</p>
+*   </div>
+* </template>
+* ```
+*/
+function useSingle(namespace = "v0:single") {
+	return useContext(namespace);
+}
 
 //#endregion
 //#region src/composables/useLocale/adapters/v0.ts
@@ -2501,7 +2939,7 @@ function createSingleContext(namespace, options) {
 var Vuetify0LocaleAdapter = class {
 	t(message, ...params) {
 		let resolvedMessage = message;
-		if (params.length > 0 && typeof params[0] === "object" && params[0] !== null && !Array.isArray(params[0])) {
+		if (params.length > 0 && /* @__PURE__ */ isObject(params[0])) {
 			const variables = params[0];
 			resolvedMessage = resolvedMessage.replace(/{([a-zA-Z][a-zA-Z0-9_]*)}/g, (match, name) => {
 				return variables[name] === void 0 ? match : String(variables[name]);
@@ -2527,7 +2965,6 @@ var Vuetify0LocaleAdapter = class {
 /**
 * Creates a new locale instance.
 *
-* @param namespace The namespace for the locale instance.
 * @param options The options for the locale instance.
 * @template Z The type of the locale ticket.
 * @template E The type of the locale context.
@@ -2535,38 +2972,45 @@ var Vuetify0LocaleAdapter = class {
 *
 * @see https://0.vuetifyjs.com/composables/plugins/use-locale
 */
-function createLocale(namespace = "v0:locale", options = {}) {
-	const { adapter = new Vuetify0LocaleAdapter(), messages = {} } = options;
-	const [useLocaleContext, _provideLocaleContext] = createContext(namespace);
-	const registry$1 = useSingle();
+function createLocale(_options = {}) {
+	const { adapter = new Vuetify0LocaleAdapter(), messages = {},...options } = _options;
+	const tokens = createTokens(messages, { flat: true });
+	const registry$1 = createSingle(options);
 	for (const id in messages) {
 		registry$1.register({
-			value: messages[id],
-			id
+			id,
+			value: messages[id]
 		});
 		if (id === options.default && !registry$1.selectedId.value) registry$1.select(id);
 	}
 	function t(key, ...params) {
 		const locale = registry$1.selectedId.value;
 		if (!locale) return key;
-		const message = messages[locale]?.[key];
-		const template = typeof message === "string" ? resolve(locale, message) : key;
+		const message = (registry$1.get(locale)?.value)?.[key];
+		const template = /* @__PURE__ */ isString(message) ? resolve(locale, message) : key;
 		return adapter.t(template, ...params);
 	}
 	function n(value, ...params) {
 		return adapter.n(value, registry$1.selectedId.value, ...params);
 	}
 	function resolve(locale, str) {
-		return str.replace(/{([a-zA-Z0-9.-_]+)}/g, (match, linkedKey) => {
-			const [linkedLocale, ...rest] = linkedKey.split(".");
-			const keyPath = rest.join(".");
-			const targetLocale = messages[linkedLocale] ? linkedLocale : locale;
-			const targetKey = messages[linkedLocale] ? keyPath : linkedKey;
-			const resolved = messages[targetLocale]?.[targetKey];
-			return typeof resolved === "string" ? resolve(targetLocale, resolved) : match;
+		return str.replace(/{([a-zA-Z0-9.-_]+)}/g, (match, key) => {
+			const [prefix, ...rest] = key.split(".");
+			const path = rest.join(".");
+			const prefixTicket = registry$1.get(prefix);
+			const target = prefixTicket ? prefix : locale;
+			const name = prefixTicket ? path : key;
+			const resolved = (registry$1.get(target)?.value)?.[name];
+			if (/* @__PURE__ */ isString(resolved)) return resolve(target, resolved);
+			const alias = `{${key}}`;
+			if (tokens.isAlias(alias)) {
+				const result = tokens.resolve(alias);
+				return /* @__PURE__ */ isString(result) ? result : match;
+			}
+			return match;
 		});
 	}
-	const context = {
+	return {
 		...registry$1,
 		t,
 		n,
@@ -2574,20 +3018,45 @@ function createLocale(namespace = "v0:locale", options = {}) {
 			return registry$1.size;
 		}
 	};
-	function provideLocaleContext(_context = context, app) {
-		return _provideLocaleContext(_context, app);
-	}
-	return createTrinity(useLocaleContext, provideLocaleContext, context);
 }
 /**
-* Returns the current locale instance.
+* Creates a new locale context.
 *
-* @returns The current locale instance.
+* @param options The options for the locale context.
+* @template Z The type of the locale ticket.
+* @template E The type of the locale context.
+* @returns A new locale context.
 *
 * @see https://0.vuetifyjs.com/composables/plugins/use-locale
+*
+* @example
+* ```ts
+* import { createLocaleContext } from '@vuetify/v0'
+*
+* export const [useAppLocale, provideAppLocale, appLocale] = createLocaleContext({
+*   namespace: 'app:locale',
+*   messages: {
+*     en: { hello: 'Hello' },
+*     es: { hello: 'Hola' },
+*   },
+* })
+*
+* // In a parent component:
+* provideAppLocale()
+*
+* // In a child component:
+* const locale = useAppLocale()
+* locale.select('es')
+* ```
 */
-function useLocale() {
-	return useContext("v0:locale");
+function createLocaleContext(_options = {}) {
+	const { namespace = "v0:locale",...options } = _options;
+	const [useLocaleContext, _provideLocaleContext] = createContext(namespace);
+	const context = createLocale(options);
+	function provideLocaleContext(_context = context, app) {
+		return _provideLocaleContext(_context, app);
+	}
+	return createTrinity(useLocaleContext, provideLocaleContext, context);
 }
 /**
 * Creates a new locale plugin.
@@ -2601,21 +3070,31 @@ function useLocale() {
 *
 * @see https://0.vuetifyjs.com/composables/plugins/use-locale
 */
-function createLocalePlugin(options = {}) {
-	const { adapter = new Vuetify0LocaleAdapter(), messages = {} } = options;
-	const [, provideLocaleTokenContext, tokensContext] = createTokensContext("v0:locale:tokens", messages);
-	const [, provideLocaleContext, localeContext] = createLocale("v0:locale", {
+function createLocalePlugin(_options = {}) {
+	const { namespace = "v0:locale", adapter = new Vuetify0LocaleAdapter(), messages = {},...options } = _options;
+	const [, provideLocaleContext, context] = createLocaleContext({
+		...options,
+		namespace,
 		adapter,
 		messages
 	});
 	return createPlugin({
-		namespace: "v0:locale",
+		namespace,
 		provide: (app) => {
-			provideLocaleContext(localeContext, app);
-			provideLocaleTokenContext(tokensContext, app);
+			provideLocaleContext(context, app);
 		}
 	});
 }
+/**
+* Returns the current locale instance.
+*
+* @returns The current locale instance.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-locale
+*/
+function useLocale(namespace = "v0:locale") {
+	return useContext(namespace);
+}
 
 //#endregion
 //#region src/composables/useMutationObserver/index.ts
@@ -2764,19 +3243,19 @@ var Vuetify0PermissionAdapter = class extends PermissionAdapter {
 /**
 * Creates a new permissions instance.
 *
-* @param namespace The namespace for the permissions instance.
 * @param options The options for the permissions instance.
 * @template Z The type of the permission ticket.
 * @template E The type of the permission context.
 * @returns A new permissions instance.
 *
-* @see https://0.vuetifyjs.com/composables/plugins/create-permissions
+* @see https://0.vuetifyjs.com/composables/plugins/use-permissions
 *
 * @example
 * ```ts
 * import { createPermissions } from '@vuetify/v0'
 *
-* const [usePermissions, providePermissions] = createPermissions('v0:permissions', {
+* const [usePermissions, providePermissions] = createPermissions({
+*   namespace: 'v0:permissions',
 *   permissions: {
 *     admin: [['read', 'users']],
 *     editor: [['edit', 'posts']],
@@ -2784,9 +3263,8 @@ var Vuetify0PermissionAdapter = class extends PermissionAdapter {
 * })
 * ```
 */
-function createPermissions(namespace = "v0:permissions", options = {}) {
-	const { adapter = new Vuetify0PermissionAdapter(), permissions = {} } = options;
-	const [usePermissionsContext, _providePermissionsContext] = createContext(namespace);
+function createPermissions(_options = {}) {
+	const { adapter = new Vuetify0PermissionAdapter(), permissions = {},...options } = _options;
 	const record = {};
 	for (const role in permissions) {
 		if (!record[role]) record[role] = {};
@@ -2795,44 +3273,46 @@ function createPermissions(namespace = "v0:permissions", options = {}) {
 			record[role][action][subject] = condition;
 		}
 	}
-	const tokens = useTokens(record);
-	function can(id, action, subject, context$1 = {}) {
-		return adapter.can(id, action, subject, context$1, tokens);
+	const tokens = createTokens(record, options);
+	function can(id, action, subject, context = {}) {
+		return adapter.can(id, action, subject, context, tokens);
 	}
-	const context = {
+	return {
 		...tokens,
 		can
 	};
-	function providePermissionsContext(_context = context, app) {
-		return _providePermissionsContext(_context, app);
-	}
-	return createTrinity(usePermissionsContext, providePermissionsContext, context);
 }
 /**
-* Returns the current permissions instance.
+* Creates a new permissions context.
 *
+* @param options The options for the permissions context.
 * @template Z The type of the permission ticket.
-* @returns The current permissions instance.
+* @template E The type of the permission context.
+* @returns A new permissions context.
 *
 * @see https://0.vuetifyjs.com/composables/plugins/use-permissions
 *
 * @example
-* ```vue
-* <script setup lang="ts">
-*   import { usePermissions } from '@vuetify/v0'
-*
-*   const { can } = usePermissions()
-* <\/script>
+* ```ts
+* import { createPermissionsContext } from '@vuetify/v0'
 *
-* <template>
-*   <div>
-*     <p v-if="can('admin', 'read', 'users')">Admin access</p>
-*   </div>
-* </template>
+* export const [usePermissions, providePermissions, context] = createPermissionsContext({
+*   namespace: 'app:permissions',
+*   permissions: {
+*     admin: [['read', 'users'], ['edit', 'users']],
+*     editor: [['edit', 'posts']],
+*   },
+* })
 * ```
 */
-function usePermissions() {
-	return useContext("v0:permissions");
+function createPermissionsContext(_options = {}) {
+	const { namespace = "v0:permissions",...options } = _options;
+	const [usePermissionsContext, _providePermissionsContext] = createContext(namespace);
+	const context = createPermissions(options);
+	function providePermissionsContext(_context = context, app) {
+		return _providePermissionsContext(_context, app);
+	}
+	return createTrinity(usePermissionsContext, providePermissionsContext, context);
 }
 /**
 * Creates a new permissions plugin.
@@ -2864,15 +3344,45 @@ function usePermissions() {
 * app.mount('#app')
 * ```
 */
-function createPermissionsPlugin(options = {}) {
-	const [, providePermissionContext, context] = createPermissions("v0:permissions", options);
+function createPermissionsPlugin(_options = {}) {
+	const { namespace = "v0:permissions",...options } = _options;
+	const [, providePermissionContext, context] = createPermissionsContext({
+		...options,
+		namespace
+	});
 	return createPlugin({
-		namespace: "v0:permissions",
+		namespace,
 		provide: (app) => {
 			providePermissionContext(context, app);
 		}
 	});
 }
+/**
+* Returns the current permissions instance.
+*
+* @template Z The type of the permission ticket.
+* @returns The current permissions instance.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-permissions
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { usePermissions } from '@vuetify/v0'
+*
+*   const { can } = usePermissions()
+* <\/script>
+*
+* <template>
+*   <div>
+*     <p v-if="can('admin', 'read', 'users')">Admin access</p>
+*   </div>
+* </template>
+* ```
+*/
+function usePermissions(namespace = "v0:permissions") {
+	return useContext(namespace);
+}
 
 //#endregion
 //#region src/composables/useProxyModel/index.ts
@@ -2891,9 +3401,9 @@ function createPermissionsPlugin(options = {}) {
 *
 * @example
 * ```ts
-* import { useSelection, useProxyModel } from '@vuetify/v0'
+* import { createSelection, useProxyModel } from '@vuetify/v0'
 *
-* const registry = useSelection({ events: true })
+* const registry = createSelection({ events: true })
 * registry.onboard([
 *   { id: 'item-1', value: 'Item 1' },
 *   { id: 'item-2', value: 'Item 2' },
@@ -3030,7 +3540,7 @@ function useProxyRegistry(registry$1, options) {
 	registry$1.on("update:ticket", update);
 	registry$1.on("clear:registry", update);
 	onScopeDispose(() => {
-		registry$1.off("register:item", update);
+		registry$1.off("register:ticket", update);
 		registry$1.off("unregister:ticket", update);
 		registry$1.off("update:ticket", update);
 		registry$1.off("clear:registry", update);
@@ -3071,8 +3581,8 @@ function useProxyRegistry(registry$1, options) {
 * console.log(queue.size) // 2
 * ```
 */
-function useQueue(_options) {
-	const { timeout: _timeout = 3e3,...options } = _options ?? {};
+function createQueue(_options = {}) {
+	const { timeout: _timeout = 3e3,...options } = _options;
 	const registry$1 = useRegistry({
 		...options,
 		events: true
@@ -3153,6 +3663,55 @@ function useQueue(_options) {
 		}
 	};
 }
+/**
+* Creates a new queue context.
+*
+* @param namespace The namespace for the queue context.
+* @param options The options for the queue context.
+* @template Z The type of the queue ticket.
+* @template E The type of the queue context.
+* @returns A new queue context.
+*
+* @see https://0.vuetifyjs.com/composables/registration/use-queue
+*
+* @example
+* ```ts
+* import { createQueueContext } from '@vuetify/v0'
+*
+* export const [useQueue, provideQueue] = createQueueContext('v0:queue', {
+*   timeout: 5000,
+* })
+* ```
+*/
+function createQueueContext(_options) {
+	const { namespace,...options } = _options;
+	const [useQueueContext, _provideQueueContext] = createContext(namespace);
+	const context = createQueue(options);
+	function provideQueueContext(_context = context, app) {
+		return _provideQueueContext(_context, app);
+	}
+	return createTrinity(useQueueContext, provideQueueContext, context);
+}
+/**
+* Returns the current queue instance.
+*
+* @param namespace The namespace for the queue context. Defaults to `'v0:queue'`.
+* @returns The current queue instance.
+*
+* @see https://0.vuetifyjs.com/composables/registration/use-queue
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { useQueue } from '@vuetify/v0'
+*
+*   const queue = useQueue()
+* <\/script>
+* ```
+*/
+function useQueue(namespace = "v0:queue") {
+	return useContext(namespace);
+}
 
 //#endregion
 //#region src/composables/useResizeObserver/index.ts
@@ -3308,35 +3867,66 @@ function useElementSize(target) {
 //#endregion
 //#region src/composables/useStep/index.ts
 /**
-* Creates a new step instance.
+* Creates a new step instance with circular navigation through items.
+*
+* Extends `createSingle` with `first()`, `last()`, `next()`, `prev()`, and `step(count)` methods
+* for sequential navigation. Automatically wraps around at boundaries (circular navigation).
 *
 * @param options The options for the step instance.
 * @template Z The type of the step ticket.
 * @template E The type of the step context.
-* @returns A new step instance.
+* @returns A new step instance with navigation methods.
+*
+* @remarks
+* **Key Features:**
+* - **Circular Navigation**: Wrapping at start/end boundaries
+* - **Disabled Item Skipping**: Automatically skips disabled items during navigation
+* - **Bidirectional**: Forward (`next`, positive `step`) and backward (`prev`, negative `step`)
+* - **Safe Edge Cases**: Handles empty registries and all-disabled scenarios gracefully
+*
+* **Navigation Methods:**
+* - `first()`: Select first non-disabled item
+* - `last()`: Select last non-disabled item
+* - `next()`: Move to next item (wraps to first)
+* - `prev()`: Move to previous item (wraps to last)
+* - `step(count)`: Move by `count` positions (negative for backward)
+*
+* **Wrapping Behavior:**
+* - Uses modulo arithmetic for circular wrapping: `((index % length) + length) % length`
+* - Works correctly with negative indexes and large step counts
+* - Continues searching if landing on disabled items (up to registry length iterations)
+* - Returns early if all items are disabled to prevent infinite loops
+*
+* **Inheritance Chain:**
+* `useRegistry` → `createSelection` → `createSingle` → `createStep`
 *
 * @see https://0.vuetifyjs.com/composables/selection/use-step
 *
 * @example
 * ```ts
-* import { useStep } from '@vuetify/v0'
+* import { createStep } from '@vuetify/v0'
 *
-* const stepper = useStep()
+* const wizard = createStep({ mandatory: true })
 *
-* stepper.onboard([
-*   { id: 'step-1', value: 'Account Info' },
-*   { id: 'step-2', value: 'Payment' },
-*   { id: 'step-3', value: 'Confirmation' },
+* wizard.onboard([
+*   { id: 'account', value: 'Account Info' },
+*   { id: 'payment', value: 'Payment Details' },
+*   { id: 'review', value: 'Review', disabled: true },
+*   { id: 'confirm', value: 'Confirmation' },
 * ])
 *
-* stepper.first()
-* stepper.next() // Move to step-2
+* wizard.first() // Select 'account'
+* console.log(wizard.selectedId.value) // 'account'
 *
-* console.log(stepper.selectedIndex.value) // 1
+* wizard.next() // Move to 'payment'
+* wizard.next() // Skip disabled 'review', move to 'confirm'
+* wizard.next() // Wrap around to 'account'
+*
+* wizard.step(-2) // Go back 2 steps (wraps correctly)
 * ```
 */
-function useStep(options) {
-	const registry$1 = useSingle(options);
+function createStep(options) {
+	const registry$1 = createSingle(options);
 	function first() {
 		const ticket = registry$1.seek("first");
 		if (ticket) registry$1.select(ticket.id);
@@ -3407,14 +3997,42 @@ function useStep(options) {
 * wizard.next() // Progress to next step
 * ```
 */
-function createStepContext(namespace, options) {
+function createStepContext(_options) {
+	const { namespace,...options } = _options;
 	const [useStepContext, _provideStepContext] = createContext(namespace);
-	const context = useStep(options);
+	const context = createStep(options);
 	function provideStepContext(_context = context, app) {
 		return _provideStepContext(_context, app);
 	}
 	return createTrinity(useStepContext, provideStepContext, context);
 }
+/**
+* Returns the current step instance.
+*
+* @param namespace The namespace for the step context. Defaults to `'v0:step'`.
+* @returns The current step instance.
+*
+* @see https://0.vuetifyjs.com/composables/selection/use-step
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { useStep } from '@vuetify/v0'
+*
+*   const wizard = useStep()
+* <\/script>
+*
+* <template>
+*   <div>
+*     <p>Current step: {{ wizard.selectedIndex }}</p>
+*     <button @click="wizard.next()">Next</button>
+*   </div>
+* </template>
+* ```
+*/
+function useStep(namespace = "v0:step") {
+	return useContext(namespace);
+}
 
 //#endregion
 //#region src/composables/useStorage/adapters/memory.ts
@@ -3530,31 +4148,14 @@ function createStorage(options = {}) {
 		clear
 	};
 }
-/**
-* Returns the current storage instance.
-*
-* @returns The current storage instance.
-*
-* @see https://0.vuetifyjs.com/composables/plugins/use-storage
-*
-* @example
-* ```vue
-* <script setup lang="ts">
-*   import { useStorage } from '@vuetify/v0'
-*
-*   const storage = useStorage()
-*   const username = storage.get('username', 'Guest')
-* <\/script>
-*
-* <template>
-*   <div>
-*     <p>Username: {{ username }}</p>
-*   </div>
-* </template>
-* ```
-*/
-function useStorage() {
-	return useStorageContext();
+function createStorageContext(_options = {}) {
+	const { namespace = "v0:storage",...options } = _options;
+	const [useStorageContext$1, _provideStorageContext] = createContext(namespace);
+	const context = createStorage(options);
+	function provideStorageContext$1(_context = context, app) {
+		return _provideStorageContext(_context, app);
+	}
+	return createTrinity(useStorageContext$1, provideStorageContext$1, context);
 }
 /**
 * Creates a new storage plugin.
@@ -3577,15 +4178,46 @@ function useStorage() {
 * app.mount('#app')
 * ```
 */
-function createStoragePlugin(options = {}) {
-	const context = createStorage(options);
+function createStoragePlugin(_options = {}) {
+	const { namespace = "v0:storage",...options } = _options;
+	const [, provideStorageContext$1, context] = createStorageContext({
+		...options,
+		namespace
+	});
 	return createPlugin({
-		namespace: "v0:storage",
+		namespace,
 		provide: (app) => {
-			provideStorageContext(context, app);
+			provideStorageContext$1(context, app);
 		}
 	});
 }
+/**
+* Returns the current storage instance.
+*
+* @param namespace The namespace for the storage context. Defaults to `'v0:storage'`.
+* @returns The current storage instance.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-storage
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { useStorage } from '@vuetify/v0'
+*
+*   const storage = useStorage()
+*   const username = storage.get('username', 'Guest')
+* <\/script>
+*
+* <template>
+*   <div>
+*     <p>Username: {{ username }}</p>
+*   </div>
+* </template>
+* ```
+*/
+function useStorage(namespace = "v0:storage") {
+	return useContext(namespace);
+}
 
 //#endregion
 //#region src/composables/useTheme/adapters/adapter.ts
@@ -3643,7 +4275,6 @@ var Vuetify0ThemeAdapter = class extends ThemeAdapter {
 /**
 * Creates a new theme instance.
 *
-* @param namespace The namespace for the theme instance.
 * @param options The options for the theme instance.
 * @template Z The type of the theme ticket.
 * @template E The type of the theme context.
@@ -3655,7 +4286,8 @@ var Vuetify0ThemeAdapter = class extends ThemeAdapter {
 * ```ts
 * import { createTheme } from '@vuetify/v0'
 *
-* export const [useTheme, provideTheme] = createTheme('v0:theme', {
+* export const [useTheme, provideTheme] = createTheme({
+*   namespace: 'v0:theme',
 *   default: 'light',
 *   themes: {
 *     light: {
@@ -3674,14 +4306,13 @@ var Vuetify0ThemeAdapter = class extends ThemeAdapter {
 * })
 * ```
 */
-function createTheme(namespace = "v0:theme", options = {}) {
-	const { themes = {}, palette = {} } = options;
-	const [useThemeContext, _provideThemeContext] = createContext(namespace);
-	const tokens = useTokens({
+function createTheme(_options = {}) {
+	const { themes = {}, palette = {},...options } = _options;
+	const tokens = createTokens({
 		palette,
 		...themes
 	}, { flat: true });
-	const registry$1 = useSingle();
+	const registry$1 = createSingle(options);
 	for (const id in themes) {
 		const { colors: value,...theme } = themes[id];
 		register({
@@ -3718,7 +4349,7 @@ function createTheme(namespace = "v0:theme", options = {}) {
 		};
 		return registry$1.register(item);
 	}
-	const context = {
+	return {
 		...registry$1,
 		colors,
 		register,
@@ -3727,40 +4358,54 @@ function createTheme(namespace = "v0:theme", options = {}) {
 			return registry$1.size;
 		}
 	};
-	function provideThemeContext(_context = context, app) {
-		return _provideThemeContext(_context, app);
-	}
-	return createTrinity(useThemeContext, provideThemeContext, context);
 }
 /**
-* Returns the current theme instance.
+* Creates a new theme context trinity.
 *
-* @returns The current theme instance.
+* @param options The options for the theme context.
+* @template Z The type of the theme ticket.
+* @template E The type of the theme context.
+* @returns A new theme context trinity.
 *
 * @see https://0.vuetifyjs.com/composables/plugins/use-theme
 *
 * @example
-* ```vue
-* <script setup lang="ts">
-*   import { useTheme } from '@vuetify/v0'
-*
-*   const theme = useTheme()
-* <\/script>
+* ```ts
+* import { createThemeContext } from '@vuetify/v0'
 *
-* <template>
-*   <div>
-*     <p>Current theme: {{ theme.selected.value }}</p>
-*   </div>
-* </template>
+* export const [useThemeContext, provideThemeContext, context] = createThemeContext({
+*   namespace: 'v0:theme',
+*   default: 'light',
+*   themes: {
+*     light: {
+*       dark: false,
+*       colors: {
+*         primary: '#3b82f6',
+*       },
+*     },
+*     dark: {
+*       dark: true,
+*       colors: {
+*         primary: '#675496',
+*       },
+*     },
+*   },
+* })
 * ```
 */
-function useTheme() {
-	return useContext("v0:theme");
+function createThemeContext(_options = {}) {
+	const { namespace = "v0:theme",...options } = _options;
+	const [useThemeContext, _provideThemeContext] = createContext(namespace);
+	const context = createTheme(options);
+	function provideThemeContext(_context = context, app) {
+		return _provideThemeContext(_context, app);
+	}
+	return createTrinity(useThemeContext, provideThemeContext, context);
 }
 /**
 * Creates a new theme plugin.
 *
-* @param _options The options for the theme plugin.
+* @param options The options for the theme plugin.
 * @template Z The type of the theme ticket.
 * @template E The type of the theme context.
 * @returns A new theme plugin.
@@ -3799,27 +4444,28 @@ function useTheme() {
 * ```
 */
 function createThemePlugin(_options = {}) {
-	const { adapter = new Vuetify0ThemeAdapter(), palette = {}, themes = {}, target,...options } = _options;
-	const [, provideThemeContext, themeContext] = createTheme("v0:theme", {
+	const { adapter = new Vuetify0ThemeAdapter(), namespace = "v0:theme", palette = {}, themes = {}, target,...options } = _options;
+	const [, provideThemeContext, context] = createThemeContext({
 		...options,
+		namespace,
 		themes,
 		palette
 	});
 	return createPlugin({
-		namespace: "v0:theme",
+		namespace,
 		provide: (app) => {
-			provideThemeContext(themeContext, app);
+			provideThemeContext(context, app);
 		},
 		setup: (app) => {
 			if (IN_BROWSER) {
-				onScopeDispose(watch(themeContext.colors, (colors) => {
+				onScopeDispose(watch(context.colors, (colors) => {
 					adapter.update(colors);
 				}, { immediate: true }), true);
 				if (target === null) return;
-				const targetEl = target instanceof HTMLElement ? target : typeof target === "string" ? document.querySelector(target) : app._container || document.querySelector("#app") || document.body;
+				const targetEl = target instanceof HTMLElement ? target : /* @__PURE__ */ isString(target) ? document.querySelector(target) : app._container || document.querySelector("#app") || document.body;
 				if (!targetEl) return;
 				let prevClass = "";
-				onScopeDispose(watch(themeContext.selectedId, (id) => {
+				onScopeDispose(watch(context.selectedId, (id) => {
 					if (!id) return;
 					const themeClass = `${adapter.prefix}-theme--${id}`;
 					if (prevClass) targetEl.classList.remove(prevClass);
@@ -3829,11 +4475,11 @@ function createThemePlugin(_options = {}) {
 			} else {
 				const head = app._context?.provides?.usehead ?? app._context?.provides?.head;
 				if (head?.push) {
-					const id = themeContext.selectedId.value;
+					const id = context.selectedId.value;
 					head.push({
 						htmlAttrs: { class: id ? `${adapter.prefix}-theme--${id}` : "" },
 						style: [{
-							innerHTML: adapter.generate(themeContext.colors.value),
+							innerHTML: adapter.generate(context.colors.value),
 							id: adapter.stylesheetId
 						}]
 					});
@@ -3842,6 +4488,32 @@ function createThemePlugin(_options = {}) {
 		}
 	});
 }
+/**
+* Returns the current theme instance.
+*
+* @param namespace The namespace for the theme context. Defaults to `v0:theme`.
+* @returns The current theme instance.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-theme
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { useTheme } from '@vuetify/v0'
+*
+*   const theme = useTheme()
+* <\/script>
+*
+* <template>
+*   <div>
+*     <p>Current theme: {{ theme.selected.value }}</p>
+*   </div>
+* </template>
+* ```
+*/
+function useTheme(namespace = "v0:theme") {
+	return useContext(namespace);
+}
 
 //#endregion
 //#region src/composables/useTimeline/index.ts
@@ -3872,7 +4544,7 @@ function createThemePlugin(_options = {}) {
 * console.log(timeline.values()) // [{ id: 'one' }, { id: 'two' }, { id: 'three' }]
 * ```
 */
-function useTimeline(_options = {}) {
+function createTimeline(_options = {}) {
 	const { size = 10,...options } = _options;
 	const registry$1 = useRegistry(options);
 	const stack = [];
@@ -3919,10 +4591,66 @@ function useTimeline(_options = {}) {
 		}
 	};
 }
+/**
+* Creates a new timeline plugin.
+*
+* @param namespace The namespace for the timeline plugin.
+* @param options The options for the timeline plugin.
+* @template Z The type of the timeline ticket.
+* @template E The type of the timeline context.
+* @returns A new timeline plugin.
+*
+* @see https://0.vuetifyjs.com/composables/registration/use-timeline
+*
+* @example
+* ```ts
+* import { createTimelineContext } from '@vuetify/v0'
+*
+* export const [useTimeline, provideTimeline, context] = createTimelineContext('v0:timeline', { size: 5 })
+* context.register({ id: 'example' })
+*
+* // In a parent component
+* provideTimeline()
+*
+* // In a child component
+* const timeline = useTimeline()
+*
+* console.log(timeline.values()) // [{ id: 'example' }]
+* ```
+*/
+function createTimelineContext(_options) {
+	const { namespace,...options } = _options;
+	const [useTimelineContext, _provideTimelineContext] = createContext(namespace);
+	const context = createTimeline(options);
+	function provideTimelineContext(_context = context, app) {
+		return _provideTimelineContext(_context, app);
+	}
+	return createTrinity(useTimelineContext, provideTimelineContext, context);
+}
+/**
+* Returns the current timeline instance.
+*
+* @param namespace The namespace for the timeline context. Defaults to `'v0:timeline'`.
+* @returns The current timeline instance.
+*
+* @see https://0.vuetifyjs.com/composables/registration/use-timeline
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { useTimeline } from '@vuetify/v0'
+*
+*   const timeline = useTimeline()
+* <\/script>
+* ```
+*/
+function useTimeline(namespace = "v0:timeline") {
+	return useContext(namespace);
+}
 
 //#endregion
 //#region src/components/Avatar/AvatarRoot.vue?vue&type=script&setup=true&lang.ts
-const [useAvatarContext, provideAvatarContext, registry] = createRegistryContext("avatar");
+const [useAvatarContext, provideAvatarContext, registry] = createRegistryContext({ namespace: "avatar" });
 var AvatarRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	name: "AvatarRoot",
 	__name: "AvatarRoot",
@@ -4076,143 +4804,6 @@ const Avatar = {
 	Root: AvatarRoot_default
 };
 
-//#endregion
-//#region src/components/Breakpoints/BreakpointsItem.vue?vue&type=script&setup=true&lang.ts
-var BreakpointsItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	name: "BreakpointsItem",
-	__name: "BreakpointsItem",
-	setup(__props) {
-		const breakpointsContext = useBreakpoints();
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [_ctx.$slots.xs && unref(breakpointsContext).xs ? renderSlot(_ctx.$slots, "xs", normalizeProps(mergeProps({ key: 0 }, unref(breakpointsContext)))) : _ctx.$slots.sm && unref(breakpointsContext).sm ? renderSlot(_ctx.$slots, "sm", normalizeProps(mergeProps({ key: 1 }, unref(breakpointsContext)))) : _ctx.$slots.md && unref(breakpointsContext).md ? renderSlot(_ctx.$slots, "md", normalizeProps(mergeProps({ key: 2 }, unref(breakpointsContext)))) : _ctx.$slots.lg && unref(breakpointsContext).lg ? renderSlot(_ctx.$slots, "lg", normalizeProps(mergeProps({ key: 3 }, unref(breakpointsContext)))) : _ctx.$slots.xl && unref(breakpointsContext).xl ? renderSlot(_ctx.$slots, "xl", normalizeProps(mergeProps({ key: 4 }, unref(breakpointsContext)))) : _ctx.$slots.xxl && unref(breakpointsContext).xxl ? renderSlot(_ctx.$slots, "xxl", normalizeProps(mergeProps({ key: 5 }, unref(breakpointsContext)))) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(breakpointsContext))))], 64);
-		};
-	}
-});
-
-//#endregion
-//#region src/components/Breakpoints/BreakpointsItem.vue
-var BreakpointsItem_default = BreakpointsItem_vue_vue_type_script_setup_true_lang_default;
-
-//#endregion
-//#region src/components/Breakpoints/BreakpointsRoot.vue?vue&type=script&setup=true&lang.ts
-var BreakpointsRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	name: "BreakpointsRoot",
-	__name: "BreakpointsRoot",
-	props: {
-		mobileBreakpoint: {},
-		breakpoints: {}
-	},
-	setup(__props) {
-		const [, provideBreakpointsContext, context] = createBreakpoints("v0:breakpoints", __props);
-		provideBreakpointsContext(context);
-		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(context))));
-		};
-	}
-});
-
-//#endregion
-//#region src/components/Breakpoints/BreakpointsRoot.vue
-var BreakpointsRoot_default = BreakpointsRoot_vue_vue_type_script_setup_true_lang_default;
-
-//#endregion
-//#region src/components/Breakpoints/index.ts
-const Breakpoints = {
-	Item: BreakpointsItem_default,
-	Root: BreakpointsRoot_default
-};
-
-//#endregion
-//#region src/components/Context/ContextItem.vue?vue&type=script&setup=true&lang.ts
-var ContextItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	name: "ContextItem",
-	__name: "ContextItem",
-	props: {
-		contextKey: {},
-		value: {}
-	},
-	setup(__props) {
-		let contextValue;
-		if (__props.value !== void 0) contextValue = __props.value;
-		else if (__props.contextKey) {
-			const [injectContext] = createContext(__props.contextKey);
-			contextValue = injectContext();
-		} else throw new Error("Context component requires either a \"value\" prop or a \"contextKey\" prop");
-		const bindableProps = toRef(() => ({ value: contextValue }));
-		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(bindableProps.value)));
-		};
-	}
-});
-
-//#endregion
-//#region src/components/Context/ContextItem.vue
-var ContextItem_default = ContextItem_vue_vue_type_script_setup_true_lang_default;
-
-//#endregion
-//#region src/components/Context/ContextRoot.vue?vue&type=script&setup=true&lang.ts
-var ContextRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	name: "ContextRoot",
-	__name: "ContextRoot",
-	props: {
-		contextKey: {},
-		value: {}
-	},
-	setup(__props) {
-		const [, provideContext$1] = createContext(__props.contextKey);
-		provideContext$1(__props.value);
-		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default");
-		};
-	}
-});
-
-//#endregion
-//#region src/components/Context/ContextRoot.vue
-var ContextRoot_default = ContextRoot_vue_vue_type_script_setup_true_lang_default;
-
-//#endregion
-//#region src/components/Context/index.ts
-const Context = {
-	Item: ContextItem_default,
-	Root: ContextRoot_default
-};
-
-//#endregion
-//#region src/components/Hydration/Hydration.vue?vue&type=script&setup=true&lang.ts
-var Hydration_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	name: "Hydration",
-	__name: "Hydration",
-	setup(__props) {
-		const hydrationContext = useHydration();
-		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(hydrationContext))));
-		};
-	}
-});
-
-//#endregion
-//#region src/components/Hydration/Hydration.vue
-var Hydration_default = Hydration_vue_vue_type_script_setup_true_lang_default;
-
-//#endregion
-//#region src/components/Hydration/HydrationRoot.vue?vue&type=script&setup=true&lang.ts
-var HydrationRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	name: "HydrationRoot",
-	__name: "HydrationRoot",
-	setup(__props) {
-		const hydrationContext = createHydration();
-		provideHydrationContext(hydrationContext);
-		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(hydrationContext))));
-		};
-	}
-});
-
-//#endregion
-//#region src/components/Hydration/HydrationRoot.vue
-var HydrationRoot_default = HydrationRoot_vue_vue_type_script_setup_true_lang_default;
-
 //#endregion
 //#region src/components/Popover/PopoverRoot.vue?vue&type=script&setup=true&lang.ts
 const [usePopoverContext, providePopoverContext] = createContext("Popover");
@@ -4364,51 +4955,4 @@ const Popover = {
 };
 
 //#endregion
-//#region src/components/Theme/ThemeItem.vue?vue&type=script&setup=true&lang.ts
-var ThemeItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	name: "ThemeItem",
-	__name: "ThemeItem",
-	setup(__props) {
-		const themeContext = useTheme();
-		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(themeContext))));
-		};
-	}
-});
-
-//#endregion
-//#region src/components/Theme/ThemeItem.vue
-var ThemeItem_default = ThemeItem_vue_vue_type_script_setup_true_lang_default;
-
-//#endregion
-//#region src/components/Theme/ThemeRoot.vue?vue&type=script&setup=true&lang.ts
-var ThemeRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	name: "ThemeRoot",
-	__name: "ThemeRoot",
-	props: {
-		namespace: { default: "v0:theme" },
-		themes: { default: () => [] }
-	},
-	setup(__props) {
-		const [provideThemeContext] = createTheme(__props.namespace);
-		const themeContext = provideThemeContext();
-		for (const theme of __props.themes) themeContext.register(theme);
-		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(themeContext))));
-		};
-	}
-});
-
-//#endregion
-//#region src/components/Theme/ThemeRoot.vue
-var ThemeRoot_default = ThemeRoot_vue_vue_type_script_setup_true_lang_default;
-
-//#endregion
-//#region src/components/Theme/index.ts
-const Theme = {
-	Item: ThemeItem_default,
-	Root: ThemeRoot_default
-};
-
-//#endregion
-export { Atom_default as Atom, Avatar, Breakpoints, COMMON_ELEMENTS, ConsolaLoggerAdapter, Context, Hydration_default as Hydration, HydrationRoot_default as HydrationRoot, IN_BROWSER, MemoryAdapter, PermissionAdapter, PinoLoggerAdapter, Popover, SELF_CLOSING_TAGS, SUPPORTS_INTERSECTION_OBSERVER, SUPPORTS_MATCH_MEDIA, SUPPORTS_MUTATION_OBSERVER, SUPPORTS_OBSERVER, SUPPORTS_TOUCH, Theme, Vuetify0LocaleAdapter, Vuetify0LoggerAdapter, Vuetify0ThemeAdapter, __LOGGER_ENABLED__, createBreakpoints, createBreakpointsPlugin, createContext, createFeatures, createFeaturesPlugin, createGroupContext, createHydration, createHydrationPlugin, createLocale, createLocalePlugin, createLogger, createLoggerPlugin, createPermissions, createPermissionsPlugin, createPlugin, createRegistryContext, createSelectionContext, createSingleContext, createStepContext, createStorage, createStoragePlugin, createTheme, createThemePlugin, createTokensContext, createTrinity, genId, isArray, isBoolean, isFunction, isNullOrUndefined, isNumber, isObject, isPrimitive, isSelfClosingTag, isString, isUndefined, mergeDeep, provideAvatarContext, provideContext, provideHydrationContext, providePopoverContext, provideStorageContext, registry, toArray, toReactive, useAvatarContext, useBreakpoints, useContext, useDocumentEventListener, useElementIntersection, useElementSize, useEventListener, useFeatures, useFilter, useForm, useGroup, useHydration, useHydrationContext, useIntersectionObserver, useKeydown, useLocale, useLogger, useMutationObserver, usePermissions, usePopoverContext, useProxyModel, useProxyRegistry, useQueue, useRegistry, useResizeObserver, useSelection, useSingle, useStep, useStorage, useStorageContext, useTheme, useTimeline, useTokens, useWindowEventListener, version };
+export { Atom_default as Atom, Avatar, COMMON_ELEMENTS, ConsolaLoggerAdapter, IN_BROWSER, MemoryAdapter, PermissionAdapter, PinoLoggerAdapter, Popover, SELF_CLOSING_TAGS, SUPPORTS_INTERSECTION_OBSERVER, SUPPORTS_MATCH_MEDIA, SUPPORTS_MUTATION_OBSERVER, SUPPORTS_OBSERVER, SUPPORTS_TOUCH, Vuetify0LocaleAdapter, Vuetify0LoggerAdapter, Vuetify0ThemeAdapter, __LOGGER_ENABLED__, createBreakpoints, createBreakpointsContext, createBreakpointsPlugin, createContext, createFeatures, createFeaturesContext, createFeaturesPlugin, createForm, createFormContext, createGroup, createGroupContext, createHydration, createHydrationContext, createHydrationPlugin, createLocale, createLocaleContext, createLocalePlugin, createLogger, createLoggerContext, createLoggerPlugin, createPermissions, createPermissionsContext, createPermissionsPlugin, createPlugin, createQueue, createQueueContext, createRegistryContext, createSelection, createSelectionContext, createSingle, createSingleContext, createStep, createStepContext, createStorage, createStorageContext, createStoragePlugin, createTheme, createThemeContext, createThemePlugin, createTimeline, createTimelineContext, createTokens, createTokensContext, createTrinity, genId, isArray, isBoolean, isFunction, isNullOrUndefined, isNumber, isObject, isPrimitive, isSelfClosingTag, isString, isUndefined, mergeDeep, provideAvatarContext, provideContext, providePopoverContext, provideStorageContext, registry, toArray, toReactive, useAvatarContext, useBreakpoints, useContext, useDocumentEventListener, useElementIntersection, useElementSize, useEventListener, useFeatures, useFilter, useForm, useGroup, useHydration, useIntersectionObserver, useKeydown, useLocale, useLogger, useMutationObserver, usePermissions, usePopoverContext, useProxyModel, useProxyRegistry, useQueue, useRegistry, useResizeObserver, useSelection, useSingle, useStep, useStorage, useStorageContext, useTheme, useTimeline, useTokens, useWindowEventListener, version };