ranui 0.2.0-alpha.5 → 0.2.0-alpha.7

package/dist/index.js

@@ -1,81 +1,82 @@
 import { n as r } from "./player-5olrw-qB.js";
 import { t as a } from "./button-Be_uHDZG.js";
-import { a as m, i as s, n as i, o as p, r as n, s as f, t as c } from "./theme-switch-B_FZvqBN.js";
-import { n as h, r as P, t as l } from "./icon-pfolda2m.js";
-import { t as S } from "./image-BXpKQ9sU.js";
-import { t as u } from "./input-BMMM60e6.js";
-import { t as k } from "./message-CLpuP8HY.js";
-import { t as d } from "./skeleton-CFqQmKyt.js";
-import { t as E } from "./tabpane-B-m3xwqu.js";
-import { t as _ } from "./tab-CiF2YPck.js";
-import { t as w } from "./radar-DAF95_Mj.js";
-import { t as G } from "./modal-DOTpABRe.js";
-import { t as N } from "./select-aAaWoveE.js";
-import { n as O, t as Y } from "./dropdown-BYS1Trdu.js";
-import { t as B } from "./math-IjzOAwnA.js";
-import { t as F } from "./progress-BIEXYYd2.js";
-import { t as W } from "./checkbox-BtoX9X2Z.js";
-import { t as q } from "./colorpicker-Dukms7ET.js";
-import { n as H, t as J } from "./popover-DRUQjdPs.js";
-import { n as Q, t as U } from "./loading-BScjyeVm.js";
-import { t as Z } from "./form-BsB5JhS4.js";
+import { a as m, i as s, n as i, o as p, r as n, t as f } from "./theme-kOWZbKCq.js";
+import { n as T, r as h, t as P } from "./icon-pfolda2m.js";
+import { t as R } from "./image-BXpKQ9sU.js";
+import { t as g } from "./input-BMMM60e6.js";
+import { t as C } from "./message-CLpuP8HY.js";
+import { t as I } from "./skeleton-CFqQmKyt.js";
+import { t as M } from "./tabpane-B-m3xwqu.js";
+import { t as b } from "./tab-CiF2YPck.js";
+import { t as A } from "./radar-DAF95_Mj.js";
+import { t as x } from "./modal-DOTpABRe.js";
+import { t as L } from "./select-aAaWoveE.js";
+import { n as y, t as O } from "./dropdown-BYS1Trdu.js";
+import { t as v } from "./math-IjzOAwnA.js";
+import { t as D } from "./progress-BIEXYYd2.js";
+import { t as V } from "./checkbox-BtoX9X2Z.js";
+import { t as j } from "./colorpicker-Dukms7ET.js";
+import { n as z, t as H } from "./popover-DRUQjdPs.js";
+import { n as K, t as Q } from "./loading-BScjyeVm.js";
+import { t as X } from "./form-BsB5JhS4.js";
 import "./scratch-QlPyy1f4.js";
