@vuetify/v0 0.0.18 → 0.0.21

package/dist/{useStep-DC_JvZpy.mjs → useStep-CfgBbrJB.mjs}

@@ -1,6 +1,6 @@
-import { _ as range, d as isObject, h as isUndefined, l as isNullOrUndefined, m as isSymbol, o as isFunction, p as isString, r as genId, s as isNaN } from "./utilities-JxCe-nF2.mjs";
-import { a as SUPPORTS_OBSERVER, s as __LOGGER_ENABLED__, t as IN_BROWSER } from "./globals-BGVqrlN7.mjs";
-import { computed, getCurrentInstance, inject, isRef, onScopeDispose, provide, reactive, shallowReactive, shallowReadonly, shallowRef, toRef, toValue, watch } from "vue";
+import { _ as range, c as isNull, d as isObject, h as isUndefined, i as isArray, l as isNullOrUndefined, m as isSymbol, o as isFunction, p as isString, r as genId, s as isNaN, t as clamp } from "./utilities-CjDz-Xvn.mjs";
+import { a as SUPPORTS_OBSERVER, s as __LOGGER_ENABLED__, t as IN_BROWSER } from "./globals-C3JrEDXZ.mjs";
+import { computed, getCurrentInstance, inject, isRef, onScopeDispose, provide, reactive, shallowReactive, shallowReadonly, shallowRef, toRef, toValue, watch, watchEffect } from "vue";
 
 //#region src/composables/createContext/index.ts
 /**
@@ -302,10 +302,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",
@@ -560,6 +562,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
@@ -616,17 +620,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) {
@@ -715,9 +723,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;
@@ -726,7 +734,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({
@@ -741,7 +749,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 {
@@ -752,8 +760,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;
@@ -780,7 +788,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);
@@ -830,14 +838,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--) {
@@ -1170,7 +1182,7 @@ function useSelection(namespace = "v0:selection") {
 * ```
 */
 function toArray(value) {
-	return /* @__PURE__ */ isNullOrUndefined(value) ? [] : Array.isArray(value) ? value : [value];
+	return /* @__PURE__ */ isNullOrUndefined(value) ? [] : /* @__PURE__ */ isArray(value) ? value : [value];
 }
 
 //#endregion
@@ -1262,7 +1274,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();
@@ -1632,1345 +1645,1350 @@ function useGroup(namespace = "v0: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',
-* })
+* const tabs = createSingle({ mandatory: true })
+*
+* tabs.onboard([
+*   { id: 'home', value: 'Home' },
+*   { id: 'about', value: 'About' },
+*   { id: 'contact', value: 'Contact' },
+* ])
+*
+* tabs.first() // Select first tab
+*
+* console.log(tabs.selectedId.value) // 'home'
+* console.log(tabs.selectedIndex.value) // 0
+*
+* tabs.select('about') // Switch to about tab
+* console.log(tabs.selectedId.value) // 'about'
+* console.log(tabs.selectedIds.size) // 1 (always enforces single selection)
 * ```
 */
-function createHydrationContext(_options = {}) {
-	const { namespace = "v0:hydration" } = _options;
-	const [useHydrationContext, _provideHydrationContext] = createContext(namespace);
-	const context = createHydration();
-	function provideHydrationContext(_context = context, app) {
-		return _provideHydrationContext(_context, app);
+function createSingle(_options = {}) {
+	const { mandatory = false, multiple = false, ...options } = _options;
+	const registry = createSelection({
+		...options,
+		mandatory,
+		multiple
+	});
+	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);
 	}
-	return createTrinity(useHydrationContext, provideHydrationContext, context);
+	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;
+		}
+	};
 }
 /**
-* Creates a new hydration plugin.
+* Creates a new single selection context.
 *
-* @param options The options for the hydration plugin.
-* @template E The type of the hydration context.
-* @returns A new hydration plugin.
+* @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 { createApp } from 'vue'
-* import { createHydrationPlugin } from '@vuetify/v0'
-* import App from './App.vue'
+* import { createSingleContext } from '@vuetify/v0'
 *
-* const app = createApp(App)
+* // With default namespace 'v0:single'
+* export const [useSingle, provideSingle, context] = createSingleContext()
 *
-* app.use(createHydrationPlugin())
+* // In a parent component:
+* provideSingle()
 *
-* app.mount('#app')
+* // In a child component:
+* const single = useSingle()
+* single.select('tab-1')
 * ```
 */
