ranui 0.2.1-alpha.3 → 0.2.1-alpha.5

package/dist/select.js

@@ -1,4 +1,4 @@
-import { t as e } from "./select-B58nMfB1.js";
+import { t as e } from "./select-DRKYa3W2.js";
 export {
   e as Select,
   e as default

package/dist/{skeleton-DoHYMsTn.js → skeleton-D7JIbROq.js}

@@ -1,5 +1,5 @@
 import { a as r, n, o as s, r as i, t as o } from "./utils-D1iZnChu.js";
-import { i as l } from "./factory-BkvRcCOx.js";
+import { i as l } from "./factory-ZNhcQ4tf.js";
 import { a as h, n as d } 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}@keyframes skeleton{0%{transform:translate(-37.5%)}to{transform:translate(37.5%)}}.ran-skeleton{position:relative;z-index:0;overflow:hidden;background:0 0;width:100%;height:var(--ran-skeleton-height, 16px);background:var(--ran-skeleton-background, var(--ran-gray-alpha-200, rgba(0, 0, 0, .06)));border-radius:var(--ran-skeleton-border-radius, var(--ran-radius-sm, 6px))}.ran-skeleton:after{position:absolute;top:0;inset-inline-end:-150%;bottom:0;inset-inline-start:-150%;background:var(--ran-skeleton-shimmer, linear-gradient(90deg, var(--ran-gray-alpha-200, rgba(0, 0, 0, .06)) 25%, var(--ran-gray-alpha-500, rgba(0, 0, 0, .15)) 37%, var(--ran-gray-alpha-200, rgba(0, 0, 0, .06)) 63%));animation-name:skeleton;animation-duration:var(--ran-skeleton-animation-duration, 1.4s);animation-timing-function:ease;animation-iteration-count:infinite;content:""}', m = class extends d {
   _div;

package/dist/skeleton.js

