@vuetify/v0 1.1.0 → 1.2.0

package/dist/utilities/index.mjs

@@ -1,4 +1,4 @@
-import { t as IN_BROWSER } from "../globals-CtaXlEOI.mjs";
+import { t as IN_BROWSER } from "../globals-DaoKtIGF.mjs";
 import * as Vue from "vue";
 import { useId as useId$1 } from "vue";
 //#region src/utilities/color.ts
@@ -102,6 +102,126 @@ function foreground(hex) {
 	return Math.abs(/* @__PURE__ */ apca(BLACK, rgb)) > Math.abs(/* @__PURE__ */ apca(WHITE, rgb)) ? "#000000" : "#ffffff";
 }
 //#endregion
+//#region src/utilities/diacritics.ts
+const COMBINING_MARKS = /[\u0300-\u036F]/g;
+const FINAL_SIGMA = /ς/g;
+function lower(str) {
+	return str.toLowerCase().replace(FINAL_SIGMA, "σ");
+}
+const SPECIAL_LETTERS = {
+	ł: "l",
+	ø: "o",
+	đ: "d",
+	ð: "d",
+	þ: "th",
+	ħ: "h",
+	ŧ: "t",
+	ŋ: "n",
+	ß: "ss",
+	æ: "ae",
+	œ: "oe",
+	ı: "i",
+	Ł: "L",
+	Ø: "O",
+	Đ: "D",
+	Ð: "D",
+	Þ: "Th",
+	Ħ: "H",
+	Ŧ: "T",
+	Ŋ: "N",
+	ẞ: "Ss",
+	Æ: "Ae",
+	Œ: "Oe"
+};
+const SPECIAL_LETTER = /* @__PURE__ */ new RegExp(`[${Object.keys(SPECIAL_LETTERS).join("")}]`, "g");
+function fold(str) {
+	return str.normalize("NFD").replace(COMBINING_MARKS, "").replace(SPECIAL_LETTER, (char) => SPECIAL_LETTERS[char]);
+}
+function foldWithMap(str, ignoreCase, foldAccents) {
+	let folded = "";
+	const map = [];
+	let index = 0;
+	for (const char of str) {
+		const raw = ignoreCase ? lower(char) : char;
+		const chunk = foldAccents ? fold(raw) : raw;
+		folded += chunk;
+		for (let unit = 0; unit < chunk.length; unit++) map.push(index);
+		index += char.length;
+	}
+	map.push(str.length);
+	return {
+		folded,
+		map
+	};
+}
+function collect(haystack, needle, matchAll) {
+	const ranges = [];
+	let index = haystack.indexOf(needle);
+	while (index !== -1) {
+		ranges.push([index, index + needle.length]);
+		if (!matchAll) break;
+		index = haystack.indexOf(needle, index + needle.length);
+	}
+	return ranges;
+}
+function remap(map, start, end) {
+	const sourceStart = map[start];
+	let sourceEnd = map[end];
+	if (end > 0 && map[end] === map[end - 1]) {
+		let index = end;
+		const current = map[end];
+		while (index < map.length && map[index] === current) index++;
+		sourceEnd = map[index];
+	}
+	return [sourceStart, sourceEnd];
+}
+function project(ranges, map) {
+	const projected = [];
+	for (const [start, end] of ranges) {
+		const span = remap(map, start, end);
+		const last = projected.at(-1);
+		if (!last || last[0] !== span[0] || last[1] !== span[1]) projected.push(span);
+	}
+	return projected;
+}
+/**
+* Finds `[start, end]` index pairs where `query` occurs in `text`, optionally
+* folding accents on either side. Returned indices always address the original
+* `text`, even when folding or case-conversion changed its length.
+*
+* @param text The string to search.
+* @param query The term to look for. An empty query yields no ranges.
+* @param options Optional `ignoreCase`, `ignoreAccents`, `matchAll`.
+* @returns Ranges into `text`, where `end` is exclusive.
+*
+* @example
+* ```ts
+* import { findMatchRanges } from '@vuetify/v0'
+*
+* findMatchRanges('Zürich', 'zurich', { ignoreCase: true, ignoreAccents: true })
+* // [[0, 6]]
+*
+* findMatchRanges('Łódź', 'Lo', { ignoreAccents: 'target' })
+* // [[0, 2]]
+* ```
+*/
+/* @__NO_SIDE_EFFECTS__ */
+function findMatchRanges(text, query, options = {}) {
+	const { ignoreCase = false, ignoreAccents = false, matchAll = false } = options;
+	const foldQuery = ignoreAccents === true || ignoreAccents === "query";
+	const foldTarget = ignoreAccents === true || ignoreAccents === "target";
+	const folded = foldQuery ? fold(query) : query;
+	const needle = ignoreCase ? lower(folded) : folded;
+	if (needle.length === 0) return [];
+	if (!foldTarget) {
+		if (!ignoreCase) return collect(text, needle, matchAll);
+		const lowered = lower(text);
+		if (lowered.length === text.length) return collect(lowered, needle, matchAll);
+	}
+	const { folded: haystack, map } = foldWithMap(text, ignoreCase, foldTarget);
+	return project(collect(haystack, needle, matchAll), map);
+}
+//#endregion
 //#region src/utilities/instance.ts
 /**
 * Vue 3.6+ exposes `currentInstance` for Vapor mode compatibility.
@@ -308,6 +428,27 @@ function isElement(item) {
 	return typeof Element !== "undefined" && item instanceof Element;
 }
 /**
+* Resolve the deepest focused element, piercing open shadow roots.
+*
+* `document.activeElement` returns the shadow *host* when focus is inside an
+* open shadow root — walk down through open roots so focus/keyboard logic
+* resolves the real focused element (e.g. a control inside a custom element).
+* Returns the same value as `document.activeElement` in light DOM, and `null`
+* under SSR. Closed shadow roots can't be traversed.
+*
+* @example
+* ```ts
+* const active = getActiveElement()
+* ```
+*/
+/* @__NO_SIDE_EFFECTS__ */
+function getActiveElement() {
+	if (typeof document === "undefined") return null;
+	let active = document.activeElement;
+	while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
+	return active;
+}
+/**
 * Checks if a value is null
 *
 * @param item The value to check
@@ -550,6 +691,44 @@ function range(length, start = 0) {
 	return Array.from({ length }, (_, index) => start + index);
 }
 /**
+* Parses a CSS pixel length into a number
+*
+* @param value The resolved CSS length, e.g. `getComputedStyle(el).marginLeft`
+* @param fallback The value to return when `value` does not parse (default: 0)
+* @returns The parsed number, or `fallback`
+*
+* @remarks
+* Built for reading `getComputedStyle` output, where a length that does not
+* apply resolves to `''` or `'auto'` rather than to a number. An unparseable
+* length returns `fallback`; a length that legitimately parses to `0` returns
+* `0`. That distinction is why this exists — `Number.parseFloat(v) || 0`
+* collapses both cases onto `0`, which is only correct when the fallback is
+* itself `0`.
+*
+* Only the leading number is read, matching `Number.parseFloat`, so any unit
+* suffix is ignored. Values `getComputedStyle` never returns — percentages,
+* `calc()` expressions, multi-value shorthands — are out of scope.
+*
+* @example
+* ```ts
+* pxToNumber('16px')          // 16
+* pxToNumber('0px')           // 0
+* pxToNumber('-4.5px')        // -4.5
+* pxToNumber('auto')          // 0
+* pxToNumber(undefined)       // 0
+*
+* // A non-zero fallback is the case `|| 0` cannot express
+* pxToNumber('auto', 100)     // 100
+* pxToNumber('0px', 100)      // 0
+* ```
+*/
+/* @__NO_SIDE_EFFECTS__ */
+function pxToNumber(value, fallback = 0) {
+	if (!/* @__PURE__ */ isString(value)) return fallback;
+	const parsed = Number.parseFloat(value);
+	return /* @__PURE__ */ isNaN(parsed) ? fallback : parsed;
+}
+/**
 * Resolves an iterable of IDs to their items via a getter,
 * filtering out any that return undefined.
 *
@@ -697,4 +876,4 @@ function isV0Error(value, code) {
 	return /* @__PURE__ */ isUndefined(code) || value.code === code;
 }
 //#endregion