-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 (this.$parent !== null) return;
-				context.hydrate();
-			} });
-		}
-	});
+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 hydration instance.
+* Returns the current single selection instance.
 *
-* @param namespace The namespace for the hydration context. Defaults to `v0:hydration`.
-* @returns The current hydration 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/plugins/use-hydration
+* @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 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 resume() {
-		isPaused.value = false;
-		setup();
+	function isTokenAlias(value) {
+		return /* @__PURE__ */ isObject(value) && "$value" in value;
 	}
-	function stop() {
-		cleanup();
+	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;
 	}
-	onScopeDispose(stop, true);
 	return {
-		isActive: shallowReadonly(isActive),
-		isPaused: shallowReadonly(isPaused),
-		pause,
-		resume,
-		stop
+		...registry,
+		resolve,
+		isAlias,
+		get size() {
+			return registry.size;
+		}
 	};
 }
 /**
-* A convenience composable that uses the Resize Observer API to track an
-* element's size.
+* Creates a new token context.
 *
-* @param target The element to observe.
-* @returns An object with the element's width and height.
+* @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.
 *
-* @see https://0.vuetifyjs.com/composables/system/use-resize-observer#use-element-size
+* @see https://0.vuetifyjs.com/composables/registration/use-tokens
 *
 * @example
 * ```ts
-* import { ref, watchEffect } from 'vue'
-* import { useElementSize } from '@vuetify/v0'
-*
-* const box = ref<HTMLElement>()
-* const { width, height } = useElementSize(box)
+* import { createTokensContext } from '@vuetify/v0'
 *
-* // Width and height are reactive refs
-* watchEffect(() => {
-*   console.log('Box size:', width.value, 'x', height.value)
+* 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;
-		}
-	}, { immediate: true });
-	function pause() {
-		width.value = 0;
-		height.value = 0;
-		_pause();
+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 {
-		width,
-		height,
-		isActive,
-		isPaused,
-		pause,
-		resume,
-		stop
-	};
+	return createTrinity(useTokensContext, provideTokensContext, context);
 }
-
-//#endregion
-//#region src/composables/useOverflow/index.ts
 /**
-* @module useOverflow
-*
-* @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.
-*
-* 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.
+* Returns the current tokens instance.
 *
-* 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 overflow context for computing how many items fit in a container.
+* @param namespace The namespace for the tokens context. Defaults to `'v0:tokens'`.
+* @returns The current tokens instance.
 *
-* @param options Configuration options
-* @returns Overflow context with container ref, capacity, and measurement functions
+* @see https://0.vuetifyjs.com/composables/registration/use-tokens
 *
-* @example Variable-width mode (Breadcrumbs)
+* @example
 * ```vue
-* <script lang="ts" setup>
-*   import { useTemplateRef } from 'vue'
-*   import { createOverflow } from '@vuetify/v0'
+* <script setup lang="ts">
+*   import { useTokens } from '@vuetify/v0'
 *
-*   const containerRef = useTemplateRef('container')
-*   const overflow = createOverflow({
-*     container: containerRef,
-*     gap: 8,
-*     reserved: 40,
-*   })
+*   const tokens = useTokens()
 * <\/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>
-* ```
-*
-* @example Uniform-width mode (Pagination)
-* ```ts
-* const overflow = createOverflow({
-*   container: () => atom.value?.element,
-*   itemWidth: buttonWidth,
-*   reserved: () => buttonWidth.value * 4,
-* })
 * ```
 */
-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;
+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;
 			}
-			return;
+			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
+			});
 		}
-		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 reset() {
-		widths.value = /* @__PURE__ */ new Map();
+	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;
 	}
