mlform 0.1.8 → 0.1.9

package/dist/{design-system-Dxx1Sh7r.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);
@@ -607,47 +777,36 @@ var e = [
 		for (let [e, n] of this.#n) t.#n.set(e, new Map(n));
 		return t;
 	}
-}, _ = () => new ee(), v = [
-	d,
-	l,
-	f,
-	p,
-	u
-], y = [
-	o,
-	s,
-	c,
-	a
-], b = () => {
+}, _ = () => new ee(), v = () => {
 	let e = _();
-	for (let t of v) e.registerTheme(t);
-	for (let t of y) e.registerRecipe(t);
+	for (let t of p) e.registerTheme(t);
+	for (let t of s) e.registerRecipe(t);
 	return e;
-}, x = b(), S = new Set(i), te = (t) => {
+}, y = v(), b = new Set(i), te = (t) => {
 	for (let n of e) if (t.startsWith(`--mlf-${n}-`)) return n;
 	return null;
 }, ne = (e) => {
 	for (let t of Object.keys(e)) {
-		if (!S.has(t)) throw Error(`[mlform] Unknown global token "${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 };
 }, re = (e, t) => {
 	for (let n of Object.keys(t)) {
-		if (!S.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 } };
-}, 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({
+}, 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}`
 	});
-}, 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({
+}, 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,
@@ -655,11 +814,11 @@ var e = [
 	});
 }, ie = (e, t, n) => {
 	if (n) for (let [r, i] of Object.entries(n)) {
-		w.lastIndex = 0;
+		S.lastIndex = 0;
 		let n;
-		for (; (n = w.exec(i)) !== null;) {
+		for (; (n = S.exec(i)) !== null;) {
 			let i = n[1];
-			!t.has(i) && C.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 = [
 			});
 		}
 	}
-}, D = (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);
 	});
-}, ae = (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}"`
-	}), 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);
+	}), 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];
-		T(a, `overrides.components.${n}.tokens`, e?.tokens), E(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 D(a);
-}, oe = (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 ? [] : [{
@@ -714,15 +873,15 @@ var e = [
 		value: e.variant,
 		message: `[mlform] Theme "${t.id}" does not define variant "${e.variant}"`
 	}];
-}, se = (e) => {
+}, ae = (e) => {
 	let t = [];
-	return ie(t, new Set(Object.keys(e)), e), D(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"));
 	}
-}, k = "light", A = (e, t) => t === "light" || !!e.schemes.dark, ce = (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,
@@ -749,11 +908,11 @@ var e = [
 		effectiveScheme: k,
 		effectiveModeSource: "theme-fallback"
 	};
-}, le = (e, t) => {
+}, 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;
-}, ue = (e, t) => {
-	let n = e.theme, r = t.getTheme("neutral") ?? d;
+}, ce = (e, t) => {
+	let n = e.theme, r = t.getTheme("neutral") ?? f;
 	return n && typeof n != "string" ? n : typeof n == "string" ? t.getTheme(n) ?? r : r;
 }, j = (t) => {
 	let n = {};
@@ -762,14 +921,14 @@ var e = [
 		e && Object.assign(n, e);
 	}
 	return n;
-}, de = {
+}, le = {
 	...r,
 	...j(t)
-}, fe = {
+}, ue = {
 	"--mlf-border-width": "1.5px",
 	"--mlf-ring-width": "5px",
 	"--mlf-color-border": "var(--mlf-color-border-strong)"
-}, pe = {
+}, de = {
 	compact: {
 		"--mlf-shell-gap": "1rem",
 		"--mlf-layout-gap": "0.85rem",
@@ -800,7 +959,7 @@ var e = [
 		"--mlf-control-padding-block": "0.9rem",
 		"--mlf-pane-min-width": "22rem"
 	}
-}, me = {
+}, fe = {
 	"--mlf-color-bg": "Canvas",
 	"--mlf-color-surface": "Canvas",
 	"--mlf-color-surface-muted": "Canvas",
@@ -847,7 +1006,7 @@ var e = [
 	"--mlf-error-bg": "Canvas",
 	"--mlf-error-border": "CanvasText",
 	"--mlf-chart-fill-bg": "Highlight"
-}, he = {
+}, pe = {
 	none: {
 		"--mlf-motion-fast": "0ms linear",
 		"--mlf-motion-base": "0ms linear",
@@ -869,36 +1028,36 @@ var e = [
 		"--mlf-transition-duration": "250ms",
 		"--mlf-transition-easing": "ease-in-out"
 	}
-}, ge = (e, t, n) => {
+}, me = (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
 	};
-}, _e = e.map((e) => [`--mlf-${e}-`, e]), ve = (t) => {
+}, he = e.map((e) => [`--mlf-${e}-`, e]), ge = (t) => {
 	let n = Object.fromEntries(e.map((e) => [e, {}]));
-	for (let [e, r] of Object.entries(t)) for (let [t, i] of _e) if (e.startsWith(t)) {
+	for (let [e, r] of Object.entries(t)) for (let [t, i] of he) if (e.startsWith(t)) {
 		n[i][e] = r;
 		break;
 	}
 	return Object.fromEntries(e.map((e) => [e, { tokens: n[e] }]));
-}, ye = (e, t, n, r, i, a, o, s = {}) => {
+}, _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,
 		...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],
+	}, 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],
 		...f,
