mlform 0.1.7 → 0.1.9

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

@@ -187,44 +187,206 @@ var e = [
 	density: "comfortable",
 	motion: "subtle",
 	tokens: { "--mlf-shell-bg": "transparent" }
-}, s = {
-	id: "minimal",
-	label: "Minimal",
-	density: "compact",
-	motion: "none",
-	tokens: {
-		"--mlf-shadow-md": "none",
-		"--mlf-shadow-lg": "none"
+}, s = [
+	o,
+	{
+		id: "minimal",
+		label: "Minimal",
+		density: "compact",
+		motion: "none",
+		tokens: {
+			"--mlf-shadow-md": "none",
+			"--mlf-shadow-lg": "none"
+		},
+		components: {
+			hero: { tokens: {
+				"--mlf-hero-bg": "var(--mlf-color-surface)",
+				"--mlf-hero-shadow": "none"
+			} },
+			field: { tokens: {
+				"--mlf-field-bg": "var(--mlf-color-surface)",
+				"--mlf-field-shadow": "none"
+			} },
+			report: { tokens: {
+				"--mlf-report-bg": "var(--mlf-color-surface)",
+				"--mlf-report-shadow": "none"
+			} },
+			submit: { tokens: {
+				"--mlf-submit-shadow": "none",
+				"--mlf-submit-shadow-hover": "none"
+			} }
+		}
 	},
-	components: {
-		hero: { tokens: {
-			"--mlf-hero-bg": "var(--mlf-color-surface)",
-			"--mlf-hero-shadow": "none"
-		} },
-		field: { tokens: {
-			"--mlf-field-bg": "var(--mlf-color-surface)",
-			"--mlf-field-shadow": "none"
-		} },
-		report: { tokens: {
-			"--mlf-report-bg": "var(--mlf-color-surface)",
-			"--mlf-report-shadow": "none"
-		} },
-		submit: { tokens: {
-			"--mlf-submit-shadow": "none",
-			"--mlf-submit-shadow-hover": "none"
-		} }
-	}
-}, c = {
-	id: "soft",
-	label: "Soft",
-	density: "comfortable",
-	motion: "subtle",
-	components: {
-		hero: { tokens: { "--mlf-hero-bg": "radial-gradient(circle at top left, color-mix(in srgb, var(--mlf-color-accent) 10%, transparent), transparent 42%), linear-gradient(180deg, color-mix(in srgb, var(--mlf-color-surface) 92%, var(--mlf-color-surface-elevated)), color-mix(in srgb, var(--mlf-color-surface-muted) 88%, var(--mlf-color-surface-elevated)))" } },
-		field: { tokens: { "--mlf-field-bg": "linear-gradient(180deg, color-mix(in srgb, var(--mlf-color-surface) 96%, var(--mlf-color-surface-elevated)), color-mix(in srgb, var(--mlf-color-surface-muted) 94%, var(--mlf-color-surface-elevated)))" } },
-		report: { tokens: { "--mlf-report-bg": "linear-gradient(180deg, color-mix(in srgb, var(--mlf-color-surface) 95%, var(--mlf-color-surface-elevated)), color-mix(in srgb, var(--mlf-color-surface-muted) 92%, var(--mlf-color-surface-elevated)))" } }
+	{
+		id: "soft",
+		label: "Soft",
+		density: "comfortable",
+		motion: "subtle",
+		components: {
+			hero: { tokens: { "--mlf-hero-bg": "radial-gradient(circle at top left, color-mix(in srgb, var(--mlf-color-accent) 10%, transparent), transparent 42%), linear-gradient(180deg, color-mix(in srgb, var(--mlf-color-surface) 92%, var(--mlf-color-surface-elevated)), color-mix(in srgb, var(--mlf-color-surface-muted) 88%, var(--mlf-color-surface-elevated)))" } },
+			field: { tokens: { "--mlf-field-bg": "linear-gradient(180deg, color-mix(in srgb, var(--mlf-color-surface) 96%, var(--mlf-color-surface-elevated)), color-mix(in srgb, var(--mlf-color-surface-muted) 94%, var(--mlf-color-surface-elevated)))" } },
+			report: { tokens: { "--mlf-report-bg": "linear-gradient(180deg, color-mix(in srgb, var(--mlf-color-surface) 95%, var(--mlf-color-surface-elevated)), color-mix(in srgb, var(--mlf-color-surface-muted) 92%, var(--mlf-color-surface-elevated)))" } }
+		}
+	},
+	a
+], c = {
+	id: "airbnb",
+	label: "Airbnb",
+	schemes: {
+		light: {
+			colorScheme: "light",
+			tokens: {
+				"--mlf-font-family": "\"Airbnb Cereal VF\", Circular, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
+				"--mlf-shadow-sm": "rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 6px, rgba(0, 0, 0, 0.10) 0px 4px 8px",
+				"--mlf-shadow-md": "rgba(0, 0, 0, 0.08) 0px 4px 12px",
+				"--mlf-shadow-lg": "rgba(0, 0, 0, 0.10) 0px 8px 24px, rgba(0, 0, 0, 0.06) 0px 2px 8px",
+				"--mlf-radius-sm": "8px",
+				"--mlf-radius-md": "14px",
+				"--mlf-radius-lg": "20px",
+				"--mlf-radius-xl": "32px",
+				"--mlf-radius-full": "9999px",
+				"--mlf-color-bg": "#ffffff",
+				"--mlf-color-surface": "#ffffff",
+				"--mlf-color-surface-muted": "#f7f7f7",
+				"--mlf-color-surface-elevated": "#ffffff",
+				"--mlf-color-text": "#222222",
+				"--mlf-color-text-muted": "#6a6a6a",
+				"--mlf-color-border": "#dddddd",
+				"--mlf-color-border-strong": "#c1c1c1",
+				"--mlf-color-accent": "#ff385c",
+				"--mlf-color-accent-hover": "#e00b41",
+				"--mlf-color-accent-soft": "rgba(255, 56, 92, 0.12)",
+				"--mlf-color-success": "#008a05",
+				"--mlf-color-warning": "#b26a00",
+				"--mlf-color-danger": "#c13515",
+				"--mlf-color-danger-soft": "rgba(193, 53, 21, 0.12)",
+				"--mlf-color-focus-ring": "rgba(34, 34, 34, 0.24)",
+				"--mlf-color-overlay": "rgba(255, 255, 255, 0.82)",
+				"--mlf-color-hover-surface": "#f2f2f2",
+				"--mlf-color-chart-track": "rgba(34, 34, 34, 0.12)",
+				"--mlf-color-premium-luxe": "#460479",
+				"--mlf-color-premium-plus": "#92174d",
+				"--mlf-color-legal": "#428bff"
+			}
+		},
+		dark: {
+			colorScheme: "dark",
+			tokens: {
+				"--mlf-font-family": "\"Airbnb Cereal VF\", Circular, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
+				"--mlf-shadow-sm": "rgba(0, 0, 0, 0.36) 0px 0px 0px 1px, rgba(0, 0, 0, 0.32) 0px 2px 6px, rgba(0, 0, 0, 0.42) 0px 4px 8px",
+				"--mlf-shadow-md": "rgba(0, 0, 0, 0.38) 0px 6px 18px",
+				"--mlf-shadow-lg": "rgba(0, 0, 0, 0.44) 0px 16px 42px, rgba(0, 0, 0, 0.30) 0px 4px 14px",
+				"--mlf-radius-sm": "8px",
+				"--mlf-radius-md": "14px",
+				"--mlf-radius-lg": "20px",
+				"--mlf-radius-xl": "32px",
+				"--mlf-radius-full": "9999px",
+				"--mlf-color-bg": "#121212",
+				"--mlf-color-surface": "#1c1c1c",
+				"--mlf-color-surface-muted": "#262626",
+				"--mlf-color-surface-elevated": "#2b2b2b",
+				"--mlf-color-text": "#f7f7f7",
+				"--mlf-color-text-muted": "#b0b0b0",
+				"--mlf-color-border": "#3a3a3a",
+				"--mlf-color-border-strong": "#505050",
+				"--mlf-color-accent": "#ff385c",
+				"--mlf-color-accent-hover": "#ff5a75",
+				"--mlf-color-accent-soft": "rgba(255, 56, 92, 0.18)",
+				"--mlf-color-success": "#2fbd59",
+				"--mlf-color-warning": "#ffb340",
+				"--mlf-color-danger": "#ff6b5f",
+				"--mlf-color-danger-soft": "rgba(255, 107, 95, 0.16)",
+				"--mlf-color-focus-ring": "rgba(255, 56, 92, 0.34)",
+				"--mlf-color-overlay": "rgba(18, 18, 18, 0.84)",
+				"--mlf-color-hover-surface": "#333333",
+				"--mlf-color-chart-track": "rgba(247, 247, 247, 0.14)",
+				"--mlf-color-premium-luxe": "#b26bff",
+				"--mlf-color-premium-plus": "#ff6bb0",
+				"--mlf-color-legal": "#7aa7ff"
+			}
+		}
 	}
 }, l = {
+	id: "clickhouse",
+	label: "ClickHouse",
+	schemes: {
+		light: {
+			colorScheme: "light",
+			tokens: {
+				"--mlf-font-family": "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif",
+				"--mlf-font-family-mono": "\"JetBrains Mono\", \"SFMono-Regular\", Consolas, \"Liberation Mono\", monospace",
+				"--mlf-shadow-sm": "none",
+				"--mlf-shadow-md": "none",
+				"--mlf-shadow-lg": "none",
+				"--mlf-radius-sm": "6px",
+				"--mlf-radius-md": "8px",
+				"--mlf-radius-lg": "12px",
+				"--mlf-radius-xl": "12px",
+				"--mlf-radius-full": "9999px",
+				"--mlf-color-bg": "#f7f7f2",
+				"--mlf-color-surface": "#ffffff",
+				"--mlf-color-surface-muted": "#eeeeea",
+				"--mlf-color-surface-elevated": "#f4f4ef",
+				"--mlf-color-text": "#0a0a0a",
+				"--mlf-color-text-muted": "#5a5a5a",
+				"--mlf-color-border": "#d8d8cf",
+				"--mlf-color-border-strong": "#bdbdaf",
+				"--mlf-color-accent": "#e6eb52",
+				"--mlf-color-accent-hover": "#d6dc3f",
+				"--mlf-color-accent-soft": "rgba(230, 235, 82, 0.28)",
+				"--mlf-color-success": "#16803a",
+				"--mlf-color-warning": "#9a7b00",
+				"--mlf-color-danger": "#c73939",
+				"--mlf-color-danger-soft": "rgba(199, 57, 57, 0.12)",
+				"--mlf-color-focus-ring": "rgba(230, 235, 82, 0.42)",
+				"--mlf-color-overlay": "rgba(247, 247, 242, 0.84)",
+				"--mlf-color-hover-surface": "#eeeeea",
+				"--mlf-color-chart-track": "rgba(10, 10, 10, 0.12)",
+				"--mlf-color-code-bg": "#1a1a1a",
+				"--mlf-color-code-text": "#e6e6e6",
+				"--mlf-color-info": "#3b82f6"
+			}
+		},
+		dark: {
+			colorScheme: "dark",
+			tokens: {
+				"--mlf-font-family": "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif",
+				"--mlf-font-family-mono": "\"JetBrains Mono\", \"SFMono-Regular\", Consolas, \"Liberation Mono\", monospace",
+				"--mlf-shadow-sm": "none",
+				"--mlf-shadow-md": "none",
+				"--mlf-shadow-lg": "none",
+				"--mlf-radius-sm": "6px",
+				"--mlf-radius-md": "8px",
+				"--mlf-radius-lg": "12px",
+				"--mlf-radius-xl": "12px",
+				"--mlf-radius-full": "9999px",
+				"--mlf-color-bg": "#0a0a0a",
+				"--mlf-color-surface": "#121212",
+				"--mlf-color-surface-muted": "#1a1a1a",
+				"--mlf-color-surface-elevated": "#242424",
+				"--mlf-color-text": "#ffffff",
+				"--mlf-color-text-muted": "#cccccc",
+				"--mlf-color-border": "#2a2a2a",
+				"--mlf-color-border-strong": "#3a3a3a",
+				"--mlf-color-accent": "#faff69",
+				"--mlf-color-accent-hover": "#e6eb52",
+				"--mlf-color-accent-soft": "rgba(250, 255, 105, 0.16)",
+				"--mlf-color-success": "#22c55e",
+				"--mlf-color-warning": "#facc15",
+				"--mlf-color-danger": "#ef4444",
+				"--mlf-color-danger-soft": "rgba(239, 68, 68, 0.16)",
+				"--mlf-color-focus-ring": "rgba(250, 255, 105, 0.42)",
+				"--mlf-color-overlay": "rgba(10, 10, 10, 0.86)",
+				"--mlf-color-hover-surface": "#242424",
+				"--mlf-color-chart-track": "rgba(255, 255, 255, 0.14)",
+				"--mlf-color-code-bg": "#1a1a1a",
+				"--mlf-color-code-text": "#e6e6e6",
+				"--mlf-color-code-muted": "#888888",
+				"--mlf-color-info": "#3b82f6"
+			}
+		}
+	}
+}, u = {
 	id: "cobalt",
 	label: "Cobalt",
 	schemes: {
@@ -280,7 +442,7 @@ var e = [
 			}
 		}
 	}
-}, u = {
+}, d = {
 	id: "graphite",
 	label: "Graphite",
 	schemes: {
@@ -336,7 +498,7 @@ var e = [
 			}
 		}
 	}
-}, d = {
+}, f = {
 	id: "neutral",
 	label: "Neutral",
 	schemes: {
@@ -372,119 +534,127 @@ var e = [
 			}
 		}
 	}
