@vuetify/v0 0.0.18 → 0.0.21

package/dist/browser/index.js

@@ -1,4 +1,4 @@
-import { computed, createBlock, createCommentVNode, createPropsRestProxy, createTextVNode, defineComponent, effectScope, getCurrentInstance, 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, withCtx, withDirectives } from "vue";
+import { computed, createBlock, createCommentVNode, createPropsRestProxy, createTextVNode, defineComponent, effectScope, getCurrentInstance, 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";
 
 //#region src/constants/htmlElements.ts
 const selfClosingTags = [
@@ -78,69 +78,299 @@ function isSelfClosingTag(tag) {
 
 //#endregion
 //#region src/utilities/helpers.ts
+/**
+* Checks if a value is a function
+*
+* @param item The value to check
+* @returns True if the value is a function
+*
+* @example
+* ```ts
+* isFunction(() => {})  // true
+* isFunction('string')  // false
+* ```
+*/
 /* @__NO_SIDE_EFFECTS__ */
 function isFunction(item) {
 	return typeof item === "function";
 }
+/**
+* Checks if a value is a string
+*
+* @param item The value to check
+* @returns True if the value is a string
+*
+* @example
+* ```ts
+* isString('hello')  // true
+* isString(123)      // false
+* ```
+*/
 /* @__NO_SIDE_EFFECTS__ */
 function isString(item) {
 	return typeof item === "string";
 }
+/**
+* Checks if a value is a number
+*
+* @param item The value to check
+* @returns True if the value is a number (including NaN)
+*
+* @example
+* ```ts
+* isNumber(123)       // true
+* isNumber(NaN)       // true
+* isNumber('123')     // false
+* ```
+*
+* @see {@link isNaN} to check for NaN specifically
+*/
 /* @__NO_SIDE_EFFECTS__ */
 function isNumber(item) {
 	return typeof item === "number";
 }
+/**
+* Checks if a value is a boolean
+*
+* @param item The value to check
+* @returns True if the value is a boolean
+*
+* @example
+* ```ts
+* isBoolean(true)   // true
+* isBoolean(false)  // true
+* isBoolean(0)      // false
+* ```
+*/
 /* @__NO_SIDE_EFFECTS__ */
 function isBoolean(item) {
 	return typeof item === "boolean";
 }
+/**
+* Checks if a value is a plain object (excludes null and arrays)
+*
+* @param item The value to check
+* @returns True if the value is a plain object
+*
+* @remarks
+* Returns false for null and arrays, even though `typeof null === 'object'`
+* and `typeof [] === 'object'` in JavaScript.
+*
+* @example
+* ```ts
+* isObject({})        // true
+* isObject({ a: 1 })  // true
+* isObject(null)      // false
+* isObject([])        // false
+* ```
+*
+* @see {@link isArray} to check for arrays
+* @see {@link isNull} to check for null
+*/
 /* @__NO_SIDE_EFFECTS__ */
 function isObject(item) {
 	return typeof item === "object" && item !== null && !Array.isArray(item);
 }
+/**
+* Checks if a value is an array
+*
+* @param item The value to check
+* @returns True if the value is an array
+*
+* @example
+* ```ts
+* isArray([])        // true
+* isArray([1, 2, 3]) // true
+* isArray('string')  // false
+* ```
+*/
 /* @__NO_SIDE_EFFECTS__ */
 function isArray(item) {
 	return Array.isArray(item);
 }
+/**
+* Checks if a value is null
+*
+* @param item The value to check
+* @returns True if the value is null
+*
+* @example
+* ```ts
+* isNull(null)      // true
+* isNull(undefined) // false
+* ```
+*
+* @see {@link isUndefined} to check for undefined
+* @see {@link isNullOrUndefined} to check for either
+*/
 /* @__NO_SIDE_EFFECTS__ */
 function isNull(item) {
 	return item === null;
 }
+/**
+* Checks if a value is null or undefined
+*
+* @param item The value to check
+* @returns True if the value is null or undefined
+*
+* @remarks
+* Uses loose equality (`== null`) which matches both null and undefined.
+*
+* @example
+* ```ts
+* isNullOrUndefined(null)      // true
+* isNullOrUndefined(undefined) // true
+* isNullOrUndefined(0)         // false
+* isNullOrUndefined('')        // false
+* ```
+*
+* @see {@link isNull} to check for null only
+* @see {@link isUndefined} to check for undefined only
+*/
 /* @__NO_SIDE_EFFECTS__ */
 function isNullOrUndefined(item) {
 	return item == null;
 }
+/**
+* Checks if a value is undefined
+*
+* @param item The value to check
+* @returns True if the value is undefined
+*
+* @example
+* ```ts
+* isUndefined(undefined) // true
+* isUndefined(null)      // false
+* ```
+*
+* @see {@link isNull} to check for null
+* @see {@link isNullOrUndefined} to check for either
+*/
 /* @__NO_SIDE_EFFECTS__ */
 function isUndefined(item) {
 	return item === void 0;
 }
+/**
+* Checks if a value is a primitive (string, number, or boolean)
+*
+* @param item The value to check
+* @returns True if the value is a string, number, or boolean
+*
+* @example
+* ```ts
+* isPrimitive('hello') // true
+* isPrimitive(123)     // true
+* isPrimitive(true)    // true
+* isPrimitive({})      // false
+* isPrimitive(null)    // false
+* ```
+*/
 /* @__NO_SIDE_EFFECTS__ */
 function isPrimitive(item) {
 	return typeof item === "string" || typeof item === "number" || typeof item === "boolean";
 }
+/**
+* Checks if a value is a symbol
+*
+* @param item The value to check
+* @returns True if the value is a symbol
+*
+* @example
+* ```ts
+* isSymbol(Symbol('test')) // true
+* isSymbol('symbol')       // false
+* ```
+*/
 /* @__NO_SIDE_EFFECTS__ */
 function isSymbol(item) {
 	return typeof item === "symbol";
 }
+/**
+* Checks if a value is NaN (Not a Number)
+*
+* @param item The value to check
+* @returns True if the value is NaN
+*
+* @remarks
+* Uses `Number.isNaN()` which only returns true for the actual NaN value,
+* unlike the global `isNaN()` which coerces the argument to a number first.
+*
+* @example
+* ```ts
+* isNaN(NaN)         // true
+* isNaN(123)         // false
+* isNaN('hello')     // false (unlike global isNaN)
+* isNaN(undefined)   // false (unlike global isNaN)
+* ```
+*
+* @see {@link isNumber} to check if a value is a number type
+*/
 /* @__NO_SIDE_EFFECTS__ */
 function isNaN(item) {
 	return /* @__PURE__ */ isNumber(item) && Number.isNaN(item);
 }
+/**
+* Deeply merges source objects into a target object
+*
+* @param target The target object to merge into (will be mutated)
+* @param sources One or more source objects to merge from
+* @returns The mutated target object
+*
+* @remarks
+* - Mutates the target object in place
+* - Nested objects are recursively merged
+* - Arrays are replaced, not merged
+* - Primitives from sources overwrite target values
+*
+* @example
+* ```ts
+* const target = { a: 1, b: { c: 2 } }
+* mergeDeep(target, { b: { d: 3 } })
+* // target is now { a: 1, b: { c: 2, d: 3 } }
+*
+* // Multiple sources
+* mergeDeep({}, { a: 1 }, { b: 2 }) // { a: 1, b: 2 }
+*
+* // Arrays are replaced
+* mergeDeep({ arr: [1, 2] }, { arr: [3] }) // { arr: [3] }
+* ```
+*/
+const UNSAFE_KEYS = new Set([
+	"__proto__",
+	"constructor",
+	"prototype"
+]);
 /* @__NO_SIDE_EFFECTS__ */
 function mergeDeep(target, ...sources) {
 	if (sources.length === 0) return target;
 	const source = sources.shift();
-	if (/* @__PURE__ */ isObject(target) && /* @__PURE__ */ isObject(source)) {
-		for (const key in source) if (Object.prototype.hasOwnProperty.call(source, key)) {
-			const sourceValue = source[key];
-			const targetValue = target[key];
-			if (/* @__PURE__ */ isObject(sourceValue)) {
-				if (!/* @__PURE__ */ isObject(targetValue)) Object.assign(target, { [key]: {} });
-			} else Object.assign(target, { [key]: sourceValue });
-		}
+	if (/* @__PURE__ */ isObject(target) && /* @__PURE__ */ isObject(source)) for (const key in source) {
+		if (UNSAFE_KEYS.has(key)) continue;
+		if (!Object.prototype.hasOwnProperty.call(source, key)) continue;
+		const sourceValue = source[key];
+		const targetValue = target[key];
+		if (/* @__PURE__ */ isObject(sourceValue)) {
+			if (!/* @__PURE__ */ isObject(targetValue)) Object.assign(target, { [key]: {} });
+			target[key];
+		} else Object.assign(target, { [key]: sourceValue });
 	}
 	return /* @__PURE__ */ mergeDeep(target, ...sources);
 }
+/**
+* Generates a random 7-character alphanumeric ID
+*
+* @returns A random string of 7 characters (a-z, 0-9)
+*
+* @remarks
+* Uses `Math.random()` converted to base-36. Not cryptographically secure.
+* Suitable for unique keys in UI components, not for security purposes.
+*
+* @example
+* ```ts
+* genId() // 'k7x9m2p'
+* genId() // 'a3b8c1d'
+* ```
+*/
 /* @__NO_SIDE_EFFECTS__ */
 function genId() {
 	return Math.random().toString(36).slice(2, 9);
@@ -216,6 +446,27 @@ function debounce(fn, delay) {
 
 //#endregion
 //#region src/components/Atom/Atom.vue
+/**
+* @module Atom
+*
+* @remarks
+* Foundation component providing polymorphic rendering with three modes:
+* 1. **Element Mode** (default): Renders as any HTML element via the `as` prop
+* 2. **Renderless Mode**: Renders slot content directly without wrapper
+* 3. **Null Mode**: Equivalent to renderless when `as={null}`
+*
+* Key features:
+* - Polymorphic element rendering (div, button, span, etc.)
+* - Self-closing tag detection (img, input, br, hr, etc.)
+* - Automatic attribute forwarding to rendered element
+* - Generic slot props typing for type-safe attribute passing
+* - Template ref exposure for DOM element access
+* - Renderless mode for maximum flexibility
+*
+* The Atom component is the lowest-level primitive in the component system,
+* serving as the foundation for all other components that need polymorphic
+* rendering capabilities.
+*/
 const _sfc_main$27 = /* @__PURE__ */ defineComponent({
 	name: "Atom",
 	__name: "Atom",
@@ -394,6 +645,18 @@ function createTrinity(useContext$1, provideContext$1, context) {
 	];
 }
 
+//#endregion
+//#region src/constants/globals.ts
+const IN_BROWSER = typeof window !== "undefined";
+const SUPPORTS_TOUCH = IN_BROWSER && ("ontouchstart" in window || window.navigator.maxTouchPoints > 0);
+const SUPPORTS_MATCH_MEDIA = IN_BROWSER && "matchMedia" in window && typeof window.matchMedia === "function";
+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.21";
+/* v8 ignore next -- build-time constant, __DEV__ short-circuits in tests */
+const __LOGGER_ENABLED__ = false;
+
 //#endregion
 //#region src/composables/createPlugin/index.ts
 /**
@@ -505,17 +768,6 @@ var PinoLoggerAdapter = class {
 	}
 };
 
-//#endregion
-//#region src/constants/globals.ts
-const IN_BROWSER = typeof window !== "undefined";
-const SUPPORTS_TOUCH = IN_BROWSER && ("ontouchstart" in window || window.navigator.maxTouchPoints > 0);
-const SUPPORTS_MATCH_MEDIA = IN_BROWSER && "matchMedia" in window && typeof window.matchMedia === "function";
-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.18";
-const __LOGGER_ENABLED__ = false;
-
 //#endregion
 //#region src/composables/useLogger/adapters/v0.ts
 /**
@@ -561,10 +813,12 @@ var Vuetify0LoggerAdapter = class {
 	}
 	timestamp() {
 		if (!IN_BROWSER) return (/* @__PURE__ */ new Date()).toISOString();
+		/* v8 ignore next -- defensive fallback, toTimeString always returns valid format */
 		return (/* @__PURE__ */ new Date()).toTimeString().split(" ")[0] ?? "";
 	}
 	style(level) {
 		if (!this.colors || !IN_BROWSER) return "";
+		/* v8 ignore next -- LogLevel union is exhaustive */
 		return {
 			trace: "color: #64748b",
 			debug: "color: #3b82f6",
@@ -817,6 +1071,8 @@ function useLogger(namespace = "v0:logger") {
 /**
 * @module useRegistry
 *
+* @see https://0.vuetifyjs.com/composables/registration/use-registry
+*
 * @remarks
 * A foundational composable for managing collections of items (tickets) with:
 * - Unique ID-based access
@@ -873,17 +1129,21 @@ function useRegistry(options) {
 	}
 	function on(event, cb) {
 		if (!events) {
-			logger.warn(`Attempted to register event listener for "${event}" but events are disabled.`);
+			logger.warn(`Events are disabled. Initialize with \`useRegistry({ events: true })\` to enable.`);
 			return;
 		}
 		if (!listeners.has(event)) listeners.set(event, /* @__PURE__ */ new Set());
 		listeners.get(event).add(cb);
 	}
 	function off(event, cb) {
+		if (!events) {
+			logger.warn(`Events are disabled. Initialize with \`useRegistry({ events: true })\` to enable.`);
+			return;
+		}
 		listeners.get(event)?.delete(cb);
 	}
 	function dispose() {
-		if (listeners.size > 0) listeners.clear();
+		listeners.clear();
 		clear();
 	}
 	function get(id) {
@@ -972,9 +1232,9 @@ function useRegistry(options) {
 		return entries$1;
 	}
 	function clear() {
-		if (collection.size > 0) collection.clear();
-		if (catalog.size > 0) catalog.clear();
-		if (directory.size > 0) directory.clear();
+		collection.clear();
+		catalog.clear();
+		directory.clear();
 		invalidate();
 		indexDependentCount = 0;
 		needsReindex = false;
@@ -983,7 +1243,7 @@ function useRegistry(options) {
 	}
 	function invalidate() {
 		if (batching) return;
-		if (cache.size > 0) cache.clear();
+		cache.clear();
 	}
 	function queueEmit(event, data) {
 		if (batching) pendingEmits.push({
@@ -998,7 +1258,7 @@ function useRegistry(options) {
 		pendingEmits = [];
 		try {
 			const result = fn();
-			if (cache.size > 0) cache.clear();
+			cache.clear();
 			for (const { event, data } of pendingEmits) emit(event, data);
 			return result;
 		} finally {
@@ -1009,8 +1269,8 @@ function useRegistry(options) {
 	function reindex() {
 		const startIndex = minDirtyIndex === Infinity ? 0 : minDirtyIndex;
 		if (startIndex === 0) {
-			if (catalog.size > 0) catalog.clear();
-			if (directory.size > 0) directory.clear();
+			catalog.clear();
+			directory.clear();
 		}
 		invalidate();
 		let index = 0;
@@ -1037,7 +1297,7 @@ function useRegistry(options) {
 		const size = collection.size;
 		const id = registration.id ?? /* @__PURE__ */ genId();
 		if (has(id)) {
-			logger.warn(`Ticket with id "${id}" already exists in the registry. Skipping registration.`);
+			logger.warn(`Ticket "${id}" already exists. Use \`upsert()\` to update or check \`has()\` before registering.`);
 			return get(id);
 		}
 		const valueIsUndefined = /* @__PURE__ */ isUndefined(registration.value);
@@ -1087,14 +1347,18 @@ function useRegistry(options) {
 		}
 		if (removed.length === 0) return;
 		invalidate();
-		if (events) for (const ticket of removed) emit("unregister:ticket", ticket);
+		for (const ticket of removed) queueEmit("unregister:ticket", ticket);
 		needsReindex = true;
 	}
 	function seek(direction = "first", from, predicate) {
 		if (collection.size === 0) return void 0;
 		if (needsReindex) reindex();
+		if (!predicate && /* @__PURE__ */ isUndefined(from)) {
+			const tickets$1 = values();
+			return direction === "first" ? tickets$1[0] : tickets$1.at(-1);
+		}
 		const tickets = values();
-		const index = /* @__PURE__ */ isUndefined(from) ? void 0 : Math.max(0, Math.min(from, tickets.length - 1));
+		const index = /* @__PURE__ */ isUndefined(from) ? void 0 : /* @__PURE__ */ clamp(from, 0, tickets.length - 1);
 		if (direction === "last") {
 			const start = /* @__PURE__ */ isUndefined(index) ? tickets.length - 1 : index;
 			for (let i = start; i >= 0; i--) {
@@ -1563,7 +1827,7 @@ const Avatar = {
 * ```
 */
 function toArray(value) {
-	return /* @__PURE__ */ isNullOrUndefined(value) ? [] : Array.isArray(value) ? value : [value];
+	return /* @__PURE__ */ isNullOrUndefined(value) ? [] : /* @__PURE__ */ isArray(value) ? value : [value];
 }
 
 //#endregion
@@ -1655,7 +1919,8 @@ function useProxyModel(registry, model, options) {
 		flush: "sync",
 		deep: multiple
 	});
-	function onRegister(ticket) {
+	function onRegister(data) {
+		const ticket = data;
 		if (!pending.has(ticket.value) || ticket.disabled) return;
 		registryWatch.pause();
 		modelWatch.pause();
@@ -2385,1345 +2650,1350 @@ const Group = {
 };
 
 //#endregion
-//#region src/composables/useHydration/index.ts
+//#region src/composables/useSingle/index.ts
 /**
-* @module useHydration
-*
-* @see https://0.vuetifyjs.com/composables/plugins/use-hydration
+* @module useSingle
 *
 * @remarks
-* SSR hydration state management composable.
+* Single-selection composable that extends useSelection to enforce only one selected item.
 *
 * Key features:
-* - Hydration state detection (browser vs SSR)
-* - Root component detection
-* - Readonly hydration state refs
-* - Plugin installation support
-* - Perfect for hydration-safe rendering
+* - Auto-clears previous selection when selecting new item
+* - Singular computed properties (selectedId, selectedItem, selectedIndex, selectedValue)
+* - Perfect for tabs, radio buttons, theme selectors
 *
-* Essential for composables that need to behave differently during SSR vs client-side.
+* Inheritance chain: useRegistry → useSelection → useSingle
 */
 /**
-* Creates a new hydration instance.
+* Creates a new single selection instance that enforces only one selected item at a time.
 *
-* @returns A new hydration instance.
+* Extends `createSelection` by automatically clearing previous selections when a new item is selected.
+* Adds computed singular properties: `selectedId`, `selectedItem`, `selectedIndex`, `selectedValue`.
 *
-* @see https://0.vuetifyjs.com/composables/plugins/use-hydration
+* @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 with single-selection enforcement.
 *
-* @example
-* ```ts
-* import { createHydration } from '@vuetify/v0'
+* @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
 *
-* const hydration = createHydration()
-* console.log(hydration.isHydrated.value) // false
-* hydration.hydrate()
-* console.log(hydration.isHydrated.value) // true
-* ```
-*/
-function createHydration() {
-	const isHydrated = shallowRef(false);
-	function hydrate() {
-		isHydrated.value = true;
-	}
-	return {
-		isHydrated: shallowReadonly(isHydrated),
-		hydrate
-	};
-}
-function createFallbackHydration() {
-	return {
-		isHydrated: shallowReadonly(shallowRef(true)),
-		hydrate: () => {}
-	};
-}
-/**
-* Creates a new hydration context trinity.
+* **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)
 *
-* @param options Options for creating the hydration context.
-* @template E The type of the hydration context.
-* @returns A new hydration context trinity.
+* **Inheritance Chain:**
+* `useRegistry` → `createSelection` → `createSingle` → `createStep`
 *
-* @see https://0.vuetifyjs.com/composables/plugins/use-hydration
+* @see https://0.vuetifyjs.com/composables/selection/use-single
 *
 * @example
 * ```ts
-* import { createHydrationContext } from '@vuetify/v0'
+* import { createSingle } from '@vuetify/v0'
 *
-* export const [useHydrationContext, provideHydrationContext, context] = createHydrationContext({
-*   namespace: 'app:hydration',
-* })
-* ```
-*/
-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.
+* const tabs = createSingle({ mandatory: true })
 *
-* @param options The options for the hydration plugin.
-* @template E The type of the hydration context.
-* @returns A new hydration plugin.
+* tabs.onboard([
+*   { id: 'home', value: 'Home' },
+*   { id: 'about', value: 'About' },
+*   { id: 'contact', value: 'Contact' },
+* ])
 *
-* @see https://0.vuetifyjs.com/composables/plugins/use-hydration
+* tabs.first() // Select first tab
 *
-* @example
-* ```ts
-* import { createApp } from 'vue'
-* import { createHydrationPlugin } from '@vuetify/v0'
-* import App from './App.vue'
-*
-* const app = createApp(App)
-*
-* app.use(createHydrationPlugin())
+* console.log(tabs.selectedId.value) // 'home'
+* console.log(tabs.selectedIndex.value) // 0
 *
-* app.mount('#app')
+* tabs.select('about') // Switch to about tab
+* console.log(tabs.selectedId.value) // 'about'
+* console.log(tabs.selectedIds.size) // 1 (always enforces single selection)
 * ```
 */
-function createHydrationPlugin(_options = {}) {
-	const { namespace = "v0:hydration", ...options } = _options;
-	const [, provideHydrationContext, context] = createHydrationContext({
+function createSingle(_options = {}) {
+	const { mandatory = false, multiple = false, ...options } = _options;
+	const registry = createSelection({
 		...options,
-		namespace
+		mandatory,
+		multiple
 	});
-	return createPlugin({
-		namespace,
-		provide: (app) => {
-			provideHydrationContext(context, app);
-		},
-		setup: (app) => {
-			app.mixin({ mounted() {
-				if (this.$parent !== null) return;
-				context.hydrate();
-			} });
+	const selectedId = computed(() => registry.selectedIds.values().next().value);
+	const selectedItem = computed(() => registry.selectedItems.value.values().next().value);
+	const selectedIndex = computed(() => selectedItem.value?.index ?? -1);
+	const selectedValue = computed(() => selectedItem.value?.value);
+	function unselect(id) {
+		if (mandatory && registry.selectedIds.size === 1) return;
+		registry.selectedIds.delete(id);
+	}
+	function toggle(id) {
+		if (registry.selectedIds.has(id)) unselect(id);
+		else registry.select(id);
+	}
+	return {
+		...registry,
+		selectedId,
+		selectedItem,
+		selectedIndex,
+		selectedValue,
+		unselect,
+		toggle,
+		get size() {
+			return registry.size;
 		}
-	});
+	};
 }
 /**
-* Returns the current hydration instance.
+* Creates a new single selection context.
 *
-* @param namespace The namespace for the hydration context. Defaults to `v0:hydration`.
-* @returns The current hydration instance.
+* @param options The options for the single selection context.
+* @template Z The type of the single selection ticket.
+* @template E The type of the single selection context.
+* @returns A new single selection context.
 *
-* @see https://0.vuetifyjs.com/composables/plugins/use-hydration
+* @see https://0.vuetifyjs.com/composables/selection/use-single
+*
+* @example
+* ```ts
+* import { createSingleContext } from '@vuetify/v0'
+*
+* // With default namespace 'v0:single'
+* export const [useSingle, provideSingle, context] = createSingleContext()
+*
+* // In a parent component:
+* provideSingle()
+*
+* // In a child component:
+* const single = useSingle()
+* single.select('tab-1')
+* ```
+*/
+function createSingleContext(_options = {}) {
+	const { namespace = "v0:single", ...options } = _options;
+	const [useSingleContext, _provideSingleContext] = createContext(namespace);
+	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 { useHydration } from '@vuetify/v0'
+*   import { useSingle } from '@vuetify/v0'
 *
-*   const hydration = useHydration()
+*   const tabs = useSingle()
 * <\/script>
 *
 * <template>
 *   <div>
-*     <p>Is hydrated: {{ hydration.isHydrated.value }}</p>
+*     <p>Selected: {{ tabs.selectedId }}</p>
 *   </div>
 * </template>
 * ```
 */
-function useHydration(namespace = "v0:hydration") {
-	const fallback = createFallbackHydration();
-	if (!getCurrentInstance()) return fallback;
-	try {
-		return useContext(namespace, fallback);
-	} catch {
-		return fallback;
-	}
+function useSingle(namespace = "v0:single") {
+	return useContext(namespace);
 }
 
 //#endregion
-//#region src/composables/useResizeObserver/index.ts
+//#region src/composables/useTokens/index.ts
 /**
-* @module useResizeObserver
+* @module useTokens
+*
+* @see https://0.vuetifyjs.com/composables/registration/use-tokens
 *
 * @remarks
-* ResizeObserver composable with lifecycle management.
+* Design token registry with alias resolution and W3C Design Tokens format support.
 *
 * 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)
+* - Alias resolution with circular reference detection
+* - Nested token flattening with dot notation
+* - W3C Design Tokens format ($value, $type, $description, $extensions)
+* - Path-based resolution (e.g., {colors}.blue.500)
+* - Resolution caching for performance (~28,590 ops/sec)
 *
-* Perfect for responsive components and size-based rendering.
+* Used by useTheme, useLocale, and useFeatures for token-based configuration.
 */
 /**
-* A composable that uses the Resize Observer API to detect when an element's
-* size changes.
+* Creates a new token instance.
 *
-* @param target The element to observe.
-* @param callback The callback to execute when the element's size changes.
-* @param options The options for the Resize Observer.
-* @returns An object with methods to control the observer.
+* @param tokens The tokens to use.
+* @param options The options for the token instance.
+* @template Z The type of the token ticket.
+* @template E The type of the token context.
+* @returns A new token instance.
 *
-* @see https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
-* @see https://0.vuetifyjs.com/composables/system/use-resize-observer
+* @see https://www.designtokens.org/tr/drafts/format/
+* @see https://0.vuetifyjs.com/composables/registration/use-tokens
 *
 * @example
 * ```ts
-* import { ref } from 'vue'
-* import { useResizeObserver } from '@vuetify/v0'
-*
-* const el = ref<HTMLElement>()
-* const width = ref(0)
-* const height = ref(0)
+* import { useTokens } from '@vuetify/v0'
 *
-* const { pause, resume, isPaused } = useResizeObserver(
-*   el,
-*   (entries) => {
-*     const entry = entries[0]
-*     if (entry) {
-*       width.value = entry.contentRect.width
-*       height.value = entry.contentRect.height
-*       console.log('Size changed:', width.value, 'x', height.value)
-*     }
+* const tokens = useTokens({
+*   colors: {
+*     primary: '#3b82f6',
+*     secondary: '{colors.primary}', // Alias reference
 *   },
-*   { immediate: true }
-* )
-*
-* // Pause observation
-* pause()
+* })
 *
-* // Resume observation
-* resume()
+* console.log(tokens.resolve('{colors.primary}')) // '#3b82f6'
+* console.log(tokens.resolve('{colors.secondary}')) // '#3b82f6'
 * ```
 */
-function useResizeObserver(target, callback, options = {}) {
-	const { isHydrated } = useHydration();
-	const observer = shallowRef();
-	const isPaused = shallowRef(false);
-	const isActive = toRef(() => !!observer.value);
-	function setup() {
-		if (!isHydrated.value || !SUPPORTS_OBSERVER || !target.value || isPaused.value) return;
-		observer.value = new ResizeObserver((entries) => {
-			callback(entries.map((entry) => ({
-				contentRect: {
-					width: entry.contentRect.width,
-					height: entry.contentRect.height,
-					top: entry.contentRect.top,
-					left: entry.contentRect.left
-				},
-				target: entry.target
-			})));
-		});
-		observer.value.observe(target.value, { box: options.box || "content-box" });
-		if (options.immediate) {
-			const rect = target.value.getBoundingClientRect();
-			callback([{
-				contentRect: {
-					width: rect.width,
-					height: rect.height,
-					top: rect.top,
-					left: rect.left
-				},
-				target: target.value
-			}]);
-		}
-	}
-	watch([isHydrated, target], () => {
-		cleanup();
-		setup();
-	}, { immediate: true });
-	function cleanup() {
-		if (observer.value) {
-			observer.value.disconnect();
-			observer.value = void 0;
-		}
-	}
-	function pause() {
-		isPaused.value = true;
-		observer.value?.disconnect();
-	}
-	function resume() {
-		isPaused.value = false;
-		setup();
+function createTokens(tokens = {}, options = {}) {
+	const logger = useLogger();
+	const registry = useRegistry(options);
+	const cache = /* @__PURE__ */ new Map();
+	registry.onboard(flatten(tokens, options.prefix, !!options.flat));
+	function isAlias(token) {
+		return /* @__PURE__ */ isString(token) && token.length > 2 && token[0] === "{" && token.at(-1) === "}";
 	}
-	function stop() {
-		cleanup();
+	function isTokenAlias(value) {
+		return /* @__PURE__ */ isObject(value) && "$value" in value;
 	}
-	onScopeDispose(stop, true);
-	return {
-		isActive: shallowReadonly(isActive),
-		isPaused: shallowReadonly(isPaused),
-		pause,
-		resume,
-		stop
-	};
-}
-/**
-* A convenience composable that uses the Resize Observer API to track an
-* element's size.
-*
-* @param target The element to observe.
-* @returns An object with the element's width and height.
-*
-* @see https://0.vuetifyjs.com/composables/system/use-resize-observer#use-element-size
-*
-* @example
-* ```ts
-* import { ref, watchEffect } from 'vue'
-* import { useElementSize } from '@vuetify/v0'
+	function resolve(token, visited = /* @__PURE__ */ new Set()) {
+		const cacheKey = /* @__PURE__ */ isString(token) ? token : JSON.stringify(token);
+		const cached = cache.get(cacheKey);
+		if (!/* @__PURE__ */ isUndefined(cached)) return cached;
+		const reference = isTokenAlias(token) ? token.$value : token;
+		const isAliasReference = /* @__PURE__ */ isString(reference) && isAlias(reference);
+		const clean = isAliasReference ? 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.get(clean);
+		let segments = [];
+		if (!found && clean.includes(".")) {
+			const parts = clean.split(".");
+			for (let i = parts.length - 1; i > 0; i--) {
+				const prefix = parts.slice(0, i).join(".");
+				const suffix = parts.slice(i);
+				const candidate = registry.get(prefix);
+				if (!/* @__PURE__ */ isUndefined(candidate?.value)) {
+					found = candidate;
+					segments = suffix;
+					break;
+				}
+			}
+		}
+		if (/* @__PURE__ */ isUndefined(found?.value)) {
+			if (isAliasReference) logger.warn(`Alias not found for "${String(reference)}"`);
+			cache.set(cacheKey, void 0);
+			return;
+		}
+		let result;
+		let current = found.value;
+		if (segments.length > 0) {
+			if (isTokenAlias(current)) current = current.$value;
+			for (const segment of segments) {
+				if (!/* @__PURE__ */ isObject(current) || !(segment in current)) {
+					current = void 0;
+					break;
+				}
+				current = current[segment];
+				if (isTokenAlias(current)) current = current.$value;
+			}
+			if (/* @__PURE__ */ isUndefined(current)) {
+				logger.warn(`Path not found inside "${clean}": ${segments.join(".")}`);
+				cache.set(cacheKey, void 0);
+				return;
+			}
+			result = current;
+		} else if (isTokenAlias(current)) {
+			const inner = current.$value;
+			if (/* @__PURE__ */ isString(inner) && isAlias(inner)) return resolve(inner, visited);
+			result = inner;
+		} else if (/* @__PURE__ */ isString(current) && isAlias(current)) return resolve(current, visited);
+		else result = current;
+		cache.set(cacheKey, result);
+		return result;
+	}
+	return {
+		...registry,
+		resolve,
+		isAlias,
+		get size() {
+			return registry.size;
+		}
+	};
+}
+/**
+* Creates a new token context.
 *
-* const box = ref<HTMLElement>()
-* const { width, height } = useElementSize(box)
+* @param namespace The namespace for the token context.
+* @param tokens The tokens to use.
+* @template Z The type of the token ticket.
+* @template E The type of the token context.
+* @returns A new token context.
 *
-* // Width and height are reactive refs
-* watchEffect(() => {
-*   console.log('Box size:', width.value, 'x', height.value)
+* @see https://0.vuetifyjs.com/composables/registration/use-tokens
+*
+* @example
+* ```ts
+* import { createTokensContext } from '@vuetify/v0'
+*
+* export const [useTokens, provideTokens, context] = createTokensContext({
+*  namespace: 'v0:tokens',
+*  tokens: {
+*    colors: {
+*      primary: '#3b82f6',
+*      secondary: '{colors.primary}', // Alias reference
+*    },
+*  },
 * })
 * ```
 */
-function useElementSize(target) {
-	const width = shallowRef(0);
-	const height = shallowRef(0);
-	const { pause: _pause, resume, stop, isActive, isPaused } = useResizeObserver(target, (entries) => {
-		const entry = entries[0];
-		if (entry) {
-			width.value = entry.contentRect.width;
-			height.value = entry.contentRect.height;
+function createTokensContext(_options) {
+	const { namespace = "v0:tokens", tokens = {}, ...options } = _options;
+	const [useTokensContext, _provideTokensContext] = createContext(namespace);
+	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.
+* @param prefix An optional prefix to prepend to each token ID.
+* @returns An array of flattened tokens, each with an ID and value.
+*/
+function flatten(tokens, prefix = "", flat = false) {
+	const flattened = [];
+	const stack = [{
+		tokens,
+		prefix,
+		flat
+	}];
+	while (stack.length > 0) {
+		const { tokens: currentTokens, prefix: currentPrefix, flat: flat$1 } = stack.pop();
+		const meta = {};
+		for (const k in currentTokens) if (k.startsWith("$")) meta[k] = currentTokens[k];
+		if (Object.keys(meta).length > 0 && currentPrefix) flattened.push({
+			id: currentPrefix,
+			value: meta
+		});
+		for (const key in currentTokens) {
+			if (key.startsWith("$")) continue;
+			const value = currentTokens[key];
+			const id = currentPrefix ? `${currentPrefix}.${key}` : key;
+			if (!/* @__PURE__ */ isObject(value)) {
+				flattened.push({
+					id,
+					value
+				});
+				continue;
+			}
+			if ("$value" in value) {
+				flattened.push({
+					id,
+					value
+				});
+				const inner = value.$value;
+				if (/* @__PURE__ */ isObject(inner) && !flat$1) for (const innerKey in inner) {
+					if (innerKey.startsWith("$")) continue;
+					const child = inner[innerKey];
+					const childId = `${id}.${innerKey}`;
+					if (!/* @__PURE__ */ isObject(child)) flattened.push({
+						id: childId,
+						value: child
+					});
+					else if ("$value" in child) flattened.push({
+						id: childId,
+						value: child
+					});
+					else stack.push({
+						tokens: child,
+						prefix: childId,
+						flat: flat$1
+					});
+				}
+				continue;
+			}
+			if (flat$1) {
+				flattened.push({
+					id,
+					value
+				});
+				continue;
+			}
+			stack.push({
+				tokens: value,
+				prefix: id,
+				flat: flat$1
+			});
 		}
-	}, { immediate: true });
-	function pause() {
-		width.value = 0;
-		height.value = 0;
-		_pause();
 	}
-	return {
-		width,
-		height,
-		isActive,
-		isPaused,
-		pause,
-		resume,
-		stop
-	};
+	return flattened;
 }
 
 //#endregion
-//#region src/composables/useOverflow/index.ts
+//#region src/composables/useLocale/adapters/v0.ts
 /**
-* @module useOverflow
+* Vuetify0.x locale adapter implementation
+*
+* This adapter provides translation and number formatting
+* capabilities using the Intl API and supports both
+* numbered ({0}, {1}) and named ({name}) variables in translation strings.
+*/
+var Vuetify0LocaleAdapter = class {
+	t(message, ...params) {
+		let resolvedMessage = message;
+		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 /* @__PURE__ */ isUndefined(variables[name]) ? match : String(variables[name]);
+			});
+			params = params.slice(1);
+		}
+		resolvedMessage = resolvedMessage.replace(/\{(\d+)\}/g, (match, index) => {
+			const idx = Number.parseInt(index, 10);
+			if (!/* @__PURE__ */ isUndefined(params[idx])) return String(params[idx]);
+			return match;
+		});
+		return resolvedMessage;
+	}
+	n(value, locale, ...params) {
+		if (!IN_BROWSER || !locale) return value.toString();
+		const options = params[0];
+		return new Intl.NumberFormat(String(locale), options).format(value);
+	}
+};
+
+//#endregion
+//#region src/composables/useLocale/index.ts
+/**
+* @module useLocale
 *
 * @remarks
-* Composable for computing how many items fit in a container based on available width.
-* Enables responsive truncation logic for Pagination, Breadcrumbs, and similar components.
+* Internationalization (i18n) composable with adapter pattern for message translation.
 *
 * Key features:
-* - Container width tracking via ResizeObserver
-* - Two modes: variable-width (per-item) or uniform-width (sample-based)
-* - Computes capacity (how many items fit)
-* - SSR-safe with Infinity fallback
-* - Supports reserved space for nav buttons, ellipsis, etc.
+* - Locale selection with createSingle
+* - Token-based message storage with useTokens
+* - Numbered and named placeholder support ({0}, {name})
+* - Number formatting with Intl.NumberFormat
+* - Adapter pattern for integration with i18n providers
 *
-* Use variable mode (default) for items with different widths like Breadcrumbs.
-* Use uniform mode (itemWidth option) for same-width items like Pagination buttons.
+* Integrates with createSingle for locale selection and useTokens for message resolution.
 */
 /**
-* Creates a new overflow context for computing how many items fit in a container.
-*
-* @param options Configuration options
-* @returns Overflow context with container ref, capacity, and measurement functions
-*
-* @example Variable-width mode (Breadcrumbs)
-* ```vue
-* <script lang="ts" setup>
-*   import { useTemplateRef } from 'vue'
-*   import { createOverflow } from '@vuetify/v0'
-*
-*   const containerRef = useTemplateRef('container')
-*   const overflow = createOverflow({
-*     container: containerRef,
-*     gap: 8,
-*     reserved: 40,
-*   })
-* <\/script>
-*
-* <template>
-*   <div ref="container">
-*     <span
-*       v-for="(item, i) in items.slice(0, overflow.capacity.value)"
-*       :key="i"
-*       :ref="el => overflow.measure(i, el)"
-*     >
-*       {{ item }}
-*     </span>
-*     <span v-if="overflow.isOverflowing.value">...</span>
-*   </div>
-* </template>
-* ```
+* Creates a new locale instance.
 *
-* @example Uniform-width mode (Pagination)
-* ```ts
-* const overflow = createOverflow({
-*   container: () => atom.value?.element,
-*   itemWidth: buttonWidth,
-*   reserved: () => buttonWidth.value * 4,
-* })
-* ```
+* @param options The options for the locale instance.
+* @template Z The type of the locale ticket.
+* @template E The type of the locale context.
+* @returns A new locale instance.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-locale
 */
-function createOverflow(options = {}) {
-	const { container: _container, gap = 0, reserved = 0, itemWidth, reverse } = options;
-	const container = /* @__PURE__ */ isUndefined(_container) ? shallowRef() : toRef(_container);
-	const widths = shallowRef(/* @__PURE__ */ new Map());
-	const { width } = useElementSize(container);
-	function measure(index, el) {
-		if (!el) {
-			if (widths.value.has(index)) {
-				const next = new Map(widths.value);
-				next.delete(index);
-				widths.value = next;
-			}
-			return;
-		}
-		const style = getComputedStyle(el);
-		const marginX = Number.parseFloat(style.marginLeft) + Number.parseFloat(style.marginRight);
-		const w = el.offsetWidth + marginX;
-		if (widths.value.get(index) !== w) widths.value = new Map(widths.value).set(index, w);
+function createLocale(_options = {}) {
+	const { adapter = new Vuetify0LocaleAdapter(), messages = {}, ...options } = _options;
+	const tokens = createTokens(messages);
+	const registry = createSingle(options);
+	for (const id in messages) {
+		registry.register({ id });
+		if (id === options.default && !registry.selectedId.value) registry.select(id);
 	}
-	function reset() {
-		widths.value = /* @__PURE__ */ new Map();
+	function t(key, params, fallback) {
+		const locale = registry.selectedId.value;
+		const args = toArray(params);
+		if (!locale) return adapter.t(fallback ?? key, ...args);
+		const path = `${locale}.${key}`;
+		const message = tokens.get(path)?.value;
+		const template = /* @__PURE__ */ isString(message) ? resolve(locale, message) : fallback ?? key;
+		return adapter.t(template, ...args);
 	}
-	const total = computed(() => {
-		const g = toValue(gap);
-		let sum = 0;
-		let count = 0;
-		for (const w of widths.value.values()) {
-			sum += w + (count > 0 ? g : 0);
-			count++;
+	function n(value, ...params) {
+		return adapter.n(value, registry.selectedId.value, ...params);
+	}
+	function resolve(locale, str) {
+		return str.replace(/{([a-zA-Z0-9.-_]+)}/g, (match, key) => {
+			const [prefix, ...rest] = key.split(".");
+			const target = registry.has(prefix) ? prefix : locale;
+			const path = `${target}.${registry.has(prefix) ? rest.join(".") : key}`;
+			const resolved = tokens.get(path)?.value;
+			if (/* @__PURE__ */ isString(resolved)) return resolve(target, resolved);
+			return match;
+		});
+	}
+	return {
+		...registry,
+		t,
+		n,
+		get size() {
+			return registry.size;
 		}
-		return sum;
-	});
+	};
+}
+function createLocaleFallback() {
 	return {
-		container,
-		width,
-		capacity: computed(() => {
-			const available = width.value - toValue(reserved);
-			if (width.value === 0) return Infinity;
-			if (available <= 0) return 0;
-			const g = toValue(gap);
-			const uniformWidth = toValue(itemWidth);
-			if (uniformWidth && uniformWidth > 0) {
-				const first = uniformWidth;
-				const subsequent = uniformWidth + g;
-				if (available < first) return 0;
-				return Math.max(1, Math.floor((available - first) / subsequent) + 1);
-			}
-			const entries = [...widths.value.entries()].toSorted((a, b) => a[0] - b[0]);
-			if (toValue(reverse)) entries.reverse();
-			let sum = 0;
-			let count = 0;
-			for (const [, w] of entries) {
-				const next = sum + w + (count > 0 ? g : 0);
-				if (next > available) break;
-				sum = next;
-				count++;
-			}
-			return count;
-		}),
-		total,
-		isOverflowing: toRef(() => {
-			return total.value > width.value - toValue(reserved);
-		}),
-		measure,
-		reset
+		size: 0,
+		t: (key, _params, fallback) => fallback ?? key,
+		n: String
 	};
 }
 /**
-* Creates an overflow context with dependency injection support.
+* Creates a new locale context.
 *
-* @param options Configuration options including namespace
-* @returns Trinity tuple: [useContext, provideContext, defaultContext]
+* @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
-* // Create injectable context
-* const [useOverflow, provideOverflow, overflow] = createOverflowContext({
-*   namespace: 'my-overflow',
-*   gap: 8,
-*   reserved: 160,
+* import { createLocaleContext } from '@vuetify/v0'
+*
+* export const [useAppLocale, provideAppLocale, appLocale] = createLocaleContext({
+*   namespace: 'app:locale',
+*   messages: {
+*     en: { hello: 'Hello' },
+*     es: { hello: 'Hola' },
+*   },
 * })
 *
-* // In parent component
-* provideOverflow()
+* // In a parent component:
+* provideAppLocale()
 *
-* // In child component
-* const overflow = useOverflow()
+* // In a child component:
+* const locale = useAppLocale()
+* locale.select('es')
 * ```
 */
-function createOverflowContext(_options = {}) {
-	const { namespace = "v0:overflow", ...options } = _options;
-	const [useOverflowContext, _provideOverflowContext] = createContext(namespace);
-	const context = createOverflow(options);
-	function provideOverflowContext(_context = context, app) {
-		return _provideOverflowContext(_context, app);
+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(useOverflowContext, provideOverflowContext, context);
+	return createTrinity(useLocaleContext, provideLocaleContext, context);
 }
 /**
-* Returns the current overflow context from dependency injection.
+* Creates a new locale plugin.
 *
-* @param namespace The namespace for the overflow context. Defaults to `v0:overflow`.
-* @returns The current overflow context.
+* @param options The options for the locale plugin.
+* @template Z The type of the locale ticket.
+* @template E The type of the locale context.
+* @template R The type of the token ticket.
+* @template O The type of the token context.
+* @returns A new locale plugin.
 *
-* @example
-* ```vue
-* <script lang="ts" setup>
-*   import { useOverflow } from '@vuetify/v0'
+* @see https://0.vuetifyjs.com/composables/plugins/use-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,
+		provide: (app) => {
+			provideLocaleContext(context, app);
+		}
+	});
+}
+/**
+* Returns the current locale instance.
 *
-*   // Inject overflow context provided by parent
-*   const overflow = useOverflow()
-* <\/script>
+* @returns The current locale instance.
 *
-* <template>
-*   <div>
-*     <p>Capacity: {{ overflow.capacity.value }}</p>
-*   </div>
-* </template>
+* @see https://0.vuetifyjs.com/composables/plugins/use-locale
+*/
+function useLocale(namespace = "v0:locale") {
+	const fallback = createLocaleFallback();
+	if (!getCurrentInstance()) return fallback;
+	try {
+		return useContext(namespace, fallback);
+	} catch {
+		return fallback;
+	}
+}
+
+//#endregion
+//#region src/composables/useHydration/index.ts
+/**
+* @module useHydration
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-hydration
+*
+* @remarks
+* SSR hydration state management composable.
+*
+* Key features:
+* - Hydration state detection (browser vs SSR)
+* - Root component detection
+* - Readonly hydration state refs
+* - Plugin installation support
+* - Perfect for hydration-safe rendering
+*
+* Essential for composables that need to behave differently during SSR vs client-side.
+*/
+/**
+* Creates a new hydration instance.
+*
+* @returns A new hydration instance.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-hydration
+*
+* @example
+* ```ts
+* import { createHydration } from '@vuetify/v0'
+*
+* const hydration = createHydration()
+* console.log(hydration.isHydrated.value) // false
+* hydration.hydrate()
+* console.log(hydration.isHydrated.value) // true
 * ```
 */
-function useOverflow(namespace = "v0:overflow") {
-	return useContext(namespace);
+function createHydration() {
+	const isHydrated = shallowRef(false);
+	function hydrate() {
+		isHydrated.value = true;
+	}
+	return {
+		isHydrated: shallowReadonly(isHydrated),
+		hydrate
+	};
+}
+function createFallbackHydration() {
+	return {
+		isHydrated: shallowReadonly(shallowRef(true)),
+		hydrate: () => {}
+	};
 }
-
-//#endregion
-//#region src/composables/usePagination/index.ts
 /**
-* @module usePagination
-*
-* @remarks
-* Lightweight pagination composable for navigating through pages.
-*
-* Key features:
-* - No registry overhead - just a bounded integer
-* - Direct ref support for v-model compatibility
-* - Navigation methods: next, prev, first, last
-* - Computed visible items with ellipsis
-* - Trinity pattern for dependency injection
+* Creates a new hydration context trinity.
 *
-* Unlike registry-based composables, pagination tracks a single number
-* within a range, making it efficient for large page counts.
-*/
-/**
-* Creates a pagination instance.
+* @param options Options for creating the hydration context.
+* @template E The type of the hydration context.
+* @returns A new hydration context trinity.
 *
-* @param options The options for the pagination instance.
-* @returns A pagination context with navigation methods.
+* @see https://0.vuetifyjs.com/composables/plugins/use-hydration
 *
 * @example
 * ```ts
-* import { createPagination } from '@vuetify/v0'
-*
-* // Basic usage
-* const pagination = createPagination({ size: 100 })
-* pagination.next()
-* pagination.items.value // [{ type: 'page', value: 1 }, { type: 'page', value: 2 }, ...]
+* import { createHydrationContext } from '@vuetify/v0'
 *
-* // With v-model (pass a ref)
-* const page = ref(1)
-* const pagination = createPagination({ page, size: 100 })
-* // Mutating pagination.page or the passed ref syncs both
+* export const [useHydrationContext, provideHydrationContext, context] = createHydrationContext({
+*   namespace: 'app:hydration',
+* })
 * ```
 */
-function createPagination(_options = {}) {
-	const { page: _page = 1, itemsPerPage: _itemsPerPage = 10, size: _size = 0, visible: _visible = 7, ellipsis = "..." } = _options;
-	const page = isRef(_page) ? _page : shallowRef(_page);
-	const pages = computed(() => {
-		const size = toValue(_size);
-		const perPage = toValue(_itemsPerPage);
-		if (size <= 0 || /* @__PURE__ */ isNaN(size)) return 0;
-		return Math.ceil(size / perPage);
-	});
-	function first() {
-		page.value = 1;
-	}
-	function last() {
-		page.value = Math.max(1, pages.value);
-	}
-	function next() {
-		if (page.value < pages.value) page.value++;
-	}
-	function prev() {
-		if (page.value > 1) page.value--;
-	}
-	function select(value) {
-		if (value < 1) page.value = 1;
-		else if (value > pages.value) page.value = Math.max(1, pages.value);
-		else page.value = value;
-	}
-	const isFirst = computed(() => page.value <= 1);
-	const isLast = computed(() => page.value >= pages.value);
-	const pageStart = computed(() => (page.value - 1) * toValue(_itemsPerPage));
-	const pageStop = computed(() => Math.min(pageStart.value + toValue(_itemsPerPage), toValue(_size)));
-	function toPage(value) {
-		return {
-			type: "page",
-			value
-		};
-	}
-	function toEllipsis() {
-		return ellipsis === false ? false : {
-			type: "ellipsis",
-			value: ellipsis
-		};
-	}
-	function filter(array) {
-		return array.filter((item) => item !== false);
+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 {
-		page,
-		ellipsis,
-		items: computed(() => {
-			const pageCount = pages.value;
-			const visible = toValue(_visible);
-			const current = page.value;
-			if (pageCount <= 0 || /* @__PURE__ */ isNaN(pageCount) || pageCount > Number.MAX_SAFE_INTEGER) return [];
-			if (visible <= 0) return [];
-			if (visible <= 2) return [toPage(current)];
-			if (pageCount <= visible) return (/* @__PURE__ */ range(pageCount, 1)).map(toPage);
-			if (visible === 3) {
-				const mid = current <= 1 ? 2 : current >= pageCount ? pageCount - 1 : current;
-				return [
-					toPage(1),
-					toPage(mid),
-					toPage(pageCount)
-				];
-			}
-			const boundary = visible - 2;
-			const middle = visible - 4;
-			if (middle <= 0) {
-				if (current <= boundary) return filter([
-					...(/* @__PURE__ */ range(boundary, 1)).map(toPage),
-					toEllipsis(),
-					toPage(pageCount)
-				]);
-				if (current > pageCount - boundary) return filter([
-					toPage(1),
-					toEllipsis(),
-					...(/* @__PURE__ */ range(boundary, pageCount - boundary + 1)).map(toPage)
-				]);
-				return current <= Math.ceil(pageCount / 2) ? filter([
-					toPage(1),
-					toPage(current),
-					toEllipsis(),
-					toPage(pageCount)
-				]) : filter([
-					toPage(1),
-					toEllipsis(),
-					toPage(current),
-					toPage(pageCount)
-				]);
-			}
-			const leftThreshold = boundary - 1;
-			const rightThreshold = pageCount - boundary + 2;
-			if (current <= leftThreshold) return filter([
-				...(/* @__PURE__ */ range(boundary, 1)).map(toPage),
-				toEllipsis(),
-				toPage(pageCount)
-			]);
-			else if (current >= rightThreshold) return filter([
-				toPage(1),
-				toEllipsis(),
-				...(/* @__PURE__ */ range(boundary, pageCount - boundary + 1)).map(toPage)
-			]);
-			else {
-				const start = current - Math.floor(middle / 2);
-				return filter([
-					toPage(1),
-					toEllipsis(),
-					...(/* @__PURE__ */ range(middle, start)).map(toPage),
-					toEllipsis(),
-					toPage(pageCount)
-				]);
-			}
-		}),
-		pageStart,
-		pageStop,
-		isFirst,
-		isLast,
-		first,
-		last,
-		next,
-		prev,
-		select,
-		get itemsPerPage() {
-			return toValue(_itemsPerPage);
-		},
-		get size() {
-			return toValue(_size);
-		},
-		get pages() {
-			return pages.value;
-		}
-	};
+	return createTrinity(useHydrationContext, provideHydrationContext, context);
 }
 /**
-* Creates a pagination context for dependency injection.
+* Creates a new hydration plugin.
 *
-* @param options The options including namespace.
-* @returns A trinity: [usePagination, providePagination, defaultContext]
+* @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
 *
 * @example
 * ```ts
-* // With default namespace 'v0:pagination'
-* const [usePagination, providePaginationContext] = createPaginationContext({ size: 50 })
+* import { createApp } from 'vue'
+* import { createHydrationPlugin } from '@vuetify/v0'
+* import App from './App.vue'
 *
-* // Or with custom namespace
-* const [usePagination, providePaginationContext] = createPaginationContext({
-*   namespace: 'my-pagination',
-*   size: 50,
-* })
+* const app = createApp(App)
 *
-* // Parent component
-* providePaginationContext()
+* app.use(createHydrationPlugin())
 *
-* // Child component
-* const pagination = usePagination()
-* pagination.next()
+* app.mount('#app')
 * ```
 */
-function createPaginationContext(_options = {}) {
-	const { namespace = "v0:pagination", ...options } = _options;
-	const [usePaginationContext, _providePaginationContext] = createContext(namespace);
-	const context = createPagination(options);
-	function providePaginationContext(_context = context, app) {
-		return _providePaginationContext(_context, app);
-	}
-	return createTrinity(usePaginationContext, providePaginationContext, context);
+function createHydrationPlugin(_options = {}) {
+	const { namespace = "v0:hydration", ...options } = _options;
+	const [, provideHydrationContext, context] = createHydrationContext({
+		...options,
+		namespace
+	});
+	return createPlugin({
+		namespace,
+		provide: (app) => {
+			provideHydrationContext(context, app);
+		},
+		setup: (app) => {
+			app.mixin({ mounted() {
+				if (!/* @__PURE__ */ isNull(this.$parent)) return;
+				context.hydrate();
+			} });
+		}
+	});
 }
 /**
-* Returns the current pagination instance from context.
+* Returns the current hydration instance.
 *
-* @param namespace The namespace. @default 'v0:pagination'
-* @returns The pagination context.
+* @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>
-*  import { usePagination } from '@vuetify/v0'
+* <script setup lang="ts">
+*   import { useHydration } from '@vuetify/v0'
 *
-*  const pagination = usePagination()
+*   const hydration = useHydration()
 * <\/script>
 *
 * <template>
-*   <button @click="pagination.prev()" :disabled="pagination.isFirst.value">Prev</button>
-*   <button @click="pagination.next()" :disabled="pagination.isLast.value">Next</button>
+*   <div>
+*     <p>Is hydrated: {{ hydration.isHydrated.value }}</p>
+*   </div>
 * </template>
 * ```
 */
-function usePagination(namespace = "v0:pagination") {
-	return useContext(namespace);
+function useHydration(namespace = "v0:hydration") {
+	const fallback = createFallbackHydration();
+	if (!getCurrentInstance()) return fallback;
+	try {
+		return useContext(namespace, fallback);
+	} catch {
+		return fallback;
+	}
 }
 
 //#endregion
-//#region src/composables/useSingle/index.ts
+//#region src/composables/useResizeObserver/index.ts
 /**
-* @module useSingle
+* @module useResizeObserver
 *
 * @remarks
-* Single-selection composable that extends useSelection to enforce only one selected item.
+* ResizeObserver composable with lifecycle management.
 *
 * Key features:
-* - Auto-clears previous selection when selecting new item
-* - Singular computed properties (selectedId, selectedItem, selectedIndex, selectedValue)
-* - Perfect for tabs, radio buttons, theme selectors
+* - 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)
 *
-* Inheritance chain: useRegistry → useSelection → useSingle
+* Perfect for responsive components and size-based rendering.
 */
 /**
-* 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 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)
+* A composable that uses the Resize Observer API to detect when an element's
+* size changes.
 *
-* **Inheritance Chain:**
-* `useRegistry` → `createSelection` → `createSingle` → `createStep`
+* @param target The element to observe.
+* @param callback The callback to execute when the element's size changes.
+* @param options The options for the Resize Observer.
+* @returns An object with methods to control the observer.
 *
-* @see https://0.vuetifyjs.com/composables/selection/use-single
+* @see https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
+* @see https://0.vuetifyjs.com/composables/system/use-resize-observer
 *
 * @example
 * ```ts
-* import { createSingle } from '@vuetify/v0'
-*
-* const tabs = createSingle({ mandatory: true })
+* import { ref } from 'vue'
+* import { useResizeObserver } from '@vuetify/v0'
 *
-* tabs.onboard([
-*   { id: 'home', value: 'Home' },
-*   { id: 'about', value: 'About' },
-*   { id: 'contact', value: 'Contact' },
-* ])
+* const el = ref<HTMLElement>()
+* const width = ref(0)
+* const height = ref(0)
 *
-* tabs.first() // Select first tab
+* const { pause, resume, isPaused } = useResizeObserver(
+*   el,
+*   (entries) => {
+*     const entry = entries[0]
+*     if (entry) {
+*       width.value = entry.contentRect.width
+*       height.value = entry.contentRect.height
+*       console.log('Size changed:', width.value, 'x', height.value)
+*     }
+*   },
+*   { immediate: true }
+* )
 *
-* console.log(tabs.selectedId.value) // 'home'
-* console.log(tabs.selectedIndex.value) // 0
+* // Pause observation
+* pause()
 *
-* tabs.select('about') // Switch to about tab
-* console.log(tabs.selectedId.value) // 'about'
-* console.log(tabs.selectedIds.size) // 1 (always enforces single selection)
+* // Resume observation
+* resume()
 * ```
 */
-function createSingle(_options = {}) {
-	const { mandatory = false, multiple = false, ...options } = _options;
-	const registry = createSelection({
-		...options,
-		mandatory,
-		multiple
+function useResizeObserver(target, callback, options = {}) {
+	const { isHydrated } = useHydration();
+	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;
+		observer.value = new ResizeObserver((entries) => {
+			callback(entries.map((entry) => ({
+				contentRect: {
+					width: entry.contentRect.width,
+					height: entry.contentRect.height,
+					top: entry.contentRect.top,
+					left: entry.contentRect.left
+				},
+				target: entry.target
+			})));
+			if (options.once) stop();
+		});
+		observer.value.observe(target.value, { box: options.box || "content-box" });
+		if (options.immediate) {
+			const rect = target.value.getBoundingClientRect();
+			callback([{
+				contentRect: {
+					width: rect.width,
+					height: rect.height,
+					top: rect.top,
+					left: rect.left
+				},
+				target: target.value
+			}]);
+		}
+	}
+	watchEffect(() => {
+		const hydrated = isHydrated.value;
+		const el = target.value;
+		cleanup();
+		if (hydrated && el) setup();
 	});
-	const selectedId = computed(() => registry.selectedIds.values().next().value);
-	const selectedItem = computed(() => registry.selectedItems.value.values().next().value);
-	const selectedIndex = computed(() => selectedItem.value?.index ?? -1);
-	const selectedValue = computed(() => selectedItem.value?.value);
-	function unselect(id) {
-		if (mandatory && registry.selectedIds.size === 1) return;
-		registry.selectedIds.delete(id);
+	function cleanup() {
+		if (observer.value) {
+			observer.value.disconnect();
+			observer.value = void 0;
+		}
 	}
-	function toggle(id) {
-		if (registry.selectedIds.has(id)) unselect(id);
-		else registry.select(id);
+	function pause() {
+		isPaused.value = true;
+		observer.value?.disconnect();
+	}
+	function resume() {
+		isPaused.value = false;
+		setup();
+	}
+	function stop() {
+		cleanup();
+		observer.value = null;
 	}
+	onScopeDispose(stop, true);
 	return {
-		...registry,
-		selectedId,
-		selectedItem,
-		selectedIndex,
-		selectedValue,
-		unselect,
-		toggle,
-		get size() {
-			return registry.size;
-		}
+		isActive: shallowReadonly(isActive),
+		isPaused: shallowReadonly(isPaused),
+		pause,
+		resume,
+		stop
 	};
 }
 /**
-* Creates a new single selection context.
+* A convenience composable that uses the Resize Observer API to track an
+* element's size.
 *
-* @param options The options for the single selection context.
-* @template Z The type of the single selection ticket.
-* @template E The type of the single selection context.
-* @returns A new single selection context.
+* @param target The element to observe.
+* @returns An object with the element's width and height.
 *
-* @see https://0.vuetifyjs.com/composables/selection/use-single
+* @see https://0.vuetifyjs.com/composables/system/use-resize-observer#use-element-size
 *
 * @example
 * ```ts
-* import { createSingleContext } from '@vuetify/v0'
-*
-* // With default namespace 'v0:single'
-* export const [useSingle, provideSingle, context] = createSingleContext()
+* import { ref, watchEffect } from 'vue'
+* import { useElementSize } from '@vuetify/v0'
 *
-* // In a parent component:
-* provideSingle()
+* const box = ref<HTMLElement>()
+* const { width, height } = useElementSize(box)
 *
-* // In a child component:
-* const single = useSingle()
-* single.select('tab-1')
+* // Width and height are reactive refs
+* watchEffect(() => {
+*   console.log('Box size:', width.value, 'x', height.value)
+* })
 * ```
 */
-function createSingleContext(_options = {}) {
-	const { namespace = "v0:single", ...options } = _options;
-	const [useSingleContext, _provideSingleContext] = createContext(namespace);
-	const context = createSingle(options);
-	function provideSingleContext(_context = context, app) {
-		return _provideSingleContext(_context, app);
+function useElementSize(target) {
+	const width = shallowRef(0);
+	const height = shallowRef(0);
+	const { pause: _pause, resume, stop, isActive, isPaused } = useResizeObserver(target, (entries) => {
+		const entry = entries[0];
+		if (entry) {
+			width.value = entry.contentRect.width;
+			height.value = entry.contentRect.height;
+		}
+	}, { immediate: true });
+	function pause() {
+		width.value = 0;
+		height.value = 0;
+		_pause();
 	}
-	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);
+	return {
+		width,
+		height,
+		isActive,
+		isPaused,
+		pause,
+		resume,
+		stop
+	};
 }
 
 //#endregion
-//#region src/composables/useTokens/index.ts
-/**
-* @module useTokens
-*
-* @see https://0.vuetifyjs.com/composables/registration/use-tokens
+//#region src/composables/useOverflow/index.ts
+/**
+* @module useOverflow
 *
 * @remarks
-* Design token registry with alias resolution and W3C Design Tokens format support.
+* Composable for computing how many items fit in a container based on available width.
+* Enables responsive truncation logic for Pagination, Breadcrumbs, and similar components.
 *
 * Key features:
-* - Alias resolution with circular reference detection
-* - Nested token flattening with dot notation
-* - W3C Design Tokens format ($value, $type, $description, $extensions)
-* - Path-based resolution (e.g., {colors}.blue.500)
-* - Resolution caching for performance (~28,590 ops/sec)
+* - Container width tracking via ResizeObserver
+* - Two modes: variable-width (per-item) or uniform-width (sample-based)
+* - Computes capacity (how many items fit)
+* - SSR-safe with Infinity fallback
+* - Supports reserved space for nav buttons, ellipsis, etc.
 *
-* Used by useTheme, useLocale, and useFeatures for token-based configuration.
+* Use variable mode (default) for items with different widths like Breadcrumbs.
+* Use uniform mode (itemWidth option) for same-width items like Pagination buttons.
 */
 /**
-* Creates a new token instance.
+* Creates a new overflow context for computing how many items fit in a container.
 *
-* @param tokens The tokens to use.
-* @param options The options for the token instance.
-* @template Z The type of the token ticket.
-* @template E The type of the token context.
-* @returns A new token instance.
+* @param options Configuration options
+* @returns Overflow context with container ref, capacity, and measurement functions
 *
-* @see https://www.designtokens.org/tr/drafts/format/
-* @see https://0.vuetifyjs.com/composables/registration/use-tokens
+* @example Variable-width mode (Breadcrumbs)
+* ```vue
+* <script lang="ts" setup>
+*   import { useTemplateRef } from 'vue'
+*   import { createOverflow } from '@vuetify/v0'
 *
-* @example
-* ```ts
-* import { useTokens } from '@vuetify/v0'
+*   const containerRef = useTemplateRef('container')
+*   const overflow = createOverflow({
+*     container: containerRef,
+*     gap: 8,
+*     reserved: 40,
+*   })
+* <\/script>
 *
-* const tokens = useTokens({
-*   colors: {
-*     primary: '#3b82f6',
-*     secondary: '{colors.primary}', // Alias reference
-*   },
-* })
+* <template>
+*   <div ref="container">
+*     <span
+*       v-for="(item, i) in items.slice(0, overflow.capacity.value)"
+*       :key="i"
+*       :ref="el => overflow.measure(i, el)"
+*     >
+*       {{ item }}
+*     </span>
+*     <span v-if="overflow.isOverflowing.value">...</span>
+*   </div>
+* </template>
+* ```
 *
-* console.log(tokens.resolve('{colors.primary}')) // '#3b82f6'
-* console.log(tokens.resolve('{colors.secondary}')) // '#3b82f6'
+* @example Uniform-width mode (Pagination)
+* ```ts
+* const overflow = createOverflow({
+*   container: () => atom.value?.element,
+*   itemWidth: buttonWidth,
+*   reserved: () => buttonWidth.value * 4,
+* })
 * ```
 */
-function createTokens(tokens = {}, options = {}) {
-	const logger = useLogger();
-	const registry = useRegistry(options);
-	const cache = /* @__PURE__ */ new Map();
-	registry.onboard(flatten(tokens, options.prefix, !!options.flat));
-	function isAlias(token) {
-		return /* @__PURE__ */ isString(token) && token.length > 2 && token[0] === "{" && token.at(-1) === "}";
-	}
-	function isTokenAlias(value) {
-		return /* @__PURE__ */ isObject(value) && "$value" in value;
-	}
-	function resolve(token, visited = /* @__PURE__ */ new Set()) {
-		const cacheKey = /* @__PURE__ */ isString(token) ? token : JSON.stringify(token);
-		const cached = cache.get(cacheKey);
-		if (!/* @__PURE__ */ isUndefined(cached)) return cached;
-		const reference = isTokenAlias(token) ? token.$value : token;
-		const isAliasReference = /* @__PURE__ */ isString(reference) && isAlias(reference);
-		const clean = isAliasReference ? 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.get(clean);
-		let segments = [];
-		if (!found && clean.includes(".")) {
-			const parts = clean.split(".");
-			for (let i = parts.length - 1; i > 0; i--) {
-				const prefix = parts.slice(0, i).join(".");
-				const suffix = parts.slice(i);
-				const candidate = registry.get(prefix);
-				if (!/* @__PURE__ */ isUndefined(candidate?.value)) {
-					found = candidate;
-					segments = suffix;
-					break;
-				}
+function createOverflow(options = {}) {
+	const { container: _container, gap = 0, reserved = 0, itemWidth, reverse } = options;
+	const container = /* @__PURE__ */ isUndefined(_container) ? shallowRef() : toRef(_container);
+	const widths = shallowRef(/* @__PURE__ */ new Map());
+	const { width } = useElementSize(container);
+	function measure(index, el) {
+		if (!el) {
+			if (widths.value.has(index)) {
+				const next = new Map(widths.value);
+				next.delete(index);
+				widths.value = next;
 			}
-		}
-		if (/* @__PURE__ */ isUndefined(found?.value)) {
-			if (isAliasReference) logger.warn(`Alias not found for "${String(reference)}"`);
-			cache.set(cacheKey, void 0);
 			return;
 		}
-		let result;
-		let current = found.value;
-		if (segments.length > 0) {
-			if (isTokenAlias(current)) current = current.$value;
-			for (const segment of segments) {
-				if (!/* @__PURE__ */ isObject(current) || !(segment in current)) {
-					current = void 0;
-					break;
-				}
-				current = current[segment];
-				if (isTokenAlias(current)) current = current.$value;
-			}
-			if (/* @__PURE__ */ isUndefined(current)) {
-				logger.warn(`Path not found inside "${clean}": ${segments.join(".")}`);
-				cache.set(cacheKey, void 0);
-				return;
-			}
-			result = current;
-		} else if (isTokenAlias(current)) {
-			const inner = current.$value;
-			if (/* @__PURE__ */ isString(inner) && isAlias(inner)) return resolve(inner, visited);
-			result = inner;
-		} else if (/* @__PURE__ */ isString(current) && isAlias(current)) return resolve(current, visited);
-		else result = current;
-		cache.set(cacheKey, result);
-		return result;
+		const style = getComputedStyle(el);
+		const marginX = Number.parseFloat(style.marginLeft) + Number.parseFloat(style.marginRight);
+		const w = el.offsetWidth + marginX;
+		if (widths.value.get(index) !== w) widths.value = new Map(widths.value).set(index, w);
 	}
-	return {
-		...registry,
-		resolve,
-		isAlias,
-		get size() {
-			return registry.size;
+	function reset() {
+		widths.value = /* @__PURE__ */ new Map();
+	}
+	const total = computed(() => {
+		const g = toValue(gap);
+		let sum = 0;
+		let count = 0;
+		for (const w of widths.value.values()) {
+			sum += w + (count > 0 ? g : 0);
+			count++;
 		}
+		return sum;
+	});
+	return {
+		container,
+		width,
+		capacity: computed(() => {
+			const available = width.value - toValue(reserved);
+			if (width.value === 0) return Infinity;
+			if (available <= 0) return 0;
+			const g = toValue(gap);
+			const uniformWidth = toValue(itemWidth);
+			if (uniformWidth && uniformWidth > 0) {
+				const first = uniformWidth;
+				const subsequent = uniformWidth + g;
+				if (available < first) return 0;
+				return Math.max(1, Math.floor((available - first) / subsequent) + 1);
+			}
+			const entries = [...widths.value.entries()].toSorted((a, b) => a[0] - b[0]);
+			if (toValue(reverse)) entries.reverse();
+			let sum = 0;
+			let count = 0;
+			for (const [, w] of entries) {
+				const next = sum + w + (count > 0 ? g : 0);
+				if (next > available) break;
+				sum = next;
+				count++;
+			}
+			return count;
+		}),
+		total,
+		isOverflowing: toRef(() => {
+			return total.value > width.value - toValue(reserved);
+		}),
+		measure,
+		reset
 	};
 }
 /**
-* Creates a new token context.
-*
-* @param namespace The namespace for the token context.
-* @param tokens The tokens to use.
-* @template Z The type of the token ticket.
-* @template E The type of the token context.
-* @returns A new token context.
+* Creates an overflow context with dependency injection support.
 *
-* @see https://0.vuetifyjs.com/composables/registration/use-tokens
+* @param options Configuration options including namespace
+* @returns Trinity tuple: [useContext, provideContext, defaultContext]
 *
 * @example
 * ```ts
-* import { createTokensContext } from '@vuetify/v0'
-*
-* export const [useTokens, provideTokens, context] = createTokensContext({
-*  namespace: 'v0:tokens',
-*  tokens: {
-*    colors: {
-*      primary: '#3b82f6',
-*      secondary: '{colors.primary}', // Alias reference
-*    },
-*  },
+* // Create injectable context
+* const [useOverflow, provideOverflow, overflow] = createOverflowContext({
+*   namespace: 'my-overflow',
+*   gap: 8,
+*   reserved: 160,
 * })
+*
+* // In parent component
+* provideOverflow()
+*
+* // In child component
+* const overflow = useOverflow()
 * ```
 */
-function createTokensContext(_options) {
-	const { namespace = "v0:tokens", tokens = {}, ...options } = _options;
-	const [useTokensContext, _provideTokensContext] = createContext(namespace);
-	const context = createTokens(tokens, options);
-	function provideTokensContext(_context = context, app) {
-		return _provideTokensContext(_context, app);
+function createOverflowContext(_options = {}) {
+	const { namespace = "v0:overflow", ...options } = _options;
+	const [useOverflowContext, _provideOverflowContext] = createContext(namespace);
+	const context = createOverflow(options);
+	function provideOverflowContext(_context = context, app) {
+		return _provideOverflowContext(_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.
+	return createTrinity(useOverflowContext, provideOverflowContext, context);
+}
+/**
+* Returns the current overflow context from dependency injection.
 *
-* @see https://0.vuetifyjs.com/composables/registration/use-tokens
+* @param namespace The namespace for the overflow context. Defaults to `v0:overflow`.
+* @returns The current overflow context.
 *
 * @example
 * ```vue
-* <script setup lang="ts">
-*   import { useTokens } from '@vuetify/v0'
+* <script lang="ts" setup>
+*   import { useOverflow } from '@vuetify/v0'
 *
-*   const tokens = useTokens()
+*   // Inject overflow context provided by parent
+*   const overflow = useOverflow()
 * <\/script>
+*
+* <template>
+*   <div>
+*     <p>Capacity: {{ overflow.capacity.value }}</p>
+*   </div>
+* </template>
 * ```
 */
-function useTokens(namespace = "v0:tokens") {
+function useOverflow(namespace = "v0:overflow") {
 	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.
-* @param prefix An optional prefix to prepend to each token ID.
-* @returns An array of flattened tokens, each with an ID and value.
-*/
-function flatten(tokens, prefix = "", flat = false) {
-	const flattened = [];
-	const stack = [{
-		tokens,
-		prefix,
-		flat
-	}];
-	while (stack.length > 0) {
-		const { tokens: currentTokens, prefix: currentPrefix, flat: flat$1 } = stack.pop();
-		const meta = {};
-		for (const k in currentTokens) if (k.startsWith("$")) meta[k] = currentTokens[k];
-		if (Object.keys(meta).length > 0 && currentPrefix) flattened.push({
-			id: currentPrefix,
-			value: meta
-		});
-		for (const key in currentTokens) {
-			if (key.startsWith("$")) continue;
-			const value = currentTokens[key];
-			const id = currentPrefix ? `${currentPrefix}.${key}` : key;
-			if (!/* @__PURE__ */ isObject(value)) {
-				flattened.push({
-					id,
-					value
-				});
-				continue;
-			}
-			if ("$value" in value) {
-				flattened.push({
-					id,
-					value
-				});
-				const inner = value.$value;
-				if (/* @__PURE__ */ isObject(inner) && !flat$1) for (const innerKey in inner) {
-					if (innerKey.startsWith("$")) continue;
-					const child = inner[innerKey];
-					const childId = `${id}.${innerKey}`;
-					if (!/* @__PURE__ */ isObject(child)) flattened.push({
-						id: childId,
-						value: child
-					});
-					else if ("$value" in child) flattened.push({
-						id: childId,
-						value: child
-					});
-					else stack.push({
-						tokens: child,
-						prefix: childId,
-						flat: flat$1
-					});
-				}
-				continue;
-			}
-			if (flat$1) {
-				flattened.push({
-					id,
-					value
-				});
-				continue;
-			}
-			stack.push({
-				tokens: value,
-				prefix: id,
-				flat: flat$1
-			});
-		}
-	}
-	return flattened;
-}
-
-//#endregion
-//#region src/composables/useLocale/adapters/v0.ts
-/**
-* Vuetify0.x locale adapter implementation
-*
-* This adapter provides translation and number formatting
-* capabilities using the Intl API and supports both
-* numbered ({0}, {1}) and named ({name}) variables in translation strings.
-*/
-var Vuetify0LocaleAdapter = class {
-	t(message, ...params) {
-		let resolvedMessage = message;
-		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 /* @__PURE__ */ isUndefined(variables[name]) ? match : String(variables[name]);
-			});
-			params = params.slice(1);
-		}
-		resolvedMessage = resolvedMessage.replace(/\{(\d+)\}/g, (match, index) => {
-			const idx = Number.parseInt(index, 10);
-			if (!/* @__PURE__ */ isUndefined(params[idx])) return String(params[idx]);
-			return match;
-		});
-		return resolvedMessage;
-	}
-	n(value, locale, ...params) {
-		if (!IN_BROWSER || !locale) return value.toString();
-		const options = params[0];
-		return new Intl.NumberFormat(String(locale), options).format(value);
-	}
-};
 
 //#endregion
-//#region src/composables/useLocale/index.ts
+//#region src/composables/usePagination/index.ts
 /**
-* @module useLocale
+* @module usePagination
 *
 * @remarks
-* Internationalization (i18n) composable with adapter pattern for message translation.
+* Lightweight pagination composable for navigating through pages.
 *
 * Key features:
-* - Locale selection with createSingle
-* - Token-based message storage with useTokens
-* - Numbered and named placeholder support ({0}, {name})
-* - Number formatting with Intl.NumberFormat
-* - Adapter pattern for integration with i18n providers
+* - No registry overhead - just a bounded integer
+* - Direct ref support for v-model compatibility
+* - Navigation methods: next, prev, first, last
+* - Computed visible items with ellipsis
+* - Trinity pattern for dependency injection
 *
-* Integrates with createSingle for locale selection and useTokens for message resolution.
+* Unlike registry-based composables, pagination tracks a single number
+* within a range, making it efficient for large page counts.
 */
 /**
-* Creates a new locale instance.
+* Creates a pagination 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.
-* @returns A new locale instance.
+* @param options The options for the pagination instance.
+* @returns A pagination context with navigation methods.
 *
-* @see https://0.vuetifyjs.com/composables/plugins/use-locale
+* @example
+* ```ts
+* import { createPagination } from '@vuetify/v0'
+*
+* // Basic usage
+* const pagination = createPagination({ size: 100 })
+* pagination.next()
+* pagination.items.value // [{ type: 'page', value: 1 }, { type: 'page', value: 2 }, ...]
+*
+* // With v-model (pass a ref)
+* const page = ref(1)
+* const pagination = createPagination({ page, size: 100 })
+* // Mutating pagination.page or the passed ref syncs both
+* ```
 */
-function createLocale(_options = {}) {
-	const { adapter = new Vuetify0LocaleAdapter(), messages = {}, ...options } = _options;
-	const tokens = createTokens(messages);
-	const registry = createSingle(options);
-	for (const id in messages) {
-		registry.register({ id });
-		if (id === options.default && !registry.selectedId.value) registry.select(id);
+function createPagination(_options = {}) {
+	const { page: _page = 1, itemsPerPage: _itemsPerPage = 10, size: _size = 0, visible: _visible = 7, ellipsis = "..." } = _options;
+	const page = isRef(_page) ? _page : shallowRef(_page);
+	const pages = computed(() => {
+		const size = toValue(_size);
+		const perPage = toValue(_itemsPerPage);
+		if (size <= 0 || /* @__PURE__ */ isNaN(size)) return 0;
+		return Math.ceil(size / perPage);
+	});
+	function first() {
+		page.value = 1;
 	}
-	function t(key, params, fallback) {
-		const locale = registry.selectedId.value;
-		const args = toArray(params);
-		if (!locale) return adapter.t(fallback ?? key, ...args);
-		const path = `${locale}.${key}`;
-		const message = tokens.get(path)?.value;
-		const template = /* @__PURE__ */ isString(message) ? resolve(locale, message) : fallback ?? key;
-		return adapter.t(template, ...args);
+	function last() {
+		page.value = Math.max(1, pages.value);
 	}
-	function n(value, ...params) {
-		return adapter.n(value, registry.selectedId.value, ...params);
+	function next() {
+		if (page.value < pages.value) page.value++;
 	}
-	function resolve(locale, str) {
-		return str.replace(/{([a-zA-Z0-9.-_]+)}/g, (match, key) => {
-			const [prefix, ...rest] = key.split(".");
-			const target = registry.has(prefix) ? prefix : locale;
-			const path = `${target}.${registry.has(prefix) ? rest.join(".") : key}`;
-			const resolved = tokens.get(path)?.value;
-			if (/* @__PURE__ */ isString(resolved)) return resolve(target, resolved);
-			return match;
-		});
+	function prev() {
+		if (page.value > 1) page.value--;
+	}
+	function select(value) {
+		if (value < 1) page.value = 1;
+		else if (value > pages.value) page.value = Math.max(1, pages.value);
+		else page.value = value;
+	}
+	const isFirst = computed(() => page.value <= 1);
+	const isLast = computed(() => page.value >= pages.value);
+	const pageStart = computed(() => (page.value - 1) * toValue(_itemsPerPage));
+	const pageStop = computed(() => Math.min(pageStart.value + toValue(_itemsPerPage), toValue(_size)));
+	function toPage(value) {
+		return {
+			type: "page",
+			value
+		};
+	}
+	function toEllipsis() {
+		return ellipsis === false ? false : {
+			type: "ellipsis",
+			value: ellipsis
+		};
+	}
+	function filter(array) {
+		return array.filter((item) => item !== false);
 	}
 	return {
-		...registry,
-		t,
-		n,
+		page,
+		ellipsis,
+		items: computed(() => {
+			const pageCount = pages.value;
+			const visible = toValue(_visible);
+			const current = page.value;
+			if (pageCount <= 0 || /* @__PURE__ */ isNaN(pageCount) || pageCount > Number.MAX_SAFE_INTEGER) return [];
+			if (visible <= 0) return [];
+			if (visible <= 2) return [toPage(current)];
+			if (pageCount <= visible) return (/* @__PURE__ */ range(pageCount, 1)).map(toPage);
+			if (visible === 3) {
+				const mid = current <= 1 ? 2 : current >= pageCount ? pageCount - 1 : current;
+				return [
+					toPage(1),
+					toPage(mid),
+					toPage(pageCount)
+				];
+			}
+			const boundary = visible - 2;
+			const middle = visible - 4;
+			if (middle <= 0) {
+				if (current <= boundary) return filter([
+					...(/* @__PURE__ */ range(boundary, 1)).map(toPage),
+					toEllipsis(),
+					toPage(pageCount)
+				]);
+				if (current > pageCount - boundary) return filter([
+					toPage(1),
+					toEllipsis(),
+					...(/* @__PURE__ */ range(boundary, pageCount - boundary + 1)).map(toPage)
+				]);
+				return current <= Math.ceil(pageCount / 2) ? filter([
+					toPage(1),
+					toPage(current),
+					toEllipsis(),
+					toPage(pageCount)
+				]) : filter([
+					toPage(1),
+					toEllipsis(),
+					toPage(current),
+					toPage(pageCount)
+				]);
+			}
+			const leftThreshold = boundary - 1;
+			const rightThreshold = pageCount - boundary + 2;
+			if (current <= leftThreshold) return filter([
+				...(/* @__PURE__ */ range(boundary, 1)).map(toPage),
+				toEllipsis(),
+				toPage(pageCount)
+			]);
+			else if (current >= rightThreshold) return filter([
+				toPage(1),
+				toEllipsis(),
+				...(/* @__PURE__ */ range(boundary, pageCount - boundary + 1)).map(toPage)
+			]);
+			else {
+				const start = current - Math.floor(middle / 2);
+				return filter([
+					toPage(1),
+					toEllipsis(),
+					...(/* @__PURE__ */ range(middle, start)).map(toPage),
+					toEllipsis(),
+					toPage(pageCount)
+				]);
+			}
+		}),
+		pageStart,
+		pageStop,
+		isFirst,
+		isLast,
+		first,
+		last,
+		next,
+		prev,
+		select,
+		get itemsPerPage() {
+			return toValue(_itemsPerPage);
+		},
 		get size() {
-			return registry.size;
+			return toValue(_size);
+		},
+		get pages() {
+			return pages.value;
 		}
 	};
 }
-function createLocaleFallback() {
-	return {
-		size: 0,
-		t: (key, _params, fallback) => fallback ?? key,
-		n: String
-	};
-}
 /**
-* Creates a new locale context.
-*
-* @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.
+* Creates a pagination context for dependency injection.
 *
-* @see https://0.vuetifyjs.com/composables/plugins/use-locale
+* @param options The options including namespace.
+* @returns A trinity: [usePagination, providePagination, defaultContext]
 *
 * @example
 * ```ts
-* import { createLocaleContext } from '@vuetify/v0'
+* // With default namespace 'v0:pagination'
+* const [usePagination, providePaginationContext] = createPaginationContext({ size: 50 })
 *
-* export const [useAppLocale, provideAppLocale, appLocale] = createLocaleContext({
-*   namespace: 'app:locale',
-*   messages: {
-*     en: { hello: 'Hello' },
-*     es: { hello: 'Hola' },
-*   },
+* // Or with custom namespace
+* const [usePagination, providePaginationContext] = createPaginationContext({
+*   namespace: 'my-pagination',
+*   size: 50,
 * })
 *
-* // In a parent component:
-* provideAppLocale()
+* // Parent component
+* providePaginationContext()
 *
-* // In a child component:
-* const locale = useAppLocale()
-* locale.select('es')
+* // Child component
+* const pagination = usePagination()
+* pagination.next()
 * ```
 */
-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);
+function createPaginationContext(_options = {}) {
+	const { namespace = "v0:pagination", ...options } = _options;
+	const [usePaginationContext, _providePaginationContext] = createContext(namespace);
+	const context = createPagination(options);
+	function providePaginationContext(_context = context, app) {
+		return _providePaginationContext(_context, app);
 	}
-	return createTrinity(useLocaleContext, provideLocaleContext, context);
+	return createTrinity(usePaginationContext, providePaginationContext, context);
 }
 /**
-* Creates a new locale plugin.
+* Returns the current pagination instance from context.
 *
-* @param options The options for the locale plugin.
-* @template Z The type of the locale ticket.
-* @template E The type of the locale context.
-* @template R The type of the token ticket.
-* @template O The type of the token context.
-* @returns A new locale plugin.
+* @param namespace The namespace. @default 'v0:pagination'
+* @returns The pagination context.
 *
-* @see https://0.vuetifyjs.com/composables/plugins/use-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,
-		provide: (app) => {
-			provideLocaleContext(context, app);
-		}
-	});
-}
-/**
-* Returns the current locale instance.
+* @example
+* ```vue
+* <script setup lang="ts">
+*  import { usePagination } from '@vuetify/v0'
 *
-* @returns The current locale instance.
+*  const pagination = usePagination()
+* <\/script>
 *
-* @see https://0.vuetifyjs.com/composables/plugins/use-locale
+* <template>
+*   <button @click="pagination.prev()" :disabled="pagination.isFirst.value">Prev</button>
+*   <button @click="pagination.next()" :disabled="pagination.isLast.value">Next</button>
+* </template>
+* ```
 */
-function useLocale(namespace = "v0:locale") {
-	const fallback = createLocaleFallback();
-	if (!getCurrentInstance()) return fallback;
-	try {
-		return useContext(namespace, fallback);
-	} catch {
-		return fallback;
-	}
+function usePagination(namespace = "v0:pagination") {
+	return useContext(namespace);
 }
 
 //#endregion
@@ -5134,7 +5404,7 @@ function useEventListener(target, event, listener, options) {
 * @see https://0.vuetifyjs.com/composables/system/use-event-listener
 */
 function useWindowEventListener(event, listener, options) {
-	return useEventListener(window, event, listener, options);
+	return IN_BROWSER ? useEventListener(window, event, listener, options) : () => {};
 }
 /**
 * Attaches an event listener to the document.
@@ -5148,7 +5418,7 @@ function useWindowEventListener(event, listener, options) {
 * @see https://0.vuetifyjs.com/composables/system/use-event-listener
 */
 function useDocumentEventListener(event, listener, options) {
-	return useEventListener(document, event, listener, options);
+	return IN_BROWSER ? useEventListener(document, event, listener, options) : () => {};
 }
 
 //#endregion
@@ -5371,7 +5641,7 @@ function createBreakpointsPlugin(_options = {}) {
 		},
 		setup: (app) => {
 			app.mixin({ mounted() {
-				if (this.$parent !== null) return;
+				if (!/* @__PURE__ */ isNull(this.$parent)) return;
 				const hydration = useHydration();
 				function listener() {
 					context.update();
@@ -5416,6 +5686,236 @@ function useBreakpoints(namespace = "v0:breakpoints") {
 	return useContext(namespace);
 }
 
+//#endregion
+//#region src/composables/useClickOutside/index.ts
+/**
+* @module useClickOutside
+*
+* @remarks
+* Detects clicks outside of specified element(s) with automatic cleanup.
+*
+* Key features:
+* - Two-phase detection (pointerdown → pointerup) prevents drag-out false positives
+* - Touch scroll threshold ignores swipes/scrolls on mobile
+* - Capture phase listeners work with stopPropagation
+* - Pause/resume/stop functionality
+* - Optional iframe focus detection
+* - SSR-safe (no-op when not in browser)
+*
+* Common use cases: closing popovers, dropdowns, modals, and menus.
+*
+* Accessibility: This composable handles pointer interactions only. For accessible
+* components (dialogs, popovers, menus), pair with `useKeydown` for Escape key
+* dismissal per WCAG/APG requirements.
+*/
+/**
+* Detects clicks outside of the specified element(s).
+*
+* Uses two-phase detection (pointerdown → pointerup) to prevent false positives
+* when users drag from inside to outside an element.
+*
+* @param target Element ref(s) to detect clicks outside of. Accepts a single ref/getter or array of refs/getters.
+* @param handler Callback invoked when a click outside is detected.
+* @param options Configuration options.
+* @returns An object with methods to control the listener.
+*
+* @see https://0.vuetifyjs.com/composables/system/use-click-outside
+*
+* @example Native element ref
+* ```ts
+* const menuRef = useTemplateRef<HTMLElement>('menu')
+*
+* useClickOutside(menuRef, () => { isOpen.value = false })
+* ```
+*
+* @example Component ref (e.g., Atom)
+* ```ts
+* const atomRef = useTemplateRef<AtomExpose>('atom')
+*
+* // Pass the exposed element TemplateRef via getter
+* useClickOutside(
+*   () => atomRef.value?.element,
+*   () => { isOpen.value = false }
+* )
+* ```
+*
+* @example Multiple targets
+* ```ts
+* const popoverRef = useTemplateRef<AtomExpose>('popover')
+* const anchorRef = useTemplateRef<HTMLElement>('anchor')
+*
+* useClickOutside(
+*   [() => popoverRef.value?.element, anchorRef],
+*   () => { isOpen.value = false }
+* )
+* ```
+*
+* @example Ignoring elements (CSS selectors or refs)
+* ```ts
+* useClickOutside(
+*  () => navRef.value?.element,
+*  () => { isOpen.value = false },
+*  { ignore: ['[data-app-bar]'] }
+* )
+* ```
+*/
+function useClickOutside(target, handler, options = {}) {
+	const { capture = true, touchScrollThreshold = 30, detectIframe = false, ignore = [] } = options;
+	const isPaused = shallowRef(false);
+	const isActive = toRef(() => !isPaused.value);
+	let initialTarget = null;
+	let startPosition = {
+		x: 0,
+		y: 0
+	};
+	let cleanupPointerDown;
+	let cleanupPointerUp;
+	let cleanupBlur;
+	/**
+	* Resolve target(s) to an array of HTMLElements.
+	*/
+	function getTargets() {
+		return toArray(target).map((source) => toValue(source)).filter((el) => !/* @__PURE__ */ isNullOrUndefined(el));
+	}
+	/**
+	* Resolve ignore targets to a tuple of [selectors, elements].
+	* Called once per event to avoid repeated toValue() calls in hot path.
+	*/
+	function resolveIgnoreTargets() {
+		const ignoreTargets = toValue(ignore);
+		if (ignoreTargets.length === 0) return [[], []];
+		const selectors = [];
+		const elements = [];
+		for (const ignoreTarget of ignoreTargets) if (/* @__PURE__ */ isString(ignoreTarget)) selectors.push(ignoreTarget);
+		else {
+			const ignoreEl = toValue(ignoreTarget);
+			if (ignoreEl) elements.push(ignoreEl);
+		}
+		return [selectors, elements];
+	}
+	/**
+	* Check if an element matches resolved ignore targets.
+	*/
+	function isIgnored(el, selectors, elements) {
+		if (!el) return false;
+		for (const selector of selectors) try {
+			if (el.matches(selector) || !/* @__PURE__ */ isNull(el.closest(selector))) return true;
+		} catch {}
+		for (const ignoreEl of elements) if (ignoreEl === el || ignoreEl.contains(el)) return true;
+		return false;
+	}
+	/**
+	* Check if any element in the event path should be ignored.
+	*/
+	function shouldIgnore(path) {
+		const [selectors, elements] = resolveIgnoreTargets();
+		if (selectors.length === 0 && elements.length === 0) return false;
+		return path.some((node) => node instanceof Element && isIgnored(node, selectors, elements));
+	}
+	/**
+	* Check if the event target is outside all target elements.
+	*/
+	function isOutside(eventTarget) {
+		if (!eventTarget) return false;
+		if (!(eventTarget instanceof Node)) return false;
+		const targets = getTargets();
+		if (targets.length === 0) return false;
+		return targets.every((el) => {
+			return el !== eventTarget && !el.contains(eventTarget);
+		});
+	}
+	/**
+	* Validate that the target is still in the DOM.
+	*/
+	function isValidTarget(eventTarget) {
+		if (!(eventTarget instanceof Element)) return false;
+		if (!eventTarget.isConnected) return false;
+		return true;
+	}
+	/**
+	* Handle pointerdown - store initial target and position.
+	*/
+	function onPointerDown(event) {
+		if (isPaused.value) return;
+		if (event.defaultPrevented) return;
+		initialTarget = event.composedPath()[0] ?? event.target;
+		startPosition = {
+			x: event.clientX,
+			y: event.clientY
+		};
+	}
+	/**
+	* Handle pointerup - check if it's an outside click.
+	*/
+	function onPointerUp(event) {
+		if (isPaused.value) return;
+		if (event.defaultPrevented) return;
+		if (!initialTarget) return;
+		const pointerdownTarget = initialTarget;
+		initialTarget = null;
+		if (!isValidTarget(pointerdownTarget)) return;
+		const path = event.composedPath();
+		const pointerupTarget = path[0] ?? event.target;
+		if (event.pointerType === "touch") {
+			const dx = Math.abs(event.clientX - startPosition.x);
+			const dy = Math.abs(event.clientY - startPosition.y);
+			if (dx >= touchScrollThreshold || dy >= touchScrollThreshold) return;
+		}
+		if (isOutside(pointerdownTarget) && isOutside(pointerupTarget) && !shouldIgnore(path)) handler(event);
+	}
+	/**
+	* Handle window blur - detect focus moving to iframe.
+	*/
+	function onBlur(event) {
+		if (isPaused.value) return;
+		if (event.defaultPrevented) return;
+		if (document.activeElement instanceof HTMLIFrameElement) {
+			const iframeIsOutside = getTargets().every((el) => !el.contains(document.activeElement));
+			const [selectors, elements] = resolveIgnoreTargets();
+			if (iframeIsOutside && !isIgnored(document.activeElement, selectors, elements)) handler(event);
+		}
+	}
+	function setup() {
+		cleanupPointerDown = useDocumentEventListener("pointerdown", onPointerDown, capture);
+		cleanupPointerUp = useDocumentEventListener("pointerup", onPointerUp, capture);
+		if (!detectIframe) return;
+		cleanupBlur = useWindowEventListener("blur", onBlur, capture);
+	}
+	function cleanup() {
+		cleanupPointerDown?.();
+		cleanupPointerUp?.();
+		cleanupBlur?.();
+		cleanupPointerDown = void 0;
+		cleanupPointerUp = void 0;
+		cleanupBlur = void 0;
+	}
+	function pause() {
+		if (isPaused.value) return;
+		isPaused.value = true;
+		initialTarget = null;
+		cleanup();
+	}
+	function resume() {
+		if (!isPaused.value) return;
+		isPaused.value = false;
+		setup();
+	}
+	function stop() {
+		isPaused.value = true;
+		initialTarget = null;
+		cleanup();
+	}
+	setup();
+	onScopeDispose(stop, true);
+	return {
+		isActive: shallowReadonly(isActive),
+		isPaused: shallowReadonly(isPaused),
+		pause,
+		resume,
+		stop
+	};
+}
+
 //#endregion
 //#region src/composables/useFeatures/index.ts
 /**
@@ -5613,7 +6113,7 @@ function useFeatures(namespace = "v0:features") {
 * Filters arrays based on query strings with configurable matching strategies.
 */
 function defaultFilter(query, item, keys, mode = "some") {
-	const queries = Array.isArray(query) ? query.map((q) => String(q).toLowerCase()) : [String(query).toLowerCase()];
+	const queries = toArray(query).map((q) => String(q).toLowerCase());
 	function match(value, q) {
 		return String(value).toLowerCase().includes(q);
 	}
@@ -5656,7 +6156,7 @@ function createFilter(options = {}) {
 		return { items: computed(() => {
 			const q = toValue(queryRef);
 			query.value = q;
-			const queries = (Array.isArray(q) ? q : [q]).filter((q$1) => String(q$1).trim());
+			const queries = toArray(q).filter((q$1) => String(q$1).trim());
 			if (queries.length === 0) return itemsRef.value;
 			const queryParam = queries.length === 1 ? queries[0] : queries;
 			return itemsRef.value.filter((item) => filterFunction(queryParam, item));
@@ -5819,7 +6319,7 @@ function createForm(options) {
 		return parse(validateOn).includes(event);
 	}
 	const isValidating = computed(() => {
-		for (const ticket of registry.collection.values()) if (ticket.isValidating.value) return true;
+		for (const ticket of registry.values()) if (ticket.isValidating.value) return true;
 		return false;
 	});
 	const isValid = computed(() => {
@@ -5827,7 +6327,7 @@ function createForm(options) {
 		for (const ticket of registry.values()) {
 			hasFields = true;
 			if (ticket.isValid.value === false) return false;
-			if (ticket.isValid.value === null) return null;
+			if (/* @__PURE__ */ isNull(ticket.isValid.value)) return null;
 		}
 		return hasFields ? true : null;
 	});
@@ -5843,7 +6343,7 @@ function createForm(options) {
 		return validating.map((id$1) => registry.get(id$1)).filter(Boolean).every((ticket) => ticket.isValid.value === true);
 	}
 	function register(registration) {
-		const model = shallowRef(registration.value == null ? "" : toValue(registration.value));
+		const model = shallowRef(/* @__PURE__ */ isNullOrUndefined(registration.value) ? "" : toValue(registration.value));
 		const rules = registration.rules || [];
 		const errors = shallowRef([]);
 		const isValidating$1 = shallowRef(false);
@@ -6042,12 +6542,14 @@ function useForm(namespace = "v0:form") {
 */
 function useIntersectionObserver(target, callback, options = {}) {
 	const { isHydrated } = useHydration();
+	const targetRef = isRef(target) ? target : shallowRef(target);
 	const observer = shallowRef();
 	const isPaused = shallowRef(false);
 	const isIntersecting = shallowRef(false);
 	const isActive = toRef(() => !!observer.value);
 	function setup() {
-		if (!isHydrated.value || !SUPPORTS_INTERSECTION_OBSERVER || !target.value || isPaused.value) return;
+		if (/* @__PURE__ */ isNull(observer.value)) return;
+		if (!isHydrated.value || !SUPPORTS_INTERSECTION_OBSERVER || !targetRef.value || isPaused.value) return;
 		observer.value = new IntersectionObserver((entries) => {
 			const transformedEntries = entries.map((entry) => ({
 				boundingClientRect: entry.boundingClientRect,
@@ -6061,26 +6563,29 @@ function useIntersectionObserver(target, callback, options = {}) {
 			const latestEntry = transformedEntries.at(-1);
 			if (latestEntry) isIntersecting.value = latestEntry.isIntersecting;
 			callback(transformedEntries);
+			if (options.once && latestEntry?.isIntersecting) stop();
 		}, {
 			root: options.root || null,
 			rootMargin: options.rootMargin || "0px",
 			threshold: options.threshold || 0
 		});
-		observer.value.observe(target.value);
+		observer.value.observe(targetRef.value);
 		if (options.immediate) callback([{
-			boundingClientRect: target.value.getBoundingClientRect(),
+			boundingClientRect: targetRef.value.getBoundingClientRect(),
 			intersectionRatio: 0,
 			intersectionRect: new DOMRect(0, 0, 0, 0),
 			isIntersecting: false,
 			rootBounds: null,
-			target: target.value,
+			target: targetRef.value,
 			time: performance.now()
 		}]);
 	}
-	watch([isHydrated, target], () => {
+	watchEffect(() => {
+		const hydrated = isHydrated.value;
+		const target$1 = targetRef.value;
 		cleanup();
-		setup();
-	}, { immediate: true });
+		if (hydrated && target$1) setup();
+	});
 	function cleanup() {
 		if (observer.value) {
 			observer.value.disconnect();
@@ -6098,6 +6603,7 @@ function useIntersectionObserver(target, callback, options = {}) {
 	}
 	function stop() {
 		cleanup();
+		observer.value = null;
 	}
 	onScopeDispose(stop, true);
 	return {
@@ -6194,6 +6700,10 @@ function useElementIntersection(target, options = {}) {
 * ```ts
 * import { useKeydown } from '@vuetify/v0'
 *
+* // Single handler
+* useKeydown({ key: 'Escape', handler: () => console.log('Escape pressed') })
+*
+* // Multiple handlers
 * const { isActive, start, stop } = useKeydown([
 *   { key: 'Enter', handler: () => console.log('Enter pressed') },
 *   { key: 'Escape', handler: () => console.log('Escape pressed'), preventDefault: true },
@@ -6209,8 +6719,7 @@ function useKeydown(handlers) {
 	let cleanup = null;
 	const isActive = toRef(() => !!cleanup);
 	function onKeydown(event) {
-		const handlerList = toValue(handlers);
-		const handler = (Array.isArray(handlerList) ? handlerList : [handlerList]).find((h) => h.key === event.key);
+		const handler = toArray(toValue(handlers)).find((h) => h.key === event.key);
 		if (handler) {
 			if (handler.preventDefault) event.preventDefault();
 			if (handler.stopPropagation) event.stopPropagation();
@@ -6300,7 +6809,7 @@ function useMutationObserver(target, callback, options = {}) {
 	const { isHydrated } = useHydration();
 	const observer = shallowRef();
 	const isPaused = shallowRef(false);
-	const isActive = computed(() => !!observer.value);
+	const isActive = toRef(() => !!observer.value);
 	const observerOptions = {
 		childList: options.childList ?? true,
 		attributes: options.attributes ?? false,
@@ -6311,6 +6820,7 @@ function useMutationObserver(target, callback, options = {}) {
 		attributeFilter: options.attributeFilter
 	};
 	function setup() {
+		if (/* @__PURE__ */ isNull(observer.value)) return;
 		if (!isHydrated.value || !SUPPORTS_MUTATION_OBSERVER || !target.value || isPaused.value) return;
 		observer.value = new MutationObserver((mutations) => {
 			callback(mutations.map((mutation) => ({
@@ -6324,6 +6834,7 @@ function useMutationObserver(target, callback, options = {}) {
 				attributeNamespace: mutation.attributeNamespace,
 				oldValue: mutation.oldValue
 			})));
+			if (options.once) stop();
 		});
 		observer.value.observe(target.value, observerOptions);
 		if (options.immediate) {
@@ -6344,12 +6855,15 @@ function useMutationObserver(target, callback, options = {}) {
 				attributeNamespace: null,
 				oldValue: null
 			}]);
+			if (options.once) stop();
 		}
 	}
-	watch([isHydrated, target], () => {
+	watchEffect(() => {
+		const hydrated = isHydrated.value;
+		const el = target.value;
 		cleanup();
-		setup();
-	}, { immediate: true });
+		if (hydrated && el) setup();
+	});
 	function cleanup() {
 		if (observer.value) {
 			observer.value.disconnect();
@@ -6366,6 +6880,7 @@ function useMutationObserver(target, callback, options = {}) {
 	}
 	function stop() {
 		cleanup();
+		observer.value = null;
 	}
 	onScopeDispose(stop, true);
 	return {
@@ -7014,10 +7529,12 @@ var Vuetify0ThemeAdapter = class extends ThemeAdapter {
 	}
 	upsert(styles) {
 		if (!IN_BROWSER) return;
-		let styleEl = document.querySelector(`#${this.stylesheetId}`);
+		const selector = this.stylesheetId.startsWith("#") ? this.stylesheetId : `#${this.stylesheetId}`;
+		const id = this.stylesheetId.startsWith("#") ? this.stylesheetId.slice(1) : this.stylesheetId;
+		let styleEl = document.querySelector(selector);
 		if (!styleEl) {
 			styleEl = document.createElement("style");
-			styleEl.id = this.stylesheetId.startsWith("#") ? this.stylesheetId.slice(1) : this.stylesheetId;
+			styleEl.id = id;
 			if (this.cspNonce) styleEl.setAttribute("nonce", this.cspNonce);
 			document.head.append(styleEl);
 		}
@@ -7772,7 +8289,7 @@ function useVirtual(items, _options = {}) {
 		cancelAnimationFrame(raf);
 		cancelAnimationFrame(rebuildRaf);
 		cancelAnimationFrame(edgeRaf);
-	});
+	}, true);
 	return {
 		element,
 		items: computedItems,
@@ -7788,4 +8305,4 @@ function useVirtual(items, _options = {}) {
 }
 
 //#endregion
-export { Atom_default as Atom, Avatar, AvatarFallback_default as AvatarFallback, AvatarImage_default as AvatarImage, AvatarRoot_default as AvatarRoot, COMMON_ELEMENTS, ConsolaLoggerAdapter, 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, PopoverAnchor_default as PopoverAnchor, PopoverContent_default as PopoverContent, PopoverRoot_default as PopoverRoot, 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, Vuetify0LocaleAdapter, Vuetify0LoggerAdapter, Vuetify0ThemeAdapter, __LOGGER_ENABLED__, clamp, createBreakpoints, createBreakpointsContext, createBreakpointsPlugin, createContext, 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, createRegistryContext, createSelection, createSelectionContext, createSingle, createSingleContext, createStep, createStepContext, createStorage, createStorageContext, createStoragePlugin, createTheme, createThemeContext, createThemePlugin, createTimeline, createTimelineContext, createTokens, createTokensContext, createTrinity, debounce, genId, isArray, isBoolean, isFunction, isNaN, isNull, isNullOrUndefined, isNumber, isObject, isPrimitive, isSelfClosingTag, isString, isSymbol, isUndefined, mergeDeep, provideAvatarContext, provideContext, provideExpansionPanelItem, provideExpansionPanelSelection, provideGroupRoot, providePaginationControls, providePaginationItems, providePaginationRoot, providePopoverContext, provideSelectionRoot, provideSingleRoot, provideStepRoot, range, toArray, toReactive, useAvatarRoot, useBreakpoints, useContext, useDocumentEventListener, useElementIntersection, useElementSize, useEventListener, useExpansionPanelItem, useExpansionPanelRoot, useFeatures, useFilter, useFilterContext, useForm, useGroup, useGroupRoot, useHydration, useIntersectionObserver, useKeydown, useLocale, useLogger, useMutationObserver, useOverflow, usePagination, usePaginationControls, usePaginationItems, usePaginationRoot, usePermissions, usePopoverContext, useProxyModel, useProxyRegistry, useQueue, useRegistry, useResizeObserver, useSelection, useSelectionRoot, useSingle, useSingleRoot, useStep, useStepRoot, useStorage, useTheme, useTimeline, useToggleScope, useTokens, useVirtual, useWindowEventListener, version };
+export { Atom_default as Atom, Avatar, AvatarFallback_default as AvatarFallback, AvatarImage_default as AvatarImage, AvatarRoot_default as AvatarRoot, COMMON_ELEMENTS, ConsolaLoggerAdapter, 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, PopoverAnchor_default as PopoverAnchor, PopoverContent_default as PopoverContent, PopoverRoot_default as PopoverRoot, 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, Vuetify0LocaleAdapter, Vuetify0LoggerAdapter, Vuetify0ThemeAdapter, __LOGGER_ENABLED__, clamp, createBreakpoints, createBreakpointsContext, createBreakpointsPlugin, createContext, 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, createRegistryContext, createSelection, createSelectionContext, createSingle, createSingleContext, createStep, createStepContext, createStorage, createStorageContext, createStoragePlugin, createTheme, createThemeContext, createThemePlugin, createTimeline, createTimelineContext, createTokens, createTokensContext, createTrinity, debounce, genId, isArray, isBoolean, isFunction, isNaN, isNull, isNullOrUndefined, isNumber, isObject, isPrimitive, isSelfClosingTag, isString, isSymbol, isUndefined, mergeDeep, provideAvatarContext, provideContext, provideExpansionPanelItem, provideExpansionPanelSelection, provideGroupRoot, providePaginationControls, providePaginationItems, providePaginationRoot, providePopoverContext, provideSelectionRoot, provideSingleRoot, provideStepRoot, range, toArray, toReactive, useAvatarRoot, useBreakpoints, useClickOutside, useContext, useDocumentEventListener, useElementIntersection, useElementSize, useEventListener, useExpansionPanelItem, useExpansionPanelRoot, useFeatures, useFilter, useFilterContext, useForm, useGroup, useGroupRoot, useHydration, useIntersectionObserver, useKeydown, useLocale, useLogger, useMutationObserver, useOverflow, usePagination, usePaginationControls, usePaginationItems, usePaginationRoot, usePermissions, usePopoverContext, useProxyModel, useProxyRegistry, useQueue, useRegistry, useResizeObserver, useSelection, useSelectionRoot, useSingle, useSingleRoot, useStep, useStepRoot, useStorage, useTheme, useTimeline, useToggleScope, useTokens, useVirtual, useWindowEventListener, version };