ranui 0.2.0-alpha.2 → 0.2.0-alpha.3

package/dist/{tabpane-B_M-Jokw.js → tabpane-B-m3xwqu.js}

@@ -1,5 +1,5 @@
-import { c as s, d as r, s as a, u as h } from "./utils-D4pPF77E.js";
-import { t as n } from "./events-C59wGdni.js";
+import { a as s, i as r, n as a, t as n } from "./utils-DBfrRFoE.js";
+import { t as h } from "./events-C59wGdni.js";
 import { p as o } from "./factory-BdsO0dEW.js";
 import { a as b, n as c } from "./ssr-DSGwPtEd.js";
 var u = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}", d = class extends c {
@@ -14,13 +14,13 @@ var u = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transpar
       "sheet"
     ];
   }
-  _events = new n();
+  _events = new h();
   _div;
   parent;
   _shadowDom;
   constructor() {
-    super(), this._shadowDom = s(this, u);
-    const t = a(this._shadowDom, "slot", () => o().part("content").build());
+    super(), this._shadowDom = a(this, u);
+    const t = n(this._shadowDom, "slot", () => o().part("content").build());
     this._div = t;
   }
   get label() {
@@ -63,10 +63,10 @@ var u = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transpar
     return this.getAttribute("sheet");
   }
   set sheet(t) {
-    h(this, "sheet", t);
+    r(this, "sheet", t);
   }
   handlerExternalCss = () => {
-    r(this, this._shadowDom, "sheet", null, this.sheet);
+    s(this, this._shadowDom, "sheet", null, this.sheet);
   };
   initAttribute = () => {
     this.parent = this.parentNode, this.key && (this.parent?.updateAttribute(this.key, "icon", this.icon), this.parent?.updateAttribute(this.key, "iconSize", this.iconSize), this.parent?.updateAttribute(this.key, "effect", this.effect));

package/dist/tabpane.js

@@ -1,4 +1,4 @@
-import { t } from "./tabpane-B_M-Jokw.js";
+import { t } from "./tabpane-B-m3xwqu.js";
 export {
   t as TabPane,
   t as default

package/dist/test/unit/theme-switch.contract.test.d.ts

@@ -0,0 +1 @@
+import '@/components/theme-switch';

package/dist/theme-switch-B8K9y2RL.js

@@ -0,0 +1,170 @@
+import { a as u, i as m, n as b, r as v, t as f } from "./utils-DBfrRFoE.js";
+import { t as g } from "./events-C59wGdni.js";
+import { a as p, n as w } from "./ssr-DSGwPtEd.js";
+var i = "ran-theme", a = null, s = null, o = (e) => {
+  if (e && "style" in e) return e;
+  if (e && "documentElement" in e) return e.documentElement;
+  if (!(typeof document > "u"))
+    return document.documentElement;
+}, l = (e) => {
+  const t = typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  e.setAttribute("data-ran-theme", t ? "dark" : "light"), e.setAttribute("theme", t ? "dark" : "light");
+}, y = () => {
+  a && s && (a.removeEventListener("change", s), a = null, s = null);
+}, d = (e, t) => {
+  const r = o(t);
+  if (r) {
+    if (y(), e === "system") {
+      if (typeof window > "u") return;
+      l(r), a = window.matchMedia("(prefers-color-scheme: dark)"), s = () => l(r), a.addEventListener("change", s);
+      try {
+        localStorage.setItem(i, "system");
+      } catch {
+      }
+      return;
+    }
+    r.setAttribute("data-ran-theme", e), r.setAttribute("theme", e);
+    try {
+      localStorage.setItem(i, e);
+    } catch {
+    }
+  }
+}, k = (e) => {
+  const t = o(e);
+  if (!t) return "";
+  const r = t.getAttribute("data-ran-theme") || t.getAttribute("theme") || "";
+  if (r === "light" || r === "dark") {
+    try {
+      if (localStorage.getItem(i) === "system") return "system";
+    } catch {
+    }
+    return r;
+  }
+  return "";
+}, _ = (e, t, r) => {
+  const n = o(r);
+  n && n.style.setProperty(e, String(t));
+}, x = (e, t) => {
+  const r = o(t);
+  r && r.style.removeProperty(e);
+}, L = (e, t) => {
+  Object.entries(e).forEach(([r, n]) => {
+    if (n == null) {
+      x(r, t);
+      return;
+    }
+    _(r, n, t);
+  });
+}, z = (e) => {
+  if (!(typeof localStorage > "u"))
+    try {
+      const t = localStorage.getItem(i);
+      (t === "light" || t === "dark" || t === "system") && d(t, e);
+    } catch {
+    }
+}, E = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host{display:var(--ran-theme-switch-display, inline-flex);box-sizing:border-box}.ran-theme-switch{display:inline-flex;align-items:center;gap:var(--ran-theme-switch-gap, 2px);padding:var(--ran-theme-switch-padding, 2px);border-width:var(--ran-skin-border-width, 1px);border-style:var(--ran-skin-border-style, solid);border-color:var(--ran-theme-switch-border-color, var(--ran-color-border, #eaeaea));border-radius:var(--ran-theme-switch-radius, var(--ran-radius-full, 9999px));background:var(--ran-theme-switch-background, transparent);box-sizing:border-box}.ran-theme-switch button{width:var(--ran-theme-switch-button-size, 28px);height:var(--ran-theme-switch-button-size, 28px);display:grid;place-items:center;border:none;border-radius:var(--ran-theme-switch-radius, var(--ran-radius-full, 9999px));background:transparent;color:var(--ran-theme-switch-color, var(--ran-color-text-secondary, #4d4d4d));cursor:pointer;padding:0;transition:color var(--ran-motion-duration-fast, .15s) ease}.ran-theme-switch button:hover{color:var(--ran-theme-switch-hover-color, var(--ran-color-text, #171717))}.ran-theme-switch button[aria-pressed=true]{background:var(--ran-theme-switch-active-background, var(--ran-color-bg-hover, #ebebeb));color:var(--ran-theme-switch-active-color, var(--ran-color-text, #171717))}.ran-theme-switch button:focus-visible{outline:var(--ran-theme-switch-focus-outline, 2px solid var(--ran-color-primary, #006bff));outline-offset:2px}.ran-theme-switch svg{width:var(--ran-theme-switch-icon-size, 16px);height:var(--ran-theme-switch-icon-size, 16px)}", h = [
+  "system",
+  "light",
+  "dark"
+], S = {
+  system: '<svg viewBox="0 0 16 16" aria-hidden="true"><rect x="1.5" y="2.5" width="13" height="9" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M5.5 14h5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>',
+  light: '<svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="3" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M8 1v1.8M8 13.2V15M15 8h-1.8M2.8 8H1m11.4-4.4-1.3 1.3M4.9 11.1l-1.3 1.3m9.8 0-1.3-1.3M4.9 4.9 3.6 3.6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>',
+  dark: '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M13.5 9.5A6 6 0 0 1 6.5 2.5a6 6 0 1 0 7 7z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>'
+}, c = "ran-theme-switch-sync", A = class extends w {
+  static get observedAttributes() {
+    return [
+      "label-system",
+      "label-light",
+      "label-dark",
+      "sheet"
+    ];
+  }
+  _events = new g();
+  _shadowDom;
+  _group;
+  constructor() {
+    super(), this._shadowDom = b(this, E), this._group = f(this._shadowDom, ".ran-theme-switch", () => {
+      const e = document.createElement("div");
+      e.className = "ran-theme-switch", e.setAttribute("part", "switch"), e.setAttribute("role", "group");
+      for (const t of h) {
+        const r = document.createElement("button");
+        r.type = "button", r.dataset.choice = t, r.setAttribute("part", `button ${t}`), r.setAttribute("aria-pressed", "false"), r.innerHTML = S[t], e.appendChild(r);
+      }
+      return e;
+    });
+  }
+  get sheet() {
+    return v(this, "sheet");
+  }
+  set sheet(e) {
+    m(this, "sheet", e);
+  }
+  get value() {
+    return k() || "system";
+  }
+  set value(e) {
+    h.includes(e) && this._select(e);
+  }
+  _label(e) {
+    const t = {
+      system: "System theme",
+      light: "Light theme",
+      dark: "Dark theme"
+    }[e];
+    return this.getAttribute(`label-${e}`) || t;
+  }
+  _syncLabels() {
+    this._group.setAttribute("aria-label", this.getAttribute("label") || "Theme");
+    for (const e of this._group.querySelectorAll("button")) e.setAttribute("aria-label", this._label(e.dataset.choice));
+  }
+  _reflect() {
+    const e = this.value;
+    for (const t of this._group.querySelectorAll("button")) t.setAttribute("aria-pressed", t.dataset.choice === e ? "true" : "false");
+  }
+  _select(e) {
+    d(e), this._reflect(), this._syncMeta(e), document.dispatchEvent(new CustomEvent(c)), this.dispatchEvent(new CustomEvent("change", {
+      detail: { theme: e },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _syncMeta(e) {
+    if (typeof requestAnimationFrame > "u") return;
+    const t = document.querySelectorAll('meta[name="theme-color"]');
+    t.length && requestAnimationFrame(() => {
+      for (const r of t)
+        if (r.dataset.ranOriginalContent === void 0 && (r.dataset.ranOriginalContent = r.getAttribute("content") || ""), e === "system") r.setAttribute("content", r.dataset.ranOriginalContent);
+        else {
+          const n = getComputedStyle(document.documentElement).getPropertyValue("--ran-color-bg").trim() || getComputedStyle(document.body).backgroundColor;
+          r.setAttribute("content", n);
+        }
+    });
+  }
+  _handleClick = (e) => {
+    const t = e.target.closest?.("button")?.dataset.choice;
+    t && h.includes(t) && this._select(t);
+  };
+  _handleSync = () => this._reflect();
+  handlerExternalCss = () => {
+    u(this, this._shadowDom, "sheet", null, this.sheet);
+  };
+  connectedCallback() {
+    this.handlerExternalCss(), this._syncLabels(), this._reflect(), this._events.on(this._group, "click", this._handleClick), document.addEventListener(c, this._handleSync), typeof window < "u" && window.addEventListener("storage", this._handleSync);
+  }
+  disconnectedCallback() {
+    this._events.abort(), document.removeEventListener(c, this._handleSync), typeof window < "u" && window.removeEventListener("storage", this._handleSync);
+  }
+  attributeChangedCallback(e, t, r) {
+    t !== r && (e === "sheet" && this.handlerExternalCss(), e.startsWith("label") && this._syncLabels());
+  }
+};
+p("r-theme-switch", A);
+export {
+  d as a,
+  z as i,
+  x as n,
+  _ as o,
+  k as r,
+  L as s,
+  A as t
+};

package/dist/theme-switch.js

@@ -0,0 +1,5 @@
+import { t as e } from "./theme-switch-B8K9y2RL.js";
+export {
+  e as ThemeSwitch,
+  e as default
+};