@@ -1,4 +1,4 @@
-import { t as e } from "./skeleton-DoHYMsTn.js";
+import { t as e } from "./skeleton-D7JIbROq.js";
 export {
   e as Skeleton,
   e as default

package/dist/{tab-BRPdZ9Ws.js → tab-DFVtDJb2.js}

@@ -1,6 +1,6 @@
 import { a as b, c, n as f, o as v, r as d, t as p } from "./utils-D1iZnChu.js";
 import { t as u } from "./events-C59wGdni.js";
-import { _ as g, i as h, p as y } from "./factory-BkvRcCOx.js";
+import { _ as g, i as h, p as y } from "./factory-ZNhcQ4tf.js";
 import { a as A, n as _ } from "./ssr-DSGwPtEd.js";
 var w = '.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}.ran-tab ::slotted(r-tab){box-sizing:border-box;width:100%;height:100%;padding:10px;flex-shrink:0;overflow:auto;text-align:start}.ran-tab-header{position:relative;overflow:hidden;scroll-behavior:smooth}.ran-tab-header-nav{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center}.ran-tab-header-nav::-webkit-scrollbar{display:none}.ran-tab-header-nav-item{flex-shrink:0}.ran-tab-header-nav .active{color:var(--ran-tab-active-color, var(--ran-color-primary, #006bff))}.ran-tab-header-line{position:absolute;width:0;margin-top:-2px;height:2px;border-radius:2px;background:var(--ran-tab-line-color, var(--ran-color-primary, #006bff));transition:var(--ran-tab-line-transition, left .2s, width .2s, transform .2s)}.ran-tab-content{overflow:hidden}.ran-tab-content-wrap{display:flex;width:100%;height:100%;transition:var(--ran-tab-content-transition, transform .2s)}:host([type="line"]) .ran-tab-header-nav-item{border:solid 1px transparent}:host([type="line"]) .ran-tab-header-nav .active{color:var(--ran-tab-line-color, var(--ran-color-primary, #006bff));border:solid 1px transparent;border-color:var(--ran-tab-border-color, var(--ran-color-border, rgba(0, 0, 0, .2))) var(--ran-tab-border-color, var(--ran-color-border, rgba(0, 0, 0, .2))) transparent;border-radius:var(--ran-tab-border-radius, var(--ran-radius-sm, .25em)) var(--ran-tab-border-radius, var(--ran-radius-sm, .25em)) 0 0}:host([type="line"]) .ran-tab-header-line{transition:none;visibility:hidden}:host([type="line"]) .ran-tab-header-line:after,:host([type="line"]) .ran-tab-header-line:before{content:"";position:absolute;visibility:visible;width:9999px;height:1px;bottom:0;background:var(--ran-tab-border-color, var(--ran-color-border, rgba(0, 0, 0, .2)))}:host([type="line"]) .ran-tab-header-line:after{left:100%}:host([type="line"]) .ran-tab-header-line:before{right:100%}:host([align="center"]) .ran-tab-header-nav{justify-content:center}:host([align="center"]) .ran-tab-header-line{left:50%}:host([align="end"]) .ran-tab-header-nav{justify-content:flex-end}', x = 0, m = class extends _ {
   static get observedAttributes() {

package/dist/tab.js

@@ -1,4 +1,4 @@
-import { t } from "./tab-BRPdZ9Ws.js";
+import { t } from "./tab-DFVtDJb2.js";
 export {
   t as Tabs,
   t as default

package/dist/{tabpane-Owf72hw_.js → tabpane-C3qZGN-D.js}

@@ -1,6 +1,6 @@
 import { a as s, n as r, o as a, t as n } from "./utils-D1iZnChu.js";
 import { t as h } from "./events-C59wGdni.js";
-import { p as o } from "./factory-BkvRcCOx.js";
+import { p as o } from "./factory-ZNhcQ4tf.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 {
   static get observedAttributes() {

package/dist/tabpane.js

@@ -1,4 +1,4 @@
-import { t } from "./tabpane-Owf72hw_.js";
+import { t } from "./tabpane-C3qZGN-D.js";
 export {
   t as TabPane,
   t as default

package/dist/test/ssr/stream.test.d.ts

@@ -1,2 +1,3 @@
 import '@/components/button/index';
 import '@/components/progress/index';
+import '@/components/theme-switch/index';

package/dist/{theme-switch-CZDIIonc.js → theme-switch-BXNH5uPD.js}

@@ -1,16 +1,18 @@
-import { a as i, n as o, o as h, r as c, t as l } from "./utils-D1iZnChu.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 = [
+import { a as i, n as o, o as h, r as l, t as c } from "./utils-D1iZnChu.js";
+import { c as d } from "./mocks-CMGoftIc.js";
+import { t as u } from "./events-C59wGdni.js";
+import { i as m, n as b } from "./factory-ZNhcQ4tf.js";
+import { a as v, n as p } from "./ssr-DSGwPtEd.js";
+import { i as g, n as w } from "./theme-kOWZbKCq.js";
+var f = ".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 = {
+], y = {
   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 {
+}, s = "ran-theme-switch-sync", _ = class extends p {
   static get observedAttributes() {
     return [
       "label-system",
@@ -19,70 +21,68 @@ var g = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transpar
       "sheet"
     ];
   }
-  _events = new d();
+  _events = new u();
   _shadowDom;
   _group;
   constructor() {
-    super(), this._shadowDom = o(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;
+    super(), this._shadowDom = o(this, f), this._group = c(this._shadowDom, ".ran-theme-switch", () => {
+      const t = a.map((e) => {
+        const r = b().attr("type", "button").data("choice", e).attr("part", `button ${e}`).aria("pressed", "false").build();
+        return d || (r.innerHTML = y[e]), r;
+      });
+      return m().class("ran-theme-switch").attr("part", "switch").role("group").children(t).build();
     });
   }
   get sheet() {
-    return c(this, "sheet");
+    return l(this, "sheet");
   }
-  set sheet(e) {
-    i(this, "sheet", e);
+  set sheet(t) {
+    i(this, "sheet", t);
   }
   get value() {
-    return v() || "system";
+    return w() || "system";
   }
-  set value(e) {
-    a.includes(e) && this._select(e);
+  set value(t) {
+    a.includes(t) && this._select(t);
   }
-  _label(e) {
-    const t = {
+  _label(t) {
+    const e = {
       system: "System theme",
       light: "Light theme",
       dark: "Dark theme"
-    }[e];
-    return this.getAttribute(`label-${e}`) || t;
+    }[t];
+    return this.getAttribute(`label-${t}`) || e;
   }
   _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));
+    for (const t of this._group.querySelectorAll("button")) t.setAttribute("aria-label", this._label(t.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");
+    const t = this.value;
+    for (const e of this._group.querySelectorAll("button")) e.setAttribute("aria-pressed", e.dataset.choice === t ? "true" : "false");
   }
-  _select(e) {
-    b(e), this._reflect(), this._syncMeta(e), document.dispatchEvent(new CustomEvent(s)), this.dispatchEvent(new CustomEvent("change", {
-      detail: { theme: e },
+  _select(t) {
+    g(t), this._reflect(), this._syncMeta(t), document.dispatchEvent(new CustomEvent(s)), this.dispatchEvent(new CustomEvent("change", {
+      detail: { theme: t },
       bubbles: !0,
       composed: !0
     }));
   }
-  _syncMeta(e) {
+  _syncMeta(t) {
     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);
+    const e = document.querySelectorAll('meta[name="theme-color"]');
+    e.length && requestAnimationFrame(() => {
+      for (const r of e)
+        if (r.dataset.ranOriginalContent === void 0 && (r.dataset.ranOriginalContent = r.getAttribute("content") || ""), t === "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);
+  _handleClick = (t) => {
+    const e = t.target.closest?.("button")?.dataset.choice;
+    e && a.includes(e) && this._select(e);
   };
   _handleSync = () => this._reflect();
   handlerExternalCss = () => {
@@ -94,11 +94,11 @@ var g = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transpar
   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());
+  attributeChangedCallback(t, e, r) {
+    e !== r && (t === "sheet" && this.handlerExternalCss(), t.startsWith("label") && this._syncLabels());
   }
 };
-u("r-theme-switch", w);
+v("r-theme-switch", _);
 export {
-  w as t
+  _ as t
 };

package/dist/theme-switch.js

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

package/dist/utils/builder/core.d.ts

@@ -8,13 +8,14 @@ export declare const createRef: <T extends HTMLElement = HTMLElement>() => Ref<T
  *  Internal helper — the public, general type is {@link Child}. */
 type StaticChild = HTMLElement | string | ElementBuilder<any> | undefined | null;
 /**
- * The one type every `children()` / `replaceChildren()` argument accepts:
- * a node, text, nested builder, `null`/`undefined`, a (nested) array of those,
- * a getter `() => …` marking a reactive region (re-evaluated when a signal it
- * reads changes; rebuilds the region — see docs), or a {@link For} handle for a
- * keyed list (reuses nodes across updates). On SSR getters / `For` render once.
+ * The one type every `children()` / `replaceChildren()` argument accepts —
+ * fully composable (recursive): a node, text, nested builder, `null`/`undefined`,
+ * a (nested) array, a {@link For}/{@link Index} handle for a keyed list, or a
+ * getter `() => Child` marking a reactive region. A getter (or `Show`/`Switch`
+ * branch) may itself return any `Child`, including a `For`/`Index` or another
+ * getter — control-flow nests freely. On SSR getters / `For` / `Index` render once.
  */
-export type Child = StaticChild | StaticChild[] | (() => StaticChild | StaticChild[]) | ForHandle | IndexHandle;
+export type Child = StaticChild | ForHandle | IndexHandle | Child[] | (() => Child);
 declare const FOR_BRAND = "__ranFor";
 /** Options for {@link For}. */
 export interface ForOptions<T> {
@@ -54,11 +55,12 @@ export declare function For<T>(options: ForOptions<T>): ForHandle;
 export interface ShowOptions<T> {
     /** Condition source. Truthy → `children`, falsy → `fallback`. */
     when: () => T;
-    /** Built when `when` is truthy. Receives an accessor to the narrowed value —
+    /** Built when `when` is truthy. May return any {@link Child} — a `For`/`Index`
+     *  list, a nested `Show`, etc. Receives an accessor to the narrowed value —
      *  read it inside a binding (`.text(() => v())`) to update without rebuilding. */
-    children: (value: () => NonNullable<T>) => StaticChild;
+    children: (value: () => NonNullable<T>) => Child;
     /** Built when `when` is falsy. Omitted → nothing is rendered. */
-    fallback?: () => StaticChild;
+    fallback?: () => Child;
 }
 /**
  * Fine-grained conditional child. Unlike a raw getter child (which re-runs on
@@ -76,11 +78,11 @@ export interface ShowOptions<T> {
  * `Show` returns a getter, so it is accepted anywhere `children()` takes a child.
  * Must be created inside a `createRoot` (it owns a memo + the branch effect).
  */
-export declare function Show<T>(options: ShowOptions<T>): () => StaticChild;
+export declare function Show<T>(options: ShowOptions<T>): () => Child;
 /** One branch of a {@link Switch}; build with {@link Match}. */
 export interface MatchClause<T> {
     when: () => T;
-    children: (value: () => NonNullable<T>) => StaticChild;
+    children: (value: () => NonNullable<T>) => Child;
 }
 /** Declare one `Switch` branch (identity helper — gives per-clause type inference). */
 export declare function Match<T>(clause: MatchClause<T>): MatchClause<T>;
@@ -90,7 +92,7 @@ export interface SwitchOptions {
      *  heterogeneous (each `Match<T>` carries its own `T`), hence `any` here. */
     children: MatchClause<any>[];
     /** Rendered when no branch matches. Omitted → nothing. */
-    fallback?: () => StaticChild;
+    fallback?: () => Child;
 }
 /**
  * Fine-grained multi-branch conditional (the n-way `Show`). Renders the first
@@ -107,7 +109,7 @@ export interface SwitchOptions {
  *     ],
  *   })
  */
-export declare function Switch(options: SwitchOptions): () => StaticChild;
+export declare function Switch(options: SwitchOptions): () => Child;
 declare const INDEX_BRAND = "__ranIndex";
 /** Options for {@link Index}. */
 export interface IndexOptions<T> {

package/docs/BUILDER.md

@@ -195,6 +195,21 @@ Div().children(
 binding so it updates without rebuilding. `Show` returns a getter, so it slots
 into `children()` anywhere.
 
+**Control flow composes.** A `Show`/`Switch` branch (and any reactive getter) may
+return **any `Child`** — including a `For`/`Index` list or a nested `Show` — no
+wrapper element needed:
+
+```ts
+Show({
+  when: () => loaded(),
+  children: () => For({ each: () => rows(), key: (r) => r.id, render: (r) => Li().text(r.title) }),
+  fallback: () => Spinner(),
+});
+```
+
+When the branch flips away, the nested list's scope (its effects) is disposed and
+its nodes removed; re-entering rebuilds fresh from the current source.
+
 ### Multi-branch — `Switch` / `Match`
 
 `Switch` is the n-way `Show`: it renders the **first** `Match` whose `when` is

package/docs/COMPONENTS.md

@@ -6,9 +6,9 @@ shape), slots, and `::part()` names — extracted from source. For CSS variables
 (theming tokens) see [style-tokens-public.md](./style-tokens-public.md); for
 design rules see [DESIGN.md](./DESIGN.md).
 
-Generated at: 2026-07-12T08:47:20.080Z
+Generated at: 2026-07-19T06:15:56.300Z
 
-30 custom elements.
+32 custom elements.
 
 ## `<r-button>`
 
@@ -100,6 +100,23 @@ Source: `components/form/index.ts`
 - **Slots**: `default`, `r-form_content (named)`
 - **Parts**: —
 
+## `<r-glass>`
+
+Source: `components/glass/index.ts`
+
+- **Attributes**: `blur`, `displace: string`, `frequency: string`, `radius: string`, `saturate: string`, `tint: string`
+- **Properties**:
+  - `displace: string` — Liquid refraction strength — the SVG displacement scale. `0` is a flat pane.
+  - `frequency: string` — Turbulence base frequency — smaller = larger, smoother liquid ripples.
+  - `interactive: boolean` — Hover lift + press-scale feedback (for clickable glass).
+  - `radius: string` — Corner radius, in px.
+  - `saturate: string` — `r-glass` — a liquid / frosted glass surface.
+  - `sheen: boolean` — Animated specular sweep across the surface.
+  - `tint: string` — Glass fill tint (any CSS background value).
+- **Events**: —
+- **Slots**: `default`
+- **Parts**: `glass`, `specular`
+
 ## `<r-icon>`
 
 Source: `components/icon/index.ts`
@@ -155,7 +172,7 @@ Source: `components/input/index.ts`
   - `status: string` — input 框的状态
   - `step: string` — 当 input 类型为 number 类型时，可以获取 step 属性
   - `type: string` — input 的类型
-  - `value: string` — input 的值
+  - `value: string` — 聚焦到内部原生 <input>。宿主自身不在 tab 序、也无内建 focus 行为，
 - **Events**: `change` → detail `{ value }` · `input` → detail `{ value }`
 - **Slots**: —
 - **Parts**: `content`, `input`, `label`, `message`
@@ -190,6 +207,16 @@ Source: `components/math/index.ts`
 - **Slots**: —
 - **Parts**: —
 
+## `<r-mermaid>`
+
+Source: `components/mermaid/index.ts`
+
+- **Attributes**: `code: string`, `copy`, `download`, `fullscreen`, `sheet: string`, `theme: string`
+- **Properties**: `code: string`, `copyable: boolean`, `downloadable: boolean`, `fullscreenable: boolean`, `sheet: string`, `theme: string`
+- **Events**: —
+- **Slots**: —
+- **Parts**: `button`, `diagram`, `error`, `menu`, `mermaid`, `toolbar`
+
 ## `<r-message>`
 
 Source: `components/message/index.ts`
@@ -204,8 +231,17 @@ Source: `components/message/index.ts`
 
 Source: `components/modal/index.ts`
 
-- **Attributes**: `autoFocus: boolean`, `closable: boolean`, `closeOnEsc: boolean`, `lockScroll: boolean`, `maskClosable: boolean`, `open: boolean`, `sheet: string`, `title: string`
-- **Properties**: `autoFocus: boolean`, `closable: boolean`, `closeOnEsc: boolean`, `lockScroll: boolean`, `maskClosable: boolean`, `open: boolean`, `sheet: string`, `title: string`
+- **Attributes**: `autoFocus: boolean`, `closable: boolean`, `closeOnEsc: boolean`, `hide-header`, `lockScroll: boolean`, `maskClosable: boolean`, `open: boolean`, `sheet: string`, `title: string`
+- **Properties**:
+  - `autoFocus: boolean`
+  - `closable: boolean`
+  - `closeOnEsc: boolean`
+  - `hideHeader: boolean` — Headerless mode: drops the title bar and its border, leaving only a floating
+  - `lockScroll: boolean`
+  - `maskClosable: boolean`
+  - `open: boolean`
+  - `sheet: string`
+  - `title: string`
 - **Events**: `afterclose` → detail `{ trigger }` · `afteropen` · `beforeclose` → detail `{ trigger }` · `beforeopen` · `close` → detail `{ trigger }` · `open`
 - **Slots**: `default`, `footer (named)`
 - **Parts**: `body`, `close`, `dialog`, `footer`, `header`, `mask`, `root`, `title`
@@ -355,4 +391,4 @@ Source: `components/theme-switch/index.ts`
   - `value: RanThemeName` — `<r-theme-switch>` — a three-state (system / light / dark) segmented control
 - **Events**: `change` → detail `{ theme }`
 - **Slots**: —
-- **Parts**: —
+- **Parts**: `button ${choice}`, `switch`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ranui",
-  "version": "0.2.1-alpha.3",
+  "version": "0.2.1-alpha.5",
   "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",