-}, f = {
-	id: "sage",
-	label: "Sage",
-	schemes: {
-		light: {
-			colorScheme: "light",
-			tokens: {
-				"--mlf-color-bg": "#f2f6f1",
-				"--mlf-color-surface": "#fbfdfb",
-				"--mlf-color-surface-muted": "#e8efe6",
-				"--mlf-color-surface-elevated": "#ffffff",
-				"--mlf-color-text": "#203126",
-				"--mlf-color-text-muted": "#5e7264",
-				"--mlf-color-border": "#cfdbcf",
-				"--mlf-color-border-strong": "#bbccbc",
-				"--mlf-color-accent": "#2f7d57",
-				"--mlf-color-accent-hover": "#256847",
-				"--mlf-color-accent-soft": "rgba(47, 125, 87, 0.12)",
-				"--mlf-color-success": "#2d8a57",
-				"--mlf-color-warning": "#bd7d29",
-				"--mlf-color-danger": "#b94a48",
-				"--mlf-color-danger-soft": "rgba(185, 74, 72, 0.12)",
-				"--mlf-color-focus-ring": "rgba(47, 125, 87, 0.24)",
-				"--mlf-color-overlay": "rgba(251, 253, 251, 0.78)",
-				"--mlf-color-hover-surface": "#dde9db",
-				"--mlf-color-chart-track": "rgba(32, 49, 38, 0.12)"
-			}
-		},
-		dark: {
-			colorScheme: "dark",
-			tokens: {
-				"--mlf-shadow-sm": "0 1px 3px rgba(0, 0, 0, 0.45)",
-				"--mlf-shadow-md": "0 14px 30px rgba(0, 0, 0, 0.35)",
-				"--mlf-shadow-lg": "0 24px 60px rgba(0, 0, 0, 0.28)",
-				"--mlf-color-bg": "#121a15",
-				"--mlf-color-surface": "#182119",
-				"--mlf-color-surface-muted": "#203024",
-				"--mlf-color-surface-elevated": "#24372a",
-				"--mlf-color-text": "#edf5ef",
-				"--mlf-color-text-muted": "#a8b9aa",
-				"--mlf-color-border": "#304234",
-				"--mlf-color-border-strong": "#3f5544",
-				"--mlf-color-accent": "#59b07d",
-				"--mlf-color-accent-hover": "#74c492",
-				"--mlf-color-accent-soft": "rgba(89, 176, 125, 0.16)",
-				"--mlf-color-success": "#67d595",
-				"--mlf-color-warning": "#efbb67",
-				"--mlf-color-danger": "#ff8e8a",
-				"--mlf-color-danger-soft": "rgba(255, 142, 138, 0.14)",
-				"--mlf-color-focus-ring": "rgba(89, 176, 125, 0.3)",
-				"--mlf-color-overlay": "rgba(18, 26, 21, 0.84)",
-				"--mlf-color-hover-surface": "#2a3d30",
-				"--mlf-color-chart-track": "rgba(168, 185, 170, 0.18)"
+}, p = [
+	l,
+	c,
+	f,
+	u,
+	{
+		id: "sage",
+		label: "Sage",
+		schemes: {
+			light: {
+				colorScheme: "light",
+				tokens: {
+					"--mlf-color-bg": "#f2f6f1",
+					"--mlf-color-surface": "#fbfdfb",
+					"--mlf-color-surface-muted": "#e8efe6",
+					"--mlf-color-surface-elevated": "#ffffff",
+					"--mlf-color-text": "#203126",
+					"--mlf-color-text-muted": "#5e7264",
+					"--mlf-color-border": "#cfdbcf",
+					"--mlf-color-border-strong": "#bbccbc",
+					"--mlf-color-accent": "#2f7d57",
+					"--mlf-color-accent-hover": "#256847",
+					"--mlf-color-accent-soft": "rgba(47, 125, 87, 0.12)",
+					"--mlf-color-success": "#2d8a57",
+					"--mlf-color-warning": "#bd7d29",
+					"--mlf-color-danger": "#b94a48",
+					"--mlf-color-danger-soft": "rgba(185, 74, 72, 0.12)",
+					"--mlf-color-focus-ring": "rgba(47, 125, 87, 0.24)",
+					"--mlf-color-overlay": "rgba(251, 253, 251, 0.78)",
+					"--mlf-color-hover-surface": "#dde9db",
+					"--mlf-color-chart-track": "rgba(32, 49, 38, 0.12)"
+				}
+			},
+			dark: {
+				colorScheme: "dark",
+				tokens: {
+					"--mlf-shadow-sm": "0 1px 3px rgba(0, 0, 0, 0.45)",
+					"--mlf-shadow-md": "0 14px 30px rgba(0, 0, 0, 0.35)",
+					"--mlf-shadow-lg": "0 24px 60px rgba(0, 0, 0, 0.28)",
+					"--mlf-color-bg": "#121a15",
+					"--mlf-color-surface": "#182119",
+					"--mlf-color-surface-muted": "#203024",
+					"--mlf-color-surface-elevated": "#24372a",
+					"--mlf-color-text": "#edf5ef",
+					"--mlf-color-text-muted": "#a8b9aa",
+					"--mlf-color-border": "#304234",
+					"--mlf-color-border-strong": "#3f5544",
+					"--mlf-color-accent": "#59b07d",
+					"--mlf-color-accent-hover": "#74c492",
+					"--mlf-color-accent-soft": "rgba(89, 176, 125, 0.16)",
+					"--mlf-color-success": "#67d595",
+					"--mlf-color-warning": "#efbb67",
+					"--mlf-color-danger": "#ff8e8a",
+					"--mlf-color-danger-soft": "rgba(255, 142, 138, 0.14)",
+					"--mlf-color-focus-ring": "rgba(89, 176, 125, 0.3)",
+					"--mlf-color-overlay": "rgba(18, 26, 21, 0.84)",
+					"--mlf-color-hover-surface": "#2a3d30",
+					"--mlf-color-chart-track": "rgba(168, 185, 170, 0.18)"
+				}
 			}
 		}
-	}
-}, p = {
-	id: "sunset",
-	label: "Sunset",
-	schemes: {
-		light: {
-			colorScheme: "light",
-			tokens: {
-				"--mlf-color-bg": "#fff6f0",
-				"--mlf-color-surface": "#fffdfb",
-				"--mlf-color-surface-muted": "#ffe9dd",
-				"--mlf-color-surface-elevated": "#ffffff",
-				"--mlf-color-text": "#3b241d",
-				"--mlf-color-text-muted": "#7f5a50",
-				"--mlf-color-border": "#f0cdbb",
-				"--mlf-color-border-strong": "#e0b59f",
-				"--mlf-color-accent": "#d96a3a",
-				"--mlf-color-accent-hover": "#be5628",
-				"--mlf-color-accent-soft": "rgba(217, 106, 58, 0.14)",
-				"--mlf-color-success": "#2e8c63",
-				"--mlf-color-warning": "#d18a20",
-				"--mlf-color-danger": "#ca4a45",
-				"--mlf-color-danger-soft": "rgba(202, 74, 69, 0.12)",
-				"--mlf-color-focus-ring": "rgba(217, 106, 58, 0.24)",
-				"--mlf-color-overlay": "rgba(255, 253, 251, 0.8)",
-				"--mlf-color-hover-surface": "#ffdcca",
-				"--mlf-color-chart-track": "rgba(59, 36, 29, 0.12)"
-			}
-		},
-		dark: {
-			colorScheme: "dark",
-			tokens: {
-				"--mlf-shadow-sm": "0 1px 3px rgba(0, 0, 0, 0.45)",
-				"--mlf-shadow-md": "0 14px 30px rgba(0, 0, 0, 0.35)",
-				"--mlf-shadow-lg": "0 24px 60px rgba(0, 0, 0, 0.28)",
-				"--mlf-color-bg": "#1e1512",
-				"--mlf-color-surface": "#261b18",
-				"--mlf-color-surface-muted": "#32231f",
-				"--mlf-color-surface-elevated": "#392925",
-				"--mlf-color-text": "#fff1ea",
-				"--mlf-color-text-muted": "#d3b0a3",
-				"--mlf-color-border": "#513830",
-				"--mlf-color-border-strong": "#68473d",
-				"--mlf-color-accent": "#ff986b",
-				"--mlf-color-accent-hover": "#ffb089",
-				"--mlf-color-accent-soft": "rgba(255, 152, 107, 0.16)",
-				"--mlf-color-success": "#57c694",
-				"--mlf-color-warning": "#ffc36d",
-				"--mlf-color-danger": "#ff8d86",
-				"--mlf-color-danger-soft": "rgba(255, 141, 134, 0.14)",
-				"--mlf-color-focus-ring": "rgba(255, 152, 107, 0.3)",
-				"--mlf-color-overlay": "rgba(30, 21, 18, 0.84)",
-				"--mlf-color-hover-surface": "#422d27",
-				"--mlf-color-chart-track": "rgba(211, 176, 163, 0.18)"
+	},
+	{
+		id: "sunset",
+		label: "Sunset",
+		schemes: {
+			light: {
+				colorScheme: "light",
+				tokens: {
+					"--mlf-color-bg": "#fff6f0",
+					"--mlf-color-surface": "#fffdfb",
+					"--mlf-color-surface-muted": "#ffe9dd",
+					"--mlf-color-surface-elevated": "#ffffff",
+					"--mlf-color-text": "#3b241d",
+					"--mlf-color-text-muted": "#7f5a50",
+					"--mlf-color-border": "#f0cdbb",
+					"--mlf-color-border-strong": "#e0b59f",
+					"--mlf-color-accent": "#d96a3a",
+					"--mlf-color-accent-hover": "#be5628",
+					"--mlf-color-accent-soft": "rgba(217, 106, 58, 0.14)",
+					"--mlf-color-success": "#2e8c63",
+					"--mlf-color-warning": "#d18a20",
+					"--mlf-color-danger": "#ca4a45",
+					"--mlf-color-danger-soft": "rgba(202, 74, 69, 0.12)",
+					"--mlf-color-focus-ring": "rgba(217, 106, 58, 0.24)",
+					"--mlf-color-overlay": "rgba(255, 253, 251, 0.8)",
+					"--mlf-color-hover-surface": "#ffdcca",
+					"--mlf-color-chart-track": "rgba(59, 36, 29, 0.12)"
+				}
+			},
+			dark: {
+				colorScheme: "dark",
+				tokens: {
+					"--mlf-shadow-sm": "0 1px 3px rgba(0, 0, 0, 0.45)",
+					"--mlf-shadow-md": "0 14px 30px rgba(0, 0, 0, 0.35)",
+					"--mlf-shadow-lg": "0 24px 60px rgba(0, 0, 0, 0.28)",
+					"--mlf-color-bg": "#1e1512",
+					"--mlf-color-surface": "#261b18",
+					"--mlf-color-surface-muted": "#32231f",
+					"--mlf-color-surface-elevated": "#392925",
+					"--mlf-color-text": "#fff1ea",
+					"--mlf-color-text-muted": "#d3b0a3",
+					"--mlf-color-border": "#513830",
+					"--mlf-color-border-strong": "#68473d",
+					"--mlf-color-accent": "#ff986b",
+					"--mlf-color-accent-hover": "#ffb089",
+					"--mlf-color-accent-soft": "rgba(255, 152, 107, 0.16)",
+					"--mlf-color-success": "#57c694",
+					"--mlf-color-warning": "#ffc36d",
+					"--mlf-color-danger": "#ff8d86",
+					"--mlf-color-danger-soft": "rgba(255, 141, 134, 0.14)",
+					"--mlf-color-focus-ring": "rgba(255, 152, 107, 0.3)",
+					"--mlf-color-overlay": "rgba(30, 21, 18, 0.84)",
+					"--mlf-color-hover-surface": "#422d27",
+					"--mlf-color-chart-track": "rgba(211, 176, 163, 0.18)"
+				}
 			}
 		}
-	}
-}, m = (e) => {
+	},
+	d
+], m = (e) => {
 	if (typeof e == "object" && e && !Object.isFrozen(e)) {
 		Object.freeze(e);
 		for (let t of Object.values(e)) m(t);
@@ -522,7 +692,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 +777,48 @@ var e = [
 		for (let [e, n] of this.#n) t.#n.set(e, new Map(n));
 		return t;
 	}
-}, v = () => new _(), y = [
-	d,
-	l,
-	f,
-	p,
-	u
-], b = [
-	o,
-	s,
-	c,
-	a
-], x = () => {
-	let e = v();
-	for (let t of y) e.registerTheme(t);
-	for (let t of b) e.registerRecipe(t);
+}, _ = () => new ee(), v = () => {
+	let e = _();
+	for (let t of p) e.registerTheme(t);
+	for (let t of s) e.registerRecipe(t);
 	return e;
-}, S = x(), C = new Set(i), ee = (t) => {
+}, y = v(), b = 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 (!b.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 (!b.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({
+}, x = new Set(i), S = /var\(\s*(--mlf-[a-z0-9-]+)\s*[,)]/g, C = (e, t, n) => {
+	if (n) for (let r of Object.keys(n)) !r.startsWith("--mlf-") || x.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({
+}, w = (e, t, n, r) => {
+	if (r) for (let i of Object.keys(r)) !i.startsWith("--mlf-") || !x.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;
+		S.lastIndex = 0;
 		let n;
-		for (; (n = T.exec(i)) !== null;) {
+		for (; (n = S.exec(i)) !== null;) {
 			let i = n[1];
-			!t.has(i) && w.has(i) && e.push({
+			!t.has(i) && x.has(i) && e.push({
 				code: "broken-token-reference",
 				path: r,
 				value: i,
@@ -667,7 +826,7 @@ var e = [
 			});
 		}
 	}
-}, O = (e) => {
+}, T = (e) => {
 	let t = /* @__PURE__ */ new Set();
 	return e.filter((e) => {
 		let n = [
@@ -678,7 +837,7 @@ var e = [
 		].join("|");
 		return t.has(n) ? !1 : (t.add(n), !0);
 	});
-}, k = (t, n, r, i) => {
+}, E = (t, n, r, i) => {
 	let a = [];
 	typeof t.theme == "string" && !n.getTheme(t.theme) && a.push({
 		code: "unknown-theme-id",
@@ -690,17 +849,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);
+	}), C(a, `theme "${r.id}".sharedTokens`, r.sharedTokens), C(a, `theme "${r.id}".schemes.light.tokens`, r.schemes.light.tokens), C(a, `theme "${r.id}".schemes.dark.tokens`, r.schemes.dark?.tokens);
+	for (let [e, t] of Object.entries(r.variants ?? {})) C(a, `theme "${r.id}".variants.${e}.tokens`, t.tokens);
+	C(a, `recipe "${i.id}".tokens`, i.tokens);
+	for (let [e, t] of Object.entries(i.components ?? {})) C(a, `recipe "${i.id}".components.${e}.tokens`, t?.tokens), w(a, e, `recipe "${i.id}".components.${e}.tokens`, t?.tokens);
+	C(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);
+		C(a, `overrides.components.${n}.tokens`, e?.tokens), w(a, n, `overrides.components.${n}.tokens`, e?.tokens);
 	}
-	return O(a);
-}, ie = (e, t, n) => {
+	return T(a);
+}, D = (e, t, n) => {
 	if (!e.variant) return [];
 	let r = t.variants?.[e.variant];
 	return r ? r.baseScheme === n ? [] : [{
@@ -716,46 +875,46 @@ var e = [
 	}];
 }, ae = (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), T(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, oe = (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) => {
 	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) => {
-	let n = e.theme, r = t.getTheme("neutral") ?? d;
+	let n = e.theme, r = t.getTheme("neutral") ?? f;
 	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;
@@ -764,7 +923,7 @@ var e = [
 	return n;
 }, le = {
 	...r,
-	...N(t)
+	...j(t)
 }, ue = {
 	"--mlf-border-width": "1.5px",
 	"--mlf-ring-width": "5px",
@@ -886,7 +1045,7 @@ var e = [
 }, _e = (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 ?? {})
+		...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 ? ue : {}, p = s.forcedColors ? fe : {}, m = {
 		...le,
 		...de[c],
@@ -894,9 +1053,9 @@ var e = [
 		...f,
 		...me(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);
 	return {
@@ -929,7 +1088,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,
@@ -938,7 +1097,7 @@ var e = [
 	strict: t?.strict ?? e.strict,
 	onWarning: t?.onWarning ?? e.onWarning,
 	overrides: ve(e.overrides, t?.overrides)
-}), {}), F = (e, t, n = "source-wins") => {
+}), {}), 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 +1110,29 @@ var e = [
 		else a[e] = s;
 	}
 	return a;
-}, ye = (e, t) => {
+}, P = (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));
+}, F = (e = {}, t = y, n = {}) => {
+	let r = ce(e, t), i = se(e, t), a = E(e, t, r, i);
+	O(e, a);
+	let o = oe(e, r, n), s = D(e, r, o.effectiveScheme);
+	s.length > 0 && (a.push(...s), O(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 = {
+	return l.length > 0 && (c.warnings.push(...l), O(e, l)), c;
+}, ye = { change: "ml-design-system-change" }, I = {
 	prefersDarkScheme: "(prefers-color-scheme: dark)",
 	prefersReducedMotion: "(prefers-reduced-motion: reduce)",
 	prefersMoreContrast: "(prefers-contrast: more)",
 	forcedColors: "(forced-colors: active)"
-}, R = {
+}, L = {
 	explicitScheme: "data-color-scheme",
 	inheritedScheme: "data-mlf-scheme",
 	effectiveScheme: "data-mlf-effective-scheme",
@@ -985,17 +1144,106 @@ 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) => {
+}, be = [L.explicitScheme], xe = [
+	L.inheritedScheme,
+	L.effectiveScheme,
+	L.explicitScheme,
+	L.style,
+	L.class
+], R = (e) => {
+	if (!e) return null;
+	let t = e.trim().toLowerCase();
+	return t === "light" || t === "dark" ? t : null;
+}, Se = (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 = R(e.getAttribute(L.explicitScheme));
+	if (n) return {
+		scheme: n,
+		source: "host-attribute"
+	};
+	let r = e.parentElement;
+	for (; r;) {
+		let e = R(r.getAttribute(L.inheritedScheme)) ?? R(r.getAttribute(L.effectiveScheme)) ?? R(r.getAttribute(L.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
+	};
+}, Ce = () => typeof window < "u" && typeof window.matchMedia == "function" ? {
+	scheme: window.matchMedia(I.prefersDarkScheme),
+	motion: window.matchMedia(I.prefersReducedMotion),
+	contrast: window.matchMedia(I.prefersMoreContrast),
+	forcedColors: window.matchMedia(I.forcedColors)
+} : {
+	scheme: null,
+	motion: null,
+	contrast: null,
+	forcedColors: null
+}, we = (e, t) => {
+	typeof e.addEventListener == "function" ? e.addEventListener("change", t) : e.addListener?.(t);
+}, Te = (e, t) => {
+	typeof e.removeEventListener == "function" ? e.removeEventListener("change", t) : e.removeListener?.(t);
+}, Ee = (e) => ({
+	prefersDarkScheme: e.scheme?.matches ?? !1,
+	prefersReducedMotion: e.motion?.matches ?? !1,
+	prefersMoreContrast: e.contrast?.matches ?? !1,
+	forcedColors: e.forcedColors?.matches ?? !1
+}), De = (e) => {
+	for (let t of e) t.query && we(t.query, t.listener);
+}, Oe = (e) => {
+	for (let t of e) t.query && Te(t.query, t.listener);
+}, ke = (e, t, n, r) => Ee({
+	scheme: e,
+	motion: t,
+	contrast: n,
+	forcedColors: r
+}), z = (e, t, n, r) => {
+	let i = Se(e, t);
+	return F(t, n, {
+		inheritedScheme: i.scheme,
+		inheritedSource: i.source ?? void 0,
+		systemScheme: r.prefersDarkScheme ? "dark" : "light",
+		prefersReducedMotion: r.prefersReducedMotion,
+		prefersMoreContrast: r.prefersMoreContrast,
+		forcedColors: r.forcedColors
+	});
+}, Ae = (e, t) => {
+	e.dispatchEvent(new CustomEvent(ye.change, {
+		detail: { designSystem: t },
+		bubbles: !0,
+		composed: !0
+	}));
+}, je = (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([
+}, B = (e) => `v1:${je([
 	e.effectiveScheme,
 	e.themeId,
 	e.variant ?? "",
@@ -1003,47 +1251,47 @@ 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("|"))}`, V = (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)
+		[L.themeId]: e.themeId,
+		[L.recipeId]: e.recipeId,
+		[L.effectiveScheme]: e.effectiveScheme,
+		[L.inheritedScheme]: e.effectiveScheme,
+		[L.density]: e.density,
+		[L.motion]: e.motion,
+		[L.signature]: B(e)
 	};
-	return e.variant && (t[R.variantId] = e.variant), t;
-}, V = (e) => {
+	return e.variant && (t[L.variantId] = e.variant), t;
+}, H = (e) => {
 	for (let t = 0; t < e.length; t += 1) if (e.charCodeAt(t) <= 31) return !0;
 	return !1;
-}, we = (e) => {
+}, Me = (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(";") || H(e)) throw Error("[mlform] createDesignSystemStylesheet selector contains unsafe characters");
+}, Ne = (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(";") || H(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]) => (Ne(e, t), [e, t])), W = (e, t) => {
 	let n = /* @__PURE__ */ new Set();
 	for (let [r, i] of U(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
+	L.themeId,
+	L.variantId,
+	L.recipeId,
+	L.effectiveScheme,
+	L.inheritedScheme,
+	L.density,
+	L.motion,
+	L.signature
 ], K = (e, t, n) => {
-	let r = B(t);
+	let r = V(t);
 	for (let t of G) {
 		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) => {
+}, Pe = (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);
@@ -1053,7 +1301,7 @@ var e = [
 		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) => {
+}, q = (e) => e ? Object.entries(e).sort(([e], [t]) => e.localeCompare(t)).map(([e, t]) => `${e}:${t}`).join(",") : "", Fe = (e) => {
 	let t = Object.entries(e.variants ?? {}).sort(([e], [t]) => e.localeCompare(t)).map(([e, t]) => `${e}:${t.baseScheme}:${q(t.tokens)}`).join(";");
 	return [
 		e.id,
@@ -1065,7 +1313,7 @@ var e = [
 		q(e.sharedTokens),
 		t
 	].join("|");
-}, De = (e) => {
+}, Ie = (e) => {
 	let t = Object.entries(e.components ?? {}).sort(([e], [t]) => e.localeCompare(t)).map(([e, t]) => `${e}:${q(t?.tokens)}`).join(";");
 	return [
 		e.id,
@@ -1075,17 +1323,73 @@ var e = [
 		q(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(";");
+}, Le = (e) => {
+	let t = typeof e.theme == "string" ? `ref:${e.theme}` : e.theme ? `inline:${Fe(e.theme)}` : "", n = typeof e.recipe == "string" ? `ref:${e.recipe}` : e.recipe ? `inline:${Ie(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(";");
 	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) => {
-	if (!e) return null;
-	let t = e.trim().toLowerCase();
-	return t === "light" || t === "dark" ? t : null;
-}, X = (e, t) => {
-	typeof e.addEventListener == "function" ? e.addEventListener("change", t) : e.addListener?.(t);
-}, Z = (e, t) => {
-	typeof e.removeEventListener == "function" ? e.removeEventListener("change", t) : e.removeListener?.(t);
+}, J = (e, t) => `${t.prefersDarkScheme}|${t.prefersReducedMotion}|${t.prefersMoreContrast}|${t.forcedColors}|${Le(e)}`, Y = (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);
+	}
+}, X = (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);
+	}
+}, Re = (e, t) => {
+	let n = V(t);
+	for (let t of G) {
+		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(L.signature) === n[L.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;
+}, ze = (e, t, n) => Re(e, n.resolved) ? (Y(e, t, n.resolved.tokens), {
+	appliedTokens: new Set(Object.keys(n.resolved.tokens)),
+	resolved: n.resolved,
+	signature: B(n.resolved),
+	envSnapshot: n.envSnapshot
+}) : null, Be = (e, t, n, r) => {
+	!e || t.has(n) || (t.add(n), e.observe(n, {
+		attributes: !0,
+		childList: r,
+		subtree: !1,
+		attributeFilter: [...xe]
+	}));
+}, 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: [...be]
+	});
+	let a = e.parentElement;
+	for (; a;) Be(t, n, a, !0), a = a.parentElement;
 }, Q = class {
 	#e;
 	#t;
@@ -1115,9 +1419,9 @@ 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 ?? y, this.#n = n, this.#r = r, this.#p = i ?? "none", this.#f = a ?? !1, this.#y = e.style.colorScheme || null;
+		let o = Ce();
+		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));
@@ -1125,37 +1429,46 @@ var e = [
 	get resolved() {
 		return this.#E;
 	}
+	get #D() {
+		return [
+			{
+				query: this.#i,
+				listener: this.#a
+			},
+			{
+				query: this.#o,
+				listener: this.#s
+			},
+			{
+				query: this.#c,
+				listener: this.#l
+			},
+			{
+				query: this.#u,
+				listener: this.#d
+			}
+		];
+	}
 	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, De(this.#D), Z(this.#e, this.#m, this.#g), !(this.#f && this.#k()) && 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, Oe(this.#D), this.#A(), this.#m?.disconnect(), this.#h?.(), this.#g.clear(), Pe(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.#j(), n = J(e, t);
 		if (n === this.#T && (e.mode ?? "auto") !== "inherit") return;
-		let r = this.#O(), i = I(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);
-		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, {
-				detail: { designSystem: i },
-				bubbles: !0,
-				composed: !0
-			}));
-		}, i, o);
+		let r = z(this.#e, e, this.#t, t), i = B(r);
+		if (this.#T = n, i === this.#S) return;
+		let a = this.#E;
+		this.#S = i, this.#E = r, this.#O(() => {
+			Y(this.#e, this.#v, r.tokens), X(this.#e, this.#b, this.#v, r.tokens), this.#b = K(this.#e, r, this.#p), this.#r?.(r), Ae(this.#e, r);
+		}, r, a);
 	}
-	#D(e, t, n) {
-		this.#I();
+	#O(e, t, n) {
+		this.#A();
 		let r = new AbortController();
 		if (this.#C = r, this.#p === "none") {
 			r.signal.aborted || e(), this.#C = null;
@@ -1178,137 +1491,21 @@ var e = [
 		}, i);
 		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 e = this.#n(), t = this.#j(), n = z(this.#e, e, this.#t, t), r = ze(this.#e, this.#v, {
+			resolved: n,
+			envSnapshot: J(e, t)
 		});
-		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
-		};
+		return r ? (this.#b = r.appliedTokens, this.#E = r.resolved, this.#S = r.signature, this.#T = r.envSnapshot, !0) : !1;
 	}
-	#P() {
-		let e = this.#n(), t = this.#N(), n = this.#O(), r = I(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
-		});
-		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;
-	}
-	#I() {
+	#A() {
 		this.#C?.abort(), this.#C = null, this.#w?.(), this.#w = null;
 	}
+	#j() {
+		return ke(this.#i, this.#o, this.#c, 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() ?? y.clone(), s = new Q({
 		host: e,
 		registry: o,
 		getConfig: () => a,
@@ -1338,15 +1535,15 @@ var e = [
 			s.disconnect();
 		}
 	});
-}, ke = (e, t = {}) => $(e, t), Ae = /^-?[_a-zA-Z][_a-zA-Z0-9-]*$/, je = (e) => {
+}, Ve = (e, t = {}) => $(e, t), He = /^-?[_a-zA-Z][_a-zA-Z0-9-]*$/, Ue = (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) => !He.test(e))) throw Error("[mlform] createDesignSystemStylesheet layer name is not a valid CSS layer name");
+}, We = (e, t = ":host") => {
 	let n = typeof t == "string" ? { selector: t } : t, r = n.selector ?? ":host", i = n.layer;
-	we(r), i && je(i);
+	Me(r), i && Ue(i);
 	let a = `${r} {\n${U(e).map(([e, t]) => `  ${e}: ${t};`).join("\n")}\n}`;
 	return i ? `@layer ${i} {\n${a}\n}` : a;
-}, Ne = (e, t = {}) => $(e, t, !0);
+}, Ge = (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, _, K as a, p as b, V as c, N as d, M as f, v as g, y as h, Q as i, F as l, ne as m, We as n, W as o, re as p, Ve as r, B as s, Ge as t, P as u, g as v, t as w, s as x, h as y };