ranui 0.2.1-alpha.3 → 0.2.1-alpha.4

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/package.json

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