@vuetify/v0 1.0.0-beta.2 → 1.0.0-beta.4

package/dist/browser/index.js

@@ -135,7 +135,7 @@ const SUPPORTS_MATCH_MEDIA = IN_BROWSER && "matchMedia" in window && typeof wind
 const SUPPORTS_OBSERVER = IN_BROWSER && "ResizeObserver" in window;
 const SUPPORTS_INTERSECTION_OBSERVER = IN_BROWSER && "IntersectionObserver" in window;
 const SUPPORTS_MUTATION_OBSERVER = IN_BROWSER && "MutationObserver" in window;
-const version = "1.0.0-beta.2";
+const version = "1.0.0-beta.4";
 /* v8 ignore next -- build-time constant, __DEV__ short-circuits in tests */
 const __LOGGER_ENABLED__ = false;
 //#endregion
@@ -478,12 +478,12 @@ function isPlainObject(value) {
 /* @__NO_SIDE_EFFECTS__ */
 function mergeDeep(target, ...sources) {
 	const out = {};
-	for (const key in target) if (Object.prototype.hasOwnProperty.call(target, key)) out[key] = target[key];
+	for (const key in target) if (Object.hasOwn(target, key)) out[key] = target[key];
 	for (const source of sources) {
 		if (!/* @__PURE__ */ isObject(source)) continue;
 		for (const key in source) {
 			if (UNSAFE_KEYS.has(key)) continue;
-			if (!Object.prototype.hasOwnProperty.call(source, key)) continue;
+			if (!Object.hasOwn(source, key)) continue;
 			const sourceValue = source[key];
 			if (/* @__PURE__ */ isUndefined(sourceValue)) continue;
 			const targetValue = out[key];
@@ -649,6 +649,7 @@ var V0Error = class extends Error {
 	seed;
 	variant;
 	adapter;
+	prefix;
 	constructor(message, details) {
 		const { cause, ...rest } = details;
 		super(message, /* @__PURE__ */ isUndefined(cause) ? void 0 : { cause });
@@ -1188,13 +1189,15 @@ function createPluginContext(defaultNamespace, factory, config) {
 	}
 	function createXPlugin(_options = {}) {
 		const { namespace = defaultNamespace, persist: shouldPersist, ...options } = _options;
-		const [, provide, context] = createXContext({
-			...options,
-			namespace
-		});
+		let context;
 		return createPlugin({
 			namespace,
 			provide: (app) => {
+				const [, provide, ctx] = createXContext({
+					...options,
+					namespace
+				});
+				context = ctx;
 				provide(context, app);
 				if (shouldPersist && config?.restore) {
 					const storage = getPersistedStorage();
@@ -1204,12 +1207,13 @@ function createPluginContext(defaultNamespace, factory, config) {
 				}
 			},
 			setup: config?.setup || shouldPersist ? (app) => {
-				config?.setup?.(context, app, options);
+				const ctx = context;
+				config?.setup?.(ctx, app, options);
 				if (shouldPersist && config?.persist) {
 					const storage = getPersistedStorage();
 					const key = deriveKey(namespace);
 					const stored = storage.get(key);
-					const stop = watch(() => config.persist(context), (val) => {
+					const stop = watch(() => config.persist(ctx), (val) => {
 						stored.value = val;
 					});
 					app.onUnmount(stop);
@@ -1699,7 +1703,7 @@ function createRegistry(options) {
 			...patch,
 			id
 		});
-		const hasValue = Object.prototype.hasOwnProperty.call(patch, "value");
+		const hasValue = Object.hasOwn(patch, "value");
 		let value = existing.value;
 		let valueIsIndex = existing.valueIsIndex;
 		if (hasValue) {
@@ -2184,7 +2188,7 @@ function createModel(_options = {}) {
 		if (!toValue(multiple)) selectedIds.clear();
 		if (/* @__PURE__ */ isUndefined(value)) return;
 		const id = registry.browse(toRaw(value))?.values().next().value;
-		if (!/* @__PURE__ */ isUndefined(id)) selectedIds.add(id);
+		if (!/* @__PURE__ */ isUndefined(id)) select(id);
 	}
 	function register(registration = {}) {
 		const id = registration.id ?? /* @__PURE__ */ useId();
@@ -2377,7 +2381,12 @@ function createSelection(_options = {}) {
 		}
 		if (isMultiple) {
 			for (const id of currentIds) if (!targetIds.has(id)) unselect(id);
-			for (const id of targetIds) if (!currentIds.has(id)) model.selectedIds.add(id);
+			for (const id of targetIds) {
+				if (currentIds.has(id)) continue;
+				const ticket = model.get(id);
+				if (ticket && toValue(ticket.disabled)) continue;
+				model.selectedIds.add(id);
+			}
 		} else {
 			const next = targetIds.values().next().value;
 			const last = currentIds.values().next().value;
@@ -2767,7 +2776,7 @@ function createTokens(tokens = {}, options = {}) {
 		if (segments.length > 0) {
 			if (isTokenAlias(current)) current = current.$value;
 			for (const segment of segments) {
-				if (!/* @__PURE__ */ isObject(current) || !(segment in current)) {
+				if (!/* @__PURE__ */ isObject(current) || UNSAFE_KEYS.has(segment) || !Object.prototype.hasOwnProperty.call(current, segment)) {
 					current = void 0;
 					break;
 				}
@@ -2902,7 +2911,7 @@ function flatten(tokens, prefix = "", flat = false) {
 		const { tokens: currentTokens, prefix: currentPrefix, flat } = stack.pop();
 		const meta = {};
 		for (const k in currentTokens) {
-			if (!Object.prototype.hasOwnProperty.call(currentTokens, k)) continue;
+			if (!Object.hasOwn(currentTokens, k)) continue;
 			if (k.startsWith("$")) meta[k] = currentTokens[k];
 		}
 		if (Object.keys(meta).length > 0 && currentPrefix) flattened.push({
@@ -2910,7 +2919,7 @@ function flatten(tokens, prefix = "", flat = false) {
 			value: meta
 		});
 		for (const key in currentTokens) {
-			if (!Object.prototype.hasOwnProperty.call(currentTokens, key)) continue;
+			if (!Object.hasOwn(currentTokens, key)) continue;
 			if (UNSAFE_KEYS.has(key)) continue;
 			if (key.startsWith("$")) continue;
 			const value = currentTokens[key];
@@ -2929,7 +2938,7 @@ function flatten(tokens, prefix = "", flat = false) {
 				});
 				const inner = value.$value;
 				if (/* @__PURE__ */ isObject(inner) && !flat) for (const innerKey in inner) {
-					if (!Object.prototype.hasOwnProperty.call(inner, innerKey)) continue;
+					if (!Object.hasOwn(inner, innerKey)) continue;
 					if (UNSAFE_KEYS.has(innerKey)) continue;
 					if (innerKey.startsWith("$")) continue;
 					const child = inner[innerKey];
@@ -2984,21 +2993,27 @@ var V0LocaleAdapter = class extends LocaleAdapter {
 		this.context = context;
 	}
 	t(key, ...params) {
-		const locale = this.context.selectedId.value;
-		if (!locale) return this.interpolate(key, params);
-		const message = this.context.tokens.get(`${locale}.${key}`)?.value;
-		if (/* @__PURE__ */ isString(message)) return this.interpolate(this.resolve(locale, message), params);
-		if (this.context.fallbackLocale) {
-			const fbMessage = this.context.tokens.get(`${this.context.fallbackLocale}.${key}`)?.value;
-			if (/* @__PURE__ */ isString(fbMessage)) return this.interpolate(this.resolve(this.context.fallbackLocale, fbMessage), params);
-		}
-		return this.interpolate(key, params);
+		const found = this.lookup(key, params);
+		return /* @__PURE__ */ isUndefined(found) ? this.interpolate(key, params) : found;
+	}
+	ti(key, ...params) {
+		return this.lookup(key, params);
 	}
 	n(value) {
 		const locale = this.context.selectedId.value;
 		if (!IN_BROWSER || !locale) return value.toString();
 		return new Intl.NumberFormat(String(locale)).format(value);
 	}
+	lookup(key, params) {
+		const locale = this.context.selectedId.value;
+		if (!locale) return void 0;
+		const message = this.context.tokens.get(`${locale}.${key}`)?.value;
+		if (/* @__PURE__ */ isString(message)) return this.interpolate(this.resolve(locale, message), params);
+		if (this.context.fallbackLocale) {
+			const fb = this.context.tokens.get(`${this.context.fallbackLocale}.${key}`)?.value;
+			if (/* @__PURE__ */ isString(fb)) return this.interpolate(this.resolve(this.context.fallbackLocale, fb), params);
+		}
+	}
 	resolve(locale, str, visited = /* @__PURE__ */ new Set()) {
 		return str.replace(/{([a-zA-Z0-9.\-_]+)}/g, (match, key) => {
 			const [prefix, ...rest] = key.split(".");
@@ -3084,6 +3099,9 @@ function createLocale(_options = {}) {
 	function t(key, ...params) {
 		return adapter.t(key, ...params);
 	}
+	function ti(key, ...params) {
+		return adapter.ti(key, ...params);
+	}
 	function n(value) {
 		return adapter.n(value);
 	}
@@ -3095,6 +3113,7 @@ function createLocale(_options = {}) {
 	return {
 		...registry,
 		t,
+		ti,
 		n,
 		register,
 		get size() {
@@ -3106,6 +3125,7 @@ function createLocaleFallback() {
 	return {
 		size: 0,
 		t: (key) => key,
+		ti: () => void 0,
 		n: String
 	};
 }
@@ -3134,7 +3154,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
 			isOpen: context.isOpen.value,
 			attrs: {
 				"type": __props.as === "button" ? "button" : void 0,
-				"aria-label": locale.t("AlertDialog.close"),
+				"aria-label": locale.ti("AlertDialog.close") ?? "Close",
 				"onClick": onClick
 			}
 		}));
@@ -3475,6 +3495,19 @@ function useClickOutside(target, handler, options = {}) {
 		});
 	}
 	/**
+	* Check if the event target is a strict descendant of any target element.
+	*
+	* @remarks Used by bounds mode so content rendered *inside* the element but
+	* positioned outside its box (e.g. a top-layer overlay teleported into a
+	* native `<dialog>`) is not treated as an outside click. A backdrop click has
+	* `target === el`, so it is not a strict descendant and still counts as outside.
+	*/
+	function isDescendant(eventTarget) {
+		/* v8 ignore next -- defensive guard, callers always pass an Element */
+		if (!(eventTarget instanceof Node)) return false;
+		return getTargets().some((el) => el !== eventTarget && el.contains(eventTarget));
+	}
+	/**
 	* Validate that the target is still in the DOM.
 	*/
 	function isValidTarget(eventTarget) {
@@ -3514,7 +3547,7 @@ function useClickOutside(target, handler, options = {}) {
 			const dy = Math.abs(event.clientY - startPosition.y);
 			if (dx >= touchScrollThreshold || dy >= touchScrollThreshold) return;
 		}
-		if ((bounds ? startedOutsideBounds && isOutsideBounds(event.clientX, event.clientY) : isOutside(pointerdownTarget) && isOutside(pointerupTarget)) && !shouldIgnore(path)) handler(event);
+		if ((bounds ? startedOutsideBounds && isOutsideBounds(event.clientX, event.clientY) && !isDescendant(pointerdownTarget) && !isDescendant(pointerupTarget) : isOutside(pointerdownTarget) && isOutside(pointerupTarget)) && !shouldIgnore(path)) handler(event);
 	}
 	/**
 	* Handle window blur - detect focus moving to iframe.
@@ -3571,6 +3604,63 @@ function useClickOutside(target, handler, options = {}) {
 	};
 }
 //#endregion
+//#region src/composables/toElement/index.ts
+/**
+* @module toElement
+*
+* @see https://0.vuetifyjs.com/composables/transformers/to-element
+*
+* @remarks
+* Resolves various element reference types to a DOM Element.
+*
+* Accepts refs, getters, raw DOM elements, or Vue component instances
+* and normalizes them to a plain Element. Uses structural typing to
+* avoid cross-version Vue Ref incompatibilities.
+*
+* @example
+* ```ts
+* import { shallowRef } from 'vue'
+* import { toElement } from '@vuetify/v0'
+*
+* const el = shallowRef<HTMLElement | null>(null)
+* const resolved = toElement(el) // HTMLElement | undefined
+* ```
+*/
+/**
+* Resolves a {@link MaybeElementRef} to a DOM Element or undefined.
+*
+* Handles:
+* - `Ref<Element>`, `ShallowRef<HTMLElement>`, getter functions
+* - Vue component instances (extracts `$el`)
+* - Raw DOM elements (pass-through)
+* - null/undefined (returns undefined)
+*
+* @param target The element ref, getter, or raw value to resolve
+* @returns The resolved DOM Element, or undefined if not available
+*
+* @see https://0.vuetifyjs.com/composables/transformers/to-element
+*
+* @example
+* ```ts
+* import { toElement } from '@vuetify/v0'
+*
+* const el = shallowRef<HTMLElement | null>(null)
+* toElement(el) // HTMLElement | undefined
+*
+* const component = ref<ComponentPublicInstance>()
+* toElement(component) // Element | undefined (from $el)
+* ```
+*/
+/* @__NO_SIDE_EFFECTS__ */
+function toElement(target) {
+	if (!target) return void 0;
+	if (/* @__PURE__ */ isElement(target)) return target;
+	const raw = /* @__PURE__ */ isFunction(target) ? target() : /* @__PURE__ */ isObject(target) && "value" in target ? target.value : target;
+	if (!raw) return void 0;
+	if (/* @__PURE__ */ isElement(raw)) return raw;
+	if (/* @__PURE__ */ isObject(raw) && "$el" in raw) return raw.$el;
+}
+//#endregion
 //#region src/composables/useStack/index.ts
 /**
 * @module useStack
@@ -3627,23 +3717,31 @@ function createStack(_options = {}) {
 		...options,
 		multiple: true
 	});
-	const isActive = toRef(() => selection.selectedIds.size > 0);
-	const top = toRef(() => {
-		const ids = Array.from(selection.selectedIds);
-		if (ids.length === 0) return void 0;
-		return selection.get(ids.at(-1));
-	});
+	function selectedScrims() {
+		return Array.from(selection.selectedIds).map((id) => selection.get(id)).filter((ticket) => !!ticket && ticket.scrim.value !== false);
+	}
+	const isActive = toRef(() => selectedScrims().length > 0);
+	const top = toRef(() => selectedScrims().at(-1));
 	const scrimZIndex = toRef(() => {
 		const ticket = top.value;
 		return ticket ? ticket.zIndex.value - 1 : 0;
 	});
-	const isBlocking = toRef(() => top.value?.blocking ?? false);
+	const isBlocking = toRef(() => toValue(top.value?.blocking) ?? false);
+	const topElement = toRef(() => {
+		const scrims = selectedScrims();
+		for (let i = scrims.length - 1; i >= 0; i--) {
+			const el = /* @__PURE__ */ toElement(toValue(scrims[i].el));
+			if (el) return el;
+		}
+		return null;
+	});
 	function ids() {
 		return Array.from(selection.selectedIds);
 	}
 	function register(input = {}) {
 		const id = input.id ?? /* @__PURE__ */ useId();
-		const blocking = input.blocking ?? false;
+		const blocking = toRef(() => toValue(input.blocking) ?? false);
+		const scrim = toRef(() => toValue(input.scrim) ?? true);
 		const onDismiss = input.onDismiss;
 		const zIndex = toRef(() => {
 			const position = ids().indexOf(id);
@@ -3656,17 +3754,18 @@ function createStack(_options = {}) {
 			return list.at(-1) === id;
 		});
 		function dismiss() {
-			if (blocking) return;
+			if (blocking.value) return;
 			onDismiss?.();
 			selection.unselect(id);
 		}
 		const ticket = selection.register({
+			...input,
 			blocking,
+			scrim,
 			onDismiss,
 			zIndex,
 			globalTop,
 			dismiss,
-			...input,
 			id
 		});
 		if (/* @__PURE__ */ instanceExists()) onScopeDispose(() => {
@@ -3681,6 +3780,7 @@ function createStack(_options = {}) {
 		top,
 		scrimZIndex,
 		isBlocking,
+		topElement,
 		get size() {
 			return selection.size;
 		}
@@ -3747,6 +3847,7 @@ function createStackPlugin(_options = {}) {
 }
 let fallbackStack;
 function getStackFallback() {
+	if (!IN_BROWSER) return createStack();
 	if (!fallbackStack) fallbackStack = createStack();
 	return fallbackStack;
 }
@@ -3938,7 +4039,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
 		const contentRef = useTemplateRef("content");
 		const ticket = useStack().register({
 			onDismiss: () => context.close(),
-			blocking: __props.blocking
+			blocking: () => __props.blocking,
+			el: () => contentRef.value?.element
 		});
 		watch(context.isOpen, (isOpen) => {
 			if (isOpen) ticket.select();
@@ -4364,63 +4466,6 @@ const [createHydrationContext, createHydrationPlugin, useHydration] = createPlug
 	}
 });
 //#endregion
-//#region src/composables/toElement/index.ts
-/**
-* @module toElement
-*
-* @see https://0.vuetifyjs.com/composables/transformers/to-element
-*
-* @remarks
-* Resolves various element reference types to a DOM Element.
-*
-* Accepts refs, getters, raw DOM elements, or Vue component instances
-* and normalizes them to a plain Element. Uses structural typing to
-* avoid cross-version Vue Ref incompatibilities.
-*
-* @example
-* ```ts
-* import { shallowRef } from 'vue'
-* import { toElement } from '@vuetify/v0'
-*
-* const el = shallowRef<HTMLElement | null>(null)
-* const resolved = toElement(el) // HTMLElement | undefined
-* ```
-*/
-/**
-* Resolves a {@link MaybeElementRef} to a DOM Element or undefined.
-*
-* Handles:
-* - `Ref<Element>`, `ShallowRef<HTMLElement>`, getter functions
-* - Vue component instances (extracts `$el`)
-* - Raw DOM elements (pass-through)
-* - null/undefined (returns undefined)
-*
-* @param target The element ref, getter, or raw value to resolve
-* @returns The resolved DOM Element, or undefined if not available
-*
-* @see https://0.vuetifyjs.com/composables/transformers/to-element
-*
-* @example
-* ```ts
-* import { toElement } from '@vuetify/v0'
-*
-* const el = shallowRef<HTMLElement | null>(null)
-* toElement(el) // HTMLElement | undefined
-*
-* const component = ref<ComponentPublicInstance>()
-* toElement(component) // Element | undefined (from $el)
-* ```
-*/
-/* @__NO_SIDE_EFFECTS__ */
-function toElement(target) {
-	if (!target) return void 0;
-	if (/* @__PURE__ */ isElement(target)) return target;
-	const raw = /* @__PURE__ */ isFunction(target) ? target() : /* @__PURE__ */ isObject(target) && "value" in target ? target.value : target;
-	if (!raw) return void 0;
-	if (/* @__PURE__ */ isElement(raw)) return raw;
-	if (/* @__PURE__ */ isObject(raw) && "$el" in raw) return raw.$el;
-}
-//#endregion
 //#region src/composables/createObserver/index.ts
 /**
 * @module createObserver
@@ -5348,8 +5393,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
 		});
 		const count = toRef(() => hidden.value.length);
 		const slotProps = toRef(() => {
-			const translated = locale.t(LABEL_KEY, { count: count.value });
-			const ariaLabel = translated === LABEL_KEY ? `+${count.value}` : translated;
+			const ariaLabel = locale.ti(LABEL_KEY, { count: count.value }) ?? `+${count.value} more`;
 			return {
 				count: count.value,
 				hidden: hidden.value,
@@ -6113,7 +6157,7 @@ const _sfc_main$21 = /* @__PURE__ */ defineComponent({
 			prev: breadcrumbs.prev,
 			select: breadcrumbs.select,
 			attrs: {
-				"aria-label": __props.label ?? locale.t("Breadcrumbs.label"),
+				"aria-label": __props.label ?? locale.ti("Breadcrumbs.label") ?? "Breadcrumbs",
 				"role": __props.as === "nav" ? void 0 : "navigation"
 			}
 		}));
@@ -6997,7 +7041,7 @@ const _sfc_main$27 = /* @__PURE__ */ defineComponent({
 			"aria-disabled": isDisabled.value || isPassive.value,
 			"aria-busy": isLoading.value ? true : void 0,
 			"aria-pressed": group ? isSelected.value : void 0,
-			"aria-label": __props.ariaLabel || (isSolo.value ? locale.t("Button.label") : void 0),
+			"aria-label": __props.ariaLabel || (!__props.renderless && isSolo.value ? locale.ti("Button.label") ?? "Button" : void 0),
 			"tabindex": isDisabled.value ? -1 : 0,
 			"data-loading": isLoading.value ? true : void 0,
 			"data-passive": isPassive.value ? true : void 0,
@@ -7590,7 +7634,7 @@ const _sfc_main$34 = /* @__PURE__ */ defineComponent({
 			attrs: {
 				"role": "region",
 				"aria-roledescription": "carousel",
-				"aria-label": __props.label ?? locale.t("Carousel.label"),
+				"aria-label": __props.label ?? locale.ti("Carousel.label") ?? "Carousel",
 				"aria-disabled": toValue(step.disabled),
 				"data-disabled": toValue(step.disabled) || void 0
 			}
@@ -7849,10 +7893,10 @@ const _sfc_main$29 = /* @__PURE__ */ defineComponent({
 				"id": `${carousel.rootId}-slide-${ticket.index}`,
 				"role": "group",
 				"aria-roledescription": "slide",
-				"aria-label": locale.t("Carousel.slide", {
+				"aria-label": locale.ti("Carousel.slide", {
 					current: ticket.index + 1,
 					size: carousel.size
-				}),
+				}) ?? `Slide ${ticket.index + 1} of ${carousel.size}`,
 				"aria-hidden": isActive.value ? void 0 : true,
 				"data-selected": toValue(ticket.isSelected) || void 0,
 				"data-active": isActive.value || void 0,
@@ -7910,7 +7954,7 @@ const _sfc_main$32 = /* @__PURE__ */ defineComponent({
 			isAtEdge: isAtEdge.value,
 			attrs: {
 				"type": __props.as === "button" ? "button" : void 0,
-				"aria-label": locale.t("Carousel.prev"),
+				"aria-label": locale.ti("Carousel.prev") ?? "Previous slide",
 				"aria-controls": viewportId,
 				"aria-disabled": isDisabled.value,
 				"disabled": __props.as === "button" ? isDisabled.value : void 0,
@@ -7966,7 +8010,7 @@ const _sfc_main$31 = /* @__PURE__ */ defineComponent({
 			isAtEdge: isAtEdge.value,
 			attrs: {
 				"type": __props.as === "button" ? "button" : void 0,
-				"aria-label": locale.t("Carousel.next"),
+				"aria-label": locale.ti("Carousel.next") ?? "Next slide",
 				"aria-controls": viewportId,
 				"aria-disabled": isDisabled.value,
 				"disabled": __props.as === "button" ? isDisabled.value : void 0,
@@ -8069,10 +8113,10 @@ const _sfc_main$28 = /* @__PURE__ */ defineComponent({
 							"tabindex": isSelected ? 0 : -1,
 							"aria-selected": isSelected,
 							"aria-controls": `${carousel.rootId}-slide-${i}`,
-							"aria-label": locale.t("Carousel.indicator", {
+							"aria-label": locale.ti("Carousel.indicator", {
 								current: i + 1,
 								size
-							}),
+							}) ?? `Go to slide ${i + 1} of ${size}`,
 							"data-selected": isSelected || void 0,
 							"data-active": isActive || void 0,
 							"onClick"() {
@@ -8084,7 +8128,7 @@ const _sfc_main$28 = /* @__PURE__ */ defineComponent({
 				}),
 				attrs: {
 					"role": "tablist",
-					"aria-label": __props.label ?? locale.t("Carousel.indicators"),
+					"aria-label": __props.label ?? locale.ti("Carousel.indicators") ?? "Carousel indicators",
 					"aria-orientation": carousel.orientation.value
 				}
 			};
@@ -8143,8 +8187,8 @@ const _sfc_main$33 = /* @__PURE__ */ defineComponent({
 					"aria-valuenow": percent,
 					"aria-valuemin": 0,
 					"aria-valuemax": 100,
-					"aria-valuetext": locale.t("Carousel.progress", { percent }),
-					"aria-label": locale.t("Carousel.progressLabel"),
+					"aria-valuetext": locale.ti("Carousel.progress", { percent }) ?? `${percent}% complete`,
+					"aria-label": locale.ti("Carousel.progressLabel") ?? "Carousel progress",
 					"data-state": state.value,
 					"style": { width: `${percent}%` }
 				}
@@ -8195,10 +8239,10 @@ const _sfc_main$30 = /* @__PURE__ */ defineComponent({
 			if (/* @__PURE__ */ isUndefined(prevIndex)) return;
 			clearTimeout(pending);
 			pending = setTimeout(() => {
-				text.value = locale.t("Carousel.liveRegion", {
+				text.value = locale.ti("Carousel.liveRegion", {
 					current: index + 1,
 					size: carousel.size
-				});
+				}) ?? `Slide ${index + 1} of ${carousel.size}`;
 			}, 100);
 		});
 		onBeforeUnmount(() => clearTimeout(pending));
@@ -9412,6 +9456,7 @@ function useDelay(callback, options = {}) {
 function usePopover(options = {}) {
 	const { id: _id, positionArea = "bottom", positionTry = "most-width bottom", openDelay, closeDelay } = options;
 	const id = _id ?? /* @__PURE__ */ useId();
+	const anchor = `--${String(id).replace(/[^a-zA-Z0-9_-]/g, "")}`;
 	const isOpen = options.isOpen ?? shallowRef(false);
 	const delay = useDelay((direction) => {
 		isOpen.value = direction;
@@ -9432,7 +9477,7 @@ function usePopover(options = {}) {
 	function cancel() {
 		delay.stop();
 	}
-	const anchorStyles = toRef(() => ({ anchorName: `--${id}` }));
+	const anchorStyles = toRef(() => ({ anchorName: anchor }));
 	const contentAttrs = toRef(() => ({
 		id,
 		popover: ""
@@ -9442,7 +9487,7 @@ function usePopover(options = {}) {
 		"margin": "unset",
 		"inset-area": positionArea,
 		"position-area": positionArea,
-		"position-anchor": `--${id}`,
+		"position-anchor": anchor,
 		"position-try-fallbacks": positionTry
 	}));
 	/* v8 ignore start -- browser popover API */
@@ -11013,7 +11058,7 @@ const _sfc_main$55 = /* @__PURE__ */ defineComponent({
 			isOpen: context.isOpen.value,
 			attrs: {
 				"type": __props.as === "button" ? "button" : void 0,
-				"aria-label": locale.t("Dialog.close"),
+				"aria-label": locale.ti("Dialog.close") ?? "Close",
 				"onClick": onClick
 			}
 		}));
@@ -11053,7 +11098,8 @@ const _sfc_main$56 = /* @__PURE__ */ defineComponent({
 		const contentRef = useTemplateRef("content");
 		const ticket = useStack().register({
 			onDismiss: () => context.close(),
-			blocking: __props.blocking
+			blocking: () => __props.blocking,
+			el: () => contentRef.value?.element
 		});
 		watch(context.isOpen, (isOpen) => {
 			if (isOpen) ticket.select();
@@ -13612,16 +13658,17 @@ function createNumberField(options = {}) {
 		const result = Number(cleaned);
 		return Number.isNaN(result) ? null : result;
 	}
-	function commit() {
-		if (/* @__PURE__ */ isNull(value.value)) return;
-		if (!shouldClamp && (value.value < numeric.min || value.value > numeric.max)) {
+	function commit(next) {
+		const val = arguments.length === 0 ? value.value : next;
+		if (/* @__PURE__ */ isNull(val)) return;
+		if (!shouldClamp && (val < numeric.min || val > numeric.max)) {
 			if (numeric.step > 0 && Number.isFinite(numeric.min)) {
-				const steps = Math.round((value.value - numeric.min) / numeric.step);
+				const steps = Math.round((val - numeric.min) / numeric.step);
 				value.value = numeric.min + steps * numeric.step;
 			}
 			return;
 		}
-		value.value = numeric.snap(value.value);
+		value.value = numeric.snap(val);
 	}
 	return {
 		value,
@@ -13847,7 +13894,7 @@ const _sfc_main$78 = /* @__PURE__ */ defineComponent({
 		function onBlur() {
 			const parsed = root.parse(text.value);
 			root.value.value = parsed;
-			root.commit();
+			root.commit(parsed);
 			root.isFocused.value = false;
 			syncText();
 		}
@@ -13870,7 +13917,7 @@ const _sfc_main$78 = /* @__PURE__ */ defineComponent({
 				Enter: () => {
 					const parsed = root.parse(text.value);
 					root.value.value = parsed;
-					root.commit();
+					root.commit(parsed);
 				}
 			}[e.key];
 			if (!action) return;
@@ -13999,7 +14046,7 @@ const _sfc_main$79 = /* @__PURE__ */ defineComponent({
 			return {
 				"type": "button",
 				"tabindex": -1,
-				"aria-label": locale.t("NumberField.decrement"),
+				"aria-label": locale.ti("NumberField.decrement") ?? "Decrement",
 				"disabled": disabled || void 0,
 				"data-disabled": disabled ? true : void 0,
 				onBlur,
@@ -14140,7 +14187,7 @@ const _sfc_main$82 = /* @__PURE__ */ defineComponent({
 			return {
 				"type": "button",
 				"tabindex": -1,
-				"aria-label": locale.t("NumberField.increment"),
+				"aria-label": locale.ti("NumberField.increment") ?? "Increment",
 				"disabled": disabled || void 0,
 				"data-disabled": disabled ? true : void 0,
 				onBlur,
@@ -14491,23 +14538,20 @@ const _sfc_main$87 = /* @__PURE__ */ defineComponent({
 			reserved: indicatorWidth,
 			reverse: () => __props.priority === "end"
 		});
-		function isVisible(index) {
-			if (__props.disabled) return true;
-			const tickets = registry.values();
-			const ticket = tickets[index];
-			if (!ticket) return true;
-			if (toValue(ticket.disabled)) return true;
+		const hidden = computed(() => {
+			const set = /* @__PURE__ */ new Set();
+			if (__props.disabled) return set;
 			const cap = overflow.capacity.value;
-			if (cap === Infinity) return true;
-			let rank = 0;
-			let total = 0;
-			for (const [i, ticket_] of tickets.entries()) {
-				if (toValue(ticket_.disabled)) continue;
-				if (i === index) rank = total;
-				total++;
-			}
-			if (__props.priority === "end") return rank >= total - cap;
-			return rank < cap;
+			if (cap === Infinity) return set;
+			const tickets = registry.values();
+			const enabled = [];
+			for (const [i, ticket] of tickets.entries()) if (!toValue(ticket.disabled)) enabled.push(i);
+			const total = enabled.length;
+			for (let rank = 0; rank < total; rank++) if (!(__props.priority === "end" ? rank >= total - cap : rank < cap)) set.add(enabled[rank]);
+			return set;
+		});
+		function isVisible(index) {
+			return !hidden.value.has(index);
 		}
 		provideOverflowRoot(__props.namespace, {
 			overflow,
@@ -15082,7 +15126,7 @@ const _sfc_main$94 = /* @__PURE__ */ defineComponent({
 			prev: pagination.prev,
 			select: pagination.select,
 			attrs: {
-				"aria-label": locale.t("Pagination.label"),
+				"aria-label": locale.ti("Pagination.label") ?? "Pagination",
 				"role": __props.as === "nav" ? void 0 : "navigation"
 			}
 		}));
@@ -15179,7 +15223,7 @@ const _sfc_main$89 = /* @__PURE__ */ defineComponent({
 			isDisabled: isDisabled.value,
 			first,
 			attrs: {
-				"aria-label": locale.t("Pagination.first"),
+				"aria-label": locale.ti("Pagination.first") ?? "First page",
 				"aria-disabled": isDisabled.value,
 				"data-disabled": isDisabled.value || void 0,
 				"disabled": __props.as === "button" ? isDisabled.value : void 0,
@@ -15233,7 +15277,7 @@ const _sfc_main$90 = /* @__PURE__ */ defineComponent({
 		}, { immediate: true });
 		const isSelected = toRef(() => pagination.page.value === __props.value);
 		const ariaLabel = toRef(() => {
-			return isSelected.value ? locale.t("Pagination.currentPage", { page: __props.value }) : locale.t("Pagination.goToPage", { page: __props.value });
+			return isSelected.value ? locale.ti("Pagination.currentPage", { page: __props.value }) ?? `Page ${__props.value}, current` : locale.ti("Pagination.goToPage", { page: __props.value }) ?? `Go to page ${__props.value}`;
 		});
 		function select() {
 			if (__props.disabled) return;
@@ -15304,7 +15348,7 @@ const _sfc_main$91 = /* @__PURE__ */ defineComponent({
 			isDisabled: isDisabled.value,
 			last,
 			attrs: {
-				"aria-label": locale.t("Pagination.last"),
+				"aria-label": locale.ti("Pagination.last") ?? "Last page",
 				"aria-disabled": isDisabled.value,
 				"data-disabled": isDisabled.value || void 0,
 				"disabled": __props.as === "button" ? isDisabled.value : void 0,
@@ -15361,7 +15405,7 @@ const _sfc_main$92 = /* @__PURE__ */ defineComponent({
 			isDisabled: isDisabled.value,
 			next,
 			attrs: {
-				"aria-label": locale.t("Pagination.next"),
+				"aria-label": locale.ti("Pagination.next") ?? "Next page",
 				"aria-disabled": isDisabled.value,
 				"data-disabled": isDisabled.value || void 0,
 				"disabled": __props.as === "button" ? isDisabled.value : void 0,
@@ -15418,7 +15462,7 @@ const _sfc_main$93 = /* @__PURE__ */ defineComponent({
 			isDisabled: isDisabled.value,
 			prev,
 			attrs: {
-				"aria-label": locale.t("Pagination.prev"),
+				"aria-label": locale.ti("Pagination.prev") ?? "Previous page",
 				"aria-disabled": isDisabled.value,
 				"data-disabled": isDisabled.value || void 0,
 				"disabled": __props.as === "button" ? isDisabled.value : void 0,
@@ -15462,10 +15506,10 @@ const _sfc_main$95 = /* @__PURE__ */ defineComponent({
 			if (/* @__PURE__ */ isUndefined(prevPage)) return;
 			clearTimeout(pending);
 			pending = setTimeout(() => {
-				text.value = locale.t("Pagination.status", {
+				text.value = locale.ti("Pagination.status", {
 					page,
 					pages: pagination.pages
-				});
+				}) ?? `Page ${page} of ${pagination.pages}`;
 			}, 100);
 		});
 		onBeforeUnmount(() => clearTimeout(pending));
@@ -15764,7 +15808,7 @@ const _sfc_main$96 = /* @__PURE__ */ defineComponent({
 		const context = usePopoverContext();
 		const popovertarget = toRef(() => __props.target ?? context.id);
 		const style = toRef(() => {
-			if (__props.target) return { anchorName: `--${__props.target}` };
+			if (__props.target) return { anchorName: `--${String(__props.target).replace(/[^a-zA-Z0-9_-]/g, "")}` };
 			return context.anchorStyles.value;
 		});
 		const slotProps = toRef(() => ({
@@ -15811,7 +15855,7 @@ const _sfc_main$97 = /* @__PURE__ */ defineComponent({
 				"margin": "unset",
 				"inset-area": __props.positionArea ?? "bottom",
 				"position-area": __props.positionArea ?? "bottom",
-				"position-anchor": `--${__props.id}`,
+				"position-anchor": `--${String(__props.id).replace(/[^a-zA-Z0-9_-]/g, "")}`,
 				"position-try-fallbacks": __props.positionTry ?? "most-width bottom"
 			};
 			return context.contentStyles.value;
@@ -15940,16 +15984,23 @@ const _sfc_main$99 = /* @__PURE__ */ defineComponent({
 		blocking: {
 			type: Boolean,
 			default: false
+		},
+		scrim: {
+			type: Boolean,
+			default: true
 		}
 	},
 	emits: ["close"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
-		const ticket = useStack().register({
-			blocking: __props.blocking,
+		const stack = useStack();
+		const ticket = stack.register({
+			blocking: () => __props.blocking,
+			scrim: () => __props.scrim,
 			onDismiss: () => emit("close")
 		});
 		ticket.select();
+		const target = toRef(() => __props.to === "top-layer" ? stack.topElement.value ?? "body" : __props.to);
 		const slotProps = toRef(() => ({
 			zIndex: ticket.zIndex.value,
 			close: ticket.dismiss
@@ -15957,7 +16008,7 @@ const _sfc_main$99 = /* @__PURE__ */ defineComponent({
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(Teleport, {
 				disabled: __props.disabled,
-				to: __props.to
+				to: target.value
 			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))], 8, ["disabled", "to"]);
 		};
 	}
@@ -17438,10 +17489,10 @@ const _sfc_main$114 = /* @__PURE__ */ defineComponent({
 				"aria-valuenow": rating.value.value,
 				"aria-valuemin": 0,
 				"aria-valuemax": rating.size,
-				"aria-valuetext": locale.t("Rating.valueText", {
+				"aria-valuetext": locale.ti("Rating.valueText", {
 					value: rating.value.value,
 					size: rating.size
-				}),
+				}) ?? `${rating.value.value} of ${rating.size} stars`,
 				"aria-disabled": isDisabled.value ? true : void 0,
 				"aria-readonly": isReadonly.value ? true : void 0,
 				"data-disabled": isDisabled.value ? true : void 0,
@@ -17713,16 +17764,16 @@ const _sfc_main$115 = /* @__PURE__ */ defineComponent({
 	setup(__props) {
 		const attrs = useAttrs();
 		const stack = useStack();
-		const tickets = computed(() => Array.from(stack.selectedItems.value));
+		const tickets = computed(() => Array.from(stack.selectedItems.value).filter((ticket) => ticket.scrim.value !== false));
 		function onDismiss(ticket) {
-			if (!ticket.blocking) ticket.dismiss();
+			if (!ticket.blocking.value) ticket.dismiss();
 		}
 		function getSlotProps(ticket) {
 			const zIndex = ticket.zIndex.value - 1;
 			return {
 				ticket,
 				zIndex,
-				isBlocking: ticket.blocking,
+				isBlocking: ticket.blocking.value,
 				dismiss: () => onDismiss(ticket),
 				attrs: {
 					style: { zIndex },
@@ -19474,8 +19525,12 @@ const _sfc_main$134 = /* @__PURE__ */ defineComponent({
 	__name: "SnackbarPortal",
 	props: {
 		teleport: {
-			type: [String, Boolean],
-			default: "body"
+			type: [
+				String,
+				Object,
+				Boolean
+			],
+			default: "top-layer"
 		},
 		as: { default: "div" },
 		renderless: { type: Boolean }
@@ -19490,6 +19545,7 @@ const _sfc_main$134 = /* @__PURE__ */ defineComponent({
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(_sfc_main$99), {
 				disabled: __props.teleport === false,
+				scrim: false,
 				to: __props.teleport || "body"
 			}, {
 				default: withCtx(({ zIndex }) => [createVNode(unref(_sfc_main$9), mergeProps({
@@ -19587,7 +19643,7 @@ function createQueue(_options = {}) {
 	}
 	function register(registration = {}) {
 		const id = registration.id ?? /* @__PURE__ */ useId();
-		const timeout = Object.prototype.hasOwnProperty.call(registration, "timeout") ? registration.timeout : _timeout;
+		const timeout = Object.hasOwn(registration, "timeout") ? registration.timeout : _timeout;
 		const ticket = {
 			...registration,
 			id,
@@ -20386,7 +20442,7 @@ const _sfc_main$132 = /* @__PURE__ */ defineComponent({
 		}
 		const slotProps = toRef(() => ({ attrs: {
 			"type": __props.as === "button" ? "button" : void 0,
-			"aria-label": locale.t("Snackbar.close"),
+			"aria-label": locale.ti("Snackbar.close") ?? "Dismiss",
 			"onClick": onClick
 		} }));
 		return (_ctx, _cache) => {
@@ -22307,6 +22363,10 @@ var ThemeAdapter = class ThemeAdapter {
 	*/
 	dispose;
 	constructor(prefix) {
+		if (!ThemeAdapter.SAFE_IDENT.test(prefix)) throw new V0Error(`Invalid theme prefix: "${prefix}". Expected an identifier matching ${ThemeAdapter.SAFE_IDENT}.`, {
+			code: "V0_THEME_INVALID_PREFIX",
+			prefix
+		});
 		this.prefix = prefix;
 	}
 	generate(colors, isDark) {
@@ -22347,12 +22407,18 @@ var V0StyleSheetThemeAdapter = class extends ThemeAdapter {
 				this.update(colors, isDark);
 			});
 			if (/* @__PURE__ */ isNull(target)) {
-				this.dispose = stopWatch;
+				this.dispose = () => {
+					stopWatch();
+					this.detach();
+				};
 				return;
 			}
 			const targetEl = target instanceof HTMLElement ? target : /* @__PURE__ */ isString(target) ? document.querySelector(target) : app._container || document.querySelector("#app") || document.body;
 			if (!targetEl) {
-				this.dispose = stopWatch;
+				this.dispose = () => {
+					stopWatch();
+					this.detach();
+				};
 				return;
 			}
 			if (context.selectedId.value) targetEl.dataset.theme = String(context.selectedId.value);
@@ -22363,6 +22429,7 @@ var V0StyleSheetThemeAdapter = class extends ThemeAdapter {
 			this.dispose = () => {
 				stopWatch();
 				stopTheme();
+				this.detach();
 			};
 		} else {
 			const head = app._context?.provides?.usehead ?? app._context?.provides?.head;
@@ -22372,7 +22439,8 @@ var V0StyleSheetThemeAdapter = class extends ThemeAdapter {
 					htmlAttrs: { "data-theme": id ? String(id) : "" },
 					style: [{
 						innerHTML: this.generate(context.colors.value, context.isDark.value),
-						id: this.stylesheetId
+						id: this.stylesheetId,
+						...this.cspNonce ? { nonce: this.cspNonce } : {}
 					}]
 				});
 				if (entry?.dispose) this.dispose = entry.dispose;
@@ -22391,6 +22459,11 @@ var V0StyleSheetThemeAdapter = class extends ThemeAdapter {
 		}
 		this.sheet.replaceSync(styles);
 	}
+	detach() {
+		if (!IN_BROWSER) return;
+		document.adoptedStyleSheets = document.adoptedStyleSheets.filter((s) => s !== this.sheet);
+		this.sheet = void 0;
+	}
 };
 //#endregion
 //#region src/composables/useTheme/adapters/unhead.ts
@@ -22406,8 +22479,10 @@ var V0StyleSheetThemeAdapter = class extends ThemeAdapter {
 */
 var V0UnheadThemeAdapter = class extends ThemeAdapter {
 	entry;
+	cspNonce;
 	constructor(options = {}) {
 		super(options.prefix ?? "v0");
+		this.cspNonce = options.cspNonce;
 		this.stylesheetId = options.stylesheetId ?? this.stylesheetId;
 	}
 	setup(app, context, target) {
@@ -22418,7 +22493,8 @@ var V0UnheadThemeAdapter = class extends ThemeAdapter {
 				htmlAttrs: { "data-theme": id ? String(id) : "" },
 				style: [{
 					innerHTML: this.generate(context.colors.value, context.isDark.value),
-					id: this.stylesheetId
+					id: this.stylesheetId,
+					...this.cspNonce ? { nonce: this.cspNonce } : {}
 				}]
 			});
 		}
@@ -22437,7 +22513,8 @@ var V0UnheadThemeAdapter = class extends ThemeAdapter {
 					htmlAttrs: { "data-theme": themeStr },
 					style: [{
 						innerHTML: this.generate(colors, isDark),
-						id: this.stylesheetId
+						id: this.stylesheetId,
+						...this.cspNonce ? { nonce: this.cspNonce } : {}
 					}]
 				});
 			});
@@ -22451,7 +22528,8 @@ var V0UnheadThemeAdapter = class extends ThemeAdapter {
 		if (!this.entry) return;
 		this.entry.patch?.({ style: [{
 			innerHTML: this.generate(colors, isDark),
-			id: this.stylesheetId
+			id: this.stylesheetId,
+			...this.cspNonce ? { nonce: this.cspNonce } : {}
 		}] });
 	}
 };
@@ -24156,6 +24234,7 @@ function useRovingFocus(items, options = {}) {
 }
 //#endregion
 //#region src/components/Treeview/TreeviewList.vue
+const FOCUSABLE = "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]";
 const [useTreeviewList, provideTreeviewList] = createContext({ suffix: "list" });
 const _sfc_main$166 = /* @__PURE__ */ defineComponent({
 	name: "TreeviewList",
@@ -24204,7 +24283,43 @@ const _sfc_main$166 = /* @__PURE__ */ defineComponent({
 			if (toValue(ticket.isOpen) && expandable(ticket)) nested.close(ticket.id);
 			else if (!/* @__PURE__ */ isNullOrUndefined(ticket.parentId)) roving.focus(ticket.parentId);
 		}
+		function focusableChildren(el) {
+			return Array.from(el.querySelectorAll(FOCUSABLE)).filter((child) => child.getAttribute("tabindex") !== "-1" && child.getAttribute("aria-disabled") !== "true" && child.closest("[role=\"treeitem\"]") === el);
+		}
+		function nextItemId(id) {
+			/* v8 ignore next -- defensive: source is always a registered visible item */
+			if (/* @__PURE__ */ isNullOrUndefined(id)) return void 0;
+			const visible = nested.visibleItems();
+			const index = visible.findIndex((item) => item.id === id);
+			/* v8 ignore next -- defensive: a registered item is always found in visibleItems */
+			if (index === -1) return void 0;
+			return visible.slice(index + 1).find((item) => !toValue(item.disabled))?.id;
+		}
 		function onKeydown(e) {
+			const target = e.target;
+			const itemEl = target.closest("[role=\"treeitem\"]");
+			const onItem = target === e.currentTarget || target.getAttribute("role") === "treeitem";
+			if (e.key === "Tab") {
+				if (!itemEl) return;
+				const controls = focusableChildren(itemEl);
+				if (controls.length === 0) return;
+				if (!e.shiftKey && onItem) {
+					e.preventDefault();
+					controls[0].focus();
+				} else if (!e.shiftKey && target === controls.at(-1)) {
+					const source = nested.visibleItems().find((item) => toValue(item.el) === itemEl)?.id;
+					const next = nextItemId(source);
+					if (!/* @__PURE__ */ isNullOrUndefined(next)) {
+						e.preventDefault();
+						roving.focus(next);
+					}
+				} else if (e.shiftKey && target === controls[0]) {
+					e.preventDefault();
+					itemEl.focus();
+				}
+				return;
+			}
+			if (!onItem) return;
 			const id = roving.focusedId.value;
 			const ticket = /* @__PURE__ */ isNullOrUndefined(id) ? void 0 : nested.get(id);
 			const rtl = isRtl(e);
@@ -27564,7 +27679,7 @@ function createMapProxy(refObject) {
 	mapHandlers[Symbol.iterator] = mapHandlers.entries;
 	mapProxy = new Proxy(/* @__PURE__ */ new Map(), { get(_, p) {
 		if (p === "size") return refObject.value.size;
-		if (Object.prototype.hasOwnProperty.call(mapHandlers, p)) return mapHandlers[p];
+		if (Object.hasOwn(mapHandlers, p)) return mapHandlers[p];
 		const map = refObject.value;
 		const value = Reflect.get(map, p);
 		return /* @__PURE__ */ isFunction(value) ? value.bind(map) : value;
@@ -27603,7 +27718,7 @@ function createSetProxy(refObject) {
 	setHandlers[Symbol.iterator] = setHandlers.values;
 	setProxy = new Proxy(/* @__PURE__ */ new Set(), { get(_, p) {
 		if (p === "size") return refObject.value.size;
-		if (Object.prototype.hasOwnProperty.call(setHandlers, p)) return setHandlers[p];
+		if (Object.hasOwn(setHandlers, p)) return setHandlers[p];
 		const set = refObject.value;
 		const value = Reflect.get(set, p);
 		return /* @__PURE__ */ isFunction(value) ? value.bind(set) : value;