-export { UNSAFE_KEYS, V0Error, apca, clamp, foreground, hexToRgb, instanceExists, instanceName, isArray, isBoolean, isElement, isFunction, isNaN, isNull, isNullOrUndefined, isNumber, isObject, isPrimitive, isString, isSymbol, isThenable, isUndefined, isV0Error, mergeDeep, range, resolveIds, resolveIndexes, rgbToHex, useId };
+export { UNSAFE_KEYS, V0Error, apca, clamp, findMatchRanges, foreground, getActiveElement, hexToRgb, instanceExists, instanceName, isArray, isBoolean, isElement, isFunction, isNaN, isNull, isNullOrUndefined, isNumber, isObject, isPrimitive, isString, isSymbol, isThenable, isUndefined, isV0Error, mergeDeep, pxToNumber, range, resolveIds, resolveIndexes, rgbToHex, useId };

package/dist/{v0-CveVV6On.mjs → v0-B_53w7Fu.mjs}

@@ -1,6 +1,6 @@
-import { t as IN_BROWSER } from "./globals-CtaXlEOI.mjs";
+import { t as IN_BROWSER } from "./globals-DaoKtIGF.mjs";
 import { isNull, isString } from "./utilities/index.mjs";
-import { t as ThemeAdapter } from "./adapter-q1sRACUc.mjs";
+import { t as ThemeAdapter } from "./adapter-TiGrumDi.mjs";
 import { watch } from "vue";
 //#region src/composables/useTheme/adapters/v0.ts
 /**

package/dist/{v0-BnUwMaOv.d.mts → v0-CDW1Ktk-.d.mts}

@@ -1,4 +1,4 @@
-import { n as LocaleAdapterContext, t as LocaleAdapter } from "./adapter-hq9YlPOF.mjs";
+import { n as LocaleAdapterContext, t as LocaleAdapter } from "./adapter-CqS8xexO.mjs";
 
 //#region src/composables/useLocale/adapters/v0.d.ts
 /**

package/dist/{v0-CZBkpQjr.mjs → v0-D0Exc2bO.mjs}

@@ -1,6 +1,6 @@
-import { t as IN_BROWSER } from "./globals-CtaXlEOI.mjs";
+import { t as IN_BROWSER } from "./globals-DaoKtIGF.mjs";
 import { isObject, isString, isUndefined } from "./utilities/index.mjs";
-import { t as LocaleAdapter } from "./adapter-bwZo7b5p.mjs";
+import { t as LocaleAdapter } from "./adapter-D8zizQVP.mjs";
 //#region src/composables/useLocale/adapters/v0.ts
 /**
 * Default locale adapter for @vuetify/v0.

package/dist/{v0-rSxMW8FJ.d.mts → v0-DfFK-p4X.d.mts}

@@ -1,4 +1,4 @@
-import { t as LoggerAdapter } from "./adapter-BYzU4Ey5.mjs";
+import { t as LoggerAdapter } from "./adapter-ryk5H6YZ.mjs";
 
 //#region src/composables/useLogger/adapters/v0.d.ts
 /**

package/dist/{v0-DotXXGXU.d.mts → v0-GI9U-rPA.d.mts}

@@ -1,7 +1,7 @@
-import { n as DataTableAdapterContext, r as DataTableAdapterResult, t as DataTableAdapter } from "./adapter-_srNCBEi.mjs";
+import { n as DataTableAdapterContext, r as DataTableAdapterResult, t as DataTableAdapter } from "./adapter-PDTe5nFT.mjs";
 
 //#region src/composables/createDataTable/adapters/v0.d.ts
-declare class ClientDataTableAdapter<T extends Record<string, unknown>> extends DataTableAdapter<T> {
+declare class ClientDataTableAdapter<T extends object> extends DataTableAdapter<T> {
   setup(context: DataTableAdapterContext<T>): DataTableAdapterResult<T>;
 }
 //#endregion

package/dist/{v0-CCWHeKJM.mjs → v0-SuxTihEe.mjs}

@@ -1,4 +1,4 @@
-import { t as IN_BROWSER } from "./globals-CtaXlEOI.mjs";
+import { t as IN_BROWSER } from "./globals-DaoKtIGF.mjs";
 import { isFunction } from "./utilities/index.mjs";
 import { t as LoggerAdapter } from "./adapter-Chznb9Ju.mjs";
 //#region src/composables/useLogger/adapters/v0.ts

package/dist/{v0-A4GLojAr.mjs → v0-yZ2ZUtVF.mjs}

@@ -1,5 +1,4 @@
-import { t as createPagination } from "./createPagination-B5dfqY-a.mjs";
-import { t as DataTableAdapter } from "./adapter-CVoWg0sw.mjs";
+import { n as createPagination, t as DataTableAdapter } from "./adapter-BiQV5j8B.mjs";
 import { computed, toRef, watch } from "vue";
 //#region src/composables/createDataTable/adapters/v0.ts
 /**

package/dist/{virtual-DFvOoeG6.mjs → virtual-Bbu26O_h.mjs}

@@ -1,5 +1,4 @@
-import { t as createPagination } from "./createPagination-B5dfqY-a.mjs";
-import { t as DataTableAdapter } from "./adapter-CVoWg0sw.mjs";
+import { n as createPagination, t as DataTableAdapter } from "./adapter-BiQV5j8B.mjs";
 import { toRef, watch } from "vue";
 //#region src/composables/createDataTable/adapters/virtual.ts
 /**

package/dist/{virtual-C-NsLue0.d.mts → virtual-JIdFLpTQ.d.mts}

@@ -1,7 +1,7 @@
-import { n as DataTableAdapterContext, r as DataTableAdapterResult, t as DataTableAdapter } from "./adapter-_srNCBEi.mjs";
+import { n as DataTableAdapterContext, r as DataTableAdapterResult, t as DataTableAdapter } from "./adapter-PDTe5nFT.mjs";
 
 //#region src/composables/createDataTable/adapters/virtual.d.ts
-declare class VirtualDataTableAdapter<T extends Record<string, unknown>> extends DataTableAdapter<T> {
+declare class VirtualDataTableAdapter<T extends object> extends DataTableAdapter<T> {
   setup(context: DataTableAdapterContext<T>): DataTableAdapterResult<T>;
 }
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/v0",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Headless, unstyled, accessible Vue 3 primitives and composables — a meta UI framework for building applications, component libraries, and design systems",
   "keywords": [
     "vue",
@@ -50,6 +50,7 @@
     "@adobe/leonardo-contrast-colors": ">=1.0.0",
     "@ant-design/colors": ">=7.0.0",
     "@flagsmith/flagsmith": ">=11.0.0",
+    "@floating-ui/dom": ">=1.8.0",
     "@js-temporal/polyfill": ">=0.5.0",
     "@material/material-color-utilities": ">=0.3.0",
     "launchdarkly-js-client-sdk": "^3.0.0",
@@ -61,6 +62,9 @@
     "@flagsmith/flagsmith": {
       "optional": true
     },
+    "@floating-ui/dom": {
+      "optional": true
+    },
     "@js-temporal/polyfill": {
       "optional": true
     },
@@ -87,6 +91,7 @@
     "@adobe/leonardo-contrast-colors": "^1.1.0",
     "@ant-design/colors": "^8.0.1",
     "@flagsmith/flagsmith": "^11.0.0",
+    "@floating-ui/dom": "^1.8.0",
     "@js-temporal/polyfill": "0.5.1",
     "@material/material-color-utilities": "^0.4.0",
     "@testing-library/vue": "^8.1.0",
@@ -148,6 +153,8 @@
     "./permissions": "./dist/permissions/index.mjs",
     "./permissions/adapters": "./dist/permissions/adapters/index.mjs",
     "./permissions/adapters/v0": "./dist/permissions/adapters/v0/index.mjs",
+    "./popover": "./dist/popover/index.mjs",
+    "./popover/adapters/floating-ui": "./dist/popover/adapters/floating-ui/index.mjs",
     "./rules": "./dist/rules/index.mjs",
     "./storage": "./dist/storage/index.mjs",
     "./storage/adapters": "./dist/storage/adapters/index.mjs",

package/dist/adapter-CVoWg0sw.mjs

@@ -1,99 +0,0 @@
-import { isArray, isNaN, isNullOrUndefined, isNumber, isObject, isString } from "./utilities/index.mjs";
-import { i as createFilter } from "./createPagination-B5dfqY-a.mjs";
-import { computed, toRef, toValue } from "vue";
-//#region src/composables/createDataTable/adapters/adapter.ts
-/**
-* @module createDataTable/adapters
-*
-* @remarks
-* Defines the adapter interface and abstract base class for data table
-* pipeline strategies. Adapters control how raw items are filtered, sorted,
-* and sliced into visible items.
-*
-* The abstract DataTableAdapter provides shared filter and sort pipelines
-* used by client-side adapters. Server adapters that delegate pipeline
-* operations externally subclass DataTableAdapter directly.
-*/
-function getNestedValue(obj, parts) {
-	let result = obj;
-	for (const k of parts) {
-		if (/* @__PURE__ */ isNullOrUndefined(result)) return void 0;
-		result = result[k];
-	}
-	return result;
-}
-function compareValues(a, b, collator) {
-	if (a === b) return 0;
-	const aNil = /* @__PURE__ */ isNullOrUndefined(a);
-	const bNil = /* @__PURE__ */ isNullOrUndefined(b);
-	if (aNil && bNil) return 0;
-	if (aNil) return 1;
-	if (bNil) return -1;
-	if (/* @__PURE__ */ isString(a) && /* @__PURE__ */ isString(b)) return collator ? collator.compare(a, b) : a.localeCompare(b);
-	if (/* @__PURE__ */ isNumber(a) && /* @__PURE__ */ isNumber(b)) {
-		if (/* @__PURE__ */ isNaN(a)) return 1;
-		if (/* @__PURE__ */ isNaN(b)) return -1;
-		return a - b;
-	}
-	const sa = String(a);
-	const sb = String(b);
-	return collator ? collator.compare(sa, sb) : sa.localeCompare(sb);
-}
-var DataTableAdapter = class {
-	/** Create the filter pipeline stage */
-	filter(context) {
-		const filter = createFilter({
-			...context.filterOptions,
-			keys: [...toValue(context.filterableKeys)],
-			customFilter: context.filterOptions.customFilter ?? ((query, item) => {
-				const columnFilters = toValue(context.customColumnFilters);
-				const keys = toValue(context.filterableKeys);
-				if (!/* @__PURE__ */ isObject(item)) return false;
-				const q = String(/* @__PURE__ */ isArray(query) ? query[0] : query).toLowerCase();
-				if (!q) return true;
-				const obj = item;
-				for (const key of keys) {
-					const customFn = columnFilters[key];
-					if (customFn) {
-						if (customFn(obj[key], q)) return true;
-					} else {
-						const val = obj[key];
-						if (!/* @__PURE__ */ isNullOrUndefined(val) && String(val).toLowerCase().includes(q)) return true;
-					}
-				}
-				return false;
-			})
-		});
-		const allItems = toRef(() => toValue(context.items));
-		const { items: filteredItems } = filter.apply(context.search, allItems);
-		return {
-			allItems,
-			filteredItems
-		};
-	}
-	/** Create the sort pipeline stage */
-	sort(filteredItems, sortBy, locale, customSorts) {
-		return computed(() => {
-			const entries = sortBy.value;
-			if (entries.length === 0) return filteredItems.value;
-			const sorts = toValue(customSorts) ?? {};
-			const collator = new Intl.Collator(locale?.value);
-			const resolved = entries.map(({ key, direction }) => ({
-				parts: key.split("."),
-				direction,
-				custom: sorts[key]
-			}));
-			return filteredItems.value.toSorted((a, b) => {
-				for (const { parts, direction, custom } of resolved) {
-					const aVal = parts.length === 1 ? a[parts[0]] : getNestedValue(a, parts);
-					const bVal = parts.length === 1 ? b[parts[0]] : getNestedValue(b, parts);
-					const cmp = custom ? custom(aVal, bVal) : compareValues(aVal, bVal, collator);
-					if (cmp !== 0) return direction === "desc" ? -cmp : cmp;
-				}
-				return 0;
-			});
-		});
-	}
-};
-//#endregion
-export { DataTableAdapter as t };

