@gospore/theme 1.0.126 → 1.0.128

package/dist/theme.es.js

@@ -1,44 +1,44 @@
-import { ref as U, watch as L, onBeforeUnmount as le, provide as de, computed as Y, createElementBlock as me, openBlock as J, normalizeStyle as fe, renderSlot as he, createBlock as pe, unref as b, withCtx as W, createVNode as x, createElementVNode as be } from "vue";
+import { inject as he, computed as j, ref as N, watch as A, onBeforeUnmount as pe, provide as J, createElementBlock as be, openBlock as Z, normalizeStyle as ge, renderSlot as ke, createElementVNode as ee, createBlock as Me, unref as g, withCtx as X, createVNode as U } from "vue";
 import "what-input";
-import { DropdownMenu as ge, DropdownItemGroup as ke, DropdownItemRadio as V } from "@gospore/dropdown-menu";
-const j = ["auto", "light", "dark"], X = "gospore-theme-mode", Me = 60 * 60 * 24 * 365, ve = "(prefers-color-scheme: dark)";
-function G() {
+import { DropdownMenu as ve, DropdownItemGroup as ye, DropdownItemRadio as K } from "@gospore/dropdown-menu";
+const B = ["auto", "light", "dark"], te = "gospore-theme-mode", Ee = 60 * 60 * 24 * 365, Se = "(prefers-color-scheme: dark)";
+function V() {
   if (typeof document > "u")
     return null;
-  const n = we(X);
-  return n && j.includes(n) ? n : null;
+  const n = Oe(te);
+  return n && B.includes(n) ? n : null;
 }
-function Ee(n) {
-  if (typeof document > "u" || !j.includes(n))
+function we(n) {
+  if (typeof document > "u" || !B.includes(n))
     return;
-  const c = typeof window < "u" ? window.location.hostname : "", s = typeof window < "u" ? window.location.protocol : "", a = Se(c), g = s === "https:", k = [
+  const a = typeof window < "u" ? window.location.hostname : "", s = typeof window < "u" ? window.location.protocol : "", c = _e(a), p = s === "https:", k = [
     "path=/",
-    `max-age=${Me}`,
+    `max-age=${Ee}`,
     "SameSite=Lax"
   ];
-  a && k.push(`domain=${a}`), g && k.push("Secure"), document.cookie = [
-    `${encodeURIComponent(X)}=${encodeURIComponent(n)}`,
+  c && k.push(`domain=${c}`), p && k.push("Secure"), document.cookie = [
+    `${encodeURIComponent(te)}=${encodeURIComponent(n)}`,
     ...k
   ].join("; ");
 }
-function Z(n) {
+function ne(n) {
   if (typeof document > "u")
     return;
-  const c = typeof n == "string" && j.includes(n) ? n : G() ?? "auto";
-  console.log("Applying theme mode:", c);
-  const s = ye(c);
+  const a = typeof n == "string" && B.includes(n) ? n : V() ?? "auto";
+  console.log("Applying theme mode:", a);
+  const s = Re(a);
   document.documentElement.setAttribute("dark-mode", s);
 }
-function we(n) {
+function Oe(n) {
   if (typeof document > "u" || !document.cookie)
     return null;
-  const c = `${encodeURIComponent(n)}=`, s = document.cookie.split("; ");
-  for (const a of s)
-    if (a.startsWith(c))
-      return decodeURIComponent(a.slice(c.length));
+  const a = `${encodeURIComponent(n)}=`, s = document.cookie.split("; ");
+  for (const c of s)
+    if (c.startsWith(a))
+      return decodeURIComponent(c.slice(a.length));
   return null;
 }
-function Se(n) {
+function _e(n) {
   if (!n || n === "localhost")
     return null;
   if (/^\d+(?:\.\d+){3}$/.test(n))
@@ -46,19 +46,26 @@ function Se(n) {
   const s = n.split(".");
   return s.length <= 1 ? null : s.length === 2 ? n : s.slice(-2).join(".");
 }
-function ye(n) {
+function Re(n) {
   if (n === "dark")
     return !0;
   if (n === "light" || typeof window > "u")
     return !1;
   try {
-    const c = typeof window.matchMedia == "function" ? window.matchMedia(ve) : null;
-    return c ? c.matches : !1;
+    const a = typeof window.matchMedia == "function" ? window.matchMedia(Se) : null;
+    return a ? a.matches : !1;
   } catch {
     return !1;
   }
 }
-const Oe = "(prefers-color-scheme: dark)", Re = "(prefers-reduced-motion: reduce)", _e = 200, Ae = /* @__PURE__ */ Object.assign({
+const oe = Symbol.for("gospore.theme.portalHost");
+function Ne() {
+  const n = he(oe, null);
+  console.log("Using theme portal host:", n);
+  const a = typeof document < "u" ? document.body : "body";
+  return j(() => n?.value ?? a);
+}
+const Te = "(prefers-color-scheme: dark)", De = "(prefers-reduced-motion: reduce)", Ce = 200, Ue = /* @__PURE__ */ Object.assign({
   name: "Theme"
 }, {
   __name: "Theme",
@@ -76,66 +83,76 @@ const Oe = "(prefers-color-scheme: dark)", Re = "(prefers-reduced-motion: reduce
       type: String,
       required: !1,
       default: void 0
+    },
+    /**
+     * When true the brand vars are also exposed on <html>, allowing portals
+     * attached outside the Theme subtree to inherit the accent colors.
+     */
+    exposeGlobalAccent: {
+      type: Boolean,
+      default: !1
     }
   },
   setup(n) {
-    const c = n, s = [], a = /* @__PURE__ */ new Set();
-    function g() {
+    const a = n, s = [], c = /* @__PURE__ */ new Set();
+    function p() {
       const e = document.documentElement;
       if (!e)
         return;
-      a.forEach((r) => {
+      c.forEach((r) => {
         e.style.removeProperty(r);
-      }), a.clear();
-      const t = [...s].reverse().find((r) => r.vars && Object.keys(r.vars).length > 0);
+      }), c.clear();
+      const t = [...s].reverse().find(
+        (r) => r.enabled && r.vars && Object.keys(r.vars).length > 0
+      );
       t && Object.entries(t.vars).forEach(([r, o]) => {
-        e.style.setProperty(r, o), a.add(r);
+        e.style.setProperty(r, o), c.add(r);
       });
     }
-    const k = window.matchMedia(Oe), P = window.matchMedia(
-      Re
-    ), D = Q();
-    Z(D);
-    const I = U(D), i = U({
-      darkMode: u(D)
-    });
-    k.addEventListener("change", M), L(
-      () => c.mode,
+    const k = window.matchMedia(Te), P = window.matchMedia(
+      De
+    ), T = q();
+    ne(T);
+    const I = N(T), l = N({
+      darkMode: M(T)
+    }), f = N(null);
+    k.addEventListener("change", Y), A(
+      () => a.mode,
       () => {
-        f();
+        d();
       },
       { immediate: !0 }
-    ), L(
-      () => i.value.darkMode,
+    ), A(
+      () => l.value.darkMode,
       (e, t) => {
         if (t === void 0) {
-          K(e);
+          Q(e);
           return;
         }
-        ee(() => {
-          K(e);
+        re(() => {
+          Q(e);
         });
       },
       { immediate: !0 }
-    ), le(() => {
-      k.removeEventListener("change", M);
-      const e = s.indexOf(N);
-      e !== -1 && s.splice(e, 1), g();
+    ), pe(() => {
+      k.removeEventListener("change", Y);
+      const e = s.indexOf($);
+      e !== -1 && s.splice(e, 1), p();
     });
-    function f() {
-      const e = Q();
-      I.value = e, i.value.darkMode = u(e);
+    function d() {
+      const e = q();
+      I.value = e, l.value.darkMode = M(e);
     }
-    function u(e) {
+    function M(e) {
       return e === "dark" ? !0 : e === "light" ? !1 : k.matches;
     }
-    function M(e) {
-      !e || I.value !== "auto" || (i.value.darkMode = e.matches);
+    function Y(e) {
+      !e || I.value !== "auto" || (l.value.darkMode = e.matches);
     }
-    function K(e) {
+    function Q(e) {
       document.documentElement.setAttribute("dark-mode", e);
     }
-    function ee(e) {
+    function re(e) {
       if (P.matches) {
         e();
         return;
@@ -151,83 +168,83 @@ const Oe = "(prefers-color-scheme: dark)", Re = "(prefers-reduced-motion: reduce
       const r = document.documentElement;
       typeof r.animate == "function" && window.requestAnimationFrame(() => {
         r.animate([{ opacity: 0.85 }, { opacity: 1 }], {
-          duration: _e,
+          duration: Ce,
           easing: "ease-in-out"
         });
       });
     }
-    function Q() {
-      return c.mode ?? G() ?? "auto";
+    function q() {
+      return a.mode ?? V() ?? "auto";
     }
-    de("theme", i);
-    function q(e) {
+    J("theme", l), J(oe, f);
+    function z(e) {
       if (!e) return null;
       const t = e.trim().toLowerCase();
       if (!/^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.exec(t)) return null;
       if (t.length === 4) {
-        const o = t[1], l = t[2], m = t[3];
-        return `#${o}${o}${l}${l}${m}${m}`;
+        const o = t[1], i = t[2], m = t[3];
+        return `#${o}${o}${i}${i}${m}${m}`;
       }
       return t;
     }
-    function te(e) {
-      const t = q(e);
+    function ae(e) {
+      const t = z(e);
       if (!t) return null;
-      const r = parseInt(t.slice(1, 3), 16), o = parseInt(t.slice(3, 5), 16), l = parseInt(t.slice(5, 7), 16);
-      return { r, g: o, b: l };
+      const r = parseInt(t.slice(1, 3), 16), o = parseInt(t.slice(3, 5), 16), i = parseInt(t.slice(5, 7), 16);
+      return { r, g: o, b: i };
     }
-    function ne({ r: e, g: t, b: r }) {
-      const o = (l) => l.toString(16).padStart(2, "0");
+    function ce({ r: e, g: t, b: r }) {
+      const o = (i) => i.toString(16).padStart(2, "0");
       return `#${o(e)}${o(t)}${o(r)}`;
     }
     function h(e) {
       return Math.max(0, Math.min(1, e));
     }
-    function B(e) {
+    function H(e) {
       return e <= 0.04045 ? e / 12.92 : Math.pow((e + 0.055) / 1.055, 2.4);
     }
-    function H(e) {
+    function G(e) {
       const t = h(e);
       return t <= 31308e-7 ? 12.92 * t : 1.055 * Math.pow(t, 1 / 2.4) - 0.055;
     }
-    function oe({ r: e, g: t, b: r }) {
-      const o = e / 255, l = t / 255, m = r / 255, w = B(o), _ = B(l), d = B(m), v = 0.4122214708 * w + 0.5363325363 * _ + 0.0514459929 * d, E = 0.2119034982 * w + 0.6806995451 * _ + 0.1073969566 * d, S = 0.0883024619 * w + 0.2817188376 * _ + 0.6299787005 * d, p = Math.cbrt(v), y = Math.cbrt(E), T = Math.cbrt(S), $ = 0.2104542553 * p + 0.793617785 * y - 0.0040720468 * T, O = 1.9779984951 * p - 2.428592205 * y + 0.4505937099 * T, R = 0.0259040371 * p + 0.7827717662 * y - 0.808675766 * T, C = Math.sqrt(O * O + R * R);
-      let A = Math.atan2(R, O) * (180 / Math.PI);
-      return A < 0 && (A += 360), { l: $, c: C, h: A };
+    function se({ r: e, g: t, b: r }) {
+      const o = e / 255, i = t / 255, m = r / 255, E = H(o), R = H(i), u = H(m), v = 0.4122214708 * E + 0.5363325363 * R + 0.0514459929 * u, y = 0.2119034982 * E + 0.6806995451 * R + 0.1073969566 * u, S = 0.0883024619 * E + 0.2817188376 * R + 0.6299787005 * u, b = Math.cbrt(v), w = Math.cbrt(y), D = Math.cbrt(S), L = 0.2104542553 * b + 0.793617785 * w - 0.0040720468 * D, O = 1.9779984951 * b - 2.428592205 * w + 0.4505937099 * D, _ = 0.0259040371 * b + 0.7827717662 * w - 0.808675766 * D, C = Math.sqrt(O * O + _ * _);
+      let x = Math.atan2(_, O) * (180 / Math.PI);
+      return x < 0 && (x += 360), { l: L, c: C, h: x };
     }
-    function z(e, t, r, o = !1) {
-      const l = r * Math.PI / 180, m = t * Math.cos(l), w = t * Math.sin(l), _ = e + 0.3963377774 * m + 0.2158037573 * w, d = e - 0.1055613458 * m - 0.0638541728 * w, v = e - 0.0894841775 * m - 1.291485548 * w, E = o ? h(_) : _, S = o ? h(d) : d, p = o ? h(v) : v;
-      if (!o && (E < -1e-4 || E > 1.0001 || S < -1e-4 || S > 1.0001 || p < -1e-4 || p > 1.0001))
+    function F(e, t, r, o = !1) {
+      const i = r * Math.PI / 180, m = t * Math.cos(i), E = t * Math.sin(i), R = e + 0.3963377774 * m + 0.2158037573 * E, u = e - 0.1055613458 * m - 0.0638541728 * E, v = e - 0.0894841775 * m - 1.291485548 * E, y = o ? h(R) : R, S = o ? h(u) : u, b = o ? h(v) : v;
+      if (!o && (y < -1e-4 || y > 1.0001 || S < -1e-4 || S > 1.0001 || b < -1e-4 || b > 1.0001))
         return null;
-      const y = E * E * E, T = S * S * S, $ = p * p * p;
-      let O = 4.0767416621 * y - 3.3077115913 * T + 0.2309699292 * $, R = -1.2684380046 * y + 2.6097574011 * T - 0.3413193965 * $, C = -0.0041960863 * y - 0.7034186147 * T + 1.707614701 * $;
+      const w = y * y * y, D = S * S * S, L = b * b * b;
+      let O = 4.0767416621 * w - 3.3077115913 * D + 0.2309699292 * L, _ = -1.2684380046 * w + 2.6097574011 * D - 0.3413193965 * L, C = -0.0041960863 * w - 0.7034186147 * D + 1.707614701 * L;
       if (o)
-        O = h(O), R = h(R), C = h(C);
-      else if (O < -1e-4 || O > 1.0001 || R < -1e-4 || R > 1.0001 || C < -1e-4 || C > 1.0001)
+        O = h(O), _ = h(_), C = h(C);
+      else if (O < -1e-4 || O > 1.0001 || _ < -1e-4 || _ > 1.0001 || C < -1e-4 || C > 1.0001)
         return null;
-      const A = h(H(O)), se = h(H(R)), ie = h(H(C));
+      const x = h(G(O)), de = h(G(_)), me = h(G(C));
       return {
-        r: Math.round(A * 255),
-        g: Math.round(se * 255),
-        b: Math.round(ie * 255)
+        r: Math.round(x * 255),
+        g: Math.round(de * 255),
+        b: Math.round(me * 255)
       };
     }
-    function re(e, t, r) {
+    function le(e, t, r) {
       let o = t;
-      for (let l = 0; l < 8; l += 1) {
-        const m = z(e, o, r);
+      for (let i = 0; i < 8; i += 1) {
+        const m = F(e, o, r);
         if (m)
           return m;
         o *= 0.9;
       }
-      return z(e, h(o), r, !0) || { r: 0, g: 0, b: 0 };
+      return F(e, h(o), r, !0) || { r: 0, g: 0, b: 0 };
     }
-    function ce(e) {
-      const t = q(e);
+    function ie(e) {
+      const t = z(e);
       if (!t) return null;
-      const r = te(t);
+      const r = ae(t);
       if (!r) return null;
-      const o = oe(r), l = {
+      const o = se(r), i = {
         100: { lightness: 0.35, chroma: 0.45 },
         200: { lightness: 0.28, chroma: 0.5 },
         300: { lightness: 0.22, chroma: 0.6 },
@@ -238,44 +255,56 @@ const Oe = "(prefers-color-scheme: dark)", Re = "(prefers-reduced-motion: reduce
         800: { lightness: -0.18, chroma: 1.1 },
         900: { lightness: -0.28, chroma: 1.15 },
         1e3: { lightness: -0.35, chroma: 1.2 }
-      }, m = {}, w = (d) => d === 0 ? o.l : d > 0 ? h(o.l + d * (1 - o.l)) : h(o.l * (1 + d)), _ = (d) => {
-        if (d === 1)
+      }, m = {}, E = (u) => u === 0 ? o.l : u > 0 ? h(o.l + u * (1 - o.l)) : h(o.l * (1 + u)), R = (u) => {
+        if (u === 1)
           return o.c;
-        const v = o.c * d;
+        const v = o.c * u;
         return Math.max(0, Math.min(0.4, v));
       };
-      return Object.entries(l).forEach(([d, v]) => {
-        const E = `--color-brand-${d}`;
+      return Object.entries(i).forEach(([u, v]) => {
+        const y = `--color-brand-${u}`;
         if (v.base) {
-          m[E] = t;
+          m[y] = t;
           return;
         }
-        const S = w(v.lightness), p = _(v.chroma), y = re(S, p, o.h);
-        m[E] = ne(y);
+        const S = E(v.lightness), b = R(v.chroma), w = le(S, b, o.h);
+        m[y] = ce(w);
       }), m;
     }
-    const F = Y(() => ce(c.accentColor) ?? {}), ae = Y(() => F.value), N = {
-      vars: {}
+    const W = j(() => ie(a.accentColor) ?? {}), ue = j(() => W.value), $ = {
+      vars: {},
+      enabled: !!a.exposeGlobalAccent
     };
-    return s.push(N), L(
-      F,
+    return s.push($), A(
+      () => a.exposeGlobalAccent,
+      (e) => {
+        $.enabled = !!e, p();
+      },
+      { immediate: !0 }
+    ), A(
+      W,
       (e) => {
-        e && Object.keys(e).length > 0 ? N.vars = { ...e } : N.vars = {}, g();
+        e && Object.keys(e).length > 0 ? $.vars = { ...e } : $.vars = {}, p();
       },
       { immediate: !0 }
-    ), (e, t) => (J(), me("div", {
+    ), (e, t) => (Z(), be("div", {
       class: "theme",
-      style: fe(ae.value)
+      style: ge(ue.value)
     }, [
-      he(e.$slots, "default")
+      ke(e.$slots, "default"),
+      ee("div", {
+        ref_key: "portalHost",
+        ref: f,
+        class: "theme__portal-host"
+      }, null, 512)
     ], 4));
   }
-}), De = (n, c) => {
+}), Ae = (n, a) => {
   const s = n.__vccOpts || n;
-  for (const [a, g] of c)
-    s[a] = g;
+  for (const [c, p] of a)
+    s[c] = p;
   return s;
-}, Te = {
+}, Ie = {
   __name: "ThemeSwitcher",
   props: {
     mode: {
@@ -285,66 +314,66 @@ const Oe = "(prefers-color-scheme: dark)", Re = "(prefers-reduced-motion: reduce
     }
   },
   emits: ["update:mode"],
-  setup(n, { emit: c }) {
-    const a = [
+  setup(n, { emit: a }) {
+    const c = [
       { value: "auto", label: "System" },
       { value: "light", label: "Light" },
       { value: "dark", label: "Dark" }
-    ].reduce((f, u) => (f[u.value] = u.label, f), {}), g = j, k = n, P = c;
-    Z();
-    const D = U(!1), I = G() ?? k.mode, i = U(
-      g.includes(I) ? I : "auto"
+    ].reduce((f, d) => (f[d.value] = d.label, f), {}), p = B, k = n, P = a;
+    ne();
+    const T = N(!1), I = V() ?? k.mode, l = N(
+      p.includes(I) ? I : "auto"
     );
-    return Y(
-      () => a[i.value] ?? a.auto
-    ), L(
+    return j(
+      () => c[l.value] ?? c.auto
+    ), A(
       () => k.mode,
       (f) => {
-        g.includes(f) && f !== i.value && (i.value = f);
+        p.includes(f) && f !== l.value && (l.value = f);
       }
-    ), L(
-      i,
+    ), A(
+      l,
       (f) => {
-        if (!g.includes(f)) {
-          i.value = "auto";
+        if (!p.includes(f)) {
+          l.value = "auto";
           return;
         }
-        D.value = !1, P("update:mode", f), Ee(f);
+        T.value = !1, P("update:mode", f), we(f);
       },
       { immediate: !0 }
-    ), (f, u) => (J(), pe(b(ge), {
-      open: D.value,
-      "onUpdate:open": u[3] || (u[3] = (M) => D.value = M),
+    ), (f, d) => (Z(), Me(g(ve), {
+      open: T.value,
+      "onUpdate:open": d[3] || (d[3] = (M) => T.value = M),
       text: "Theme",
       "aria-label": "Select theme mode"
     }, {
-      default: W(() => [
-        x(b(ke), { title: "Theme" }, {
-          default: W(() => [
-            x(b(V), {
-              checked: i.value,
-              "onUpdate:checked": u[0] || (u[0] = (M) => i.value = M),
+      default: X(() => [
+        U(g(ye), { title: "Theme" }, {
+          default: X(() => [
+            U(g(K), {
+              checked: l.value,
+              "onUpdate:checked": d[0] || (d[0] = (M) => l.value = M),
               value: "auto",
-              label: b(a).auto,
-              "aria-label": `${b(a).auto} mode`
+              label: g(c).auto,
+              "aria-label": `${g(c).auto} mode`
             }, null, 8, ["checked", "label", "aria-label"]),
-            u[4] || (u[4] = be("hr", {
+            d[4] || (d[4] = ee("hr", {
               class: "theme-switcher-divider",
               role: "separator"
             }, null, -1)),
-            x(b(V), {
-              checked: i.value,
-              "onUpdate:checked": u[1] || (u[1] = (M) => i.value = M),
+            U(g(K), {
+              checked: l.value,
+              "onUpdate:checked": d[1] || (d[1] = (M) => l.value = M),
               value: "light",
-              label: b(a).light,
-              "aria-label": `${b(a).light} mode`
+              label: g(c).light,
+              "aria-label": `${g(c).light} mode`
             }, null, 8, ["checked", "label", "aria-label"]),
-            x(b(V), {
-              checked: i.value,
-              "onUpdate:checked": u[2] || (u[2] = (M) => i.value = M),
+            U(g(K), {
+              checked: l.value,
+              "onUpdate:checked": d[2] || (d[2] = (M) => l.value = M),
               value: "dark",
-              label: b(a).dark,
-              "aria-label": `${b(a).dark} mode`
+              label: g(c).dark,
+              "aria-label": `${g(c).dark} mode`
             }, null, 8, ["checked", "label", "aria-label"])
           ]),
           _: 1
@@ -353,9 +382,11 @@ const Oe = "(prefers-color-scheme: dark)", Re = "(prefers-reduced-motion: reduce
       _: 1
     }, 8, ["open"]));
   }
-}, Le = /* @__PURE__ */ De(Te, [["__scopeId", "data-v-bcbc87cb"]]);
+}, je = /* @__PURE__ */ Ae(Ie, [["__scopeId", "data-v-bcbc87cb"]]);
 export {
-  Ae as Theme,
-  Le as ThemeSwitcher
+  Ue as Theme,
+  je as ThemeSwitcher,
+  oe as themePortalHostKey,
+  Ne as useThemePortalTarget
 };
 //# sourceMappingURL=theme.es.js.map