-import { t as ro } from "./card-BVvXX6KM.js";
-import { t as ao } from "./section-D0qMm9KM.js";
-import { t as mo } from "./router-B9rCrWXm.js";
-import { RouterCore as io, clearSSGPath as po, createRouter as no, enableMpaViewTransitions as fo, getSSGPath as co, setSSGPath as To, useRouter as ho } from "./utils/router.js";
-import { t as lo } from "./route-MQZpn2BP.js";
-import { t as So } from "./link-DURZzd7u.js";
-import { I18nCore as uo, createI18n as Co, useI18n as ko } from "./utils/i18n.js";
-import { generateStaticPages as Mo, renderStaticPage as Eo } from "./ssg.js";
+import { t as oo } from "./card-BVvXX6KM.js";
+import { t as to } from "./section-D0qMm9KM.js";
+import { t as eo } from "./router-B9rCrWXm.js";
+import { RouterCore as so, clearSSGPath as io, createRouter as po, enableMpaViewTransitions as no, getSSGPath as fo, setSSGPath as co, useRouter as To } from "./utils/router.js";
+import { t as Po } from "./route-MQZpn2BP.js";
+import { t as Ro } from "./link-DURZzd7u.js";
+import { t as go } from "./theme-switch-B09egc6h.js";
+import { I18nCore as Co, createI18n as ko, useI18n as Io } from "./utils/i18n.js";
+import { generateStaticPages as Eo, renderStaticPage as bo } from "./ssg.js";
 export {
-  Y as ARROW_TYPE,
+  O as ARROW_TYPE,
   a as Button,
-  ro as Card,
-  k as CustomMessage,
-  O as Dropdown,
-  Z as Form,
-  uo as I18nCore,
-  U as ICON_NAME_AMP,
-  l as Icon,
-  S as ImageElement,
-  u as Input,
-  So as Link,
-  Q as Loading,
-  B as Math,
-  J as PLACEMENT_TYPE,
-  H as Popover,
-  F as Progress,
-  w as RadarChart,
-  W as RanCheckbox,
-  q as RanColorPicker,
-  G as RanModal,
+  oo as Card,
+  C as CustomMessage,
+  y as Dropdown,
+  X as Form,
+  Co as I18nCore,
+  Q as ICON_NAME_AMP,
+  P as Icon,
+  R as ImageElement,
+  g as Input,
+  Ro as Link,
+  K as Loading,
+  v as Math,
+  H as PLACEMENT_TYPE,
+  z as Popover,
+  D as Progress,
+  A as RadarChart,
+  V as RanCheckbox,
+  j as RanColorPicker,
+  x as RanModal,
   r as RanPlayer,
-  lo as Route,
-  mo as Router,
-  io as RouterCore,
-  ao as Section,
-  N as Select,
-  d as Skeleton,
-  E as TabPane,
-  _ as Tabs,
-  c as ThemeSwitch,
-  po as clearSSGPath,
-  i as clearThemeToken,
-  Co as createI18n,
-  no as createRouter,
-  fo as enableMpaViewTransitions,
-  Mo as generateStaticPages,
-  co as getSSGPath,
-  n as getTheme,
-  s as initTheme,
-  h as registerIcon,
-  P as registerIcons,
-  Eo as renderStaticPage,
-  To as setSSGPath,
-  m as setTheme,
-  p as setThemeToken,
-  f as setThemeTokens,
-  ko as useI18n,
-  ho as useRouter
+  Po as Route,
+  eo as Router,
+  so as RouterCore,
+  to as Section,
+  L as Select,
+  I as Skeleton,
+  M as TabPane,
+  b as Tabs,
+  go as ThemeSwitch,
+  io as clearSSGPath,
+  f as clearThemeToken,
+  ko as createI18n,
+  po as createRouter,
+  no as enableMpaViewTransitions,
+  Eo as generateStaticPages,
+  fo as getSSGPath,
+  i as getTheme,
+  n as initTheme,
+  T as registerIcon,
+  h as registerIcons,
+  bo as renderStaticPage,
+  co as setSSGPath,
+  s as setTheme,
+  m as setThemeToken,
+  p as setThemeTokens,
+  Io as useI18n,
+  To as useRouter
 };

package/dist/theme-kOWZbKCq.js

@@ -0,0 +1,70 @@
+var i = "ran-theme", s = null, a = 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;
+}, m = (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");
+}, l = () => {
+  s && a && (s.removeEventListener("change", a), s = null, a = null);
+}, c = (e, t) => {
+  const r = o(t);
+  if (r) {
+    if (l(), e === "system") {
+      if (typeof window > "u") return;
+      m(r), s = window.matchMedia("(prefers-color-scheme: dark)"), a = () => m(r), s.addEventListener("change", a);
+      try {
+        localStorage.setItem(i, "system");
+      } catch {
+      }
+      return;
+    }
+    r.setAttribute("data-ran-theme", e), r.setAttribute("theme", e);
+    try {
+      localStorage.setItem(i, e);
+    } catch {
+    }
+  }
+}, h = (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 "";
+}, u = (e, t, r) => {
+  const n = o(r);
+  n && n.style.setProperty(e, String(t));
+}, d = (e, t) => {
+  const r = o(t);
+  r && r.style.removeProperty(e);
+}, f = (e, t) => {
+  Object.entries(e).forEach(([r, n]) => {
+    if (n == null) {
+      d(r, t);
+      return;
+    }
+    u(r, n, t);
+  });
+}, y = (e) => {
+  if (!(typeof localStorage > "u"))
+    try {
+      const t = localStorage.getItem(i);
+      (t === "light" || t === "dark" || t === "system") && c(t, e);
+    } catch {
+    }
+};
+export {
+  u as a,
+  c as i,
+  h as n,
+  f as o,
+  y as r,
+  d as t
+};

package/dist/theme-switch-B09egc6h.js

