mlform 0.1.7 → 0.1.8

package/dist/{design-system-CrrSGfFB.js → design-system-Dxx1Sh7r.js}

@@ -522,7 +522,7 @@ var e = [
 		}])) : void 0,
 		sharedTokens: e.sharedTokens ? { ...e.sharedTokens } : void 0
 	});
-}, _ = class e {
+}, ee = class e {
 	#e = /* @__PURE__ */ new Map();
 	#t = /* @__PURE__ */ new Map();
 	#n = /* @__PURE__ */ new Map();
@@ -607,59 +607,59 @@ var e = [
 		for (let [e, n] of this.#n) t.#n.set(e, new Map(n));
 		return t;
 	}
-}, v = () => new _(), y = [
+}, _ = () => new ee(), v = [
 	d,
 	l,
 	f,
 	p,
 	u
-], b = [
+], y = [
 	o,
 	s,
 	c,
 	a
-], x = () => {
-	let e = v();
-	for (let t of y) e.registerTheme(t);
-	for (let t of b) e.registerRecipe(t);
+], b = () => {
+	let e = _();
+	for (let t of v) e.registerTheme(t);
+	for (let t of y) e.registerRecipe(t);
 	return e;
-}, S = x(), C = new Set(i), ee = (t) => {
+}, x = b(), S = new Set(i), te = (t) => {
 	for (let n of e) if (t.startsWith(`--mlf-${n}-`)) return n;
 	return null;
-}, te = (e) => {
+}, ne = (e) => {
 	for (let t of Object.keys(e)) {
-		if (!C.has(t)) throw Error(`[mlform] Unknown global token "${t}"`);
-		let e = ee(t);
+		if (!S.has(t)) throw Error(`[mlform] Unknown global token "${t}"`);
+		let e = te(t);
 		if (e) throw Error(`[mlform] Token "${t}" belongs to component "${e}". Use defineComponentTokens("${e}", ...)`);
 	}
 	return { ...e };
-}, ne = (e, t) => {
+}, re = (e, t) => {
 	for (let n of Object.keys(t)) {
-		if (!C.has(n)) throw Error(`[mlform] Unknown token "${n}" for component "${e}"`);
+		if (!S.has(n)) throw Error(`[mlform] Unknown token "${n}" for component "${e}"`);
 		if (!n.startsWith(`--mlf-${e}-`)) throw Error(`[mlform] Token "${n}" does not belong to component "${e}"`);
 	}
 	return { tokens: { ...t } };
-}, w = new Set(i), T = /var\(\s*(--mlf-[a-z0-9-]+)\s*[,)]/g, E = (e, t, n) => {
-	if (n) for (let r of Object.keys(n)) !r.startsWith("--mlf-") || w.has(r) || e.push({
+}, C = new Set(i), w = /var\(\s*(--mlf-[a-z0-9-]+)\s*[,)]/g, T = (e, t, n) => {
+	if (n) for (let r of Object.keys(n)) !r.startsWith("--mlf-") || C.has(r) || e.push({
 		code: "unknown-token-key",
 		path: t,
 		value: r,
 		message: `[mlform] Unknown design-system token "${r}" at ${t}`
 	});
-}, D = (e, t, n, r) => {
-	if (r) for (let i of Object.keys(r)) !i.startsWith("--mlf-") || !w.has(i) || i.startsWith(`--mlf-${t}-`) || e.push({
+}, E = (e, t, n, r) => {
+	if (r) for (let i of Object.keys(r)) !i.startsWith("--mlf-") || !C.has(i) || i.startsWith(`--mlf-${t}-`) || e.push({
 		code: "misplaced-component-token",
 		path: n,
 		value: i,
 		message: `[mlform] Token "${i}" does not belong to component "${t}" at ${n}`
 	});
-}, re = (e, t, n) => {
+}, ie = (e, t, n) => {
 	if (n) for (let [r, i] of Object.entries(n)) {
-		T.lastIndex = 0;
+		w.lastIndex = 0;
 		let n;
-		for (; (n = T.exec(i)) !== null;) {
+		for (; (n = w.exec(i)) !== null;) {
 			let i = n[1];
-			!t.has(i) && w.has(i) && e.push({
+			!t.has(i) && C.has(i) && e.push({
 				code: "broken-token-reference",
 				path: r,
 				value: i,
@@ -667,7 +667,7 @@ var e = [
 			});
 		}
 	}
-}, O = (e) => {
+}, D = (e) => {
 	let t = /* @__PURE__ */ new Set();
 	return e.filter((e) => {
 		let n = [
@@ -678,7 +678,7 @@ var e = [
 		].join("|");
 		return t.has(n) ? !1 : (t.add(n), !0);
 	});
-}, k = (t, n, r, i) => {
+}, ae = (t, n, r, i) => {
 	let a = [];
 	typeof t.theme == "string" && !n.getTheme(t.theme) && a.push({
 		code: "unknown-theme-id",
@@ -690,17 +690,17 @@ var e = [
 		path: "recipe",
 		value: t.recipe,
 		message: `[mlform] Unknown recipe "${t.recipe}". Falling back to "${i.id}"`
-	}), E(a, `theme "${r.id}".sharedTokens`, r.sharedTokens), E(a, `theme "${r.id}".schemes.light.tokens`, r.schemes.light.tokens), E(a, `theme "${r.id}".schemes.dark.tokens`, r.schemes.dark?.tokens);
-	for (let [e, t] of Object.entries(r.variants ?? {})) E(a, `theme "${r.id}".variants.${e}.tokens`, t.tokens);
-	E(a, `recipe "${i.id}".tokens`, i.tokens);
-	for (let [e, t] of Object.entries(i.components ?? {})) E(a, `recipe "${i.id}".components.${e}.tokens`, t?.tokens), D(a, e, `recipe "${i.id}".components.${e}.tokens`, t?.tokens);
-	E(a, "overrides.tokens", t.overrides?.tokens);
+	}), T(a, `theme "${r.id}".sharedTokens`, r.sharedTokens), T(a, `theme "${r.id}".schemes.light.tokens`, r.schemes.light.tokens), T(a, `theme "${r.id}".schemes.dark.tokens`, r.schemes.dark?.tokens);
+	for (let [e, t] of Object.entries(r.variants ?? {})) T(a, `theme "${r.id}".variants.${e}.tokens`, t.tokens);
+	T(a, `recipe "${i.id}".tokens`, i.tokens);
+	for (let [e, t] of Object.entries(i.components ?? {})) T(a, `recipe "${i.id}".components.${e}.tokens`, t?.tokens), E(a, e, `recipe "${i.id}".components.${e}.tokens`, t?.tokens);
+	T(a, "overrides.tokens", t.overrides?.tokens);
 	for (let n of e) {
 		let e = t.overrides?.components?.[n];
-		E(a, `overrides.components.${n}.tokens`, e?.tokens), D(a, n, `overrides.components.${n}.tokens`, e?.tokens);
+		T(a, `overrides.components.${n}.tokens`, e?.tokens), E(a, n, `overrides.components.${n}.tokens`, e?.tokens);
 	}
-	return O(a);
-}, ie = (e, t, n) => {
+	return D(a);
+}, oe = (e, t, n) => {
 	if (!e.variant) return [];
 	let r = t.variants?.[e.variant];
 	return r ? r.baseScheme === n ? [] : [{
@@ -714,62 +714,62 @@ var e = [
 		value: e.variant,
 		message: `[mlform] Theme "${t.id}" does not define variant "${e.variant}"`
 	}];
-}, ae = (e) => {
+}, se = (e) => {
 	let t = [];
-	return re(t, new Set(Object.keys(e)), e), O(t);
-}, A = (e, t) => {
+	return ie(t, new Set(Object.keys(e)), e), D(t);
+}, O = (e, t) => {
 	if (t.length !== 0) {
 		for (let n of t) e.onWarning?.(n);
 		if (e.strict) throw Error(t.map((e) => e.message).join("\n"));
 	}
-}, j = "light", M = (e, t) => t === "light" || !!e.schemes.dark, oe = (e, t, n = {}) => {
+}, k = "light", A = (e, t) => t === "light" || !!e.schemes.dark, ce = (e, t, n = {}) => {
 	let r = e.mode ?? "auto";
 	return r === "light" || r === "dark" ? r === "dark" && !t.schemes.dark ? {
 		requestedMode: r,
-		effectiveScheme: j,
+		effectiveScheme: k,
 		effectiveModeSource: "theme-fallback"
 	} : {
 		requestedMode: r,
 		effectiveScheme: r,
 		effectiveModeSource: "explicit"
-	} : r === "auto" ? n.systemScheme && M(t, n.systemScheme) ? {
+	} : r === "auto" ? n.systemScheme && A(t, n.systemScheme) ? {
 		requestedMode: r,
 		effectiveScheme: n.systemScheme,
 		effectiveModeSource: "system"
 	} : {
 		requestedMode: r,
-		effectiveScheme: j,
+		effectiveScheme: k,
 		effectiveModeSource: "theme-fallback"
-	} : n.inheritedScheme && M(t, n.inheritedScheme) ? {
+	} : n.inheritedScheme && A(t, n.inheritedScheme) ? {
 		requestedMode: r,
 		effectiveScheme: n.inheritedScheme,
 		effectiveModeSource: n.inheritedSource ?? "default"
 	} : {
 		requestedMode: r,
-		effectiveScheme: j,
+		effectiveScheme: k,
 		effectiveModeSource: "theme-fallback"
 	};
-}, se = (e, t) => {
+}, le = (e, t) => {
 	let n = e.recipe, r = t.getRecipe("default") ?? o;
 	return n && typeof n != "string" ? n : typeof n == "string" ? t.getRecipe(n) ?? r : r;
-}, ce = (e, t) => {
+}, ue = (e, t) => {
 	let n = e.theme, r = t.getTheme("neutral") ?? d;
 	return n && typeof n != "string" ? n : typeof n == "string" ? t.getTheme(n) ?? r : r;
-}, N = (t) => {
+}, j = (t) => {
 	let n = {};
 	for (let r of e) {
 		let e = t[r]?.tokens;
 		e && Object.assign(n, e);
 	}
 	return n;
-}, le = {
+}, de = {
 	...r,
-	...N(t)
-}, ue = {
+	...j(t)
+}, fe = {
 	"--mlf-border-width": "1.5px",
 	"--mlf-ring-width": "5px",
 	"--mlf-color-border": "var(--mlf-color-border-strong)"
-}, de = {
+}, pe = {
 	compact: {
 		"--mlf-shell-gap": "1rem",
 		"--mlf-layout-gap": "0.85rem",
@@ -800,7 +800,7 @@ var e = [
 		"--mlf-control-padding-block": "0.9rem",
 		"--mlf-pane-min-width": "22rem"
 	}
-}, fe = {
+}, me = {
 	"--mlf-color-bg": "Canvas",
 	"--mlf-color-surface": "Canvas",
 	"--mlf-color-surface-muted": "Canvas",
@@ -847,7 +847,7 @@ var e = [
 	"--mlf-error-bg": "Canvas",
 	"--mlf-error-border": "CanvasText",
 	"--mlf-chart-fill-bg": "Highlight"
-}, pe = {
+}, he = {
 	none: {
 		"--mlf-motion-fast": "0ms linear",
 		"--mlf-motion-base": "0ms linear",
@@ -869,36 +869,36 @@ var e = [
 		"--mlf-transition-duration": "250ms",
 		"--mlf-transition-easing": "ease-in-out"
 	}
-}, me = (e, t, n) => {
+}, ge = (e, t, n) => {
 	let r = t === "dark" ? e.schemes.dark?.tokens ?? e.schemes.light.tokens : e.schemes.light.tokens, i = n && e.variants?.[n]?.baseScheme === t ? e.variants[n].tokens : {};
 	return {
 		...e.sharedTokens,
 		...r,
 		...i
 	};
-}, he = e.map((e) => [`--mlf-${e}-`, e]), ge = (t) => {
+}, _e = e.map((e) => [`--mlf-${e}-`, e]), ve = (t) => {
 	let n = Object.fromEntries(e.map((e) => [e, {}]));
-	for (let [e, r] of Object.entries(t)) for (let [t, i] of he) if (e.startsWith(t)) {
+	for (let [e, r] of Object.entries(t)) for (let [t, i] of _e) if (e.startsWith(t)) {
 		n[i][e] = r;
 		break;
 	}
 	return Object.fromEntries(e.map((e) => [e, { tokens: n[e] }]));
-}, _e = (e, t, n, r, i, a, o, s = {}) => {
+}, ye = (e, t, n, r, i, a, o, s = {}) => {
 	let c = e.overrides?.density ?? (s.prefersMoreContrast ? "spacious" : n.density), l = e.overrides?.motion ?? (s.prefersReducedMotion ? "none" : n.motion), u = {
 		...e.overrides?.tokens,
-		...N(e.overrides?.components ?? {})
-	}, d = (e.variant && t.variants?.[e.variant]?.baseScheme === r ? e.variant : null) ?? (s.prefersMoreContrast && t.variants?.[`high-contrast-${r}`] ? `high-contrast-${r}` : null), f = s.prefersMoreContrast ? ue : {}, p = s.forcedColors ? fe : {}, m = {
-		...le,
-		...de[c],
-		...pe[l],
+		...j(e.overrides?.components ?? {})
+	}, d = (e.variant && t.variants?.[e.variant]?.baseScheme === r ? e.variant : null) ?? (s.prefersMoreContrast && t.variants?.[`high-contrast-${r}`] ? `high-contrast-${r}` : null), f = s.prefersMoreContrast ? fe : {}, p = s.forcedColors ? me : {}, m = {
+		...de,
+		...pe[c],
+		...he[l],
 		...f,
-		...me(t, r, d),
+		...ge(t, r, d),
 		...n.tokens,
-		...N(n.components ?? {}),
+		...j(n.components ?? {}),
 		...e.overrides?.tokens,
-		...N(e.overrides?.components ?? {}),
+		...j(e.overrides?.components ?? {}),
 		...p
-	}, h = ge(m);
+	}, h = ve(m);
 	return {
 		requestedMode: i,
 		effectiveScheme: r,
@@ -913,7 +913,7 @@ var e = [
 		components: h,
 		warnings: o
 	};
-}, ve = (e, t) => {
+}, be = (e, t) => {
 	if (!e && !t) return;
 	let n = /* @__PURE__ */ new Map();
 	for (let r of [e?.components, t?.components]) if (r) for (let [e, t] of Object.entries(r)) t && n.set(e, { tokens: {
@@ -929,7 +929,7 @@ var e = [
 		},
 		components: n.size > 0 ? Object.fromEntries(n) : void 0
 	};
-}, P = (...e) => e.reduce((e, t) => ({
+}, M = (...e) => e.reduce((e, t) => ({
 	mode: t?.mode ?? e.mode,
 	theme: t?.theme ?? e.theme,
 	recipe: t?.recipe ?? e.recipe,
@@ -937,8 +937,8 @@ var e = [
 	hostSchemeResolver: t?.hostSchemeResolver ?? e.hostSchemeResolver,
 	strict: t?.strict ?? e.strict,
 	onWarning: t?.onWarning ?? e.onWarning,
-	overrides: ve(e.overrides, t?.overrides)
-}), {}), F = (e, t, n = "source-wins") => {
+	overrides: be(e.overrides, t?.overrides)
+}), {}), N = (e, t, n = "source-wins") => {
 	let r = new Map(t.map((e) => [e.from, e.to])), i = { ...e }, a = {};
 	for (let [o, s] of Object.entries(e)) {
 		let e = r.get(o) ?? o;
@@ -951,29 +951,29 @@ var e = [
 		else a[e] = s;
 	}
 	return a;
-}, ye = (e, t) => {
+}, xe = (e, t) => {
 	let n = Object.fromEntries(Object.entries(e.schemes).map(([e, n]) => [e, n && {
 		...n,
-		tokens: F(n.tokens, t)
+		tokens: N(n.tokens, t)
 	}]));
 	return {
 		...e,
 		schemes: n,
-		sharedTokens: e.sharedTokens ? F(e.sharedTokens, t) : void 0
+		sharedTokens: e.sharedTokens ? N(e.sharedTokens, t) : void 0
 	};
-}, I = (e = {}, t = S, n = {}) => {
-	let r = ce(e, t), i = se(e, t), a = k(e, t, r, i);
-	A(e, a);
-	let o = oe(e, r, n), s = ie(e, r, o.effectiveScheme);
-	s.length > 0 && (a.push(...s), A(e, s));
-	let c = _e(e, r, i, o.effectiveScheme, o.requestedMode, o.effectiveModeSource, a, n), l = ae(c.tokens);
-	return l.length > 0 && (c.warnings.push(...l), A(e, l)), c;
-}, be = { change: "ml-design-system-change" }, L = {
+}, P = (e = {}, t = x, n = {}) => {
+	let r = ue(e, t), i = le(e, t), a = ae(e, t, r, i);
+	O(e, a);
+	let o = ce(e, r, n), s = oe(e, r, o.effectiveScheme);
+	s.length > 0 && (a.push(...s), O(e, s));
+	let c = ye(e, r, i, o.effectiveScheme, o.requestedMode, o.effectiveModeSource, a, n), l = se(c.tokens);
+	return l.length > 0 && (c.warnings.push(...l), O(e, l)), c;
+}, Se = { change: "ml-design-system-change" }, F = {
 	prefersDarkScheme: "(prefers-color-scheme: dark)",
 	prefersReducedMotion: "(prefers-reduced-motion: reduce)",
 	prefersMoreContrast: "(prefers-contrast: more)",
 	forcedColors: "(forced-colors: active)"
-}, R = {
+}, I = {
 	explicitScheme: "data-color-scheme",
 	inheritedScheme: "data-mlf-scheme",
 	effectiveScheme: "data-mlf-effective-scheme",
@@ -985,17 +985,17 @@ var e = [
 	signature: "data-mlf-signature",
 	style: "style",
 	class: "class"
-}, xe = [R.explicitScheme], Se = [
-	R.inheritedScheme,
-	R.effectiveScheme,
-	R.explicitScheme,
-	R.style,
-	R.class
-], Ce = (e) => {
+}, Ce = [I.explicitScheme], we = [
+	I.inheritedScheme,
+	I.effectiveScheme,
+	I.explicitScheme,
+	I.style,
+	I.class
+], Te = (e) => {
 	let t = 2166136261;
 	for (let n = 0; n < e.length; n += 1) t ^= e.charCodeAt(n), t = Math.imul(t, 16777619);
 	return (t >>> 0).toString(16).padStart(8, "0");
-}, z = (e) => `v1:${Ce([
+}, L = (e) => `v1:${Te([
 	e.effectiveScheme,
 	e.themeId,
 	e.variant ?? "",
@@ -1003,89 +1003,209 @@ var e = [
 	e.density,
 	e.motion,
 	...Object.entries(e.tokens).sort(([e], [t]) => e.localeCompare(t)).map(([e, t]) => `${e}:${t}`)
-].join("|"))}`, B = (e) => {
+].join("|"))}`, R = (e) => {
 	let t = {
-		[R.themeId]: e.themeId,
-		[R.recipeId]: e.recipeId,
-		[R.effectiveScheme]: e.effectiveScheme,
-		[R.inheritedScheme]: e.effectiveScheme,
-		[R.density]: e.density,
-		[R.motion]: e.motion,
-		[R.signature]: z(e)
+		[I.themeId]: e.themeId,
+		[I.recipeId]: e.recipeId,
+		[I.effectiveScheme]: e.effectiveScheme,
+		[I.inheritedScheme]: e.effectiveScheme,
+		[I.density]: e.density,
+		[I.motion]: e.motion,
+		[I.signature]: L(e)
 	};
-	return e.variant && (t[R.variantId] = e.variant), t;
-}, V = (e) => {
+	return e.variant && (t[I.variantId] = e.variant), t;
+}, z = (e) => {
 	for (let t = 0; t < e.length; t += 1) if (e.charCodeAt(t) <= 31) return !0;
 	return !1;
-}, we = (e) => {
+}, Ee = (e) => {
 	if (!e.trim()) throw Error("[mlform] createDesignSystemStylesheet requires a non-empty selector");
-	if (e.includes("{") || e.includes("}") || e.includes(";") || V(e)) throw Error("[mlform] createDesignSystemStylesheet selector contains unsafe characters");
-}, H = (e, t) => {
+	if (e.includes("{") || e.includes("}") || e.includes(";") || z(e)) throw Error("[mlform] createDesignSystemStylesheet selector contains unsafe characters");
+}, De = (e, t) => {
 	if (!e.startsWith("--")) throw Error(`[mlform] Invalid design-system token "${e}"`);
-	if (t.includes("{") || t.includes("}") || t.includes(";") || V(t)) throw Error(`[mlform] Token "${e}" contains unsafe stylesheet characters`);
-}, U = (e) => Object.entries(e.tokens).sort(([e], [t]) => e.localeCompare(t)).map(([e, t]) => (H(e, t), [e, t])), W = (e, t) => {
+	if (t.includes("{") || t.includes("}") || t.includes(";") || z(t)) throw Error(`[mlform] Token "${e}" contains unsafe stylesheet characters`);
+}, B = (e) => Object.entries(e.tokens).sort(([e], [t]) => e.localeCompare(t)).map(([e, t]) => (De(e, t), [e, t])), V = (e, t) => {
 	let n = /* @__PURE__ */ new Set();
-	for (let [r, i] of U(t)) e.setProperty(r, i), n.add(r);
+	for (let [r, i] of B(t)) e.setProperty(r, i), n.add(r);
 	return n;
-}, G = [
-	R.themeId,
-	R.variantId,
-	R.recipeId,
-	R.effectiveScheme,
-	R.inheritedScheme,
-	R.density,
-	R.motion,
-	R.signature
-], K = (e, t, n) => {
-	let r = B(t);
-	for (let t of G) {
+}, H = [
+	I.themeId,
+	I.variantId,
+	I.recipeId,
+	I.effectiveScheme,
+	I.inheritedScheme,
+	I.density,
+	I.motion,
+	I.signature
+], U = (e, t, n) => {
+	let r = R(t);
+	for (let t of H) {
 		let n = r[t];
 		n === void 0 ? e.removeAttribute(t) : e.setAttribute(t, n);
 	}
-	return n === "view-transition" && (e.style.viewTransitionName = "mlf-design-system"), e.style.colorScheme = t.effectiveScheme, W(e.style, t);
-}, Te = (e, t, n, r, i) => {
+	return n === "view-transition" && (e.style.viewTransitionName = "mlf-design-system"), e.style.colorScheme = t.effectiveScheme, V(e.style, t);
+}, Oe = (e, t, n, r, i) => {
 	for (let n of t) {
 		let t = r.get(n) ?? null;
 		t === null ? e.style.removeProperty(n) : e.style.setProperty(n, t);
 	}
-	for (let t of G) {
+	for (let t of H) {
 		let r = n.get(t) ?? null;
 		r === null ? e.removeAttribute(t) : e.setAttribute(t, r);
 	}
 	i === null ? e.style.removeProperty("color-scheme") : e.style.colorScheme = i, e.style.removeProperty("view-transition-name");
-}, q = (e) => e ? Object.entries(e).sort(([e], [t]) => e.localeCompare(t)).map(([e, t]) => `${e}:${t}`).join(",") : "", Ee = (e) => {
-	let t = Object.entries(e.variants ?? {}).sort(([e], [t]) => e.localeCompare(t)).map(([e, t]) => `${e}:${t.baseScheme}:${q(t.tokens)}`).join(";");
+}, W = (e) => e ? Object.entries(e).sort(([e], [t]) => e.localeCompare(t)).map(([e, t]) => `${e}:${t}`).join(",") : "", ke = (e) => {
+	let t = Object.entries(e.variants ?? {}).sort(([e], [t]) => e.localeCompare(t)).map(([e, t]) => `${e}:${t.baseScheme}:${W(t.tokens)}`).join(";");
 	return [
 		e.id,
 		e.label,
 		e.schemes.light.colorScheme ?? "",
-		q(e.schemes.light.tokens),
+		W(e.schemes.light.tokens),
 		e.schemes.dark?.colorScheme ?? "",
-		q(e.schemes.dark?.tokens),
-		q(e.sharedTokens),
+		W(e.schemes.dark?.tokens),
+		W(e.sharedTokens),
 		t
 	].join("|");
-}, De = (e) => {
-	let t = Object.entries(e.components ?? {}).sort(([e], [t]) => e.localeCompare(t)).map(([e, t]) => `${e}:${q(t?.tokens)}`).join(";");
+}, Ae = (e) => {
+	let t = Object.entries(e.components ?? {}).sort(([e], [t]) => e.localeCompare(t)).map(([e, t]) => `${e}:${W(t?.tokens)}`).join(";");
 	return [
 		e.id,
 		e.label,
 		e.density,
 		e.motion,
-		q(e.tokens),
+		W(e.tokens),
 		t
 	].join("|");
-}, Oe = (e) => {
-	let t = typeof e.theme == "string" ? `ref:${e.theme}` : e.theme ? `inline:${Ee(e.theme)}` : "", n = typeof e.recipe == "string" ? `ref:${e.recipe}` : e.recipe ? `inline:${De(e.recipe)}` : "", r = e.overrides, i = q(r?.tokens), a = Object.entries(r?.components ?? {}).sort(([e], [t]) => e.localeCompare(t)).filter(([, e]) => !!e?.tokens).map(([e, t]) => `${e}:${q(t.tokens)}`).join(";");
+}, je = (e) => {
+	let t = typeof e.theme == "string" ? `ref:${e.theme}` : e.theme ? `inline:${ke(e.theme)}` : "", n = typeof e.recipe == "string" ? `ref:${e.recipe}` : e.recipe ? `inline:${Ae(e.recipe)}` : "", r = e.overrides, i = W(r?.tokens), a = Object.entries(r?.components ?? {}).sort(([e], [t]) => e.localeCompare(t)).filter(([, e]) => !!e?.tokens).map(([e, t]) => `${e}:${W(t.tokens)}`).join(";");
 	return `${e.mode ?? ""}|${t}|${n}|${e.variant ?? ""}|${e.strict ?? ""}|${r?.density ?? ""}|${r?.motion ?? ""}|${i}|${a}`;
-}, J = (e, t) => `${t.prefersDarkScheme}|${t.prefersReducedMotion}|${t.prefersMoreContrast}|${t.forcedColors}|${Oe(e)}`, Y = (e) => {
+}, G = (e, t) => `${t.prefersDarkScheme}|${t.prefersReducedMotion}|${t.prefersMoreContrast}|${t.forcedColors}|${je(e)}`, K = (e, t, n) => {
+	for (let r of Object.keys(n)) {
+		if (t.has(r)) continue;
+		let n = e.style.getPropertyValue(r);
+		t.set(r, n === "" ? null : n);
+	}
+}, Me = (e, t, n, r) => {
+	let i = new Set(Object.keys(r));
+	for (let r of t) {
+		if (i.has(r)) continue;
+		let t = n.get(r) ?? null;
+		t === null ? e.style.removeProperty(r) : e.style.setProperty(r, t);
+	}
+}, Ne = (e, t) => {
+	let n = R(t);
+	for (let t of H) {
+		let r = n[t];
+		if (r === void 0) {
+			if (e.hasAttribute(t)) return !1;
+			continue;
+		}
+		if (e.getAttribute(t) !== r) return !1;
+	}
+	if (e.getAttribute(I.signature) === n[I.signature]) return !0;
+	if (e.style.colorScheme !== t.effectiveScheme) return !1;
+	let r = /* @__PURE__ */ new Map();
+	for (let t = 0; t < e.style.length; t += 1) {
+		let n = e.style.item(t);
+		n.startsWith("--mlf-") && r.set(n, e.style.getPropertyValue(n).trim());
+	}
+	let i = Object.entries(t.tokens);
+	if (r.size === i.length) {
+		for (let [e, t] of i) if (r.get(e) !== t) return !1;
+		return !0;
+	}
+	if (typeof window > "u") return !1;
+	let a = window.getComputedStyle(e);
+	for (let [e, t] of i) if (a.getPropertyValue(e).trim() !== t) return !1;
+	return !0;
+}, Pe = (e, t, n) => Ne(e, n.resolved) ? (K(e, t, n.resolved.tokens), {
+	appliedTokens: new Set(Object.keys(n.resolved.tokens)),
+	resolved: n.resolved,
+	signature: L(n.resolved),
+	envSnapshot: n.envSnapshot
+}) : null, q = (e) => {
 	if (!e) return null;
 	let t = e.trim().toLowerCase();
 	return t === "light" || t === "dark" ? t : null;
-}, X = (e, t) => {
+}, J = (e, t) => {
+	if ((t.mode ?? "auto") !== "inherit") return {
+		scheme: null,
+		source: null
+	};
+	if (t.hostSchemeResolver) {
+		let n = t.hostSchemeResolver(e);
+		if (n) return {
+			scheme: n,
+			source: "host-resolver"
+		};
+	}
+	let n = q(e.getAttribute(I.explicitScheme));
+	if (n) return {
+		scheme: n,
+		source: "host-attribute"
+	};
+	let r = e.parentElement;
+	for (; r;) {
+		let e = q(r.getAttribute(I.inheritedScheme)) ?? q(r.getAttribute(I.effectiveScheme)) ?? q(r.getAttribute(I.explicitScheme));
+		if (e) return {
+			scheme: e,
+			source: "host-attribute"
+		};
+		r = r.parentElement;
+	}
+	if (typeof window > "u") return {
+		scheme: null,
+		source: null
+	};
+	let i = window.getComputedStyle(e).colorScheme;
+	return i.includes("dark") ? {
+		scheme: "dark",
+		source: "host-style"
+	} : i.includes("light") ? {
+		scheme: "light",
+		source: "host-style"
+	} : {
+		scheme: null,
+		source: null
+	};
+}, Fe = () => typeof window < "u" && typeof window.matchMedia == "function" ? {
+	scheme: window.matchMedia(F.prefersDarkScheme),
+	motion: window.matchMedia(F.prefersReducedMotion),
+	contrast: window.matchMedia(F.prefersMoreContrast),
+	forcedColors: window.matchMedia(F.forcedColors)
+} : {
+	scheme: null,
+	motion: null,
+	contrast: null,
+	forcedColors: null
+}, Y = (e, t) => {
 	typeof e.addEventListener == "function" ? e.addEventListener("change", t) : e.addListener?.(t);
-}, Z = (e, t) => {
+}, X = (e, t) => {
 	typeof e.removeEventListener == "function" ? e.removeEventListener("change", t) : e.removeListener?.(t);
+}, Ie = (e) => ({
+	prefersDarkScheme: e.scheme?.matches ?? !1,
+	prefersReducedMotion: e.motion?.matches ?? !1,
+	prefersMoreContrast: e.contrast?.matches ?? !1,
+	forcedColors: e.forcedColors?.matches ?? !1
+}), Le = (e, t, n, r) => {
+	!e || t.has(n) || (t.add(n), e.observe(n, {
+		attributes: !0,
+		childList: r,
+		subtree: !1,
+		attributeFilter: [...we]
+	}));
+}, Z = (e, t, n) => {
+	if (!t) return;
+	let r = [e], i = e.parentElement;
+	for (; i;) r.push(i), i = i.parentElement;
+	if (r.length === n.size && r.every((e) => n.has(e))) return;
+	t.disconnect(), n.clear(), n.add(e), t.observe(e, {
+		attributes: !0,
+		childList: !1,
+		subtree: !1,
+		attributeFilter: [...Ce]
+	});
+	let a = e.parentElement;
+	for (; a;) Le(t, n, a, !0), a = a.parentElement;
 }, Q = class {
 	#e;
 	#t;
@@ -1115,39 +1235,39 @@ var e = [
 	#T = "";
 	#E = null;
 	constructor({ host: e, registry: t, getConfig: n, onChange: r, transition: i, hydrate: a }) {
-		this.#e = e, this.#t = t ?? S, this.#n = n, this.#r = r, this.#p = i ?? "none", this.#f = a ?? !1, this.#y = e.style.colorScheme || null;
-		let o = typeof window < "u" && typeof window.matchMedia == "function";
-		this.#i = o ? window.matchMedia(L.prefersDarkScheme) : null, this.#o = o ? window.matchMedia(L.prefersReducedMotion) : null, this.#c = o ? window.matchMedia(L.prefersMoreContrast) : null, this.#u = o ? window.matchMedia(L.forcedColors) : null, this.#a = () => this.refresh(), this.#s = () => this.refresh(), this.#l = () => this.refresh(), this.#d = () => this.refresh(), this.#m = typeof MutationObserver < "u" ? new MutationObserver(() => this.refresh()) : null, this.#h = this.#t.onChange(() => {
+		this.#e = e, this.#t = t ?? x, this.#n = n, this.#r = r, this.#p = i ?? "none", this.#f = a ?? !1, this.#y = e.style.colorScheme || null;
+		let o = Fe();
+		this.#i = o.scheme, this.#o = o.motion, this.#c = o.contrast, this.#u = o.forcedColors, this.#a = () => this.refresh(), this.#s = () => this.refresh(), this.#l = () => this.refresh(), this.#d = () => this.refresh(), this.#m = typeof MutationObserver < "u" ? new MutationObserver(() => this.refresh()) : null, this.#h = this.#t.onChange(() => {
 			this.#S = "", this.#T = "", this.refresh();
 		});
-		for (let t of G) this.#_.set(t, e.getAttribute(t));
+		for (let t of H) this.#_.set(t, e.getAttribute(t));
 	}
 	get resolved() {
 		return this.#E;
 	}
 	connect() {
-		this.#x || (this.#x = !0, this.#i && X(this.#i, this.#a), this.#o && X(this.#o, this.#s), this.#c && X(this.#c, this.#l), this.#u && X(this.#u, this.#d), this.#k(), !(this.#f && this.#P()) && this.refresh());
+		this.#x || (this.#x = !0, this.#i && Y(this.#i, this.#a), this.#o && Y(this.#o, this.#s), this.#c && Y(this.#c, this.#l), this.#u && Y(this.#u, this.#d), Z(this.#e, this.#m, this.#g), !(this.#f && this.#O()) && this.refresh());
 	}
 	disconnect() {
-		this.#x && (this.#x = !1, this.#i && Z(this.#i, this.#a), this.#o && Z(this.#o, this.#s), this.#c && Z(this.#c, this.#l), this.#u && Z(this.#u, this.#d), this.#I(), this.#m?.disconnect(), this.#h?.(), this.#g.clear(), Te(this.#e, this.#b, this.#_, this.#v, this.#y), this.#b.clear(), this.#S = "", this.#T = "", this.#E = null);
+		this.#x && (this.#x = !1, this.#i && X(this.#i, this.#a), this.#o && X(this.#o, this.#s), this.#c && X(this.#c, this.#l), this.#u && X(this.#u, this.#d), this.#k(), this.#m?.disconnect(), this.#h?.(), this.#g.clear(), Oe(this.#e, this.#b, this.#_, this.#v, this.#y), this.#b.clear(), this.#S = "", this.#T = "", this.#E = null);
 	}
 	refresh() {
 		if (!this.#x) return;
-		this.#k();
-		let e = this.#n(), t = this.#N(), n = J(e, t);
+		Z(this.#e, this.#m, this.#g);
+		let e = this.#n(), t = this.#A(), n = G(e, t);
 		if (n === this.#T && (e.mode ?? "auto") !== "inherit") return;
-		let r = this.#O(), i = I(e, this.#t, {
+		let r = J(this.#e, e), i = P(e, this.#t, {
 			inheritedScheme: r.scheme,
 			inheritedSource: r.source ?? void 0,
 			systemScheme: t.prefersDarkScheme ? "dark" : "light",
 			prefersReducedMotion: t.prefersReducedMotion,
 			prefersMoreContrast: t.prefersMoreContrast,
 			forcedColors: t.forcedColors
-		}), a = z(i);
+		}), a = L(i);
 		if (this.#T = n, a === this.#S) return;
 		let o = this.#E;
 		this.#S = a, this.#E = i, this.#D(() => {
-			this.#j(i.tokens), this.#M(i.tokens), this.#b = K(this.#e, i, this.#p), this.#r?.(i), this.#e.dispatchEvent(new CustomEvent(be.change, {
+			K(this.#e, this.#v, i.tokens), Me(this.#e, this.#b, this.#v, i.tokens), this.#b = U(this.#e, i, this.#p), this.#r?.(i), this.#e.dispatchEvent(new CustomEvent(Se.change, {
 				detail: { designSystem: i },
 				bubbles: !0,
 				composed: !0
@@ -1155,7 +1275,7 @@ var e = [
 		}, i, o);
 	}
 	#D(e, t, n) {
-		this.#I();
+		this.#k();
 		let r = new AbortController();
 		if (this.#C = r, this.#p === "none") {
 			r.signal.aborted || e(), this.#C = null;
@@ -1179,136 +1299,32 @@ var e = [
 		this.#w = typeof a == "function" ? a : null;
 	}
 	#O() {
-		let e = this.#n();
-		if ((e.mode ?? "auto") !== "inherit") return {
-			scheme: null,
-			source: null
-		};
-		if (e.hostSchemeResolver) {
-			let t = e.hostSchemeResolver(this.#e);
-			if (t) return {
-				scheme: t,
-				source: "host-resolver"
-			};
-		}
-		let t = Y(this.#e.getAttribute(R.explicitScheme));
-		if (t) return {
-			scheme: t,
-			source: "host-attribute"
-		};
-		let n = this.#e.parentElement;
-		for (; n;) {
-			let e = Y(n.getAttribute(R.inheritedScheme)) ?? Y(n.getAttribute(R.effectiveScheme)) ?? Y(n.getAttribute(R.explicitScheme));
-			if (e) return {
-				scheme: e,
-				source: "host-attribute"
-			};
-			n = n.parentElement;
-		}
-		if (typeof window > "u") return {
-			scheme: null,
-			source: null
-		};
-		let r = window.getComputedStyle(this.#e).colorScheme;
-		return r.includes("dark") ? {
-			scheme: "dark",
-			source: "host-style"
-		} : r.includes("light") ? {
-			scheme: "light",
-			source: "host-style"
-		} : {
-			scheme: null,
-			source: null
-		};
-	}
-	#k() {
-		if (!this.#m) return;
-		let e = [this.#e], t = this.#e.parentElement;
-		for (; t;) e.push(t), t = t.parentElement;
-		if (e.length === this.#g.size && e.every((e) => this.#g.has(e))) return;
-		this.#m.disconnect(), this.#g.clear(), this.#g.add(this.#e), this.#m.observe(this.#e, {
-			attributes: !0,
-			childList: !1,
-			subtree: !1,
-			attributeFilter: [...xe]
-		});
-		let n = this.#e.parentElement;
-		for (; n;) this.#A(n, !0), n = n.parentElement;
-	}
-	#A(e, t) {
-		!this.#m || this.#g.has(e) || (this.#g.add(e), this.#m.observe(e, {
-			attributes: !0,
-			childList: t,
-			subtree: !1,
-			attributeFilter: [...Se]
-		}));
-	}
-	#j(e) {
-		for (let t of Object.keys(e)) {
-			if (this.#v.has(t)) continue;
-			let e = this.#e.style.getPropertyValue(t);
-			this.#v.set(t, e === "" ? null : e);
-		}
-	}
-	#M(e) {
-		let t = new Set(Object.keys(e));
-		for (let e of this.#b) {
-			if (t.has(e)) continue;
-			let n = this.#v.get(e) ?? null;
-			n === null ? this.#e.style.removeProperty(e) : this.#e.style.setProperty(e, n);
-		}
-	}
-	#N() {
-		return {
-			prefersDarkScheme: this.#i?.matches ?? !1,
-			prefersReducedMotion: this.#o?.matches ?? !1,
-			prefersMoreContrast: this.#c?.matches ?? !1,
-			forcedColors: this.#u?.matches ?? !1
-		};
-	}
-	#P() {
-		let e = this.#n(), t = this.#N(), n = this.#O(), r = I(e, this.#t, {
+		let e = this.#n(), t = this.#A(), n = J(this.#e, e), r = P(e, this.#t, {
 			inheritedScheme: n.scheme,
 			inheritedSource: n.source ?? void 0,
 			systemScheme: t.prefersDarkScheme ? "dark" : "light",
 			prefersReducedMotion: t.prefersReducedMotion,
 			prefersMoreContrast: t.prefersMoreContrast,
 			forcedColors: t.forcedColors
+		}), i = Pe(this.#e, this.#v, {
+			resolved: r,
+			envSnapshot: G(e, t)
 		});
-		return this.#F(r) ? (this.#j(r.tokens), this.#b = new Set(Object.keys(r.tokens)), this.#E = r, this.#S = z(r), this.#T = J(e, t), !0) : !1;
-	}
-	#F(e) {
-		let t = B(e);
-		for (let e of G) {
-			let n = t[e];
-			if (n === void 0) {
-				if (this.#e.hasAttribute(e)) return !1;
-				continue;
-			}
-			if (this.#e.getAttribute(e) !== n) return !1;
-		}
-		if (this.#e.getAttribute(R.signature) === t[R.signature]) return !0;
-		if (this.#e.style.colorScheme !== e.effectiveScheme) return !1;
-		let n = /* @__PURE__ */ new Map();
-		for (let e = 0; e < this.#e.style.length; e += 1) {
-			let t = this.#e.style.item(e);
-			t.startsWith("--mlf-") && n.set(t, this.#e.style.getPropertyValue(t).trim());
-		}
-		let r = Object.entries(e.tokens);
-		if (n.size === r.length) {
-			for (let [e, t] of r) if (n.get(e) !== t) return !1;
-			return !0;
-		}
-		if (typeof window > "u") return !1;
-		let i = window.getComputedStyle(this.#e);
-		for (let [e, t] of r) if (i.getPropertyValue(e).trim() !== t) return !1;
-		return !0;
+		return i ? (this.#b = i.appliedTokens, this.#E = i.resolved, this.#S = i.signature, this.#T = i.envSnapshot, !0) : !1;
 	}
-	#I() {
+	#k() {
 		this.#C?.abort(), this.#C = null, this.#w?.(), this.#w = null;
 	}
+	#A() {
+		return Ie({
+			scheme: this.#i,
+			motion: this.#o,
+			contrast: this.#c,
+			forcedColors: this.#u
+		});
+	}
 }, $ = (e, t = {}, n = !1) => {
-	let r = (...e) => m(P(...e)), i = r(t.config), a = i, o = t.registry?.clone() ?? S.clone(), s = new Q({
+	let r = (...e) => m(M(...e)), i = r(t.config), a = i, o = t.registry?.clone() ?? x.clone(), s = new Q({
 		host: e,
 		registry: o,
 		getConfig: () => a,
@@ -1338,15 +1354,15 @@ var e = [
 			s.disconnect();
 		}
 	});
-}, ke = (e, t = {}) => $(e, t), Ae = /^-?[_a-zA-Z][_a-zA-Z0-9-]*$/, je = (e) => {
+}, Re = (e, t = {}) => $(e, t), ze = /^-?[_a-zA-Z][_a-zA-Z0-9-]*$/, Be = (e) => {
 	if (!e.trim()) throw Error("[mlform] createDesignSystemStylesheet layer name must be non-empty");
 	if (e.includes("{") || e.includes("}") || e.includes(";")) throw Error("[mlform] createDesignSystemStylesheet layer name contains unsafe characters");
-	if (e.split(".").some((e) => !Ae.test(e))) throw Error("[mlform] createDesignSystemStylesheet layer name is not a valid CSS layer name");
-}, Me = (e, t = ":host") => {
+	if (e.split(".").some((e) => !ze.test(e))) throw Error("[mlform] createDesignSystemStylesheet layer name is not a valid CSS layer name");
+}, Ve = (e, t = ":host") => {
 	let n = typeof t == "string" ? { selector: t } : t, r = n.selector ?? ":host", i = n.layer;
-	we(r), i && je(i);
-	let a = `${r} {\n${U(e).map(([e, t]) => `  ${e}: ${t};`).join("\n")}\n}`;
+	Ee(r), i && Be(i);
+	let a = `${r} {\n${B(e).map(([e, t]) => `  ${e}: ${t};`).join("\n")}\n}`;
 	return i ? `@layer ${i} {\n${a}\n}` : a;
-}, Ne = (e, t = {}) => $(e, t, !0);
+}, He = (e, t = {}) => $(e, t, !0);
 //#endregion
-export { r as C, i as S, e as T, y as _, K as a, g as b, B as c, F as d, P as f, b as g, S as h, Q as i, I as l, te as m, Me as n, W as o, ne as p, ke as r, z as s, Ne as t, ye as u, x as v, t as w, h as x, v as y };
+export { r as C, i as S, e as T, v as _, U as a, g as b, R as c, N as d, M as f, y as g, x as h, Q as i, P as l, ne as m, Ve as n, V as o, re as p, Re as r, L as s, He as t, xe as u, b as v, t as w, h as x, _ as y };