-		...ge(t, r, d),
+		...me(t, r, d),
 		...n.tokens,
 		...j(n.components ?? {}),
 		...e.overrides?.tokens,
 		...j(e.overrides?.components ?? {}),
 		...p
-	}, h = ve(m);
+	}, h = ge(m);
 	return {
 		requestedMode: i,
 		effectiveScheme: r,
@@ -913,7 +1072,7 @@ var e = [
 		components: h,
 		warnings: o
 	};
-}, be = (e, t) => {
+}, ve = (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: {
@@ -937,7 +1096,7 @@ var e = [
 	hostSchemeResolver: t?.hostSchemeResolver ?? e.hostSchemeResolver,
 	strict: t?.strict ?? e.strict,
 	onWarning: t?.onWarning ?? e.onWarning,
-	overrides: be(e.overrides, t?.overrides)
+	overrides: ve(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)) {
@@ -951,7 +1110,7 @@ var e = [
 		else a[e] = s;
 	}
 	return a;
-}, xe = (e, t) => {
+}, P = (e, t) => {
 	let n = Object.fromEntries(Object.entries(e.schemes).map(([e, n]) => [e, n && {
 		...n,
 		tokens: N(n.tokens, t)
@@ -961,19 +1120,19 @@ var e = [
 		schemes: n,
 		sharedTokens: e.sharedTokens ? N(e.sharedTokens, t) : void 0
 	};
-}, P = (e = {}, t = x, n = {}) => {
-	let r = ue(e, t), i = le(e, t), a = ae(e, t, r, i);
+}, 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 = ce(e, r, n), s = oe(e, r, o.effectiveScheme);
+	let o = oe(e, r, n), s = D(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);
+	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), O(e, l)), c;
-}, Se = { change: "ml-design-system-change" }, F = {
+}, 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)"
-}, I = {
+}, 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"
-}, Ce = [I.explicitScheme], we = [
-	I.inheritedScheme,
-	I.effectiveScheme,
-	I.explicitScheme,
-	I.style,
-	I.class
-], Te = (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");
-}, L = (e) => `v1:${Te([
+}, B = (e) => `v1:${je([
 	e.effectiveScheme,
 	e.themeId,
 	e.variant ?? "",
@@ -1003,97 +1251,97 @@ var e = [
 	e.density,
 	e.motion,
 	...Object.entries(e.tokens).sort(([e], [t]) => e.localeCompare(t)).map(([e, t]) => `${e}:${t}`)
-].join("|"))}`, R = (e) => {
+].join("|"))}`, V = (e) => {
 	let t = {
-		[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)
+		[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[I.variantId] = e.variant), t;
-}, z = (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;
-}, Ee = (e) => {
+}, Me = (e) => {
 	if (!e.trim()) throw Error("[mlform] createDesignSystemStylesheet requires a non-empty selector");
-	if (e.includes("{") || e.includes("}") || e.includes(";") || z(e)) throw Error("[mlform] createDesignSystemStylesheet selector contains unsafe characters");
-}, De = (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(";") || 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) => {
+	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 B(t)) e.setProperty(r, i), n.add(r);
+	for (let [r, i] of U(t)) e.setProperty(r, i), n.add(r);
 	return n;
-}, 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) {
+}, G = [
+	L.themeId,
+	L.variantId,
+	L.recipeId,
+	L.effectiveScheme,
+	L.inheritedScheme,
+	L.density,
+	L.motion,
+	L.signature
+], K = (e, t, n) => {
+	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, V(e.style, t);
-}, Oe = (e, t, n, r, i) => {
+	return n === "view-transition" && (e.style.viewTransitionName = "mlf-design-system"), e.style.colorScheme = t.effectiveScheme, W(e.style, t);
+}, 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);
 	}
-	for (let t of H) {
+	for (let t of G) {
 		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");
-}, 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(";");
+}, 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,
 		e.label,
 		e.schemes.light.colorScheme ?? "",
-		W(e.schemes.light.tokens),
+		q(e.schemes.light.tokens),
 		e.schemes.dark?.colorScheme ?? "",
-		W(e.schemes.dark?.tokens),
-		W(e.sharedTokens),
+		q(e.schemes.dark?.tokens),
+		q(e.sharedTokens),
 		t
 	].join("|");