-	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++;
+	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
+* Internationalization (i18n) composable with adapter pattern for message translation.
+*
+* 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
+*
+* Integrates with createSingle for locale selection and useTokens for message resolution.
+*/
+/**
+* Creates a new locale instance.
+*
+* @param options The options for the locale instance.
+* @template Z The type of the locale ticket.
+* @template E The type of the locale context.
+* @returns A new locale instance.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-locale
+*/
+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 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 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);
+}
+/**
+* Creates a new locale plugin.
+*
+* @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.
+*
+* @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 overflow context from dependency injection.
-*
-* @param namespace The namespace for the overflow context. Defaults to `v0:overflow`.
-* @returns The current overflow context.
-*
-* @example
-* ```vue
-* <script lang="ts" setup>
-*   import { useOverflow } from '@vuetify/v0'
+* 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 useOverflow(namespace = "v0:overflow") {
-	return useContext(namespace);
+function useLocale(namespace = "v0:locale") {
+	const fallback = createLocaleFallback();
+	if (!getCurrentInstance()) return fallback;
+	try {
+		return useContext(namespace, fallback);
+	} catch {
+		return fallback;
+	}
 }
 
 //#endregion
-//#region src/composables/usePagination/index.ts
+//#region src/composables/useHydration/index.ts
 /**
-* @module usePagination
+* @module useHydration
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-hydration
 *
 * @remarks
-* Lightweight pagination composable for navigating through pages.
+* SSR hydration state management composable.
 *
 * 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
+* - Hydration state detection (browser vs SSR)
+* - Root component detection
+* - Readonly hydration state refs
+* - Plugin installation support
+* - Perfect for hydration-safe rendering
 *
-* Unlike registry-based composables, pagination tracks a single number
-* within a range, making it efficient for large page counts.
+* Essential for composables that need to behave differently during SSR vs client-side.
 */
 /**
-* Creates a pagination instance.
+* Creates a new hydration instance.
 *
-* @param options The options for the pagination instance.
-* @returns A pagination context with navigation methods.
+* @returns A new hydration instance.
+*
+* @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 { createHydration } 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
+* const hydration = createHydration()
+* console.log(hydration.isHydrated.value) // false
+* hydration.hydrate()
+* console.log(hydration.isHydrated.value) // true
 * ```
 */
-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 createHydration() {
+	const isHydrated = shallowRef(false);
+	function hydrate() {
+		isHydrated.value = true;
 	}
 	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;
-		}
+		isHydrated: shallowReadonly(isHydrated),
+		hydrate
+	};
+}
+function createFallbackHydration() {
+	return {
+		isHydrated: shallowReadonly(shallowRef(true)),
+		hydrate: () => {}
 	};
 }
 /**
-* Creates a pagination context for dependency injection.
+* Creates a new hydration context trinity.
+*
+* @param options Options for creating the hydration context.
+* @template E The type of the hydration context.
+* @returns A new hydration context trinity.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-hydration
+*
+* @example
+* ```ts
+* import { createHydrationContext } 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.
+*
+* @param options The options for the hydration plugin.
+* @template E The type of the hydration context.
+* @returns A new hydration plugin.
 *
-* @param options The options including namespace.
-* @returns A trinity: [usePagination, providePagination, defaultContext]
+* @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
-	});
-	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;
+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();
+	});
+	function cleanup() {
+		if (observer.value) {
+			observer.value.disconnect();
+			observer.value = void 0;
 		}
-	};
-}
-/**
-* Creates a new single selection context.
-*
-* @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/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);
+	function pause() {
+		isPaused.value = true;
+		observer.value?.disconnect();
+	}
+	function resume() {
+		isPaused.value = false;
+		setup();
+	}
+	function stop() {
+		cleanup();
+		observer.value = null;
+	}
+	onScopeDispose(stop, true);
+	return {
+		isActive: shallowReadonly(isActive),
+		isPaused: shallowReadonly(isPaused),
+		pause,
+		resume,
+		stop
+	};
 }
 /**
-* Returns the current single selection instance.
+* A convenience composable that uses the Resize Observer API to track an
+* element's size.
 *
-* @param namespace The namespace for the single selection context. Defaults to `'v0:single'`.
-* @returns The current single selection instance.
+* @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
-* ```vue
-* <script setup lang="ts">
-*   import { useSingle } from '@vuetify/v0'
+* ```ts
+* import { ref, watchEffect } from 'vue'
+* import { useElementSize } from '@vuetify/v0'
 *
-*   const tabs = useSingle()
-* <\/script>
+* const box = ref<HTMLElement>()
+* const { width, height } = useElementSize(box)
 *
-* <template>
-*   <div>
-*     <p>Selected: {{ tabs.selectedId }}</p>
-*   </div>
-* </template>
+* // Width and height are reactive refs
+* watchEffect(() => {
+*   console.log('Box size:', width.value, 'x', height.value)
+* })
 * ```
 */