@@ -0,0 +1,104 @@
+import { a as i, i as o, n as h, r as c, t as l } from "./utils-DBfrRFoE.js";
+import { t as d } from "./events-C59wGdni.js";
+import { a as u, n as m } from "./ssr-DSGwPtEd.js";
+import { i as b, n as v } from "./theme-kOWZbKCq.js";
+var g = ".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}.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)}", a = [
+  "system",
+  "light",
+  "dark"
+], p = {
+  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>'
+}, s = "ran-theme-switch-sync", w = class extends m {
+  static get observedAttributes() {
+    return [
+      "label-system",
+      "label-light",
+      "label-dark",
+      "sheet"
+    ];
+  }
+  _events = new d();
+  _shadowDom;
+  _group;
+  constructor() {
+    super(), this._shadowDom = h(this, g), this._group = l(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 a) {
+        const r = document.createElement("button");
+        r.type = "button", r.dataset.choice = t, r.setAttribute("part", `button ${t}`), r.setAttribute("aria-pressed", "false"), r.innerHTML = p[t], e.appendChild(r);
+      }
+      return e;
+    });
+  }
+  get sheet() {
+    return c(this, "sheet");
+  }
+  set sheet(e) {
+    o(this, "sheet", e);
+  }
+  get value() {
+    return v() || "system";
+  }
+  set value(e) {
+    a.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) {
+    b(e), this._reflect(), this._syncMeta(e), document.dispatchEvent(new CustomEvent(s)), 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 && a.includes(t) && this._select(t);
+  };
+  _handleSync = () => this._reflect();
+  handlerExternalCss = () => {
+    i(this, this._shadowDom, "sheet", null, this.sheet);
+  };
+  connectedCallback() {
+    this.handlerExternalCss(), this._syncLabels(), this._reflect(), this._events.on(this._group, "click", this._handleClick), document.addEventListener(s, this._handleSync), typeof window < "u" && window.addEventListener("storage", this._handleSync);
+  }
+  disconnectedCallback() {
+    this._events.abort(), document.removeEventListener(s, 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());
+  }
+};
+u("r-theme-switch", w);
+export {
+  w as t
+};

package/dist/theme-switch.js