-}, Ae = (e) => {
-	let t = Object.entries(e.components ?? {}).sort(([e], [t]) => e.localeCompare(t)).map(([e, t]) => `${e}:${W(t?.tokens)}`).join(";");
+}, 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,
 		e.label,
 		e.density,
 		e.motion,
-		W(e.tokens),
+		q(e.tokens),
 		t
 	].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(";");
+}, 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}`;
-}, G = (e, t) => `${t.prefersDarkScheme}|${t.prefersReducedMotion}|${t.prefersMoreContrast}|${t.forcedColors}|${je(e)}`, K = (e, t, n) => {
+}, 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);
 	}
-}, Me = (e, t, n, r) => {
+}, 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);
 	}
-}, Ne = (e, t) => {
-	let n = R(t);
-	for (let t of H) {
+}, 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;
@@ -1101,7 +1349,7 @@ var e = [
 		}
 		if (e.getAttribute(t) !== r) return !1;
 	}
-	if (e.getAttribute(I.signature) === n[I.signature]) return !0;
+	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) {
@@ -1117,81 +1365,17 @@ var e = [
 	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), {
+}, 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: L(n.resolved),
+	signature: B(n.resolved),
 	envSnapshot: n.envSnapshot
-}) : null, q = (e) => {
-	if (!e) return null;
-	let t = e.trim().toLowerCase();
-	return t === "light" || t === "dark" ? t : null;
-}, 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);
-}, 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) => {
+}) : null, Be = (e, t, n, r) => {
 	!e || t.has(n) || (t.add(n), e.observe(n, {
 		attributes: !0,
 		childList: r,
 		subtree: !1,
-		attributeFilter: [...we]
+		attributeFilter: [...xe]
 	}));
 }, Z = (e, t, n) => {
 	if (!t) return;
@@ -1202,10 +1386,10 @@ var e = [
 		attributes: !0,
 		childList: !1,
 		subtree: !1,
-		attributeFilter: [...Ce]
+		attributeFilter: [...be]
 	});
 	let a = e.parentElement;
-	for (; a;) Le(t, n, a, !0), a = a.parentElement;
+	for (; a;) Be(t, n, a, !0), a = a.parentElement;
 }, Q = class {
 	#e;
 	#t;
@@ -1235,47 +1419,56 @@ var e = [
 	#T = "";
 	#E = null;
 	constructor({ host: e, registry: t, getConfig: n, onChange: r, transition: i, hydrate: a }) {
-		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.#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 H) this.#_.set(t, e.getAttribute(t));
+		for (let t of G) this.#_.set(t, e.getAttribute(t));
 	}
 	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 && 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());
+		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 && 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);
+		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;
 		Z(this.#e, this.#m, this.#g);
-		let e = this.#n(), t = this.#A(), n = G(e, t);
+		let e = this.#n(), t = this.#j(), n = J(e, t);
 		if (n === this.#T && (e.mode ?? "auto") !== "inherit") return;
-		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 = L(i);
-		if (this.#T = n, a === this.#S) return;
-		let o = this.#E;
-		this.#S = a, this.#E = i, this.#D(() => {
-			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
-			}));
-		}, 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.#k();
+	#O(e, t, n) {
+		this.#A();
 		let r = new AbortController();
 		if (this.#C = r, this.#p === "none") {
 			r.signal.aborted || e(), this.#C = null;
@@ -1298,33 +1491,21 @@ var e = [
 		}, i);
 		this.#w = typeof a == "function" ? a : null;
 	}
-	#O() {
-		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)
+	#k() {
+		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)
 		});
-		return i ? (this.#b = i.appliedTokens, this.#E = i.resolved, this.#S = i.signature, this.#T = i.envSnapshot, !0) : !1;
+		return r ? (this.#b = r.appliedTokens, this.#E = r.resolved, this.#S = r.signature, this.#T = r.envSnapshot, !0) : !1;
 	}
-	#k() {
+	#A() {
 		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
-		});
+	#j() {
+		return ke(this.#i, this.#o, this.#c, this.#u);
 	}
 }, $ = (e, t = {}, n = !1) => {
-	let r = (...e) => m(M(...e)), i = r(t.config), a = i, o = t.registry?.clone() ?? x.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,
@@ -1354,15 +1535,15 @@ var e = [
 			s.disconnect();
 		}
 	});
-}, Re = (e, t = {}) => $(e, t), ze = /^-?[_a-zA-Z][_a-zA-Z0-9-]*$/, Be = (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) => !ze.test(e))) throw Error("[mlform] createDesignSystemStylesheet layer name is not a valid CSS layer name");
-}, Ve = (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;
-	Ee(r), i && Be(i);
-	let a = `${r} {\n${B(e).map(([e, t]) => `  ${e}: ${t};`).join("\n")}\n}`;
+	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;
-}, He = (e, t = {}) => $(e, t, !0);
+}, Ge = (e, t = {}) => $(e, t, !0);
 //#endregion
-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 };
+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 };