@gospore/theme 1.0.146 → 1.0.148

package/dist/theme.es.js

@@ -1,71 +1,76 @@
-import { computed as e, createBlock as t, createElementBlock as n, createElementVNode as r, createVNode as i, inject as a, normalizeStyle as o, onBeforeUnmount as s, openBlock as c, provide as l, ref as u, renderSlot as d, unref as f, watch as p, withCtx as m } from "vue";
+import { computed as e, createBlock as t, createElementBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, inject as o, normalizeStyle as s, onBeforeUnmount as c, openBlock as l, provide as u, ref as d, renderSlot as f, unref as p, watch as m, withCtx as h } from "vue";
 import "what-input";
-import { DropdownItemGroup as h, DropdownItemRadio as g, DropdownMenu as _ } from "@gospore/dropdown-menu";
-//#region src/modeStorage.js
-var v = [
+import { DropdownItemGroup as g, DropdownItemRadio as _, DropdownMenu as v } from "@gospore/dropdown-menu";
+//#region src/modeStorage.ts
+var y = [
 	"auto",
 	"light",
 	"dark"
-], y = "gospore-theme-mode", b = 3600 * 24 * 365, x = "(prefers-color-scheme: dark)";
-function S() {
+], b = "gospore-theme-mode", x = 3600 * 24 * 365, S = "(prefers-color-scheme: dark)";
+function C() {
 	if (typeof document > "u") return null;
-	let e = T(y);
-	return e && v.includes(e) ? e : null;
+	let e = E(b);
+	return k(e) ? e : null;
 }
-function C(e) {
-	if (typeof document > "u" || !v.includes(e)) return;
-	let t = typeof window < "u" ? window.location.hostname : "", n = typeof window < "u" ? window.location.protocol : "", r = E(t), i = n === "https:", a = [
+function w(e) {
+	if (typeof document > "u" || !y.includes(e)) return;
+	let t = typeof window < "u" ? window.location.hostname : "", n = typeof window < "u" ? window.location.protocol : "", r = D(t), i = n === "https:", a = [
 		"path=/",
-		`max-age=${b}`,
+		`max-age=${x}`,
 		"SameSite=Lax"
 	];
-	r && a.push(`domain=${r}`), i && a.push("Secure"), document.cookie = [`${encodeURIComponent(y)}=${encodeURIComponent(e)}`, ...a].join("; ");
+	r && a.push(`domain=${r}`), i && a.push("Secure"), document.cookie = [`${encodeURIComponent(b)}=${encodeURIComponent(e)}`, ...a].join("; ");
 }
-function w(e) {
+function T(e) {
 	if (typeof document > "u") return;
-	let t = typeof e == "string" && v.includes(e) ? e : S() ?? "auto";
+	let t = k(e) ? e : C() ?? "auto";
 	console.log("Applying theme mode:", t);
-	let n = D(t);
-	document.documentElement.setAttribute("dark-mode", n);
+	let n = O(t);
+	document.documentElement.setAttribute("dark-mode", String(n));
 }
-function T(e) {
+function E(e) {
 	if (typeof document > "u" || !document.cookie) return null;
 	let t = `${encodeURIComponent(e)}=`, n = document.cookie.split("; ");
 	for (let e of n) if (e.startsWith(t)) return decodeURIComponent(e.slice(t.length));
 	return null;
 }
-function E(e) {
+function D(e) {
 	if (!e || e === "localhost") return null;
 	if (/^\d+(?:\.\d+){3}$/.test(e)) return e;
 	let t = e.split(".");
 	return t.length <= 1 ? null : t.length === 2 ? e : t.slice(-2).join(".");
 }
-function D(e) {
+function O(e) {
 	if (e === "dark") return !0;
 	if (e === "light" || typeof window > "u") return !1;
 	try {
-		let e = typeof window.matchMedia == "function" ? window.matchMedia(x) : null;
+		let e = typeof window.matchMedia == "function" ? window.matchMedia(S) : null;
 		return e ? e.matches : !1;
 	} catch {
 		return !1;
 	}
 }
+function k(e) {
+	return typeof e == "string" && y.includes(e);
+}
 //#endregion
-//#region src/portalHost.js
-var O = Symbol.for("gospore.theme.portalHost");
-function k() {
-	let t = a(O, null);
+//#region src/portalHost.ts
+var A = Symbol.for("gospore.theme.portalHost");
+function j() {
+	let t = o(A, null);
 	console.log("Using theme portal host:", t);
 	let n = typeof document < "u" ? document.body : "body";
 	return e(() => t?.value ?? n);
 }
 //#endregion
-//#region src/Theme.vue
-var ee = "(prefers-color-scheme: dark)", te = "(prefers-reduced-motion: reduce)", ne = 200, A = 3.8, j = 1.8, M = 1.15, N = 1.08, P = 2.5, F = 3, I = "#ffffff", L = "#1f2228", R = /* @__PURE__ */ Object.assign({ name: "Theme" }, {
+//#region src/Theme.vue?vue&type=script&setup=true&lang.ts
+var M = [], N = /* @__PURE__ */ new Set(), ee = "(prefers-color-scheme: dark)", te = "(prefers-reduced-motion: reduce)", ne = 200, P = 3.8, F = 1.8, I = 1.15, L = 1.08, R = 2.5, z = 3, B = "#ffffff", V = "#1f2228", H = /* @__PURE__ */ a({
+	name: "Theme",
 	__name: "Theme",
 	props: {
 		mode: {
 			type: String,
+			default: void 0,
 			validator: (e) => [
 				"auto",
 				"light",
@@ -83,51 +88,51 @@ var ee = "(prefers-color-scheme: dark)", te = "(prefers-reduced-motion: reduce)"
 		}
 	},
 	setup(t) {
-		let i = t, a = [], f = /* @__PURE__ */ new Set();
-		function m() {
+		let i = t;
+		function a() {
 			let e = document.documentElement;
 			if (!e) return;
-			f.forEach((t) => {
+			N.forEach((t) => {
 				e.style.removeProperty(t);
-			}), f.clear();
-			let t = [...a].reverse().find((e) => e.enabled && e.vars && Object.keys(e.vars).length > 0);
+			}), N.clear();
+			let t = [...M].reverse().find((e) => e.enabled && e.vars && Object.keys(e.vars).length > 0);
 			t && Object.entries(t.vars).forEach(([t, n]) => {
-				e.style.setProperty(t, n), f.add(t);
+				e.style.setProperty(t, n), N.add(t);
 			});
 		}
-		let h = window.matchMedia(ee), g = window.matchMedia(te), _ = k();
-		w(_);
-		let v = u(_), y = u({ darkMode: C(_) }), b = u(null);
-		h.addEventListener("change", T), p(() => i.mode, () => {
-			x();
-		}, { immediate: !0 }), p(() => y.value.darkMode, (e, t) => {
+		let o = window.matchMedia(ee), p = window.matchMedia(te), h = E();
+		T(h);
+		let g = d(h), _ = d({ darkMode: b(h) }), v = d(null);
+		o.addEventListener("change", x), m(() => i.mode, () => {
+			y();
+		}, { immediate: !0 }), m(() => _.value.darkMode, (e, t) => {
 			if (t === void 0) {
-				E(e);
+				S(e);
 				return;
 			}
-			D(() => {
-				E(e);
+			w(() => {
+				S(e);
 			});
-		}, { immediate: !0 }), s(() => {
-			h.removeEventListener("change", T);
-			let e = a.indexOf($);
-			e !== -1 && a.splice(e, 1), m();
+		}, { immediate: !0 }), c(() => {
+			o.removeEventListener("change", x);
+			let e = M.indexOf($);
+			e !== -1 && M.splice(e, 1), a();
 		});
-		function x() {
-			let e = k();
-			v.value = e, y.value.darkMode = C(e);
+		function y() {
+			let e = E();
+			g.value = e, _.value.darkMode = b(e);
 		}
-		function C(e) {
-			return e === "dark" ? !0 : e === "light" ? !1 : h.matches;
+		function b(e) {
+			return e === "dark" ? !0 : e === "light" ? !1 : o.matches;
 		}
-		function T(e) {
-			!e || v.value !== "auto" || (y.value.darkMode = e.matches);
+		function x(e) {
+			!e || g.value !== "auto" || (_.value.darkMode = e.matches);
 		}
-		function E(e) {
-			document.documentElement.setAttribute("dark-mode", e);
+		function S(e) {
+			document.documentElement.setAttribute("dark-mode", String(e));
 		}
-		function D(e) {
-			if (g.matches) {
+		function w(e) {
+			if (p.matches) {
 				e();
 				return;
 			}
@@ -147,11 +152,11 @@ var ee = "(prefers-color-scheme: dark)", te = "(prefers-reduced-motion: reduce)"
 				});
 			});
 		}
-		function k() {
-			return i.mode ?? S() ?? "auto";
+		function E() {
+			return i.mode ?? C() ?? "auto";
 		}
-		l("theme", y), l(O, b);
-		function R(e) {
+		u("theme", _), u(A, v);
+		function D(e) {
 			if (!e) return null;
 			let t = e.trim().toLowerCase();
 			if (!/^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.exec(t)) return null;
@@ -161,26 +166,26 @@ var ee = "(prefers-color-scheme: dark)", te = "(prefers-reduced-motion: reduce)"
 			}
 			return t;
 		}
-		function z(e) {
-			let t = R(e);
+		function O(e) {
+			let t = D(e);
 			return t ? {
 				r: parseInt(t.slice(1, 3), 16),
 				g: parseInt(t.slice(3, 5), 16),
 				b: parseInt(t.slice(5, 7), 16)
 			} : null;
 		}
-		function B({ r: e, g: t, b: n }) {
+		function k({ r: e, g: t, b: n }) {
 			let r = (e) => e.toString(16).padStart(2, "0");
 			return `#${r(e)}${r(t)}${r(n)}`;
 		}
-		function V(e) {
+		function j(e) {
 			return Math.max(0, Math.min(1, e));
 		}
 		function H(e) {
 			return e <= .04045 ? e / 12.92 : ((e + .055) / 1.055) ** 2.4;
 		}
 		function U(e) {
-			let t = V(e);
+			let t = j(e);
 			return t <= .0031308 ? 12.92 * t : 1.055 * t ** (1 / 2.4) - .055;
 		}
 		function W({ r: e, g: t, b: n }) {
@@ -192,12 +197,12 @@ var ee = "(prefers-color-scheme: dark)", te = "(prefers-reduced-motion: reduce)"
 			};
 		}
 		function G(e, t, n, r = !1) {
-			let i = n * Math.PI / 180, a = t * Math.cos(i), o = t * Math.sin(i), s = e + .3963377774 * a + .2158037573 * o, c = e - .1055613458 * a - .0638541728 * o, l = e - .0894841775 * a - 1.291485548 * o, u = r ? V(s) : s, d = r ? V(c) : c, f = r ? V(l) : l;
+			let i = n * Math.PI / 180, a = t * Math.cos(i), o = t * Math.sin(i), s = e + .3963377774 * a + .2158037573 * o, c = e - .1055613458 * a - .0638541728 * o, l = e - .0894841775 * a - 1.291485548 * o, u = r ? j(s) : s, d = r ? j(c) : c, f = r ? j(l) : l;
 			if (!r && (u < -1e-4 || u > 1.0001 || d < -1e-4 || d > 1.0001 || f < -1e-4 || f > 1.0001)) return null;
 			let p = u * u * u, m = d * d * d, h = f * f * f, g = 4.0767416621 * p - 3.3077115913 * m + .2309699292 * h, _ = -1.2684380046 * p + 2.6097574011 * m - .3413193965 * h, v = -.0041960863 * p - .7034186147 * m + 1.707614701 * h;
-			if (r) g = V(g), _ = V(_), v = V(v);
+			if (r) g = j(g), _ = j(_), v = j(v);
 			else if (g < -1e-4 || g > 1.0001 || _ < -1e-4 || _ > 1.0001 || v < -1e-4 || v > 1.0001) return null;
-			let y = V(U(g)), b = V(U(_)), x = V(U(v));
+			let y = j(U(g)), b = j(U(_)), x = j(U(v));
 			return {
 				r: Math.round(y * 255),
 				g: Math.round(b * 255),
@@ -211,14 +216,14 @@ var ee = "(prefers-color-scheme: dark)", te = "(prefers-reduced-motion: reduce)"
 				if (t) return t;
 				r *= .9;
 			}
-			return G(e, V(r), n, !0) || {
+			return G(e, j(r), n, !0) || {
 				r: 0,
 				g: 0,
 				b: 0
 			};
 		}
 		function q(e) {
-			let t = z(e);
+			let t = O(e);
 			if (!t) return 0;
 			let n = H(t.r / 255), r = H(t.g / 255), i = H(t.b / 255);
 			return .2126 * n + .7152 * r + .0722 * i;
@@ -228,17 +233,17 @@ var ee = "(prefers-color-scheme: dark)", te = "(prefers-reduced-motion: reduce)"
 			return (i + .05) / (a + .05);
 		}
 		function re(e, t, n = {}) {
-			let r = n.minContrast ?? A, i = n.preferDark !== !1, a = Math.max(.01, Math.min(.06, (e.c || .12) * (n.chromaScale ?? .25))), o = n.initialLightness ?? (i ? .24 : .94), s = i ? -1 : 1, c = n.step ?? .03, l = V(o), u = B(K(l, a, e.h)), d = J(t, u);
+			let r = n.minContrast ?? P, i = n.preferDark !== !1, a = Math.max(.01, Math.min(.06, (e.c || .12) * (n.chromaScale ?? .25))), o = n.initialLightness ?? (i ? .24 : .94), s = i ? -1 : 1, c = n.step ?? .03, l = j(o), u = k(K(l, a, e.h)), d = J(t, u);
 			for (let n = 0; n < 48; n += 1) {
-				let n = B(K(l, a, e.h)), i = J(t, n);
+				let n = k(K(l, a, e.h)), i = J(t, n);
 				if (i > d && (d = i, u = n), i >= r) return n;
-				if (l = V(l + s * c), l === 0 || l === 1) break;
+				if (l = j(l + s * c), l === 0 || l === 1) break;
 			}
 			let f = "#101214", p = "#ffffff", m = J(t, f), h = J(t, p);
 			return m >= r || h >= r ? m >= h ? f : p : u;
 		}
 		function Y(e, t, n = {}) {
-			let r = n.minContrast ?? A, i = n.darkCandidate ?? "#101214", a = n.lightCandidate ?? "#ffffff", o = n.preferredCandidate, s = n.preferredMinContrast ?? r, c = n.preferredSwitchDelta ?? 0, l = J(t, i), u = J(t, a), d = l >= r, f = u >= r, p = u >= s, m = l >= s;
+			let r = n.minContrast ?? P, i = n.darkCandidate ?? "#101214", a = n.lightCandidate ?? "#ffffff", o = n.preferredCandidate, s = n.preferredMinContrast ?? r, c = n.preferredSwitchDelta ?? 0, l = J(t, i), u = J(t, a), d = l >= r, f = u >= r, p = u >= s, m = l >= s;
 			if (d || f) return o === "light" && p ? a : o === "dark" && m ? i : o === "light" && f ? !d || l - u <= c ? a : i : o === "dark" && d ? !f || u - l <= c ? i : a : d && f ? l >= u ? i : a : d ? i : a;
 			let h = l >= u;
 			return re(e, t, {
@@ -292,7 +297,7 @@ var ee = "(prefers-color-scheme: dark)", te = "(prefers-reduced-motion: reduce)"
 		}
 		function oe(e) {
 			let t = e.l - X[5], n = e.c > .02 ? .02 : 0;
-			return ie.reduce((r, i, a) => (r[i] = B(K(V(X[a] + t), Math.min(.4, Math.max(n, e.c * ae[a])), e.h)), r), {});
+			return ie.reduce((r, i, a) => (r[i] = k(K(j(X[a] + t), Math.min(.4, Math.max(n, e.c * ae[a])), e.h)), r), {});
 		}
 		function se(e, t) {
 			let n = [
@@ -303,14 +308,14 @@ var ee = "(prefers-color-scheme: dark)", te = "(prefers-reduced-motion: reduce)"
 				500,
 				600,
 				700
-			], r = Z(t, n, I, N), i = n.indexOf(r), a = n[Math.min(i + 1, n.length - 1)], o = n[Math.min(i + 2, n.length - 1)], s = [
+			], r = Z(t, n, B, L), i = n.indexOf(r), a = n[Math.min(i + 1, n.length - 1)], o = n[Math.min(i + 2, n.length - 1)], s = [
 				1e3,
 				900,
 				800,
 				700,
 				600,
 				500
-			], c = Z(t, s, L, N), l = s.indexOf(c), u = s[Math.min(l + 1, s.length - 1)], d = s[Math.min(l + 2, s.length - 1)], f = Z(t, [
+			], c = Z(t, s, V, L), l = s.indexOf(c), u = s[Math.min(l + 1, s.length - 1)], d = s[Math.min(l + 2, s.length - 1)], f = Z(t, [
 				200,
 				300,
 				400,
@@ -318,25 +323,25 @@ var ee = "(prefers-color-scheme: dark)", te = "(prefers-reduced-motion: reduce)"
 				600,
 				700,
 				800
-			], I, M), p = Z(t, [
+			], B, I), p = Z(t, [
 				900,
 				800,
 				700,
 				600,
 				500,
 				400
-			], L, M), m = [
+			], V, I), m = [
 				600,
 				700,
 				800,
 				900,
 				1e3
-			], h = Z(t, m, I, j), g = m.indexOf(h), _ = m[Math.min(g + 1, m.length - 1)], v = m[Math.min(g + 2, m.length - 1)], y = [
+			], h = Z(t, m, B, F), g = m.indexOf(h), _ = m[Math.min(g + 1, m.length - 1)], v = m[Math.min(g + 2, m.length - 1)], y = [
 				400,
 				300,
 				200,
 				100
-			], b = Z(t, y, L, j), x = y.indexOf(b), S = y[Math.min(x + 1, y.length - 1)], C = y[Math.min(x + 2, y.length - 1)], w = {
+			], b = Z(t, y, V, F), x = y.indexOf(b), S = y[Math.min(x + 1, y.length - 1)], C = y[Math.min(x + 2, y.length - 1)], w = {
 				"--color-brand-surface-soft-light": t[r],
 				"--color-brand-surface-soft-hovered-light": t[a],
 				"--color-brand-surface-soft-pressed-light": t[o],
@@ -352,22 +357,22 @@ var ee = "(prefers-color-scheme: dark)", te = "(prefers-reduced-motion: reduce)"
 				"--color-brand-surface-strong-hovered-dark": t[S],
 				"--color-brand-surface-strong-pressed-dark": t[C]
 			}, T = t[600];
-			return w["--color-brand-on-soft-light"] = J(w["--color-brand-surface-soft-light"], T) >= A ? T : Y(e, w["--color-brand-surface-soft-light"], { minContrast: A }), w["--color-brand-on-soft-dark"] = Y(e, w["--color-brand-surface-soft-dark"], { minContrast: A }), w["--color-brand-on-subtle-light"] = Y(e, w["--color-brand-surface-subtle-light"], {
-				minContrast: P,
+			return w["--color-brand-on-soft-light"] = J(w["--color-brand-surface-soft-light"], T) >= P ? T : Y(e, w["--color-brand-surface-soft-light"], { minContrast: P }), w["--color-brand-on-soft-dark"] = Y(e, w["--color-brand-surface-soft-dark"], { minContrast: P }), w["--color-brand-on-subtle-light"] = Y(e, w["--color-brand-surface-subtle-light"], {
+				minContrast: R,
 				preferredCandidate: "light",
-				preferredMinContrast: P,
-				preferredSwitchDelta: F
-			}), w["--color-brand-on-subtle-dark"] = Y(e, w["--color-brand-surface-subtle-dark"], { minContrast: A }), w["--color-brand-on-strong-light"] = Y(e, w["--color-brand-surface-strong-light"], {
-				minContrast: P,
+				preferredMinContrast: R,
+				preferredSwitchDelta: z
+			}), w["--color-brand-on-subtle-dark"] = Y(e, w["--color-brand-surface-subtle-dark"], { minContrast: P }), w["--color-brand-on-strong-light"] = Y(e, w["--color-brand-surface-strong-light"], {
+				minContrast: R,
 				preferredCandidate: "light",
-				preferredMinContrast: P,
-				preferredSwitchDelta: F
-			}), w["--color-brand-on-strong-dark"] = Y(e, w["--color-brand-surface-strong-dark"], { minContrast: A }), w["--color-brand-text-light"] = w["--color-brand-surface-strong-light"], w["--color-brand-text-dark"] = w["--color-brand-surface-strong-dark"], w["--color-brand-icon-light"] = w["--color-brand-surface-strong-light"], w["--color-brand-icon-dark"] = w["--color-brand-surface-strong-dark"], w["--color-brand-border-light"] = w["--color-brand-surface-strong-light"], w["--color-brand-border-dark"] = w["--color-brand-surface-strong-dark"], w;
+				preferredMinContrast: R,
+				preferredSwitchDelta: z
+			}), w["--color-brand-on-strong-dark"] = Y(e, w["--color-brand-surface-strong-dark"], { minContrast: P }), w["--color-brand-text-light"] = w["--color-brand-surface-strong-light"], w["--color-brand-text-dark"] = w["--color-brand-surface-strong-dark"], w["--color-brand-icon-light"] = w["--color-brand-surface-strong-light"], w["--color-brand-icon-dark"] = w["--color-brand-surface-strong-dark"], w["--color-brand-border-light"] = w["--color-brand-surface-strong-light"], w["--color-brand-border-dark"] = w["--color-brand-surface-strong-dark"], w;
 		}
 		function ce(e) {
-			let t = R(e);
+			let t = D(e);
 			if (!t) return null;
-			let n = z(t);
+			let n = O(t);
 			if (!n) return null;
 			let r = W(n), i = oe(r);
 			return i[600] = t, {
@@ -389,24 +394,24 @@ var ee = "(prefers-color-scheme: dark)", te = "(prefers-reduced-motion: reduce)"
 			vars: {},
 			enabled: !!i.exposeGlobalAccent
 		};
-		return a.push($), p(() => i.exposeGlobalAccent, (e) => {
-			$.enabled = !!e, m();
-		}, { immediate: !0 }), p(Q, (e) => {
-			e && Object.keys(e).length > 0 ? $.vars = { ...e } : $.vars = {}, m();
-		}, { immediate: !0 }), (e, t) => (c(), n("div", {
+		return M.push($), m(() => i.exposeGlobalAccent, (e) => {
+			$.enabled = !!e, a();
+		}, { immediate: !0 }), m(Q, (e) => {
+			e && Object.keys(e).length > 0 ? $.vars = { ...e } : $.vars = {}, a();
+		}, { immediate: !0 }), (e, t) => (l(), n("div", {
 			class: "theme",
-			style: o(Q.value)
-		}, [d(e.$slots, "default"), r("div", {
+			style: s(Q.value)
+		}, [f(e.$slots, "default"), r("div", {
 			ref_key: "portalHost",
-			ref: b,
+			ref: v,
 			class: "theme__portal-host"
 		}, null, 512)], 4));
 	}
-}), z = /* @__PURE__ */ ((e, t) => {
+}), U = /* @__PURE__ */ ((e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-})({
+})(/* @__PURE__ */ a({
 	__name: "ThemeSwitcher",
 	props: { mode: {
 		type: String,
@@ -418,8 +423,8 @@ var ee = "(prefers-color-scheme: dark)", te = "(prefers-reduced-motion: reduce)"
 		].includes(e)
 	} },
 	emits: ["update:mode"],
-	setup(n, { emit: a }) {
-		let o = [
+	setup(e, { emit: n }) {
+		let a = [
 			{
 				value: "auto",
 				label: "System"
@@ -432,57 +437,57 @@ var ee = "(prefers-color-scheme: dark)", te = "(prefers-reduced-motion: reduce)"
 				value: "dark",
 				label: "Dark"
 			}
-		].reduce((e, t) => (e[t.value] = t.label, e), {}), s = v, l = n, d = a;
-		w();
-		let y = u(!1), b = S() ?? l.mode, x = u(s.includes(b) ? b : "auto");
-		return e(() => o[x.value] ?? o.auto), p(() => l.mode, (e) => {
-			s.includes(e) && e !== x.value && (x.value = e);
-		}), p(x, (e) => {
-			if (!s.includes(e)) {
-				x.value = "auto";
+		].reduce((e, t) => (e[t.value] = t.label, e), {}), o = y, s = e, c = n;
+		T();
+		let u = d(!1), f = C() ?? s.mode, b = d(o.includes(f) ? f : "auto");
+		return m(() => s.mode, (e) => {
+			o.includes(e) && e !== b.value && (b.value = e);
+		}), m(b, (e) => {
+			if (!o.includes(e)) {
+				b.value = "auto";
 				return;
 			}
-			y.value = !1, d("update:mode", e), C(e);
-		}, { immediate: !0 }), (e, n) => (c(), t(f(_), {
-			open: y.value,
-			"onUpdate:open": n[3] ||= (e) => y.value = e,
+			u.value = !1, c("update:mode", e), w(e), T(e);
+		}, { immediate: !0 }), (e, n) => (l(), t(p(v), {
+			open: u.value,
+			"onUpdate:open": n[3] ||= (e) => u.value = e,
 			text: "Theme",
 			"aria-label": "Select theme mode"
 		}, {
-			default: m(() => [i(f(h), { title: "Theme" }, {
-				default: m(() => [
-					i(f(g), {
-						checked: x.value,
-						"onUpdate:checked": n[0] ||= (e) => x.value = e,
+			default: h(() => [i(p(g), {
+				title: "Theme",
+				"item-role": "menuitemradio"
+			}, {
+				default: h(() => [
+					i(p(_), {
+						checked: b.value,
+						"onUpdate:checked": n[0] ||= (e) => b.value = e,
 						value: "auto",
-						label: f(o).auto,
-						"aria-label": `${f(o).auto} mode`
+						label: p(a).auto,
+						"aria-label": `${p(a).auto} mode`
 					}, null, 8, [
 						"checked",
 						"label",
 						"aria-label"
 					]),
-					n[4] ||= r("hr", {
-						class: "theme-switcher-divider",
-						role: "separator"
-					}, null, -1),
-					i(f(g), {
-						checked: x.value,
-						"onUpdate:checked": n[1] ||= (e) => x.value = e,
+					n[4] ||= r("hr", { class: "theme-switcher-divider" }, null, -1),
+					i(p(_), {
+						checked: b.value,
+						"onUpdate:checked": n[1] ||= (e) => b.value = e,
 						value: "light",
-						label: f(o).light,
-						"aria-label": `${f(o).light} mode`
+						label: p(a).light,
+						"aria-label": `${p(a).light} mode`
 					}, null, 8, [
 						"checked",
 						"label",
 						"aria-label"
 					]),
-					i(f(g), {
-						checked: x.value,
-						"onUpdate:checked": n[2] ||= (e) => x.value = e,
+					i(p(_), {
+						checked: b.value,
+						"onUpdate:checked": n[2] ||= (e) => b.value = e,
 						value: "dark",
-						label: f(o).dark,
-						"aria-label": `${f(o).dark} mode`
+						label: p(a).dark,
+						"aria-label": `${p(a).dark} mode`
 					}, null, 8, [
 						"checked",
 						"label",
@@ -494,8 +499,8 @@ var ee = "(prefers-color-scheme: dark)", te = "(prefers-reduced-motion: reduce)"
 			_: 1
 		}, 8, ["open"]));
 	}
-}, [["__scopeId", "data-v-bcbc87cb"]]);
+}), [["__scopeId", "data-v-be9d7090"]]);
 //#endregion
-export { R as Theme, z as ThemeSwitcher, O as themePortalHostKey, k as useThemePortalTarget };
+export { H as Theme, U as ThemeSwitcher, A as themePortalHostKey, j as useThemePortalTarget };
 
 //# sourceMappingURL=theme.es.js.map