@@ -1,4 +1,4 @@
-import { t as e } from "./theme-switch-B_FZvqBN.js";
+import { t as e } from "./theme-switch-B09egc6h.js";
 export {
   e as ThemeSwitch,
   e as default

package/dist/theme.d.ts

@@ -0,0 +1,2 @@
+export { setTheme, getTheme, setThemeToken, clearThemeToken, setThemeTokens, initTheme } from '@/utils/theme';
+export type { RanThemeName, ThemeTarget, ThemeTokenMap } from '@/utils/theme';

package/dist/theme.js

@@ -0,0 +1,9 @@
+import { a as s, i as T, n as a, o as m, r as t, t as o } from "./theme-kOWZbKCq.js";
+export {
+  o as clearThemeToken,
+  a as getTheme,
+  t as initTheme,
+  T as setTheme,
+  s as setThemeToken,
+  m as setThemeTokens
+};

package/dist/utils/i18n/index.d.ts

@@ -37,9 +37,25 @@ export declare class I18nCore {
     get availableLocales(): string[];
     /**
      * Translate a key against the active locale, falling back to the fallback
-     * locale and finally the key itself. `{param}` placeholders are interpolated.
+     * locale and finally the key itself. `{param}` placeholders are interpolated;
+     * `{{` / `}}` are escapes for literal `{` / `}` (see {@link I18nCore._interpolate}).
      */
     t(key: string, params?: TranslateParams): string;
+    /**
+     * Substitute `{param}` placeholders and unescape literal braces.
+     *
+     * Grammar (a single left-to-right pass, so escapes and placeholders never
+     * fight each other), matching the format-string convention used by Rust
+     * `format!`, Python `str.format`, and .NET `String.Format`:
+     * - `{{` → literal `{`
+     * - `}}` → literal `}`
+     * - `{name}` → `params.name` (stringified), or left untouched when the param
+     *   is absent, so a stray placeholder is visible rather than silently blank.
+     *
+     * A lone `{`/`}` or a `{ spaced }` group is not a placeholder and is emitted
+     * verbatim, so CSS/JSON/code fragments in a message pass through unharmed.
+     * To wrap a value in literal braces, double the outer pair: `{{{name}}}`.
+     */
     private _interpolate;
     /** Subscribe to locale changes. Returns an unsubscribe function. */
     onChange(handler: LocaleChangeHandler): () => void;

package/dist/utils/i18n.js

@@ -1,21 +1,21 @@
-var l = "ran-locale", n = (e) => {
+var n = "ran-locale", i = Object.freeze({}), o = (e) => {
   if (typeof localStorage > "u") return null;
   try {
     return localStorage.getItem(e);
   } catch {
     return null;
   }
-}, i = (e, t) => {
+}, _ = (e, t) => {
   if (!(typeof localStorage > "u"))
     try {
       localStorage.setItem(e, t);
     } catch {
     }
-}, o = (e) => {
+}, c = (e) => {
   if (typeof navigator > "u" || !navigator.language) return null;
   const t = navigator.language.toLowerCase();
   return e.find((s) => s.toLowerCase() === t) ?? e.find((s) => t.startsWith(s.toLowerCase())) ?? e.find((s) => t.startsWith(`${s.toLowerCase()}-`)) ?? null;
-}, _ = class {
+}, h = class {
   _locale;
   _fallback;
   _messages;
@@ -23,14 +23,14 @@ var l = "ran-locale", n = (e) => {
   _storageKey;
   _handlers = /* @__PURE__ */ new Set();
   constructor(e = {}) {
-    this._messages = { ...e.messages }, this._fallback = e.fallbackLocale ?? "en", this._persist = e.persist ?? !1, this._storageKey = e.storageKey ?? l, this._locale = this._resolveInitialLocale(e);
+    this._messages = { ...e.messages }, this._fallback = e.fallbackLocale ?? "en", this._persist = e.persist ?? !1, this._storageKey = e.storageKey ?? n, this._locale = this._resolveInitialLocale(e);
   }
   _resolveInitialLocale(e) {
-    const t = Object.keys(this._messages), s = this._persist ? n(this._storageKey) : null;
+    const t = Object.keys(this._messages), s = this._persist ? o(this._storageKey) : null;
     if (s && (this._messages[s] || t.length === 0)) return s;
     if (e.locale) return e.locale;
     if (e.detectNavigator) {
-      const r = o(t);
+      const r = c(t);
       if (r) return r;
     }
     return this._fallback;
@@ -42,7 +42,7 @@ var l = "ran-locale", n = (e) => {
     return this._locale;
   }
   setLocale(e) {
-    e !== this._locale && (this._locale = e, this._persist && i(this._storageKey, e), this._notify());
+    e !== this._locale && (this._locale = e, this._persist && _(this._storageKey, e), this._notify());
   }
   addMessages(e, t) {
     this._messages[e] = {
@@ -61,7 +61,8 @@ var l = "ran-locale", n = (e) => {
     return this._interpolate(s, t);
   }
   _interpolate(e, t) {
-    return t ? e.replace(/\{(\w+)\}/g, (s, r) => t[r] != null ? String(t[r]) : s) : e;
+    const s = t ?? i;
+    return e.replace(/\{\{|\}\}|\{(\w+)\}/g, (r, l) => r === "{{" ? "{" : r === "}}" ? "}" : s[l] != null ? String(s[l]) : r);
   }
   onChange(e) {
     return this._handlers.add(e), () => {
@@ -75,14 +76,14 @@ var l = "ran-locale", n = (e) => {
     this._handlers.clear();
   }
 }, a = null;
-function h(e = {}) {
-  return a = new _(e), a;
+function u(e = {}) {
+  return a = new h(e), a;
 }
-function c() {
+function g() {
   return a;
 }
 export {
-  _ as I18nCore,
-  h as createI18n,
-  c as useI18n
+  h as I18nCore,
+  u as createI18n,
+  g as useI18n
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ranui",
-  "version": "0.2.0-alpha.5",
-  "description": "UI Component library based on `Web Component`",
+  "version": "0.2.0-alpha.7",
+  "description": "A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "type": "module",
@@ -17,6 +17,12 @@
       "ssr-stream": [
         "./dist/ssr-stream.d.ts"
       ],
+      "theme": [
+        "./dist/theme.d.ts"
+      ],
+      "i18n": [
+        "./dist/i18n.d.ts"
+      ],
       "typings": [
         "./dist/typings.d.ts"
       ],
@@ -47,16 +53,23 @@
     "docs/style-tokens-public.md"
   ],
   "keywords": [
+    "ranui",
     "ran",
+    "web-components",
+    "web components",
+    "custom-elements",
+    "custom-element",
+    "shadow-dom",
+    "framework-agnostic",
     "component",
     "components",
     "ui",
+    "ui-library",
+    "component-library",
     "design",
-    "web-components",
-    "web components",
-    "webComponents",
-    "ranui",
-    "lib"
+    "typescript",
+    "ssr",
+    "pwa"
   ],
   "exports": {
     ".": {
@@ -81,6 +94,16 @@
       "import": "./dist/ssr-stream.js",
       "require": "./dist/index.cjs"
     },
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "import": "./dist/theme.js",
+      "require": "./dist/index.cjs"
+    },
+    "./i18n": {
+      "types": "./dist/i18n.d.ts",
+      "import": "./dist/i18n.js",
+      "require": "./dist/index.cjs"
+    },
     "./button": {
       "types": "./dist/index.d.ts",
       "import": "./dist/button.js",
@@ -237,7 +260,7 @@
     "vitest": "^4.1.10"
   },
   "dependencies": {
-    "ranuts": "^0.2.0-alpha.0"
+    "ranuts": "^0.2.0-alpha.1"
   },
   "scripts": {
     "dev": "vite --host",