package/dist/useFeatures-YJmONiU7.mjs

@@ -1,124 +0,0 @@
-import { isArray, isBoolean, isFunction, isObject } from "./utilities/index.mjs";
-import { o as createPluginContext } from "./useLogger-CbvzXCWb.mjs";
-import { t as createTokens } from "./createTokens-C4qcW2Kv.mjs";
-import { t as createGroup } from "./createGroup-BXKKcb9-.mjs";
-//#region src/composables/useFeatures/index.ts
-/**
-* @module useFeatures
-*
-* @see https://0.vuetifyjs.com/composables/plugins/use-features
-*
-* @remarks
-* Feature flag system with boolean and token-based features.
-*
-* Key features:
-* - Boolean features (true/false activation)
-* - Token features with $variation support
-* - Auto-selection of enabled features
-* - Multi-select support for feature combinations
-* - Perfect for A/B testing, progressive rollout, feature toggles
-* - Adapter pattern for external feature flag services (Generic, LaunchDarkly, Flagsmith)
-*
-* Inheritance chain: createRegistry → createSelection → createGroup → createFeatures
-* Integrates with createTokens for token-based features.
-*
-* @example
-* ```ts
-* import { useFeatures } from '@vuetify/v0'
-*
-* const features = useFeatures()
-* features.register({ id: 'new-checkout', value: true })
-* console.log(features.variation('new-checkout'))
-* ```
-*/
-/**
-* Creates a new features instance.
-*
-* @param options The options for the features instance.
-* @returns A new features instance.
-*
-* @see https://0.vuetifyjs.com/composables/plugins/use-features
-*
-* @example
-* ```ts
-* import { createFeatures } from '@vuetify/v0'
-*
-* const features = createFeatures({
-*   features: {
-*     'dark-mode': true,
-*     'theme-color': { $variation: 'blue' },
-*   },
-* })
-* ```
-*/
-function createFeatures(_options = {}) {
-	const { features, ...options } = _options;
-	const tokens = createTokens(features, { flat: true });
-	const registry = createGroup({
-		...options,
-		events: true,
-		reactive: true
-	});
-	for (const [id, { value }] of tokens.entries()) register({
-		id,
-		value
-	});
-	function variation(id, fallback = null) {
-		const ticket = registry.get(id);
-		if (!ticket) return fallback;
-		return /* @__PURE__ */ isObject(ticket.value) ? ticket.value.$variation ?? fallback : ticket.value ?? fallback;
-	}
-	function register(registration = {}) {
-		const item = {
-			value: false,
-			...registration
-		};
-		const ticket = registry.register(item);
-		if (/* @__PURE__ */ isBoolean(ticket.value) && ticket.value === true || /* @__PURE__ */ isObject(ticket.value) && /* @__PURE__ */ isBoolean(ticket.value.$value) && ticket.value.$value === true) registry.select(ticket.id);
-		return ticket;
-	}
-	function sync(flags) {
-		for (const [id, value] of Object.entries(flags)) if (registry.get(id)) {
-			const shouldSelect = /* @__PURE__ */ isBoolean(value) ? value === true : /* @__PURE__ */ isObject(value) && /* @__PURE__ */ isBoolean(value.$value) && value.$value === true;
-			registry.upsert(id, { value });
-			if (shouldSelect) registry.select(id);
-			else registry.selectedIds.delete(id);
-		} else register({
-			id,
-			value
-		});
-	}
-	function onboard(registrations) {
-		return registry.batch(() => registrations.map((registration) => register(registration)));
-	}
-	return {
-		...registry,
-		variation,
-		register,
-		onboard,
-		sync,
-		get size() {
-			return registry.size;
-		}
-	};
-}
-function createFeaturesFallback() {
-	return {
-		size: 0,
-		variation: (_id, fallback = null) => fallback,
-		sync: () => {},
-		onboard: () => []
-	};
-}
-const [createFeaturesContext, createFeaturesPlugin, useFeatures] = createPluginContext("v0:features", (options) => createFeatures(options), {
-	fallback: () => createFeaturesFallback(),
-	setup: (context, app, { adapter }) => {
-		if (!adapter) return;
-		for (const a of /* @__PURE__ */ isArray(adapter) ? adapter : [adapter]) {
-			context.sync(a.setup((flags) => context.sync(flags)));
-			if (/* @__PURE__ */ isFunction(a.dispose)) app.onUnmount(() => a.dispose());
-		}
-	}
-});
-//#endregion
-export { useFeatures as i, createFeaturesContext as n, createFeaturesPlugin as r, createFeatures as t };