-function useSingle(namespace = "v0:single") {
-	return useContext(namespace);
+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 {
+		width,
+		height,
+		isActive,
+		isPaused,
+		pause,
+		resume,
+		stop
+	};
 }
 
 //#endregion
-//#region src/composables/useTokens/index.ts
+//#region src/composables/useOverflow/index.ts
 /**
-* @module useTokens
-*
-* @see https://0.vuetifyjs.com/composables/registration/use-tokens
+* @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;
+		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 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);
 			}
-			if (/* @__PURE__ */ isUndefined(current)) {
-				logger.warn(`Path not found inside "${clean}": ${segments.join(".")}`);
-				cache.set(cacheKey, void 0);
-				return;
+			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++;
 			}
-			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;
-		}
+			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);
+	return createTrinity(useOverflowContext, provideOverflowContext, context);
 }
 /**
-* Returns the current tokens instance.
-*
-* @param namespace The namespace for the tokens context. Defaults to `'v0:tokens'`.
-* @returns The current tokens instance.
+* 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
-*/
-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);
+* @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 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
@@ -3171,4 +3189,4 @@ function useStep(namespace = "v0:step") {
 }
 
 //#endregion
-export { createGroupContext as A, createLogger as B, useResizeObserver as C, createHydrationPlugin as D, createHydrationContext as E, createSelection as F, PinoLoggerAdapter as G, createLoggerPlugin as H, createSelectionContext as I, createTrinity as J, ConsolaLoggerAdapter as K, useSelection as L, useProxyRegistry as M, useProxyModel as N, useHydration as O, toArray as P, createRegistryContext as R, useElementSize as S, createHydration as T, useLogger as U, createLoggerContext as V, Vuetify0LoggerAdapter as W, provideContext as X, createContext as Y, useContext as Z, createPaginationContext as _, createLocaleContext as a, createOverflowContext as b, useLocale as c, createTokensContext as d, useTokens as f, createPagination as g, useSingle as h, createLocale as i, useGroup as j, createGroup as k, Vuetify0LocaleAdapter as l, createSingleContext as m, createStepContext as n, createLocaleFallback as o, createSingle as p, createPlugin as q, useStep as r, createLocalePlugin as s, createStep as t, createTokens as u, usePagination as v, createFallbackHydration as w, useOverflow as x, createOverflow as y, useRegistry as z };
+export { createGroupContext as A, createLogger as B, createTokens as C, createSingleContext as D, createSingle as E, createSelection as F, PinoLoggerAdapter as G, createLoggerPlugin as H, createSelectionContext as I, createTrinity as J, ConsolaLoggerAdapter as K, useSelection as L, useProxyRegistry as M, useProxyModel as N, useSingle as O, toArray as P, createRegistryContext as R, Vuetify0LocaleAdapter as S, useTokens as T, useLogger as U, createLoggerContext as V, Vuetify0LoggerAdapter as W, provideContext as X, createContext as Y, useContext as Z, createLocale as _, createPaginationContext as a, createLocalePlugin as b, createOverflowContext as c, useResizeObserver as d, createFallbackHydration as f, useHydration as g, createHydrationPlugin as h, createPagination as i, useGroup as j, createGroup as k, useOverflow as l, createHydrationContext as m, createStepContext as n, usePagination as o, createHydration as p, createPlugin as q, useStep as r, createOverflow as s, createStep as t, useElementSize as u, createLocaleContext as v, createTokensContext as w, useLocale as x, createLocaleFallback as y, useRegistry as z };